/* ==========================================================================
   Side Navigation
   ==========================================================================
   This file fully owns the visual styling and interaction states of the
   left-hand side navigation. Layout responsibilities (flex placement,
   app shell sizing) live in layout.css.
   
   The nav consumes width primitives from :root:
     --nav-width-collapsed
     --nav-width-expanded
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root container
   --------------------------------------------------------------------------
   The nav is a vertical flex container with Material-inspired spacing
   and hit targets. Width is controlled via CSS variables so layout.css
   does not need to know component details.
   -------------------------------------------------------------------------- */

#side-nav {
  width: var(--nav-width-collapsed);
  background: #ffffff;

  /* Subtle separation from content area */
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    1px 0 0 rgba(0, 0, 0, 0.02),
    2px 0 6px rgba(0, 0, 0, 0.04);

  display: flex;
  flex-direction: column;
  align-items: stretch;

  padding: 0.5rem 0;
  gap: 0.75rem;

  box-sizing: border-box;
  z-index: 10; /* Ensures nav stays above paper content */
}

/* Expanded state
   --------------------------------------------------------------------------
   JS toggles `.nav-expanded` to reveal labels and increase width.
   No layout logic should depend on this class — visual only.
   -------------------------------------------------------------------------- */

#side-nav.nav-expanded {
  width: var(--nav-width-expanded);
}

/* --------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------
   Sections group related controls (pages, date controls, print, etc.)
   Padding is applied here so individual items remain simple.
   -------------------------------------------------------------------------- */

.nav-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0 0.25rem;
}

.nav-top {
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Navigation items & buttons
   --------------------------------------------------------------------------
   Shared styling between links and buttons ensures consistent hit targets,
   spacing, and hover behavior regardless of semantic element.
   -------------------------------------------------------------------------- */

.nav-item,
.nav-icon-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;

  height: 48px; /* Material minimum hit target */
  padding: 0 0.75rem;

  border-radius: 999px;
  border: none;
  background: none;

  cursor: pointer;
  color: #111;
  font: inherit;
  text-decoration: none;

  box-sizing: border-box;
}

.nav-item:hover,
.nav-icon-button:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Active page indicator
   --------------------------------------------------------------------------
   Applied to anchor elements representing the current view.
   -------------------------------------------------------------------------- */

.nav-item.is-active {
  background: rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Icons
   --------------------------------------------------------------------------
   Icons are sized and centered independently so labels can be hidden
   without affecting alignment in collapsed mode.
   -------------------------------------------------------------------------- */

.nav-icon {
  width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.25rem;
  line-height: 1;
  text-align: center;

  /* Material Symbols tuning */
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* --------------------------------------------------------------------------
   Labels
   --------------------------------------------------------------------------
   Labels are hidden by default and revealed only when the nav is expanded.
   This avoids layout reflow in collapsed mode.
   -------------------------------------------------------------------------- */

.nav-label {
  display: none;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
}

#side-nav.nav-expanded .nav-label {
  display: inline;
}

/* --------------------------------------------------------------------------
   Divider
   --------------------------------------------------------------------------
   Visual separation between page links and control actions.
   -------------------------------------------------------------------------- */

.nav-divider {
  height: 1px;
  margin: 0.75rem 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.15),
    transparent
  );
}

/* --------------------------------------------------------------------------
   Collapsed alignment adjustments
   --------------------------------------------------------------------------
   When collapsed, items center their icons and remove horizontal padding.
   Labels remain hidden, icons remain perfectly centered.
   -------------------------------------------------------------------------- */

#side-nav:not(.nav-expanded) .nav-item,
#side-nav:not(.nav-expanded) .nav-icon-button {
  justify-content: center;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Print behavior
   --------------------------------------------------------------------------
   The navigation never appears in print output. This rule is owned here
   so print behavior remains coupled to the component it affects.
   -------------------------------------------------------------------------- */

@media print {
  #side-nav {
    display: none !important;
    box-shadow: none;
    border: none;
  }
}