/* ============================================================================
   LIGHTHOUSE DEPTH THEME — the deep-sea / amber reskin (non-glass light + dark)
   ----------------------------------------------------------------------------
   The app renders 100% of the charts/tabs/real data but most components still
   reference the old GitHub-style tokens (--bg-card #1c2128, --border #30363d,
   --text-* grays). This sheet is loaded LAST, so its :root REMAPS those tokens
   onto the depth palette — re-skinning every component at once — then refines
   the core surface language (cards, panels, buttons, tables, inputs,
   scrollbars) without touching any markup or data wiring.

   Two skins live here, both amber-accented:
   - DARK (default): deep-sea blues — abyss #06080C, panel #0B1623, hairline
     hull borders, foam/mist text.
   - LIGHT (html[data-theme="light"]): cool blue-tinted light — #eef1f5 wash,
     white panels, #dce2ea hairlines, deep-ink text.
   ========================================================================== */

:root{
  /* surfaces — neutral grays -> deep-sea blues */
  --bg-primary:#06080C;          /* abyss */
  --bg-secondary:#0B1623;        /* panel */
  --bg-tertiary:#0F1C2B;         /* panel2 */
  --bg-card:#0E1A28;             /* card surface */
  --bg-elevated:#11202F;
  --bg-hover:#13212F;

  /* borders -> hull hairlines */
  --border:#1B2636;
  --border-strong:#28384C;
  --border-subtle:rgba(255,255,255,.05);

  /* text -> foam / mist / dim */
  --text-primary:#F0F6FC;
  --text-secondary:#94A3B8;
  --text-muted:#7C879A;

  /* accent stays amber; align the helper accents */
  --accent:#E8A830;
  --accent-gold:#FBBF24;
  --accent-purple:#8B5CF6;
  --accent-blue:#3B82F6;
  --accent-green:#22C55E;
  --accent-red:#EF4444;

  /* card radius: one 14px language everywhere */
  --radius:14px;
}

/* ----- base ----- */
html,body{background:var(--bg-primary,#06080C);color:var(--text-primary,#F0F6FC);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-display)}
::selection{background:rgba(232,168,48,.26);color:#fff}

/* ----- scrollbars ----- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1c2735;border-radius:6px;border:2px solid var(--bg-primary,#06080C)}
::-webkit-scrollbar-thumb:hover{background:#28384c}

/* ----- card / panel surface language ----- */
.card,.dashboard-card,.metric-card,.stat-card,.panel,.insight-card,
.tab-content .card,[class*="-card"]:not(.methodology-card){
  background:linear-gradient(180deg,rgba(16,29,44,.55),rgba(12,22,34,.55));
  border:1px solid var(--border,#1B2636);
  border-radius:var(--radius);
}
.card:hover,.dashboard-card:hover{border-color:var(--border-strong,#28384C)}

/* hairline dividers + tables pick up the hull tone automatically via --border */
table th{color:var(--text-secondary,#94A3B8);font-family:var(--font-mono);
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
table td,table th{border-color:var(--border,#1B2636)}

/* ----- inputs ----- */
input,select,textarea{background:#0A121C;border:1px solid var(--border,#1B2636);
  color:var(--text-primary,#F0F6FC);border-radius:9px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent,#E8A830);
  box-shadow:0 0 0 3px rgba(232,168,48,.12)}

/* ----- primary buttons -> amber; secondary -> hull outline ----- */
.btn-primary,.primary-btn,button.primary,.cta-primary{
  background:var(--accent,#E8A830);color:#13130A;border:1px solid var(--accent,#E8A830);font-weight:600}
.btn-primary:hover,.primary-btn:hover{filter:brightness(1.06)}
.btn-secondary,.secondary-btn{background:transparent;border:1px solid var(--border,#1B2636);
  color:var(--text-secondary,#94A3B8)}
.btn-secondary:hover,.secondary-btn:hover{border-color:var(--accent,#E8A830);color:var(--accent,#E8A830)}

/* active nav accent -> amber rail */
.nav-item.active,.sidebar-item.active,a.active{color:var(--text-primary,#F0F6FC)}

/* ============================================================================
   POLISH — clean, calm dashboard header + general niceties
   ========================================================================== */
.dashboard-header{gap:13px !important;padding:8px 18px !important;
  background:rgba(8,11,17,.82) !important;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border,#1B2636) !important}

/* Unify every header action button into ONE calm secondary pill — this kills the
   "rainbow" of per-button inline border colors (Save=green, Share=purple, …).
   Re-analyze stays the single amber primary so the main action reads instantly. */
.dashboard-header .new-analysis-btn{
  background:#0C1622 !important;border:1px solid var(--border-strong,#28384C) !important;
  color:var(--text-secondary,#94A3B8) !important;border-radius:9px !important;
  padding:7px 11px !important;font:500 12.5px var(--font-display) !important;
  display:inline-flex;align-items:center;gap:6px;box-shadow:none !important;
  transition:border-color .12s,color .12s,background .12s}
.dashboard-header .new-analysis-btn svg{width:14px !important;height:14px !important;stroke:currentColor !important}
.dashboard-header .new-analysis-btn:hover{border-color:var(--accent,#E8A830) !important;color:var(--accent,#E8A830) !important;background:#0E1A28 !important}
.dashboard-header #reAnalyzeBtn{background:var(--accent,#E8A830) !important;border-color:var(--accent,#E8A830) !important;color:#13130A !important;font-weight:600 !important}
.dashboard-header #reAnalyzeBtn svg{stroke:#13130A !important}
.dashboard-header #reAnalyzeBtn:hover{filter:brightness(1.06)}

/* LIVE pill as a depth chip */
.lh-livepill{border:1px solid rgba(34,197,94,.4) !important;background:rgba(34,197,94,.1) !important;
  color:var(--accent-green,#22C55E) !important;border-radius:20px !important;padding:5px 11px !important;
  font:500 11px var(--font-mono) !important}

/* AI filter, domain switcher, preset chips */
.llm-filter-select{background:#0A121C !important;border:1px solid var(--border,#1B2636) !important;
  color:var(--text-primary,#F0F6FC) !important;border-radius:9px !important;padding:6px 9px !important;font-size:12px !important}
.llm-filter-label{color:var(--text-secondary,#94A3B8) !important;font:500 11px var(--font-mono) !important}
.dashboard-domain{border:1px solid var(--border,#1B2636) !important;border-radius:10px !important;
  background:#0A121C !important;padding:6px 11px !important}
.dashboard-domain:hover{border-color:var(--border-strong,#28384C) !important}
.uirs-chip{border-radius:9px !important}

/* Dropdown surfaces (export menu, project switcher) */
#exportDropdownMenu,.project-switcher-dropdown{background:#0A121C !important;border:1px solid var(--border,#1B2636) !important;
  border-radius:12px !important;box-shadow:0 18px 44px rgba(0,0,0,.6) !important}

/* Calm, consistent focus ring + smooth tab scroll */
:focus-visible{outline:2px solid rgba(232,168,48,.5);outline-offset:2px}
.tab-content{scroll-behavior:smooth}

/* ============================================================================
   RESPONSIVE TOOLBAR — never clip the Re-analyze button / bell on smaller laptops.
   The header is flex with fixed-width children; without min-width:0 the
   right-edge actions get pushed off-screen. Let the brand pill + AI filter shrink
   (ellipsis) so the primary action group + bell always stay visible.
   ========================================================================== */
.dashboard-header{min-width:0}
.dashboard-header > div{min-width:0}
.dashboard-header #projectSwitcherTrigger{flex:0 1 auto;min-width:0}
.dashboard-header #dashboardDomain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dashboard-header .llm-filter-container{flex:0 1 auto;min-width:0}
.dashboard-header .llm-filter-select{min-width:0;max-width:180px}
/* keep the primary action group + bell rigid so they're never what gets clipped */
.dashboard-header > div:has(> #reAnalyzeBtn),
.dashboard-header #uirsAlertWrap{flex:0 0 auto}

/* ============================================================================
   DARK-BOX CONSISTENCY — every dark panel/card/chart shares ONE corner radius,
   ONE dark gradient, and an amber outline that brightens on hover. Deliberate
   exceptions: form inputs (amber on focus only), the solid-amber Re-analyze
   button, the green LIVE pill, circular avatars/score dials, and the
   methodology card.
   ========================================================================== */
.card,.dashboard-card,.metric-card,.stat-card,.panel,.insight-card,.score-card,
.key-metric-card,.issue-card,.tab-content .card,.metrics-trend-container,
[class*="-card"]:not(.methodology-card){
  background:linear-gradient(180deg,rgba(16,29,44,.6),rgba(11,20,32,.6)) !important;
  border:1px solid rgba(232,168,48,.30) !important;
  border-radius:14px !important;
  transition:border-color .15s ease,box-shadow .15s ease !important;
}
.card:hover,.dashboard-card:hover,.metric-card:hover,.stat-card:hover,.panel:hover,
.insight-card:hover,.score-card:hover,.key-metric-card:hover,.issue-card:hover,
.metrics-trend-container:hover,[class*="-card"]:not(.methodology-card):hover{
  border-color:rgba(232,168,48,.72) !important;
}
/* Toolbar chips/dropdowns adopt the same amber outline + hover (LIVE stays green;
   the solid-amber Re-analyze keeps its fill). */
.llm-filter-select,.dashboard-domain,#exportDropdownMenu,.project-switcher-dropdown{
  border-color:rgba(232,168,48,.30) !important;
}
.llm-filter-select:hover,.dashboard-domain:hover{
  border-color:rgba(232,168,48,.72) !important;
}

/* ============================================================================
   NON-GLASS LIGHT MODE
   ----------------------------------------------------------------------------
   The :root above remaps the surface/text tokens to the DARK depth palette
   globally, and forces the card surfaces with !important. The base light theme
   (app-theme.css, loaded earlier) never re-maps those tokens, so plain light
   mode would keep dark cards/charts. Re-map the tokens to the light palette
   here — scoped to html[data-theme="light"] — and re-assert the card surfaces
   with !important to beat the dark card rule above.
   ========================================================================== */
html[data-theme="light"] body{
  --bg-primary:#eef1f5;
  --bg-secondary:#ffffff;
  --bg-tertiary:#f4f6f9;
  --bg-card:#ffffff;        --bg-elevated:#ffffff;   --bg-hover:#eef2f6;
  --border:#dce2ea;         --border-strong:#c6ced8; --border-subtle:rgba(16,32,52,.08);
  --text-primary:#10243a;
  --text-secondary:#46566a;
  --text-muted:#6b7a8d;
  background:#eef1f5; color:#10243a;
}
/* Card / panel surfaces — beat the dark `!important` gradient rule above. */
html[data-theme="light"] body .card,
html[data-theme="light"] body .dashboard-card,
html[data-theme="light"] body .metric-card,
html[data-theme="light"] body .stat-card,
html[data-theme="light"] body .panel,
html[data-theme="light"] body .insight-card,
html[data-theme="light"] body .score-card,
html[data-theme="light"] body .key-metric-card,
html[data-theme="light"] body .issue-card,
html[data-theme="light"] body .metrics-trend-container,
html[data-theme="light"] body [class*="-card"]:not(.methodology-card){
  background:#ffffff !important;
  border:1px solid #e2e7ee !important;
  box-shadow:0 1px 2px rgba(16,32,52,.06),0 2px 8px rgba(16,32,52,.04) !important;
}
/* Inputs + secondary buttons → light surfaces. */
html[data-theme="light"] body input,
html[data-theme="light"] body select,
html[data-theme="light"] body textarea,
html[data-theme="light"] body .btn-secondary,
html[data-theme="light"] body .secondary-btn{
  background:#ffffff !important; color:#10243a; border-color:#dce2ea !important;
}
/* Header + toolbar surfaces follow the light wash. */
html[data-theme="light"] body .dashboard-header{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid #dce2ea !important;
}
html[data-theme="light"] body .dashboard-header .new-analysis-btn{
  background:#ffffff !important;border-color:#c6ced8 !important;color:#46566a !important;
}
html[data-theme="light"] body .llm-filter-select,
html[data-theme="light"] body .dashboard-domain,
html[data-theme="light"] body #exportDropdownMenu,
html[data-theme="light"] body .project-switcher-dropdown{
  background:#ffffff !important;color:#10243a !important;
  box-shadow:0 12px 32px rgba(16,32,52,.14) !important;
}
html[data-theme="light"] body ::-webkit-scrollbar-thumb{background:#c6ced8;border-color:#eef1f5}