/* Hand-written dark-theme fixes (the generated colour remap lives in
   dark-theme.css). Everything is scoped to [data-theme="dark"]. */

/* Module pages inject a per-aspect pastel pair as inline custom properties
   (--aspect-bg / --aspect-text, hex values from module_design.py). On a dark
   surface a pastel fill with dark text becomes a glaring light box, so derive
   a dark tint of the aspect colour instead. !important is required to beat
   the inline style attribute. */
[data-theme="dark"] [style*="--aspect-bg"] {
  --aspect-bg: color-mix(in oklab, var(--aspect-main, #639922) 24%, oklch(var(--b1))) !important;
  --aspect-text: color-mix(in oklab, var(--aspect-main, #639922) 40%, #ffffff) !important;
}

/* daisyUI's disabled tab colour is nearly invisible on the dark surface. */
[data-theme="dark"] .tab-disabled,
[data-theme="dark"] .tab[disabled] {
  color: oklch(var(--bc) / 0.75);
}

/* The standalone public pages (login, register, password reset) declare
   their own light values for --p / --b3 / --bc on :root, which beats the
   daisyUI dark theme (same specificity, later in the cascade). Restore the
   daisyUI dark values for them. The landing page ships its own dark palette
   with a higher-specificity selector, so it is not affected. */
html[data-theme="dark"] {
  --p: 0.6569 0.196 275.75;
  --b3: 0.211484 0.01165 254.087939;
  --bc: 0.746477 0.0216 264.435964;
}

/* Fixed pastel fill in the TAB1 info cards (not variable-driven). */
[data-theme="dark"] .tab1-redesign .info-card--evidence {
  background: var(--aspect-bg);
  color: var(--aspect-text);
}

/* daisyUI dark alerts are fully saturated blocks (bright yellow/cyan/green).
   Module content uses them heavily as callouts, so render them as a dark tint
   of the same hue with readable light text instead. */
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-success,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-error {
  --alert-hue: var(--in);
  background-color: color-mix(in oklab, oklch(var(--alert-hue)) 16%, oklch(var(--b1)));
  border-color: color-mix(in oklab, oklch(var(--alert-hue)) 40%, transparent);
  color: color-mix(in oklab, oklch(var(--alert-hue)) 35%, oklch(var(--bc)));
}
[data-theme="dark"] .alert-success { --alert-hue: var(--su); }
[data-theme="dark"] .alert-warning { --alert-hue: var(--wa); }
[data-theme="dark"] .alert-error { --alert-hue: var(--er); }

/* "Review session" notices (expert-demo hints, walkthrough checklist, AILST
   banner) are amber boxes with brown text set as inline styles. Same amber,
   dark surface, light amber text. */
[data-theme="dark"] [style*="background: #fef3c7"],
[data-theme="dark"] [style*="background: #fffbeb"] {
  background: color-mix(in oklab, #f59e0b 14%, oklch(var(--b1))) !important;
}
[data-theme="dark"] [style*="#78350f"] { color: #fcd9a0 !important; }
[data-theme="dark"] [style*="#92400e"] { color: #fbbf6a !important; }

/* Diagrams in module content (inline SVG stored in the database, drawn for a
   light page: dark-purple labels, light boxes, transparent background). Keep
   them as designed and give them a light "paper" panel. Icons (24x24 and the
   other small viewBoxes) and the generated module cover are excluded. */
[data-theme="dark"] .tab2-redesign svg[viewBox]:not(.module-cover):not([viewBox="0 0 24 24"]):not([viewBox="0 0 48 48"]):not([viewBox="0 0 36 36"]):not([viewBox="0 0 48 16"]):not([viewBox="0 0 150 46"]):not([viewBox="0 0 20 20"]):not([viewBox="0 0 16 16"]) {
  box-sizing: border-box;
  background: #f8fafc;
  padding: .75rem;
  border: 1px solid oklch(var(--bc) / .18);
  border-radius: .75rem;
}

/* The logo PNG is artwork on a flat white square; the artwork itself is dark
   navy, so a transparent version would vanish on the navy bars (and change the
   light theme). Keep the white and make it a deliberate rounded chip. */
[data-theme="dark"] .proodos-brand img,
[data-theme="dark"] .brand img,
[data-theme="dark"] footer img[src*="logo"] {
  border-radius: .45rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

/* Generated module covers are pale compositions; tone them down on dark. */
[data-theme="dark"] svg.module-cover {
  filter: brightness(.74) saturate(.9);
}