/* === theme-light.css — additive overrides for html.light ===
   Palette:  Vanta-inspired clean neutrals — cool slate greys + cobalt
             #F4F6FB (slate bg)        |  #2151F5 (cobalt accent)
             #FFFFFF (white surface)   |  #E2E8F0 (slate-200 border)
             #0F172A (slate-900 text)  |  #64748B (slate-500 muted)
             #0F766E (teal/success)    |  #B45309 (amber/warning)
   ============================================================ */

html.light {
  /* ── Surfaces ── */
  --bg:             #F4F6FB;
  --surface:        #FFFFFF;
  --surface-hover:  #F1F5F9;
  --border:         #E2E8F0;

  /* ── Text ── */
  --text:           #0F172A;
  --text-dim:       #64748B;
  --text-bright:    #020617;

  /* ── Accents ── */
  --link:           #2151F5;
  --link-hover:     #1a3fd4;
  --accent:         #2151F5;
  --accent-soft:    rgba(33, 81, 245, 0.08);

  /* ── Bridge vars used by the dark-first base stylesheet ── */
  --pea-cream:      #2151F5;
  --pea-cream-dim:  rgba(33, 81, 245, 0.40);
  --pea-green:      #0F766E;
  --pea-amber:      #B45309;
  --pea-amber-dim:  rgba(180, 83, 9, 0.75);
  --pea-yellow:     #B45309;
  --pea-yellow-dim: rgba(180, 83, 9, 0.75);
  --muted:          var(--text-dim);
  --ink:            var(--text);

  /* ── Hover card ── */
  --hovercard-bg:     #FFFFFF;
  --hovercard-border: rgba(226, 232, 240, 0.80);

  /* ── Button tokens ── */
  --btn-bg:         #FFFFFF;
  --btn-bg-hover:   #F1F5F9;
  --btn-border:     #E2E8F0;
  --focus-ring:     rgba(33, 81, 245, 0.18);
}

/* ── Top bar ── */
html.light .topbar,
html.light header.topbar {
  background: #2151F5;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
html.light .topbar *,
html.light header.topbar * {
  color: #ffffff;
}
/* Keep theme-toggle icon visible */
html.light header.topbar #themeToggle svg {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.25));
}
html.light header.topbar #themeToggle:hover svg {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.35));
}
/* ── Topbar icon buttons: transparent on cobalt bar, white icon ── */
html.light .topbar button,
html.light .topbar .icon-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html.light .topbar button:hover,
html.light .topbar .icon-btn:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: transparent !important;
}

/* ── Rail ── */
html.light .rail {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
html.light .rail-nav-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.light .rail-nav-link:hover {
  background: var(--surface-hover) !important;
}

/* ── Body background ── */
body { background: var(--bg); }

/* ── Cards ── */
html.light .card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(17, 19, 24, 0.04);
}

/* ── Inputs ── */
html.light .askbar textarea,
html.light .askbar input,
html.light input[type="text"],
html.light input[type="search"],
html.light input[type="date"],
html.light textarea,
html.light select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 1px 1px rgba(0,0,0,0.02);
}
html.light .askbar textarea:focus,
html.light .askbar input:focus,
html.light input[type="text"]:focus,
html.light input[type="search"]:focus,
html.light input[type="date"]:focus {
  outline: 2px solid transparent;
  border-color: #2151F5;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
html.light .askbar input::placeholder { color: var(--text-dim); }

/* ── Buttons (generic) ── */
html.light button,
html.light .btn,
html.light .icon-btn {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html.light button:hover,
html.light .btn:hover,
html.light .icon-btn:hover {
  background: var(--btn-bg-hover);
  border-color: #2151F5;
  color: var(--text-bright);
  box-shadow: 0 2px 8px rgba(17, 19, 24, 0.06);
}

/* ── Ask / Send button (inside askbar) ── */
html.light .askbar-actions #askBtn {
  background: #2151F5;
  border: 0;
  color: #ffffff;
}
html.light .askbar-actions #askBtn:hover {
  background: #1a3fd4;
  filter: none;
}
html.light .askbar-actions .icon-btn:hover {
  background: rgba(33,81,245,0.08);
  color: var(--text);
}

/* ── Clear / History (neutral) ──
   Copy is intentionally excluded — it renders as a glyph in styles.css
   (see #copyBtn rule near .icon-btn) so it shouldn't get a button box. */
html.light .askbar #clearBtn,
html.light #historyBtn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
html.light .askbar #clearBtn:hover,
html.light #historyBtn:hover {
  background: var(--surface-hover);
  color: var(--text-bright);
}

/* ── Assessment chip ── */
html.light #assessmentToggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
}
html.light #assessmentToggle:hover {
  border-color: var(--pea-cream-dim);
  color: #2151F5;
}
html.light #assessmentToggle.active {
  background: rgba(33, 81, 245, 0.08);
  border-color: #2151F5;
  color: #2151F5;
}

/* ── Count badges / pills ── */
html.light .count-badge,
html.light .badge,
html.light .pill {
  background: #2151F5 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Policy/Assessment list bullets ── */
html.light .file-list li:hover .bullet.red,
html.light .file-list li:hover .bullet.amber,
html.light .file-list li:hover .bullet.missing {
  box-shadow: 0 0 0 3px rgba(33, 81, 245, 0.12), 0 0 12px rgba(33, 81, 245, 0.16);
}
html.light .file-list li { border-bottom: 1px solid var(--border); }

/* ── Thinking peas — white pea needs outline in light mode ── */
html.light .thinking-peas span:nth-child(3) {
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.18), 0 0 6px rgba(0,0,0,.08);
}

/* ── Links ── */
html.light a            { color: var(--link); }
html.light a:hover      { color: var(--link-hover); text-decoration: underline; }
html.light .main a      { color: var(--link); }
html.light .main a:hover{ text-decoration: underline; }

/* ── Section headings / muted ── */
html.light h1, html.light h2, html.light h3 { color: var(--text-bright); }
html.light .muted { color: var(--text-dim); }

/* ── Mode badges ── */
html.light .mode-badge.compliance { color: #0F766E; border-color: rgba(15,118,110,0.25); }
html.light .mode-badge.policy     { color: #2151F5; border-color: rgba(33,81,245,0.22); }
html.light .mode-badge.assessment { color: #C2410C; border-color: rgba(194,65,12,0.22); }

/* ── Rail pills (light theme) ── */
html.light .rail-pill.warn    { background: #C2410C; color:#fff; border-color: rgba(194,65,12,0.55); }
html.light .rail-pill.crit    { background: #B91C1C; color:#fff; border-color: rgba(185,28,28,0.55); }
html.light .rail-pill.missing { background: #6D5ACD; color:#fff; border-color: rgba(109,90,205,0.55); }

/* ── Policy / Assessment filter inputs ── */
html.light .policies #policyFilter:focus,
html.light .assessments #assessmentFilter:focus {
  outline: 2px solid transparent;
  border-color: #2151F5;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Hover card ── */
html.light .policy-hover-card {
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(17,19,24,0.10), 0 2px 8px rgba(17,19,24,0.04);
}
html.light .policy-hover-card .actions button.primary {
  border-color: rgba(33,81,245,0.30);
  background: rgba(33,81,245,0.08);
  color: #1a3fd4;
}
html.light .policy-hover-card .actions button.primary:hover {
  background: rgba(33,81,245,0.15);
}
html.light .policy-hover-card .actions {
  background: var(--surface);
}
html.light .policy-hover-card .actions button.danger {
  border-color: rgba(185,28,28,0.30);
  color: #B91C1C;
  background: transparent;
}
html.light .policy-hover-card .actions button.danger:hover {
  background: rgba(185,28,28,0.08);
}

/* ── Dropdown ── */
html.light .dropdown {
  box-shadow: 0 16px 48px rgba(17,19,24,0.10);
}
html.light .chip:hover {
  border-color: rgba(33,81,245,0.50);
}

/* ── Spinner ── */
html.light .mini-spinner {
  border-color: var(--btn-border);
  border-top-color: #2151F5;
  box-shadow: 0 0 6px rgba(33,81,245,0.18);
}

/* ── Upload status ── */
html.light .upload-status {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html.light .upload-status[data-state="uploaded"] {
  color: #2151F5;
}
html.light .upload-status[data-state="done"] {
  color: #0F766E;
  border-color: rgba(15,118,110,0.22);
  background: rgba(15,118,110,0.06);
}
html.light .upload-status[data-state="error"] {
  color: #B91C1C;
  border-color: rgba(185,28,28,0.28);
  background: rgba(185,28,28,0.06);
}

/* ── Answer pills: NIST + CHECK — darken amber/yellow for light bg ── */
html.light .body .ans-pill.nist {
  color: #A16207;
  border-color: rgba(161, 98, 7, 0.35);
  background: rgba(161, 98, 7, 0.08);
}
html.light .body .ans-pill.check {
  color: #92600A;
  border-color: rgba(146, 96, 10, 0.30);
  background: rgba(146, 96, 10, 0.07);
}

/* ── Answer section cards: NIST + Implementation Details border-left ── */
html.light .body .ans-sec-supporting-nist-reference {
  border-left-color: rgba(161, 98, 7, 0.55);
  background: linear-gradient(180deg, rgba(161,98,7,0.06), var(--surface));
}
html.light .body .ans-sec-implementation-details {
  border-left-color: rgba(146, 96, 10, 0.50);
  background: linear-gradient(180deg, rgba(146,96,10,0.05), var(--surface));
}

/* shimmer removed — pea animation handles loading state */

/* ── Health indicator (topbar) ── */
#health { display:inline-flex; align-items:center; gap:12px; line-height:1; }
#health .icon-btn.theme { width:28px; height:28px; display:inline-grid; place-items:center; border-radius:999px; animation:none !important; opacity:1 !important; }
#health.ok      { color: var(--pea-green); }
#health.checking{ color: var(--pea-cream); }
#health.warn    { color: #F87171; }
#health.ok #healthLabel      { animation: none; }
#health.checking #healthLabel{ animation: none; }
#healthLabel { color: #fff !important; }

/* ── Audit / Upload / Bulk modals ── */
html.light .asmnt-modal {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 40px rgba(17,19,24,0.14);
}
html.light .asmnt-modal-title { color: var(--text-bright); }
html.light .asmnt-modal-input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
html.light .asmnt-modal-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* ── Panel inner cards (coverage + assessment) ── */
html.light .coverage-inner,
html.light .assessment-panel-inner {
  background: var(--surface);
  box-shadow: 0 0 40px rgba(17,19,24,0.08), 0 2px 8px rgba(17,19,24,0.04);
}

/* ============================================================
   Dropdowns + menus that hardcode dark backgrounds in styles.css.
   These show through as harsh dark-on-light cards in light mode
   without explicit overrides — the kebab dropdown is the most
   visible offender.
   ============================================================ */

/* Section-header kebab dropdown (Policies / Assessments / Runs / Settings) */
html.light .runs-header-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}
html.light .runs-header-menu-item {
  /* Strip the generic html.light button border + bg so menu items
     don't render as bordered tiles inside the popup. Matches the
     gap-kebab override pattern below. */
  background: transparent;
  border: none;
  color: var(--text);
}
html.light .runs-header-menu-item:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text-bright);
  box-shadow: none;
}
html.light .runs-header-menu-divider { background: var(--border); }

/* Gap-detected kebab — same chrome as the section-header kebabs.
   Override the generic html.light button border (line 130) on the
   menu items so they don't render as bordered tiles inside the
   menu. */
html.light .gap-kebab-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}
html.light .gap-kebab-menu button {
  background: transparent;
  border: none;
  color: var(--text);
}
html.light .gap-kebab-menu button:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text-bright);
  box-shadow: none;
}
html.light .gap-kebab-btn {
  background: transparent;
  border: none;
}
html.light .gap-kebab-btn:hover {
  background: var(--surface-hover);
  border-color: transparent;
  box-shadow: none;
}

/* Document viewer (View mode): an all-white reading surface so the
   panel reads as "you're consuming this." Pre loses its slate wash
   and visible border in light mode so it blends with the white
   .doc-panel; the doc-panel itself flips from --bg slate to white.
   Edit mode intentionally keeps the slate --bg panel (with a white
   textarea inside) so the two modes feel different at a glance. */
html.light .doc-panel {
  background: #ffffff;
}
html.light .doc-panel-body .policy-view-pre {
  background: #ffffff;
  border-color: transparent;
}

/* Editor textarea — match the viewer's white body so the two panels
   feel like the same surface. The base rule uses var(--surface) which
   is a faint slate in light mode. */
html.light .policy-editor-area {
  background: #ffffff;
  color: var(--text);
}

/* System status popover — base styles.css hardcodes hsl(210 30% 13%)
   (deep navy) which reads as an inverted dark card on light pages.
   Lift to the same surface treatment used by the kebab dropdowns. */
html.light .system-status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}
html.light .system-status-card .card-title { color: var(--text-bright); }
html.light .system-status-card span { color: var(--text-dim); }
html.light .system-status-card b { color: var(--text); }

/* EDIT-mode pill picks up a warmer amber in light mode for legibility */
html.light .panel-mode-pill.edit {
  border-color: hsl(32 95% 50% / .55);
  background: hsl(38 95% 92%);
  color: hsl(28 80% 38%);
}
html.light .panel-mode-pill.view {
  background: var(--surface-hover);
  color: var(--text-dim);
}

/* Flag-for-review per-question button — warmer amber in light mode
   so the flagged state pops on white surfaces. */
html.light .run-result-flag.flagged {
  color: hsl(28 90% 45%);
  background: hsl(38 95% 92%);
  border-color: hsl(32 95% 50% / .55);
}
html.light .run-result-flag.flagged:hover {
  background: hsl(38 95% 88%);
}
html.light .run-review-flags-btn {
  border-color: hsl(32 95% 50% / .55);
  color: hsl(28 90% 40%);
}
html.light .run-review-flags-btn:hover {
  background: hsl(38 95% 92%);
}

/* Section-header kebab (Documents / Assessments / Schedules / Settings):
   strip the button chrome so only the three dots show on hover, matching
   the dark-mode treatment at styles.css:1353. The default light styling
   draws a bordered box that reads as a button — the glyph is enough. */
html.light .section-controls .icon-btn,
html.light .section-controls .icon-btn:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Legacy admin-row overflow menu (still rendered in some flows) */
html.light .runs-overflow-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}
html.light .runs-overflow-item { color: var(--text); }
html.light .runs-overflow-item:hover {
  background: var(--surface-hover);
  color: var(--text-bright);
}

/* Status-chip count badge (the small number bubble inside All/Pending/etc.).
   Default is a near-black hsl(210 12% 22%) which reads badly on light. */
html.light .run-status-chip .chip-count {
  background: #E2E8F0;
  color: var(--text);
}
html.light .run-status-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
html.light .run-status-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Modal (Audit / Bulk / Run-create) — dark navy bg in styles.css */
html.light .asmnt-modal-backdrop { background: rgba(15, 23, 42, 0.32); }
html.light .asmnt-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* Hover card sticky-action footer + the upload status surface */
html.light .upload-status { background: var(--surface); }

/* Generic hover-card body (line 563 in styles.css uses dark navy) */
html.light .policy-hover-card,
html.light .run-hover-card,
html.light .assessment-hover-card {
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Panel header borders feel a bit faint on white — lift to slate-200 explicitly */
html.light .assessment-panel-hdr,
html.light .assessment-panel-meta,
html.light .coverage-hdr {
  border-bottom-color: var(--border);
}

/* "Insufficient evidence" / answer pill colors — readable on white */
html.light .ans-yellow-text,
html.light .insufficient-evidence,
html.light .ans-pill.summary {
  color: #B45309;
}