@font-face {
  font-family: "Expensify New Kansas";
  src: url("/assets/fonts/ExpensifyNewKansas-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Expensify Neue";
  src: url("/assets/fonts/ExpensifyNeue-Regular.woff2") format("woff2");
}

:root {
  --expensify-logo-green: #03d47c;
  --color-green-200: #03d47c;
  --color-green-300: #03bb6d;
  --color-green-400: #085239;
  --color-green-500: #1a3d32;
  --color-green-600: #134038;

  --color-green-700: #07271f;
  --color-green-800: #072419;
  --color-green-900: #061b09;

  --color-red: rgb(242, 87, 48);

  --color-bg-primary: var(--color-green-900);
  --color-bg-secondary: var(--color-green-800);
  --color-bg-tertiary: var(--color-green-700);

  --color-button-primary: var(--color-green-300);
  --color-button-secondary: var(--color-green-400);
  --color-border: var(--color-green-500);

  --color-text-primary: rgb(231, 236, 233);
  --color-text-secondary: rgb(175, 187, 176);
  font-family: "Expensify Neue";
}

/* */
html,
body {
  height: 100%;
}

body {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  background-image: linear-gradient(
    var(--color-bg-primary),
    var(--color-bg-secondary)
  );
  background-attachment: fixed;
}

button {
  color: var(--color-text-primary);
  background-color: var(--color-button-primary);
  border: none;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  border-radius: 3rem;

  svg path {
    fill: var(--color-text-primary);
  }
}

input {
  padding: 0.5em;
  padding-block: 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text-primary);

  &::-webkit-search-cancel-button,
  &::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
}

input:focus {
  outline: 2px solid var(--color-green-300);
}

input:user-valid {
  border-color: var(--color-green-300);
}

input:user-valid:focus {
  outline: 1px solid var(--color-green-300);
}

input:user-invalid {
  border-color: firebrick;
}

input:user-invalid:focus {
  outline: 1px solid firebrick;
}

.error {
  color: var(--color-red);
  text-align: center;
  height: 1em;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
}

header {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0.5rem;

  img {
    /* filter: opacity(0.1); */
    height: 100%;
  }
}

#loginContent {
  background: var(--color-bg-secondary);
  margin: 0 auto;
  max-width: 500px;
  padding: 2rem;
  font-size: 1.5rem;
  width: fit-content;
  border-radius: 1rem;

  display: grid;
  gap: 1rem;

  h2 {
    font-family: "Expensify New Kansas";
  }

  form {
    display: grid;
    gap: 1rem;

    .form-group {
      display: grid;
      gap: 0.25rem;
    }

    button {
      margin-top: 0.5rem;
      width: 75%;
      justify-self: center;
    }
  }

  .help-options {
    display: grid;
    gap: 0.5rem;
  }
}

.inactive {
  filter: brightness(0.25);
  pointer-events: none;
  user-select: none;
}

#transactionTable {
  scroll-behavior: smooth;
  height: 100%;
  padding-inline: 0.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  position: relative;

  .top-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    h1 {
      font-family: "Expensify New Kansas";
      font-size: clamp(1rem, 10vw, 3.5rem);
      margin-left: 0.5rem;
      margin-block: 0.75rem;
    }

    button#newTransaction {
      align-items: center;
      justify-self: end;
      position: sticky;
      right: 1rem;
      top: 1rem;
      z-index: 1000;

      width: fit-content;
      aspect-ratio: 1/1;
    }
  }

  .bottom-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;

    button#showMoreRows {
      margin: 0 auto;
      background-color: var(--color-button-secondary);
    }

    button#backToTop {
      /* background-color: var(--color-button-secondary); */
      aspect-ratio: 1/1;
      svg {
        transform: rotate(90deg);
      }
    }
  }

  @media (min-width: 900px) {
    padding-inline: 15%;
  }
}

#transactionTable form {
  padding-inline: 1rem;
  grid-column: 1/-1;

  display: flex;
  justify-content: space-between;
  gap: 0.75rem;

  .form-group {
    flex: 1;
    display: grid;
    gap: 0.25rem;
  }

  .form-group.date {
    max-width: 16ch;
  }

  button#resetFilters {
    background-color: var(--color-button-secondary);
    grid-column: 3/4;
    grid-row: 2/3;
  }

  @media (max-width: 900px) {
    padding-inline: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: 1fr 1fr;

    .form-group.search {
      grid-row: 2/3;
      grid-column: 1/3;
    }

    .form-group.date {
      max-width: unset;
    }
  }
}

#transactionTable table {
  margin-bottom: 1rem;
  grid-column: 1/-1;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 1rem;

  th {
    padding-inline: 0.5rem;
    text-align: start;
  }

  th#amount {
    text-align: end;
  }

  th#merchant {
    /* min-width: 15ch; */
  }

  th#date {
    width: 14ch;
  }

  th#category {
    width: 14ch;
  }

  th#amount {
    width: 15ch;
  }

  td {
    overflow-wrap: break-word;
    padding: 1rem;
    padding-top: 2rem;
    position: relative;
    background-color: var(--color-bg-tertiary);
    vertical-align: top;
  }

  td::before {
    /* .beepis { */
    /* rare css property: we can access the text of an attribute for content */
    /* in this case, the name of the <td>'s <th> element (table header) */
    content: attr(headers);
    /* display: inline-block; */
    font-size: 0.75rem;
    width: 10ch;
    color: var(--color-text-secondary);
    position: absolute;
    top: 0.75rem;
    left: 2ch;
  }

  td.amount {
    text-align: end;
  }

  td.amount::before {
    left: unset;
    right: 2ch;
  }

  /* can't style <tr> borders directly so we target specific <td>'s */
  --row-border-radius: 0.5rem;
  /* --row-border-style: 1px solid white; */
  --row-border-style: none;

  td {
    border-top: var(--row-border-style);
    border-bottom: var(--row-border-style);
  }

  td:first-child {
    border-top-left-radius: var(--row-border-radius);
    border-bottom-left-radius: var(--row-border-radius);
    border-left: var(--row-border-style);
  }

  td:last-child {
    border-top-right-radius: var(--row-border-radius);
    border-bottom-right-radius: var(--row-border-radius);
    border-right: var(--row-border-style);
  }

  @media (max-width: 700px) {
    th {
      display: none;
    }

    td {
      display: block;
      padding-bottom: 0;
    }

    td.amount {
      padding-bottom: 0.75rem;
    }

    td::before {
      /* rare css property: we can access the text of an attribute for content */
      /* in this case, the name of the <td>'s <th> element (table header) */
      content: attr(headers);
      display: inline-block;
      font-size: 0.75rem;
      width: 10ch;
      color: var(--color-green-300);
    }

    /* can't style <tr>'s directly so we target specific <td>'s */
    /* mobile edition */

    td {
      border-left: var(--row-border-style);
      border-right: var(--row-border-style);
      border-top: none;
      border-bottom: none;
    }

    td:first-child {
      border-top-left-radius: var(--row-border-radius);
      border-top-right-radius: var(--row-border-radius);
      border-bottom-left-radius: 0px;
      border-top: var(--row-border-style);
    }

    td:last-child {
      border-bottom-left-radius: var(--row-border-radius);
      border-bottom-right-radius: var(--row-border-radius);
      border-top-right-radius: 0px;
      border-bottom: var(--row-border-style);
    }
  }
}

#transactionForm {
  background-color: var(--color-bg-secondary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 320px;
  padding: 0.5rem;
  border-radius: 1rem;
  display: grid;

  button#cancelAddTransaction {
    background-color: var(--color-red);
    justify-self: end;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    padding: 0;

    svg {
      transform: rotate(45deg);
    }
  }

  h1 {
    font-family: "Expensify New Kansas";
    padding-inline: 1rem;
  }

  form {
    padding: 2rem;
    display: grid;
    gap: 1rem;

    .form-group {
      display: grid;
      gap: 0.25rem;
    }

    .money-input {
      font-family: "Expensify New Kansas";
      font-size: 3rem;
      display: flex;
      justify-content: center;

      label {
        display: inline-block;
        text-align: center;
      }

      input#amount {
        width: 1ch;
        min-width: 1ch;
        padding: 0;
        border: none;
        outline: none;
        background-color: transparent;
        white-space: nowrap;
      }

      #hidden-input-text {
        position: absolute;
        visibility: hidden;
      }

      button {
        margin-top: 0.5rem;
        width: 75%;
        justify-self: center;
      }
    }
  }
}

div.loading {
  margin: 2rem auto;
  font-size: 2rem;

  span.ellipsis {
    display: inline-block;
    animation: fall 1.5s ease-in infinite;
    animation-delay: calc(100ms * var(--i));
  }
}

@keyframes fall {
  0%,
  100% {
    transform: translateY(calc(-0.4rem + var(--i) * 0.1rem));

    /* opacity: 0; */
  }
  20%,
  90% {
    transform: translateY(0);
  }
}