/* TuStreams shared navigation (see /shared/nav.js). Uses each page's sidebar tokens:
   --side-bg --side-ink --side-active --side-hover-bg --side-line --muted */
#nav.ts-nav { display: flex; flex-direction: column; padding: 6px 0 24px; }
#nav.ts-nav .nv-group { border-bottom: 1px solid var(--side-line); }
#nav.ts-nav .nv-group[hidden] { display: none; }

#nav.ts-nav .nv-head {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0;
  padding: 10px 14px 10px 18px; border: 0; background: transparent; cursor: pointer; text-align: left;
  color: var(--muted); font: 800 11.5px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase;
}
#nav.ts-nav .nv-head:hover { color: var(--side-ink); background: transparent; }
#nav.ts-nav .nv-group.open .nv-head { color: var(--side-ink); }
#nav.ts-nav .nv-head::before { content: none; }
#nav.ts-nav .nv-head > svg { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nav.ts-nav .nv-head .nv-label { flex: 1; }
#nav.ts-nav .nv-head .nv-chev { width: 14px; height: 14px; flex: 0 0 14px; opacity: .7; transition: transform .2s ease; }
#nav.ts-nav .nv-group.open .nv-chev { transform: rotate(90deg); }

/* smooth open/close without measuring heights */
#nav.ts-nav .nv-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
#nav.ts-nav .nv-group.open .nv-items { grid-template-rows: 1fr; }
#nav.ts-nav .nv-items > div { overflow: hidden; min-height: 0; }
#nav.ts-nav .nv-group.open .nv-items > div { padding-bottom: 6px; }

#nav.ts-nav .nv-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; margin: 0;
  padding: 8px 14px 8px 30px; border: 0; background: transparent; cursor: pointer; text-align: left; text-decoration: none;
  color: var(--side-ink); font: 500 14px/1.3 var(--body);
}
#nav.ts-nav .nv-item[hidden] { display: none; }
#nav.ts-nav .nv-item > svg { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
#nav.ts-nav .nv-item .nv-label { flex: 1; }
#nav.ts-nav .nv-item:hover { color: var(--side-active); background: var(--side-hover-bg); }
#nav.ts-nav .nv-item[aria-current="page"] { color: var(--side-active); background: var(--side-hover-bg); font-weight: 700; }
#nav.ts-nav .nv-item[aria-current="page"] > svg { opacity: 1; }
#nav.ts-nav .nv-item::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 4px; border-radius: 0 3px 3px 0; background: #0452D8; transform: scaleY(0); transition: transform .15s ease; }
#nav.ts-nav .nv-item[aria-current="page"]::before { transform: scaleY(1); }
#nav.ts-nav .nv-item:focus-visible, #nav.ts-nav .nv-head:focus-visible { outline: 2px solid var(--side-active); outline-offset: -2px; }
#nav.ts-nav .navbadge { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { #nav.ts-nav .nv-items, #nav.ts-nav .nv-chev, #nav.ts-nav .nv-item::before { transition: none; } }

/* top-level link (Executive Dashboard) */
#nav.ts-nav .nv-top { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--side-line); color: var(--side-ink); text-decoration: none; font: 800 13.5px/1.2 var(--body); }
#nav.ts-nav .nv-top > svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nav.ts-nav .nv-top:hover, #nav.ts-nav .nv-top[aria-current="page"] { color: var(--side-active); background: var(--side-hover-bg); }
#nav.ts-nav .nv-top::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 4px; border-radius: 0 3px 3px 0; background: #0452D8; transform: scaleY(0); transition: transform .15s ease; }
#nav.ts-nav .nv-top[aria-current="page"]::before { transform: scaleY(1); }
#nav.ts-nav .nv-top:focus-visible { outline: 2px solid var(--side-active); outline-offset: -2px; }
