/* ===== Dark theme (item 500b4b13) =====
 * Overrides the CSS custom properties app.css declares on :root. Every rule
 * in app.css that reads a var(--...) picks these up automatically; raw hex
 * values hardcoded in a handful of older rules (and a few inline styles in
 * app.js) are NOT covered here — known gap, tracked as a follow-up rather
 * than blocking this toggle.
 *
 * Applied via html[data-theme="dark"] (see frontend/js/theme.js), so the
 * default (no attribute, or data-theme="light") renders byte-identically to
 * before this change.
 */
html[data-theme="dark"] {
  --primary: #7c8ce0;
  --primary-light: #8b9aeb;
  --primary-dark: #4a5798;
  --accent: #5398f6;
  --accent-light: #7bb6ff;
  --accent-soft: rgba(83,152,246,0.16);

  --bg: #12161f;
  --bg-card: #181d29;
  --bg-secondary: #1c212f;
  --bg-page: #12161f;
  --bg-input: #1c212f;
  --bg-hover: rgba(83,152,246,0.08);
  --bg-sidebar: #0e121a;
  --bg-sidebar-hover: rgba(255,255,255,0.06);
  --bg-sidebar-active: rgba(83,152,246,0.18);

  --text: #e6e9f2;
  --text-secondary: #a8adbd;
  --text-sec: #a8adbd;
  --text-muted: #7a8194;
  --text-dim: rgba(230,233,242,0.5);
  --text-sidebar: #e6e9f2;
  --text-sidebar-active: #ffffff;

  --border: #2a3148;
  --border-light: #232a3a;

  --pass: #4ade80;
  --pass-bg: rgba(60,198,154,0.18);
  --fail: #f87171;
  --fail-bg: rgba(193,21,58,0.22);
  --red: #f87171;
  --pending: #a8adbd;
  --pending-bg: rgba(103,104,101,0.25);
  --partial: #fbbf5c;
  --partial-bg: rgba(250,169,56,0.18);
  --warning: #ff8a5c;
  --not-testable: #a8adbd;
  --not-testable-bg: rgba(103,104,101,0.18);
  --blue: #7b93f7;
  --blue-soft: rgba(71,78,203,0.18);
  --orange: #ff8a5c;
  --yellow: #fbbf5c;
  --green: #4ade80;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
}

/* ===== Literal-colour surfaces (item 46ba666e) =====
 * The variables above only reach rules that actually READ a var(). A few
 * surfaces are painted with literal light-mode colours instead — theme-luxe.css
 * on the chrome, app.css on the header title — and a literal ignores the
 * palette, so load order cannot rescue them: those rules win on their selectors
 * however late this file loads. The only fix is to re-state the same surfaces
 * here at a specificity that outranks them.
 *
 * Scoped deliberately to what the report named — the sidebar section labels,
 * the header title/subtitle band and the header action buttons — plus the one
 * surface those buttons open (the Feedback menu), which had the same defect.
 * The skin's remaining literals are a wider cleanup, not this fix.
 */

/* Sidebar section labels — BUILD / VALIDATE / ADOPT / MANAGE / AGENTS.
   theme-luxe.css:104 paints them rgba(37,51,120,0.42), a navy that lands at
   1.17:1 on the dark sidebar, i.e. invisible. */
html[data-theme="dark"] .nav-section-label {
  color: rgba(230, 233, 242, 0.62);
}

html[data-theme="dark"] .nav-section-label:hover {
  color: rgba(230, 233, 242, 0.92);
}

/* The header bar. theme-luxe.css:117 frosts it with a literal
   rgba(255,255,255,0.62), so in dark mode the band stayed near-white while its
   contents switched to light-on-dark inks — which is why the action buttons
   read as empty circles and the subtitle disappeared. Keep the frosted look,
   tint it from the dark surface instead. */
html[data-theme="dark"] .header {
  background: rgba(24, 29, 41, 0.72);
  border-bottom: 1px solid var(--border);
}

/* app.css hardcodes #253378 here — navy on the now-dark band. */
html[data-theme="dark"] .header-title {
  color: var(--text);
}

/* Header action buttons (AI Assistant / Feedback / Help / …). At rest they
   already follow --text-secondary; only the hover state is literal navy
   (defined in the inline <style> app.js renders with the toolbar), which
   disappeared against the dark band. */
html[data-theme="dark"] .hdr-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* The Feedback button's dropdown is a literal #fff panel; its item titles read
   an undefined --text-primary and therefore inherit the light body ink, so in
   dark mode the menu opened as a blank white card. */
html[data-theme="dark"] .fb-menu {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .fb-menu-item:hover {
  background: var(--bg-hover);
}