/* =============================================================================
 * okto-popup.css — EINE GESTALT FÜR ALLE POPUPS (07.10.2026)
 * =============================================================================
 *
 * WOZU DIESE DATEI DA IST
 *
 * Gemeldet wurde: „die popups und auswahl dinger sind nicht im oktowise stil."
 * Das Nachzählen gab der Rückmeldung recht — es gab gar KEINEN OktoWise-Stil
 * für Popups, sondern vier Rezepte, die unabhängig voneinander entstanden sind:
 *
 *   .modal (glass-theme.css)   linear-gradient(145deg, #2a2a35, #1f1f2a)  r24
 *   .modal-content (chat.css)  dieselbe Zeile, abgeschrieben              r24
 *   .modal (calendar)          linear-gradient(145deg, #1e293b, #0f172a)  r20
 *   .ow-dlg (oktowise-ux.js)   linear-gradient(160deg, #1e293b, #0f172a)  r22
 *   .okto-auswahl              linear-gradient(145deg, #1e293b, #0f172a)  r22
 *   .oks-box / .rub-box        var(--glass-bg)                            r18
 *
 * Dazu fünf verschiedene Schleierfarben (0,6 bis 0,8 schwarz) und vier
 * Weichzeichner (3 bis 8 px). Jede Fassung für sich sah vernünftig aus; nur
 * eben jede anders als die anderen.
 *
 * UND ALLE WAREN GRAU. Die Plattform steht auf einem BLAUEN Verlauf
 * (#1e3c72 → #2a5298 → #1a2a6c, siehe glass-theme.css). Ein neutralgraues,
 * undurchsichtiges Fenster darüber wirkt wie aus einem anderen Programm —
 * genau das, was als „nicht im OktoWise-Stil" beschrieben wurde. Die Datei
 * heißt nicht umsonst glass-theme: Der Stil des Hauses ist durchscheinend und
 * nimmt die Farbe dessen auf, worüber er liegt.
 *
 * WIE ES JETZT GEHT
 *
 * Hier stehen die Werte EINMAL, und alle Popups holen sie sich von hier. Wer
 * die Gestaltung ändern will, ändert den Block `:root` unten — nicht sieben
 * Dateien. Die Popups selbst behalten, was wirklich ihnen gehört: Maße,
 * Aufteilung, Verhalten.
 *
 * WARUM EINE EIGENE DATEI UND NICHT IN glass-theme.css: glass-theme wird mit
 * `'glass' => false` abgeschaltet (Chat, Quiz, Eltern-Portal, Bewertung) —
 * Seiten mit eigener Gestaltung. Popups gibt es dort trotzdem, und gerade die
 * sollen überall gleich aussehen. Diese Datei bindet page_shell.php deshalb
 * OHNE Schalter ein, so wie okto-motion.css.
 *
 * WARUM KEIN !important: Die doppelten Angaben sind an ihren Quellen entfernt
 * worden, statt sie hier zu überschreiben. Eine Regel, die eine andere
 * niederringt, ist keine gemeinsame Gestalt — sie ist eine fünfte Fassung.
 * ============================================================================= */

:root {
    /* Der Schleier hinter dem Fenster — wie bisher auf den meisten Seiten. */
    --okto-pop-schleier: rgba(0, 0, 0, 0.78);
    --okto-pop-weich:    8px;

    /* DIE FLÄCHE DES FENSTERS — DAS GRAU, DAS ES VORHER GAB.
     *
     * Ein erster Versuch ersetzte es durch blaues, durchscheinendes Glas, weil
     * die Plattform auf einem blauen Verlauf steht. Zwei Gründe sprechen
     * dagegen, und beide sind im Betrieb aufgefallen:
     *
     *   1. Es war nicht gewünscht („ich würde doch lieber das grau
     *      bevorzugen, welches vorher war").
     *   2. Durchscheinend zeigt, was dahinter passiert. Und dahinter scrollte
     *      die Seite weiter (siehe Abschnitt 0 unten) — der Hintergrund
     *      wanderte sichtbar unter dem Fenster durch.
     *
     * Dieser Verlauf ist der, den sieben der zehn Seiten ohnehin schon
     * benutzten; er war also die stillschweigende Hausfarbe, nur eben nirgends
     * aufgeschrieben. Jetzt steht er hier, einmal.
     *
     * UNDURCHSICHTIG, MIT ABSICHT: Ein Fenster, durch das man die Seite
     * arbeiten sieht, lenkt vom Fenster ab. Deshalb trägt der Kasten auch
     * keinen Weichzeichner — der kostet auf Schul-Handys Bilder pro Sekunde
     * für etwas, das man ohnehin nicht sieht. */
    --okto-pop-flaeche:  linear-gradient(145deg, #1e293b, #0f172a);

    /* Rand und Lichtkante. Die hellere Oberkante lässt das Fenster leicht
       gewölbt wirken — derselbe Kniff wie bisher bei .ow-dlg, nur jetzt überall. */
    --okto-pop-rand:     rgba(255, 255, 255, 0.12);
    --okto-pop-glanz:    rgba(255, 255, 255, 0.22);

    --okto-pop-radius:   22px;
    --okto-pop-schatten: 0 30px 70px -20px rgba(0, 0, 0, 0.75);

    /* Innere Gliederung: Kopfleiste, Trennlinien. */
    --okto-pop-kopf:     rgba(0, 0, 0, 0.26);
    --okto-pop-trenner:  rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------------
 * 0. DIE SEITE STEHT STILL, SOLANGE EIN FENSTER OFFEN IST
 *
 * GEMELDET (07.10.2026): „beim kalender bewegt sich bei dem popup dann der
 * hintergrund" — und ebenso im Lernkarten-Bereich beim Wischen.
 *
 * URSACHE, UND SIE IST ÄLTER ALS DIE FENSTER: Mehrere Seiten sperren das
 * Scrollen mit `body.modal-open { overflow: hidden }`. Das wirkt aber nur,
 * solange am <html>-Element KEIN eigenes overflow steht — sonst wandert die
 * Angabe vom body nicht mehr auf das Fenster. glass-theme.css setzt
 * `html { overflow-x: hidden }` (gegen seitlichen Überlauf). Seitdem war jede
 * dieser Sperren wirkungslos: Hinter jedem offenen Dialog scrollte die Seite
 * weiter, man verlor seine Stelle, und auf dem Handy nahm die Wischgeste am
 * Dialogrand die Seite mit.
 *
 * Gesehen hat es niemand, solange die Fenster undurchsichtig und der Schleier
 * fast schwarz waren. Es war trotzdem die ganze Zeit falsch.
 *
 * JETZT: Die Sperre greift am <html>-Element, und zwar für jedes Fenster —
 * auch für die, die gar keine Klasse am body setzen (Auswahllisten,
 * Datumsblatt, OW.dialog). Kein Aufruf im Seitencode nötig: Der Zustand steht
 * ohnehin schon im Dokument, man muss ihn nur lesen.
 * ------------------------------------------------------------------------- */
html:has(> body.modal-open),
html:has(.modal-overlay.active),
html:has(.ow-dlg-ov.show),
html:has(.oks-ov.show),
html:has(.rub-ov.show),
html:has(.okto-auswahl-ov),
html:has(.okto-datum-ov) {
    overflow: hidden;
}
/* Rückfall für Browser ohne :has() — die alte Zeile wirkt dort wie bisher. */
body.modal-open { overflow: hidden; }

/* Und die scrollbaren Teile IM Fenster geben ihr Scrollen nicht nach außen
   weiter: Am unteren Ende einer langen Liste zöge sonst die Seite dahinter
   mit — dieselbe wandernde Bewegung, nur von innen ausgelöst. */
.m-body, .modal-body, .oks-liste, .rub-koerper,
.okto-auswahl-liste, .okto-datum-koerper {
    overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
 * 1. DER SCHLEIER
 *
 * `.modal` steht hier ABSICHTLICH NICHT: Die Klasse heißt im Projekt
 * zweierlei — in glass-theme.css der Kasten innerhalb von .modal-overlay, im
 * Chat die ganzflächige Überlagerung. Der Chat-Schleier wird deshalb unten
 * über das Paar `.modal:has(> .modal-content)` angesprochen, nicht über
 * `.modal` allein. Dieselbe Vorsicht wie in okto_sheets.js und okto-motion.css.
 * ------------------------------------------------------------------------- */
.modal-overlay,
.ow-dlg-ov,
.oks-ov,
.rub-ov,
.okto-auswahl-ov,
.okto-datum-ov {
    background: var(--okto-pop-schleier);
    -webkit-backdrop-filter: blur(var(--okto-pop-weich));
    backdrop-filter: blur(var(--okto-pop-weich));
}

/* :has() in einer EIGENEN Regel: Kennt ein Browser den Selektor nicht,
   verwirft er die ganze Regel, in der er steht — die sechs oben hätten dann
   ebenfalls nichts abbekommen. */
.modal:has(> .modal-content) {
    background: var(--okto-pop-schleier);
    -webkit-backdrop-filter: blur(var(--okto-pop-weich));
    backdrop-filter: blur(var(--okto-pop-weich));
}

/* ---------------------------------------------------------------------------
 * 2. DAS FENSTER
 * ------------------------------------------------------------------------- */
.modal-overlay > .modal,
.modal > .modal-content,
.ow-dlg-ov > .ow-dlg,
.oks-ov > .oks-box,
.rub-ov > .rub-box,
.okto-auswahl-ov > .okto-auswahl,
.okto-datum-ov > .okto-datum {
    background: var(--okto-pop-flaeche);
    border: 1px solid var(--okto-pop-rand);
    border-top-color: var(--okto-pop-glanz);
    border-radius: var(--okto-pop-radius);
    box-shadow: var(--okto-pop-schatten);
    color: #fff;
}

/* Die Kopfleisten der beiden Markup-Dialogsysteme. Sie trugen bisher
   `rgba(0,0,0,0.3)` — ein schwarzer Balken auf blauem Glas sieht aus wie ein
   Loch.
   OHNE `>`-Kette: Die Kopfleiste liegt nicht überall direkt im Kasten (manche
   Dialoge haben einen Rahmen dazwischen), und beide Klassennamen gibt es im
   Projekt ausschließlich in Dialogen. */
.m-header,
.modal-header {
    background: var(--okto-pop-kopf);
    border-bottom: 1px solid var(--okto-pop-trenner);
}

/* ---------------------------------------------------------------------------
 * 3. ALS BLATT VON UNTEN (Handy und Tablet)
 *
 * okto-motion.css macht aus jedem Fenster auf schmalen Geräten ein Blatt, das
 * von unten einfährt. Dann sitzt es am unteren Rand auf: unten keine Rundung,
 * keine Lichtkante, und der Rand unten weg. Ohne diese drei Zeilen schwebt
 * eine dünne Linie unter dem Blatt, und die Ecken sehen abgeschnitten aus.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
    .modal-overlay > .modal,
    .modal > .modal-content,
    .oks-ov > .oks-box,
    .rub-ov > .rub-box,
    .okto-auswahl-ov > .okto-auswahl,
    .okto-datum-ov > .okto-datum {
        border-bottom: none;
        border-left: none;
        border-right: none;
    }
    /* Die Rundung setzt okto-motion.css für die Dialoge, die dort zu Blättern
       werden — mit !important, also kann sie hier nicht noch einmal stehen,
       ohne dass eine der beiden Zeilen wirkungslos wäre. Die beiden Blätter,
       die okto-motion nicht kennt, bekommen sie hier. */
    .okto-auswahl-ov > .okto-auswahl,
    .okto-datum-ov > .okto-datum {
        border-radius: var(--okto-pop-radius) var(--okto-pop-radius) 0 0;
    }
}

/* ---------------------------------------------------------------------------
 * 4. DAS DATUMSBLATT (assets/js/okto_datum.js)
 *
 * Aufbau wie bei den Auswahllisten: Griff, Überschrift, Inhalt, Fußleiste.
 * Die Farben kommen aus demselben Satz oben — ein Kalender, der anders
 * aussieht als die Auswahlliste daneben, wäre genau der Fehler, den diese
 * Datei beheben soll.
 * ------------------------------------------------------------------------- */
.okto-datum-ov {
    position: fixed; inset: 0; z-index: 14500;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}
.okto-datum-ov.show { opacity: 1; }

.okto-datum {
    width: 100%; max-width: 420px;
    max-height: 88vh;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.okto-datum-ov.show .okto-datum { transform: translateY(0); }

/* Griff — zeigt, dass sich das Blatt nach unten wegwischen lässt. */
.okto-datum::before {
    content: ''; display: block; flex-shrink: 0;
    width: 44px; height: 5px; border-radius: 99px;
    background: rgba(255, 255, 255, 0.22);
    margin: 10px auto 4px;
}

.okto-datum-titel {
    padding: 10px 22px 12px;
    font-size: 16px; font-weight: 800;
    border-bottom: 1px solid var(--okto-pop-trenner);
}

.okto-datum-koerper { overflow-y: auto; padding: 6px 14px 2px; }

/* --- Monatszeile --- */
.okto-datum-monat {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 2px 6px;
}
.okto-datum-monat > button {
    width: 40px; height: 40px; flex-shrink: 0;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, transform .15s ease;
}
.okto-datum-monat > button:active { transform: scale(0.92); }
.okto-datum-monat > button:disabled { opacity: .3; cursor: default; }
.okto-datum-wahl {
    flex: 1; min-width: 0;
    background: none; border: none;
    color: #fff; font: inherit; font-size: 16px; font-weight: 800;
    padding: 10px 8px; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.okto-datum-wahl:active { background: rgba(255, 255, 255, 0.07); }
.okto-datum-wahl > i { font-size: 12px; opacity: .6; transition: transform .2s ease; }
.okto-datum-wahl.offen > i { transform: rotate(180deg); }

/* --- Wochentage und Tage --- */
.okto-datum-wochentage,
.okto-datum-tage {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.okto-datum-wochentage > span {
    text-align: center; padding: 6px 0;
    font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
    color: #8da2c0; text-transform: uppercase;
}
.okto-datum-tag {
    aspect-ratio: 1 / 1;
    min-height: 40px;
    border: none; background: none; border-radius: 13px;
    color: #e7eef9; font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .12s ease;
}
.okto-datum-tag:active { transform: scale(0.9); }
.okto-datum-tag.fremd  { color: rgba(220, 232, 248, 0.26); font-weight: 500; }
.okto-datum-tag:disabled { color: rgba(220, 232, 248, 0.18); cursor: default; }
.okto-datum-tag:disabled:active { transform: none; }

/* Heute: ein Punkt, kein Rahmen — der Rahmen wäre mit der Auswahl zu
   verwechseln, und beides zugleich kommt oft vor. */
.okto-datum-tag.heute::after {
    content: ''; position: absolute; bottom: 6px;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--primary-color, #4CAF50);
}
.okto-datum-tag.gewaehlt {
    background: var(--primary-color, #4CAF50);
    color: #fff; font-weight: 800;
    box-shadow: 0 6px 16px -4px rgba(76, 175, 80, 0.7);
}
.okto-datum-tag.gewaehlt.heute::after { background: #fff; }

/* --- Monats-/Jahresraster (nach Tippen auf die Überschrift) --- */
.okto-datum-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 0 10px; }
.okto-datum-raster > button {
    padding: 14px 6px;
    border: 1px solid transparent; border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: #e7eef9; font: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer;
}
.okto-datum-raster > button.gewaehlt {
    background: var(--primary-color, #4CAF50); color: #fff; font-weight: 800;
}
.okto-datum-raster > button:disabled { opacity: .3; cursor: default; }

/* --- Uhrzeit --- */
.okto-datum-zeit {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--okto-pop-trenner);
    margin-top: 8px;
}
.okto-datum-zeit.allein { border-top: none; margin-top: 0; padding-top: 4px; }
.okto-datum-rolle { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.okto-datum-rolle > button {
    width: 46px; height: 32px; border: none; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06); color: #cbd5e1;
    font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.okto-datum-rolle > button:active { background: rgba(255, 255, 255, 0.14); }
.okto-datum-rolle > input {
    width: 70px; padding: 10px 0;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid var(--okto-pop-trenner);
    border-radius: 12px;
    color: #fff; font: inherit; font-size: 26px; font-weight: 800;
    text-align: center; outline: none;
    -moz-appearance: textfield;
}
.okto-datum-rolle > input::-webkit-outer-spin-button,
.okto-datum-rolle > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.okto-datum-rolle > input:focus { border-color: var(--primary-color, #4CAF50); }
.okto-datum-doppelpunkt { font-size: 24px; font-weight: 800; color: #8da2c0; padding-bottom: 2px; }

/* --- Fußleiste --- */
.okto-datum-fuss {
    display: flex; gap: 10px; padding: 10px 14px 14px;
    border-top: 1px solid var(--okto-pop-trenner);
}
.okto-datum-fuss > button {
    flex: 1; padding: 14px 8px;
    border-radius: 14px; border: 1px solid transparent;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.okto-datum-neben {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--okto-pop-trenner) !important;
    color: #cbd5e1;
}
.okto-datum-neben:active { background: rgba(255, 255, 255, 0.11); }
.okto-datum-haupt {
    background: var(--primary-gradient, linear-gradient(135deg, #4CAF50, #2E7D32));
    color: #fff; font-weight: 800 !important;
    box-shadow: 0 8px 20px -6px rgba(76, 175, 80, 0.6);
}
.okto-datum-haupt:active { transform: scale(0.97); }

/* ---------------------------------------------------------------------------
 * 5. DAS FELD SELBST
 *
 * Ein <input type="date"> zeigt am rechten Rand ein Kalendersymbol des
 * Browsers — unter Windows blaugrau, unter Android gar nicht. Das Symbol ist
 * nützlich (es sagt, dass hier ein Datum hingehört), nur hatte es die Farbe
 * eines fremden Programms. `filter: invert(1)` färbt es weiß, ohne es zu
 * ersetzen; mehr braucht es nicht, und es bleibt für Vorlesehilfen, was es ist.
 * ------------------------------------------------------------------------- */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.55);
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(1) opacity(0.9);
}

/* Bewegung aus: Das Blatt erscheint sofort statt einzufahren. */
@media (prefers-reduced-motion: reduce) {
    .okto-datum-ov, .okto-datum { transition: none; }
    .okto-datum { transform: none; }
}

/* Am Rechner mittig statt am unteren Rand — dort gibt es keine Wischgeste und
   keinen Daumen, der unten hinkommt. */
@media (min-width: 1025px) and (pointer: fine) {
    .okto-datum-ov { align-items: center; }
    .okto-datum { max-width: 380px; border-radius: var(--okto-pop-radius); transform: scale(.95); }
    .okto-datum-ov.show .okto-datum { transform: none; }
    .okto-datum::before { display: none; }
}