/* Grouped left-sidebar navigation (Matt 2026-08-27) — replaces the old horizontal
 * top-nav for logged-in, non-kiosk pages. Kiosk (/wall, /monitoring/live) and the
 * login page keep the chrome-less layout. All colours come from tokens.css.
 *
 * New classnames (.app, .sidebar, .app-main, .topbar-slim) so nothing collides with
 * the legacy .topbar/.nav rules still used by the chrome-less layout. */

.app{display:flex; align-items:stretch; min-height:100vh}
.app-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}

/* ── sidebar ─────────────────────────────────────────────────────────────── */
.sidebar{
  flex:0 0 248px; width:248px; background:var(--bg-soft);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow:hidden; z-index:30;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:16px 16px 12px; flex:0 0 auto}
.sidebar-brand .logo{height:24px; width:auto}
.sidebar-brand .brand-sub{font-family:var(--font-mono,monospace); font-size:var(--fs-xs);
  color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.sidebar-search{margin:0 12px 8px; display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--border); border-radius:8px; background:var(--card-bg); color:var(--muted);
  font-size:var(--fs-sm); cursor:pointer; flex:0 0 auto; text-decoration:none}
.sidebar-search:hover{border-color:var(--accent)}
.sidebar-search .kbd{margin-left:auto; font-family:var(--font-mono,monospace); font-size:11px;
  border:1px solid var(--border); border-radius:5px; padding:1px 5px}

.sidebar-nav{flex:1 1 auto; overflow-y:auto; padding:4px 10px 12px; scrollbar-width:thin}
.side-link{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px;
  color:var(--text-2, var(--muted)); font-size:var(--fs-sm); text-decoration:none; font-weight:500;
  line-height:1.2}
.side-link:hover{background:var(--card-bg); color:var(--text)}
.side-link.active{background:var(--brand-soft); color:var(--brand-ink); font-weight:600}
.side-link.sub{padding-left:34px; font-size:calc(var(--fs-sm) - .5px)}
.side-link .sdot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex:0 0 5px}

.side-pinned{display:flex; flex-direction:column; gap:2px; padding-bottom:8px; margin-bottom:6px;
  border-bottom:1px solid var(--border)}
.side-groups{display:flex; flex-direction:column; gap:2px; margin-top:4px}

/* group = <details>/<summary>, zero-JS collapse */
.side-group{border-radius:8px}
.side-group>summary{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  cursor:pointer; color:var(--text); font-weight:600; font-size:var(--fs-sm); list-style:none;
  user-select:none}
.side-group>summary::-webkit-details-marker{display:none}
.side-group>summary:hover{background:var(--card-bg)}
.side-mono{width:22px;height:22px;flex:0 0 22px;border-radius:6px;display:grid;place-items:center;
  font-family:var(--font-mono,monospace); font-size:10px; font-weight:600;
  background:var(--brand-soft); color:var(--brand-ink)}
.side-group>summary .caret{margin-left:auto; color:var(--muted); font-size:10px; transition:transform .18s}
.side-group[open]>summary .caret{transform:rotate(90deg)}
.side-group .side-kids{display:flex; flex-direction:column; gap:1px; padding:2px 0 6px 6px;
  margin-left:16px; border-left:1px solid var(--border)}

/* footer: taxonomy toggle (admin) + user chip */
.sidebar-foot{flex:0 0 auto; border-top:1px solid var(--border); padding:10px 12px;
  display:flex; flex-direction:column; gap:10px}
.tax-toggle{display:flex; flex-direction:column; gap:4px}
.tax-toggle .tt-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
  font-family:var(--font-mono,monospace)}
.tax-seg{display:inline-flex; background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  padding:2px; gap:2px}
.tax-seg button{flex:1; border:none; background:none; color:var(--muted); cursor:pointer;
  padding:5px 8px; border-radius:6px; font-size:11.5px; font-weight:600; font-family:inherit}
.tax-seg button.on{background:var(--brand-soft); color:var(--brand-ink)}
.tax-seg button:not(.on):hover{color:var(--text)}

/* ── slim top bar inside the main column ─────────────────────────────────── */
.topbar-slim{display:flex; align-items:center; gap:12px; padding:10px 22px; min-height:52px;
  border-bottom:1px solid var(--border); background:var(--bg-elev); position:sticky; top:0; z-index:20}
.topbar-slim .ts-spacer{flex:1 1 auto}
.topbar-slim .nav-toggle{display:none}

/* ── responsive: off-canvas sidebar ≤900px ───────────────────────────────── */
@media (max-width:900px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:0 0 40px rgba(0,0,0,.25)}
  .sidebar.open{transform:translateX(0)}
  .topbar-slim .nav-toggle{display:inline-flex}
  .app-main{width:100%}
  body.sidebar-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:25}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* ── pinned-item badge (so the collapsed rail reads) ─────────────────────── */
.side-mono.pin{background:none;color:var(--muted);font-size:13px;font-weight:400}
.side-link.active .side-mono.pin{color:var(--brand-ink)}

/* ── breadcrumb in the slim topbar ───────────────────────────────────────── */
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);min-width:0;overflow:hidden}
.crumbs a{color:var(--muted);text-decoration:none;white-space:nowrap}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--border-strong);font-size:11px}
.crumbs .cur{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs .cgrp{color:var(--muted)}

/* ⌘K launcher pill in the topbar */
.cmdk-btn{display:inline-flex;align-items:center;gap:8px;background:var(--card-bg);
  border:1px solid var(--border);border-radius:8px;padding:5px 10px;color:var(--muted);
  font-size:var(--fs-xs);cursor:pointer}
.cmdk-btn:hover{border-color:var(--accent)}
.cmdk-btn .kbd{font-family:var(--font-mono,monospace);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;font-size:11px}
/* collapse toggle button */
.nav-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--muted);cursor:pointer}
.nav-collapse-btn:hover{border-color:var(--accent);color:var(--text)}
.nav-collapse-btn .chev{transition:transform .18s}
body.nav-collapsed .nav-collapse-btn .chev{transform:rotate(180deg)}

/* ── COLLAPSED (icon rail — badges kept; only the wordmark becomes an 8D mark) ── */
body.nav-collapsed .sidebar{flex-basis:56px;width:56px}
body.nav-collapsed .sidebar .brand-sub,
body.nav-collapsed .sidebar .logo,
body.nav-collapsed .side-link .plabel,
body.nav-collapsed .side-link span:not(.side-mono):not(.sdot),
body.nav-collapsed .side-group>summary span:not(.side-mono):not(.caret),
body.nav-collapsed .side-group>summary .caret,
body.nav-collapsed .side-group .side-kids,
body.nav-collapsed .sidebar-foot .tt-label,
body.nav-collapsed .sidebar-foot .tax-seg{display:none}
body.nav-collapsed .logo-mini{display:grid}
body.nav-collapsed .side-link,
body.nav-collapsed .side-group>summary,
body.nav-collapsed .sidebar-brand,
body.nav-collapsed .sidebar-brand .brand{justify-content:center;padding-left:0;padding-right:0;gap:0}
body.nav-collapsed .side-pinned,body.nav-collapsed .side-groups{align-items:center}
body.nav-collapsed .sidebar-foot{align-items:center}
body.nav-collapsed .tax-toggle::after{content:"A / B";font-size:10px;color:var(--muted);font-family:var(--font-mono,monospace)}

/* the compact 8D mark, shown only when collapsed */
.logo-mini{display:none;width:28px;height:28px;border-radius:8px;background:var(--brand);
  color:#1b1205;font-family:var(--font-mono,monospace);font-weight:700;font-size:12px;
  place-items:center;box-shadow:0 2px 6px rgba(247,148,30,.4)}

/* ── command palette overlay ─────────────────────────────────────────────── */
.cmdk-scrim{position:fixed;inset:0;background:rgba(15,10,3,.42);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:200}
.cmdk-scrim.on{display:flex}
.cmdk{width:min(560px,92vw);background:var(--bg-elev);border:1px solid var(--border-strong);
  border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);overflow:hidden}
.cmdk-input{width:100%;border:none;background:none;color:var(--text);font-family:inherit;
  font-size:16px;padding:16px 18px;outline:none;border-bottom:1px solid var(--border)}
.cmdk-input::placeholder{color:var(--muted)}
.cmdk-list{max-height:46vh;overflow-y:auto;padding:6px}
.cmdk-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer}
.cmdk-row.hi{background:var(--brand-soft)}
.cmdk-row .cmdk-name{font-size:14px;color:var(--text)}
.cmdk-row.hi .cmdk-name{color:var(--brand-ink);font-weight:600}
.cmdk-row mark{background:none;color:var(--accent-deep, var(--brand-ink));font-weight:700}
.cmdk-row .cmdk-grp{margin-left:auto;font-family:var(--font-mono,monospace);font-size:11px;color:var(--muted)}
.cmdk-empty{padding:22px;text-align:center;color:var(--muted);font-size:var(--fs-sm)}
.cmdk-foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--muted)}
.cmdk-foot kbd{font-family:var(--font-mono,monospace);border:1px solid var(--border);border-radius:5px;padding:1px 5px}

/* group name links to its section hub; the caret still expands the tree */
.side-group>summary .grp-name{flex:1;color:inherit;text-decoration:none}
.side-group>summary .grp-name:hover{color:var(--accent)}
body.nav-collapsed .side-group>summary .grp-name{display:none}