/* ─────────────────────────────────────────────────────────────────────────
   sidenav.css — vertical sidebar nav. JS-generated (#side-nav-v2 in
   js/app.js _ensureSideNav) so it doesn't inherit any of nav.css's
   horizontal layout quirks. The old .nav-bottom-row is hidden entirely
   by the same JS, and its .nav-tab children are MOVED (not cloned) into
   the new sidebar to preserve click handlers + perms-driven display:none.
   Toggle: #nav-sidebar-toggle (edge pill) flips body.sidebar-collapsed.
   ───────────────────────────────────────────────────────────────────────── */

/* --- Layout tokens -------------------------------------------------------- */
/* Shrink --nav-h to just the top-row height so the empty 40px band where
   .nav-bottom-row used to live disappears. .tab-panel uses var(--nav-h)
   for its padding-top, so this automatically reclaims the empty bar. */
:root {
  --nav-h: 46px;
  --side-nav-w: 220px;
  /* sidebar starts where the nav ends — bumped by the WIP banner height so
     it doesn't sit under the banner. Falls back to 46px if --banner-h is
     unset (e.g., banner deactivated). */
  --side-nav-top: calc(var(--banner-h, 0px) + 46px);
}
#main-nav { height: auto !important; min-height: 46px; }
.nav-top-row { height: 46px !important; }

/* --- Top-bar clock (small chip beside the LIVE pill) --------------------- */
.nav-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-shrink: 0;
  padding: 5px 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 40px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}
.nav-clock-time {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(56, 189, 248, 0.98);
  font-variant-numeric: tabular-nums;
}
.nav-clock-date {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .nav-clock-date { display: none; }
}
#side-nav-v2 {
  position: fixed;
  left: 0;
  top: var(--side-nav-top);
  bottom: 0;
  width: var(--side-nav-w);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  /* extra top padding gives the first row clear dark space below the top bar so
     the active pill never looks clipped against the sidebar's top edge */
  padding: 22px 10px 16px;
  background: rgba(8, 14, 22, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid rgba(56, 189, 248, 0.10);
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.45) rgba(255,255,255,0.04);
  /* No transform transition — sidebar snaps in sync with the toggle button
     and the content's padding-left, so a single click flips the whole layout
     in one frame. */
}
#side-nav-v2::-webkit-scrollbar { width: 6px; }
#side-nav-v2::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.40); border-radius: 6px; }

/* Make the moved .nav-tab buttons render as full-width sidebar rows. The
   important flags defeat the nav-tab-in @keyframe + nth-child animation
   chain that was leaving them at opacity:0. */
#side-nav-v2 .nav-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 11px 14px 11px 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(226, 232, 240, 0.82) !important;
  background: transparent !important;
  cursor: pointer !important;
  visibility: visible !important;
  /* Stagger entrance — set via animation; opacity/transform managed by keyframe.
     Cascading delays applied below to give a 30-40ms beat per row. */
  animation: sidenav-tab-in 0.42s cubic-bezier(0.23, 1, 0.32, 1) both !important;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-left-color 0.18s ease,
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
#side-nav-v2 .nav-tab:nth-child(1)  { animation-delay: 0.04s !important; }
#side-nav-v2 .nav-tab:nth-child(2)  { animation-delay: 0.07s !important; }
#side-nav-v2 .nav-tab:nth-child(3)  { animation-delay: 0.10s !important; }
#side-nav-v2 .nav-tab:nth-child(4)  { animation-delay: 0.13s !important; }
#side-nav-v2 .nav-tab:nth-child(5)  { animation-delay: 0.16s !important; }
#side-nav-v2 .nav-tab:nth-child(6)  { animation-delay: 0.19s !important; }
#side-nav-v2 .nav-tab:nth-child(7)  { animation-delay: 0.22s !important; }
#side-nav-v2 .nav-tab:nth-child(8)  { animation-delay: 0.25s !important; }
#side-nav-v2 .nav-tab:nth-child(9)  { animation-delay: 0.28s !important; }
#side-nav-v2 .nav-tab:nth-child(10) { animation-delay: 0.31s !important; }
#side-nav-v2 .nav-tab:nth-child(11) { animation-delay: 0.34s !important; }
#side-nav-v2 .nav-tab:nth-child(12) { animation-delay: 0.37s !important; }

@keyframes sidenav-tab-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Press feedback on the sidebar rows */
#side-nav-v2 .nav-tab:active {
  transform: scale(0.985) !important;
  transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

#side-nav-v2 .nav-tab:hover {
  background: rgba(56, 189, 248, 0.08) !important;
  color: var(--text-primary) !important;
}
#side-nav-v2 .nav-tab.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: rgba(56, 189, 248, 1) !important;
  border-left-color: rgba(56, 189, 248, 0.95) !important;
}
/* Active-row glow on activation — barely-there inner halo */
#side-nav-v2 .nav-tab.active {
  box-shadow:
    inset 1px 0 0 rgba(56, 189, 248, 0.18),
    inset 0 0 18px rgba(56, 189, 248, 0.06) !important;
}

@media (prefers-reduced-motion: reduce) {
  #side-nav-v2 .nav-tab {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #side-nav-v2 .nav-tab:active {
    transform: none !important;
  }
}
/* The active-pill ::after from nav.css was for the horizontal strip — kill it */
#side-nav-v2 .nav-tab.active::after { display: none !important; }

/* Tabs hidden by perms (inline style="display:none") stay hidden */
#side-nav-v2 .nav-tab[style*="display: none"],
#side-nav-v2 .nav-tab[style*="display:none"] { display: none !important; }

/* Tab icons — inline SVG prefix per row, fixed slot so labels line up. */
#side-nav-v2 .nav-tab { gap: 12px !important; }
#side-nav-v2 .nav-tab-icon {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  color: rgba(226, 232, 240, 0.55);
  transition: color 0.18s ease, transform 0.18s ease;
}
#side-nav-v2 .nav-tab:hover .nav-tab-icon {
  color: rgba(56, 189, 248, 0.85);
  transform: translateX(1px);
}
#side-nav-v2 .nav-tab.active .nav-tab-icon { color: rgba(56, 189, 248, 1); }
#side-nav-v2 .nav-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Hide the icons in the (legacy) horizontal nav strip — they're sized for
   the sidebar row layout and would distort the old inline tab buttons. */
.nav-bottom-row .nav-tab-icon { display: none; }

/* --- Edge toggle — half-pill that hugs the right edge of the sidebar -----
   When the sidebar is open it sits at left: var(--side-nav-w); when
   collapsed it slides back with the sidebar so it remains visible at
   left: 0. The chevron flips direction with .is-collapsed. */
.sidenav-edge-toggle {
  position: fixed;
  left: var(--side-nav-w);
  top: 50%;
  transform: translate(-50%, -50%);   /* straddle the sidebar's right edge */
  width: 28px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 22, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  color: rgba(56, 189, 248, 0.95);
  cursor: pointer;
  z-index: 100;          /* above sidebar (40), above local overlays, below modals (9000+) */
  pointer-events: auto;
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.40),
              0 0 14px rgba(56, 189, 248, 0.15);
  /* No `left` transition — button snaps to its new position on click so a
     fast second click always lands on the button, not on empty space where
     it used to be. Only color transitions remain. */
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.sidenav-edge-toggle:hover {
  /* Soft hover — keep the cyan accent but don't invert the colors, so the
     button doesn't visually "jump" when the cursor enters/leaves. */
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.55);
  color: rgba(125, 211, 252, 1);
}
/* Override polish.css's `button:active { transform: scale(0.97) }` — it
   wipes our permanent translate(-50%, -50%) and the button jumps. Keep
   the centering transform on press; no scale, no animation. */
.sidenav-edge-toggle:active,
button.sidenav-edge-toggle:not(:disabled):active {
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}
.sidenav-edge-toggle svg { transition: none; }  /* chevron snaps too */
body.sidebar-collapsed .sidenav-edge-toggle {
  left: 0;
}
body.sidebar-collapsed .sidenav-edge-toggle svg { transform: scaleX(-1); }

/* --- Sidebar = re-purposed .nav-bottom-row -------------------------------- */
/* Top offset accounts for the top nav row (logo + dept + controls + user). */
:root {
  --side-nav-w: 220px;
  --side-nav-rail: 64px;   /* collapsed = a usable icon rail, not hidden */
  --side-nav-top: 64px;
}

.nav-bottom-row {
  position: fixed;
  left: 0;
  top: var(--side-nav-top);
  bottom: 0;
  width: var(--side-nav-w);
  height: auto;
  padding: 14px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(8, 14, 22, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 40;
  /* No transform transition — snaps in sync with toggle + content. */
}

/* Sliding pill from horizontal layout is hidden — for vertical we use
   per-tab .active styling instead (cyan left bar + bg). */
#nav-indicator { display: none !important; }

/* Tabs container scrolls vertically if there are too many. */
.nav-tabs {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: none;
}

/* Tabs: block-level rows, left-aligned text, cyan accent left-border on
   .active. We FORCE opacity:1 + animation:none because nav.css's
   .nav-tab-in keyframe leaves elements at opacity:0 with animation-fill-mode
   `both` — if the cascade timing is off, sidebar tabs stay invisible. */
.nav-tab,
.nav-tabs .nav-tab,
.nav-tab:nth-child(1),
.nav-tab:nth-child(2),
.nav-tab:nth-child(3),
.nav-tab:nth-child(4),
.nav-tab:nth-child(5),
.nav-tab:nth-child(6),
.nav-tab:nth-child(7),
.nav-tab:nth-child(8),
.nav-tab:nth-child(9),
.nav-tab:nth-child(10) {
  animation: none !important;
  animation-delay: 0s !important;
  opacity: 1 !important;
}
.nav-tab {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 14px 10px 16px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.78);       /* brighter than --text-muted */
  border-left: 3px solid transparent;
  background: transparent;
  transform: none;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-left-color var(--t-fast) var(--ease-out);
}
/* Honor tabs that were hidden by perms — those have inline style display:none */
.nav-tab[style*="display: none"],
.nav-tab[style*="display:none"] { display: none !important; }

.nav-tab:hover {
  background: rgba(56,189,248,0.08);
  color: var(--text-primary);
  transform: none;
}
.nav-tab.active {
  background: rgba(56,189,248,0.14);
  color: rgba(56,189,248,1);
  border-left-color: rgba(56,189,248,0.95);
  box-shadow: inset 1px 0 0 rgba(56,189,248,0.18);
}

/* Content area shifts right by sidebar width. Apply on every dept dashboard. */
.dept-dashboard {
  padding-left: var(--side-nav-w);
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top nav stays full-width (sits above the sidebar). Cancel inherited
   padding-left from .dept-dashboard so the logo doesn't shift in. */
.dept-dashboard #main-nav { margin-left: calc(-1 * var(--side-nav-w)); padding-left: var(--side-nav-w);
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* --- Collapsed state (desktop) = mini icon rail, NOT hidden --------------- */
/* CSS is AUTHORITATIVE here (!important) so it ALWAYS beats any GSAP inline left
   over from priming/animation. That stale inline (content offset 220px while the
   rail is 64px) was the dead gap beside the rail. Scoped to desktop so the phone
   overlay (translateX + content padding 0, handled in the @media below) is
   untouched. Transitions on the base elements above animate the class toggle. */
body.sidebar-collapsed #side-nav-v2 { pointer-events: auto; }
@media (min-width: 769px) {
  body.sidebar-collapsed #side-nav-v2 { width: var(--side-nav-rail) !important; }
  body.sidebar-collapsed .dept-dashboard { padding-left: var(--side-nav-rail) !important; }
  body.sidebar-collapsed .dept-dashboard #main-nav { margin-left: calc(-1 * var(--side-nav-rail)) !important; padding-left: var(--side-nav-rail) !important; }
  body.sidebar-collapsed .sidenav-edge-toggle { left: var(--side-nav-rail) !important; }
}

/* --- Phone (≤ 768 px) ------------------------------------------------------ */
/* On small viewports, sidebar is collapsed by default. When opened it overlays
   the content (doesn't push) so we don't get a sliver of unusable column. */
@media (max-width: 768px) {
  .dept-dashboard { padding-left: 0; }
  .dept-dashboard #main-nav { margin-left: 0; padding-left: 0; }
  #side-nav-v2 {
    transform: translateX(calc(-1 * (var(--side-nav-w) + 4px)));
    pointer-events: none;
    box-shadow: 16px 0 40px rgba(0,0,0,0.45);
  }
  body:not(.sidebar-collapsed) #side-nav-v2 {
    transform: translateX(0);
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bottom-row,
  .dept-dashboard,
  .dept-dashboard #main-nav,
  .nav-sidebar-toggle svg { transition: none; }
}

/* ── Light-theme overrides ───────────────────────────────────────────────
   Hardcoded dark backgrounds + rgba(226,232,240,X) text are invisible
   over the light page bg. Mirror the dark layout with light-friendly
   neutrals — keep the cyan accent for the active row + scrollbar so the
   sidebar still reads as a Torus surface. */
html[data-theme="light"] #side-nav-v2 {
  background: rgba(255, 255, 255, 0.86);
  border-right-color: rgba(2, 132, 199, 0.22);
  scrollbar-color: rgba(2,132,199,0.55) rgba(0,0,0,0.04);
}
html[data-theme="light"] #side-nav-v2::-webkit-scrollbar-thumb {
  background: rgba(2,132,199,0.50);
}

html[data-theme="light"] #side-nav-v2 .nav-tab {
  color: rgba(30, 41, 59, 0.82) !important;
}
html[data-theme="light"] #side-nav-v2 .nav-tab:hover {
  background: rgba(2, 132, 199, 0.08) !important;
}
html[data-theme="light"] #side-nav-v2 .nav-tab.active {
  background: rgba(2, 132, 199, 0.14) !important;
  color: rgba(2, 132, 199, 1) !important;
  border-left-color: rgba(2, 132, 199, 0.95) !important;
}

/* Icons inherit a dark-mode near-white (rgba(226,232,240,.55)) that vanishes
   over the light sidebar. Re-tint to slate for rest, sky-600 for hover/active —
   mirroring the label states above. Kept a hair below the 0.82 label so the
   label still leads, but solid enough to read at a glance. */
html[data-theme="light"] #side-nav-v2 .nav-tab-icon {
  color: rgba(30, 41, 59, 0.62);
}
html[data-theme="light"] #side-nav-v2 .nav-tab:hover .nav-tab-icon {
  color: rgba(2, 132, 199, 0.85);
}
html[data-theme="light"] #side-nav-v2 .nav-tab.active .nav-tab-icon {
  color: rgba(2, 132, 199, 1);
}

html[data-theme="light"] .sidenav-edge-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(2, 132, 199, 0.35);
  color: rgba(2, 132, 199, 0.95);
}
html[data-theme="light"] .sidenav-edge-toggle:hover {
  background: rgba(2, 132, 199, 0.16);
  border-color: rgba(2, 132, 199, 0.65);
  color: #04050f;
}

html[data-theme="light"] .nav-bottom-row {
  background: rgba(255, 255, 255, 0.78);
  border-right-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .nav-tabs .nav-tab {
  color: rgba(30, 41, 59, 0.78);
}
html[data-theme="light"] .nav-tabs .nav-tab:hover {
  background: rgba(2,132,199,0.08);
}
html[data-theme="light"] .nav-tabs .nav-tab.active {
  background: rgba(2,132,199,0.14);
  color: rgba(2,132,199,1);
  border-left-color: rgba(2,132,199,0.95);
}

html[data-theme="light"] .nav-clock-time,
html[data-theme="light"] .nav-clock-date { color: rgba(2, 132, 199, 0.95); }

/* Section labels + their trailing hairline are hardcoded slate-400 @0.5 — too
   faint to read on the light sidebar. Darken the text to a legible slate and
   deepen the hairline so the grouped IA stays scannable. */
html[data-theme="light"] #side-nav-v2 .nav-section-label { color: rgba(51, 65, 85, 0.62); }
html[data-theme="light"] #side-nav-v2 .nav-section-label::after {
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.22), transparent);
}
html[data-theme="light"] body.sidebar-collapsed #side-nav-v2 .nav-section-label::after {
  background: rgba(51, 65, 85, 0.20);
}

/* ── Daily Logs dropdown (Archive child) ─────────────────────────────────────
   The Daily Logs nav row owns a collapsible Archive child. Desktop: hover the
   group to reveal it (mouse-first). Touch/click: js/app.js toggles .dd-open on
   the group. The Archive row stays revealed whenever it's the active tab. Perms
   gating (inline display:none on #tab-btn-archive, mirrored from rooms) wins via
   the :not([style*=...]) guards below so a hidden child never flashes open. */
#side-nav-v2 .nav-dd-group {
  display: flex !important;
  flex-direction: column;
  width: 100%;
}
/* Caret on the parent row — sits at the far right, rotates when expanded. */
#side-nav-v2 .nav-dd-caret {
  flex: 0 0 auto;
  margin-left: auto !important;
  opacity: 0.55;
  transition: transform 0.2s cubic-bezier(0.23,1,0.32,1), opacity 0.18s ease;
}
#side-nav-v2 .nav-dd-group:hover .nav-dd-caret,
#side-nav-v2 .nav-dd-group.dd-open .nav-dd-caret { opacity: 0.95; }
#side-nav-v2 .nav-dd-group.dd-open .nav-dd-caret,
#side-nav-v2 .nav-dd-group:has(.nav-dd-child.active) .nav-dd-caret { transform: rotate(180deg); }

/* Archive child — collapsed by default, indented under the parent. */
#side-nav-v2 .nav-dd-child {
  display: none !important;
  margin-left: 14px !important;
  width: calc(100% - 14px) !important;
  font-size: 11.5px !important;
  animation: none !important;   /* it's hidden at mount — skip the entrance stagger */
}
/* Reveal: group explicitly open (click), or Archive is the active tab. NO hover
   reveal — opening is a deliberate click (js/app.js toggles .dd-open). The
   :not() guards defer to perms — a perms-hidden child stays hidden. */
#side-nav-v2 .nav-dd-group.dd-open .nav-dd-child:not([style*="display: none"]):not([style*="display:none"]),
#side-nav-v2 .nav-dd-child.active {
  display: flex !important;
}
@media (prefers-reduced-motion: reduce) {
  #side-nav-v2 .nav-dd-caret { transition: none !important; }
}

/* ── Sectioned information architecture — labeled, scannable nav groups ─────── */
#side-nav-v2 .nav-section { display: flex; flex-direction: column; gap: 3px; }
#side-nav-v2 .nav-section[data-section="top"] { margin-bottom: 2px; }
#side-nav-v2 .nav-section + .nav-section { margin-top: 13px; }
#side-nav-v2 .nav-section-label {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 16px; margin-bottom: 1px;
  font-family: var(--font-display, 'Space Grotesk'), sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(148, 163, 184, 0.5);
  user-select: none;
  animation: sidenav-tab-in 0.42s cubic-bezier(0.23, 1, 0.32, 1) both;
}
/* a faint hairline trailing the label gives the grouped, professional look */
#side-nav-v2 .nav-section-label::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), transparent);
}
@media (prefers-reduced-motion: reduce) {
  #side-nav-v2 .nav-section-label { animation: none !important; }
}
/* ── Collapsed = mini icon rail: icons stay, text hides, everything centers ── */
body.sidebar-collapsed #side-nav-v2 { padding-left: 8px !important; padding-right: 8px !important; align-items: stretch; }
body.sidebar-collapsed #side-nav-v2 .nav-tab {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
  border-left-width: 0 !important;
  border-radius: 11px !important;
}
body.sidebar-collapsed #side-nav-v2 .nav-tab-label { display: none !important; }
body.sidebar-collapsed #side-nav-v2 .nav-dd-caret { display: none !important; }
body.sidebar-collapsed #side-nav-v2 .nav-tab-icon { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; }
/* Active row in the rail = a centered highlight pill, NOT a left-border accent
   and NO sideways nudge: the icon stays dead-centered, just highlighted in place. */
body.sidebar-collapsed #side-nav-v2 .nav-tab.active {
  border-left-width: 0 !important;
  background: rgba(56, 189, 248, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.30) !important;
}
/* Kill every horizontal transform in the rail (hover/press/entrance icon nudge,
   row press-scale) so an active/hovered icon never shifts to the side. */
body.sidebar-collapsed #side-nav-v2 .nav-tab,
body.sidebar-collapsed #side-nav-v2 .nav-tab:hover,
body.sidebar-collapsed #side-nav-v2 .nav-tab:active,
body.sidebar-collapsed #side-nav-v2 .nav-tab.active { transform: none !important; }
body.sidebar-collapsed #side-nav-v2 .nav-tab:hover .nav-tab-icon,
body.sidebar-collapsed #side-nav-v2 .nav-tab.active .nav-tab-icon { transform: none !important; }
/* section headers collapse to a quiet centered divider line in the rail */
body.sidebar-collapsed #side-nav-v2 .nav-section-label { font-size: 0 !important; letter-spacing: 0 !important; gap: 0 !important; padding: 5px 8px !important; }
body.sidebar-collapsed #side-nav-v2 .nav-section-label::after { background: rgba(148, 163, 184, 0.14); }
/* the Daily Logs dropdown can't expand inside the rail — hide the Archive child */
body.sidebar-collapsed #side-nav-v2 .nav-dd-child { display: none !important; }