/* GridMail dashboard shell — the ONE source for sidebar chrome.
Consumed directly by dashboard.html () and by the React dashboard
pages (DashboardLayout/Sidebar inject this same file). Edit only here —
duplicating these rules anywhere else is exactly how the sidebar drifted
out of sync before. */
/* Design tokens are the single source of truth (/DESIGN.md). Imported here so the
React-injected shell resolves every var(--token) even on pages that don't
tokens.css themselves; the dashboard.html page also links it directly in . */
@import url('/styles/tokens.css');
:root{
/* Legacy palette names are kept as ALIASES onto the design tokens. The dashboard
markup + JS reference these names in hundreds of places; aliasing remaps the whole
surface onto the token system in one place and purges the old vibe-coded hexes.
Never inline a new hex here: add it to tokens.css, then alias it. */
--card: var(--surface);
--mut: var(--ink-secondary);
--line: var(--border);
--brand: var(--accent);
--brandhover: var(--accent-hover);
--brandsoft: var(--accent-soft);
--green: var(--good);
--greensoft: rgba(53,184,125,0.14); /* soft --good tint (status only) */
--amber: var(--warn);
--ambersoft: rgba(224,166,59,0.14); /* soft --warn tint (status only) */
--slate: var(--surface-raised);
--radius: var(--r-card);
--teal: var(--ink-tertiary); /* retired brand hue -> neutral ink */
--purple: var(--ink-tertiary); /* retired brand hue -> neutral ink */
--nav: var(--surface);
--navmut: var(--ink-tertiary);
--navhov: var(--surface-raised);
/* aliases referenced by inline var() fallbacks scattered through the page */
--bg2: var(--surface);
--bd: var(--border);
}
/* ===== APP SHELL LAYOUT ===== */
/* The sidebar + content sit side-by-side. This MUST live here (not only in
dashboard.html's inline style) or the React pages render .app as a plain
block and stack the content BELOW the sidebar, off-screen (blank pages). */
.app{display:flex;min-height:100vh;background:var(--bg)}
/* ===== SIDEBAR =====
Spacing scale: 4 / 8 / 12 / 16 px only — no one-off margins.
Layout: brand pinned top, .nav-scroll scrolls the middle, .sidebar-footer
(logout + userbox) pinned bottom. Nav items live in collapsible .navgroups. */
.sidebar{width:240px;background:var(--nav);color:var(--ink);display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;flex-shrink:0;z-index:200;border-right:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;flex-shrink:0}
.brand .logo{width:34px;height:34px;border-radius:var(--r-control);background:var(--accent);color:var(--accent-contrast);
display:grid;place-items:center;font-weight:800;font-size:18px}
.brand .bn{font-weight:800;font-size:17px}
.brand .bs{font-size:11px;color:var(--navmut);margin-top:-2px}
/* Scrollable middle — the fix for content clipping below the viewport. */
.nav-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 12px 8px}
.nav-scroll::-webkit-scrollbar{width:8px}
.nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.nav-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
.nav-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
/* Collapsible groups */
.navgroup{margin-bottom:4px}
.navgroup-hd{width:100%;display:flex;align-items:center;justify-content:space-between;
background:none;border:none;cursor:pointer;font-family:inherit;
font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--navmut);
font-weight:700;padding:12px 12px 8px;transition:color .18s ease}
.navgroup-hd:hover{color:#cdd3df}
.navgroup-hd .chev{width:13px;height:13px;transition:transform .18s ease;opacity:.7}
.navgroup.collapsed .navgroup-hd .chev{transform:rotate(-90deg)}
/* Parent-group cue when one of its items is active */
.navgroup.has-active .navgroup-hd{color:#aeb8ff}
.navgroup-items{display:flex;flex-direction:column;gap:4px;overflow:hidden}
.navgroup.collapsed .navgroup-items{display:none}
.navlabel{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--navmut);
padding:12px 12px 8px;font-weight:700}
.navitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-control);
color:var(--navmut);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
transition:background .18s var(--ease),color .18s var(--ease)}
.navitem svg{width:18px;height:18px;flex-shrink:0}
.navitem:hover{background:var(--navhov);color:var(--ink)}
/* Active = subtle white fill, NOT accent (accent is quarantined to CTAs/links/focus). */
.navitem.active{background:rgba(255,255,255,0.07);color:var(--ink);font-weight:700}
.navitem .badge{margin-left:auto;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;
border-radius:var(--r-control);padding:1px 8px;min-width:20px;text-align:center}
.navitem.active .badge{background:rgba(255,255,255,.14);color:var(--ink)}
/* Pinned footer (logout + user) */
.sidebar-footer{flex-shrink:0;padding:8px 12px 4px;border-top:1px solid var(--navhov)}
.userbox{display:flex;align-items:center;gap:12px;padding:12px 8px 8px}
/* Mobile: sidebar becomes a slide-in drawer with a hamburger + backdrop. */
.gm-hamburger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px;margin-right:4px}
.gm-hamburger svg{width:24px;height:24px}
.gm-backdrop{display:none;position:fixed;inset:0;background:rgba(4,6,12,.55);z-index:150}
.gm-backdrop.open{display:block}
@media(max-width:820px){
.sidebar{position:fixed;top:0;left:0;height:100dvh;transform:translateX(-100%);
transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.5)}
.sidebar.open{transform:translateX(0)}
.gm-hamburger{display:inline-flex;align-items:center}
}
.userbox-legacy{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--navhov)}
.userbox .uav{width:34px;height:34px;border-radius:50%;background:#2b3554;color:#c7d0ea;
display:grid;place-items:center;font-weight:700;font-size:13px}
.userbox .un{font-size:13.5px;font-weight:700}
.userbox .ue{font-size:11.5px;color:var(--navmut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-badge{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(61,125,255,.18);color:#8fa6ff;border:1px solid rgba(61,125,255,.4)}
.plan-badge.free{background:rgba(255,255,255,.06);color:var(--navmut);border-color:rgba(255,255,255,.12)}
.plan-badge.admin{background:rgba(250,204,21,.14);color:#facc15;border-color:rgba(250,204,21,.4)}
.plan-badge.agency{background:rgba(139,92,246,.16);color:#c4b5fd;border-color:rgba(139,92,246,.4)}
/* ===== TOPBAR / shared buttons (used by dashboard.html's .main; reusable by any page) ===== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:15px 26px;
display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:5}
.topbar h1{font-size:19px;font-weight:800}
.topbar .sub{color:var(--mut);font-size:12.5px}
.spacer{flex:1}
.status{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--slate);color:var(--mut)}
.status.live{background:var(--greensoft);color:var(--green)}
.status.demo{background:var(--ambersoft);color:var(--amber)}
.btn{border:none;border-radius:10px;font-weight:700;font-size:13.5px;padding:9px 15px;cursor:pointer;
transition:background .15s ease,opacity .15s ease,transform .1s ease}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.pri{background:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brandhover)}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:600}
.btn.ghost:hover{background:var(--slate)}