/* ═══ SecureNet Hub — sidebar.css (G3.2) ═══════════════════════════════
   ONE sidebar everywhere: loaded by base.html on hub pages and injected
   into the /schedule and /fleet SPAs. Bulletproofing: all rules are
   ID-scoped to #hubSidebar and the tokens live ON the element (not
   :root), so nothing an embedded app does to global styles or root
   variables can restyle it. Fonts, colors, and underline resets are
   explicit for the same reason. */
#hubSidebar{
  --paper:#F4F5F7; --card:#FFFFFF; --ink:#1D2636; --mid:#5A6780;
  --soft:#8B94A6; --line:#E4E7EC; --line2:#D4D9E2;
  --blue:#2458E6; --blue-soft:#EBF0FF; --red:#D92D20; --red-soft:#FEECEB;
  --sans:'Inter',system-ui,sans-serif; --disp:'Space Grotesk',var(--sans);
  --r-sm:9px; --side-w:230px;
}
html[data-theme="dark"] #hubSidebar{
  --paper:#12161F; --card:#1A202C; --ink:#E7EBF3; --mid:#9AA5B8;
  --soft:#68738A; --line:#262E3E; --line2:#333D50;
  --blue:#7C9EFF; --blue-soft:#1E2A48; --red:#F97066; --red-soft:#3A1F1D;
}
#hubSidebar, #hubSidebar *{box-sizing:border-box;margin:0;padding:0}
#hubSidebar{font-family:var(--sans);font-size:14.5px;line-height:1.5;
  color:var(--ink);text-align:left}
#hubSidebar a{text-decoration:none !important;color:inherit}
#hubSidebar a:visited{color:inherit}
#hubSidebar .grow{flex:1}
body.has-side .main-content{margin-left:230px}
/* ── 3 · sidebar + shell ────────────────────────────────────────────── */
#hubSidebar{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--card);
      border-right:1px solid var(--line);display:flex;flex-direction:column;
      padding:18px 12px 14px;z-index:40;overflow-y:auto}
#hubSidebar .brand{display:flex;align-items:center;gap:10px;padding:2px 10px 16px}
#hubSidebar .brand svg{width:28px;height:28px;flex:none}
#hubSidebar .brand b{font:600 15px var(--disp)}
#hubSidebar .snav .item{margin-bottom:2px}
#hubSidebar .snav .lead{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
            color:var(--mid);font-weight:500}
#hubSidebar .snav .lead svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
                stroke-linecap:round;stroke-linejoin:round;flex:none}
#hubSidebar .snav .lead:hover{background:var(--paper);color:var(--ink)}
#hubSidebar .snav .item.here>.lead{background:var(--blue-soft);color:var(--blue)}
#hubSidebar .snav .sub{display:none;padding:2px 0 4px 26px}
#hubSidebar .snav .item.here .sub{display:block}
#hubSidebar .snav .sub a{display:block;padding:6px 12px;border-radius:8px;font-size:13.5px;color:var(--mid);
             border-left:2px solid var(--line);margin-left:6px}
#hubSidebar .snav .sub a:hover{color:var(--ink)}
#hubSidebar .snav .sub a.on{color:var(--blue);border-left-color:var(--blue);font-weight:600}
#hubSidebar .mode{display:flex;align-items:center;gap:9px;width:100%;margin-bottom:8px;padding:8px 12px;
      background:none;border:1px solid var(--line);border-radius:10px;color:var(--mid);
      font:500 13px var(--sans);cursor:pointer}
#hubSidebar .mode:hover{color:var(--ink);border-color:var(--line2)}
#hubSidebar .mode .moon{display:none}
html[data-theme="dark"] #hubSidebar .mode .moon{display:block}
html[data-theme="dark"] #hubSidebar .mode .sun{display:none}
#hubSidebar .me{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
          border:1px solid var(--line)}
#hubSidebar .me .user-avatar{width:32px;height:32px;border-radius:9px;background:var(--blue-soft);
     color:var(--blue);display:grid;place-items:center;font:600 12px var(--disp);flex:none}
#hubSidebar .me .who{min-width:0}
#hubSidebar .me .who b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hubSidebar .me .who span{font-size:11.5px;color:var(--soft)}
#hubSidebar .me .logout{margin-left:auto;color:var(--soft);display:grid;place-items:center;
                  width:28px;height:28px;border-radius:7px}
#hubSidebar .me .logout:hover{color:var(--red);background:var(--red-soft)}
#hubSidebar .me .logout svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
                      stroke-linecap:round;stroke-linejoin:round}

/* ── mobile: the sidebar becomes a slide-in drawer (G5). Same markup,
   same permissions, same toggle — it slides instead of vanishing. ── */
#hubNavBtn{display:none}
#hubScrim{display:none}
@media (max-width:1060px){
  body.has-side .main-content{margin-left:0}
  #hubSidebar{
    transform:translateX(-102%);
    transition:transform .22s ease;
    z-index:1200 !important;   /* above EVERYTHING: hub kov (300), SPA modals (100), fleet overlay (1000) */
    box-shadow:0 0 40px rgba(10,15,25,.35);
    width:min(250px,84vw);
  }
  #hubSidebar.open{transform:translateX(0)}
  #hubScrim{
    position:fixed;inset:0;z-index:1150;background:rgba(15,20,30,.45);
    opacity:0;pointer-events:none;transition:opacity .22s ease;display:block}
  #hubScrim.open{opacity:1;pointer-events:auto}
  #hubNavBtn{
    --btn-card:#FFFFFF; --btn-ink:#1D2636; --btn-line:#D4D9E2;
    display:grid;place-items:center;position:fixed;top:12px;left:12px;
    z-index:1100;width:42px;height:42px;border-radius:12px;cursor:pointer;
    background:var(--btn-card);color:var(--btn-ink);
    border:1px solid var(--btn-line);
    box-shadow:0 2px 10px rgba(15,20,30,.12)}
  html[data-theme="dark"] #hubNavBtn{
    --btn-card:#1A202C; --btn-ink:#E7EBF3; --btn-line:#333D50}
  #hubNavBtn svg{width:19px;height:19px;stroke:currentColor;fill:none;
    stroke-width:2;stroke-linecap:round}
}