/* ===========================================================
   SIDEBAR — DNUV VSaaS · Revamp v3 (Frigate-inspired, dark)
   ===========================================================
   - Navy base, monochromatic icons, soft blue-light active pill
   - Collapsible groups (per-section chevron + memory)
   - Rail 64px with hover-expand overlay (does not push content)
   - Footer: user-card + collapse toggle
   - Theme/density/active variants driven by data-attrs (Tweaks)
   ----------------------------------------------------------- */

:root {
  --sb-w:           260px;
  --sb-rail-w:       64px;

  /* Wave-E F-DARK (#40) — DEFAULT sidebar palette = navy. This base is the
     dark-friendly ground: it stays navy under the app's *dark* and *system-dark*
     themes (the sidebar reads as a deep panel against #0F172A surfaces). The
     LIGHT app theme re-points the whole palette to a white surface below, and
     explicit dark re-points it one notch deeper. The palette is driven by the
     DOCUMENT theme (`:root[data-theme=…]`), NOT by the sidebar element's own
     `data-theme` attribute — the markup still ships a now-inert
     `data-theme="navy"`, but these doc-scoped rules out-specify it so the
     sidebar tracks the app theme regardless. */
  --sb-bg:          var(--dnuv-navy);          /* #0A1F5E */
  --sb-bg-elev:     rgba(255,255,255,0.05);
  --sb-bg-elev-hi:  rgba(255,255,255,0.09);
  --sb-border:      rgba(255,255,255,0.07);
  --sb-divider:     rgba(255,255,255,0.06);

  --sb-text:        rgba(255,255,255,0.98);
  --sb-text-2:      rgba(255,255,255,0.86);
  --sb-text-3:      rgba(255,255,255,0.64);
  --sb-text-4:      rgba(255,255,255,0.44);

  --sb-icon:        rgba(255,255,255,0.80);
  --sb-icon-hover:  rgba(255,255,255,0.98);

  --sb-active:      #5EC6FF;
  --sb-active-bg:   rgba(94,198,255,0.14);
  --sb-active-bar:  #5EC6FF;
}

/* === Wave-E F-DARK (#40) — sidebar follows the DOCUMENT theme ============
   The shell hardcodes `data-theme="navy"` on the <aside>, and sidebar-tweaks.js
   re-stamps the same `navy` default on boot (both owned elsewhere). There is no
   `[data-theme="navy"]` rule, so the navy `:root` defaults above always won —
   the sidebar stayed navy even when the app flipped to a *light* theme (a
   jarring navy slab) and never *darkened* under the app's *dark* theme. These
   rules bind the DEFAULT-navy sidebar to the document-root theme so it tracks
   the real user control (Topbar → Claro / Escuro / Sistema).

   Scoped to `.sidebar[data-theme="navy"]` on purpose: a user who explicitly
   picks Profundo / Preto / Claro in the (edit-mode) Tweaks panel still gets
   their choice — those element values don't match `="navy"`, so the
   element-level Tweaks blocks below win. Only the default sidebar auto-themes.
   Specificity: `:root[data-theme="dark"] .sidebar[data-theme="navy"]` =
   (0,4,1) which cleanly beats the (0,1,1) `:root` defaults. */

/* LIGHT app theme — R397 v2 (owner): the sidebar stays NAVY in light mode.
   The earlier R397 white-surface override was removed; the navy `:root`
   defaults above (white-on-navy) now apply unchanged under the Claro theme,
   restoring the pre-R397 navy slab. (Companion light-mode element swaps at the
   bottom of this file were removed too — they only existed to make a WHITE
   sidebar legible.) */

/* DARK app theme — R397 v2 (owner): the sidebar goes GRAY/BLACK to sit flush
   with the app's dark surface stack instead of staying navy. Tied to --gray-900
   (#0F172A = the dark --bg-app) so the rail matches the rest of the dark UI. */
:root[data-theme="dark"] .sidebar[data-theme="navy"] {
  --sb-bg:          var(--gray-900);           /* #0F172A — dark app surface (R397 v2: gray, not navy) */
  --sb-bg-elev:     rgba(255,255,255,0.06);
  --sb-bg-elev-hi:  rgba(255,255,255,0.10);
  --sb-border:      rgba(255,255,255,0.08);
  --sb-divider:     rgba(255,255,255,0.07);

  --sb-active:      var(--dnuv-blue-light);
  --sb-active-bg:   rgba(60,179,254,0.16);
  --sb-active-bar:  var(--dnuv-blue-light);
}

/* SYSTEM theme (no explicit data-theme) under an OS dark preference — mirror
   of the explicit-dark block so "Sistema" darkens the sidebar too. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar[data-theme="navy"] {
    --sb-bg:          var(--gray-900);  /* R397 v2: gray dark surface, not navy */
    --sb-bg-elev:     rgba(255,255,255,0.06);
    --sb-bg-elev-hi:  rgba(255,255,255,0.10);
    --sb-border:      rgba(255,255,255,0.08);
    --sb-divider:     rgba(255,255,255,0.07);

    --sb-active:      var(--dnuv-blue-light);
    --sb-active-bg:   rgba(60,179,254,0.16);
    --sb-active-bar:  var(--dnuv-blue-light);
  }
}

/* === App shell layout (override grid widths) ============== */
.app                        { grid-template-columns: var(--sb-w) 1fr;
                              transition: grid-template-columns 260ms cubic-bezier(.22,.61,.36,1); }
.app.sidebar-collapsed      { grid-template-columns: var(--sb-rail-w) 1fr; }

/* === Sidebar shell ======================================== */
.sidebar {
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  color: var(--sb-text);
  display: flex; flex-direction: column;
  padding: 0; gap: 0;
  position: sticky; top: 0;
  /* W10/U13 P0 — 100dvh prevents the sidebar bottom (user-card / plan-card)
     from clipping behind the iOS Safari URL bar. */
  height: 100vh; height: 100dvh; min-height: 0;
  transition: width 180ms 100ms cubic-bezier(.22,.61,.36,1),
              box-shadow 180ms cubic-bezier(.22,.61,.36,1);
}
.sidebar:hover { transition-delay: 80ms; }

/* === Brand row ============================================ */
.sb-brand {
  display: flex; align-items: center; flex: 0 0 auto;
  padding: 18px 20px 12px;
  height: 60px; box-sizing: border-box;
  /* Wave-E F-NAV / AREA-NOTE (#29) — logo block: NO square border, transparent
     ground. The logo is a bare <img>, so there was never a box border; these
     are asserted defensively (and to neutralize any inherited a/button chrome
     when the shell agent wraps the mark in a clickable <a href="/overview">). */
  background: transparent;
  border: 0;
}
/* Wave-E F-NAV / AREA-NOTE (#29) — LARGER, clickable logo. Height bumped
   26 → 30px (collapsed-rail mark stays 28px). The shell agent owns wrapping the
   <img> in the home link + click handler; the CSS here makes that wrapper a
   clean, borderless, transparent, pointer-cursor hit area with a subtle hover. */
.brand-full { display: block; height: 30px; width: auto; max-width: 100%; }
.brand-icon { display: none; height: 28px; width: 28px; }
/* Home-link affordance — applies whether the brand is the bare <img> (cursor
   on the row) or wrapped in <a class="sb-brand-link">. No underline/box. */
.sb-brand,
.sb-brand a,
a.sb-brand-link {
  cursor: pointer;
  text-decoration: none;
  border: 0;
  background: transparent;
}
.sb-brand a:hover .brand-full,
.sb-brand:hover .brand-full,
a.sb-brand-link:hover .brand-full,
a.sb-brand-link:hover .brand-icon {
  opacity: .85;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a.sb-brand-link:focus-visible {
  outline: 2px solid var(--sb-active);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* === Workspace switcher =================================== */
.ws-switcher {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  margin: 2px 12px 10px;
  flex: 0 0 auto;
  background: var(--sb-bg-elev);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  color: var(--sb-text);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 120ms, border-color 120ms;
  position: relative;
  box-shadow: none;
}
.ws-switcher:hover {
  background: var(--sb-bg-elev-hi);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.ws-mark {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 7px;
  background: linear-gradient(135deg, var(--dnuv-blue-light), #6FCBFF);
  color: #061546;
  display: grid; place-items: center;
  font-weight: var(--fw-800); font-size: var(--fs-sm); letter-spacing: .02em;
  box-shadow: none;
}
.ws-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ws-name { font-size: var(--fs-small); font-weight: var(--fw-700); color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-tight); letter-spacing: -.005em; }
.ws-sub  { font-size: var(--fs-xs); color: var(--sb-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-normal); }
.ws-caret { width: 14px; height: 14px; color: var(--sb-text-3); flex: 0 0 14px; }
.ws-switcher:hover .ws-caret { color: var(--sb-text); }

/* === Nav scroller ========================================= */
.nav {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 10px 12px;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* Hide the legacy flat label (kept as fallback if used) */
.nav-section { display: none; }

/* === Collapsible group ==================================== */
.nav-group { display: flex; flex-direction: column; }
.nav-group + .nav-group { margin-top: 4px; }

.nav-group-head {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin: 8px 0 2px;
  padding: 6px 10px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing:var(--ls-wide);
  color: var(--sb-text-3); font-weight: var(--fw-700);
  text-align: left;
  border-radius: 8px;
  transition: color 120ms, background 120ms;
}
.nav-group:first-child .nav-group-head { margin-top: 2px; }
.nav-group-head .group-ico { display: none; }
.nav-group-head .group-label { flex: 1; }
.nav-group-head .chev {
  margin-left: auto; width: 14px; height: 14px; color: var(--sb-text-4);
  transition: transform 160ms ease, color 120ms;
}
.nav-group-head:hover { color: var(--sb-text-2); }
.nav-group-head:hover .chev { color: var(--sb-text-2); }
.nav-group.collapsed .nav-group-head .chev { transform: rotate(-90deg); }

/* Count chip — shown only when group is COLLAPSED and contains active route */
.nav-group-head .count {
  display: none;
  font-size: var(--fs-xs); padding: 1px 7px; border-radius: 999px;
  background: var(--sb-active-bg); color: var(--sb-active);
  font-weight: var(--fw-700); letter-spacing: .04em;
}
.nav-group.collapsed.has-active .nav-group-head { color: var(--sb-active); }
.nav-group.collapsed.has-active .nav-group-head .count { display: inline-flex; }

/* Subtle red dot on the group head when it has a danger-badge child and is collapsed */
.nav-group.collapsed.has-badge-danger .nav-group-head::before {
  content: ""; position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--dnuv-danger);
}

.nav-group-body { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.nav-group.collapsed .nav-group-body { display: none; }

/* === Nav item ============================================
   Bumped specificity with `.sidebar` prefix so we always win
   over legacy `.nav-item` rules in the inline <style>.       */
.sidebar .nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  /* Wave-E F-BTNH — lock nav items to the ONE canonical control height
     (--btn-h = 36px, the toolbar/"30 dias" reference) so they no longer drift
     (was an icon-driven ~32px expanded vs 40px rail). Vertical padding is
     dropped to 0 and the row is centered within the fixed height; horizontal
     padding stays for the label inset. box-sizing keeps the height exact. */
  min-height: var(--btn-h);
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--sb-text-2);
  cursor: pointer;
  font-size: var(--fs-small); font-weight: var(--fw-500);
  border: none; background: none; text-align: left;
  /* R272/W5-a/U8 P0-1: nav-items converted from <button> to <a href> for
     native middle-click / Cmd-click new-tab + screen-reader "link" semantics.
     Reset the default anchor underline + visited color so the visual matches
     the previous <button> rendering exactly. */
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.sidebar a.nav-item,
.sidebar a.nav-item:visited,
.sidebar a.nav-item:hover,
.sidebar a.nav-item:active { text-decoration: none; }
/* Lucide's createIcons() REPLACES <i data-lucide> with <svg>, so a bare
   `.nav-item i` selector is dead after render and the glyph would only get
   its colour by `currentColor` inheritance from .nav-item. We therefore also
   target the post-render <svg> explicitly — critical for the collapsed rail
   where .nav-item sets `color:transparent` to hide the label (which would
   otherwise make the icon inherit transparent → invisible). */
.sidebar .nav-item i,
.sidebar .nav-item svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  color: var(--sb-icon);
  transition: color 120ms;
}
.sidebar .nav-item:hover {
  background: var(--sb-bg-elev);
  color: var(--sb-text);
}
.sidebar .nav-item:hover i,
.sidebar .nav-item:hover svg { color: var(--sb-icon-hover); }

.sidebar .nav-item.active {
  background: var(--sb-active-bg);
  color: var(--sb-active);
  font-weight: var(--fw-600);
}
.sidebar .nav-item.active i,
.sidebar .nav-item.active svg { color: var(--sb-active); }
/* C26 critique-#7: explicit focus ring. The global `a:focus-visible` paints a
   low-contrast light-blue glow that disappears on the navy rail and is hard to
   tell apart from the .active pill. Use the bright sidebar accent so keyboard
   focus is unambiguous on the dark ground (and on the light theme it inherits
   the navy --sb-active). */
.sidebar .nav-item:focus-visible {
  outline: 2px solid var(--sb-active);
  outline-offset: 2px;
}
.sidebar .nav-item.active::before {
  content: "";
  position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sb-active-bar);
}

/* Badges — numeric pill on the right edge of the EXPANDED row.
   R389/C26 critique-#1: the count written by _sidebar-badges.js was being
   hidden by a `font-size:0;color:transparent` 7px dot, so the live R259
   counts (cameras/events/incidents/edge) were never visible in the expanded
   sidebar. The pill below restores the visible number; the icon-only rail
   keeps the discrete dot via the `.app.sidebar-collapsed` override below.
   The `.nav-badge .sr-only` child (added by _sidebar-badges.js) carries the
   human-readable "N incidentes abertos" string for assistive tech. */
.sidebar .nav-item .nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 var(--space-1);
  border-radius: 999px;
  font-size: var(--fs-xs); font-weight: var(--fw-700);
  line-height: 1; letter-spacing: .02em;
  /* C26 system-#6: theme-aware semantic tokens replace the raw warn/danger
     hexes that drifted across this file + index.html. */
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  box-shadow: none;
  flex: 0 0 auto;
}
/* Hide all nav-badges when user toggled them off in Settings */
.sidebar.no-badges .nav-badge { display: none !important; }

/* Suppress the generic [data-tooltip] popover for sidebar badges — the count
   is now read from the .sr-only child + aria-label, not this tooltip. */
.sidebar .nav-badge::after,
.sidebar .nav-badge::before { content: none !important; display: none !important; }
.sidebar .nav-item .nav-badge.tone-warn   { background: var(--color-warn-bg);   color: var(--color-warn-fg); }
.sidebar .nav-item .nav-badge.tone-danger { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.sidebar .nav-item.active .nav-badge {
  background: var(--sb-active);
  color: var(--sb-bg);
  box-shadow: none;
}
.sidebar .nav-item.active .nav-badge.tone-danger { background: var(--color-danger-bg); color: var(--color-danger-fg); }

/* === Footer =============================================== */
/* R396 (player-rework / A4 shell) — the `.sb-plan { display:none !important }`
   override was the last trace of the removed plan/usage card. The markup +
   styles were dropped in the revamp (and from both index.html shells); grep
   confirmed no `sb-plan` reference remains in any kit JS. Rule deleted. */

.sb-foot {
  flex: 0 0 auto;
  padding: 8px 10px 12px;
  display: flex; flex-direction: column; gap: var(--space-1);
  border-top: none;
}
.sb-foot > .user-card {
  border-top: none !important;
  padding-top: 8px;
  margin-top: 10px;
  border-radius: 10px;
  position: relative;
}
.sb-foot > .user-card::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 6px; right: 6px;
  height: 1px;
  background: var(--sb-divider);
  border-radius: 1px;
}

.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  margin: 0;
  border: none !important;
  background: transparent;
  cursor: pointer; font-family: inherit; text-align: left;
  width: 100%; box-sizing: border-box;
  border-radius: 10px;
  transition: background 120ms;
  position: relative;
  flex: 0 0 auto;
}
.user-card:hover, .user-card.open { background: var(--sb-bg-elev-hi); }
.user-card-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-tight); }
.user-card-caret { width: 14px; height: 14px; color: var(--sb-text-3); flex: 0 0 14px; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  display: grid; place-items: center;
  font-weight: var(--fw-700); font-size: var(--fs-sm); flex: 0 0 32px;
  letter-spacing: 0.01em;
}
.user-name { font-size: var(--fs-small); font-weight: var(--fw-700); color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-org  { font-size: var(--fs-xs); color: var(--sb-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Collapse toggle — small icon button, LEFT-aligned, ABOVE the user-card */
.sb-collapse-btn {
  align-self: flex-start;
  width: 32px; height: 32px;
  padding: 0;
  margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--sb-text-3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
/* Lucide's createIcons() REPLACES <i data-lucide> with <svg>, so a bare
   `.sb-collapse-btn i` selector is dead after render (same gotcha documented
   for `.nav-item` above). Target the post-render <svg> too so the chevron sizes,
   colors, AND flips (rotate 180°) when the rail collapses. */
.sb-collapse-btn i,
.sb-collapse-btn svg {
  width: 16px; height: 16px; flex: 0 0 16px;
  color: var(--sb-text-3);
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), color 120ms;
}
.sb-collapse-btn:hover { background: var(--sb-bg-elev-hi); color: var(--sb-text); }
.sb-collapse-btn:hover i,
.sb-collapse-btn:hover svg { color: var(--sb-text); }

/* === Collapsed (rail) mode ================================ */
.app.sidebar-collapsed .sidebar {
  width: var(--sb-rail-w);
  overflow: visible;
  z-index: 30;
}

/* --- Brand: icon-only --- */
.app.sidebar-collapsed .sb-brand {
  padding: 14px 0 8px;
  height: 60px;
  justify-content: center;
}
.app.sidebar-collapsed .sb-brand .brand-full { display: none; }
.app.sidebar-collapsed .sb-brand .brand-icon { display: block; height: 28px; width: 28px; }

/* === Workspace switcher (collapsed): force-hide stack/caret === */
.app.sidebar-collapsed .sidebar .ws-switcher .ws-stack,
.app.sidebar-collapsed .sidebar .ws-switcher .ws-caret { display: none !important; }

/* --- Nav padding --- */
.app.sidebar-collapsed .nav { padding: var(--space-1) var(--space-2) var(--space-3); }

/* --- Group head: just generous whitespace between groups --- */
.app.sidebar-collapsed .nav-group-head {
  margin: 0;
  padding: 0;
  height: 0;
  pointer-events: none;
  background: transparent;
  color: transparent;
  border-radius: 0;
  overflow: hidden;
}

/* --- Just visual whitespace between groups, no card/pill --- */
.app.sidebar-collapsed .nav-group { padding: 0; }
.app.sidebar-collapsed .nav-group + .nav-group { margin-top: 16px; }
.app.sidebar-collapsed .nav-group + .nav-group::before {
  /* Thin, barely-visible divider centered above the next group */
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin: -9px auto 8px;
  background: rgba(255,255,255,0.10);
  border-radius: 1px;
}
.app.sidebar-collapsed .nav-group-head .group-label,
.app.sidebar-collapsed .nav-group-head .chev,
.app.sidebar-collapsed .nav-group-head .count { display: none; }
.app.sidebar-collapsed .nav-group-head::before { display: none; }
.app.sidebar-collapsed .nav-group:first-child .nav-group-head { display: none; }

/* In collapsed mode, ALL items are visible (per-group collapsed state ignored) */
.app.sidebar-collapsed .nav-group-body { display: flex !important; flex-direction: column; gap: 2px; }

/* --- Items: icon-only centered --- */
.app.sidebar-collapsed .nav-item {
  /* Wave-E F-BTNH — square the rail item to the canonical 44px touch target
     (matches colors_and_type.css `any-pointer:coarse` floor) instead of the
     prior 40px height outlier, removing the 40/44 drift on the rail. */
  width: 44px; height: 44px; min-height: 44px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
  gap: 0;
  font-size: 0;
  color: transparent;
  border-radius: 10px;
}
.app.sidebar-collapsed .nav-item i,
.app.sidebar-collapsed .nav-item svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--sb-icon); }
.app.sidebar-collapsed .nav-item.active::before {
  /* Re-centered for the 44px rail item (F-BTNH): 11px top/bottom → 22px bar. */
  left: -8px; top: 11px; bottom: 11px;
  width: 3px;
}
/* Rail mode: the numeric pill collapses back to a discrete status dot in the
   top-right corner of the icon. The .sr-only child still names the count for
   AT (the dot is decorative); a ring punches it out of the rail background. */
.app.sidebar-collapsed .nav-item .nav-badge {
  position: absolute; top: 4px; right: 6px;
  min-width: 8px; width: 8px; height: 8px;
  padding: 0; border-radius: 50%;
  font-size: 0; color: transparent;
  background: var(--sb-active);
  box-shadow: 0 0 0 2px var(--sb-bg);
  margin: 0;
}
.app.sidebar-collapsed .nav-item .nav-badge.tone-warn   { background: var(--dnuv-warning); }
.app.sidebar-collapsed .nav-item .nav-badge.tone-danger { background: var(--dnuv-danger); }

/* --- Footer collapsed --- */
.app.sidebar-collapsed .sb-foot { padding: var(--space-2) var(--space-2) var(--space-3); align-items: center; }
.app.sidebar-collapsed .user-card {
  width: 44px; height: 44px;
  padding: 0;
  justify-content: center; gap: 0;
}
.app.sidebar-collapsed .user-card .user-card-stack,
.app.sidebar-collapsed .user-card .user-card-caret { display: none; }
.app.sidebar-collapsed .user-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: var(--fs-xs); }

.app.sidebar-collapsed .sb-collapse-btn {
  align-self: center;
  width: 44px; height: 32px;
  padding: 0;
  margin-top: 8px;
  justify-content: center; gap: 0;
}
.app.sidebar-collapsed .sb-collapse-btn i,
.app.sidebar-collapsed .sb-collapse-btn svg { transform: rotate(180deg); }

/* === Collapsed mode: bump specificity so hover/active match expanded === */
.app.sidebar-collapsed .sidebar .nav-item:hover {
  background: var(--sb-bg-elev);
  color: var(--sb-text);
}
.app.sidebar-collapsed .sidebar .nav-item:hover i,
.app.sidebar-collapsed .sidebar .nav-item:hover svg { color: var(--sb-icon-hover); }
.app.sidebar-collapsed .sidebar .nav-item.active { background: var(--sb-active-bg); color: var(--sb-active); }
.app.sidebar-collapsed .sidebar .nav-item.active i,
.app.sidebar-collapsed .sidebar .nav-item.active svg { color: var(--sb-active); }

/* === Tooltip on collapsed rail ===========================
   CSS ::after tooltips disabled — see sidebar-tooltips.js for
   the JS portal that escapes the nav scroll-container's
   overflow:hidden clip.                                     */
.app.sidebar-collapsed .nav-item::after,
.app.sidebar-collapsed .ws-switcher::after,
.app.sidebar-collapsed .user-card::after,
.app.sidebar-collapsed .sb-collapse-btn::after { content: none; display: none; }

/* Portal tooltip (positioned by JS, rendered on document.body).
   C26 system-#2: hardcoded #061546/#fff surface was a dark-mode bug (near-black
   tooltip on a dark surface). Theme-aware --bg-inverse / --fg-on-dark flip with
   the theme; border uses the token instead of a raw white alpha.
   C26 system-#14 + a11y-#11: tokenized transition (was raw 120ms/160ms + a
   one-off bezier); max-width + wrap so a long localized label can't overflow. */
.sb-tip {
  position: fixed;
  transform: translateY(-50%) translateX(-6px);
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-sm); font-weight: var(--fw-600); letter-spacing: -.005em;
  padding: 7px 11px;
  border-radius: var(--radius-xs);
  max-width: 220px;
  white-space: normal; overflow-wrap: anywhere;
  opacity: 0; pointer-events: none;
  z-index: 10000;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-1);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.sb-tip.show {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* === ab-panel positioning when sidebar collapsed ========= */
.app.sidebar-collapsed .ab-panel-user { left: var(--sb-rail-w); }
.ab-panel-user { bottom: 88px; left: calc(var(--sb-w) + 4px); }
.app.sidebar-collapsed .ab-panel-user { left: calc(var(--sb-rail-w) + 4px); }

/* === Tweaks: themes ====================================== */
.sidebar[data-theme="deep"] {
  --sb-bg:          #040E30;
  --sb-bg-elev:     rgba(255,255,255,0.04);
  --sb-bg-elev-hi:  rgba(255,255,255,0.08);
}
.sidebar[data-theme="black"] {
  --sb-bg:          #0B0F1A;
  --sb-bg-elev:     rgba(255,255,255,0.04);
  --sb-bg-elev-hi:  rgba(255,255,255,0.08);
  --sb-border:      rgba(255,255,255,0.05);
  --sb-divider:     rgba(255,255,255,0.05);
}
.sidebar[data-theme="light"] {
  --sb-bg:          #FFFFFF;
  --sb-bg-elev:     #F2F6FB;
  --sb-bg-elev-hi:  #E6EEF9;
  --sb-border:      var(--border-1);
  --sb-divider:     var(--border-1);

  --sb-text:        var(--fg-1);
  --sb-text-2:      var(--fg-2);
  --sb-text-3:      var(--fg-3);
  --sb-text-4:      var(--fg-4);

  --sb-icon:        var(--fg-3);
  --sb-icon-hover:  var(--dnuv-blue-dark);

  --sb-active:      var(--dnuv-blue-dark);
  --sb-active-bg:   var(--dnuv-blue-50);
  --sb-active-bar:  var(--dnuv-blue-dark);
}
/* R297 / W11 / U26 — light-theme overrides swap to color/navy SVG variants */
.sidebar[data-theme="light"] .brand-full { content: url('/assets/dnuv-logo.svg'); }
.app.sidebar-collapsed .sidebar[data-theme="light"] .brand-icon { content: url('/assets/dnuv-logo-mark.svg'); }
.sidebar[data-theme="light"] .user-avatar,
.sidebar[data-theme="light"] .ws-mark {
  background: linear-gradient(135deg, var(--dnuv-blue-dark), var(--dnuv-blue-light));
  color: #fff;
}

/* R397 v2 (owner) — the DOCUMENT-light companion element swaps (color wordmark
   + gradient avatar/ws-mark scoped to `:root[data-theme="light"] .sidebar
   [data-theme="navy"]`) were REMOVED. They only existed to make a WHITE light
   sidebar legible; now that the light sidebar stays navy, the markup-default
   white wordmark `/assets/dnuv-logo-light.svg` and the white-on-navy avatar
   render correctly with no overrides. */
/* C26 system-#6: the per-theme literal warn/danger overrides were deleted —
   the base .nav-badge tones now use --color-warn-*/--color-danger-* which the
   token sheet already re-binds for the light/dark themes. */

/* === Tweaks: density ===================================== */
/* Wave-E F-BTNH — compact density drops to the canonical SMALL control height
   (--btn-h-sm = 28px) rather than relying on padding alone (the base rule now
   pins min-height:--btn-h, which would otherwise keep compact at 36px). One
   canonical small value, no ad-hoc drift. */
.sidebar[data-density="compact"] .nav-item        { min-height: var(--btn-h-sm); padding: 0 10px; font-size: var(--fs-sm); gap: 10px; }
.sidebar[data-density="compact"] .nav-item i      { width: 16px; height: 16px; flex: 0 0 16px; }
.sidebar[data-density="compact"] .nav-group-head  { padding: 4px 10px; font-size: var(--fs-xs); margin-top: 6px; }
.sidebar[data-density="compact"] .ws-switcher     { padding: 7px 11px; }
.sidebar[data-density="compact"] .user-card       { padding: 6px 10px; }

/* === Tweaks: active style ================================ */
.sidebar[data-active="bar"] .nav-item.active            { background: transparent; }
.sidebar[data-active="bar"] .nav-item.active::before    { left: -10px; width: 3px; }

.sidebar[data-active="solid"] .nav-item.active          { background: var(--sb-active); color: #fff; }
.sidebar[data-active="solid"] .nav-item.active i        { color: #fff; }
.sidebar[data-active="solid"] .nav-item.active::before  { display: none; }
.sidebar[data-active="solid"][data-theme="light"] .nav-item.active { color: #fff; }

/* ===========================================================
   EXPAND / COLLAPSE ANIMATION
   ===========================================================
   Smoothly tween the geometry change between the rail (64px)
   and the full sidebar (260px). The grid column animates the
   layout shift; sidebar inner elements animate their own
   padding / width / margins so nothing snaps abruptly.
   ----------------------------------------------------------- */

:root {
  --sb-anim-dur:  260ms;
  --sb-anim-ease: cubic-bezier(.22,.61,.36,1);
}

/* Sidebar shell itself (overrides earlier transition rule) */
.sidebar {
  transition:
    width            var(--sb-anim-dur) var(--sb-anim-ease),
    box-shadow       180ms var(--sb-anim-ease);
}

/* Inner geometric elements */
.sb-brand,
.brand-full, .brand-icon,
.ws-switcher,
.ws-mark,
.ws-stack, .ws-caret,
.nav,
.nav-group-head,
.nav-group-head .group-label,
.nav-group-head .chev,
.nav-group-head .count,
.sidebar .nav-item,
.sidebar .nav-item i,
.sidebar .nav-item .nav-badge,
.sb-foot,
.user-card,
.user-avatar,
.user-card-stack, .user-card-caret,
.sb-collapse-btn,
.sb-collapse-btn .label,
.sb-collapse-btn i,
.sb-collapse-btn svg {
  transition:
    width            var(--sb-anim-dur) var(--sb-anim-ease),
    height           var(--sb-anim-dur) var(--sb-anim-ease),
    min-width        var(--sb-anim-dur) var(--sb-anim-ease),
    max-width        var(--sb-anim-dur) var(--sb-anim-ease),
    padding          var(--sb-anim-dur) var(--sb-anim-ease),
    margin           var(--sb-anim-dur) var(--sb-anim-ease),
    gap              var(--sb-anim-dur) var(--sb-anim-ease),
    border-radius    var(--sb-anim-dur) var(--sb-anim-ease),
    transform        var(--sb-anim-dur) var(--sb-anim-ease),
    font-size        var(--sb-anim-dur) var(--sb-anim-ease),
    flex-basis       var(--sb-anim-dur) var(--sb-anim-ease),
    color            120ms ease,
    background-color 120ms ease,
    border-color     120ms ease,
    box-shadow       160ms ease,
    opacity          180ms ease;
}

/* During the animation, prevent horizontal scrollbars from popping in */
.sidebar { overflow-x: hidden; }
.app.sidebar-collapsed .sidebar { overflow: visible; }  /* keep tooltip escape */

/* Tooltips should not show DURING the transition (they'd appear under the
   collapse button as the sidebar passes a hover region). Quick disable
   while widths are mid-flight using a class set by JS. */
.app.sb-animating .nav-item::after,
.app.sb-animating .ws-switcher::after,
.app.sb-animating .user-card::after,
.app.sb-animating .sb-collapse-btn::after {
  opacity: 0 !important;
  transition: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app, .sidebar, .sb-brand, .ws-switcher, .ws-mark, .nav-item,
  .user-card, .user-avatar, .sb-collapse-btn, .nav-group-head {
    transition-duration: 0ms !important;
  }
}