/* ============================================================== *
 *  Farbschema (bis 01.11.2026 theme-light.css) — Einstellungen → Farbschema
 *  Hell / Dunkel / System seit 18.10.2026, Individuell mit Helligkeitsregler
 *  seit 02.11.2026. lib/partials/theme_kopf.php setzt vor dem ersten Zeichnen
 *  auf <html>:
 *    data-theme  = light | dark   (die GRUNDLAGE: Schrift, Signalfarben, Einzelregeln)
 *    --kw-anteil = 0…40 %         (nur Individuell: Anteil des Gegenschemas in den Flächen)
 *  Dunkel bleibt der Standard aus app.css; hier stehen die hellen Werte und die
 *  Mischregeln beider Grundlagen. Jedes Flächen-Token ist je Grundlage
 *    color-mix(in srgb, eigen, gegenstück var(--kw-anteil))
 *  — bei 0 % exakt der bisherige Wert (app.css hält den Rückfall --kw-anteil: 0%).
 *  Die Hex-Paare sind die aus app.css (dunkel) und dem hellen Block; test_farbschema.php
 *  hält sie deckungsgleich und rechnet die Kontrastgarantie nach (kein Grau auf Grau:
 *  Haupttext ≥ 7:1 dunkel bzw. ≥ 5,5:1 hell, gedämpfter Text ≥ 4,5:1). Gedämpfte Schrift
 *  (--muted, --muted-2, --muted-3) wandert deshalb mit höherem Faktor zur Haupttextfarbe.
 *  Für alle Seiten auf Basis von app.css: Startseite, Deine Projekte, Editor,
 *  Datenbank-Viewer, Monitoring, RoRo, Visualisierung, Reverse, Login. Das Terminal
 *  (news/) hat eigene Tokens und seine beiden Blöcke am Ende von news/style.css.
 * ============================================================== */

/* ---- Dunkle Grundlage: Standard aus app.css, bei „Individuell“ aufgehellt ------ */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* seit 04.11.2026 abends = Terminal-Tokens dunkel samt Gegenstück (news/style.css, Ende) */
  --bg:          color-mix(in srgb, #101215, #f3f5f8 var(--kw-anteil));
  --bg-soft:     color-mix(in srgb, #131518, #eceff3 var(--kw-anteil));
  --panel:       color-mix(in srgb, #171a1e, #ffffff var(--kw-anteil));
  --panel-2:     color-mix(in srgb, #1c2025, #f0f2f5 var(--kw-anteil));
  --surface:     color-mix(in srgb, #22262c, #e7eaee var(--kw-anteil));
  --surface-2:   color-mix(in srgb, #282d34, #dde1e6 var(--kw-anteil));
  --line:        color-mix(in srgb, #262b31, #e1e5ea var(--kw-anteil));
  --line-soft:   color-mix(in srgb, #1f2328, #e9ecf0 var(--kw-anteil));
  --line-strong: color-mix(in srgb, #333940, #c8ced6 var(--kw-anteil));
  --muted:       color-mix(in srgb, #a9b0b8, #ffffff calc(var(--kw-anteil) * 2.5));
  --muted-2:     color-mix(in srgb, #8a929b, #ffffff calc(var(--kw-anteil) * 2.5));
  --muted-3:     color-mix(in srgb, #737b84, #ffffff calc(var(--kw-anteil) * 2.5));
}

/* ---- Helle Grundlage: bei „Individuell“ abgedunkelt ------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;
  /* seit 04.11.2026 abends = Terminal-Tokens hell samt Gegenstück */
  --bg:          color-mix(in srgb, #f3f5f8, #101215 var(--kw-anteil));
  --bg-soft:     color-mix(in srgb, #eceff3, #131518 var(--kw-anteil));
  --panel:       color-mix(in srgb, #ffffff, #171a1e var(--kw-anteil));
  --panel-2:     color-mix(in srgb, #f0f2f5, #1c2025 var(--kw-anteil));
  --surface:     color-mix(in srgb, #e7eaee, #22262c var(--kw-anteil));
  --surface-2:   color-mix(in srgb, #dde1e6, #282d34 var(--kw-anteil));
  --line:        color-mix(in srgb, #e1e5ea, #262b31 var(--kw-anteil));
  --line-soft:   color-mix(in srgb, #e9ecf0, #1f2328 var(--kw-anteil));
  --line-strong: color-mix(in srgb, #c8ced6, #333940 var(--kw-anteil));

  --text:        #14181d;   /* = --on-surface des Terminals hell */
  --text-dim:    color-mix(in srgb, #3f4750, #14181d calc(var(--kw-anteil) * 2));
  --text-faint:  color-mix(in srgb, #4b535c, #14181d calc(var(--kw-anteil) * 2));
  --muted:       color-mix(in srgb, #5b636d, #14181d calc(var(--kw-anteil) * 2));
  --muted-2:     color-mix(in srgb, #646d77, #14181d calc(var(--kw-anteil) * 2));
  --muted-3:     color-mix(in srgb, #8a929b, #14181d calc(var(--kw-anteil) * 2));

  /* Signalfarben etwas dunkler: auf Weiß sonst zu blass */
  --accent:      #d97f12;
  --accent-deep: #b9650a;
  --green:       #0e9a62;
  --blue:        #2563eb;
  --cyan:        #0b8db0;
  --violet:      #7c4ddb;
  --red:         #dc3545;
  --rose:        #e11d48;

  --shadow:    0 18px 40px -22px rgba(15, 23, 42, .28);
  --shadow-sm: 0 6px 18px -12px rgba(15, 23, 42, .25);
}

/* ---- app.css: Grundflächen und feste Farben (helle Grundlage) ------------ */
:root[data-theme="light"] .grain {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(217, 127, 18, .07), transparent 60%),
    radial-gradient(900px 600px at 4% 108%, rgba(37, 99, 235, .05), transparent 55%);
}
:root[data-theme="light"] .overview::before { background-image: radial-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px); }
:root[data-theme="light"] .rr-neu:hover { color: var(--text); }
/* Zurück-Pfeil und Zahnrad hell wie im Terminal hell (--on-surface-var #3f4750 → Hauptschrift #14181d,
   Hover-Fläche rgba(15,23,42,.06)); dunkel in app.css. */
:root[data-theme="light"] .kopf-knopf { color: color-mix(in srgb, #3f4750, #14181d calc(var(--kw-anteil) * 2)); }
:root[data-theme="light"] .kopf-knopf:hover { background: rgba(15, 23, 42, .06); color: #14181d; }
:root[data-theme="light"] .brand-mark { filter: none; }
:root[data-theme="light"] .project-card { background: var(--panel); }
:root[data-theme="light"] .field-hint { color: var(--muted); }
:root[data-theme="light"] .prompt-log { background: rgba(15, 23, 42, .05); }
:root[data-theme="light"] .btn-accent { color: #fff; box-shadow: 0 10px 22px -14px rgba(217, 127, 18, .7); }
:root[data-theme="light"] .dialog::backdrop { background: rgba(15, 23, 42, .35); }

/* ---- Startseite (start.css) ---------------------------------------------- */
:root[data-theme="light"] .start-kachel {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--k) 11%, transparent) 0%, transparent 55%),
    var(--panel);
}
:root[data-theme="light"] .start-name { color: var(--muted); }
:root[data-theme="light"] .start-info { color: var(--text-dim); }
:root[data-theme="light"] .start-pfeil { color: var(--muted-3); }

/* ---- RoRo (roro.css) / Monitoring (monitoring.css): --rr-muted / --mon-muted
 *      zeigen seit 02.11.2026 auf var(--muted) und brauchen keine helle Gegenregel mehr. */
:root[data-theme="light"] .mon-grain {
  background:
    radial-gradient(1200px 640px at 84% -10%, rgba(217, 127, 18, .06), transparent 58%),
    radial-gradient(900px 620px at -4% 110%, rgba(37, 99, 235, .05), transparent 55%);
}
:root[data-theme="light"] .mon::after { background-image: radial-gradient(rgba(15, 23, 42, .05) 1px, transparent 1px); }
:root[data-theme="light"] .mon-chip { color: #1f2937; }
:root[data-theme="light"] .mon-check-msg { color: #1f2937; }
:root[data-theme="light"] .mon-check-row.is-ok .mon-check-msg { color: var(--mon-muted); }
:root[data-theme="light"] .mon-event-msg { color: var(--text-dim); }
:root[data-theme="light"] .mon-check-since { color: #b42332; }

/* ---- Datenbank-Viewer (dbviewer.css): Flächen über Tokens, damit sie mitwandern -- */
:root[data-theme="light"] .dbv-grain {
  background: radial-gradient(1200px 640px at 84% -10%, rgba(217, 127, 18, .06), transparent 58%);
}
:root[data-theme="light"] .dbv::after { background-image: radial-gradient(rgba(15, 23, 42, .05) 1px, transparent 1px); }
:root[data-theme="light"] .dbv-top { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel-2) 92%, transparent)); }
:root[data-theme="light"] .dbv-explorer { background: linear-gradient(180deg, var(--panel-2), var(--surface)); }
:root[data-theme="light"] .dbv-toolbar { background: color-mix(in srgb, var(--panel) 70%, transparent); }
:root[data-theme="light"] .dbv-tableitem-rows,
:root[data-theme="light"] .dbv-pill-false { background: rgba(15, 23, 42, .05); }
:root[data-theme="light"] .dbv-grid tbody tr:nth-child(even) td { background: rgba(15, 23, 42, .025); }
:root[data-theme="light"] .dbv-grid tbody tr:nth-child(even) .dbv-td-idx { background: color-mix(in srgb, var(--surface), var(--panel)); }
:root[data-theme="light"] .dbv-grid-wrap::-webkit-scrollbar-thumb:hover { background: #9aa4b5; }
:root[data-theme="light"] .dbv-menu, :root[data-theme="light"] .dbv-detail { box-shadow: 0 18px 50px -18px rgba(15, 23, 42, .35); }
:root[data-theme="light"] .dbv-mark { filter: none; }
:root[data-theme="light"] header.kopfzeile .kopf-titel { color: #14181d; }   /* = --on-surface des Terminals (hell) */

/* ---- Farbschema-Auswahl (lib/partials/farbschema_wahl.php): Einstellungs-Dialog, Login;
 *      das Terminal überschreibt Maße und Farben mit seinen Tokens in news/style.css.
 *      Fallbacks in var(), weil das Terminal die app.css-Tokens nicht kennt. ------------ */
.farbschema-wahl { display: grid; gap: 8px; justify-items: start; }
.farbschema { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.farbschema button {
  padding: 8px 14px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font: inherit; font-size: calc(13px * var(--fs-scale, 1));
}
.farbschema button + button { border-left: 1px solid var(--line); }
.farbschema button.is-on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font-weight: 600; }
/* Regler (nur bei „Individuell“ sichtbar). Die Schiene zeigt, was man bekommt: links die helle
   Grundlage, die zur Mitte hin abdunkelt, rechts die dunkle, die zur Mitte hin aufhellt. Die Kante
   in der Mitte ist der bewusste Sprung über das Mittelgrau — dort hätte keine Schrift Kontrast. */
.farbschema-regler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; }
.farbschema-regler[hidden] { display: none; }
.farbschema-ende { font-size: calc(12px * var(--fs-scale, 1)); color: var(--muted, #888); }
.farbschema-info { flex-basis: 100%; font-size: calc(12px * var(--fs-scale, 1)); color: var(--muted, #888); }
.farbschema-regler input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 220px; max-width: 100%; height: 14px; margin: 0;
  border: 1px solid var(--line-strong, #777); border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #f3f5f8 0%, #96989d 49.5%, #393b3f 50.5%, #101215 100%);   /* Enden der beiden Grundlagen: hell 40 %, dunkel 20 % */
}
.farbschema-regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent, #ffb84d); border: 2px solid var(--panel, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.farbschema-regler input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent, #ffb84d); border: 2px solid var(--panel, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.farbschema-regler input[type="range"]:focus-visible { outline: 2px solid var(--accent, #ffb84d); outline-offset: 2px; }

/* ---- Projekt-Editor (editor.css): Arbeitsfläche, Verbindungen, Kacheln --- */
:root[data-theme="light"] .canvas { background-image: radial-gradient(circle, rgba(15, 23, 42, .10) 1px, transparent 1.4px); }
:root[data-theme="light"] .canvas::after { box-shadow: inset 0 0 160px 30px rgba(15, 23, 42, .06); }
:root[data-theme="light"] .wires path.wire { stroke: rgba(55, 65, 81, .72); }
:root[data-theme="light"] .wires path.wire:hover { stroke: #111827; }
:root[data-theme="light"] .wires path.wire.live { stroke: var(--accent); }
:root[data-theme="light"] .wires path.wire.selected { stroke: var(--red); }
:root[data-theme="light"] .wires path.wire.wire:has(+ .wire-del:hover),
:root[data-theme="light"] .wires path.wire.wire:has(+ .wire-del:focus-visible) { stroke: #d49a00; filter: drop-shadow(0 0 3px rgba(212, 154, 0, .5)); }
:root[data-theme="light"] .tile { background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
:root[data-theme="light"] .tile.selected { box-shadow: 0 0 0 1px var(--accent-tile), 0 0 22px -8px color-mix(in srgb, var(--accent-tile) 55%, transparent); }
:root[data-theme="light"] .tile-action[data-action="show-runs"].has-data { color: var(--text); }
:root[data-theme="light"] .inspector { box-shadow: 0 30px 70px -26px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06); }
:root[data-theme="light"] .inspector.dragging { box-shadow: 0 36px 80px -22px rgba(15, 23, 42, .4); }
:root[data-theme="light"] .sched-dialog::backdrop,
:root[data-theme="light"] .files-dialog::backdrop,
:root[data-theme="light"] .confirm-dialog::backdrop,
:root[data-theme="light"] .tg-dialog::backdrop { background: rgba(15, 23, 42, .35); }
:root[data-theme="light"] .codex-quota .cq-pct,
:root[data-theme="light"] .badge.off,
:root[data-theme="light"] .dbc-sub, :root[data-theme="light"] .dbc-sample-state,
:root[data-theme="light"] .jt-idx, :root[data-theme="light"] .jt-sum, :root[data-theme="light"] .jt-null, :root[data-theme="light"] .jt-empty { color: var(--muted); }
:root[data-theme="light"] .badge.off { border-color: var(--line-strong); }