/* Finales Design, Stufe 2 — Kern (Michael 26.10.2026, Anleitung docs/design-final.md): Startseite (Admin + Mitarbeiter/Stempeluhr), Team, Zeiten,
   Urlaub, Einstellungen, Konto, Anmeldung. Lädt automatisch nach design2.css / designa.css (design2ExtraCss). Nur Optik, keine Logik.
   Statusfarben: Grün fertig · Blau läuft (gedämpft = Pause) · Grau offen · Rot nur Probleme/Fehler · Orange nur Warnung · Navy Navigation/Hauptknöpfe. */

/* ---------- Stempel-Status überall (Stempeluhr, Startseite, Heute im Dienst): eingestempelt = läuft (blau), Pause = blau gedämpft, aus = grau ---------- */
html.d2 .statuschip,:root[data-da].d2 .statuschip{background:var(--surface-3);color:var(--muted)}
html.d2 .statuschip.on,:root[data-da].d2 .statuschip.on{background:var(--s-run-soft);color:var(--s-run)}
html.d2 .statuschip.pause,:root[data-da].d2 .statuschip.pause{background:var(--surface-3);color:var(--s-run)}
html.d2 .statuschip.pause::before{opacity:.45}

/* ---------- Stempeluhr (Startseite der Mitarbeiter) ---------- */
.d2[data-page=clock] main,.d2[data-page=home] main{max-width:1680px}
html.d2 .catlabel{font-size:12.5px;font-weight:650;letter-spacing:0;color:var(--muted)}
html.d2 .catnow{color:var(--s-run)}
/* Hinweis-Karten: Tonstufe statt farbigem Rand (Push-Hinweis ist eine Warnung → orange Fläche bleibt, ohne roten Rand) */
html.d2 .pushcard,html.d2 .autofix,html.d2 .msgcard{box-shadow:none}
html.d2 #pushoff{border-left:0!important}   /* „Push ist aus": roter Rand kommt als style-Attribut aus clock.php — Warnung bleibt die orange Fläche */

/* ---------- Startseite (Admin): Karten im Raster ---------- */
/* „Das liegt bei dir": Symbole als ruhige Tonfläche, Farbe nur mit Bedeutung (rot = Problem/Fehler, orange = Warnung) */
html.d2 .todorow .ico{background:var(--surface-2);color:var(--ink)}
html.d2 .todorow.urgent .ico{background:var(--s-prob-soft);color:var(--s-prob)}
html.d2 .todorow.warn .ico{background:var(--s-warn-soft);color:var(--s-warn)}
html.d2 .todorow.info .ico{background:var(--surface-2);color:var(--ink)}
/* Knöpfe in den Zeilen nie abgeschnitten */
@media(min-width:700px){.d2 .dgrid .todos .todorow form .btn{max-width:none;overflow:visible}}
/* Heute im Dienst: Tagessoll-Überschreitung orange (Warnung), Kopf normal */
html.d2 .dsoll.over{color:var(--s-warn)}
/* Bearbeiten-Knopf: im Dunkeln keine weiße Fläche */
html.d2 .dg-editbtn:hover{background:var(--surface-2);color:var(--ink)}

/* ---------- Kernseiten: gemeinsame Regeln ---------- */
/* Breite nutzen (Seitenbreite „Ultra wide"): diese Seiten sind Raster/Listen, keine schmale Mittelspalte von 1240 px */
html.d2[data-pw="uw"]:is([data-page=clock],[data-page=home],[data-page=vacation],[data-page=account],[data-page=holidays],[data-page=settings],[data-page=connections],
 [data-page=categories],[data-page=access_admin],[data-page=help_admin],[data-page=hours_sheet],[data-page=user_edit]) main>:not(.tabs){max-width:none}
/* Kennzahl-Karten (.stat): Zahl als Schrift, links, ruhig — wie .d2-kpis */
html.d2 .grid:has(>.card.stat){gap:16px}
html.d2 .card.stat{text-align:left;padding:18px 20px}
html.d2 .card.stat .v{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
html.d2 .card.stat .l{font-size:12.5px;color:var(--muted);margin-top:4px}
@media(max-width:699.98px){html.d2 .card.stat{padding:14px 16px}html.d2 .card.stat .v{font-size:24px}}
/* Rot nur für Probleme/Fehler: negative Stunden, „unter Ziel", „schwierige Zeiten" sind Warnungen → orange */
html.d2:is([data-page=team],[data-page=times],[data-page=hours_sheet],[data-page=vacation],[data-page=users],[data-page=user_edit],[data-page=clock],[data-page=home]) .neg{color:var(--s-warn)}
html.d2:is([data-page=team],[data-page=times],[data-page=hours_sheet],[data-page=vacation],[data-page=users],[data-page=user_edit]) .stat .v.neg{color:var(--s-warn)}
/* Status-Abzeichen: allgemein in design2.css (wie .d2-st); in der Prognose ist „unter Ziel" eine Warnung (orange), kein Fehler */
html.d2[data-page=team] :is(.fc-cell,.fc-unsure,#prognose) .badge.rejected,html.d2[data-page=team] .badge.rejected.fc-unsure{background:var(--s-warn-soft);color:var(--s-warn)}

/* ---------- Zeiten ---------- */
/* Feiertag: Hinweis, keine Warnung → keine Gold-Fläche (der Name des Feiertags steht in der Zeile; Wochenzeilen tragen die Tonstufe) */
html.d2 tr.holiday td,:root[data-da].d2 tr.holiday td{background:none}
html.d2[data-page=times] td a .ico{display:inline-block;vertical-align:middle;width:18px;height:18px;color:var(--muted)}
html.d2[data-page=times] td a:hover .ico{color:var(--ink)}

/* ---------- Einstellungen ---------- */
html.d2 .setsec .setmod{font-size:12px;letter-spacing:0;font-weight:650}
@media(min-width:769px){
 html.d2 .jumplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:2px 16px;background:var(--surface);border-radius:var(--r-panel);padding:12px}
 html.d2 .jumplist a{box-shadow:none;background:none;border-radius:8px;min-height:32px;padding:5px 10px;font-size:13.5px;justify-content:flex-start}
 html.d2 .jumplist a:hover{background:var(--surface-2)}
}

/* ---------- Mein Konto: Karten in zwei Spalten ab 1280 px (Breite nutzen statt einer langen Spalte) ---------- */
@media(min-width:1280px){
 html.d2[data-page=account] main{column-count:2;column-gap:16px}
 html.d2[data-page=account] main>*{break-inside:avoid}
 html.d2[data-page=account] main>:is(h1,.tabs,.flash,.d2-head){column-span:all}
}

/* ---------- Menü-Zähler unten am Handy (Navy-Leiste): neutral, nur Meldungen und Dringendes rot ---------- */
html.d2 .bottomnav .bndot,:root[data-da].d2 .bottomnav .bndot{background:var(--on-navy);color:var(--navy-bg)}
html.d2 .bottomnav a[href$="p=cj_problems"] .bndot,html.d2 .bottomnav .bndot.urg,
:root[data-da].d2 .bottomnav a[href$="p=cj_problems"] .bndot,:root[data-da].d2 .bottomnav .bndot.urg{background:var(--s-prob);color:var(--on-solid)}

/* ---------- Tabellen als Karten am Handy: Spaltennamen normal geschrieben (keine Großbuchstaben-Labels) ---------- */
html.d2 table.mcards td[data-l]:not(:first-child):not([data-l=""])::before{text-transform:none;letter-spacing:0;font-size:12px;font-weight:650}

/* ---------- Startseite mit Design A: Zeitleiste je Mitarbeiter nach der Farbregel ---------- */
/* Jetzt-Linie: Orientierung, kein Problem → Navy statt Rot */
:root[data-da].d2 .da-track .da-now,:root[data-da].d2 .da-legend i.now{background:var(--navy-bg)}
:root.dk[data-da].d2 .da-track .da-now,:root.dk[data-da].d2 .da-legend i.now{background:var(--ink)}
/* Kachel-Titel sind Links über die ganze Karte — Schrift wie eine Überschrift (Design A färbt Links sonst blau) */
html.d2 .dak h2 a.dak-go,:root[data-da].d2 .dak h2 a.dak-go{color:var(--ink);text-decoration:none}

/* ---------- Aufgaben: Kopfzahlen als Befund-Satz unter dem Titel (Markup .tk-sum.d2-find > .tk-sn, app/lib/tasks_ui.php taskSumHtml) ---------- */
html.d2 .tk-hd>.tk-sum.d2-find{order:3;flex:1 0 100%;max-width:none;display:block;margin:0;font-size:14px;color:var(--muted)}
html.d2 .tk-sum .tk-sn b{color:var(--ink);font-weight:750}
html.d2 .tk-sum .tk-sn.over,html.d2 .tk-sum .tk-sn.over b{color:var(--s-prob)}