/* ============================================================================
   HARBOR THEME — single-design reskin of the legacy app
   ----------------------------------------------------------------------------
   The legacy app renders 100% of the charts/tabs/real data but most components
   reference the OLD GitHub-style tokens (--bg-card #1c2128, --border #30363d,
   --text-* grays). Project Harbor's look lives in the deep-sea/gold token set
   (--panel/--hull/--gold/--foam/--mist) that already ships in tokens.css.

   This sheet is loaded LAST, so its :root REMAPS the old tokens onto the Harbor
   palette — re-skinning every component at once — then refines the core surface
   language (cards, panels, buttons, tables, inputs, scrollbars) to match the
   new design without touching any markup or data wiring.
   ========================================================================== */

:root{
  /* surfaces — GitHub neutral grays -> Harbor deep-sea blues */
  --bg-primary:#06080C;          /* abyss (unchanged) */
  --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 gold; align the helper accents to Harbor */
  --accent:#E8A830;
  --accent-gold:#FBBF24;
  --accent-purple:#8B5CF6;
  --accent-blue:#3B82F6;
  --accent-green:#22C55E;
  --accent-red:#EF4444;

  /* card radius to match Harbor's 14px language */
  --radius:14px;
}

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

/* ----- scrollbars (Harbor) ----- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1c2735;border-radius:6px;border:2px solid var(--abyss,#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(--hull,#1B2636);
  border-radius:var(--radius);
}
.card:hover,.dashboard-card:hover{border-color:var(--hull2,#28384C)}

/* hairline dividers + tables pick up the hull tone automatically via --border */
table th{color:var(--mist,#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(--hull,#1B2636)}

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

/* ----- primary buttons -> Harbor gold; secondary -> hull outline ----- */
.btn-primary,.primary-btn,button.primary,.cta-primary{
  background:var(--gold,#E8A830);color:#13130A;border:1px solid var(--gold,#E8A830);font-weight:600}
.btn-primary:hover,.primary-btn:hover,button.primary:hover{filter:brightness(1.06);color:#13130A}
.btn-secondary,.secondary-btn,button.secondary{
  background:#0C1622;border:1px solid var(--hull2,#28384C);color:var(--foam,#F0F6FC)}
.btn-secondary:hover,.secondary-btn:hover{border-color:var(--gold,#E8A830);color:var(--gold,#E8A830)}

/* active nav accent -> gold rail (matches Harbor sidebar) */
.nav-item.active,.sidebar-item.active,a.active{color:var(--foam,#F0F6FC)}

/* ============================================================================
   POLISH — clean, calm dashboard header + general niceties
   ========================================================================== */
.dashboard-header{gap:9px !important;padding:10px 18px !important;
  background:rgba(8,11,17,.82) !important;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hull,#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 gold primary so the main action reads instantly. */
.dashboard-header .new-analysis-btn{
  background:#0C1622 !important;border:1px solid var(--hull2,#28384C) !important;
  color:var(--mist,#94A3B8) !important;border-radius:9px !important;
  padding:7px 11px !important;font:500 12.5px var(--font-display,'Space Grotesk') !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(--gold,#E8A830) !important;color:var(--gold,#E8A830) !important;background:#0E1A28 !important}
.dashboard-header #reAnalyzeBtn{background:var(--gold,#E8A830) !important;border-color:var(--gold,#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 + metered-cost chips as Harbor chips */
.lh-livepill{border:1px solid rgba(34,197,94,.4) !important;background:rgba(34,197,94,.1) !important;
  color:var(--green-signal,#22C55E) !important;border-radius:20px !important;padding:5px 11px !important;
  font:500 11px var(--font-mono,'IBM Plex Mono') !important}
#omcCostChip{border:1px solid rgba(232,168,48,.3) !important;background:rgba(232,168,48,.08) !important;
  color:var(--gold,#E8A830) !important;border-radius:9px !important}
#omcCostChip span{color:inherit !important}

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

/* Dropdown surfaces (export menu, project switcher) -> Harbor */
#exportDropdownMenu,.project-switcher-dropdown{background:#0A121C !important;border:1px solid var(--hull,#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}

/* ---- consolidated single-row topbar + labeled "More" overflow menu ---- */
.dashboard-header{flex-wrap:nowrap !important}
.hdr-more-wrap{position:relative;display:inline-flex}
.hdr-more-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:226px;background:#0A121C;
  border:1px solid var(--hull,#1B2636);border-radius:12px;padding:6px;z-index:400;
  box-shadow:0 18px 44px rgba(0,0,0,.6);display:none;flex-direction:column;gap:2px;overflow:visible}
.hdr-more-menu.open{display:flex}
/* moved actions render as full-width labeled rows so everything stays findable */
.dashboard-header .hdr-more-menu .hdr-mi,
.dashboard-header .hdr-more-menu #exportDropdownWrap>button.new-analysis-btn{
  width:100% !important;justify-content:flex-start !important;background:transparent !important;border:none !important;
  color:var(--mist,#94A3B8) !important;border-radius:8px !important;padding:9px 11px !important;
  font:500 13px var(--font-display,'Space Grotesk') !important;display:flex !important;align-items:center;gap:10px}
.dashboard-header .hdr-more-menu .hdr-mi:hover,
.dashboard-header .hdr-more-menu #exportDropdownWrap>button.new-analysis-btn:hover{
  background:#10202E !important;color:var(--foam,#F0F6FC) !important}
.hdr-more-menu #exportDropdownWrap{width:100%}
/* export submenu flies out to the LEFT so it never covers the rows below it */
.hdr-more-menu #exportDropdownMenu{right:calc(100% + 8px) !important;left:auto !important;top:0 !important}