/* ============================================================
   LIONHEART PORTAL — DESIGN SYSTEM (navy + gold, flat editorial)
   Implements the Claude Design "Overview Dashboard" handoff.
   Adds: theme tokens (light + dark), persistent sidebar shell,
   and shared primitives reused across all redesigned pages.

   Loaded AFTER styles.css. All tokens here are NEW names (--canvas,
   --surface, --text-head, …) so they never collide with the legacy
   --lh-* palette. Dark mode swaps ONLY these tokens, so legacy
   components (e.g. the full-bleed map editor) are untouched.
   ============================================================ */

/* ---------- 1. THEME TOKENS ---------- */
:root,
[data-theme="light"] {
  --canvas:#f5f5f7; --sidebar-bg:#2b3040; --sidebar-deep:#1f2533; --sidebar-active:#363c4f; --sidebar-hover:#323848;
  --sidebar-text:#b6bacb; --sidebar-text-strong:#eef0f6; --sidebar-muted:#8e93a8; --sidebar-border:#3d4560;
  --chip-bg:#252a38; --chip-border:#353c50; --surface:#ffffff; --surface-2:#fafafc;
  --text-strong:#1d1d1f; --text-head:#1f2533; --text-body:#515154; --text-muted:#6e6e73; --text-faint:#8e8e93;
  --rule-strong:#d9d9e0; --rule:#ededf1; --hairline:#e2e2e8; --border-btn:#c8c8cf;
  --gold:#c5a55a; --gold-soft:#d6bc78; --gold-dark:#b8943e; --gold-faint:#faf6ec; --gold-pill-border:#d8c089;
  --navy-badge-border:#aab0c2; --navy-badge-text:#2b3040; --hover:#faf6ec; --hover-red:#fdf3f3;
  --green:#2e8b57; --amber:#c98a2e; --red:#d94444; --info:#3b7dd8;
  --seg1:#8e8e93; --seg2:#6e6e73; --seg3:#b8943e; --seg4:#2b3040; --seg5:#515154; --seg6:#2e8b57; --seg7:#d94444;
  --green-bg:rgba(46,139,87,.1); --amber-bg:rgba(201,138,46,.12); --red-bg:rgba(217,68,68,.1);
  --ds-shadow-card:0 8px 28px -14px rgba(43,48,64,.28),0 4px 16px -10px rgba(197,165,90,.32);
}
[data-theme="dark"] {
  --canvas:#15181f; --sidebar-bg:#1b1f29; --sidebar-deep:#11141b; --sidebar-active:#2b3140; --sidebar-hover:#262c39;
  --sidebar-text:#a8adbd; --sidebar-text-strong:#f0f1f6; --sidebar-muted:#7e8395; --sidebar-border:#2e3543;
  --chip-bg:#222732; --chip-border:#323a49; --surface:#1d2129; --surface-2:#242935;
  --text-strong:#f2f2f5; --text-head:#f4f2ec; --text-body:#c3c5cc; --text-muted:#9a9ca6; --text-faint:#7e818c;
  --rule-strong:#2c323e; --rule:#262b35; --hairline:#2e333f; --border-btn:#3a414f;
  --gold:#c5a55a; --gold-soft:#d6bc78; --gold-dark:#d8bd7e; --gold-faint:#2a2620; --gold-pill-border:#5c5132;
  --navy-badge-border:#5a6172; --navy-badge-text:#c5cad6; --hover:rgba(197,165,90,.10); --hover-red:rgba(217,68,68,.13);
  --green:#46b074; --amber:#dba24a; --red:#e86a6a; --info:#5b9ae8;
  --seg1:#6b6f7a; --seg2:#888c97; --seg3:#c5a55a; --seg4:#9aa0b2; --seg5:#b6b8c0; --seg6:#46b074; --seg7:#e86a6a;
  --green-bg:rgba(70,176,116,.14); --amber-bg:rgba(219,162,74,.16); --red-bg:rgba(232,106,106,.16);
  --ds-shadow-card:0 8px 28px -14px rgba(0,0,0,.55),0 4px 16px -10px rgba(197,165,90,.22);
}

/* DARK-MODE BRIDGE for not-yet-reskinned pages: remap the legacy --lh-* ramp
   to the new dark tokens, scoped to chrome screens only (body.lh-shell). Light
   mode and the full-bleed map editor (#app, no lh-shell) are byte-identical to
   before — only dark mode on chrome pages is affected. Pages with hardcoded
   white/#hex backgrounds still get a per-page reskin pass; this covers the
   token-based majority so dark mode degrades gracefully everywhere. */
[data-theme="dark"] body.lh-shell{
  --lh-white:#1d2129; --lh-cream:#15181f; --lh-gray-50:#1d2129; --lh-gray-100:#15181f;
  --lh-gray-200:#2e333f; --lh-gray-300:#3a414f; --lh-gray-400:#7e818c;
  --lh-gray-500:#9a9ca6; --lh-gray-600:#c3c5cc; --lh-gray-800:#f2f2f5;
  --lh-gold-faint:#2a2620; --lh-gold-pale:#3a3320;
}

/* DARK-MODE STRAGGLERS: legacy components that hardcode raw light hex (#fff
   backgrounds / dark-navy text) which the var()-based bridge above can't reach.
   Dark-scoped only → light mode is byte-identical. Covers Admin (user inputs),
   Sales forms, and Planned Features / guided-build cards + buttons. */
[data-theme="dark"] body.lh-shell .users-select,
[data-theme="dark"] body.lh-shell .users-input,
[data-theme="dark"] body.lh-shell #salesScreen .installer-input,
[data-theme="dark"] body.lh-shell #salesScreen .installer-textarea,
[data-theme="dark"] body.lh-shell #salesScreen select.installer-input,
[data-theme="dark"] body.lh-shell .pf-init,
[data-theme="dark"] body.lh-shell .pf-utility-btn{
  background:var(--surface); border-color:var(--hairline); color:var(--text-strong);
}
[data-theme="dark"] body.lh-shell .users-select::placeholder,
[data-theme="dark"] body.lh-shell .users-input::placeholder,
[data-theme="dark"] body.lh-shell #salesScreen .installer-input::placeholder,
[data-theme="dark"] body.lh-shell #salesScreen .installer-textarea::placeholder{ color:var(--text-faint); }
[data-theme="dark"] body.lh-shell .pf-utility-btn strong{ color:var(--text-head); }
[data-theme="dark"] body.lh-shell .pf-utility-btn span{ color:var(--text-muted); }

@keyframes lh-pulse{0%{box-shadow:0 0 0 0 rgba(46,139,87,.45);}70%{box-shadow:0 0 0 6px rgba(46,139,87,0);}100%{box-shadow:0 0 0 0 rgba(46,139,87,0);}}
@keyframes lh-leo{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* ---------- 2. SHELL: persistent sidebar + layout ---------- */
/* The sidebar is fixed chrome. body.lh-shell is toggled by showScreen()
   for the "chrome" screens (everything except login/pending and the
   full-bleed map editors). */
.lh-sidebar{
  display:none;
  position:fixed; left:0; top:0; bottom:0; width:240px; z-index:200;
  background:var(--sidebar-bg);
  flex-direction:column; padding:26px 0 22px;
  font-family:var(--font-sans);
}
body.lh-shell .lh-sidebar{ display:flex; }
/* Chrome screens shift right to clear the sidebar. The legacy per-screen
   top header is hidden — the sidebar now carries identity + user + sign-out.
   The editorial canvas + radial glow lives at the screen level so EVERY chrome
   page (dashboard, leo, and the secondary pages) shares one backdrop. */
body.lh-shell .portal-screen{
  left:240px;
  background:var(--canvas)
    radial-gradient(1000px 640px at 106% -8%, rgba(197,165,90,0.07), transparent 58%)
    no-repeat,
    var(--canvas);
  color:var(--text-strong);
}
body.lh-shell .dash-header{ display:none !important; }
/* Legacy "Back to dashboard" buttons are redundant with the sidebar. */
body.lh-shell .form-back,
body.lh-shell .form-back-btn{ display:none; }

/* --- sidebar brand --- */
.lh-brand{ padding:2px 16px 18px; text-align:center; }
.lh-brand img{ width:100%; height:52px; display:block; object-fit:contain; }
.lh-brand-word{ font-family:var(--font-serif); font-weight:700; font-size:19px; color:var(--gold-soft); margin-top:11px; line-height:1; }
.lh-brand-sub{ font-size:9px; letter-spacing:.24em; color:var(--sidebar-muted); font-weight:500; margin-top:6px; }

/* --- sidebar nav --- */
.lh-nav{ display:flex; flex-direction:column; gap:2px; padding:6px 12px 0; }
.lh-nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:9px;
  text-decoration:none; background:transparent; color:var(--sidebar-text);
  font-size:14px; font-weight:400; border:1px solid transparent; cursor:pointer;
  transition:background .14s, color .14s;
}
.lh-nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.lh-nav-item:hover{ background:var(--sidebar-hover); color:var(--sidebar-text-strong); }
.lh-nav-item.active{ background:var(--sidebar-active); color:var(--sidebar-text-strong); border-color:color-mix(in srgb, var(--gold) 70%, transparent); font-weight:500; }
.lh-nav-ai{ margin-left:auto; font-size:8px; font-weight:700; letter-spacing:.1em; color:#1f2533; background:linear-gradient(135deg,#d6bc78,#c5a55a); padding:2px 6px; border-radius:999px; }

/* --- sidebar bottom block --- */
.lh-side-bottom{ margin-top:auto; padding:0 16px; }
.lh-side-link{
  display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:9px;
  text-decoration:none; background:transparent; color:var(--sidebar-muted); font-size:13px; font-weight:400;
  cursor:pointer; transition:background .14s, color .14s;
}
.lh-side-link svg{ width:17px; height:17px; flex-shrink:0; }
.lh-side-link:hover{ color:var(--sidebar-text-strong); background:var(--sidebar-hover); }
.lh-user-chip{
  display:flex; align-items:center; gap:11px; padding:10px; margin-top:2px;
  border-radius:10px; background:var(--chip-bg); border:1px solid var(--chip-border);
}
.lh-user-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(150deg,#3d4560,#2b3040); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; color:var(--gold-soft);
  font-weight:600; font-size:13px; object-fit:cover; overflow:hidden;
}
.lh-user-chip .lh-user-name{ font-size:13px; color:var(--sidebar-text-strong); font-weight:500; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lh-user-chip .lh-user-role{ font-size:10.5px; color:var(--sidebar-muted); line-height:1.25; }
.lh-side-divider{ height:1px; background:var(--sidebar-border); margin:14px 6px 12px; }

/* --- sidebar role gating (mirrors the legacy body[data-portal-role] chrome) ---
   The shell mounts for admin, ops, AND the sales team. Admin Settings stays
   admin-only; Lionheart Technology follows the tech-access flag. The Sales
   Dashboard item shows for admin + the sales roles (ops has no Sales access). */
body:not([data-portal-role="admin"]):not([data-portal-role="sales_agent"]):not([data-portal-role="sales_manager"]) .lh-nav-item[data-nav="sales"]{ display:none; }
body:not([data-portal-role="admin"]) .lh-admin-link{ display:none; }
/* Energy Efficiency workspace — Leo tier advanced/admin only. refreshEeAccess
   (js/ee/ee-workspace.js) sets body[data-ee-user] from ee:access; the Convex
   functions are the real wall. Declared BEFORE the sales-focused rules so a
   sales role never shows it even with the flag set. */
.lh-nav-item[data-nav="ee"]{ display:none; }
body[data-ee-user="true"] .lh-nav-item[data-nav="ee"]{ display:flex; }
/* Sales roles get a FOCUSED shell — their only reachable route is Sales, so
   every other nav item (which would just bounce them back) is hidden. */
body[data-portal-role="sales_agent"] .lh-nav-item:not([data-nav="sales"]),
body[data-portal-role="sales_manager"] .lh-nav-item:not([data-nav="sales"]),
body[data-portal-role="sales_agent"] .lh-tech-link,
body[data-portal-role="sales_manager"] .lh-tech-link{ display:none; }
.lh-tech-link{ display:none; }
body[data-tech-access="true"] .lh-tech-link{ display:flex; }
/* Project Closeout — Ops Manager + admin only (route gate in roles.js is the wall). */
body:not([data-portal-role="admin"]):not([data-portal-role="ops_manager"]) .lh-closeout-link{ display:none; }

/* Project Closeout uses a few legacy .form-* classes inside the .ds-main shell
   (not the .form-screen-body-v2 context they're scoped to), so style them here:
   .form-section-help has no global rule, and the standalone search .form-input
   sits outside a .form-field so the global `.form-field input` rule misses it. */
#closeoutScreen .form-section-help{ margin:2px 0 14px; font-size:12px; color:var(--text-muted); line-height:1.5; }
#closeoutScreen .form-input{
  width:100%; padding:9px 11px; border:1px solid var(--rule-strong); border-radius:8px;
  background:var(--surface); color:var(--text-strong); font-size:13px; font-family:inherit; box-sizing:border-box;
}
#closeoutScreen .form-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-faint); }

/* ---------- 3. SHARED PRIMITIVES ---------- */
.ds-main{
  padding:42px 52px 64px; min-width:0; position:relative; overflow-x:hidden; isolation:isolate;
  min-height:100%;
  font-family:var(--font-sans); color:var(--text-strong);
}
.ds-wrap{ max-width:1180px; margin:0 auto; }
.ds-eyebrow{ font-size:11px; letter-spacing:.2em; color:var(--gold-dark); font-weight:600; margin-bottom:11px; }
.ds-title{ font-family:var(--font-serif); font-weight:600; font-size:40px; line-height:1.02; margin:0; color:var(--text-head); letter-spacing:-0.01em; }
.ds-title-sm{ font-size:34px; }
.ds-title .gold{ color:var(--gold-dark); }
.ds-sub{ margin:12px 0 0; font-size:15px; color:var(--text-muted); }
.ds-header-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.ds-section-title{ font-family:var(--font-serif); font-weight:600; font-size:21px; margin:0; color:var(--text-head); }
.ds-section-title.sm{ font-size:19px; }
.ds-section-title.xs{ font-size:18px; }

/* buttons */
.ds-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.04em; padding:11px 18px; border-radius:8px; cursor:pointer; border:1px solid var(--border-btn); background:transparent; color:var(--text-head); transition:all .15s; }
.ds-btn svg{ width:16px; height:16px; }
.ds-btn:hover{ border-color:var(--gold); color:var(--gold-dark); }
.ds-btn-primary{ background:var(--gold); border-color:var(--gold); color:#1f2533; font-weight:700; }
.ds-btn-primary:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:#1f2533; }
.ds-icon-btn{ width:42px; height:42px; padding:0; justify-content:center; }
/* theme toggle: moon in light (→dark), sun in dark (→light) */
.ds-theme-sun{ display:none; }
[data-theme="dark"] .ds-theme-sun{ display:inline; }
[data-theme="dark"] .ds-theme-moon{ display:none; }
.ds-btn-split-div{ width:1px; height:14px; background:rgba(31,37,51,.3); margin:0 1px; }

/* pills + badges + status */
.ds-pill{ font-size:10px; font-weight:600; letter-spacing:.06em; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.ds-pill-gold{ color:var(--gold-dark); background:var(--gold-faint); }
.ds-pill-amber{ color:var(--amber); background:var(--amber-bg); }
.ds-pill-red{ color:var(--red); background:var(--red-bg); font-weight:700; }
.ds-pill-green{ color:var(--green); background:var(--green-bg); font-weight:700; }
.ds-badge{ font-size:9px; font-weight:700; letter-spacing:.06em; border-radius:999px; padding:2px 7px; white-space:nowrap; }
.ds-badge-l2{ color:var(--gold-dark); border:1px solid var(--gold-pill-border); }
.ds-badge-dcfc{ color:var(--navy-badge-text); border:1px solid var(--navy-badge-border); }
.ds-status{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:600; letter-spacing:.05em; }
.ds-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ds-dot-green{ background:var(--green); } .ds-dot-amber{ background:var(--amber); } .ds-dot-red{ background:var(--red); }
.ds-status-green{ color:var(--green); } .ds-status-amber{ color:var(--amber); } .ds-status-red{ color:var(--red); }

/* gold "VIEW ALL" / action links */
.ds-link{ display:inline-flex; align-items:center; gap:4px; font-size:11px; letter-spacing:.08em; font-weight:600; color:var(--gold-dark); text-decoration:none; cursor:pointer; }
.ds-link svg{ width:12px; height:12px; }
.ds-link:hover{ opacity:.7; }
.ds-link-red{ color:var(--red); }
.ds-link-muted{ color:var(--text-faint); }

/* KPI stat bar */
.ds-kpi-bar{ display:flex; border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong); margin-top:34px; }
.ds-kpi{ flex:1; padding:22px 28px; border-left:1px solid var(--hairline); min-width:0; }
.ds-kpi:first-child{ padding-left:0; border-left:none; }
.ds-kpi:last-child{ padding-right:0; }
.ds-kpi-label{ font-size:11px; letter-spacing:.14em; color:var(--text-faint); font-weight:600; }
.ds-kpi-num{ font-family:var(--font-serif); font-weight:700; font-size:40px; line-height:1; margin:14px 0 9px; color:var(--text-head); }
.ds-kpi-num.red{ color:var(--red); }
.ds-kpi-note{ font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:7px; }
.ds-kpi-note .strong{ color:var(--text-strong); font-weight:600; }
.ds-kpi-note.amber{ color:var(--amber); font-weight:500; }
.ds-kpi-note.red{ color:var(--red); font-weight:600; }
.ds-kpi-note .ds-dot{ width:6px; height:6px; }

/* pipeline segmented bar */
.ds-pipe-wrap{ padding:24px 0 30px; border-bottom:1px solid var(--rule-strong); }
.ds-pipe-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:15px; }
.ds-pipe-eyebrow{ font-size:11px; letter-spacing:.18em; color:var(--text-faint); font-weight:600; }
.ds-pipe-count{ font-size:12.5px; color:var(--text-muted); }
.ds-pipe-count .strong{ color:var(--text-head); font-weight:600; }
.ds-pipe-bar{ display:flex; height:10px; border-radius:5px; overflow:hidden; gap:2px; }
.ds-pipe-bar > span{ min-width:2px; }
.ds-pipe-legend{ display:flex; flex-wrap:wrap; gap:7px 26px; margin-top:15px; }
.ds-pipe-leg{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-body); }
.ds-pipe-leg .sq{ width:8px; height:8px; border-radius:2px; }
.ds-pipe-leg .n{ color:var(--text-strong); font-weight:600; }

/* generic content grid (vertical hairline split) */
.ds-grid{ display:grid; grid-template-columns:1.55fr 1fr; }
.ds-grid-left{ padding:32px 44px 0 0; border-right:1px solid var(--rule-strong); min-width:0; }
.ds-grid-right{ padding:32px 0 0 44px; min-width:0; }

/* hover-accent list rows (the editorial primitive used everywhere) */
.ds-row{
  display:flex; align-items:center; gap:20px; padding:16px 14px 16px 0;
  border-top:1px solid var(--rule); border-left:2px solid transparent; cursor:pointer;
  transition:background .14s, border-color .14s;
}
.ds-row:hover{ background:var(--hover); border-left-color:var(--gold); padding-left:14px; }
.ds-row.red:hover{ background:var(--hover-red); border-left-color:var(--red); }
.ds-row.last{ border-bottom:1px solid var(--rule); }
.ds-row.noaccent{ cursor:default; }
.ds-row.noaccent:hover{ background:transparent; border-left-color:transparent; padding-left:0; }

/* typographic date block */
.ds-date{ width:46px; flex-shrink:0; }
.ds-date-mon{ font-size:10px; letter-spacing:.1em; color:var(--gold-dark); font-weight:700; }
.ds-date-day{ font-family:var(--font-serif); font-weight:700; font-size:28px; color:var(--text-head); line-height:1; }

.ds-row-body{ flex:1; min-width:0; }
.ds-row-title{ font-size:15px; font-weight:600; color:var(--text-strong); }
.ds-row-meta{ font-size:12.5px; color:var(--text-muted); margin-top:4px; }
.ds-row-meta .b{ color:var(--text-body); font-weight:500; }
.ds-row-right{ text-align:right; flex-shrink:0; }
.ds-row-right .sub{ font-size:11.5px; color:var(--text-faint); margin-top:6px; }
.ds-row-right .sub.red{ color:var(--red); }

/* simple data table (grid header + rows) */
.ds-table-head, .ds-table-row{ display:grid; gap:12px; align-items:center; }
.ds-table-head{ padding:0 0 9px; font-size:10px; letter-spacing:.1em; color:var(--text-faint); font-weight:600; border-bottom:1px solid var(--rule-strong); }
.ds-table-head .r{ text-align:right; }
.ds-table-row{ padding:14px 14px 14px 0; border-bottom:1px solid var(--rule); border-left:2px solid transparent; cursor:pointer; transition:background .14s, border-color .14s; }
.ds-table-row:hover{ background:var(--hover); border-left-color:var(--gold); padding-left:14px; }
.ds-cell-strong{ font-size:13.5px; color:var(--text-strong); font-weight:500; }
.ds-cell-muted{ font-size:13px; color:var(--text-muted); }

/* ghost full-width button */
.ds-ghost-btn{ display:block; text-align:center; font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--text-head); border:1px solid var(--border-btn); border-radius:8px; padding:11px; text-decoration:none; cursor:pointer; background:transparent; width:100%; transition:all .15s; }
.ds-ghost-btn:hover{ border-color:var(--gold); color:var(--gold-dark); }

/* follow-up feed rows */
.ds-feed-row{ display:flex; gap:14px; padding:14px 14px 14px 0; border-top:1px solid var(--rule); border-left:2px solid transparent; cursor:pointer; transition:background .14s, border-color .14s; }
.ds-feed-row:hover{ background:var(--hover); border-left-color:var(--gold); padding-left:14px; }
.ds-feed-row.red:hover{ background:var(--hover-red); border-left-color:var(--red); }
.ds-feed-row.last{ border-bottom:1px solid var(--rule); }
.ds-feed-row.noaccent{ cursor:default; }
.ds-feed-row.noaccent:hover{ background:transparent; border-left-color:transparent; padding-left:0; }
.ds-feed-row > svg{ flex-shrink:0; margin-top:1px; width:17px; height:17px; }
.ds-feed-title{ font-size:13px; font-weight:600; color:var(--text-strong); }
.ds-feed-desc{ font-size:12px; color:var(--text-muted); margin:3px 0 7px; line-height:1.45; }
.ds-feed-action{ font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--gold-dark); text-decoration:none; cursor:pointer; }
.ds-feed-action:hover{ opacity:.7; }
.ds-feed-action.red{ color:var(--red); }
.ds-feed-action.muted{ color:var(--text-faint); cursor:default; }

/* monday sync health */
.ds-sync{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; padding-top:18px; border-top:1px solid var(--rule-strong); }
.ds-sync-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); flex-shrink:0; animation:lh-pulse 2.4s infinite; }
.ds-sync-dot.red{ background:var(--red); animation:none; }
.ds-sync-title{ font-size:12.5px; font-weight:600; color:var(--text-strong); }
.ds-sync-sub{ font-size:11px; color:var(--text-faint); }

/* empty / loading states */
.ds-empty{ font-size:13px; color:var(--text-faint); padding:18px 0; }

/* CREATE PROJECT split-button menu */
.ov-create-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50; min-width:190px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:10px;
  box-shadow:0 12px 32px -12px rgba(31,37,51,.35); padding:6px; overflow:hidden;
}
.ov-create-menu a{
  display:block; padding:10px 12px; border-radius:7px; font-size:13px; font-weight:500;
  color:var(--text-strong); text-decoration:none; cursor:pointer;
}
.ov-create-menu a:hover{ background:var(--gold-faint); color:var(--gold-dark); }

/* ---------- 4. LEO CARD (dashboard) + LEO PAGE ---------- */
.ds-leo-outline{
  border-radius:16px; padding:1.5px;
  background:linear-gradient(115deg,#c5a55a,#e8d29a,#d6bc78,#9aa0b2,#2b3040,#9aa0b2,#c5a55a);
  background-size:280% 280%; animation:lh-leo 9s ease-in-out infinite;
  box-shadow:var(--ds-shadow-card);
}
.ds-leo-inner{ background:var(--surface); border-radius:14.5px; padding:20px 22px; }
.ds-leo-head{ display:flex; align-items:center; gap:13px; }
.ds-leo-mark{ width:40px; height:40px; border-radius:12px; background:linear-gradient(142deg,#1f2533,#2b3040); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 12px -3px rgba(197,165,90,.55); }
.ds-leo-name{ font-family:var(--font-serif); font-weight:700; font-size:19px; color:var(--text-head); }
.ds-leo-pill{ font-size:8.5px; font-weight:700; letter-spacing:.12em; color:var(--gold-dark); border:1px solid var(--gold-pill-border); background:var(--gold-faint); padding:2px 7px; border-radius:999px; }
.ds-leo-tag{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.ds-leo-input-row{ display:flex; align-items:center; gap:10px; margin-top:16px; border:1px solid var(--hairline); border-radius:11px; padding:9px 9px 9px 15px; background:var(--surface-2); transition:border-color .14s; }
.ds-leo-input-row:hover{ border-color:var(--gold); }
.ds-leo-input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:13px; color:var(--text-strong); cursor:pointer; }
.ds-leo-send{ width:34px; height:34px; flex-shrink:0; border:none; border-radius:9px; background:#2b3040; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.ds-leo-send:hover{ background:#1f2533; }
.ds-leo-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ds-chip{ font-family:var(--font-sans); font-size:11.5px; color:var(--text-body); border:1px solid var(--hairline); background:var(--surface); border-radius:999px; padding:6px 13px; cursor:pointer; transition:all .14s; }
.ds-chip:hover{ border-color:var(--gold); background:var(--gold-faint); color:var(--gold-dark); }

/* Leo full page */
.leo-page{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; min-height:calc(100vh - 110px); }
.leo-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--rule-strong); }
.leo-head-l{ display:flex; align-items:center; gap:14px; }
.leo-mark{ width:46px; height:46px; border-radius:13px; background:linear-gradient(142deg,#1f2533,#2b3040); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 12px -3px rgba(197,165,90,.55); }
.leo-name{ font-family:var(--font-serif); font-weight:700; font-size:25px; color:var(--text-head); }
.leo-tag{ font-size:13px; color:var(--text-muted); margin-top:3px; }
.leo-convo{ flex:1 1 auto; overflow-y:auto; padding:26px 4px 10px; }
.leo-msg{ display:flex; gap:11px; margin-bottom:18px; align-items:flex-start; }
.leo-msg.user{ justify-content:flex-end; }
.leo-msg-avatar{ width:30px; height:30px; border-radius:9px; background:linear-gradient(142deg,#1f2533,#2b3040); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.leo-bubble{ max-width:78%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.55; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-body); }
.leo-msg.user .leo-bubble{ background:var(--gold-faint); border:1px solid var(--gold-pill-border); color:var(--text-strong); }
.leo-composer{ border-radius:14px; padding:1.5px; background:linear-gradient(115deg,#c5a55a,#e8d29a,#d6bc78,#9aa0b2,#2b3040,#9aa0b2,#c5a55a); background-size:280% 280%; animation:lh-leo 9s ease-in-out infinite; }
.leo-composer-inner{ display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:12.5px; padding:9px 9px 9px 17px; }
.leo-composer-input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:14px; color:var(--text-strong); }
.leo-composer-send{ width:38px; height:38px; flex-shrink:0; border:none; border-radius:9px; background:#2b3040; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.leo-composer-send:hover{ background:#1f2533; }
.leo-foot{ font-size:11px; color:var(--text-faint); text-align:center; margin:11px 0 0; }

/* gold keyboard focus ring */
.lh-shell a:focus-visible, .lh-shell button:focus-visible, .lh-shell input:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(197,165,90,.18);
}

/* ---- mobile top bar + drawer scrim (shown only on phones; see the ≤640 block) ---- */
.lh-mtop{
  display:none;
  position:fixed; top:0; left:0; right:0; z-index:150;
  box-sizing:border-box;
  min-height:56px; height:calc(56px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 8px 0;
  align-items:center; gap:8px;
  background:var(--sidebar-bg); border-bottom:1px solid var(--sidebar-border);
}
.lh-navtoggle, .lh-mtop-out{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0; padding:0;
  background:transparent; border:none; border-radius:10px;
  color:var(--sidebar-text-strong); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lh-navtoggle svg, .lh-mtop-out svg{ width:23px; height:23px; }
.lh-navtoggle:active, .lh-mtop-out:active{ background:var(--sidebar-hover); }
.lh-mtop-logo{ height:30px; width:auto; max-width:150px; object-fit:contain; margin-right:auto; }
.lh-scrim{
  display:none; position:fixed; inset:0; z-index:190;
  background:rgba(15,18,26,0.5); opacity:0; transition:opacity .28s ease;
  -webkit-tap-highlight-color:transparent;
}

/* responsive: collapse the two-column grids on narrow viewports (all widths ≤1080) */
@media (max-width:1080px){
  .ds-grid{ grid-template-columns:1fr; }
  .ds-grid-left{ border-right:none; padding-right:0; }
  .ds-grid-right{ padding-left:0; }
}

/* tablet / small laptop: sidebar collapses to a 64px icon rail (641–1080px).
   Phones get an off-canvas drawer instead (≤640 block below). */
@media (min-width:641px) and (max-width:1080px){
  .lh-sidebar{ width:64px; padding-top:16px; }
  body.lh-shell .lh-sidebar{ width:64px; }
  .lh-brand-word, .lh-brand-sub, .lh-nav-item span, .lh-nav-ai, .lh-side-link span, .lh-user-chip > div, .lh-side-link.lh-signout span{ display:none; }
  body.lh-shell .portal-screen{ left:64px; }
  .lh-nav-item{ justify-content:center; padding:11px 0; }
}

@media (max-width:760px){
  .ds-main{ padding:28px 20px 48px; }
  .ds-kpi-bar{ flex-wrap:wrap; }
  .ds-kpi{ flex:1 1 45%; }
}

/* phone (≤640px): the fixed rail becomes an off-canvas drawer, a compact top
   bar carries the hamburger + brand + sign-out, and the content panel goes
   full-width below the bar. body.lh-nav-open slides the drawer in + shows scrim. */
@media (max-width:640px){
  body.lh-shell .lh-mtop{ display:flex; }
  body.lh-shell .portal-screen{
    left:0;
    top:calc(56px + env(safe-area-inset-top));
  }
  .lh-sidebar{
    width:min(288px, 84vw); padding-top:22px;
    transform:translateX(-101%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    box-shadow:none; will-change:transform;
  }
  body.lh-shell .lh-sidebar{ width:min(288px, 84vw); }
  body.lh-nav-open .lh-sidebar{ transform:translateX(0); box-shadow:0 18px 60px rgba(0,0,0,.5); }
  body.lh-nav-open .lh-scrim{ display:block; opacity:1; }
  /* comfortable touch rows in the drawer */
  .lh-nav-item{ padding:13px 14px; }
  .lh-side-link{ padding:12px 14px; }
}

@media (prefers-reduced-motion: reduce){
  .lh-sidebar{ transition:none; }
  .lh-scrim{ transition:none; }
}

/* ============================================================
   5. SECONDARY-PAGE RESKIN (scoped to chrome screens)
   Flattens the card/panel components onto the editorial system
   using THEME TOKENS — which also makes them dark-mode correct.
   Only color / border / background / shadow / radius are touched;
   never layout (display/flex/grid/padding), so functionality and
   structure are unchanged. Light mode is intentionally restyled to
   the flat-editorial look; the full-bleed editors are untouched
   (no body.lh-shell on #app / #dcfcScreen).
   ============================================================ */

/* --- editorial page eyebrows for the .appr-page screens (no DOM change) --- */
body.lh-shell #approvalsScreen .admin-title::before{ content:"CLIENT SITE REVIEW"; }
body.lh-shell #prospectReviewScreen .admin-title::before{ content:"PROSPECT REVIEW"; }
body.lh-shell #installSchedulesScreen .admin-title::before{ content:"SCHEDULING"; }
body.lh-shell #approvalsScreen .admin-title::before,
body.lh-shell #prospectReviewScreen .admin-title::before,
body.lh-shell #installSchedulesScreen .admin-title::before{
  display:block; font-size:11px; letter-spacing:.2em; color:var(--gold-dark);
  font-weight:600; margin-bottom:10px;
}
/* editorial titles + eyebrows + intros, dark-aware */
body.lh-shell .admin-title,
body.lh-shell .nav-title,
body.lh-shell .crm-title{ color:var(--text-head); }
body.lh-shell .appr-page .admin-title{ font-size:32px; line-height:1.05; }
body.lh-shell .nav-eyebrow,
body.lh-shell .crm-eyebrow{ color:var(--gold-dark); }
body.lh-shell .nav-intro,
body.lh-shell .crm-header-titles p,
body.lh-shell .admin-sub{ color:var(--text-muted); }

/* --- surfaces: cards / panels / tables / columns → flat token surfaces --- */
body.lh-shell .appr-row,
body.lh-shell .appr-sec,
body.lh-shell .pr-card,
body.lh-shell .sched-group,
body.lh-shell .sched-resched-card,
body.lh-shell .sched-review-modal,
body.lh-shell .nav-row,
body.lh-shell .sales-card,
body.lh-shell .sales-panel,
body.lh-shell .sales-section,
body.lh-shell #salesScreen .crm-table,
body.lh-shell #salesScreen .crm-kc,
body.lh-shell #salesScreen .crm-dhead,
body.lh-shell #salesScreen .crm-card,
body.lh-shell #salesScreen .crm-stage-menu,
body.lh-shell #salesScreen .crm-strip-list{
  background:var(--surface);
  border-color:var(--hairline);
  box-shadow:none;
}
/* subtle inset fills → surface-2 */
body.lh-shell .sched-kpi,
body.lh-shell .sales-chip,
body.lh-shell .sales-link-copy,
body.lh-shell #salesScreen .crm-kcol,
body.lh-shell #salesScreen .crm-kcol-head,
body.lh-shell #salesScreen .crm-tab-count,
body.lh-shell #salesScreen .crm-file-row,
body.lh-shell #salesScreen .crm-next,
body.lh-shell #salesScreen .crm-table thead th,
body.lh-shell #salesScreen .crm-agent-head td{
  background:var(--surface-2);
  border-color:var(--hairline);
  color:var(--text-body);
}
body.lh-shell #salesScreen .crm-kcol-count{ background:var(--surface); border-color:var(--hairline); color:var(--text-muted); }

/* Survey / intake form surfaces + text → theme tokens (dark-mode correct).
   dashboard.css scopes these to #salesScreen with hardcoded #fff / navy, which
   out-specifies the generic reskin above, so the survey cards stayed white (and
   dark-themed label text went low-contrast) in dark mode. Re-assert with the
   same #salesScreen specificity — light mode is unchanged (tokens = white/navy). */
body.lh-shell #salesScreen .sales-section,
body.lh-shell #salesScreen .sales-panel,
body.lh-shell #salesScreen .sales-card{
  background:var(--surface); border-color:var(--hairline); box-shadow:none;
}
body.lh-shell #salesScreen .sales-section summary,
body.lh-shell #salesScreen .sales-toolbar h2,
body.lh-shell #salesScreen .sales-form-panel h3,
body.lh-shell #salesScreen .sales-panel h3{ color:var(--text-head); }
body.lh-shell #salesScreen .intake-check{ color:var(--text-body); }
body.lh-shell #salesScreen .sales-file-row{ background:var(--surface-2); border-color:var(--hairline); }

/* row dividers + gold hover accents (editorial) */
body.lh-shell .appr-row,
body.lh-shell .sched-row,
body.lh-shell #salesScreen .crm-row{
  border-left:2px solid transparent; transition:background .14s, border-color .14s;
}
body.lh-shell .appr-row:hover,
body.lh-shell .sched-row:hover,
body.lh-shell .nav-row:hover,
body.lh-shell .pr-card:hover,
body.lh-shell #salesScreen .crm-row:hover,
body.lh-shell #salesScreen .crm-kc:hover{
  background:var(--hover); border-left-color:var(--gold);
}

/* --- buttons → design-system look (token-based, dark-aware) --- */
body.lh-shell .btn-gold,
body.lh-shell .sched-add-btn,
body.lh-shell #salesScreen .btn-primary{
  background:var(--gold); border:1px solid var(--gold); color:#1f2533; box-shadow:none;
}
body.lh-shell .btn-gold:hover,
body.lh-shell .sched-add-btn:hover,
body.lh-shell #salesScreen .btn-primary:hover{ background:var(--gold-soft); border-color:var(--gold-soft); }
body.lh-shell .btn-outline,
body.lh-shell .appr-btn,
body.lh-shell .approval-btn-secondary,
body.lh-shell .sales-elig-btn,
body.lh-shell #salesScreen .btn-secondary,
body.lh-shell #salesScreen .crm-strip-btn{
  background:var(--surface); border:1px solid var(--border-btn); color:var(--text-head); box-shadow:none;
}
body.lh-shell .btn-outline:hover,
body.lh-shell .appr-btn:hover,
body.lh-shell .sales-elig-btn:hover,
body.lh-shell #salesScreen .btn-secondary:hover,
body.lh-shell #salesScreen .crm-strip-btn:hover{ border-color:var(--gold); color:var(--gold-dark); }
body.lh-shell .appr-btn.primary{ background:var(--gold); border-color:var(--gold); color:#1f2533; }

/* search / select inputs → token surfaces */
body.lh-shell .nav-search input,
body.lh-shell .nav-select,
body.lh-shell .sales-filter,
body.lh-shell #salesScreen .crm-search-input,
body.lh-shell #salesScreen .crm-select{
  background:var(--surface); border-color:var(--border-btn); color:var(--text-strong);
}
/* segmented control active pill */
body.lh-shell #salesScreen .crm-seg.active{ background:var(--surface); color:var(--text-head); box-shadow:0 1px 3px rgba(0,0,0,.12); }

/* tabs (projects level2 / dcfc) */
body.lh-shell .nav-tab{ color:var(--text-muted); }
body.lh-shell .nav-tab.active{ color:var(--gold-dark); border-color:var(--gold); }

/* ============================================================
   6. DARK-MODE SOURCE FIXES (from the site-wide audit)
   Targeted overrides for legacy elements that use unbridged
   --lh-navy text or hardcoded light hex and break in dark mode.
   Scoped to chrome screens; color/background only.
   ============================================================ */
/* secondary buttons: the .btn-secondary label uses --lh-navy (unbridged) → it
   goes dark-on-dark once the button face darkens. Force a theme token. (This is
   the "Assign Installer" button in the screenshot.) */
body.lh-shell .btn-secondary{ color:var(--text-head); }
/* curved tab underline: a border-bottom on a still-rounded tab reads as a
   bracket — flatten the corners on the underline tabs (.pr-filter is handled in
   page-prospect.css; .nav-tab is the Projects level2/dcfc tabs). */
body.lh-shell .nav-tab{ border-radius:0; }
/* form inputs across admin / sales / intake — flip surface + text together so
   the field never stays white-with-light-text or dark-with-dark-text */
body.lh-shell .users-input, body.lh-shell .users-select,
body.lh-shell #salesScreen .installer-input, body.lh-shell #salesScreen .installer-select{
  background:var(--surface); color:var(--text-strong);
}
body.lh-shell .users-input::placeholder,
body.lh-shell #salesScreen .installer-input::placeholder{ color:var(--text-faint); }
/* planned-features (Lionheart Technology) init card + utility buttons */
body.lh-shell .pf-init{ background:var(--surface); border-color:var(--hairline); }
body.lh-shell .pf-utility-btn{ background:var(--surface); }
body.lh-shell .pf-utility-btn strong{ color:var(--text-head); }
/* scheduling reschedule banner (hardcoded #fff8ec) → amber token tint */
body.lh-shell .sched-resched-banner{ background:var(--amber-bg); border-color:var(--amber); }
body.lh-shell .sched-resched-title{ color:var(--amber); }
/* legacy dash-tile heading (navy text) — token so it flips */
body.lh-shell .dash-tile-heading{ color:var(--text-head); }