/* ==========================================================
   IROZON DESIGN SYSTEM — Navigation (canonical, v1)
   Public API:
     <nav class="iz-nav" aria-label="Primary" data-collapsed="false">
       <a class="iz-nav-item" href="/" aria-current="page">
         <span class="iz-nav-item__icon" aria-hidden="true">...</span>
         <span class="iz-nav-item__label">Home</span>
       </a>
       <div class="iz-nav-group">
         <p class="iz-nav-group__label">Tools</p>
         <a class="iz-nav-item" href="/invoice" title="Invoices" aria-label="Invoices">
           <span class="iz-nav-item__icon" aria-hidden="true">...</span>
           <span class="iz-nav-item__label">Invoices</span>
         </a>
         <a class="iz-nav-item" href="https://example.com" target="_blank"
            rel="noopener noreferrer" title="Example ↗" aria-label="Example (opens in a new tab)">
           <span class="iz-nav-item__icon" aria-hidden="true">...</span>
           <span class="iz-nav-item__label">
             Example<span class="iz-nav-item__external" aria-hidden="true">↗</span>
           </span>
         </a>
       </div>
     </nav>

   A vertical navigation rail for application shells (sidebars, compact
   icon rails) — destinations, not actions. Every item is a real <a> (or
   a router Link rendering one), never a button/click handler, and the
   current route is communicated with native `aria-current="page"`, not
   a class. An action that happens to live in the same rail (collapse
   toggle, sign out) is not a nav item — use .iz-button (icon-only for a
   compact rail) instead. This component never wraps a control that
   doesn't navigate.

   data-collapsed="true" on the <nav> switches every .iz-nav-item into
   an icon-only compact rail: labels are visually hidden (not
   display:none — screen readers still get them), and the icon becomes
   a bordered square slot. Every collapsed item MUST still carry its own
   accessible name (aria-label, plus a title for a mouse-hover tooltip)
   — nothing here invents one.

   Icon slot (.iz-nav-item__icon) accepts an inline SVG (Tabler outline,
   2px stroke — inherits currentColor automatically like .iz-button's
   icons do), a plain text/emoji glyph, or an <img> brand logo. The slot
   itself is always a fixed square (enforced with `flex`, `inline-size`,
   `block-size`, and a belt-and-suspenders `aspect-ratio: 1` so it can
   never collapse to the width of a narrow glyph or stretch to a wide
   logo's intrinsic size) — content sizes down to fit via `object-fit:
   contain`, the slot never sizes up to fit content. Every icon kind
   targets the same content size for a given slot size (18px in the
   20px expanded slot, 20px in the 32px collapsed slot — a couple of px
   of clearance either way, not full-bleed) so a plain glyph and a
   brand logo read as the same optical weight instead of one floating
   small inside the box while the other fills it edge to edge. A
   non-square source (a wide wordmark, a logo with built-in padding)
   will still end up visually smaller after `contain` preserves its own
   aspect ratio — expected, and a reason for that one asset to get a
   local optical trim, not for the shared box/content sizing to change.
   An <img> child gets a fixed light backdrop automatically (:has(img)):
   brand artwork isn't theme-aware and would otherwise disappear in
   dark mode. Deliberate — don't override it per-consumer.
   ========================================================== */

.iz-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.iz-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-block-start: var(--space-5);
}
.iz-nav-group:first-child {
  margin-block-start: 0;
}
.iz-nav-group__label {
  margin: 0;
  padding: 8px 12px 6px;
  color: var(--color-text-muted);
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: 0.07em;
  opacity: 0.75;
  text-transform: uppercase;
}

.iz-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-block-size: 38px;
  padding: 7px 12px 7px 18px;
  border-radius: var(--r-xs);
  color: var(--color-text-secondary);
  font-family: var(--font-label);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard);
}
/* Active-route indicator — a straight side accent bar, not a rounded
   bracket, border, or ring on the icon. This is the one and only
   "you are here" signal; hover and focus below are deliberately quieter
   and never reuse it. */
.iz-nav-item::before {
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 50%;
  inline-size: 3px;
  block-size: 14px;
  border-radius: 0;
  background: var(--irozon-green);
  content: "";
  opacity: 0;
  transform: translateY(-50%) scaleY(0.4);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.iz-nav-item:hover,
.iz-nav-item[aria-current="page"] {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}
.iz-nav-item[aria-current="page"] {
  font-weight: 600;
}
.iz-nav-item[aria-current="page"]::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}
.iz-nav-item:active {
  transform: scale(0.99);
}
/* Keyboard focus is its own concern, never the active-route treatment —
   canonical focus ring, same token .iz-button uses. */
.iz-nav-item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.iz-nav-item__icon {
  display: flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  aspect-ratio: 1;
  border-radius: var(--r-xs);
  /* No color of its own — inherits .iz-nav-item's (secondary at rest,
     primary on hover/active), so icon and label always agree. */
  font-size: 1rem;
  line-height: 1;
}
/* One canonical content size per slot size, shared by every icon kind
   (text/emoji glyph via font-size above, inline SVG, <img> logo) — a
   glyph and a logo sitting in the same rail must read as the same
   optical weight, never "some icons fill the square, others float
   tiny inside it." A couple of px of clearance inside the box (not
   full-bleed) keeps the slot reading as padding around an icon rather
   than the icon itself being the box. */
.iz-nav-item__icon svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}
.iz-nav-item__icon img {
  display: block;
  max-inline-size: 18px;
  max-block-size: 18px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.iz-nav-item__icon:has(img) {
  background: var(--irozon-white);
}

.iz-nav-item__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}
.iz-nav-item__external {
  color: var(--color-text-muted);
  font-size: 0.8em;
}

/* ---------- Collapsed / icon-only rail ---------- */
.iz-nav[data-collapsed="true"] .iz-nav-group__label,
.iz-nav[data-collapsed="true"] .iz-nav-item__label {
  inline-size: 0;
  overflow: hidden;
  opacity: 0;
}
.iz-nav[data-collapsed="true"] .iz-nav-item {
  justify-content: center;
  padding-inline: 0;
  /* The visible label is 0-width when collapsed, but flex `gap` still
     reserves space for it — icon + trailing gap centers as a unit, which
     visibly off-centers the icon itself inside the row. Nothing to gap
     from once the label has no width. */
  gap: 0;
  /* The active-route accent bar (below) sits a fixed 4px from this
     item's own left edge, outside the icon slot — that only holds if
     the item is wider than the 32px slot it centers. Without an
     explicit floor, a consumer whose collapsed rail hugs the icon's
     own width exactly (no surrounding gutter) gets the accent bar
     drawn on top of the icon's left edge instead of beside it. 48px
     matches the icon's 32px plus the 8px-a-side gutter Irozon Tools'
     own sidebar already provides — the floor makes that guarantee
     universal instead of incidental to one consumer's padding. */
  min-inline-size: 48px;
}
/* The expanded row's own hover/active background (elevated fill on the
   whole row) would otherwise paint a second, larger box around the
   already-bordered icon slot below — all state feedback in the
   collapsed rail lives on the icon slot itself (border) or the accent
   bar (active), never on the row. */
.iz-nav[data-collapsed="true"] .iz-nav-item:hover,
.iz-nav[data-collapsed="true"] .iz-nav-item[aria-current="page"] {
  background: none;
}
/* The fixed square slot: every dimension is stated explicitly and
   redundantly (flex-basis, inline-size, block-size, aspect-ratio) so no
   single missed override can turn it into a pill — flex-basis alone
   already wins the main axis over inline-size in a row flex container,
   which is what caused that exact bug during Irozon Tools' first pass
   at this pattern. */
.iz-nav[data-collapsed="true"] .iz-nav-item__icon {
  flex: 0 0 32px;
  inline-size: 32px;
  block-size: 32px;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-surface-elevated);
  font-size: 1.15rem;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
/* Content scales up with the bigger 32px collapsed slot too — without
   this, a glyph/logo sized for the 20px expanded slot just floats in
   extra empty space rather than reading as "the same icon, bigger
   box." Kept a couple of px inside the border either way, matching
   the expanded slot's own proportion of clearance-to-box. */
.iz-nav[data-collapsed="true"] .iz-nav-item__icon svg {
  inline-size: 20px;
  block-size: 20px;
}
.iz-nav[data-collapsed="true"] .iz-nav-item__icon img {
  max-inline-size: 20px;
  max-block-size: 20px;
}
/* Hover only — a neutral stronger border, never green (green means
   "current route," not "moused over"). */
.iz-nav[data-collapsed="true"] .iz-nav-item:hover .iz-nav-item__icon {
  border-color: var(--color-border-strong);
}
.iz-nav[data-collapsed="true"] .iz-nav-item__icon:has(img) {
  background: var(--irozon-white);
}

@media (prefers-reduced-motion: reduce) {
  .iz-nav-item,
  .iz-nav-item__label,
  .iz-nav-item__icon {
    transition: none;
  }
  .iz-nav-item::before {
    transition: none;
    transform: translateY(-50%);
  }
  .iz-nav-item:active {
    transform: none;
  }
}