/* =========================
   NavigationShell
   Figma: Navigation / Sidebar.
========================= */

@use "../kit-deps" as *;

.navigation-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
  background-color: $surface-page;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";

    .navigation-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1100;
      width: 260px;
      height: 100vh;
      transform: translateX(-100%);
      transition: transform $motion-base $motion-ease;

      &.is-open {
        transform: translateX(0);
      }
    }

    .navigation-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1050;
      background-color: rgba($neutral-900, 0.4);
      opacity: 0;
      visibility: hidden;
      transition: opacity $motion-base $motion-ease;

      &.is-visible {
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

.navigation-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $space-4;
  padding: $space-3 $space-5;
  border-bottom: $border-width-base $border-style-base $border-color-muted;
  background-color: $surface-panel-muted;
}

.navigation-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: $space-4;
  padding: $space-4;
  border-right: $border-width-base $border-style-base $border-color-muted;
  background-color: $surface-panel-muted;
  overflow-y: auto;
}

.navigation-brand {
  display: flex;
  align-items: center;
  gap: $space-3;
  font-weight: $font-weight-bold;
  font-size: 18px;
  color: $neutral-900;
}

.navigation-content {
  grid-area: content;
  padding: $space-5;
  overflow-y: auto;
}

.navigation-menu {
  display: flex;
  flex-direction: column;
  gap: $space-1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-item {
  display: flex;
  align-items: center;
  gap: $space-3;
  padding: $space-3 $space-4;
  border-radius: $radius-md;
  color: $neutral-700;
  font-size: 14px;
  font-weight: $font-weight-semibold;
  text-decoration: none;
  cursor: pointer;
  transition: background-color $motion-base $motion-ease;

  &:hover:not(.is-active) {
    background-color: rgba($neutral-900, 0.04);
    color: $neutral-900;
  }

  &:focus-visible {
    @include focus_ring;
    outline-offset: -2px;
  }

  &.is-active {
    background-color: $neutral-900;
    color: $neutral-0;
  }

  .navigation-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
}

.navigation-toggle {
  display: none;

  @media (max-width: 1024px) {
    display: inline-flex;
  }
}