@import url("/static/theme_dark.css");

/* Mørkt tema (2026-10-07). Indlæses SIDST på alle sider; slås til af theme.js via html[data-theme="dark"].
   Samme farver som AI-fladerne (chatten, lærerens assistent, "Markér og spørg"): nærsort bund, varm lys
   tekst, flade nuancer i stedet for skygger.

   1) Tokens: siderne definerer de neutrale farver flere steder (:root, .tasg, main.app, .crs-page …).
      I stedet for at jagte hver regel sættes de her på alle elementer med !important. Kun neutrale
      tokens røres; fagfarver (--accent) og de mørke AI-tokens (--ask-*, --ta-*) bliver som de er.
   2) Faste farver (#fff, #fafaf9 …) i de ældre stylesheets: theme_dark.css (importeret øverst) er
      genereret af scripts/build_dark_theme.py. Det, scriptet ikke kan regne ud, rettes nedenfor. */

:root[data-theme="dark"] {
  --dk-bg: #1a1a18;
  --dk-surface: #222120;
  --dk-raised: #2a2926;
  --dk-line: #3a3934;
  --dk-ink: #f9f7f4;
  --dk-muted: #a8a59c;
  /* Blæk-accenten (sorte knapper med hvid tekst) bliver mørkegrå, så knappen ses og teksten kan læses;
     sider med fagfarve sætter selv --accent */
  --accent: #55534d;
  color-scheme: dark;
}

:root[data-theme="dark"],
:root[data-theme="dark"] * {
  /* style.css (elev) */
  --bg: var(--dk-bg) !important;
  --card: var(--dk-surface) !important;
  --panel: var(--dk-surface) !important;
  --border: var(--dk-line) !important;
  --text: var(--dk-ink) !important;
  --muted: var(--dk-muted) !important;
  --accent-2: #d8d4cb !important;
  --accent-3: var(--dk-ink) !important;
  /* fælles sidetokens (elev, lærer, admin) */
  --pg-ink: var(--dk-ink) !important;
  --pg-muted: var(--dk-muted) !important;
  --pg-line: var(--dk-line) !important;
  --pg-soft: var(--dk-raised) !important;
  --pg-surface: var(--dk-surface) !important;
  --pg-bg: var(--dk-bg) !important;
  /* forløb (course.css / courses.css) */
  --c-ink: var(--dk-ink) !important;
  --c-muted: var(--dk-muted) !important;
  --c-line: var(--dk-line) !important;
  --c-soft: var(--dk-raised) !important;
  --c-ok-bg: #1f3326 !important;
  --c-ok: #9fd6ae !important;
  --c-warn-bg: #3a2f17 !important;
  --c-warn: #e8c37a !important;
  /* menuer */
  --nav-bg: #141413 !important;
  --nav-line: #2a2926 !important;
  --nav-ink: var(--dk-ink) !important;
  --nav-muted: var(--dk-muted) !important;
  --nav-hover: var(--dk-raised) !important;
  /* serverrenderede lærersider */
  --ink: var(--dk-ink) !important;
  --line: var(--dk-line) !important;
  --soft: var(--dk-raised) !important;
  /* opgaver (--paper er lys tekst på fagfarven og bliver derfor ikke vendt) */
  --doc-line: var(--dk-line) !important;
  /* fagfarve blandet med mørk flade i stedet for hvid */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--dk-surface)) !important;
  --accent-line: color-mix(in srgb, var(--accent) 40%, var(--dk-surface)) !important;
  /* chatten er altid mørk; i mørkt tema smelter den sammen med resten */
  --chat-bg: var(--dk-bg) !important;
}

/* --- Bund og grundelementer ------------------------------------------------------------------- */

:root[data-theme="dark"],
:root[data-theme="dark"] body {
  background: var(--dk-bg) !important;
  color: var(--dk-ink);
}

:root[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  background-color: var(--dk-raised);
  color: var(--dk-ink);
  border-color: var(--dk-line);
}

:root[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--dk-muted);
}

:root[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--dk-ink);
}

:root[data-theme="dark"] ::selection {
  background: #4a4840;
  color: var(--dk-ink);
}

:root[data-theme="dark"] img[src*="coteacher-logo"],
:root[data-theme="dark"] img[src*="coteacher-ikon-"]:not([src*="lys"]) {
  filter: invert(1) hue-rotate(180deg) brightness(1.4);
}

/* --- Rettelser, scriptet ikke kan regne ud -------------------------------------------------- */

/* Trin-cirklerne i opgavens oversigt bruger --paper (lys) som bund */
:root[data-theme="dark"] .asg-work .asg-outline__mark { background: var(--dk-surface); }

/* Knapper i fagfarven på opgavesiden beholder lys tekst (den generelle "sort knap"-regel vender den) */
:root[data-theme="dark"] .layout > main.app.asg-work .pill-btn--primary { color: var(--paper); }

/* Afspil skriveprocessen (lærer): indsat tekst er markeret med en lys fersken-flade. I mørkt tema
   bliver den en mørk terracotta-tone, så den lyse tekst kan læses; linjen under beholder farven. */
:root[data-theme="dark"] :is(.rp, .rp-stage) {
  --rp-paste-soft: #4a2a1d;
  --rp-grid: var(--dk-line);
}
:root[data-theme="dark"] .rp-pasted { color: var(--dk-ink); }
/* Forklaringen "Markeret tekst er indsat" står uden for afspilleren og kender ikke variablen */
:root[data-theme="dark"] .tasg-hint .rp-pasted { background: #4a2a1d; box-shadow: inset 0 -2px 0 #DD6633 !important; }

/* "Markér og spørg"-knappen (elev) er mørk på den lyse side. I mørkt tema vendes den: lys knap med mørk tekst. */
:root[data-theme="dark"] .ask-trigger {
  --ask-bg: #f9f7f4;
  --ask-raised: #ecebe7;
  --ask-text: #1a1a18;
  color-scheme: light;
}

/* Skriveprogrammets værktøjslinje og "Få hjælp til denne opgave" er flade knapper. Den generelle
   ":root[data-theme=dark] button" (lys knap) vinder ellers over dem og giver hvide felter (2026-10-27). */
:root[data-theme="dark"] .asg-doc__bar button,
:root[data-theme="dark"] .asg-quiet { background: transparent; color: var(--dk-ink); }
:root[data-theme="dark"] .asg-doc__bar button:hover,
:root[data-theme="dark"] .asg-quiet:hover { background: var(--dk-raised); }
:root[data-theme="dark"] .asg-doc__bar button.is-on { background: var(--dk-raised); color: var(--dk-ink); }
/* Kommentarer i margenen: Ret/Slet er links, + ud for afsnittet er en flad knap (doc_comments.css) */
:root[data-theme="dark"] .cm-card__tools button:not(.cm-save) { background: transparent; color: var(--dk-muted); }
:root[data-theme="dark"] .cm-card__tools button:not(.cm-save):hover { color: var(--dk-ink); }
:root[data-theme="dark"] .cm-block-add { background: var(--dk-surface); color: #f2d650; }
/* Øv dig: valgkortene er knapper, men skal være mørke flader som resten af siden */
:root[data-theme="dark"] .practice-card { background: var(--dk-surface); color: var(--dk-ink); }
:root[data-theme="dark"] .cm-block-add:hover,
:root[data-theme="dark"] .cm-block-add:focus-visible { background: #c99a06; color: #1a1a18; }

/* Lærerens quiz-editor bruger flade felter med kun en understregning – også i mørkt tema */
:root[data-theme="dark"] .crs-quizedit-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background-color: transparent;
  border-color: transparent;
}
:root[data-theme="dark"] .crs-quizedit-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover {
  border-bottom-color: var(--dk-line);
}
:root[data-theme="dark"] .crs-quizedit-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
  border-bottom-color: var(--dk-ink);
}

/* --- Temakontakt (theme.js) ----------------------------------------------------------------------
   Én kontakt mellem lyst og mørkt: skinne med en knop, der glider. I menuen står den som et menupunkt
   med kontakten yderst til højre; under Indstillinger som en række. */

.theme-switch {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  cursor: pointer;
  font-family: inherit; /* størrelsen kommer fra menupunktets/rækkens egen klasse */
  text-align: left;
}
.theme-switch__label { display: grid; gap: 2px; }
/* Skinnen: lyst = lys skinne, solen til venstre og mørk knop til højre;
   mørkt = sort skinne, lys knop til venstre og månen med stjerner til højre. */
.theme-switch__track {
  --sw-w: 52px; --sw-h: 28px; --sw-pad: 3px;
  position: relative; flex: none; margin-left: auto;
  width: var(--sw-w); height: var(--sw-h);
  border: 1px solid #dcd9d3;
  border-radius: 999px; /* undtaget fra "skarpe hjørner"-reglen i style.css */
  background: #ecebe7;
  color: #1a1a18;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.theme-switch__icon {
  position: absolute; top: 50%;
  width: calc(var(--sw-h) * 0.58); height: calc(var(--sw-h) * 0.58);
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
.theme-switch__icon svg { display: block; width: 100%; height: 100%; }
.theme-switch__icon--sun { left: calc(var(--sw-pad) + 3px); }
.theme-switch__icon--moon { right: calc(var(--sw-pad) + 3px); opacity: 0; color: #f9f7f4; }
.theme-switch__thumb {
  position: absolute; top: var(--sw-pad); left: var(--sw-pad);
  width: calc(var(--sw-h) - 2 * var(--sw-pad) - 2px); height: calc(var(--sw-h) - 2 * var(--sw-pad) - 2px);
  border-radius: 50%;
  background: #1a1a18;
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}
.theme-switch[aria-checked="true"] .theme-switch__track { background: #0d0d0c; border-color: #3a3934; }
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: none; background: #f3f1ed; }
.theme-switch[aria-checked="true"] .theme-switch__icon--sun { opacity: 0; }
.theme-switch[aria-checked="true"] .theme-switch__icon--moon { opacity: 1; }
.theme-switch:focus-visible { outline: 2px solid var(--text, #1a1a18); outline-offset: 2px; }

/* Menu: samme udseende som de andre menupunkter (knappen arver deres klasse), mindre kontakt */
.theme-switch--menu { border: 0; font-weight: 400; }
.theme-switch--menu .theme-switch__track { --sw-w: 44px; --sw-h: 24px; }
.tnav .theme-switch--menu { background: transparent; }
.tnav .theme-switch--menu:not(:hover) { color: var(--nav-muted); }

/* Indstillinger: en enkel række */
.theme-switch--row {
  padding: 12px 0;
  border: 0; border-radius: 0;
  background: none; color: var(--text, #1a1a18);
  font-size: 15px; font-weight: 500;
}
.theme-switch--row .auth__helper { font-weight: 400; margin: 0; }

/* Lærer- og adminsiderne gør alt kantet med ".tasg * { border-radius: 0 !important }" o.l. */
html body .theme-switch .theme-switch__track { border-radius: 999px !important; }
html body .theme-switch .theme-switch__thumb { border-radius: 50% !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch__track, .theme-switch__thumb, .theme-switch__icon { transition: none; }
}