/*
  nav.css — Nium Portal Left Navigation
  ──────────────────────────────────────
  Link after tokens.css and typography.css.

  <link rel="stylesheet" href="tokens.css">
  <link rel="stylesheet" href="typography.css">
  <link rel="stylesheet" href="nav.css">

  HTML STRUCTURE:
  ───────────────
  <aside class="sidebar" id="sidebar">

    <div class="sidebar-logo">
      <a class="logo-mark" href="...">
        <svg class="sidebar-logo-svg">...</svg>
      </a>
      <button class="collapse-toggle" id="sidebarCollapseBtn">...</button>
    </div>

    <!-- L1 item, no children -->
    <a class="nav-item-link" href="...">
      <div class="nav-item active" data-label="Dashboard">
        <span class="nav-icon">...</span>
        <span class="nav-label">Dashboard</span>
        <span class="nav-badge">9</span>       ← optional
      </div>
    </a>

    <!-- L1 item with children (expandable) -->
    <div class="nav-flyout-wrap">
      <div class="nav-item" data-label="Payments" data-expandable="true">
        <span class="nav-icon">...</span>
        <span class="nav-label">Payments</span>
        <span class="nav-chevron-wrap">
          <svg class="nav-chevron">...</svg>
        </span>
      </div>
    </div>
    <div class="nav-children">
      <a class="nav-item-link" href="...">
        <div class="nav-child active">Cards</div>
      </a>
      <a class="nav-item-link" href="...">
        <div class="nav-child">Payouts</div>
      </a>
    </div>

    <div class="nav-spacer"></div>
    <hr class="nav-divider">

    <!-- External / utility links (muted) -->
    <a class="nav-item-link" href="..." target="_blank">
      <div class="nav-item" data-label="Nium docs" data-no-active>
        <span class="nav-icon">...</span>
        <span class="nav-label">Nium docs</span>
        <span class="nav-external-icon">...</span>
      </div>
    </a>

  </aside>

  STATES:
  ───────
  .nav-item.active          L1 selected (no children)   rgba(255,255,255,0.8)
  .nav-item.expanded        L1 open (has children)       no background
  .nav-child.active         L2 selected                  rgba(255,255,255,0.8)
  .nav-item:hover           L1 hover                     rgba(0,0,0,0.03)
  .nav-child:hover          L2 hover                     rgba(0,0,0,0.03)

  COLLAPSED STATE:
  ────────────────
  Add .collapsed to .sidebar. Labels, chevrons, and children hide.
  Icons remain centered. Flyout tooltips appear on hover.
  Width: --sidebar-w-expanded (240px) → --sidebar-w-collapsed (64px)

  TOKENS USED:
  ────────────
  --color-bg-sidebar         sidebar background
  --color-text-primary       default nav text
  --color-text-secondary     muted nav items (Nium docs, Support, Legal)
  --color-text-tertiary      external link icon
  --color-bg-hover           hover background
  --color-nav-hover          dark sidebar hover (collapse button)
  --sidebar-w-expanded       240px
  --sidebar-w-collapsed      64px
*/

/* ── Sidebar shell ─────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w-expanded);
  background: var(--color-bg-sidebar);
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  overflow: visible;
  z-index: 50;
  transition: width 0.18s ease-out;
}

.sidebar.collapsed {
  width: var(--sidebar-w-collapsed);
  padding: 16px 8px;
}

/* ── Logo area ─────────────────────────────────────────────────────────── */

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  height: 61px;
  background: #000;
  margin: -4px -12px 8px;
  flex-shrink: 0;
  position: relative;
}

.sidebar-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000 url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%0A%20%20%3Cfilter%20id%3D%27n%27%3E%0A%20%20%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27/%3E%0A%20%20%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.30%200%27/%3E%0A%20%20%3C/filter%3E%0A%20%20%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27/%3E%0A%3C/svg%3E%0A") repeat;
  opacity: 1;
  pointer-events: none;
}

.sidebar-logo .logo-mark {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.2px;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.sidebar.collapsed .logo-mark       { display: none; }
.sidebar.collapsed .sidebar-logo    { padding: 0; margin: -16px -8px 8px; justify-content: center; }
.sidebar.collapsed .sidebar-logo-svg { width: 32px; height: auto; }

.collapse-toggle {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
  position: relative;
  z-index: 1;
}

.collapse-toggle:hover {
  background: var(--color-nav-hover);
  color: var(--color-bg-primary);
}

/* ── Nav divider ───────────────────────────────────────────────────────── */

.nav-divider {
  border: none;
  border-top: 0.5px solid var(--color-border-primary);
  margin: 8px 4px;
}

/* ── L1 nav item ───────────────────────────────────────────────────────── */

.nav-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  color: var(--color-text-primary);
  font-size: var(--text-body-strong-size);     /* 14px */
  font-weight: var(--text-body-strong-weight); /* 500 */
  user-select: none;
  transition: background 0.1s ease-out;
}

/* Icon */
.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-primary);
}

/* Muted utility items */
[data-label="Nium docs"] .nav-icon,
[data-label="Support"] .nav-icon,
[data-label="Legal agreements"] .nav-icon {
  color: var(--color-text-secondary) !important;
}

/* Label */
.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

/* Badge (e.g. Tasks count) */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-bg-row-hover);
  color: var(--color-text-primary);
  border-radius: 4px;
  font-size: var(--text-badge-size);   /* 10px */
  font-weight: 400;
  margin-left: auto;
  flex-shrink: 0;
}

/* External link icon */
.nav-external-icon {
  margin-left: auto;
  opacity: 0;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}
.nav-item:hover .nav-external-icon { opacity: 1; }

/* ── L1 states ─────────────────────────────────────────────────────────── */

/* Hover */
.nav-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.nav-item:hover .nav-icon { color: var(--color-text-primary); }

/* Selected — no children */
.nav-item.active {
  background: rgba(255,255,255,0.8);
  color: var(--color-text-primary);
}
.nav-item.active .nav-icon { color: var(--color-text-primary); }

/* Expanded — has children, no background */
.nav-item.expanded {
  background: none;
  color: var(--color-text-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.nav-item.expanded .nav-icon { color: var(--color-text-primary); }

/* Utility items never show active state */
[data-no-active].nav-item.active,
[data-no-active].nav-item:focus {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

/* ── Chevron (expand/collapse indicator) ───────────────────────────────── */

.nav-chevron-wrap {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -6px -6px -6px 0;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.1s ease-out, opacity 0.15s ease;
}

.nav-chevron-wrap:hover          { background: rgba(255,255,255,0.1); }
.nav-item:hover .nav-chevron-wrap,
.nav-item.expanded .nav-chevron-wrap { opacity: 1; }

.nav-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
  transition: transform 0.15s ease-out;
  pointer-events: none;
}

.nav-item.expanded .nav-chevron            { transform: rotate(180deg); }
.nav-item.expanded .nav-chevron,
.nav-item:hover .nav-chevron,
.nav-item.active .nav-chevron              { color: var(--color-text-primary); }

/* ── L2 children ───────────────────────────────────────────────────────── */

.nav-children {
  display: none;
  background: none;
  padding: 2px 6px 6px 6px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: -2px;
}

/* Show when parent is expanded */
.nav-item.expanded + .nav-children,
.nav-item-link:has(.nav-item.expanded) + .nav-children,
.nav-flyout-wrap:has(.nav-item.expanded) + .nav-children { display: block; }

/* Hide in collapsed sidebar */
.sidebar.collapsed .nav-children { display: none !important; }

.nav-child {
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--text-nav-size);     /* 13px */
  font-weight: var(--text-nav-weight); /* 500 */
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.1s ease-out;
}

/* L2 hover */
.nav-child:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* L2 selected — matches L1 selected palette */
.nav-child.active {
  background: rgba(255,255,255,0.8);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ── Collapsed sidebar overrides ───────────────────────────────────────── */

.sidebar.collapsed .nav-item        { justify-content: center; padding: 9px; gap: 0; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-chevron-wrap,
.sidebar.collapsed .nav-chevron     { display: none; }

/* ── Spacer ────────────────────────────────────────────────────────────── */

.nav-spacer { flex: 1; min-height: 16px; }