/* ═════════════════════════════════════════════════════════════════
   module-chrome.css — Canonical chrome shared by all module admin SPAs
   ═════════════════════════════════════════════════════════════════

   This file is the single source of truth for SquareKeeper module
   admin chrome (sidebar, top bar, shell layout, base typography,
   color tokens, loading/denied screens).

   Imported by every module's admin entry HTML via:
     <link rel="stylesheet" href="/assets/css/module-chrome.css">

   Modules MUST use the canonical class names below for chrome
   elements. Page-specific content (stat grids, panels, tables,
   forms specific to a module's data) stays in each module's own
   inline <style> block — only the chrome lives here.

   Reference: Platform/SQUAREKEEPER_MODULE_UI_SPEC.md

   Owner: Platform. Module instances do NOT edit this file directly.
   ═════════════════════════════════════════════════════════════════ */

/* ── Reset + base ────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  font-size: 14px;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Color tokens (dark theme default) ───────────────────────── */
:root {
  --bg-app: #0A0A0F;
  --bg-chrome: #06060C;
  --bg-panel: #111118;
  --bg-panel-hover: #1a1a28;
  --bg-elevated: #1E293B;
  --bg-modal: #0F0F17;
  --border-default: #1E293B;
  --border-hover: #334155;
  --text-primary: #E2E8F0;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-faint: #64748B;
  --text-disabled: #475569;
  --accent-primary: #11A6F6;
  --accent-primary-light: #60BCFB;
  --accent-primary-dark: #0980BF;
  --accent-primary-darker: #075985;
  --accent-active-bg: #052338;
  --accent-active-subnav: #031624;
  --accent-soft: rgba(17, 166, 246, 0.15);
  /* Semantic status colors (theme-agnostic) */
  --st-success-bg: #0D2818; --st-success-fg: #34D399; --st-success-br: #166534;
  --st-warn-bg: #2D1F04;    --st-warn-fg: #FBBF24;    --st-warn-br: #78350F;
  --st-danger-bg: #2D0A0A;  --st-danger-fg: #F87171;  --st-danger-br: #7F1D1D;
  --st-info-bg: #0A1A2D;    --st-info-fg: #60A5FA;    --st-info-br: #1E3A5F;
  /* Font stacks */
  --font-ui: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;
  /* Module accent — each module declares its own --mod-X locally.
     Common module accents are registered in dashboard/dist/assets/css/style.css;
     module pages may override per their own data-identity needs. */
}

/* ── Light theme overrides (chrome stays dark; Slack/Notion pattern) */
[data-theme="light"] {
  --bg-app: #F8FAFC;
  --bg-chrome: #06060C;
  --bg-panel: #FFFFFF;
  --bg-panel-hover: #F1F5F9;
  --bg-elevated: #E2E8F0;
  --bg-modal: #FFFFFF;
  --border-default: #E2E8F0;
  --border-hover: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #1E293B;
  --text-muted: #475569;
  --text-faint: #64748B;
  --text-disabled: #94A3B8;
  --accent-primary: #0980BF;
  --accent-primary-light: #11A6F6;
  --accent-active-bg: #DBEAFE;
  --accent-soft: rgba(17, 166, 246, 0.10);
  --st-success-bg: #D1FAE5; --st-success-fg: #047857; --st-success-br: #6EE7B7;
  --st-warn-bg: #FEF3C7;    --st-warn-fg: #B45309;    --st-warn-br: #FCD34D;
  --st-danger-bg: #FEE2E2;  --st-danger-fg: #B91C1C;  --st-danger-br: #FCA5A5;
  --st-info-bg: #DBEAFE;    --st-info-fg: #1D4ED8;    --st-info-br: #93C5FD;
}

/* ── Loading + denied screens ────────────────────────────────── */
.sm-loading-screen, .sm-denied-screen,
.loading-screen, .denied-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 32px; text-align: center; gap: 16px;
}
.sm-loading-icon, .loading-icon {
  width: 96px; height: 96px; border-radius: 18px; opacity: 0.9;
}
.sm-loading-spinner, .loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-default); border-top-color: var(--accent-primary);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sm-loading-text, .loading-text,
.sm-denied-screen p, .denied-screen p { color: var(--text-muted); }
.sm-denied-screen h1, .denied-screen h1 {
  color: var(--text-primary); font-size: 22px;
}

/* ── Shell layout ────────────────────────────────────────────── */
#appLayout {
  display: flex; height: 100vh; overflow: hidden;
}
#mainArea {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
#pageContent {
  flex: 1; overflow-y: auto; padding: 24px;
  background: var(--bg-app);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
#sidebar {
  width: 220px; min-width: 220px; flex-shrink: 0;
  height: 100vh; background: var(--bg-chrome);
  border-right: 1px solid #1E293B;
  display: flex; flex-direction: column; overflow-y: auto;
}

.sidebar-brand {
  padding: 18px 16px 12px;
  border-bottom: 1px solid #1E293B;
  text-align: center;
}
/* Logo wrap — transparent container, 72x72 icon. NO white background.
   !important enforces against PM's legacy white-box pattern. */
.sidebar-logo-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px !important;
  margin: 0 auto 10px !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sidebar-logo-wrap img,
.sidebar-logo-wrap img#sidebarLogo {
  width: 72px !important;
  height: 72px !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

/* Title block — canonical AND module-divergent class aliases.
   PM uses .sb-title > .mod-name, EM uses .sb-title (as the text element),
   TP/VP/SM/MM/OM use .sb-title-main. All forced to the same look. */
.sb-title-main,
.sb-title .mod-name,
.sb-title > span.mod-name {
  color: #E2E8F0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  display: block !important;
}
/* EM uses .sb-title as the title text directly (not a container). Style as title. */
.sidebar-brand .sb-title:not(:has(span)):not(:has(div)) {
  color: #E2E8F0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* Subtitle "by SquareKeeper" — all variant class names get italic */
.sb-title-sub,
.sb-sub,
.sb-title .by,
.sb-title > span.by {
  color: #94A3B8 !important;
  font-size: 11px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: block !important;
}

/* "Licensed to <org>" line — all variant class names */
.sidebar-org,
.sb-licensed,
.sb-title .license,
.sb-title > span.license {
  color: #94A3B8 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: block !important;
}

/* Welcome line — no bold anywhere. Even modules with .user-name span.
   font-family forced to sans-serif (TP local CSS forces monospace). */
.sidebar-welcome,
#sidebarWelcome {
  padding: 12px 16px !important;
  color: #CBD5E1 !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #1E293B !important;
  text-align: center !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.sidebar-welcome .user-name,
#sidebarWelcome .user-name,
.sidebar-welcome strong,
#sidebarWelcome strong {
  font-weight: 400 !important;
  color: #CBD5E1 !important;
  font-family: inherit !important;
}

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  /* No internal overflow — the outer #sidebar handles scroll if needed.
     Internal overflow here causes a scrollbar mid-sidebar when nav is tall. */
}

/* Defensive override: VP and SM (and possibly future modules) still ship a
   local `.sidebar-nav { overflow-y: auto }` rule in their inline CSS. This
   selector wins specificity (#sidebar parent) AND uses !important so the
   stubby mid-sidebar scrollbar bug PM had can never come back, regardless
   of what a module's local CSS declares. */
#sidebar .sidebar-nav,
#sidebar > .sidebar-nav {
  overflow: visible !important;
  overflow-y: visible !important;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #CBD5E1;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #E2E8F0;
  text-decoration: none;
}
.nav-item.active {
  background: var(--accent-active-bg);
  color: var(--accent-primary-light);
  border-left-color: var(--accent-primary);
}
.nav-icon { font-size: 16px; line-height: 1; }
.nav-label { /* default; module may extend */ }

/* Nav groups (collapsible) — used by some modules */
.nav-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  color: #CBD5E1;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  cursor: pointer;
  user-select: none;
  justify-content: space-between;
}
.nav-group-header:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #E2E8F0;
}
.nav-chevron {
  font-size: 10px;
  transition: transform 0.15s;
}
.nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-subitems {
  display: flex; flex-direction: column;
}
.nav-group.collapsed .nav-subitems { display: none; }
.nav-subitem {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 40px;
  color: #94A3B8;
  font-size: 13px;
  font-weight: 400;
  border-left: 3px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.nav-subitem:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #CBD5E1;
}
.nav-subitem.active {
  background: var(--accent-active-subnav);
  color: var(--accent-primary-light);
  border-left-color: var(--accent-primary);
}

.nav-divider {
  height: 1px;
  background: #1E293B;
  margin: 6px 0;
}

/* Sidebar footer (CONNECTED badge + Sign out button) */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid #1E293B;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-back, .btn-logout {
  background: transparent;
  color: #CBD5E1;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}
.btn-back:hover {
  background: #1a1a28;
  color: #E2E8F0;
  text-decoration: none;
}
.btn-logout:hover {
  background: #1a1a28;
  color: #F87171;
  border-color: #7F1D1D;
}

/* Connection status badge (when modules surface it) */
.status-badge {
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  border-radius: 4px;
  text-align: center;
}
.status-badge.connected {
  background: var(--st-success-bg);
  color: var(--st-success-fg);
  border: 1px solid var(--st-success-br);
}
.status-badge.disconnected {
  background: var(--st-danger-bg);
  color: var(--st-danger-fg);
  border: 1px solid var(--st-danger-br);
}

/* Version block (bottom of sidebar) — NO copyright text per 2026-05-13 policy.
   Format: icon · module name · version number. Copyright lives in top bar only. */
.sidebar-version {
  padding: 12px 16px;
  border-top: 1px solid #1E293B;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #64748B;
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
}
.sidebar-version img {
  width: 22px; height: 22px;
  border-radius: 4px;
  opacity: 0.7;
}
.ver-name { color: #94A3B8; }
.ver-num  { color: #64748B; }

/* ── Top bar ─────────────────────────────────────────────────── */
#topBar {
  background: var(--bg-chrome);
  border-bottom: 1px solid #1E293B;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  /* Per-module color stripe along the top — see [data-mod=*] rules below.
     box-shadow inset gives the stripe without changing height/layout. */
}
#pageTitle {
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Per-module color accents ────────────────────────────────────────
   Sourced from Platform/dashboard/dist/assets/css/style.css :root vars.
   Duplicated here because modules don't load Platform's style.css.
   When unifying color tokens later, this block becomes the canonical
   chrome copy.
   Driven by <html data-mod="..."> set by module-chrome.js's URL-slug
   detection. Two accent surfaces:
   1. 3px top-stripe via box-shadow inset on #topBar (peripheral cue)
   2. #pageTitle text color (central scannable cue)
   ─────────────────────────────────────────────────────────────────── */
:root {
  --mod-parking:     #F97316;
  --mod-maintenance: #3B82F6;
  --mod-employee:    #7C3AED;
  --mod-security:    #DC2626;
  --mod-tenant:      #10B981;
  --mod-vendor:      #0891B2;
  --mod-operations:  #4338CA;
}
html[data-mod="parking"]       #topBar { box-shadow: inset 0 3px 0 0 var(--mod-parking); }
html[data-mod="maintenance"]   #topBar { box-shadow: inset 0 3px 0 0 var(--mod-maintenance); }
html[data-mod="employee"]      #topBar { box-shadow: inset 0 3px 0 0 var(--mod-employee); }
html[data-mod="security"]      #topBar { box-shadow: inset 0 3px 0 0 var(--mod-security); }
html[data-mod="tenant-portal"] #topBar { box-shadow: inset 0 3px 0 0 var(--mod-tenant); }
html[data-mod="vendor-portal"] #topBar { box-shadow: inset 0 3px 0 0 var(--mod-vendor); }
html[data-mod="operations"]    #topBar { box-shadow: inset 0 3px 0 0 var(--mod-operations); }

html[data-mod="parking"]       #pageTitle { color: var(--mod-parking); }
html[data-mod="maintenance"]   #pageTitle { color: var(--mod-maintenance); }
html[data-mod="employee"]      #pageTitle { color: var(--mod-employee); }
html[data-mod="security"]      #pageTitle { color: var(--mod-security); }
html[data-mod="tenant-portal"] #pageTitle { color: var(--mod-tenant); }
html[data-mod="vendor-portal"] #pageTitle { color: var(--mod-vendor); }
html[data-mod="operations"]    #pageTitle { color: var(--mod-operations); }
/* Top-bar right side — banner text "<Module> by SquareKeeper · © SquareKeeper, LLC".
   Modules use divergent class names: .topbar-meta (VP/SM/TP) or .topbar-right (MM/OM).
   Aliased here + forced to sans-serif 12px so all 7 modules render identically. */
.topbar-meta,
.topbar-right,
#topBar .topbar-meta,
#topBar .topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #94A3B8 !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
.topbar-meta img,
.topbar-right img,
#topBar .topbar-meta img,
#topBar .topbar-right img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.6 !important;
  border-radius: 3px !important;
}

/* Light-theme top bar */
[data-theme="light"] #topBar {
  background: #FFFFFF;
  border-bottom-color: #CBD5E1;
}
[data-theme="light"] #pageTitle {
  color: #0980BF;
}
/* Per-module accents win over the light-theme default. Order matters —
   these must come AFTER the light-theme rule above. */
html[data-mod="parking"][data-theme="light"]       #pageTitle { color: var(--mod-parking); }
html[data-mod="maintenance"][data-theme="light"]   #pageTitle { color: var(--mod-maintenance); }
html[data-mod="employee"][data-theme="light"]      #pageTitle { color: var(--mod-employee); }
html[data-mod="security"][data-theme="light"]      #pageTitle { color: var(--mod-security); }
html[data-mod="tenant-portal"][data-theme="light"] #pageTitle { color: var(--mod-tenant); }
html[data-mod="vendor-portal"][data-theme="light"] #pageTitle { color: var(--mod-vendor); }
html[data-mod="operations"][data-theme="light"]    #pageTitle { color: var(--mod-operations); }

/* ── Canonical KPI stat tiles + section headings ──────────────────────
   2026-06-29 suite-audit visual-convergence fix. Every module previously
   forked .stat-box / .stat-label / .stat-value / .stat-hint /
   .page-section-heading locally, so KPI tiles drifted in typeface across the
   suite: EM rendered sans labels, PM + EM used the bare `monospace` keyword
   (Courier on Windows, not Consolas), TP-admin used an Apple ui-monospace
   stack, SM + VP rendered sans 24px numbers, and label sizes ranged 10-13px.
   Like the .topbar-meta / .topbar-right alias above, these rules force the
   canonical typography across ALL the divergent module class names so the
   suite renders identically. Two module naming schemes are aliased:
     .stat-box .label / .value / .hint        (EM, OM, MM, PM)
     .stat-label / .stat-value / .stat-hint   (SM, VP, TP-admin)
   Tile NUMBER colour is intentionally NOT forced — modules keep their
   per-tile semantic colour (inline hex today, or the .info/.warn/.danger/
   .success modifiers below); only typography + the muted label/section
   colour is normalised. Local module forks are now dead overrides; a
   follow-up can delete them and convert inline number colours to the
   modifier classes. --font-mono = 'Consolas','Monaco' (never bare
   `monospace`, never an Apple ui-monospace stack).
   ─────────────────────────────────────────────────────────────────── */
.stat-box {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  box-shadow: none !important;
}
.stat-box:hover { border-color: var(--border-hover) !important; }

/* Tile title — small uppercase mono label */
.stat-box .label, .stat-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Tile number — big value. Typography forced; colour left to the module
   (inline semantic hex, or the modifier classes below). */
.stat-box .value, .stat-value {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

/* Tile subtitle / caption (e.g. "Click to view") */
.stat-box .hint, .stat-hint, .stat-sub {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--text-faint) !important;
}

/* Section heading (e.g. "RECENT ACTIVITY") — pairs with the mono tile label.
   Aliases the explicit section-heading class names modules use. */
.page-section-heading, .section-label, .sect-heading {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Canonical semantic tile-number colours (theme-aware via --st-*-fg). NOT
   !important so an intentional module modifier rule still wins; this just
   gives every module the same default mapping for the convention. */
.stat-box .value.info, .stat-value.info { color: var(--st-info-fg); }
.stat-box .value.success, .stat-value.success { color: var(--st-success-fg); }
.stat-box .value.warn, .stat-value.warn { color: var(--st-warn-fg); }
.stat-box .value.danger, .stat-value.danger { color: var(--st-danger-fg); }

/* ── Toast (modules may render their own) ──────────────────────
   2026-06-01 audit fix #4 (toast-cascade collision). This shared base used to
   default to the ANIMATION-START state — transform: translateX(-50%) translateY(100px)
   + opacity: 0 — that only resolved to visible when a `.visible` class was added.
   No module anywhere in the suite ever added `.visible` (verified), so every module
   whose local toast() didn't itself reset transform/opacity inherited the offscreen
   start state and rendered invisible (MM dashboard, VP/SM/EM admin) or mispositioned
   (PM web). The base is now the SHOWN state: visible, fixed bottom-center. OM (and any
   module rendering into its own .toast-container) overrides position:static locally to
   stack toasts in its corner; modules with no container inherit this centered placement
   (the bug was invisibility, not centering). The dead `.toast.visible` rule is removed. */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 14px;
  opacity: 1;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.toast.success { border-color: var(--st-success-br); }
.toast.error   { border-color: var(--st-danger-br); }
.toast.warn    { border-color: var(--st-warn-br); }

/* ── Responsive: mobile drawer (≤900px) ──────────────────────────
   Below 900px the fixed 220px sidebar becomes an off-canvas drawer.
   module-chrome.js injects #chromeHamburger as the FIRST child of
   #topBar (an in-flow flex child — not a fixed overlay — so it sits
   IN the bar exactly like MM/OM's own .hamburger), and #chromeBackdrop
   as a <body> child (a full-viewport scrim — parent doesn't matter).
   Toggling .chrome-drawer-open on #sidebar slides it in; .active on
   #chromeBackdrop dims the page.

   Desktop (>900px) is completely unaffected: the injected hamburger
   and backdrop are display:none, and #sidebar keeps its static
   220px column. The .active / .chrome-drawer-open visual states are
   scoped INSIDE the media query, so even if the JS leaves a class
   on after a resize-to-desktop, nothing lingers visually.

   #chromeHamburger styling is a deliberate 1:1 copy of MM/OM's
   .hamburger (transparent bg, subtle border, muted text) — the
   look Matt signed off on.

   Owner: Platform. Pairs with module-chrome.js.
   ──────────────────────────────────────────────────────────────── */

/* Injected hamburger — in the DOM at all widths, hidden on desktop.
   Style copied 1:1 from MM/OM's local .hamburger. */
#chromeHamburger {
  display: none;
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
}
#chromeHamburger:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}
[data-theme="light"] #chromeHamburger { color: #94A3B8; }
[data-theme="light"] #chromeHamburger:hover { color: #FFFFFF; border-color: #334155; }

#chromeBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 190;
}

/* Smooth slide — harmless on desktop (transform never changes there) */
#sidebar { transition: transform 0.22s ease; }

@media (max-width: 900px) {
  /* Sidebar → off-canvas drawer */
  #sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.45);
  }
  #sidebar.chrome-drawer-open { transform: translateX(0); }

  /* Hamburger becomes a visible in-flow flex child of #topBar */
  #chromeHamburger { display: inline-flex; align-items: center; }
  #chromeBackdrop.active { display: block; }

  /* Main area reclaims the full width the sidebar used to hold */
  #mainArea { width: 100%; }

  /* Pack hamburger + page title hard-left; drop the overflow-prone meta.
     "<Module> by SquareKeeper · © SquareKeeper, LLC" runs off-screen on
     phones — and the page title now carries the module name anyway.
     !important overrides any module-local #topBar justify-content. */
  #topBar {
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .topbar-meta,
  .topbar-right,
  .top-right,
  #topBar .topbar-meta,
  #topBar .topbar-right,
  #topBar .top-right { display: none !important; }

  /* Content breathes tighter on small screens */
  #pageContent { padding: 14px; }
}