:root {
  --background-color: #FFF;
  --background-darker: #EEE;
  --primary-color: #2F2FE1;
  --primary-color-dark: color-mix(in srgb, var(--primary-color), #000000 80%);
  --text-on-primary-color: #FFF;
  /* --color-red: #FE2060; */
  /* --color-red: #EE1D59; */
  --color-red: #E31B39;
}

html {
  background-color: var(--background-color);
}

body {
  /* position: relative; */
  font-family: sans-serif;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

#app {
  padding: 12px;
}

header {
  background: var(--background-darker);
  height: 60px;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 12px;

  border: 2px solid black;
  border-radius: 12px;
  margin: 12px;
  box-shadow: 4px 2px 12px -5px black;

  a {
    font-size: 2em;
    text-decoration: none;
    color: black;
  }


  .logout_form {
    display: contents;

    button {
      margin-left: auto;
    }
  }
}

.login_window {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button,
.button {
  border: none;
  background: var(--primary-color);
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--text-on-primary-color);
  font-size: 0.9em;

  &:hover {
    filter: brightness(90%);
  }

  &.delete,
  &.cancel {
    background: var(--color-red);
  }
}

input[type="text"],
input[type="password"] {
  border: 1px solid black;
  border-radius: 8px;
  padding: 4px 8px;
}


.font_bold {
  font-weight: bold;
}

section {
  border: 1px solid black;
  border-radius: 12px;
  box-shadow: 4px 2px 12px -8px black;
  border-collapse: collapse;
  padding: 8px 12px 12px;
  margin: 18px 8px;
  overflow: hidden;
  max-width: 100%;
}

table {
  border: 1px solid black;
  border-radius: 12px;
  box-shadow: 4px 2px 12px -6px black;
  border-collapse: collapse;
  overflow-x: scroll;
  width: 100%;

  td,
  th {
    padding: 8px;
    border: 1px solid black;
    width: max-content;
  }

  th {
    height: 40px;
  }

  /* tr:nth-of-type(2n+1) { */
  /*   background: var(--background-darker); */
  /* } */

  tr:hover {
    background: #DDD;
  }

  tr:first-child th {
    border-top: 0;
  }

  tr:last-child td {
    border-bottom: 0;
  }

  tr :first-child {
    border-left: 0;
  }

  tr :last-child {
    border-right: 0;
  }
}

#page-user {
  ul {
    padding-left: 0;

    li.collection-list-item {
      list-style: none;
      display: contents;

      a {
        background: #EEE;
        display: grid;
        min-height: 80px;
        grid-template-areas:
          ".                .                 color-chip"
          "title            comps             color-chip"
          "description      description       color-chip"
          "subscription-url subscription-url  color-chip"
          "actions          actions           color-chip"
          ".                .                 color-chip";
        grid-template-rows: 12px auto auto auto auto 12px;
        grid-template-columns: min-content auto 80px;
        row-gap: 4px;
        color: inherit;
        text-decoration: none;
        padding-left: 12px;

        border: 2px solid black;
        border-radius: 12px;
        margin: 12px;
        box-shadow: 4px 2px 12px -6px black;
        overflow: hidden;

        .title {
          font-weight: bold;
          grid-area: title;
          margin-right: 12px;
          white-space: nowrap;
        }

        span {
          margin: 8px initial;
        }

        .comps {
          grid-area: comps;

          span {
            margin: 0 2px;
            background: var(--primary-color);
            color: var(--text-on-primary-color);
            font-size: .8em;
            padding: 3px 8px;
            border-radius: 12px;
          }
        }

        .description {
          grid-area: description;
          white-space: nowrap;
        }

        .subscription-url {
          grid-area: subscription-url;
          white-space: nowrap;
        }

        .color-chip {
          background: var(--color);
          grid-area: color-chip;
        }

        .actions {
          grid-area: actions;
          width: fit-content;
          display: flex;
          gap: 12px;
        }

        &:hover {
          background: #DDD;
        }
      }
    }
  }
}

textarea {
  width: 100%;
}

dialog {
  border: 1px solid black;
  border-radius: 16px;
  padding: 32px;
}

footer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  gap: 24px;
  /* position: absolute; */
  bottom: 20px;
}