/* ============================================================================
   DESIGN „GLAS" — die übrigen Seiten (TASK-014)
   ----------------------------------------------------------------------------
   Aushilfen-Liste und Personenseite, Auswertung, Versand, Sammelversand, Verlauf,
   Offene Punkte, Annahme, Tafel, Kalender, Einstellungen, Profil, Mitteilungen —
   und die Bausteine, die sie teilen: Reiter, Tabellenzeilen, runde Knöpfe,
   Suchfelder, das Blatt des Zeilen-Menüs, die Suche, die Meldung.

   Eine Sprache für alle:
     Karte / Zeile        Milchglas (--glas) mit heller Kante — ohne Weichzeichner
     Mulde (Reiter)       --paper-2, der aktive Reiter liegt ERHABEN obenauf
     runder Knopf, Feld   --glas-stark mit Kante
     Fenster am <body>    --glas-stark MIT Weichzeichner (Blatt, Suche)
   Farben mit Bedeutung (--gefahr, --erhaben, --schleier …): 90-dunkel.css.
   ============================================================================ */

/* --- Fuß: die Schiene steht fest am linken Rand, der Fuß liegt außerhalb des
       Seitenrahmens und begann darunter. ------------------------------------- */
@media (min-width: 1081px) {
    html[data-design="glas"] .app-footer { margin-left: 116px; }
}

/* ============================================================================
   Reiter und Umschalter
   ============================================================================ */
html[data-design="glas"] .subnav,
html[data-design="glas"] .subtabs,
html[data-design="glas"] .view-switcher,
html[data-design="glas"] .pk-reiter,
html[data-design="glas"] .vl-arten,
html[data-design="glas"] .mt-filter { border-color: transparent; background: var(--paper-2); }
html[data-design="glas"] .subnav a.active,
html[data-design="glas"] .subtabs a.active,
html[data-design="glas"] .view-switcher a.active,
html[data-design="glas"] .subnav a[aria-current="page"],
html[data-design="glas"] .subtabs a[aria-current="page"],
html[data-design="glas"] .pk-reiter a[aria-current="page"],
html[data-design="glas"] .vl-arten a.active,
html[data-design="glas"] .mt-filter a[aria-current="page"] { background: var(--erhaben); color: var(--ink); box-shadow: var(--shadow); }

/* ============================================================================
   Runde Knöpfe und Blättern
   ============================================================================ */
html[data-design="glas"] .weeknav .wn-group a,
html[data-design="glas"] .weeknav .wn-group button,
html[data-design="glas"] .pk-wochen-nav a,
html[data-design="glas"] .nav-btn,
html[data-design="glas"] .pager a,
html[data-design="glas"] .zm-knopf { border-color: var(--glas-kante); background: var(--glas-stark); }
html[data-design="glas"] .weeknav .wn-group a:hover,
html[data-design="glas"] .weeknav .wn-group button:hover,
html[data-design="glas"] .pk-wochen-nav a:hover,
html[data-design="glas"] .nav-btn:hover,
html[data-design="glas"] .zm-knopf:hover { border-color: var(--line-2); background: var(--surface); color: var(--ink); }
/* „Diese Woche" / die aktive Seite: Tinte — nach der Glas-Regel, damit sie gewinnt. */
html[data-design="glas"] .weeknav .wn-group a.active,
html[data-design="glas"] .pager a.active,
html[data-design="glas"] .pager a.active:hover { border-color: var(--ink); background: var(--ink); }

/* ============================================================================
   Suchfelder und Auswahlen außerhalb von Formularen
   ============================================================================ */
html[data-design="glas"] .toolbar-row .pool-search,
html[data-design="glas"] .pk-suche input,
html[data-design="glas"] .vl-suche,
html[data-design="glas"] .erp-search-input,
html[data-design="glas"] .leader-filter select,
html[data-design="glas"] .year-filter select { border-color: var(--line-2); background-color: var(--glas-stark); }
html[data-design="glas"] .toolbar-row .pool-search:focus,
html[data-design="glas"] .pk-suche input:focus,
html[data-design="glas"] .vl-suche:focus { border-color: var(--accent); background-color: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* ============================================================================
   Tabellen: jede Zeile eine Glas-Karte
   ============================================================================ */
html[data-design="glas"] .data-table td,
html[data-design="glas"] .data-table tbody tr:last-child td { background: var(--glas); border-color: var(--glas-kante); }
html[data-design="glas"] .data-table tbody tr:hover td { background: var(--glas-stark); border-color: var(--line-2); }
html[data-design="glas"] .data-table td:first-child { border-radius: 20px 0 0 20px; }
html[data-design="glas"] .data-table td:last-child { border-radius: 0 20px 20px 0; }
html[data-design="glas"] .data-table td:only-child { border-radius: 20px; }

/* ============================================================================
   Karten, die 00-grund.css noch nicht kennt
   ============================================================================ */
html[data-design="glas"] .ov-projects,
html[data-design="glas"] .gantt,
html[data-design="glas"] .mcal-mini,
html[data-design="glas"] .erp-card,
html[data-design="glas"] .board-pool,
html[data-design="glas"] .wsend-item,
html[data-design="glas"] .wiz-review,
html[data-design="glas"] .mt-eintrag,
html[data-design="glas"] .ht-zeile { background: var(--glas); border-color: var(--glas-kante); }
html[data-design="glas"] .ov-projects,
html[data-design="glas"] .gantt,
html[data-design="glas"] .mcal-mini { border-radius: var(--radius); box-shadow: var(--shadow); }
html[data-design="glas"] .wsend-item,
html[data-design="glas"] .mt-eintrag,
html[data-design="glas"] .ht-zeile { border-radius: 18px; }
html[data-design="glas"] .wsend-item:hover { border-color: var(--accent); }
html[data-design="glas"] .wsend-quiet { background: var(--paper-2); border-color: var(--line-2); }
html[data-design="glas"] .add-block[open] > summary { border-color: var(--glas-kante); background: var(--glas-stark); }

/* Leise Zusätze in einer angekreuzten Auswahl (das Datum hinter „Mo") tragen ihre
   Farbe im style-Attribut — auf dem Akzent war sie nicht zu lesen. */
html[data-design="glas"] .radio-group label:has(input:checked) span span,
html[data-design="glas"] .check-cards label:has(input:checked) span span { color: inherit !important; }

/* Kanal-Karten im Profil: getönte Fläche in der Glas-Karte, an = Akzent. */
html[data-design="glas"] .chan-card { border-radius: 18px; background: var(--paper-2); border-color: transparent; }
html[data-design="glas"] .chan-card.is-on,
html[data-design="glas"] .chan-card:has(input[type="checkbox"]:checked) { background: var(--accent-paper); border-color: var(--accent); }
html[data-design="glas"] .chan-card.is-locked { background: var(--paper-2); border-color: var(--line-2); }

/* ============================================================================
   Kalender über alle Projekte (produktion/kalender.php)
   ============================================================================ */
html[data-design="glas"] .mcal { border-color: var(--glas-kante); border-radius: var(--radius); background: var(--line); box-shadow: var(--shadow); }
/* Die Zellen bleiben DECKEND: Zwischen ihnen liegt die Linie als Hintergrund. */
html[data-design="glas"] .mcal-wd { background: var(--surface); }
/* Die Projektfarbe kam als SCHRIFTfarbe aus dem style-Attribut — ein dunkles Projekt
   war auf dunklem Grund nicht zu lesen, ein gelbes nicht auf hellem. Die Farbe trägt
   jetzt nur noch der Strich links; gegen ein style-Attribut hilft nur der Vorrang. */
html[data-design="glas"] a.mcal-pill,
html[data-design="glas"] a.mmc-pill { color: var(--ink) !important; }
/* Quartal: `1fr` heißt minmax(auto, 1fr) — die drei Monate wuchsen mit ihren Pillen
   auf 3200 px und schoben die Seite seitlich weg. */
html[data-design="glas"] .quarter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-design="glas"] .mcal-mini-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
html[data-design="glas"] .mcal-mini.big .mcal-mini-cell { min-width: 0; }
@media (max-width: 1200px) {
    html[data-design="glas"] .quarter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    html[data-design="glas"] .quarter-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Jahr: „heute" ist eine Akzentfläche — das „+2" darauf stand in leiser Tinte. */
html[data-design="glas"] .mcal-mini.small .mcal-mini-cell.tiny.today { background: var(--akzent-voll); color: #fff; }
html[data-design="glas"] .mcal-mini.small .mcal-mini-cell.tiny.today .mmc-tiny-more { color: inherit; }
html[data-design="glas"] .gantt-bar { color: var(--surface); }
html[data-design="glas"] .gantt-bar:hover { color: #fff; --kontrast-ok: 1; }
html[data-design="glas"] .gantt-delivery { text-shadow: 0 0 4px var(--surface), 0 0 4px var(--surface); }
html[data-design="glas"] .ov-legend-leader { background: transparent; border-color: var(--line-2); }

/* ============================================================================
   Einstellungen: Liste der Abschnitte
   ============================================================================ */
html[data-design="glas"] .einst-nav a { border-radius: 14px; }
html[data-design="glas"] .einst-nav a:hover { background: var(--paper-2); }
html[data-design="glas"] .einst-nav a.active { background: var(--erhaben); box-shadow: var(--shadow); }
@media (max-width: 760px) {
    html[data-design="glas"] .einst-nav a,
    html[data-design="glas"] .einst-nav a.active { border-radius: 18px; background: var(--glas); border-color: var(--glas-kante); box-shadow: none; }
}

/* ============================================================================
   Blatt des Zeilen-Menüs und Suche: Fenster am <body>, also Glas MIT Weichzeichner
   ============================================================================ */
html[data-design="glas"] .blatt,
html[data-design="glas"] .suche {
    border: 1px solid var(--glas-kante); background: var(--glas-stark); box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
}
html[data-design="glas"] .suche { border-radius: var(--radius-lg); }
html[data-design="glas"] .blatt-block { background: var(--paper-2); }
html[data-design="glas"] .zm-akt { border-radius: 16px; border-color: transparent; background: var(--paper-2); }
html[data-design="glas"] .zm-akt:hover { border-color: var(--line-2); background: var(--line); }
html[data-design="glas"] .suche-treffer.ist-gewaehlt { border-color: var(--accent); background: var(--accent-soft); }
html[data-design="glas"] .ziel { border-radius: 16px; }
html[data-design="glas"] .ziel-suche,
html[data-design="glas"] .zeitfelder input { background: var(--paper); }
/* Die Sprechblase der Woche (.blatt-blase, 30-woche.css) hat ihre eigene Lage. */
@media (min-width: 641px) {
    /* Am Schreibtisch schwebt das Blatt — wie die Schiene gegenüber. */
    html[data-design="glas"] .blatt:not(.blatt-blase) { top: var(--s-14); right: var(--s-14); bottom: var(--s-14); border-radius: var(--radius-lg); }
}
@media (max-width: 640px) {
    html[data-design="glas"] .blatt:not(.blatt-blase) { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    html[data-design="glas"] .suche { border-radius: var(--radius); }
}

/* Meldung mit „Rückgängig". */
html[data-design="glas"] .kmeldung { border: 1px solid var(--glas-kante); border-radius: 20px; }
html[data-design="glas"] .kmeldung button { border-radius: 14px; }

/* ============================================================================
   Tippziele: mindestens 36 px — auch dort, wo nur ein Wort der Knopf ist
   ============================================================================ */
html[data-design="glas"] .backlink,
html[data-design="glas"] .plan-stand { min-height: 36px; }
/* Der Name in einer Zeile ist der Weg zur Person. */
html[data-design="glas"] .zeile-name { display: inline-flex; align-items: center; min-height: 36px; }
html[data-design="glas"] .data-table td > a { min-height: 36px; }
/* Textverweise: Das Polster vergrößert die Trefferfläche, der gleich große negative
   Rand nimmt es der Zeile wieder — die Verweise sind Flex-Kinder, ohne den Rand würde
   jede dieser Zeilen 20 px höher. */
html[data-design="glas"] .pm-link,
html[data-design="glas"] .person-h2-link,
html[data-design="glas"] .ar-name { padding: var(--s-10) 0; margin: calc(-1 * var(--s-10)) 0; }
html[data-design="glas"] .person-list .pl-main { padding: var(--s-8) 0; margin: calc(-1 * var(--s-8)) 0; }
/* „Abbrechen" im Projekt-Assistenten: unten bleiben vom Abstand (18) noch 8. */
html[data-design="glas"] .wizard-cancel { padding: var(--s-10) 0; margin: calc(-1 * var(--s-10)) 0 var(--s-8); }
html[data-design="glas"] .chan-chip.chan-muted { color: var(--ink-3); }

@media (max-width: 640px) {
    /* Kalender: eine Pille ist ein Verweis auf das Projekt. */
    html[data-design="glas"] a.mcal-pill { padding: var(--s-10) var(--s-8); font-size: 12px; }
    /* Jahr: ein Tag ist ein Verweis in die Woche. */
    html[data-design="glas"] .mcal-mini.small .mcal-mini-cell.tiny { min-height: 36px; }
    /* Woche (Balken): Balken und Projektname. Die Kopfzeile behält ihre Höhe. */
    html[data-design="glas"] .gantt-track { height: 44px; }
    html[data-design="glas"] .gantt-header .gantt-track { height: 28px; }
    html[data-design="glas"] .gantt-label { min-height: 36px; }
    /* Schicht-Vorlagen: Die vier Spalten stehen im style-Attribut — am Handy blieben dem
       Namen 33 px, die Zeile ragte über den Rand. Zwei Spalten, der Name über beide. */
    html[data-design="glas"] .add-block [style*="grid-template-columns: 1.4fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html[data-design="glas"] .add-block [style*="grid-template-columns: 1.4fr"] > .field:first-child { grid-column: 1 / -1; }
    /* Versand: die Häkchen der Tabelle. */
    html[data-design="glas"] .send-cb,
    html[data-design="glas"] #send-all-cb { width: 24px; height: 24px; accent-color: var(--accent); }
}