/* ==========================================================================
   DashView — navigation as the landing-page glass dock (css/sidebar-itb.css)
   Paired with js/sidebar-dock.js. The left sidebar is gone: the same nav links
   (same ids, data-view and click handlers) now live in a floating iOS-style
   glass dock at the bottom centre, exactly like css/index-tabbar.css on the
   landing page. Icons only; the active tab opens its label inside a sliding
   glass bead. The page content now uses the full width.
   Load LAST on dashboard.html and people.html.
   ========================================================================== */
:root {
  --sd-h: 58px;
  --sd-glass: rgba(24, 26, 25, .38);
  --sd-edge: rgba(255, 255, 255, .22);
  --sd-edge-lo: rgba(255, 255, 255, .06);
  --sd-icon: rgba(255, 255, 255, .72);
  --sd-icon-hover: #fff;
  --sd-bead: rgba(255, 255, 255, .92);
  --sd-bead-ink: #141813;
  --sd-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .25);
  --sd-ease: cubic-bezier(.32, .72, 0, 1);
}
html[data-theme="light"] {
  --sd-glass: rgba(255, 255, 255, .5);
  --sd-edge: rgba(255, 255, 255, .85);
  --sd-edge-lo: rgba(20, 24, 19, .08);
  --sd-icon: rgba(20, 24, 19, .62);
  --sd-icon-hover: #141813;
  --sd-bead: rgba(20, 24, 19, .88);
  --sd-bead-ink: #ffffff;
  --sd-shadow: 0 18px 40px -14px rgba(20, 24, 19, .28), 0 2px 8px rgba(20, 24, 19, .08);
}

/* ── layout: no sidebar column, content takes the whole width ────────────── */
html .dash-shell,
html .dash-shell.collapsed,
html .dash-shell:not(.collapsed) { display: block !important; grid-template-columns: minmax(0, 1fr) !important; }
html .dash-side { display: contents !important; }
html .dash-side .dash-side-foot,
html .dash-side .dash-nav-label,
html .dash-side .dash-side-collapse-btn,
html .dash-topbar .dash-side-collapse-btn,
html .dash-sidebar-toggle { display: none !important; }
/* room under the content so the dock never covers the last row */
html .dash-main { padding-bottom: calc(var(--sd-h) + 48px + env(safe-area-inset-bottom, 0px)); }
.toast-stack { bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--sd-h) + 14px) !important; }

/* logo + name move to the top bar (js/sidebar-dock.js) */
html .dash-topbar .dash-side-brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  height: auto; padding: 0 4px 0 0; margin: 0; border: 0; background: none; box-shadow: none;
  font-family: var(--f-display, system-ui, sans-serif); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em;
  color: inherit;
}
@media (max-width: 640px) { html .dash-topbar .dash-side-brand span { display: none; } }

/* ── the dock ────────────────────────────────────────────────────────────── */
html .dash-side .dash-nav {
  position: fixed !important;
  left: 50%; top: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 235;
  transform: translateX(-50%);
  display: flex; flex-direction: row; align-items: center; gap: 2px;
  flex: none; width: auto;
  height: var(--sd-h);
  padding: 6px;
  max-width: calc(100vw - 24px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior: contain;
  border-radius: 999px;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 46%, transparent 60%),
    var(--sd-glass);
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.05);
  backdrop-filter: blur(28px) saturate(190%) brightness(1.05);
  border: 1px solid var(--sd-edge-lo);
  box-shadow: var(--sd-shadow), inset 0 1px 0 var(--sd-edge), inset 0 -1px 0 var(--sd-edge-lo), inset 0 0 18px rgba(255, 255, 255, .05);
  transition: opacity .25s ease, transform .35s var(--sd-ease);
  -webkit-tap-highlight-color: transparent;
}
html .dash-side .dash-nav::-webkit-scrollbar { display: none; }
/* the old amber pill / lamp from tabbar.js are not used here */
html .dash-side .dash-nav > .dv-pill,
html .dash-side .dash-nav > .dv-lamp { display: none !important; }

/* sliding bead behind the active tab (positioned by js/sidebar-dock.js) */
.sdock-bead {
  position: absolute; left: 0; top: 6px;
  height: calc(var(--sd-h) - 14px); width: 0;
  border-radius: 999px; z-index: 0; pointer-events: none;
  background: var(--sd-bead);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
  opacity: 0; will-change: transform, width;
}
.dash-nav.sdock-ready > .sdock-bead { opacity: 1; transition: transform .5s var(--sd-ease), width .5s var(--sd-ease); }

/* ── tabs: icon only, the active one grows its label ─────────────────────── */
html .dash-side .dash-nav .dash-nav-link {
  position: relative; z-index: 1;
  flex: none; display: flex; align-items: center; gap: 0;
  height: calc(var(--sd-h) - 14px); min-height: 0;
  margin: 0; padding: 0 13px;
  border-radius: 999px;
  color: var(--sd-icon);
  font: 600 .9375rem/1 var(--f-display, system-ui, sans-serif);
  letter-spacing: -.01em; white-space: nowrap;
  background: transparent; box-shadow: none;
  transition: color .3s ease, padding .5s var(--sd-ease), transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
html .dash-side .dash-nav .dash-nav-link:hover:not(.active) { background: transparent; color: var(--sd-icon-hover); }
html .dash-side .dash-nav .dash-nav-link:active { transform: scale(.94); }
html .dash-side .dash-nav .dash-nav-link:focus-visible { outline: 2px solid var(--amber, #e8a33d); outline-offset: 1px; }

html .dash-side .dash-nav .dash-nav-link svg {
  width: 22px; height: 22px; flex: none; opacity: 1; color: inherit;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transition: color .3s ease;
}
/* icon shapes: .f fills when active, .k details cut out in the bead colour, .s stays a plain stroke */
html .dash-side .dash-nav .dash-nav-link svg .f { transition: fill .3s ease; }
html .dash-side .dash-nav .dash-nav-link svg .k { transition: stroke .3s ease; }
html .dash-side .dash-nav .dash-nav-link.active svg .f { fill: currentColor; }
html .dash-side .dash-nav .dash-nav-link.active svg .k { stroke: var(--sd-bead); }

/* label collapses to zero width when inactive */
html .dash-side .dash-nav .dash-nav-link > span:not(.badge) {
  display: block; max-width: 0; overflow: hidden; opacity: 0; padding-left: 0;
  line-height: 1.35; white-space: nowrap;
  transition: max-width .5s var(--sd-ease), opacity .25s ease, padding .5s var(--sd-ease);
}
html .dash-side .dash-nav .dash-nav-link.active { padding: 0 18px 0 14px; }
html .dash-side .dash-nav .dash-nav-link.active > span:not(.badge) {
  max-width: 10em; opacity: 1; padding-left: 9px; transition-delay: 0s, .08s, 0s;
}

/* active: ink on the bead */
html .dash-side .dash-nav.dv-tabs .dash-nav-link.active,
html .dash-side .dash-nav .dash-nav-link.active {
  color: var(--sd-bead-ink) !important;
  background: transparent !important; box-shadow: none !important; text-shadow: none !important;
  font-weight: 600;
}
html .dash-side .dash-nav .dash-nav-link.active svg { color: var(--sd-bead-ink); }
/* before the script has placed the bead the active tab paints its own */
html .dash-side .dash-nav:not(.sdock-ready) .dash-nav-link.active { background: var(--sd-bead) !important; }

/* badges (New / Live) don't fit an icon dock; the open-task count stays as a small dot */
html .dash-side .dash-nav .dash-nav-link .badge { display: none !important; }
html .dash-side .dash-nav .dash-nav-link:not(.active) #navTaskBadge:not([hidden]) {
  display: block !important; position: absolute; top: 2px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; margin: 0;
  border-radius: 999px; border: 0;
  background: var(--signal, #e8a33d); color: #1a1206;
  font: 700 9px/16px var(--f-mono, monospace); text-align: center; letter-spacing: 0; animation: none;
}

/* ── phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html .dash-side .dash-nav .dash-nav-link { padding: 0 10px; font-size: .875rem; }
  html .dash-side .dash-nav .dash-nav-link.active { padding: 0 15px 0 12px; }
  html .dash-side .dash-nav .dash-nav-link svg { width: 21px; height: 21px; }
}

/* ── keep the dock out of the way of dialogs ─────────────────────────────── */
body:has(.modal-overlay.open) .dash-nav,
body:has(.cmd-overlay.open) .dash-nav,
html.dv-locked .dash-nav { opacity: 0 !important; pointer-events: none !important; transform: translate(-50%, 24px) !important; }

@media (prefers-reduced-motion: reduce) {
  html .dash-side .dash-nav, .dash-nav.sdock-ready > .sdock-bead,
  html .dash-side .dash-nav .dash-nav-link, html .dash-side .dash-nav .dash-nav-link > span { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  html .dash-side .dash-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper, #0a0c0b); }
}
@media print { html .dash-side .dash-nav { display: none !important; } }