/* ============================================================
   Jobavet Design System — scoped to the primary nav only.
   Loaded AFTER app.css so it overrides just .nav-side.
   The signature dark rail: indigo accent, grouped labels,
   accent active marker bleeding off the left edge.
   ============================================================ */
.nav-side{
  /* Jobavet DS dark-scale tokens, scoped here */
  --jv-side:#161D2C; --jv-side-2:#1F2738; --jv-side-hover:#232C40;
  --jv-side-line:rgba(255,255,255,.07);
  --jv-side-tx:#98A2BC; --jv-side-tx-2:#69748F;
  --jv-accent:#5B4FE6; --jv-accent-dark:#A79DFB;

  background:var(--jv-side);
  border-right:1px solid var(--jv-side-line);
  color:var(--jv-side-tx);
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
}

/* brand wordmark */
.nav-side .brand-word{ font-family:'Plus Jakarta Sans',sans-serif; color:#fff; font-weight:800; letter-spacing:-.03em; }
.nav-side .brand-word .v{ color:var(--jv-accent-dark); }

/* scrollbar stays hidden (inherited), keep dark */
.nav-side .side-scroll{ padding:8px 12px 4px; }

/* group labels */
.nav-side .nav-group-label{
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--jv-side-tx-2); padding:14px 12px 7px;
}

/* nav items */
.nav-side .nav-link{
  color:var(--jv-side-tx); font-weight:600; font-size:13px; gap:11px;
  padding:9px 12px; border-radius:9px; margin-bottom:1px;
  box-shadow:none; outline:none;
}
.nav-side .nav-link .ic svg{ width:18px; height:18px; }

.nav-side .nav-link:hover{
  background:var(--jv-side-hover); color:#fff; box-shadow:none; outline:none;
}

/* active — translucent accent fill, white text, accent icon, 3px left bar */
.nav-side .nav-link.active{
  background:rgba(91,79,230,.18); color:#fff; font-weight:700;
  box-shadow:none; outline:none;
}
.nav-side .nav-link.active .ic svg{ stroke:var(--jv-accent-dark); }
.nav-side .nav-link.active::before{
  content:""; position:absolute; left:-12px; top:6px; bottom:6px; width:3px;
  background:var(--jv-accent); border-radius:0 3px 3px 0;
}

/* locked / inert items — dimmed on dark */
.nav-side .nav-link.locked{ opacity:.45; }
.nav-side .nav-link.locked:hover{ background:none; color:var(--jv-side-tx); }

/* count / state badges — translucent white bubble */
.nav-side .nav-link .badge{
  font-family:'JetBrains Mono','Plus Jakarta Sans',monospace;
  font-size:10px; font-weight:800; letter-spacing:.02em;
  background:rgba(255,255,255,.08); color:var(--jv-side-tx);
  border-radius:5px; padding:2px 7px;
}
/* active item's badge brightens */
.nav-side .nav-link.active .badge{ background:rgba(167,157,251,.22); color:#fff; }

/* collapsed flyout tooltip on dark */
.nav-side .nav-item .flyout{
  background:var(--jv-side-2); color:#fff; font-weight:700; font-size:12.5px;
  border:1px solid var(--jv-side-line);
}

/* footer: profile + collapse */
.nav-side .side-bottom{ border-top:1px solid var(--jv-side-line); }
.nav-side .profile{ border-radius:9px; }
.nav-side .profile:hover{ background:var(--jv-side-hover); box-shadow:none; }
.nav-side .profile .pf-av{
  background:linear-gradient(135deg,#6457f0,#9a90f6);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); font-weight:800;
}
.nav-side .profile .pf-meta b{ color:#fff; font-weight:700; }
.nav-side .profile .pf-meta span{ color:var(--jv-side-tx-2); }

.nav-side .collapse-btn{ color:var(--jv-side-tx); font-weight:700; border-radius:9px; }
.nav-side .collapse-btn:hover{ background:var(--jv-side-hover); color:#fff; }

@media(prefers-reduced-motion:reduce){
  .nav-side *{ transition:none !important; }
}