/* ============================================================================
   DESIGN „GLAS" — Dunkelmodus vollständig (TASK-002)
   ----------------------------------------------------------------------------
   Die Token aus 00-grund.css kippen von selbst. Was im Dunkeln bricht, sind die
   FESTEN Farben der Grundvorlage (style-kollin.css) und der <style>-Blöcke der
   Seiten: `background: white`, `#fdecec`, `color: #fff` auf einer Fläche aus
   --ink (die im Dunkeln hell wird), `#b91c1c` als Schrift auf dunklem Grund.

   Diese Datei lädt zuletzt. Sie ersetzt jede solche Stelle durch ein Token —
   die Regel ist dieselbe für Hell und Dunkel, nur das Token hat zwei Belegungen
   (dunkel zweimal: gewählt und „auto", genau wie in 00-grund.css).

   Signalfarben — je Bedeutung eine Familie:
     --X          Schrift und Strichsymbol auf Karte, Papier oder der eigenen Fläche
     --X-flaeche  getönte Fläche darunter
     --X-linie    Rand dieser Fläche
     --X-voll     satte Fläche unter WEISSER Schrift
   Die Namen gibt es nur im Glas-Design. Seiten dürfen sie in style="…" mit
   Ersatzwert benutzen — `var(--gefahr, #b91c1c)` — und sehen klassisch aus wie
   zuvor.

   `--kontrast-ok: 1` steht an Regeln, die nur eine Schriftfarbe setzen: Die
   Stilprüfung misst solche Farben gegen helles Papier und kennt das dunkle nicht.
   Gerechnet gegen Karte, Papier, Glas und die eigene Fläche stehen die Signalfarben
   in beiden Modi bei mindestens 5,0:1, Weiß auf den vollen Flächen bei mindestens
   4,5:1 (tests/DesignTest.php rechnet es nach); im Browser je Seite gegengemessen. Weiß auf dem Akzent beim Überfahren
   folgt dem Fundament (00-grund.css).
   ============================================================================ */

:root[data-design="glas"] {
    --gefahr:          #b91c1c;
    --gefahr-voll:     #b91c1c;
    --gefahr-flaeche:  #fdecec;
    --gefahr-linie:    #f2b8b8;

    --achtung:         #8a4a10;
    --achtung-voll:    #b45309;
    --achtung-flaeche: #fcebd9;
    --achtung-linie:   #e6c9a8;

    --info:            #0b6c8c;
    --info-voll:       #0b6c8c;
    --info-flaeche:    #d9f1fb;
    --info-linie:      #9fd3e6;

    --gut:             #0f7446;
    --gut-voll:        #0f7446;
    --gut-flaeche:     #dff5ea;
    --gut-linie:       #bfe6cd;

    --lila:            #5b46c9;
    --lila-flaeche:    #ece9fb;
    --lila-linie:      #cec9f2;

    /* Akzent als Fläche unter weißer Schrift (Zähler, Abzeichen). */
    --akzent-voll:     #c2255c;
    /* „Woanders vergeben": die dunkle Tönung im Pool. */
    --vergeben:        #4d4669;
    /* Gegenfläche: dunkel in BEIDEN Modi — eine Meldung soll sich vom Inhalt lösen. */
    --gegen:           #1b1533;
    --gegen-schrift:   #ffffff;
    /* Erhaben: was in einer Mulde obenauf liegt (der aktive Reiter). */
    --erhaben:         #ffffff;
    /* Mulde: was zurücktritt (vergangene Tage). Im Dunkeln dunkler, nicht heller. */
    --mulde:           rgba(40, 24, 80, 0.05);
    /* Eingabefeld: deckend. Hell auf heller Karte, im Dunkeln eine Vertiefung. */
    --feld:            #ffffff;
    /* Schleier hinter Fenstern und Blättern. */
    --schleier:        rgba(27, 21, 51, 0.36);
    /* Schwarze Bilder (Logo) — im Dunkeln umgekehrt. */
    /* Aus der Grundvorlage, dort ohne dunkle Belegung. */
    --danger:          #b81e57;
}

/* Nur am Bildschirm: Beim Drucken lässt der Browser Hintergründe weg — helle Schrift
   stünde sonst auf weißem Papier. */
@media screen {
:root[data-design="glas"][data-modus="dunkel"] {
    --gefahr:          #ff9b9b;
    --gefahr-voll:     #c9303a;
    --gefahr-flaeche:  #4a1a24;
    --gefahr-linie:    #8a3340;

    --achtung:         #ffc078;
    --achtung-voll:    #b45309;
    --achtung-flaeche: #46290f;
    --achtung-linie:   #8a5a26;

    --info:            #86d5f2;
    --info-voll:       #127aa0;
    --info-flaeche:    #0f3549;
    --info-linie:      #2c6f8c;

    --gut:             #7ff0b8;
    --gut-voll:        #15844f;
    --gut-flaeche:     #123a2a;
    --gut-linie:       #1f6a48;

    --lila:            #b8a9ff;
    --lila-flaeche:    #2d2568;
    --lila-linie:      #4b3fa0;

    --akzent-voll:     #d6316d;
    --vergeben:        #6a6494;
    --gegen:           #2a2660;
    --gegen-schrift:   #ffffff;
    --erhaben:         rgba(255, 255, 255, 0.16);
    --mulde:           rgba(0, 0, 0, 0.26);
    --feld:            #0d0e2a;
    --schleier:        rgba(3, 4, 18, 0.62);
    --danger:          #ff7aa8;
}
}
@media screen and (prefers-color-scheme: dark) {
    :root[data-design="glas"][data-modus="auto"] {
        --gefahr:          #ff9b9b;
        --gefahr-voll:     #c9303a;
        --gefahr-flaeche:  #4a1a24;
        --gefahr-linie:    #8a3340;

        --achtung:         #ffc078;
        --achtung-voll:    #b45309;
        --achtung-flaeche: #46290f;
        --achtung-linie:   #8a5a26;

        --info:            #86d5f2;
        --info-voll:       #127aa0;
        --info-flaeche:    #0f3549;
        --info-linie:      #2c6f8c;

        --gut:             #7ff0b8;
        --gut-voll:        #15844f;
        --gut-flaeche:     #123a2a;
        --gut-linie:       #1f6a48;

        --lila:            #b8a9ff;
        --lila-flaeche:    #2d2568;
        --lila-linie:      #4b3fa0;

        --akzent-voll:     #d6316d;
        --vergeben:        #6a6494;
        --gegen:           #2a2660;
        --gegen-schrift:   #ffffff;
        --erhaben:         rgba(255, 255, 255, 0.16);
        --mulde:           rgba(0, 0, 0, 0.26);
        --feld:            #0d0e2a;
        --schleier:        rgba(3, 4, 18, 0.62);
        --danger:          #ff7aa8;
    }
}

/* Das Logo (schwarzes PNG) kehrt 10-anmeldung.css im Dunkeln um — für Kopfzeile und
   Anmeldeseiten an EINER Stelle. */

/* ============================================================================
   Felder
   ============================================================================ */
/* Felder sind DECKEND (--feld) mit sichtbarer Kante — auf Glas und auf dem bloßen
   Verlauf. Die Grundvorlage machte sie beim Hineintippen WEISS; im Dunkeln stünde dann
   helle Schrift auf Weiß. :not() statt einer Typ-Liste: Ankreuzfelder bleiben, wie sie sind. */
html[data-design="glas"] .field input:not([type="checkbox"]):not([type="radio"]),
html[data-design="glas"] .field select,
html[data-design="glas"] .field textarea,
html[data-design="glas"] select.kollin-select { background-color: var(--feld); border-color: var(--line-2); }
html[data-design="glas"] .field input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-design="glas"] .field select:focus,
html[data-design="glas"] .field textarea:focus,
html[data-design="glas"] select.kollin-select:focus { background-color: var(--feld); border-color: var(--accent); }
html[data-design="glas"] .radio-group label:hover,
html[data-design="glas"] .check-cards label:hover { background: var(--surface); }
/* Angekreuzt: der satte Akzent — Weiß auf dem hellen Akzent des Dunkelmodus steht
   bei 3,8:1. Nach der Regel fürs Überfahren, damit die gewählte Karte ihre Farbe behält. */
html[data-design="glas"] .radio-group label:has(input:checked),
html[data-design="glas"] .check-cards label:has(input:checked) { background: var(--akzent-voll); border-color: var(--akzent-voll); color: #fff; }
html[data-design="glas"] .chan-card.is-on .chan-ico,
html[data-design="glas"] .chan-card:has(input[type="checkbox"]:checked) .chan-ico { background: var(--surface); }

/* ============================================================================
   Knöpfe
   ============================================================================ */
/* Der schlichte Knopf ist Tinte auf Papier — beim Überfahren blieb er in der
   Grundvorlage dunkelbraun mit weißer Schrift. :where() hält die Regel schwächer
   als die Varianten (primär, sekundär) aus 00-grund.css. */
html[data-design="glas"] :where(.btn):hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
html[data-design="glas"] .btn-ok,
html[data-design="glas"] .btn-ok:hover { background: var(--gut-voll); border-color: var(--gut-voll); color: #fff; }
html[data-design="glas"] .btn-danger,
html[data-design="glas"] .btn-danger:hover,
html[data-design="glas"] .btn-destroy:hover { background: var(--gefahr-voll); border-color: var(--gefahr-voll); color: #fff; }
html[data-design="glas"] .btn-ok:hover,
html[data-design="glas"] .btn-danger:hover { filter: brightness(1.1); }
html[data-design="glas"] .btn-danger-quiet,
html[data-design="glas"] .btn-destroy { border-color: var(--gefahr-linie); color: var(--gefahr); --kontrast-ok: 1; }
html[data-design="glas"] .btn-danger-quiet:hover { background: var(--gefahr-flaeche); border-color: var(--gefahr); color: var(--gefahr); }

/* ============================================================================
   Tinte als Fläche: die Schrift darauf ist die FLÄCHE, nicht Weiß
   ----------------------------------------------------------------------------
   `background: var(--ink); color: #fff` ist im Dunkeln Weiß auf Weiß.
   ============================================================================ */
html[data-design="glas"] .weeknav .wn-group a.active,
html[data-design="glas"] .pager a.active,
html[data-design="glas"] .pager a.active:hover,
html[data-design="glas"] .ppicker-item.active,
html[data-design="glas"] .filter-chip { color: var(--surface); }
html[data-design="glas"] .filter-chip:hover { color: #fff; --kontrast-ok: 1; }

/* Akzent-2 ist im Dunkeln eine SCHRIFTfarbe (hell). Wo er Fläche unter weißer
   Schrift ist, steht der satte Akzent. */
html[data-design="glas"] .hub-badge,
html[data-design="glas"] .mt-neu,
html[data-design="glas"] .notif-badge,
html[data-design="glas"] .notif-item-badge,
html[data-design="glas"] .subtab-badge { background: var(--akzent-voll); color: #fff; }

/* ============================================================================
   Hinweise und Abzeichen
   ============================================================================ */
html[data-design="glas"] .alert-danger { background: var(--gefahr-flaeche); border-color: var(--gefahr-linie); color: var(--gefahr); }
html[data-design="glas"] .next-due-banner:hover { background: var(--accent-soft); }

/* Erst die neutrale Fläche, dann die Bedeutungen — ein Abzeichen trägt beide Klassen. */
html[data-design="glas"] .pchip-rejected,
html[data-design="glas"] .pchip-cancelled,
html[data-design="glas"] .linse-leer,
html[data-design="glas"] .fit-badge { background: var(--paper-2); }
html[data-design="glas"] .pchip-available,
html[data-design="glas"] .fit-badge-keine,
html[data-design="glas"] .linse-gemeldet,
html[data-design="glas"] .miniwoche .mw-frei { background: var(--info-flaeche); color: var(--info); }
html[data-design="glas"] .pchip-accepted,
html[data-design="glas"] .fit-badge-ganz,
html[data-design="glas"] .miniwoche .mw-ok,
html[data-design="glas"] .chan-pill.is-on,
html[data-design="glas"] .chan-chip.chan-on { background: var(--gut-flaeche); color: var(--gut); }
html[data-design="glas"] .chan-chip.chan-on { border-color: var(--gut-linie); }
html[data-design="glas"] .pchip-auto { background: var(--lila-flaeche); color: var(--lila); }
html[data-design="glas"] .pchip-conflict,
html[data-design="glas"] .linse-konflikt,
html[data-design="glas"] .miniwoche .mw-doppelt,
html[data-design="glas"] .blatt-warnung,
html[data-design="glas"] .blatt-fehler { background: var(--gefahr-flaeche); color: var(--gefahr); }
html[data-design="glas"] .pchip-conflict { border-color: var(--gefahr-linie); }
html[data-design="glas"] .fit-badge-teil { background: var(--achtung-flaeche); color: var(--achtung); }

/* Nur die Schrift trägt die Bedeutung. */
html[data-design="glas"] .pk-menue .ist-gefahr,
html[data-design="glas"] .pk-rund.ist-gefahr,
html[data-design="glas"] .pcard-hours.over,
html[data-design="glas"] .push-why li.is-bad::before { color: var(--gefahr); --kontrast-ok: 1; }
html[data-design="glas"] .pk-menue .ist-gefahr:hover { background: var(--gefahr-flaeche); color: var(--gefahr); }
html[data-design="glas"] .pk-rund.ist-gefahr { border-color: var(--gefahr-linie); }
html[data-design="glas"] .pk-rund.ist-gefahr:hover { background: var(--gefahr-voll); border-color: var(--gefahr-voll); color: #fff; }
html[data-design="glas"] .chan-warn.is-ok,
html[data-design="glas"] .push-why li.is-ok::before { color: var(--gut); --kontrast-ok: 1; }
html[data-design="glas"] .blatt-gut,
html[data-design="glas"] .person-list .pl-note,
html[data-design="glas"] .d-anfrage.is-proposal .d-anfrage-kopf .label-ico { color: var(--info); --kontrast-ok: 1; }
html[data-design="glas"] .blatt-achtung,
html[data-design="glas"] .ziel-text .ziel-grund,
html[data-design="glas"] .pk-papierkorb,
html[data-design="glas"] .pk-hinweis { color: var(--achtung); --kontrast-ok: 1; }
html[data-design="glas"] .person-note { background: var(--info-flaeche); border-color: var(--info-linie); }
html[data-design="glas"] .push-prompt-x:hover { background: var(--paper-2); }

/* ============================================================================
   Blatt, Meldung, Menüs — was über dem Inhalt liegt
   ============================================================================ */
html[data-design="glas"] .blatt-hinter { background: var(--schleier); }
html[data-design="glas"] .blatt-ok { background: var(--gut-flaeche); }
html[data-design="glas"] .blatt-ok-zeichen { background: var(--gut-voll); color: #fff; }
html[data-design="glas"] .tagwahl > button.is-frei { background: var(--info-flaeche); border-color: var(--info-linie); }
html[data-design="glas"] .tagwahl > button.is-frei small { color: var(--info); }
/* Die gedrückte Kachel ist Tinte, ihre Schrift die Fläche — nach „frei", damit sie gewinnt. */
html[data-design="glas"] .tagwahl > button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
html[data-design="glas"] .tagwahl > button[aria-pressed="true"] b,
html[data-design="glas"] .tagwahl > button[aria-pressed="true"] small { color: var(--surface); }
html[data-design="glas"] .ziel.ist-frage,
html[data-design="glas"] .ziel.ist-teil { border-color: var(--achtung-linie); }
/* Schalter: die Spur ohne Haken war ein festes Beige. */
html[data-design="glas"] .kschalter-spur { background: var(--line-2); }
html[data-design="glas"] .kschalter[aria-checked="true"] .kschalter-spur { background: var(--gut-voll); }

/* Meldung mit „Rückgängig": dunkel in beiden Modi, der Knopf darin hell. */
html[data-design="glas"] .kmeldung { background: var(--gegen); color: var(--gegen-schrift); }
html[data-design="glas"] .kmeldung-ok { background: var(--gut-voll); color: #fff; }
html[data-design="glas"] .kmeldung-frage { background: var(--info-voll); color: #fff; }
html[data-design="glas"] .kmeldung-fehler { background: var(--gefahr-flaeche); color: var(--gefahr); box-shadow: inset 0 0 0 1px var(--gefahr-linie), var(--shadow-lg); }
html[data-design="glas"] .kmeldung button { background: var(--gegen-schrift); color: var(--gegen); }

/* Anfrage-Karten (Banner, Mitteilungen). */
html[data-design="glas"] .d-anfrage { background: var(--accent-paper); border-color: var(--accent-soft); }
html[data-design="glas"] .d-anfrage.is-proposal { background: var(--info-flaeche); border-color: var(--info-linie); }

/* ============================================================================
   Kleine Fenster aus den <style>-Blöcken geteilter Bausteine
   ============================================================================ */
html[data-design="glas"] .toast { background: var(--surface); }
html[data-design="glas"] .shiftctx-menu button.danger:hover { background: var(--gefahr-flaeche); color: var(--gefahr); }
html[data-design="glas"] .ai-msg-error { background: var(--gefahr-flaeche); border-color: var(--gefahr-linie); color: var(--gefahr); }
html[data-design="glas"] .mt-eintrag.ist-neu { background: var(--accent-paper); border-color: var(--accent-soft); }
html[data-design="glas"] .erp-badge-off,
html[data-design="glas"] .erp-row-noemail { color: var(--achtung); --kontrast-ok: 1; }
/* Tafel: der Annahme-Streifen ist lila. */
html[data-design="glas"] .board-strip.board-annahme { border-color: var(--lila-linie); }
html[data-design="glas"] .board-annahme .board-strip-head,
html[data-design="glas"] .board-annahme .pool-person { background: var(--lila-flaeche); border-color: var(--lila-linie); }
html[data-design="glas"] .annahme-person .ap-tm { color: var(--lila); --kontrast-ok: 1; }
/* Meldung der Tafel und der Annahme: dunkel in beiden Modi, wie .kmeldung. */
html[data-design="glas"] #board-toast,
html[data-design="glas"] #annahme-toast { background: var(--gegen); color: var(--gegen-schrift); }
html[data-design="glas"] #board-toast.err,
html[data-design="glas"] #annahme-toast.err { background: var(--gefahr-voll); color: #fff; }

/* ============================================================================
   Feste Farben in style="…" von Bausteinen, die diese Datei nicht ändern darf
   ----------------------------------------------------------------------------
   (includes/_wartung.php, includes/_pool.php, produktion/cloud-restore.php.)
   Gegen ein style-Attribut hilft nur der Vorrang-Zusatz. Es sind bewusst wenige
   Regeln: die hellen Kästen — sonst steht helle Schrift auf hellem Grund — und
   das Rot, das auf dunklem Grund nicht zu lesen ist.
   ============================================================================ */
html[data-design="glas"] [style*="background:#fdecec"] { background: var(--gefahr-flaeche) !important; }
html[data-design="glas"] [style*="background:#fff7ed"] { background: var(--achtung-flaeche) !important; border-color: var(--achtung-linie) !important; }
html[data-design="glas"] [style*="color:#b91c1c"] { color: var(--gefahr) !important; }
/* Legende im Pool: das Kästchen „woanders vergeben". */
html[data-design="glas"] .pool-legend .sw[style*="#3a352b"] { background: var(--vergeben) !important; }

/* ============================================================================
   Pool: gewählte Karte und „in diesem Projekt"
   ============================================================================ */
/* Weiß auf --accent stand im Dunkeln bei 3,8:1 (Name, Zeiten) und 3,0 (Tages-Kästchen).
   Der volle Akzent trägt Weiß in beiden Modi mit mindestens 4,6:1. */
html[data-design="glas"] .pcard.tap-selected { background: var(--akzent-voll); border-color: var(--akzent-voll); border-left-color: var(--akzent-voll); }
html[data-design="glas"] .pday.is-own { background: var(--akzent-voll); }
html[data-design="glas"] .pcard.tap-selected .pday { background: rgba(255, 255, 255, 0.12); }
html[data-design="glas"] .pcard.tap-selected .pday.is-free { background: #fff; }
html[data-design="glas"] .pcard.tap-selected .pday.is-own { background: #fff; color: var(--akzent-voll); }
html[data-design="glas"] .pcard.tap-selected .pcard-kreis { background: #fff; color: var(--akzent-voll); }