/* ditix-tools — Kopfleiste und Farbschema (hell/dunkel) für alle Seiten.
   Eingebunden im <head> jeder Seite, zusammen mit /ui/shell.js:
     <link rel="stylesheet" href="/ui/shell.css">
     <script src="/ui/shell.js"></script>
   Die Farben stehen hier EINMAL als --dtx-*; die Seiten (admin.css, eigene :root-Blöcke)
   zeigen mit ihren gewohnten Namen (--bg, --panel, --lime …) darauf. Neues Farbschema
   oder neue Farbe = nur hier ändern. Ohne data-theme gilt Dunkel (bisheriger Stand).
   Bewusst eigener Namensraum: die Widget-Seite /shop-events hat eigene --bg/--panel/--text. */

:root, html[data-theme="dark"] {
  --dtx-bg:#0a0a0a;
  --dtx-panel:#141414;
  --dtx-panel-2:#101010;       /* eingelassene Fläche in einer Karte (Listenzeile, Unterkarte) */
  --dtx-input:#0f0f0f;
  --dtx-code-bg:#0c0c0c;
  --dtx-text:#f5f5f5;
  --dtx-muted:#a3a3a3;
  --dtx-border:#262626;
  --dtx-line-soft:#1a1a1a;     /* Trennlinie zwischen Zeilen */
  --dtx-hover:rgba(255,255,255,.04);
  --dtx-lime:#caeb30;          /* Akzent für Text, Linien, Symbole */
  --dtx-lime-fill:#caeb30;     /* Akzent als Fläche (Hauptknopf) */
  --dtx-on-lime:#0a0a0a;       /* Schrift auf der Akzentfläche */
  --dtx-lime-soft:rgba(202,235,48,.10);
  --dtx-lime-line:rgba(202,235,48,.28);
  --dtx-magenta:#ff3ec7;
  --dtx-danger:#f87171;
  --dtx-danger-bg:#2a1515;
  --dtx-danger-line:#3a2020;
  --dtx-warn:#d4a017;
  --dtx-warn-bg:#2a2208;
  --dtx-success:#4ade80;
  --dtx-ok-bg:#16240a;
  --dtx-info:#8ab4ff;
  --dtx-track:#2a2a2a;         /* Schieberegler-/Fortschritts-Hintergrund */
  --dtx-overlay:rgba(0,0,0,.72);
  --dtx-shadow:0 16px 44px -18px rgba(0,0,0,.7);
  --dtx-glow:0 16px 44px -18px rgba(202,235,48,.5);
  --dtx-top-bg:#0f0f0f;
  --dtx-logo-accent:#caeb30;
  color-scheme:dark;
}

html[data-theme="light"] {
  --dtx-bg:#f4f5f1;
  --dtx-panel:#ffffff;
  --dtx-panel-2:#f8f9f6;
  --dtx-input:#ffffff;
  --dtx-code-bg:#f0f2ec;
  --dtx-text:#15171a;
  --dtx-muted:#5c6168;
  --dtx-border:#dfe2da;
  --dtx-line-soft:#eceee8;
  --dtx-hover:rgba(0,0,0,.035);
  --dtx-lime:#4a6800;          /* ≥ 4,5:1 auch auf --dtx-lime-soft */
  --dtx-lime-fill:#caeb30;
  --dtx-on-lime:#0a0a0a;
  --dtx-lime-soft:rgba(140,180,0,.12);
  --dtx-lime-line:rgba(100,140,0,.35);
  --dtx-magenta:#c2128c;
  --dtx-danger:#c62828;
  --dtx-danger-bg:#fdeeee;
  --dtx-danger-line:#f1c4c4;
  --dtx-warn:#855800;
  --dtx-warn-bg:#fdf5dc;
  --dtx-success:#15803d;
  --dtx-ok-bg:#eef6db;
  --dtx-info:#1d4ed8;
  --dtx-track:#d6d9d0;
  --dtx-overlay:rgba(24,26,20,.45);
  --dtx-shadow:0 12px 32px -14px rgba(20,30,0,.22);
  --dtx-glow:0 14px 36px -18px rgba(85,119,0,.45);
  --dtx-top-bg:#ffffff;
  --dtx-logo-accent:#7a9a00;
  color-scheme:light;
}

/* Beim Umschalten keine halben Übergänge (jede Seite hat eigene transitions). */
html.dtx-switching *, html.dtx-switching *::before, html.dtx-switching *::after { transition:none !important; }

/* ------------------------------------------------------------------ Kopfleiste */
:root { --dtx-top-h:56px; }
/* Platz reservieren, bevor shell.js die Leiste einsetzt → kein Springen beim Laden.
   Spezifisch genug, um ein „html, body { padding:0 }" der Seite zu schlagen. */
html[data-theme]:not([data-no-header]) body { padding-top:var(--dtx-top-h); }

.dtx-top {
  position:absolute; top:0; left:0; right:0; z-index:60; height:var(--dtx-top-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px; box-sizing:border-box;
  background:var(--dtx-top-bg); border-bottom:1px solid var(--dtx-border);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.dtx-brand { display:inline-flex; align-items:center; gap:12px; color:var(--dtx-text); text-decoration:none; min-width:0; }
.dtx-brand:focus-visible { outline:2px solid var(--dtx-lime); outline-offset:4px; border-radius:6px; }
.dtx-logo { display:block; height:21px; width:auto; flex:none; }
.dtx-logo .w { fill:currentColor; }
.dtx-logo .a { fill:var(--dtx-logo-accent); }
.dtx-sep { width:1px; height:18px; background:var(--dtx-border); flex:none; }
.dtx-name { font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--dtx-muted); white-space:nowrap; }
.dtx-brand:hover .dtx-name { color:var(--dtx-text); }

/* Schalter Hell/Dunkel: Knopf sitzt auf dem aktiven Symbol. */
.dtx-switch {
  all:unset; box-sizing:border-box; cursor:pointer; flex:none; border-radius:999px;
  -webkit-tap-highlight-color:transparent;
}
.dtx-switch:focus-visible { outline:2px solid var(--dtx-lime); outline-offset:3px; }
.dtx-track {
  position:relative; display:block; width:62px; height:32px; border-radius:999px;
  background:var(--dtx-panel-2); border:1px solid var(--dtx-border); box-sizing:border-box;
  transition:background .2s ease, border-color .2s ease;
}
.dtx-switch:hover .dtx-track { border-color:var(--dtx-lime-line); }
.dtx-track > svg { position:absolute; top:50%; width:15px; height:15px; margin-top:-7.5px; color:var(--dtx-muted); }
.dtx-track > .dtx-i-sun { left:8px; }
.dtx-track > .dtx-i-moon { right:8px; }
.dtx-knob {
  position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .22s cubic-bezier(.3,.7,.4,1), background .2s ease;
}
.dtx-knob svg { width:15px; height:15px; }
.dtx-knob .dtx-i-sun { display:none; }
html[data-theme="dark"] .dtx-knob, :root:not([data-theme]) .dtx-knob { transform:translateX(30px); background:var(--dtx-lime-fill); color:#0a0a0a; }
html[data-theme="light"] .dtx-knob { transform:none; background:#ffffff; color:#b07800; box-shadow:0 1px 3px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); }
html[data-theme="light"] .dtx-knob .dtx-i-sun { display:block; }
html[data-theme="light"] .dtx-knob .dtx-i-moon { display:none; }

@media (max-width:600px) {
  :root { --dtx-top-h:52px; }
  .dtx-top { padding:0 16px; }
  .dtx-logo { height:19px; }
  .dtx-brand { gap:10px; }
}
@media print {
  .dtx-top { display:none; }
  html[data-theme] body { padding-top:0; }
}