@import url('reset.css');
@import url('utilities.css');
@import url('https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.css');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  color-scheme: light dark;
  --font-family: 'Rubik';
  --font-family-mono:
    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;
  --border-radius: 1vw;
  --border-radius-inner: 0.75vw;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #eef3f3;
    --color-bg-accent: #e5eaea;
    --color-text-main: #111111;
    --color-text-muted: #474747;
    --color-text-dim: #666666;
    --color-border: #868a8f;
    --color-border-faint: #c7cdd4;
    --color-border-faint-translucent: #c7cdd499;
    --color-border-contrast: #9ba3a8;
    --color-heading: #292929;
    --color-link: #991e66;
    --color-link-contrast: #991e66;
    --color-link-hover: #bf1c7b;
    --color-link-bg: #e1b4ce;
    --color-alert: #b31f11;
    --color-alert-border: #d9a3a0;
    --color-alert-bg: #f8e5e4;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1c1d;
    --color-bg-accent: #1d2021;
    --color-text-main: #b8b8b4;
    --color-text-muted: #929292;
    --color-text-dim: #707070;
    --color-border: #3d3d3d;
    --color-border-faint: #26282b;
    --color-border-faint-translucent: #26282b99;
    --color-border-contrast: #505457;
    --color-heading: #999996;
    --color-link: #b8247a;
    --color-link-contrast: #c73b8d;
    --color-link-hover: #d72f91;
    --color-link-bg: #801955;
    --color-alert: #cc3628;
    --color-alert-border: #3d1b18;
    --color-alert-bg: #281918;
  }
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-main);
}

a {
  text-decoration: none;

  &:hover {
    border-color: var(--color-link-bg) !important;
  }

  &.stealth-link {
    &:not(:hover) {
      color: inherit;
    }

    &:hover {
      color: var(--color-link-hover);
    }
  }
}

[class^='icon-'] {
  font-weight: 400;
}

[x-cloak] {
  visibility: hidden;
}

button,
[type='submit'],
[type='button'],
[role='button'] {
  display: inline-flex;
  background-color: transparent;
  border: none;
  color: var(--color-link);
  padding: 1rem;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  cursor: pointer;

  span {
    font-weight: inherit;
  }

  &:not([disabled]):hover {
    color: var(--color-link-hover);
    background-color: var(--color-border-faint);
  }

  &[disabled] {
    color: var(--color-border);
    cursor: unset;
  }

  &.destructive {
    color: var(--color-alert);
  }

  &.stealth-button {
    &:not(:hover) {
      color: var(--color-text-main);
      background-color: transparent;
    }
  }
}

input,
select,
textarea {
  display: block;
  font-size: 1.2rem;
  padding: 1rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-border-faint);
}

select {
  appearance: none;
  font-size: 1.1em;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border-radius: 1.5em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23111111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
  background-position: right 0.75em center;
  background-size: 1.25em;
  background-repeat: no-repeat;

  &[data-mini] {
    font-size: 0.9em;
    padding: 0.25rem 2rem 0.25rem 0.75rem;
    background-position: right 0.5em center;
  }

  @media (prefers-color-scheme: dark) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b8b8b4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
  }

  &[disabled] {
    color: var(--color-border);
    border-color: var(--color-border-faint);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23c7cdd4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');

    @media (prefers-color-scheme: dark) {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%233d3d3d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
    }
  }
}

textarea {
  line-height: 1.444;
}

.page {
  min-height: 100dvh;
  display: grid;
  overflow-x: hidden;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;

  grid-template-areas:
    '. header'
    'sidebar main'
    '. footer';
}

.secondary {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--color-text-muted);
}

.tertiary {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  /* font-style: italic; */
  font-weight: 400;
  color: var(--color-text-dim);
}

.info-box {
  font-size: 1rem;
  padding: 0.5rem 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  dl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    dt {
    }

    dd {
      margin: 0 1rem 0 0;
      font-weight: 500;
      line-height: 1.333;

      + dt {
        margin-top: 1rem;
      }

      &[data-break] {
        flex-basis: 100%;
      }
    }
  }
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg);
  grid-area: header;
  border-bottom: 1px solid var(--color-border-faint);
  padding: 1.25rem 1.5rem 1rem 3.5rem;
  box-sizing: border-box;
  z-index: 2;

  .header-path {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 200;
    gap: 0.5rem;

    .path-level-1 {
      color: var(--color-text-muted);

      &:hover {
        color: var(--color-link-contrast);
      }
    }

    .path-level-2 {
      color: var(--color-text-dim);
    }

    [class^='icon-'] {
      color: var(--color-border);
    }
  }

  .notifications {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }
}

.page-main {
  grid-area: main;
  padding: 3.5rem 5vw 0 7vw;
  display: grid;
  box-shadow: -1px 0 0 var(--color-border-faint);
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 1fr;
  gap: 0 3rem;
  grid-template-areas:
    'dash-hed dash-hed'
    'cover-section history-section';
  transition: transform 0.2s cubic-bezier(0.25, 0, 0, 1);
  /* position: relative; */
  z-index: 1;
  background-color: var(--color-bg);
}

.page-footer {
  grid-area: footer;
  border-top: 1px solid var(--color-border-faint);
  padding: 1.25rem 1.5rem 1rem 3.5rem;
}

#sidenav {
  grid-area: sidebar;

  .navToggleBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 3.5rem;
    display: flex;
    justify-content: center;
    z-index: 2;

    .navToggle {
      margin: 0.725rem 0;
      font-size: 1.5rem;
      border: none;
      padding: 0.5rem;
    }
  }

  .sidenav-box {
    position: relative;
  }

  .sidenav-list {
    position: fixed;
    top: 4.25rem;
    left: 0;
    width: 13rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    transition:
      transform 0.25s cubic-bezier(0.25, 0, 0, 1),
      opacity 0.25s linear;

    a[role='button'],
    button {
      font-size: 1.5rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.333em;
      border-radius: 0;
    }

    .log-out {
      [class^='icon-'] {
        transform: rotate(180deg);
      }
    }
  }

  &:not(.open) {
    .sidenav-list {
      transform: translateX(-10%);
      opacity: 0.75;
    }
  }

  &.open {
    ~ .page-main {
      transform: translateX(13rem);
    }
  }
}