/* =========================================================================
   GaugeDeck — "Command" visual identity (Phase 1: tokens + shell)
   Additive layer loaded AFTER styles.css. Reskin only — no layout logic,
   no auth/role/demo behavior touched. Dark default + light toggle.
   ========================================================================= */

/* ---------- 1. TOKENS — dark (default) ---------- */
:root,
:root[data-theme="dark"] {
  /* Surfaces — lifted graphite, layered (approved) */
  --bg:#131619;
  --surface:#1B1F23;
  --surface-2:#23282E;
  --surface-3:#2C323A;
  --line:#31373F;
  --line-strong:#434A54;

  /* Text */
  --ink:#ECEFF1;
  --ink-2:#B7BEC6;
  --muted:#818A94;
  --faint:#5C646E;

  /* Brand + momentum (surgical lime) */
  --brand:#C6F24E;
  --brand-strong:#B2E035;
  --brand-ink:#0F1113;
  --brand-dim:rgba(198,242,78,.12);

  /* Semantic status */
  --win:#C6F24E;
  --warn:#F5B031;
  --danger:#FF5D45;
  --info:#6EA8D8;
  --teal:#3FB6C4;
  --info-2:#3FB6C4;

  /* Status tints */
  --win-bg:rgba(198,242,78,.12);
  --warn-bg:rgba(245,176,49,.13);
  --danger-bg:rgba(255,93,69,.13);
  --info-bg:rgba(110,168,216,.13);

  /* Radii */
  --r-card:10px;
  --r-ctl:8px;
  --r-chip:6px;

  /* Effects */
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 18px 44px rgba(0,0,0,.5);
  --focus-ring:0 0 0 3px rgba(198,242,78,.30);

  /* Legacy token remaps (styles.css references these everywhere) */
  --paper:var(--bg);
  --card:var(--surface);
  --green:var(--brand);
  --green-dark:var(--brand-strong);
  --mint:var(--brand-dim);
  --lime:var(--brand);
  --orange:var(--warn);
  --orange-soft:var(--warn-bg);
  --red:var(--danger);

  color-scheme:dark;
  --font-num:"SFMono-Regular",ui-monospace,"Cascadia Mono","Segoe UI Mono","Roboto Mono",Menlo,Consolas,monospace;
}

/* ---------- 2. TOKENS — light (toggle) ---------- */
:root[data-theme="light"] {
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --surface-3:#EEF0F3;
  --line:#E2E5EA;
  --line-strong:#CFD4DB;

  --ink:#14171B;
  --ink-2:#3C434C;
  --muted:#6A727C;
  --faint:#9AA2AC;

  --brand:#6C8F16;
  --brand-strong:#587611;
  --brand-ink:#FFFFFF;
  --brand-dim:rgba(108,143,22,.10);

  --win:#5E8A0F;
  --warn:#B9770C;
  --danger:#D33B23;
  --info:#2F6FA8;
  --teal:#0E8595;
  --info-2:#0E8595;

  --win-bg:rgba(94,138,15,.10);
  --warn-bg:rgba(185,119,12,.12);
  --danger-bg:rgba(211,59,35,.10);
  --info-bg:rgba(47,111,168,.10);

  --shadow:0 1px 2px rgba(16,19,23,.08), 0 1px 3px rgba(16,19,23,.06);
  --shadow-lg:0 20px 50px rgba(16,19,23,.16);
  --focus-ring:0 0 0 3px rgba(108,143,22,.28);

  --paper:var(--bg);
  --card:var(--surface);
  --green:var(--brand);
  --green-dark:var(--brand-strong);
  --mint:var(--brand-dim);
  --lime:var(--brand);
  --orange:var(--warn);
  --orange-soft:var(--warn-bg);
  --red:var(--danger);

  color-scheme:light;
}

/* Bright lime signature used for small solid accents even in light mode */
:root[data-theme="light"] { --accent-solid:#C6F24E; }
:root, :root[data-theme="dark"] { --accent-solid:#C6F24E; }

/* ---------- 3. BASE ---------- */
html { background:var(--bg); }
body {
  color:var(--ink);
  background:
    radial-gradient(circle at 8% -4%, rgba(198,242,78,.05), transparent 34rem),
    var(--bg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
code { background:var(--surface-2); color:var(--ink-2); }

/* Focus rings on brand */
button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,a:focus-visible { outline:none !important; box-shadow:var(--focus-ring); }

/* Tabular figures everywhere numbers matter */
.kpi-value,.funnel-count,.funnel-rate,.rank-stat b,.comparison-card strong,
.average strong,.metric-chip strong,.insight-stat-grid strong,
td,th,.pill,.trend,.missing-count { font-variant-numeric:tabular-nums; }
.kpi-value,.funnel-count {
  font-family:var(--font-num); letter-spacing:-.02em;
}

/* ---------- 4. TYPOGRAPHY SCALE (restrained, data-forward) ---------- */
.page-head h1 { font-size:clamp(24px,2.4vw,30px) !important; letter-spacing:-.02em; font-weight:650; }
.page-head p:last-child { color:var(--muted); }
.panel-header h2,.action-center h2 { font-size:16px !important; font-weight:600; letter-spacing:-.01em; }
.eyebrow { color:var(--brand); font-weight:800; letter-spacing:.12em; }
.eyebrow.lime { color:var(--accent-solid); }
.kpi-value { font-size:34px !important; font-weight:600; }
.kpi-value.word { font-size:22px !important; }

/* ---------- 5. BRAND MARK ---------- */
.brand-mark {
  border-radius:9px;
  color:var(--brand-ink);
  background:var(--brand);
  box-shadow:0 6px 16px rgba(198,242,78,.22);
  font-weight:800;
  letter-spacing:-.02em;
}
:root[data-theme="light"] .brand-mark { color:#fff; background:var(--accent-solid); color:#1c2408; }
.brand-lockup.light strong { color:#fff; }
.brand-lockup.light small { color:rgba(255,255,255,.7); }

/* ---------- 6. SHELL: tactical top bar ---------- */
.topbar {
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(12px);
}
.main-nav {
  gap:2px; padding:3px;
  border:1px solid var(--line);
  border-radius:var(--r-ctl);
  background:var(--surface-2);
}
.main-nav button {
  border-radius:6px; color:var(--muted); font-weight:700;
  letter-spacing:.01em; transition:background .15s,color .15s;
}
.main-nav button:hover { color:var(--ink-2); background:var(--surface-3); }
.main-nav button.active { color:var(--brand-ink); background:var(--brand); }

.user-menu { display:flex; align-items:center; gap:6px; }
.user-menu>button:not(.theme-toggle) { border-radius:var(--r-ctl); }
.user-menu>button:hover { background:var(--surface-2); }
.user-menu>button>span:first-child {
  border-radius:7px; color:var(--brand); background:var(--brand-dim); font-weight:800;
}
.dropdown {
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); box-shadow:var(--shadow-lg);
}
.dropdown button { border-radius:6px; }
.dropdown button:hover { background:var(--surface-2); }

/* Theme toggle button (added in index.html) */
.theme-toggle {
  display:grid; width:34px; height:34px; place-items:center;
  margin-right:6px; padding:0;
  border:1px solid var(--line); border-radius:var(--r-ctl);
  color:var(--ink-2); background:var(--surface-2);
  font-size:14px; line-height:1; transition:background .15s,color .15s,border-color .15s;
}
.theme-toggle:hover { color:var(--brand); border-color:var(--line-strong); background:var(--surface-3); }
.theme-toggle .icon-moon { display:none; }
.theme-toggle .icon-sun { display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display:block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display:none; }

/* ---------- 7. CARDS / PANELS ---------- */
.kpi-card,.panel {
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.kpi-card { border-radius:var(--r-card); min-height:0; padding:16px 18px; }
.panel { border-radius:var(--r-card); }
/* Featured KPI: graphite surface with a surgical lime accent, not a solid fill.
   Lime appears only as the top accent line + the number, keeping it premium. */
.kpi-card.green {
  color:var(--ink);
  border-color:var(--line);
  background:var(--surface);
  position:relative;
  overflow:hidden;
}
.kpi-card.green::before {
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--brand);
}
.kpi-card.green .kpi-value { color:var(--brand); }
.kpi-card.green .kpi-label,.kpi-card.green .kpi-sub { color:var(--muted); }
.kpi-icon { border-radius:6px; color:var(--brand); background:var(--brand-dim); }
.kpi-icon.orange { color:var(--warn); background:var(--warn-bg); }
.kpi-label { color:var(--muted); }
.kpi-sub { color:var(--muted); }
.progress { background:var(--surface-3); border-radius:6px; }
.progress>span { background:var(--brand); }

/* Pills / chips → squared status chips */
.pill {
  border-radius:var(--r-chip); color:var(--brand);
  background:var(--brand-dim); font-weight:800;
}
.pill.warning { color:var(--warn); background:var(--warn-bg); }
.pill.neutral { color:var(--ink-2); background:var(--surface-3); }

/* ---------- 8. INPUTS / BUTTONS ---------- */
input,select,textarea {
  border:1px solid var(--line-strong); border-radius:var(--r-ctl);
  color:var(--ink); background:var(--surface-2);
}
input:focus,select:focus,textarea:focus { border-color:var(--brand); }
.primary,.secondary,.danger { border-radius:var(--r-ctl); font-weight:750; }
.primary {
  border:1px solid var(--brand); color:var(--brand-ink);
  background:var(--brand); box-shadow:0 6px 16px rgba(198,242,78,.16);
}
.primary:hover { background:var(--brand-strong); border-color:var(--brand-strong); }
.secondary { border:1px solid var(--line-strong); color:var(--ink); background:var(--surface-2); }
.secondary:hover { background:var(--surface-3); }
.danger { border:1px solid var(--danger); color:#fff; background:var(--danger); }
.text-button { color:var(--brand); }
.week-nav { border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface-2); }
.week-nav button { border-radius:6px; }
.week-nav button:hover { background:var(--surface-3); }
.mini-button { border:1px solid var(--line-strong); border-radius:6px; color:var(--ink-2); }
.mini-button:hover { background:var(--surface-2); }
.compact-button { color:var(--ink); }

/* ---------- 9. FUNNEL — semantic, squared ---------- */
.funnel-track { background:var(--surface-3); border-radius:6px; }
.funnel-rate { color:var(--muted); }
.funnel-rate.weak { color:var(--danger); }
.funnel-name small { color:var(--muted); }
.funnel-action:hover { background:var(--surface-2); border-radius:var(--r-ctl); }

/* Semantic funnel: top-of-funnel = brand accent, all downstream volume = neutral steel.
   Health is carried by the conversion-rate text, not by a rainbow of bars.
   High-specificity selectors intentionally match styles.css to override its rainbow. */
.funnel-bar { background:var(--info); border-radius:6px; }
.funnel-bar.metric-talk_tos { background:var(--brand); }
.funnel-bar.metric-breakdowns,
.funnel-bar.metric-closes,
.funnel-bar.metric-credit_checks,
.funnel-bar.metric-apps,
.funnel-bar.metric-existing_customers { background:var(--info); }

/* Metric identity accents (chips/legends) — distinct but on-palette, no violet */
.metric-talk_tos{--metric-color:var(--brand)}
.metric-breakdowns{--metric-color:var(--info)}
.metric-closes{--metric-color:var(--teal)}
.metric-credit_checks{--metric-color:var(--warn)}
.metric-apps{--metric-color:var(--brand-strong)}
.metric-existing_customers{--metric-color:var(--muted)}
.metric-chip span b { background:color-mix(in srgb, var(--metric-color) 16%, transparent); }

/* ---------- 10. TABLES ---------- */
.table-wrap { border-radius:var(--r-card); }
th,td { border-top:1px solid var(--line); }
th { color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--surface-2) 55%, transparent); }
tbody tr:hover td { background:var(--surface-2); }

/* ---------- 11. RANK / MISSING / ATTENTION ---------- */
.rank-row { border-top:1px solid var(--line); }
.rank-number { border-radius:6px; background:var(--surface-3); color:var(--ink-2); font-weight:800; }
.rank-row:first-child .rank-number { color:var(--brand-ink); background:var(--brand); }
.rank-stat span { color:var(--muted); }
.missing-item { border-radius:var(--r-ctl); background:var(--danger-bg); }
.missing-count { border-radius:6px; color:var(--danger); background:transparent; }
.attention-item { border-radius:var(--r-ctl); background:var(--warn-bg); }
.attention-item:hover { background:color-mix(in srgb, var(--warn-bg) 60%, var(--surface-2)); }
.attention-item small { color:var(--muted); }

/* ---------- 12. AVERAGES / COMPARISON / INSIGHT / ONBOARDING ---------- */
.average,.comparison-card,.onboarding-grid article,.insight-stat-grid>div {
  border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface-2);
}
.average span,.comparison-card span,.insight-stat-grid span,.onboarding-grid p { color:var(--muted); }
.positive { color:var(--win) !important; }
.negative { color:var(--danger) !important; }
.onboarding-grid b,.action-center>header>span,.coaching-recommendation {
  color:var(--brand); background:var(--brand-dim);
}
.coaching-recommendation { border-radius:var(--r-card); }
.coaching-recommendation p:last-child { color:var(--ink-2); }
.insight-notice { border-radius:var(--r-ctl); color:var(--warn); background:var(--warn-bg); }
.insight-reps>div { border-top:1px solid var(--line); }
.insight-reps small { color:var(--muted); }

/* ---------- 13. ACTION CENTER ---------- */
.action-center {
  border:1px solid var(--line); border-radius:var(--r-card);
  background:linear-gradient(135deg, var(--brand-dim), var(--surface) 55%);
  box-shadow:var(--shadow);
}
.action-list { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.action-card {
  border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--surface);
}
.action-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow); }
.action-card>b { border-radius:6px; color:var(--brand); background:var(--brand-dim); }
.action-card.urgent>b { color:var(--danger); background:var(--danger-bg); }
.action-card.success>b { color:var(--brand-strong); background:var(--brand-dim); }
.action-card small { color:var(--muted); }
.action-card em { color:var(--brand); }

/* ---------- 14. STORY / CONTEXT / TREND ---------- */
.story-panel { border-left:3px solid var(--brand); }
.story-panel>p { color:var(--ink-2); }
.context-trail { color:var(--muted); }
.context-trail button { color:var(--brand); }
.context-trail strong { color:var(--ink); }
.trend.up { color:var(--win); }
.trend.down { color:var(--danger); }
.sparkline polyline { stroke:var(--info); }

/* ---------- 15. FILTER BAR / ADMIN / BADGES ---------- */
.filter-bar { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.filter-meta { color:var(--muted); }
.admin-tabs { border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface-2); box-shadow:none; }
.admin-tabs button { border-radius:6px; color:var(--muted); }
.admin-tabs button.active { color:var(--brand-ink); background:var(--brand); }
.role-badge { border-radius:var(--r-chip); color:var(--brand); background:var(--brand-dim); font-weight:800; }
.status-dot { background:var(--win); }
.status-dot.off { background:var(--faint); }
.today-banner { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.today-banner.complete { border-color:color-mix(in srgb, var(--win) 45%, var(--line)); background:var(--win-bg); }
.today-banner small { color:var(--muted); }
.preset-bar button { border:1px solid var(--line-strong); border-radius:var(--r-ctl); color:var(--ink-2); background:var(--surface-2); }
.metric-chip::before { background:var(--metric-color,var(--brand)); }

/* ---------- 16. DIALOGS ---------- */
dialog {
  border-radius:var(--r-card); color:var(--ink);
  background:var(--surface); box-shadow:var(--shadow-lg);
}
dialog::backdrop { background:rgba(6,8,10,.6); backdrop-filter:blur(4px); }
.icon-button { border-radius:var(--r-ctl); color:var(--ink-2); background:var(--surface-2); }
.icon-button:hover { background:var(--surface-3); }
fieldset { border:1px solid var(--line); border-radius:var(--r-ctl); }
.setup-note { border-radius:var(--r-ctl); background:var(--surface-2); }
.setup-note span { color:var(--muted); }
.demo-security-preview { border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface-2); }
.warning-check { border-radius:var(--r-ctl); background:var(--warn-bg); }
.security-section { border-top:1px solid var(--line); }
.empty-state b { border-radius:var(--r-ctl); color:var(--brand); background:var(--brand-dim); }
.empty-state p { color:var(--muted); }
.toast { border-radius:var(--r-ctl); color:var(--brand-ink); background:var(--brand); box-shadow:var(--shadow-lg); }

/* ---------- 17. AUTH / LOGIN ---------- */
.auth-story {
  color:#fff;
  background:
    linear-gradient(160deg, #0F1315 0%, #171C1A 60%, #10130F 100%),
    radial-gradient(circle at 72% 16%, rgba(198,242,78,.16), transparent 34rem);
}
.auth-story h1 { font-size:clamp(34px,4.4vw,52px) !important; letter-spacing:-.03em; }
.auth-card { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow-lg); }
.password-toggle { border-radius:6px; color:var(--brand); background:var(--brand-dim); }
.password-strength>span { background:var(--surface-3); }
.setup-card { background:var(--surface); }

/* Demo CTA promoted to a clear secondary button */
.demo-cta {
  border:1px solid var(--line-strong); border-radius:var(--r-ctl);
  color:var(--ink); background:var(--surface-2);
  box-shadow:none;
}
.demo-cta:hover { border-color:var(--brand); background:var(--surface-3); transform:translateY(-1px); }
.demo-cta span { color:var(--muted); }
.demo-cta b { color:var(--brand); }

/* Demo banner — quieter, tactical */
.demo-banner {
  color:var(--brand-ink);
  background:linear-gradient(90deg, var(--brand-strong), var(--brand));
  box-shadow:none;
}
.demo-banner span { color:rgba(15,17,19,.7); }
.demo-banner a { border:1px solid rgba(15,17,19,.28); color:var(--brand-ink); }

/* Mobile quick-log FAB + filter trigger */
.nav-quick-log span { border:4px solid var(--bg); color:var(--brand-ink); background:var(--brand); box-shadow:0 8px 18px rgba(198,242,78,.3); }
.mobile-filter-trigger { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow); }
.mobile-filter-trigger small { color:var(--muted); }
.mobile-filter-trigger strong { color:var(--brand); background:var(--brand-dim); border-radius:var(--r-chip); }
.panel-toggle { border:1px solid var(--line); border-radius:var(--r-ctl); color:var(--brand); background:var(--surface-2); }
.mobile-filter-head { background:var(--surface); }

@media(max-width:1000px){
  .topbar { background:color-mix(in srgb, var(--surface) 94%, transparent); }
}

/* Reduce old celebration colors to on-brand */
body.goal-celebration::after {
  background:
    radial-gradient(circle at 20% 25%, rgba(198,242,78,.5) 0 5px, transparent 6px),
    radial-gradient(circle at 75% 18%, rgba(245,176,49,.45) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 70%, rgba(110,168,216,.4) 0 5px, transparent 6px);
}