/* ============================================================
   report-theme.css — dark-theme override for all listing reports.
   Loaded AFTER each report's inline <style>, so !important rules
   here defeat the original light-theme inline rules.
   Palette matches the landing-page hero (Cloudflare client view).
   ============================================================ */

:root {
  --bg:        #0f1115;
  --bg-elev:   #14171c;
  --card:      #1a1d24;
  --line:      #2a2e38;
  --txt:       #e8e9ed;
  --mut:       #9aa0ab;
  --acc:       #e08a3c;
  --acc-dim:   #b16e2d;
  --link:      #4a90e2;
  --ok:        #6fcf97;
  --warn:      #e8b568;
  --bad:       #ff8a7a;
  --info:      #4a90e2;
  --ok-bg:     #1e3a2a;
  --ok-bg-sft: #182a1f;
  --warn-bg:   #3a3320;
  --warn-bg-sft:#2a261a;
  --bad-bg:    #3a1f1f;
  --info-bg:   #1a2738;
  --mono-bg:   #2a2e38;
}

/* ----- Base ----------------------------------------------------- */

html { background: var(--bg) !important; }
body {
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

p, li, dd, dt, td, th, span, div { color: inherit; }
strong, b { color: var(--txt) !important; }
em, i { color: inherit; }

a { color: var(--acc) !important; text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--acc); color: var(--bg); }

/* ----- Layout (wrap + sidebar + main) --------------------------- */

.wrap { display: flex !important; max-width: 1280px !important; margin: 0 auto !important; }

nav.toc {
  background: var(--bg-elev) !important;
  border-right: 1px solid var(--line) !important;
  width: 240px !important;
  min-width: 240px !important;
  padding: 28px 14px 28px 18px !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
}
nav.toc h4 { color: var(--acc) !important; margin: 0 0 10px !important; }
nav.toc ul { list-style: none !important; padding: 0 !important; margin: 0 0 8px !important; }
nav.toc li { margin: 2px 0 !important; }
nav.toc a {
  color: var(--mut) !important;
  display: block !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 10pt !important;
  line-height: 1.35 !important;
}
nav.toc a:hover { background: var(--card) !important; color: var(--acc) !important; text-decoration: none; }
nav.toc a.active { background: var(--acc) !important; color: var(--bg) !important; }

main { flex: 1 !important; padding: 32px 40px !important; max-width: 1000px !important; }

/* ----- Headings ------------------------------------------------- */

h1 {
  color: var(--acc) !important;
  border-bottom: 3px solid var(--acc) !important;
  padding-bottom: 10px !important;
}
h2 {
  color: var(--txt) !important;
  background: var(--card) !important;
  border-left: 4px solid var(--acc) !important;
  padding: 10px 14px !important;
}
h3 { color: var(--acc) !important; }
h4 { color: var(--txt) !important; }
h5, h6 { color: var(--mut) !important; }

/* ----- Meta / note / footnote / small --------------------------- */

.meta, .meta-row, .note, .small { color: var(--mut) !important; }
.footnote {
  color: var(--mut) !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 12px !important;
}
hr { border: none !important; border-top: 1px dashed var(--line) !important; }

/* ----- Tables --------------------------------------------------- */

table { border-collapse: collapse !important; }
th {
  background: var(--card) !important;
  color: var(--acc) !important;
  border: 1px solid var(--line) !important;
}
td {
  background: transparent !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
}
tr:nth-child(even) td { background: var(--bg-elev) !important; }

/* ----- Status cells (override .ok/.warn/.info/.bad !important) -- */

td.ok,       .ok        { background: var(--ok-bg)      !important; color: var(--ok)   !important; }
td.okSoft,   .okSoft    { background: var(--ok-bg-sft)  !important; color: var(--ok)   !important; }
td.warn,     .warn      { background: var(--warn-bg)    !important; color: var(--warn) !important; }
td.warnSoft, .warnSoft  { background: var(--warn-bg-sft)!important; color: var(--warn) !important; }
td.info,     .info      { background: var(--info-bg)    !important; color: var(--info) !important; }
td.bad,      .bad       { background: var(--bad-bg)     !important; color: var(--bad)  !important; }

/* ----- Cards / call-out blocks ---------------------------------- */

.copy-block, .bullet-row, .qa-block {
  background: var(--bg-elev) !important;
  border-left: 6px solid var(--acc) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.copy-block.title-box { color: var(--txt) !important; }
.copy-block p, .qa-block .a, .bullet-row .body { color: var(--txt) !important; }
.bullet-row .header { color: var(--acc) !important; }
.qa-block .q       { color: var(--acc) !important; }

.kpi-grid { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.kpi {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-left: 6px solid var(--acc) !important;
  color: var(--txt) !important;
  flex: 1 1 200px !important;
}
.kpi .label { color: var(--mut) !important; }
.kpi .value { color: var(--acc) !important; }

/* ----- Pills ---------------------------------------------------- */

.pill          { display: inline-block; }
.pill-high     { background: var(--ok-bg)   !important; color: var(--ok)   !important; }
.pill-med      { background: var(--warn-bg) !important; color: var(--warn) !important; }
.pill-low      { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-info     { background: var(--info-bg) !important; color: var(--info) !important; }

/* ----- Code / mono --------------------------------------------- */

code, .mono, pre {
  background: var(--mono-bg) !important;
  color: var(--warn) !important;
  border-radius: 3px;
}

/* ----- Report-specific containers (aplus / prompts / image-audit) - */

/* aplus.html — module cards */
.module-card {
  background: var(--card) !important;
  border-left: 6px solid var(--acc) !important;
  border-radius: 8px !important;
  color: var(--txt) !important;
}
.module-card h3 { color: var(--acc) !important; }
.module-card h4 { color: var(--acc) !important; }
.module-card .module-tag {
  background: var(--acc) !important;
  color: var(--bg) !important;
}
.module-card .copy {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.module-card .copy .headline { color: var(--acc) !important; }
.module-card .copy .subline  { color: var(--txt) !important; }
.module-card .copy .body     { color: var(--txt) !important; }
.module-card .image-desc {
  background: var(--bg-elev) !important;
  border-left: 3px solid var(--warn) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.module-card .alt-text {
  background: var(--bg-elev) !important;
  color: var(--mut) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
}
.module-card .alt-text code {
  background: var(--mono-bg) !important;
  color: var(--warn) !important;
  border: 1px solid var(--line) !important;
}

/* aplus.html — Q&A blocks */
.qa {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.qa .q { color: var(--acc) !important; }
.qa .a { color: var(--txt) !important; }

.pill-premium { background: var(--acc) !important; color: var(--bg) !important; }

/* prompts.html — prompt cards */
.prompt-card {
  background: var(--card) !important;
  border-left: 6px solid var(--acc) !important;
  border-radius: 8px !important;
  color: var(--txt) !important;
}
.prompt-card h3 { color: var(--acc) !important; }
.prompt-card h4 { color: var(--acc) !important; }
.prompt-card .slot-tag {
  background: var(--acc) !important;
  color: var(--bg) !important;
}
.prompt-card .slot-tag.aplus {
  background: var(--warn) !important;
  color: var(--bg) !important;
}
.prompt-card .ref-row img {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
}
.prompt-block {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.prompt-block .label       { color: var(--acc) !important; }
.prompt-block .prompt-text { color: var(--txt) !important; }
.prompt-block pre          { color: var(--txt) !important; background: transparent !important; }

.overlay-spec {
  background: var(--bg-elev) !important;
  border-left: 3px solid var(--warn) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.overlay-spec strong { color: var(--warn) !important; }
.overlay-spec .row   { color: var(--txt) !important; }

.winner { color: var(--ok) !important; }

/* Inline dark-brown color used on A+ slot-tag headlines (style="color:#843C0C") */
[style*="color:#843C0C"], [style*="color: #843C0C"] { color: var(--warn) !important; }
[style*="color:#806000"], [style*="color: #806000"] { color: var(--warn) !important; }
[style*="color:#1E5631"], [style*="color: #1E5631"] { color: var(--ok)   !important; }
[style*="color:#1F4E78"], [style*="color: #1F4E78"] { color: var(--acc)  !important; }
[style*="color:#333"],    [style*="color: #333"]    { color: var(--txt)  !important; }
[style*="color:#555"],    [style*="color: #555"]    { color: var(--txt)  !important; }
[style*="color:#444"],    [style*="color: #444"]    { color: var(--txt)  !important; }
[style*="color:#595959"], [style*="color: #595959"] { color: var(--mut)  !important; }

.pill-risk-zero { background: var(--ok-bg)   !important; color: var(--ok)   !important; }
.pill-risk-low  { background: var(--warn-bg) !important; color: var(--warn) !important; }
.pill-risk-med  { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-risk-high { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-zero      { background: var(--ok-bg)   !important; color: var(--ok)   !important; }

/* image-audit.html — slot cards & snapshot */
.slot-card {
  background: var(--card) !important;
  border-left: 6px solid var(--acc) !important;
  color: var(--txt) !important;
  border-radius: 8px !important;
}
.slot-card img {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
}
.snapshot-ok {
  background: var(--ok-bg) !important;
  border: 1px solid var(--ok) !important;
  border-left: 6px solid var(--ok) !important;
  color: var(--ok) !important;
}

/* Catch-all: any inline "background:#fff" / "background:white" style attribute */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:white"], [style*="background: white"],
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background-color:white"], [style*="background-color: white"] {
  background: var(--bg-elev) !important;
  color: var(--txt) !important;
}

/* ----- Images / figures stay untouched but border ------------- */

img { border-radius: 6px; }

/* ----- Mobile --------------------------------------------------- */

@media (max-width: 880px) {
  .wrap { flex-direction: column !important; }
  nav.toc {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  main { padding: 24px 18px !important; }
}

/* ----- Print: drop dark theme so paper printouts stay readable - */

@media print {
  body { background: #fff !important; color: #222 !important; }
  nav.toc { display: none !important; }
  .wrap { display: block !important; }
  main { padding: 0 !important; max-width: none !important; }
  h1 { color: #1F4E78 !important; border-bottom-color: #1F4E78 !important; }
  h2 { color: #fff !important; background: #1F4E78 !important; border-left: none !important; }
  h3 { color: #1F4E78 !important; }
  a { color: #1F4E78 !important; }
  td, th { color: #222 !important; background: #fff !important; border-color: #BFBFBF !important; }
  th { background: #1F4E78 !important; color: #fff !important; }
  .copy-block, .bullet-row, .qa-block, .kpi { background: #F8FAFC !important; color: #222 !important; }
  code, .mono { background: #F1F3F5 !important; color: #222 !important; }
}