/* ═══════════════════════════════════════════════════════════════════════
 * Freshmobile — Dunkelmodus-Korrekturschicht   (v3.9.74)
 * ═══════════════════════════════════════════════════════════════════════
 *
 * WOZU DIESE DATEI:
 *   Über 100 Seiten sind über Jahre gewachsen, jede mit eigenem <style>.
 *   124 Klassen setzen darin harte helle Farben (#fff, #f3f4f6 …) ganz
 *   ohne Dunkel-Gegenstück. Ergebnis: Kopfleiste dunkel, Karte in der
 *   Mitte strahlend weiß — der "halbe Dunkelmodus", der scheinbar zufällig
 *   mal hier, mal da auftaucht.
 *
 *   Diese Datei fängt die HÄUFIGEN Fälle zentral ab, damit nicht jede
 *   Seite einzeln nachgezogen werden muss. Sie ist ein Sicherheitsnetz,
 *   KEIN Ersatz für sauberes Arbeiten — siehe docs/darkmode.md.
 *
 * WICHTIG ZUR SPEZIFITÄT:
 *   Seiten-<style> steht im <head> NACH dieser Datei. Bei gleicher
 *   Spezifität gewinnt das spätere Stylesheet. Deshalb steht überall
 *   html[data-theme="dark"] davor — der zusätzliche Typselektor hebt uns
 *   über eine einfache Klassenregel. Wo eine Seite !important benutzt,
 *   hilft nur das Aufräumen der Seite selbst; der Prüfer meldet solche
 *   Stellen (darkmode_check.php).
 *
 * NICHT ANFASSEN:
 *   --white und die Grauskala. Die dienen in style.css auch als TEXTfarbe
 *   auf farbigen Flächen. Wer --white dunkel macht, bekommt unlesbare
 *   Knöpfe. Deshalb werden hier FLÄCHEN umgelegt, nie die Variable.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Grundflächen ───────────────────────────────────────────────────
   Die Behälter, in denen Inhalt liegt. Das ist der mit Abstand häufigste
   Fall: eine weiße Karte auf dunklem Grund. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .lcard,
html[data-theme="dark"] .data-section,
html[data-theme="dark"] .difficulty-section,
html[data-theme="dark"] .form,
html[data-theme="dark"] .fg,
html[data-theme="dark"] .step,
html[data-theme="dark"] .prog,
html[data-theme="dark"] .preview-frame,
html[data-theme="dark"] .photo-sheet-inner,
html[data-theme="dark"] .img-slot,
html[data-theme="dark"] .wizard-footer,
html[data-theme="dark"] .order-type-card,
html[data-theme="dark"] .device-spec-item,
html[data-theme="dark"] .device-found-img,
html[data-theme="dark"] .group-img-ph,
html[data-theme="dark"] .progress-step-num{
  background:var(--bg-card,#1C1F27);
  border-color:var(--border,#2C313D);
  color:var(--text,#E8ECF4);
}

/* ── 2. Bedienelemente ─────────────────────────────────────────────────
   Eingabefelder, Nebenknöpfe, Reiter. Etwas heller als die Karte, damit
   sie sich abheben — im Hellmodus ist es umgekehrt, deshalb --bg-soft. */
html[data-theme="dark"] .input-field,
html[data-theme="dark"] .select-field,
html[data-theme="dark"] .fld,
html[data-theme="dark"] .fi,
html[data-theme="dark"] .scan-serial-input,
html[data-theme="dark"] .searchable-select,
html[data-theme="dark"] .searchable-dropdown-search,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-tool,
html[data-theme="dark"] .btn-sm,
html[data-theme="dark"] .device-type-btn,
html[data-theme="dark"] .repair-cat-btn,
html[data-theme="dark"] .diff-btn,
html[data-theme="dark"] .parts-tab,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tab-nav,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .toggle,
html[data-theme="dark"] .toggle-switch,
html[data-theme="dark"] .mode-tab-btn.active{
  background:var(--bg-soft,#232733);
  border-color:var(--border,#2C313D);
  color:var(--text,#E8ECF4);
}

/* ── 3. Überlagerungen ─────────────────────────────────────────────────
   Vorschlagslisten und Aufklappmenüs. Die fallen besonders auf, weil sie
   ÜBER dunklem Inhalt liegen. */
html[data-theme="dark"] .search-results,
html[data-theme="dark"] .searchable-dropdown,
html[data-theme="dark"] .suglist,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .popup,
html[data-theme="dark"] .modal-inner,
html[data-theme="dark"] .sheet{
  background:var(--bg-card,#1C1F27);
  border-color:var(--border,#2C313D);
  color:var(--text,#E8ECF4);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ── 4. Tabellen ───────────────────────────────────────────────────────
   Zebrastreifen und Kopfzeilen kommen fast überall aus der Grauskala und
   bleiben deshalb hell. Beides hier neutralisieren.
   ACHTUNG: nur INNERHALB bekannter Behälter, damit keine Seite mit
   eigenem Tabellendesign überfahren wird. */
html[data-theme="dark"] .card table,
html[data-theme="dark"] .panel table,
html[data-theme="dark"] .items-table,
html[data-theme="dark"] .data-table{
  background:transparent;color:var(--text,#E8ECF4);
}
html[data-theme="dark"] .card th,
html[data-theme="dark"] .panel th,
html[data-theme="dark"] .items-table th,
html[data-theme="dark"] .data-table th{
  background:var(--bg-soft,#232733);
  color:var(--text2,#9AA3BC);
  border-color:var(--border,#2C313D);
}
html[data-theme="dark"] .card td,
html[data-theme="dark"] .panel td,
html[data-theme="dark"] .items-table td,
html[data-theme="dark"] .data-table td{
  border-color:var(--border,#2C313D);
}
html[data-theme="dark"] .card tr:nth-child(even) td,
html[data-theme="dark"] .panel tr:nth-child(even) td,
html[data-theme="dark"] .items-table tr:nth-child(even) td{
  background:var(--bg-soft,#232733);
}
html[data-theme="dark"] .item-row,
html[data-theme="dark"] .hist-dev-row{
  background:transparent;border-color:var(--border,#2C313D);
}

/* ── 5. Lesbarkeit erzwingen ───────────────────────────────────────────
   Der Fall aus der Kundenliste: Text war fast unsichtbar, weil die Seite
   eine helle Textfarbe für hellen Grund gesetzt hat, der Grund aber
   dunkel wurde. Grauwerte, die auf Dunkel nicht mehr lesbar sind, werden
   auf die Tokenfarbe gezogen. */
html[data-theme="dark"] .muted,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .secondary{
  color:var(--text2,#9AA3BC);
}

/* ── 6. Die gemeinsame Kopfleiste schützen ─────────────────────────────
   fm_kopf() bringt eigene Farben mit, aber ein seitenweites
   button{background:#fff} sticht sie aus — dann sitzt ein weißer Kasten
   mit Mondsymbol in einer sonst dunklen Leiste. Hier mit doppelter
   Klasse gegenhalten. */
html[data-theme="dark"] .fmk .fmk-ic,
html[data-theme="dark"] .fmk .fmk-menu,
html[data-theme="dark"] .fmk .fmk-akt .nav-btn,
html[data-theme="dark"] .fmk .fmk-akt .btn,
html[data-theme="dark"] .fmal .btn,
html[data-theme="dark"] .fmal button{
  background:transparent;
  color:var(--k-tx2,#9aa3bc);
  border-color:var(--k-bd,#252c3d);
}
html[data-theme="dark"] .fmk .fmk-ic:hover,
html[data-theme="dark"] .fmk .fmk-menu:hover,
html[data-theme="dark"] .fmal button:hover{
  background:var(--k-hov,#1f2431);
  color:var(--k-tx,#e8ecf4);
}

/* ── 7. Bilder und Symbole ─────────────────────────────────────────────
   Logos als PNG mit weißem Hintergrund leuchten im Dunkeln. Leicht
   abdunkeln statt invertieren — Invertieren macht Fotos unbrauchbar. */
html[data-theme="dark"] img.logo,
html[data-theme="dark"] .logo img{
  filter:brightness(.92);
}

/* ═══════════════════════════════════════════════════════════════════════
 * v3.9.82 — Nachschlag aus dem Prüfbericht
 *
 * Die erste Fassung deckte ab, was ich vermutet hatte. Der Prüfer hat
 * dann gezählt, was WIRKLICH betroffen ist — und die Rangliste sah
 * anders aus. Diese Klassen kommen aus dem Bericht vom 05.08., sortiert
 * nach Häufigkeit. Kein Raten mehr.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Die alten Kopfleisten — mit 18 Fundstellen der größte Einzelposten.
   Sie verschwinden, sobald alle Seiten auf fm_kopf() stehen; bis dahin
   sollen sie wenigstens nicht weiß leuchten. */
html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .tn-mob,
html[data-theme="dark"] .top{
  background:var(--bg-card,#1C1F27);
  border-color:var(--border,#2C313D);
  color:var(--text,#E8ECF4);
}
html[data-theme="dark"] .tn-back,
html[data-theme="dark"] .tnlink{
  background:transparent;
  border-color:var(--border,#2C313D);
  color:var(--text2,#9AA3BC);
}
html[data-theme="dark"] .tn-back:hover,
html[data-theme="dark"] .tnlink:hover{
  background:var(--bg-soft,#232733);
  color:var(--text,#E8ECF4);
}

/* Formularbausteine und Umschalter */
html[data-theme="dark"] .fg,
html[data-theme="dark"] .fi,
html[data-theme="dark"] .fld,
html[data-theme="dark"] .form,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .editor-btn,
html[data-theme="dark"] .mode-btn,
html[data-theme="dark"] .dropzone{
  background:var(--bg-soft,#232733);
  border-color:var(--border,#2C313D);
  color:var(--text,#E8ECF4);
}
/* Der Schieber bleibt ein Schieber: die Bahn dunkel, der Knopf hell.
   Würde man hier stumpf die Fläche umlegen, verschwände der Knopf. */
html[data-theme="dark"] .toggle-switch,
html[data-theme="dark"] .toggle{
  background:var(--border,#2C313D);
}

/* Kacheln, Kästen, Fortschritt */
html[data-theme="dark"] .lcard,
html[data-theme="dark"] .lcard-img,
html[data-theme="dark"] .ocard,
html[data-theme="dark"] .prog,
html[data-theme="dark"] .step,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .img-slot,
html[data-theme="dark"] .preview-frame,
html[data-theme="dark"] .photo-sheet-inner,
html[data-theme="dark"] .chat-area{
  background:var(--bg-card,#1C1F27);
  border-color:var(--border,#2C313D);
  color:var(--text,#E8ECF4);
}

/* Reiter, Pillen, Nebenknöpfe */
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .btn-tool,
html[data-theme="dark"] .btn-sm,
html[data-theme="dark"] .chip-draft,
html[data-theme="dark"] .chip-ended{
  background:var(--bg-soft,#232733);
  border-color:var(--border,#2C313D);
  color:var(--text2,#9AA3BC);
}

/* Überlagerungen und Listen */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .suglist{
  background:var(--bg-card,#1C1F27);
  border-color:var(--border,#2C313D);
  color:var(--text,#E8ECF4);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}

/* Eingehende Sprechblase im Nachrichtenverlauf — die ausgehende ist
   farbig und bleibt, wie sie ist. */
html[data-theme="dark"] .bubble-in{
  background:var(--bg-soft,#232733);
  color:var(--text,#E8ECF4);
}

/* Tabellen in weiteren Behältern */
html[data-theme="dark"] .items-table th{
  background:var(--bg-soft,#232733);color:var(--text2,#9AA3BC);
}
