/* stylelint-disable no-descending-specificity */
/* stylelint-disable media-feature-range-notation */

[hidden],
.hidden {
  display: none !important;
}

.hint {
  margin-top: 10px;
  color: red;
}

.debug {
  background-color: rgba(241 8 8 / 0.3);
}

body {
  --border-radius: 5px;
  --main-bg-color: darkgoldenrod;
  --main-color: whitesmoke;
  --focus-color: blue;
  --card-bg-color: rgba(241 8 8 / 0.3);

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color: var(--main-color);
  font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
  font-size: 18px;

  header {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background-color: var(--main-bg-color);

    h1 {
      font-size: 2em;
      font-weight: bold;
      color: var(--main-color);
      flex-grow: 2;

      a {
        color: inherit;
        text-decoration: none;
      }
    }
  }

  button {
    flex-grow: 1;
    border-radius: var(--border-radius);
    cursor: pointer;

    &.icon-button {
      display: block;
      line-height: 40px;
      width: 66px;
      max-width: 66px;
      font-size: 36px;
      color: var(--main-color);
      transition: all 0.2s ease-in-out;

      &.add-button {
        background-color: mediumslateblue;
        border: 1px solid blue;

        &:disabled {
          opacity: 0.5;
        }

        &:hover:not(:disabled) {
          border-color: mediumslateblue;
          background-color: blue;
        }
      }

      &.logout-button,
      &.new-button {
        background-color: orange;
        border: 1px solid red;

        &:hover {
          border-color: orange;
          background-color: red;
        }
      }

      &.logout-button {
        max-width: 40px;
        max-height: 40px;
      }

      &.delete-button {
        line-height: 1.5em;
        height: 50px;
        width: 100%;
        max-width: 50px;
        margin: 0 auto;
        background-color: orange;
        border: 1px solid red;

        &:hover {
          border-color: orange;
          background-color: red;
        }
      }

      img {
        display: block;
        width: 80%;
        margin: auto;
      }
    }
  }

  main {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    padding: 1em;

    h1 {
      font-weight: bold;
    }

    input:focus,
    input:active,
    button:focus,
    button:active {
      outline-color: var(--focus-color);
    }

    login-form {
      --card-bg-color: #00f6ff;
    }

    form {
      margin-top: 1em;
      display: flex;
      gap: 10px 5px;
      flex-flow: row wrap;
      padding: calc(var(--border-radius)*2);
      border-radius: var(--border-radius);
      background-color: var(--card-bg-color);

      &>label {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        row-gap: 5px;

        input {
          border-radius: var(--border-radius);
          padding: 0 5px;
          line-height: 40px;
          font-size: 24px;
          flex-grow: 1;

          &[type="number"] {
            text-align: right;
          }
        }
      }
    }

    table {
      margin-top: 1em;
      width: 100%;
      border-radius: var(--border-radius);
      background-color: var(--card-bg-color);



      th,
      td {
        border: 1px solid var(--main-color);
        padding: calc(var(--border-radius)*2);
        vertical-align: middle;
      }

      .bought td,
      .bought th {
        background-color: gold;
      }

      .bought td:nth-child(2) {
        background-image: url('../assets/img/confirmed.png');
        background-position-x: calc(100% - 10px);
        background-position-y: 50%;
        background-size: 60px;
        background-repeat: no-repeat;
      }

      tbody {
        td:nth-child(2) {
          cursor: pointer;

          &:hover {
            background-color: goldenrod;
          }
        }

        /* Text align right for number columns */
        td:nth-child(1),
        td:nth-child(3),
        td:nth-child(4) {
          text-align: right;
        }
      }

      tfoot {
        th,
        td:nth-child(2) {
          text-align: right;
        }
      }
    }
  }

  #menu {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    padding: calc(var(--border-radius)*2);
    row-gap: .5em;
    justify-content: flex-start;


    nav {
      display: flex;
      row-gap: .5em;
      padding: calc(var(--border-radius)*2);
      background-color: var(--main-bg-color);
      border-radius: var(--border-radius);

      li {
        padding: calc(var(--border-radius)*2);

        a {
          color: var(--main-color);
          text-decoration-style: dotted;

          &:hover,
          &:active,
          &:focus {
            text-decoration-style: wavy;
          }
        }
      }
    }
  }

  dialog:not(.hidden) {
    position: absolute;
    background-color: rgba(241 8 8 / 0.3);
    width: 100vw;
    height: 100vh;
    padding: 50%;
    z-index: 1000;
    display: block;
  }
}