/* ============================================================
   HealthCompass — Dark Mode overrides
   ------------------------------------------------------------
   All rules scoped under body.dark. Accent colors (teal, guide
   accents) are kept; surfaces, text, and borders are flipped.
   Load this LAST (after each page's own <style> / stylesheets).
   ============================================================ */

/* ---- Dark palette tokens (for reference)
   bg page:      #0b1422
   surface/card: #131e30
   surface-2:    #1a2740
   border:       #25324a
   text primary: #e6ecf3
   text muted:   #9fb0c3
   text faint:   #6b7d92
   ---- */

/* ===== Toggle button ===== */
.hc-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;cursor:pointer;padding:0;margin-left:.25rem;flex-shrink:0;
  transition:background .18s,transform .18s;
}
.hc-theme-toggle:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.hc-theme-toggle svg{display:block}
.hc-theme-toggle-fixed{position:fixed;top:12px;right:14px;z-index:500}
/* In light mode the nav is dark, so white button is fine. Keep consistent in dark too. */

/* ===== GLOBAL SURFACES ===== */
body.dark{background:#0b1422 !important;color:#e6ecf3 !important;--hc-ink:#e6ecf3}

/* Generic white / light backgrounds -> dark surfaces */
body.dark .hcsec.alt,
body.dark .fg-controls,
body.dark .ctrl,
body.dark .sl-sec-alt,
body.dark .dt-alt,
body.dark .pf-sec-alt{
  background:#101a2b !important;
}

/* ===== HOME PAGE ===== */
body.dark .hcgc,
body.dark .hctc2,
body.dark .hctc,
body.dark .hcp2tc{
  background:#131e30 !important;border-color:#25324a !important;
}
body.dark .hcgc-ico,
body.dark .hctc2-ico{background:#1a2740 !important}
body.dark .hcgc-nm,
body.dark .hctc2-nm,
body.dark .hcstl,
body.dark .hcp2stl{color:#e6ecf3 !important}
body.dark .hcgc-ds,
body.dark .hctc2-ds,
body.dark .hcsds,
body.dark .hctctag,
body.dark .hcp2tctag{color:#9fb0c3 !important}
body.dark .hctcname,body.dark .hcp2tcnm{color:#e6ecf3 !important}
body.dark .hctcds,body.dark .hcp2tcds{color:#9fb0c3 !important}
/* hero + trust band are already dark navy — leave as-is */

/* ===== SUPPLEMENT GUIDE ===== */
body.dark .card,
body.dark .sup-card,
body.dark .scard{
  background:#131e30 !important;border-color:#25324a !important;
}
body.dark .ctrl-inner input,
body.dark .search,
body.dark .fg-search,
body.dark input[type="search"],
body.dark input[type="number"],
body.dark input[type="time"]{
  background:#0b1422 !important;border-color:#25324a !important;color:#e6ecf3 !important;
}
body.dark .catbtn,body.dark .fg-catbtn,body.dark .fg-bchip{
  background:#131e30 !important;color:#9fb0c3 !important;
}

/* ===== Generic card/panel classes across guides ===== */
body.dark .fg-card,
body.dark .dt-card,
body.dark .pf-tool,
body.dark .pf-pillar,
body.dark .pf-study,
body.dark .pf-faq-item,
body.dark .pf-app,
body.dark .pf-phase,
body.dark .sl-tool,
body.dark .sl-stage,
body.dark .sl-func,
body.dark .sl-study,
body.dark .sl-app,
body.dark .sl-faq-item,
body.dark .sl-agetable,
body.dark .dt-study,
body.dark .dt-faq-item,
body.dark .dt-table-wrap,
body.dark .fg-nut,
body.dark .fg-pair,
body.dark .fg-ben{
  background:#131e30 !important;border-color:#25324a !important;
}

/* table rows */
body.dark .dt-table th{background:#0f1827 !important;color:#9fb0c3 !important;border-color:#25324a !important}
body.dark .dt-table td{border-color:#25324a !important;color:#cdd9e6 !important}
body.dark .dt-table tbody tr:hover{background:#1a2740 !important}

/* secondary surfaces / soft fills */
body.dark .sl-opt,
body.dark .pf-opt,
body.dark .pf-seg-b,
body.dark .sl-hg-item,
body.dark .sl-toggle,
body.dark .pf-unit,
body.dark .fg-nuts .fg-nut,
body.dark .pf-phase,
body.dark .sl-cyc-card{
  background:#1a2740 !important;border-color:#25324a !important;color:#cdd9e6 !important;
}

/* ===== TEXT: headings, body, muted ===== */
body.dark h1,body.dark h2,body.dark h3,body.dark h4{color:#e6ecf3 !important}
body.dark .fg-name,body.dark .fg-nut-v,
body.dark .dt-name,body.dark .dt-tname,
body.dark .pf-tool-title,body.dark .pf-pillar-title,body.dark .pf-study-title,
body.dark .sl-tool-title,body.dark .sl-stage-name,body.dark .sl-func-title,body.dark .sl-study-title,
body.dark .sl-age-label,body.dark .pf-phase-t strong{color:#e6ecf3 !important}

/* muted/secondary text */
body.dark .fg-tag,body.dark .fg-ds,body.dark .fg-p,body.dark .fg-nut-n,body.dark .fg-pair-y,
body.dark .fg-sec-sub,body.dark .fg-hero-sub,
body.dark .dt-sec-sub,body.dark .dt-cardtag,body.dark .dt-p,body.dark .dt-pair-y,
body.dark .pf-sec-sub,body.dark .pf-tool-sub,body.dark .pf-pillar-sum,body.dark .pf-study-body,body.dark .pf-phase-t,body.dark .pf-faq-a,
body.dark .sl-sec-sub,body.dark .sl-tool-sub,body.dark .sl-stage-text,body.dark .sl-func-body,body.dark .sl-study-body,body.dark .sl-faq-a,body.dark .sl-age-note,
body.dark .dt-faq-a,body.dark .dt-studies{color:#9fb0c3 !important}

/* faint text */
body.dark .result-fine,body.dark .sl-result-fine,body.dark .pf-hint,
body.dark .fg-foot-nt,body.dark .sl-foot-nt,body.dark .dt-foot-nt,body.dark .pf-foot-nt{color:#6b7d92 !important}

/* ===== Section header titles on light sections ===== */
body.dark .fg-sec-title,body.dark .dt-sec-title,body.dark .pf-sec-title,body.dark .sl-sec-title{color:#e6ecf3 !important}

/* ===== FAQ / accordion question text ===== */
body.dark .pf-faq-q,body.dark .sl-faq-q,body.dark .dt-faq-q{color:#e6ecf3 !important}
body.dark .pf-pillar-head{color:#e6ecf3 !important}

/* ===== callout / tinted boxes that were very light ===== */
body.dark .fg-cau,body.dark .sl-cau,
body.dark .dt-ev-box,body.dark .dt-suits,body.dark .dt-studies,
body.dark .pf-electro,
body.dark .sl-serve,body.dark .fg-serve{
  background:#161420 !important;
}
body.dark .dt-note{background:#131e30 !important;border-color:#25324a !important}
body.dark .dt-note p{color:#9fb0c3 !important}

/* pills / tags with light gray bg */
body.dark .dt-tag,body.dark .fg-btag,
body.dark .sl-app-cost,body.dark .sl-app-type,
body.dark .pf-result-cell{
  background:#1a2740 !important;
}

/* inputs placeholder */
body.dark input::placeholder{color:#6b7d92 !important}

/* detail side panels (slide-in) */
body.dark .fg-panel,body.dark .dt-panel{background:#0f1827 !important}
body.dark .fg-pb,body.dark .dt-pb{background:#0f1827 !important}
body.dark .fg-pf button,body.dark .dt-pf button{background:#1a2740 !important;color:#cdd9e6 !important}

/* overlay a touch darker */
body.dark .fg-overlay,body.dark .dt-overlay{background:rgba(0,0,0,.66) !important}

/* borders that used light gray, catch-all softening */
body.dark .fg-sec,body.dark .pf-sec,body.dark .sl-sec,body.dark .dt-sec-wrap{border-color:#25324a !important}

/* keep the dark hero/expert/verdict boxes — already dark, no override needed */

/* ===== TOOL VIEWS (BMI, calories, etc.) + RESOURCES page ===== */
/* white card surfaces */
body.dark .hcfc,
body.dark .hcrcard,
body.dark .hczone{
  background:#131e30 !important;border-color:#25324a !important;
}
/* tool/resource titles + subtitles */
body.dark .hcttl,
body.dark .hcrnm,
body.dark .hclbl{color:#e6ecf3 !important}
body.dark .hctsub,
body.dark .hcrds{color:#9fb0c3 !important}
/* inputs */
body.dark .hcinp{background:#0b1422 !important;border-color:#25324a !important;color:#e6ecf3 !important}
body.dark .hcinp::placeholder{color:#6b7d92 !important}
/* light gray category/tag pills */
body.dark .hcrtag{background:#1a2740 !important;color:#9fb0c3 !important}
/* toggle pills inside tools */
body.dark .hctog button,
body.dark .hctogbtn{background:#1a2740 !important;border-color:#25324a !important;color:#cdd9e6 !important}
/* the .hcrc result card is already dark navy — leave it */
/* .hcbcats is already a translucent-on-dark fill — leave it */

/* ===== QUESTIONNAIRE TOOLS (Stress/PSS-10, Diabetes Risk, Sleep Quality, etc.) ===== */
/* question text was dark navy -> invisible on dark cards */
body.dark .hcqlbl{color:#e6ecf3 !important}
/* answer option pills were light -> make them dark surfaces */
body.dark .hcqopt{background:#1a2740 !important;border-color:#25324a !important;color:#cdd9e6 !important}
body.dark .hcqopt:hover{border-color:#00B4A2 !important;color:#e6ecf3 !important}
/* selected option stays teal-accented and readable */
body.dark .hcqopt.on{background:#00B4A2 !important;border-color:#00B4A2 !important;color:#06121f !important}
/* crisis / mental-health callout: keep the alert identity, make readable on dark */
body.dark .hccrisis{background:#3a1a1a !important;border-color:#6b2a2a !important;color:#f3b8b8 !important}
/* disclaimer: keep the warning identity but make it readable on dark */
body.dark .hcdisc{background:#2a2410 !important;border-color:#6b5a1a !important;color:#e8d9a0 !important}

/* resource hover state shouldn't flash white */
body.dark .hcrcard:hover{border-color:#00B4A2 !important;background:#16233a !important}
body.dark .hcfc:hover{border-color:#25324a !important}

/* smooth the theme switch */
body, body * { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
@media (prefers-reduced-motion: reduce){ body, body * { transition: none !important; } }