/* ======================================================================
   v2.4.1 - Dashboard-Optik: Icons statt Emoji auf den Status-Kacheln,
   neue "Wer ist heute im Haus"-Karte, Initialen-Avatare bei Geburtstagen
   und Jubiläen. Nutzt durchgehend die bestehenden Theme-Variablen
   (--pp-*), damit alle drei Farbschemata und der Dark Mode automatisch
   mitlaufen - keine zusätzlichen, fest codierten Farben.
   ====================================================================== */

body.app-body .status-card .status-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-top: 0;
    margin-bottom: 9px;
    border-radius: 10px;
    color: var(--status-color, var(--pp-olive));
    background: color-mix(in srgb, var(--status-color, var(--pp-olive)) 16%, transparent);
}
.status-card .status-icon svg { width: 18px; height: 18px; }

/* Im Dark Mode überschreibt eine bestehende, noch spezifischere Regel
   (html.dark-mode body.app-body .status-card span { color: #f1f4f3 })
   sonst auch dieses Icon - hier gezielt wieder die Statusfarbe herstellen. */
html.dark-mode body.app-body .status-card .status-icon {
    color: var(--status-color, var(--pp-olive));
}

@media (max-width: 700px) {
    .status-card .status-icon { width: 26px; height: 26px; margin-bottom: 6px; border-radius: 8px; }
    .status-card .status-icon svg { width: 14px; height: 14px; }
}

/* "Wer ist heute im Haus" */
.presence-card .presence-department {
    margin-bottom: 14px;
}
.presence-card .presence-department:last-child { margin-bottom: 0; }
.presence-department-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin-bottom: 7px;
}
.presence-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.presence-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px 3px 3px;
    border-radius: 999px;
    background: var(--pp-canvas);
    border: 1px solid var(--pp-line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pp-ink);
}
html.dark-mode body.app-body .presence-chip { background: #151d1f; border-color: var(--pp-line); }

/* Kleine Initialen-Avatare, wiederverwendet bei Anwesenheit, Geburtstagen
   und Jubiläen. Gleiche Farbwelt wie der Sidebar-Avatar (.user-avatar),
   nur kleiner; eine leichte, deterministische Farbnuance je Person kommt
   allein aus der Reihenfolge (nth-of-type), ohne zusätzliches Farbschema. */
.mini-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    background: linear-gradient(145deg, var(--pp-olive), var(--pp-olive-dark));
}
.presence-chips .presence-chip:nth-of-type(3n+2) .mini-avatar,
.person-row:nth-of-type(3n+2) .mini-avatar { filter: hue-rotate(28deg); }
.presence-chips .presence-chip:nth-of-type(3n+3) .mini-avatar,
.person-row:nth-of-type(3n+3) .mini-avatar { filter: hue-rotate(-28deg) saturate(1.1); }

@media (max-width: 700px) {
    .presence-chip { font-size: 12px; padding: 2px 10px 2px 2px; }
    .mini-avatar { width: 22px; height: 22px; font-size: 9.5px; }
}

/* Geburtstage / Jubiläen als Personen-Zeile statt reiner Text-Liste */
.person-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 0;
    border-bottom: 1px solid var(--pp-line);
}
.person-row:last-child { border-bottom: none; }
.person-row .person-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.person-row .person-meta strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.person-row .person-meta small { font-size: 11.5px; color: var(--pp-muted); }
.person-row .person-date {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-olive-dark);
    background: color-mix(in srgb, var(--pp-olive) 16%, transparent);
    white-space: nowrap;
}
html.dark-mode body.app-body .person-row { border-bottom-color: rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------------ */
/* v2.5.1: Ausblendbare Module - Elemente behalten ihre feste Breite.   */
/*                                                                      */
/* Problem: Diese Container nutzten feste 1fr-Spalten. Wird ein Modul   */
/* ausgeblendet, faellt ein Kind weg und die verbliebenen Elemente      */
/* ziehen sich auf den frei gewordenen Platz auf - sie wirken groesser. */
/* Gewuenscht: gleiche Breite unabhaengig von der Anzahl, der freie     */
/* Platz bleibt einfach leer.                                           */
/* Loesung: feste Maximalbreiten, aber mit automatischem Umbruch. So     */
/* bleibt Tablet/Mobil ohne horizontales Ueberlaufen.                    */

@media (min-width: 701px) {
    /* Offene-Antraege-Karte: Wuensche / Urlaub / Zeiterfassung */
    .open-requests-split {
        grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 190px));
        justify-content: start;
    }

    /* Einstellungs-Kategorien: Betrieb / Kommunikation / Verwaltung / System */
    .settings-category-tabs {
        grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 168px));
        justify-content: start;
    }
}

/* Statuskarten oben: feste Kachelbreite, linksbuendig, umbrechend.
   Breiten sich nicht mehr auf die volle Zeile aus - egal ob 3 oder 6
   Kacheln sichtbar sind. Unter 1181 px greift weiterhin das bestehende
   kompakte 3-spaltige Layout. */
@media (min-width: 1181px) {
    .dashboard-status-grid {
        grid-template-columns: repeat(auto-fill, 184px);
        justify-content: start;
    }
}

/* v2.5.1: Sidebar-Menue - Eintraege oben halten statt ueber die volle Hoehe
   zu strecken. Die nav ist ein Grid und fuellt per flex:1 die Sidebar-Hoehe.
   Der Default (align-content stretch) verteilt die Zeilen dann ueber die
   ganze Hoehe: bei wenigen Punkten (ausgeblendete Module) werden die
   Eintraege hoch und weit auseinander, der aktive Punkt wird zur grossen
   Flaeche. align-content:start packt sie oben mit natuerlicher Hoehe (52 px);
   der frei werdende Platz bleibt unten leer. */
body.app-body .sidebar nav { align-content: start; }

/* Dashboard: klare Desktop-Zeilen statt unterschiedlich hoher Karten,
   deren Grid-Zeilen grosse weisse Loecher hinterlassen. */
@media (min-width: 901px) {
    body.app-body .dashboard-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: stretch;
    }

    body.app-body .dashboard-presence-card,
    body.app-body .dashboard-staffing-card,
    body.app-body .dashboard-absence-card {
        grid-column: span 4;
        align-self: stretch;
    }

    body.app-body .dashboard-requests-card {
        grid-column: 1 / -1;
    }

    body.app-body .dashboard-birthdays-card,
    body.app-body .dashboard-anniversaries-card {
        grid-column: span 6;
    }

    body.app-body .dashboard-grid > .quick-access-card {
        grid-column: 1 / -1;
    }

    body.app-body .dashboard-requests-card .open-requests-split {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    body.app-body .dashboard-requests-card .open-requests-split > div {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 14px;
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid var(--pp-line);
        border-radius: 13px;
        background: var(--pp-canvas);
    }

    body.app-body .dashboard-requests-card .metric-big {
        grid-row: 1 / 3;
        margin: 0;
        font-size: 28px;
    }

    body.app-body .dashboard-requests-card .open-requests-split p {
        grid-column: 2;
        margin: 0;
        font-size: 13px;
    }

    body.app-body .dashboard-requests-card .open-requests-split .small-link {
        grid-column: 3;
        grid-row: 1 / 3;
        white-space: nowrap;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    body.app-body .dashboard-requests-card .open-requests-split > div {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.app-body .dashboard-requests-card .open-requests-split .small-link {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-top: 6px;
    }
}

/* Dashboard v2: konzentrierte Arbeitsflaeche statt Karten bis zum Horizont.
   Die Breite bleibt auch auf grossen Monitoren lesbar; wichtige Inhalte
   bilden ein asymmetrisches Bento-Raster mit klarer Rangfolge. */
@media (min-width: 1181px) {
    body.app-body .main > .main-header,
    body.app-body .main > .dashboard-hero,
    body.app-body .main > .stamp-dashboard-row,
    body.app-body .main > .dashboard-grid,
    body.app-body .main > .dashboard-monthly-card,
    body.app-body .main > .warning-box {
        width: 100%;
        max-width: 1480px;
        margin-inline: auto;
    }

    body.app-body .dashboard-status-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        justify-content: stretch;
    }

    body.app-body .stamp-dashboard-row {
        grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
        gap: 14px;
    }

    body.app-body .stamp-dashboard-row .stamp-clock-card {
        max-width: none;
        min-height: 192px;
        padding: 20px 22px;
    }

    body.app-body .stamp-side-metrics {
        gap: 14px;
    }

    body.app-body .focus-metric {
        padding: 18px 20px;
    }

    body.app-body .focus-icon {
        margin-bottom: 14px;
    }

    body.app-body .dashboard-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: 14px;
    }

    body.app-body .dashboard-presence-card {
        grid-column: span 7;
    }

    body.app-body .dashboard-staffing-card {
        grid-column: span 5;
    }

    body.app-body .dashboard-absence-card {
        grid-column: span 4;
    }

    body.app-body .dashboard-requests-card {
        grid-column: span 8;
    }

    body.app-body .dashboard-birthdays-card,
    body.app-body .dashboard-anniversaries-card {
        grid-column: span 6;
    }

    body.app-body .dashboard-grid > .quick-access-card {
        grid-column: 1 / -1;
    }

    body.app-body .dashboard-grid > .card {
        padding: 18px;
    }

    body.app-body .dashboard-requests-card .open-requests-split {
        gap: 9px;
    }

    body.app-body .dashboard-requests-card .open-requests-split > div {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 10px;
        padding: 10px 11px;
    }

    body.app-body .dashboard-requests-card .open-requests-split .small-link {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-top: 5px;
    }

    body.app-body .quick-access-card .quick-actions a {
        padding-block: 10px;
    }

    body.app-body .dashboard-monthly-card {
        padding: 18px 20px;
    }
}

/* Dashboard v3: Tages- und Monatszahlen als kompakte Diagrammzeile. */
body.app-body .dashboard-insights {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
    gap: 14px;
    margin: 14px 0;
}

body.app-body .dashboard-insights > .card {
    min-height: 0;
    padding: 17px 19px;
}

.insight-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 13px;
}

body.app-body .insight-heading h2 {
    margin: 0;
    color: var(--pp-ink);
    font-size: 14px;
    text-transform: none;
    letter-spacing: -.01em;
}

.insight-heading p {
    margin: 3px 0 0;
    color: var(--pp-muted);
    font-size: 11px;
}

.insight-heading > strong {
    color: var(--pp-ink);
    font-size: 23px;
    line-height: 1;
    white-space: nowrap;
}

.insight-heading > strong small {
    color: var(--pp-muted);
    font-size: 11px;
    font-weight: 600;
}

.attendance-chart {
    display: flex;
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--pp-line);
    box-shadow: inset 0 1px 2px rgba(20, 30, 27, .08);
}

.attendance-chart > span {
    flex: var(--segment-value) 1 0;
    min-width: 0;
}

.chart-work, .legend-work i { background: #72a236; }
.chart-vacation, .legend-vacation i { background: #e49b25; }
.chart-free, .legend-free i { background: #e2c94b; }
.chart-sick, .legend-sick i { background: #dd5550; }
.chart-training, .legend-training i { background: #8270bd; }
.chart-business, .legend-business i { background: #4c9ca7; }

.attendance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
}

.attendance-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-muted);
    font-size: 11px;
    white-space: nowrap;
}

.attendance-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.attendance-legend b {
    color: var(--pp-ink);
    font-size: 12px;
}

.mini-bar-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 14px;
}

.mini-bar-list > div > span {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    color: var(--pp-muted);
    font-size: 10px;
}

.mini-bar-list > div > span b {
    color: var(--pp-ink);
}

.mini-bar-list > div > i {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--pp-line);
}

.mini-bar-list > div > i > b {
    display: block;
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pp-olive), #9fba38);
}

html.dark-mode body.app-body .dashboard-insights > .card {
    border-color: var(--pp-line);
    background: var(--pp-panel);
}

@media (max-width: 900px) {
    body.app-body .dashboard-insights {
        grid-template-columns: 1fr;
        order: 3;
        margin-top: 13px;
    }

    body.app-body .stamp-dashboard-row {
        order: 2;
    }
}

@media (max-width: 560px) {
    body.app-body .dashboard-insights > .card {
        padding: 15px;
    }

    .attendance-legend {
        gap: 7px 12px;
    }

    .mini-bar-list {
        grid-template-columns: 1fr;
    }
}

/* Dashboard v4: Stempeluhr links, beide Diagramme gleich breit gestapelt
   rechts. Die bisherigen drei Nebenkennzahlen waren inhaltlich doppelt. */
body.app-body .stamp-dashboard-row.has-dashboard-insights {
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
    align-items: start;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights > .stamp-side-metrics {
    display: none;
}

.dashboard-left-stack {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

body.app-body .dashboard-left-stack > .card {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 18px;
}

body.app-body .dashboard-left-stack > .stamp-clock-card {
    padding: 20px 22px;
}

body.app-body .dashboard-left-stack > .dashboard-staffing-card .warning-box {
    margin: 0;
    padding: 12px 13px;
    border-radius: 13px;
}

body.app-body .dashboard-left-stack > .dashboard-staffing-card .warning-box p {
    margin: 6px 0 9px;
}

body.app-body .dashboard-left-stack > .dashboard-absence-card .compact-list {
    margin-bottom: 8px;
}

body.app-body .dashboard-left-stack > .quick-access-card {
    grid-column: 1;
}

body.app-body .dashboard-left-stack > .quick-access-card .quick-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

body.app-body .dashboard-left-stack > .quick-access-card .quick-actions a {
    width: 100%;
    padding: 10px 12px;
    text-align: left;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights > .dashboard-insights {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights > .dashboard-insights > .card {
    width: 100%;
    min-height: 0;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-requests-card {
    grid-column: 1;
    align-self: start;
    padding: 17px 19px;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-presence-card,
body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-birthdays-card,
body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-anniversaries-card {
    grid-column: 1;
    align-self: start;
    padding: 17px 19px;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-requests-card .open-requests-split {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 1181px) {
    body.app-body .stamp-dashboard-row.has-dashboard-insights {
        max-width: 1480px;
    }

    body.app-body .stamp-dashboard-row.has-dashboard-insights > .stamp-clock-card {
        min-height: 0;
        height: auto;
        align-self: start;
    }

    body.app-body .dashboard-grid > .dashboard-presence-card {
        grid-column: 1 / -1;
    }
}

/* Dashboard v5: visueller Feinschliff fuer das zweispaltige Lagebild. */
body.app-body .stamp-dashboard-row.has-dashboard-insights {
    gap: 16px;
}

body.app-body .dashboard-left-stack {
    gap: 12px;
}

body.app-body .dashboard-left-stack > .card,
body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-insights > .card {
    max-width: none;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(28, 37, 34, .065);
}

body.app-body .dashboard-left-stack > .stamp-clock-card {
    width: 100%;
    max-width: none !important;
    border: 0;
    box-shadow: 0 12px 28px rgba(19, 46, 40, .16);
}

body.app-body .dashboard-left-stack > .card:not(.stamp-clock-card) h2,
body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-insights > .card h2 {
    margin: 0 0 12px;
    color: var(--pp-ink);
    font-size: 15px;
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-transform: none;
}

body.app-body .dashboard-left-stack > .dashboard-staffing-card {
    padding: 16px;
}

body.app-body .dashboard-left-stack > .dashboard-staffing-card .warning-box {
    border-width: 1px;
    box-shadow: none;
}

body.app-body .dashboard-left-stack > .dashboard-absence-card h3 {
    margin: 4px 0 5px;
    font-size: 13px;
}

body.app-body .dashboard-left-stack > .dashboard-absence-card .compact-list li {
    padding: 6px 2px;
    font-size: 13px;
}

body.app-body .dashboard-left-stack > .quick-access-card {
    padding: 16px;
}

body.app-body .dashboard-left-stack > .quick-access-card .quick-actions {
    gap: 7px;
}

body.app-body .dashboard-left-stack > .quick-access-card .quick-actions a {
    display: flex;
    align-items: center;
    min-height: 42px;
    color: var(--pp-ink);
    border: 1px solid #dce3eb;
    border-radius: 10px;
    background: #f1f5fa;
    box-shadow: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

body.app-body .dashboard-left-stack > .quick-access-card .quick-actions a:hover {
    color: var(--pp-olive-dark);
    border-color: color-mix(in srgb, var(--pp-olive) 38%, #dce3eb);
    background: color-mix(in srgb, var(--pp-olive) 9%, #f1f5fa);
    transform: translateX(2px);
}

body.app-body .stamp-dashboard-row.has-dashboard-insights > .dashboard-insights {
    gap: 12px;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights .attendance-chart-card,
body.app-body .stamp-dashboard-row.has-dashboard-insights .month-chart-card {
    padding: 16px 18px;
}

body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-requests-card .open-requests-split > div {
    border-color: var(--pp-line);
    background: color-mix(in srgb, var(--pp-canvas) 82%, white);
}

body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-presence-card.dashboard-card-empty,
body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-birthdays-card.dashboard-card-empty {
    padding-block: 15px;
    background: color-mix(in srgb, var(--pp-panel) 94%, var(--pp-canvas));
}

body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-card-empty p:last-child {
    margin: 0;
    color: var(--pp-muted);
    font-size: 12px;
}

html.dark-mode body.app-body .dashboard-left-stack > .card,
html.dark-mode body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-insights > .card {
    border-color: var(--pp-line);
}

html.dark-mode body.app-body .dashboard-left-stack > .quick-access-card .quick-actions a {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: color-mix(in srgb, var(--pp-panel) 78%, #25313a);
}

html.dark-mode body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-requests-card .open-requests-split > div {
    background: color-mix(in srgb, var(--pp-panel) 84%, #243034);
}

/* Dashboard v6: sichtbarer Umbau statt homoeopathischem Feinschliff. */
body.app-body .dashboard-left-stack > .card {
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    width: 100% !important;
    max-width: none !important;
}

body.app-body .dashboard-info-trio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e3e6e1;
    border-radius: 18px;
    background: #ffffff !important;
    box-shadow: 0 9px 24px rgba(28, 37, 34, .08);
}

body.app-body .dashboard-info-trio > .card {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch;
    min-width: 0;
    min-height: 142px;
    padding: 17px 18px;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: none;
}

body.app-body .dashboard-info-trio > .card h2 {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.25;
    border-bottom: 1px solid var(--pp-line);
}

body.app-body .dashboard-info-trio > .dashboard-presence-card h2::before {
    content: "👥";
    margin-right: 8px;
}

body.app-body .dashboard-info-trio > .dashboard-birthdays-card h2::before {
    content: "🎂";
    margin-right: 8px;
}

body.app-body .dashboard-info-trio > .dashboard-anniversaries-card h2::before {
    content: "⭐";
    margin-right: 8px;
}

body.app-body .dashboard-info-trio > .dashboard-card-empty p:last-child {
    margin: 0;
    color: var(--pp-muted);
    font-size: 12px;
    line-height: 1.45;
}

body.app-body .dashboard-info-trio .person-row {
    padding-block: 5px;
}

html.dark-mode body.app-body .dashboard-info-trio > .card {
    border-color: var(--pp-line);
    background: var(--pp-panel);
}

html.dark-mode body.app-body .dashboard-info-trio {
    border-color: var(--pp-line);
    background: var(--pp-panel) !important;
}

@media (max-width: 900px) {
    body.app-body .dashboard-info-trio {
        grid-template-columns: 1fr;
    }

    body.app-body .dashboard-info-trio > .card {
        min-height: 0;
    }
}

@media (max-width: 900px) {
    body.app-body .stamp-dashboard-row.has-dashboard-insights {
        display: flex;
        flex-direction: column;
        gap: 13px;
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    body.app-body .stamp-dashboard-row.has-dashboard-insights > .dashboard-insights {
        display: grid;
        order: 1;
        width: 100% !important;
        max-width: none !important;
    }

    body.app-body .dashboard-left-stack {
        order: 0;
        width: 100% !important;
        max-width: none !important;
    }

    body.app-body .dashboard-left-stack > .card,
    body.app-body .dashboard-left-stack > .stamp-clock-card,
    body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-insights > .card,
    body.app-body .dashboard-info-trio,
    body.app-body .dashboard-info-trio > .card {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }
}

/* Mitarbeiterseite: dasselbe Seitenraster wie das Dashboard. */
.employee-mobile-heading {
    display: none;
}

@media (min-width: 901px) {
    body.app-body .employee-page-header,
    body.app-body .employee-page-card {
        width: 100%;
        max-width: 1480px;
        margin-inline: auto;
    }
}

@media (max-width: 900px) {
    body.app-body .employee-mobile-heading {
        display: block;
        width: 100%;
        margin: 5px auto 14px;
    }

    body.app-body .employee-mobile-heading h1 {
        margin: 0;
        color: var(--pp-ink);
        font-size: 26px;
        line-height: 1.1;
        letter-spacing: -.025em;
    }

    body.app-body .employee-mobile-heading p {
        margin: 6px 0 0;
        color: var(--pp-muted);
        font-size: 12px;
    }

    body.app-body .employee-page-card {
        width: 100%;
        margin-inline: auto;
        padding: 16px;
        border-radius: 17px;
    }

    body.app-body .employee-toolbar {
        gap: 10px;
        margin-bottom: 15px;
    }

    body.app-body .employee-toolbar > .button-link,
    body.app-body .employee-filter,
    body.app-body .employee-search-input,
    body.app-body .employee-filter-reset {
        width: 100%;
        max-width: none;
    }

    body.app-body .employee-toolbar > .button-link,
    body.app-body .employee-filter-reset {
        justify-content: center;
        min-height: 42px;
        text-align: center;
    }

    body.app-body .employee-search-input {
        min-height: 44px;
    }

    body.app-body .employee-page-card .table.table-cards {
        margin-top: 8px;
    }

    body.app-body .employee-page-card .table.table-cards tr {
        margin-bottom: 10px;
        border-color: var(--pp-line);
        border-radius: 13px;
        box-shadow: none;
    }
}

@media (max-width: 700px) {
    body.app-body .employee-mobile-heading,
    body.app-body .employee-page-card {
        width: 100% !important;
        max-width: 480px !important;
        margin-inline: auto !important;
    }
}

/* Mitarbeiter-Dashboard: "Mein Bereich" folgt der Wochenuebersicht statt
   wegen fehlender Sortierung vor Begruessung und Stempeluhr zu erscheinen. */
body.app-body .my-area-card {
    order: 5;
}

@media (max-width: 900px) {
    body.app-body .my-area-card {
        order: 5;
        width: 100%;
    }
}

/* Stempeluhr fuer Admins und Mitarbeiter identisch breit fuehren. */
@media (min-width: 901px) {
    body.app-body .stamp-dashboard-row,
    body.app-body .stamp-dashboard-row.has-dashboard-insights {
        grid-template-columns: minmax(380px, 500px) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    body.app-body .stamp-dashboard-row .stamp-clock-card,
    body.app-body .stamp-dashboard-row.has-dashboard-insights .stamp-clock-card {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }
}

/* Dashboard v7: dreigeteilte Infokarten wie im Referenzlayout. */
@media (min-width: 1100px) {
    body.app-body .dashboard-info-trio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
    }
}

/* Dashboard v8: kontrollierte Licht- und Tiefenwirkung. */
@media (hover: hover) and (pointer: fine) {
    body.app-body .dashboard-left-stack > .card:not(.stamp-clock-card),
    body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-insights > .card,
    body.app-body .dashboard-info-trio {
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    body.app-body .dashboard-left-stack > .card:not(.stamp-clock-card):hover,
    body.app-body .stamp-dashboard-row.has-dashboard-insights .dashboard-insights > .card:hover,
    body.app-body .dashboard-info-trio:hover {
        z-index: 1;
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--pp-olive) 28%, var(--pp-line));
        box-shadow:
            0 16px 34px rgba(25, 38, 31, .11),
            0 0 24px color-mix(in srgb, var(--pp-olive) 9%, transparent);
    }
}

body.app-body .sidebar nav a.active {
    box-shadow:
        inset 3px 0 0 rgba(255, 255, 255, .58),
        0 8px 22px color-mix(in srgb, var(--pp-olive) 35%, transparent),
        0 0 18px color-mix(in srgb, var(--pp-olive) 22%, transparent);
}

body.app-body .dashboard-left-stack > .stamp-clock-card {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 18px 38px rgba(11, 43, 34, .22),
        0 0 28px color-mix(in srgb, var(--pp-olive) 15%, transparent);
}

body.app-body .dashboard-left-stack > .stamp-clock-card::after {
    position: absolute;
    top: -70px;
    right: -55px;
    width: 190px;
    height: 190px;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pp-olive) 20%, transparent);
    filter: blur(34px);
}

body.app-body .dashboard-left-stack > .stamp-clock-card > * {
    position: relative;
    z-index: 1;
}

body.app-body .dashboard-search {
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.app-body .dashboard-search:focus-within {
    border-color: color-mix(in srgb, var(--pp-olive) 52%, var(--pp-line));
    box-shadow:
        0 8px 24px rgba(28, 37, 34, .1),
        0 0 0 4px color-mix(in srgb, var(--pp-olive) 13%, transparent);
}

body.app-body .stamp-button,
body.app-body .stamp-choice,
body.app-body .dashboard-requests-card .small-link {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .stamp-button:hover,
    body.app-body .stamp-choice:hover,
    body.app-body .dashboard-requests-card .small-link:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
        box-shadow:
            0 9px 20px rgba(33, 60, 37, .18),
            0 0 16px color-mix(in srgb, var(--pp-olive) 18%, transparent);
    }
}

body.app-body .dashboard-staffing-card .warning-box {
    box-shadow:
        0 9px 22px rgba(171, 111, 15, .1),
        0 0 20px rgba(236, 177, 50, .1);
}

html.dark-mode body.app-body .sidebar nav a.active {
    box-shadow:
        inset 3px 0 0 rgba(255, 255, 255, .62),
        0 10px 26px color-mix(in srgb, var(--pp-olive) 42%, transparent),
        0 0 24px color-mix(in srgb, var(--pp-olive) 32%, transparent);
}

html.dark-mode body.app-body .dashboard-left-stack > .stamp-clock-card {
    box-shadow:
        0 20px 42px rgba(0, 0, 0, .35),
        0 0 34px color-mix(in srgb, var(--pp-olive) 22%, transparent);
}

/* App v8: dieselbe ruhige Tiefenwirkung auf den Fachseiten. */
body.app-body .main > .card,
body.app-body .main > .settings-panel,
body.app-body .main > .calendar-panel,
body.app-body .main > .form-card,
body.app-body .main > .year-table-card,
body.app-body .main > .employee-year-card,
body.app-body .employee-page-card {
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .main > .card:hover,
    body.app-body .main > .settings-panel:hover,
    body.app-body .main > .calendar-panel:hover,
    body.app-body .main > .form-card:hover,
    body.app-body .main > .year-table-card:hover,
    body.app-body .main > .employee-year-card:hover,
    body.app-body .employee-page-card:hover {
        border-color: color-mix(in srgb, var(--pp-olive) 24%, var(--pp-line));
        box-shadow:
            0 17px 36px rgba(24, 37, 31, .11),
            0 0 22px color-mix(in srgb, var(--pp-olive) 7%, transparent);
    }
}

body.app-body .settings-category-tabs,
body.app-body .settings-tabs,
body.app-body .settings-subtabs,
body.app-body .tabs {
    box-shadow:
        0 10px 25px rgba(25, 38, 31, .08),
        0 0 18px color-mix(in srgb, var(--pp-olive) 5%, transparent);
}

body.app-body .settings-category-tabs a.active,
body.app-body .settings-tabs a.active,
body.app-body .settings-subtabs a.active,
body.app-body .tabs .tab.active {
    box-shadow:
        0 7px 17px color-mix(in srgb, var(--pp-olive) 23%, transparent),
        0 0 13px color-mix(in srgb, var(--pp-olive) 14%, transparent);
}

body.app-body .main input,
body.app-body .main select,
body.app-body .main textarea {
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.app-body .main input:focus,
body.app-body .main select:focus,
body.app-body .main textarea:focus {
    border-color: color-mix(in srgb, var(--pp-olive) 58%, var(--pp-line));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--pp-olive) 12%, transparent),
        0 7px 18px rgba(27, 42, 34, .08);
}

body.app-body .main button,
body.app-body .main .button-link,
body.app-body .main .small-link {
    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .main button:hover,
    body.app-body .main .button-link:hover,
    body.app-body .main .small-link:hover {
        transform: translateY(-1px);
        filter: brightness(1.035);
        box-shadow:
            0 9px 20px rgba(30, 49, 35, .15),
            0 0 15px color-mix(in srgb, var(--pp-olive) 13%, transparent);
    }
}

body.app-body .main .table tbody tr {
    transition: background-color .16s ease, box-shadow .16s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .main .table tbody tr:hover {
        background: color-mix(in srgb, var(--pp-olive) 6%, var(--pp-panel));
        box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pp-olive) 55%, transparent);
    }
}

html.dark-mode body.app-body .main > .card,
html.dark-mode body.app-body .main > .settings-panel,
html.dark-mode body.app-body .main > .calendar-panel,
html.dark-mode body.app-body .main > .form-card,
html.dark-mode body.app-body .main > .year-table-card,
html.dark-mode body.app-body .main > .employee-year-card,
html.dark-mode body.app-body .employee-page-card {
    box-shadow:
        0 16px 35px rgba(0, 0, 0, .25),
        0 0 20px color-mix(in srgb, var(--pp-olive) 8%, transparent);
}

/* Navigation v8: Menüeinträge als leicht angehobene Leuchtknöpfe. */
body.app-body .sidebar nav a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 12px;
    transform: translate3d(0, 0, 0);
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body.app-body .sidebar nav a::after {
    position: absolute;
    z-index: -1;
    top: -45%;
    left: -35%;
    width: 42%;
    height: 190%;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
    opacity: 0;
    transform: rotate(18deg) translateX(-30px);
    transition: opacity .18s ease, transform .32s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .sidebar nav a:hover {
        color: #fff;
        border-color: color-mix(in srgb, var(--pp-olive) 35%, rgba(255, 255, 255, .12));
        background: color-mix(in srgb, var(--pp-olive) 18%, rgba(255, 255, 255, .055));
        box-shadow:
            0 9px 20px rgba(0, 0, 0, .22),
            0 0 18px color-mix(in srgb, var(--pp-olive) 17%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .12);
        transform: translate3d(4px, -2px, 0);
    }

    body.app-body .sidebar nav a:hover::after {
        opacity: 1;
        transform: rotate(18deg) translateX(250px);
    }
}

body.app-body .sidebar nav a:active {
    box-shadow:
        0 3px 9px rgba(0, 0, 0, .2),
        inset 0 2px 5px rgba(0, 0, 0, .16);
    transform: translate3d(2px, 0, 0) scale(.99);
}

body.app-body .sidebar nav a.active {
    border-color: color-mix(in srgb, var(--pp-olive) 48%, rgba(255, 255, 255, .18));
    box-shadow:
        inset 3px 0 0 rgba(255, 255, 255, .68),
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 9px 23px color-mix(in srgb, var(--pp-olive) 38%, transparent),
        0 0 22px color-mix(in srgb, var(--pp-olive) 25%, transparent);
    transform: translate3d(2px, -1px, 0);
}

body.app-body .sidebar nav a:focus-visible {
    outline: 2px solid color-mix(in srgb, white 75%, var(--pp-olive));
    outline-offset: 3px;
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--pp-olive) 20%, transparent),
        0 8px 20px rgba(0, 0, 0, .22);
}

/* Personalakte v2: Profilkopf, Kennzahlen und zweispaltige Stammdaten. */
.personal-file-page-head {
    margin-bottom: 18px;
}

.personal-file-page-head h1 {
    margin-bottom: 12px;
}

.personal-file-back {
    color: var(--pp-muted);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.personal-file-back:hover {
    color: var(--pp-olive-dark);
}

body.app-body .personal-file-profile {
    display: grid;
    grid-template-columns: minmax(330px, 1.25fr) minmax(520px, 1.55fr);
    align-items: center;
    gap: 34px;
    width: 100%;
    max-width: 1480px;
    min-height: 210px;
    margin-inline: auto;
    padding: 30px;
}

.personal-file-identity {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.personal-file-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 126px;
    width: 126px;
    height: 126px;
    color: white;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .18), transparent 32%),
        linear-gradient(145deg, var(--pp-olive), var(--pp-olive-dark));
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--pp-olive-dark) 23%, transparent),
        0 0 25px color-mix(in srgb, var(--pp-olive) 13%, transparent);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.04em;
}

body.app-body .personal-file-identity h2 {
    margin: 0 0 9px;
    color: var(--pp-ink);
    font-size: clamp(26px, 2.2vw, 36px);
    line-height: 1.05;
    letter-spacing: -.035em;
    text-transform: none;
}

.personal-file-identity p {
    margin: 7px 0 0;
    color: var(--pp-muted) !important;
    font-size: 14px;
}

.personal-file-identity p b {
    padding-inline: 7px;
    color: var(--pp-line);
}

.personal-file-status,
.personal-file-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: var(--pp-olive-dark);
    border-radius: 8px;
    background: color-mix(in srgb, var(--pp-olive) 12%, white);
    font-size: 12px;
    font-weight: 750;
}

.personal-file-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-olive);
    box-shadow: 0 0 9px color-mix(in srgb, var(--pp-olive) 65%, transparent);
}

.personal-file-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.personal-file-metrics > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    min-height: 118px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--pp-olive) 10%, var(--pp-line));
    border-radius: 15px;
    background: linear-gradient(145deg, #fbfcf9, #f4f5f1);
    box-shadow: 0 8px 20px rgba(29, 42, 34, .06);
}

.personal-file-metrics > div > span {
    grid-row: 1 / 3;
    color: var(--pp-olive-dark);
    font-size: 29px;
}

.personal-file-metrics strong {
    color: var(--pp-olive-dark);
    font-size: 29px;
    line-height: 1;
}

.personal-file-metrics small {
    align-self: start;
    margin-top: 7px;
    color: var(--pp-muted);
    font-size: 11px;
    font-weight: 650;
}

body.app-body .personal-file-shell {
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
}

.personal-file-shell > .tabs {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 18px 16px 12px;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    border-radius: 0;
    box-shadow: none;
    scrollbar-width: thin;
}

body.app-body .personal-file-shell > .tabs .tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
    color: var(--pp-ink);
    border: 1px solid #dfe4dc;
    border-radius: 10px;
    background: linear-gradient(145deg, #f8f9f7, #eef1ed);
    box-shadow:
        0 4px 10px rgba(26, 39, 32, .055),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    font-size: 12px;
    font-weight: 720;
    white-space: nowrap;
    transform: translateY(0);
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .personal-file-shell > .tabs .tab:hover {
        color: var(--pp-olive-dark);
        border-color: color-mix(in srgb, var(--pp-olive) 35%, #dfe4dc);
        background: color-mix(in srgb, var(--pp-olive) 8%, white);
        box-shadow:
            0 8px 17px rgba(26, 39, 32, .1),
            0 0 15px color-mix(in srgb, var(--pp-olive) 11%, transparent);
        transform: translateY(-2px);
    }
}

body.app-body .personal-file-shell > .tabs .tab.active {
    color: var(--pp-olive-dark);
    border-color: color-mix(in srgb, var(--pp-olive) 45%, var(--pp-line));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--pp-olive) 13%, white),
        color-mix(in srgb, var(--pp-olive) 7%, white)
    );
    box-shadow:
        inset 0 -3px 0 var(--pp-olive-dark),
        inset 0 1px 0 rgba(255, 255, 255, .75),
        0 8px 17px color-mix(in srgb, var(--pp-olive) 18%, transparent),
        0 0 14px color-mix(in srgb, var(--pp-olive) 10%, transparent);
    transform: translateY(-1px);
}

.personal-file-shell > .tab-panel {
    padding: 28px 30px 32px;
}

.personal-file-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

body.app-body .personal-file-section-head h2 {
    margin: 0;
    color: var(--pp-ink);
    font-size: 19px;
    text-transform: none;
}

.personal-file-section-head .button-link {
    min-height: 42px;
    padding: 10px 17px;
}

body.app-body .personal-file-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    overflow: visible;
}

body.app-body .personal-file-details tbody {
    display: contents;
}

body.app-body .personal-file-details tr {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(120px, 1.35fr);
    align-items: center;
    min-height: 72px;
    border: 1px solid var(--pp-line);
    border-bottom: 0;
}

body.app-body .personal-file-details tr:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--pp-line);
}

body.app-body .personal-file-details td {
    padding: 16px 18px;
    border: 0;
}

body.app-body .personal-file-details td:first-child {
    color: var(--pp-muted);
    font-size: 12px;
    font-weight: 650;
}

body.app-body .personal-file-details td:last-child {
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 650;
}

@media (max-width: 1180px) {
    body.app-body .personal-file-profile {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.app-body .personal-file-profile {
        gap: 24px;
        min-height: 0;
        padding: 20px;
    }

    .personal-file-identity {
        align-items: flex-start;
        gap: 17px;
    }

    .personal-file-avatar {
        flex-basis: 76px;
        width: 76px;
        height: 76px;
        font-size: 24px;
    }

    .personal-file-metrics {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .personal-file-metrics > div {
        min-height: 78px;
        padding: 13px 16px;
    }

    .personal-file-shell > .tab-panel {
        padding: 20px 16px 24px;
    }

    body.app-body .personal-file-details {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.app-body .personal-file-details tr {
        grid-template-columns: minmax(115px, .8fr) minmax(0, 1.25fr);
    }

    body.app-body .personal-file-details tr:nth-last-child(2) {
        border-bottom: 0;
    }
}

html.dark-mode body.app-body .personal-file-metrics > div {
    border-color: var(--pp-line);
    background: color-mix(in srgb, var(--pp-panel) 86%, #283329);
}

html.dark-mode body.app-body .personal-file-status,
html.dark-mode body.app-body .personal-file-inline-status,
html.dark-mode body.app-body .personal-file-shell > .tabs .tab.active {
    color: #c8e27d;
    background: color-mix(in srgb, var(--pp-olive) 18%, var(--pp-panel));
}

html.dark-mode body.app-body .personal-file-shell > .tabs .tab {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: color-mix(in srgb, var(--pp-panel) 80%, #2b3430);
    box-shadow:
        0 5px 13px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* Arbeitszeit v2: Filter, Zeitkonto, Erfassung und Historie als Lagebild. */
.worktime-page-head {
    margin-bottom: 22px;
}

.worktime-overview {
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
}

.worktime-overview-without-account {
    grid-template-columns: minmax(270px, 320px);
}

.worktime-overview-account-only {
    grid-template-columns: minmax(0, 1fr);
}

body.app-body .worktime-overview > .card {
    min-height: 206px;
    margin: 0;
    border-radius: 16px;
}

body.app-body .worktime-employee-card {
    padding: 24px 20px;
}

body.app-body .worktime-employee-card h2,
body.app-body .worktime-card-heading h2,
body.app-body .worktime-capture-card h2,
body.app-body .worktime-entries-card h2 {
    margin: 0;
    color: var(--pp-ink);
    font-size: 17px;
    text-transform: none;
}

.worktime-employee-form {
    margin-top: 25px;
}

body.app-body .worktime-employee-form select {
    width: 100%;
    min-height: 48px;
    margin: 0;
}

body.app-body .worktime-account-card {
    padding: 23px 28px;
    container-name: worktime-account;
    container-type: inline-size;
}

.worktime-card-heading {
    margin-bottom: 22px;
}

.worktime-card-heading p {
    margin: 4px 0 0;
    color: var(--pp-muted) !important;
    font-size: 12px;
}

body.app-body .worktime-account-card .year-summary.clean-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

body.app-body .worktime-account-card .year-summary.clean-summary > div {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 105px;
    padding: 12px 22px;
    border: 0;
    border-right: 1px solid var(--pp-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.app-body .worktime-account-card .year-summary.clean-summary > div:last-child {
    border-right: 0;
}

body.app-body .worktime-account-card .year-summary.clean-summary strong {
    color: var(--pp-muted);
    font-size: 11px;
    text-align: center;
}

body.app-body .worktime-account-card .year-summary.clean-summary span {
    margin-top: 9px;
    color: var(--pp-ink);
    font-size: clamp(18px, 1.65vw, 26px);
    font-weight: 780;
    text-align: center;
    white-space: nowrap;
}

body.app-body .worktime-account-card .year-summary.clean-summary small {
    margin-top: 7px;
    color: var(--pp-muted);
    font-size: 10px;
    text-align: center;
}

body.app-body .worktime-account-card .year-summary.clean-summary .balance-positive {
    color: var(--pp-olive-dark);
}

/* Die Karte kann durch die Mitarbeiterauswahl deutlich schmaler als das
   Browserfenster sein. Deshalb richtet sich der Umbruch nach der Karte. */
@container worktime-account (max-width: 1100px) {
    body.app-body .worktime-account-card .year-summary.clean-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.app-body .worktime-account-card .year-summary.clean-summary > div:nth-child(3) {
        border-right: 0;
    }
}

@container worktime-account (max-width: 650px) {
    body.app-body .worktime-account-card .year-summary.clean-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-body .worktime-account-card .year-summary.clean-summary > div,
    body.app-body .worktime-account-card .year-summary.clean-summary > div:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid var(--pp-line);
    }

    body.app-body .worktime-account-card .year-summary.clean-summary > div:last-child {
        border-bottom: 0;
    }
}

body.app-body .worktime-capture-card,
body.app-body .worktime-entries-card {
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    padding: 24px;
    border-radius: 16px;
}

body.app-body .worktime-capture-card h2::before {
    margin-right: 9px;
    content: "◷";
    color: var(--pp-olive-dark);
}

body.app-body .worktime-capture-card form.worktime-entry-form {
    display: grid !important;
    grid-template-columns: minmax(150px, .85fr) minmax(135px, .72fr) minmax(135px, .72fr) minmax(260px, 2fr) auto;
    align-items: end;
    width: 100%;
    max-width: none;
    gap: 16px;
    margin-top: 22px;
}

body.app-body .worktime-capture-card form.worktime-entry-form.has-break-field {
    grid-template-columns: minmax(145px, .8fr) minmax(125px, .65fr) minmax(125px, .65fr) minmax(125px, .6fr) minmax(220px, 1.6fr) auto;
}

.worktime-entry-form > div {
    min-width: 0;
}

body.app-body .worktime-entry-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--pp-ink);
    font-size: 12px;
    font-weight: 700;
}

body.app-body .worktime-entry-form input {
    width: 100%;
    min-height: 48px;
    margin: 0;
}

.worktime-entry-form .form-actions {
    align-self: end;
    margin: 0;
}

.worktime-entry-form .form-actions button {
    min-height: 48px;
    margin: 0;
    padding-inline: 22px;
}

body.app-body .worktime-entries-card h2::before {
    margin-right: 9px;
    content: "▣";
    color: var(--pp-olive-dark);
}

body.app-body .worktime-entries-card .time-entry-table {
    margin-top: 20px;
}

body.app-body .worktime-entries-card .time-entry-table th {
    padding-block: 14px;
    background: color-mix(in srgb, var(--pp-ink) 4%, var(--pp-panel));
}

body.app-body .worktime-entries-card .time-entry-table td {
    padding-block: 15px;
}

body.app-body .worktime-entries-card .vacation-status {
    border-radius: 8px;
}

/* Mit sichtbarer Desktop-Seitenleiste wird der Inhaltsbereich schon vor
   1260 px zu schmal für sechs Erfassungsfelder. Deshalb früher umbrechen. */
@media (max-width: 1400px) {
    body.app-body .worktime-account-card .year-summary.clean-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.app-body .worktime-account-card .year-summary.clean-summary > div:nth-child(3) {
        border-right: 0;
    }

    body.app-body .worktime-capture-card form.worktime-entry-form,
    body.app-body .worktime-capture-card form.worktime-entry-form.has-break-field {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .worktime-note-field {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    /* Die mobile Kopf- und Fußnavigation ist ab 900 px aktiv. Eine ältere,
       spätere Sidebar-Regel darf sie in diesem Bereich nicht überlagern. */
    body.app-body .sidebar {
        display: none !important;
    }

    body.app-body .main {
        width: 100%;
        max-width: none !important;
        margin-left: 0;
    }

    .worktime-overview {
        grid-template-columns: 1fr;
    }

    body.app-body .worktime-overview > .card {
        min-height: 0;
    }

    body.app-body .worktime-account-card .year-summary.clean-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-body .worktime-account-card .year-summary.clean-summary > div,
    body.app-body .worktime-account-card .year-summary.clean-summary > div:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid var(--pp-line);
    }

    body.app-body .worktime-account-card .year-summary.clean-summary > div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 700px) {
    body.app-body .worktime-account-card,
    body.app-body .worktime-capture-card,
    body.app-body .worktime-entries-card {
        padding: 18px 15px;
    }

    body.app-body .worktime-capture-card form.worktime-entry-form,
    body.app-body .worktime-capture-card form.worktime-entry-form.has-break-field {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .worktime-note-field {
        grid-column: auto;
    }

    .worktime-entry-form .form-actions button {
        width: 100%;
    }
}

html.dark-mode body.app-body .worktime-account-card .year-summary.clean-summary > div {
    border-color: var(--pp-line);
}

/* Einstellungen v8: beide Navigationsebenen als eindeutige Reiter. */
body.app-body .settings-category-tabs,
body.app-body .settings-tabs {
    gap: 9px;
}

body.app-body .settings-category-tabs a,
body.app-body .settings-tabs a {
    border: 1px solid #dfe4dc;
    background: linear-gradient(145deg, #f8f9f7, #eef1ed);
    box-shadow:
        0 4px 10px rgba(26, 39, 32, .055),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    transform: translateY(0);
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body.app-body .settings-category-tabs a {
    min-height: 48px;
    border-radius: 11px;
}

body.app-body .settings-tabs a {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 720;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .settings-category-tabs a:hover,
    body.app-body .settings-tabs a:hover {
        color: var(--pp-olive-dark);
        border-color: color-mix(in srgb, var(--pp-olive) 35%, #dfe4dc);
        background: color-mix(in srgb, var(--pp-olive) 8%, white);
        box-shadow:
            0 8px 17px rgba(26, 39, 32, .1),
            0 0 15px color-mix(in srgb, var(--pp-olive) 11%, transparent);
        transform: translateY(-2px);
    }
}

body.app-body .settings-category-tabs a.active,
body.app-body .settings-tabs a.active {
    color: #fff;
    border-color: color-mix(in srgb, var(--pp-olive-dark) 68%, var(--pp-line));
    background: linear-gradient(110deg, var(--pp-olive-dark), var(--pp-olive));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 8px 18px color-mix(in srgb, var(--pp-olive) 25%, transparent),
        0 0 15px color-mix(in srgb, var(--pp-olive) 14%, transparent);
    transform: translateY(-1px);
}

html.dark-mode body.app-body .settings-category-tabs a,
html.dark-mode body.app-body .settings-tabs a {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: color-mix(in srgb, var(--pp-panel) 80%, #2b3430);
    box-shadow:
        0 5px 13px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

html.dark-mode body.app-body .settings-category-tabs a.active,
html.dark-mode body.app-body .settings-tabs a.active {
    color: #fff;
    background: linear-gradient(110deg, var(--pp-olive-dark), var(--pp-olive));
}

/* Einheitliche Auswahlreiter: Kalender, Jahresfilter und Arbeitswochen. */
body.app-body .staffing-rule-chip,
body.app-body .department-chip,
body.app-body .filter-pill,
body.app-body .settings-subtabs a,
body.app-body .settings-subtabs button,
body.app-body .workdays-mode-switch label {
    min-height: 44px;
    padding: 10px 14px;
    color: var(--pp-ink);
    border: 1px solid #dfe4dc;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #f8f9f7, #eef1ed) !important;
    box-shadow:
        0 4px 10px rgba(26, 39, 32, .055),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    font-size: 12px;
    font-weight: 720;
    transform: translateY(0);
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body .staffing-rule-chip:hover,
    body.app-body .department-chip:hover,
    body.app-body .filter-pill:hover,
    body.app-body .settings-subtabs a:hover,
    body.app-body .settings-subtabs button:hover,
    body.app-body .workdays-mode-switch label:hover {
        color: var(--pp-olive-dark);
        border-color: color-mix(in srgb, var(--pp-olive) 35%, #dfe4dc);
        background: color-mix(in srgb, var(--pp-olive) 8%, white) !important;
        box-shadow:
            0 8px 17px rgba(26, 39, 32, .1),
            0 0 15px color-mix(in srgb, var(--pp-olive) 11%, transparent);
        transform: translateY(-2px);
    }
}

body.app-body .staffing-rule-chip.active,
body.app-body .department-chip.active,
body.app-body .department-chip:has(input:checked),
body.app-body .filter-pill.active,
body.app-body .settings-subtabs a.active,
body.app-body .workdays-mode-switch label:has(input:checked) {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--pp-olive-dark) 68%, var(--pp-line));
    background: linear-gradient(110deg, var(--pp-olive-dark), var(--pp-olive)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 8px 18px color-mix(in srgb, var(--pp-olive) 25%, transparent),
        0 0 15px color-mix(in srgb, var(--pp-olive) 14%, transparent);
    transform: translateY(-1px);
}

body.app-body .workdays-mode-switch label {
    margin: 0;
    cursor: pointer;
}

body.app-body .workdays-mode-switch input[type="radio"] {
    accent-color: var(--pp-olive-dark);
}

html.dark-mode body.app-body .staffing-rule-chip,
html.dark-mode body.app-body .department-chip,
html.dark-mode body.app-body .filter-pill,
html.dark-mode body.app-body .settings-subtabs a,
html.dark-mode body.app-body .settings-subtabs button,
html.dark-mode body.app-body .workdays-mode-switch label {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: color-mix(in srgb, var(--pp-panel) 80%, #2b3430) !important;
    box-shadow:
        0 5px 13px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* Verbindlicher Reiterstandard v9: Die Personalakte ist die Referenz.
   Diese Abschlussregeln neutralisieren ältere Theme-Sonderfälle. */
body.app-body :is(
    .personal-file-shell > .tabs .tab,
    .settings-tabs a,
    .settings-subtabs a,
    .settings-subtabs button,
    .staffing-rule-chip,
    .department-chip,
    .filter-pill,
    .workdays-mode-switch label
) {
    min-height: 44px !important;
    padding: 10px 14px !important;
    color: var(--pp-ink) !important;
    border: 1px solid #dfe4dc !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #f8f9f7, #eef1ed) !important;
    box-shadow:
        0 4px 10px rgba(26, 39, 32, .055),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    transform: translateY(0) !important;
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

body.app-body :is(
    .personal-file-shell > .tabs .tab.active,
    .settings-tabs a.active,
    .settings-subtabs a.active,
    .staffing-rule-chip.active,
    .department-chip.active,
    .department-chip:has(input:checked),
    .filter-pill.active,
    .workdays-mode-switch label:has(input:checked)
) {
    color: var(--pp-olive-dark) !important;
    border-color: color-mix(in srgb, var(--pp-olive) 45%, var(--pp-line)) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--pp-olive) 13%, white),
        color-mix(in srgb, var(--pp-olive) 7%, white)
    ) !important;
    box-shadow:
        inset 0 -3px 0 var(--pp-olive-dark),
        inset 0 1px 0 rgba(255, 255, 255, .75),
        0 8px 17px color-mix(in srgb, var(--pp-olive) 18%, transparent),
        0 0 14px color-mix(in srgb, var(--pp-olive) 10%, transparent) !important;
    transform: translateY(-1px) !important;
}

/* Ältere Theme-Regeln färben den inneren span aktiver Abteilungs-Chips
   weiterhin weiß. Das Abschlusslayout nutzt im hellen Theme jedoch einen
   sehr hellen Aktiv-Hintergrund; deshalb muss auch der eigentliche Text den
   olivdunklen Kontrast übernehmen. */
body.app-body .main .department-chip.active span,
body.app-body .main .department-chip:has(input:checked) span {
    color: var(--pp-olive-dark) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-body :is(
        .personal-file-shell > .tabs .tab,
        .settings-tabs a,
        .settings-subtabs a,
        .settings-subtabs button,
        .staffing-rule-chip,
        .department-chip,
        .filter-pill,
        .workdays-mode-switch label
    ):not(.active):not(:has(input:checked)):hover {
        color: var(--pp-olive-dark) !important;
        border-color: color-mix(in srgb, var(--pp-olive) 35%, #dfe4dc) !important;
        background: color-mix(in srgb, var(--pp-olive) 8%, white) !important;
        box-shadow:
            0 8px 17px rgba(26, 39, 32, .1),
            0 0 15px color-mix(in srgb, var(--pp-olive) 11%, transparent) !important;
        transform: translateY(-2px) !important;
    }
}

html.dark-mode body.app-body :is(
    .personal-file-shell > .tabs .tab,
    .settings-tabs a,
    .settings-subtabs a,
    .settings-subtabs button,
    .staffing-rule-chip,
    .department-chip,
    .filter-pill,
    .workdays-mode-switch label
) {
    color: #dce4df !important;
    border-color: #3a4743 !important;
    background: linear-gradient(145deg, #2b3532, #222c29) !important;
    box-shadow:
        0 5px 13px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

html.dark-mode body.app-body :is(
    .personal-file-shell > .tabs .tab.active,
    .settings-tabs a.active,
    .settings-subtabs a.active,
    .staffing-rule-chip.active,
    .department-chip.active,
    .department-chip:has(input:checked),
    .filter-pill.active,
    .workdays-mode-switch label:has(input:checked)
) {
    color: #e8f4c7 !important;
    border-color: #78973b !important;
    background: linear-gradient(145deg, #405526, #32451f) !important;
    box-shadow:
        inset 0 -3px 0 #9ab84a,
        inset 0 1px 0 rgba(255, 255, 255, .09),
        0 8px 19px rgba(91, 124, 38, .24),
        0 0 16px rgba(131, 166, 54, .14) !important;
}

html.dark-mode body.app-body .main .department-chip.active span,
html.dark-mode body.app-body .main .department-chip:has(input:checked) span {
    color: #e8f4c7 !important;
}

@media (hover: hover) and (pointer: fine) {
    html.dark-mode body.app-body :is(
        .personal-file-shell > .tabs .tab,
        .settings-tabs a,
        .settings-subtabs a,
        .settings-subtabs button,
        .staffing-rule-chip,
        .department-chip,
        .filter-pill,
        .workdays-mode-switch label
    ):not(.active):not(:has(input:checked)):hover {
        color: #dff0b5 !important;
        border-color: #637847 !important;
        background: linear-gradient(145deg, #33402f, #29352e) !important;
        box-shadow:
            0 9px 20px rgba(0, 0, 0, .3),
            0 0 17px rgba(132, 165, 63, .15) !important;
    }
}
/* Arbeitszeit-Einstellungen: Faktoren fachlich gruppieren statt als
   gleichförmige Feldwüste über die gesamte Karte zu verteilen. */
.worktime-factor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.worktime-factor-heading h2,
.worktime-factor-heading p {
    margin-top: 0;
}

.worktime-factor-heading p {
    margin-bottom: 0;
}

.worktime-factor-badge {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid #c7d69b;
    border-radius: 999px;
    color: #526d13;
    background: #f2f7e5;
    font-size: 12px;
    font-weight: 800;
}

.worktime-factor-form {
    display: grid;
    gap: 16px;
}

.worktime-factor-group {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid #d9e1cc;
    border-radius: 14px;
    background: #fafcf7;
}

.worktime-factor-group.night {
    background: #f8f9fc;
    border-color: #dce1eb;
}

.worktime-factor-group legend {
    padding: 0 8px;
    color: #263224;
    font-size: 16px;
    font-weight: 850;
}

.worktime-factor-group > p {
    margin: -2px 0 14px;
    color: #697386;
    font-size: 13px;
}

.worktime-factor-grid {
    display: grid;
    gap: 14px;
}

.worktime-factor-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.worktime-factor-grid.night-grid {
    grid-template-columns: minmax(180px, .7fr) minmax(360px, 2fr);
}

.worktime-factor-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e0e6d7;
    border-radius: 11px;
    background: #fff;
}

.worktime-factor-group.night .worktime-factor-field {
    border-color: #e1e5ed;
}

.worktime-factor-field > span:first-child {
    color: #27313f;
    font-weight: 800;
}

.worktime-factor-field small {
    color: #7a8494;
    font-size: 11px;
    line-height: 1.35;
}

.factor-input-wrap {
    position: relative;
    display: block;
}

.factor-input-wrap input {
    width: 100%;
    margin: 0;
    padding-right: 44px;
    font-size: 18px;
    font-weight: 750;
}

.factor-input-wrap > b {
    position: absolute;
    top: 50%;
    right: 25px;
    color: #7d8c67;
    font-size: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}

.night-time-range {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    align-items: center;
    gap: 10px;
}

.night-time-range input {
    width: 100%;
    margin: 0;
    font-size: 17px;
    font-weight: 750;
}

.night-time-range b {
    color: #788292;
    font-size: 12px;
    text-transform: uppercase;
}

.worktime-factor-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #bdd8f6;
    border-radius: 11px;
    color: #294b70;
    background: #f1f7fe;
}

.worktime-factor-rule > span {
    font-size: 18px;
    line-height: 1.2;
}

.worktime-factor-rule p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.worktime-factor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.worktime-factor-actions small {
    color: #7a8494;
    line-height: 1.4;
}

.worktime-factor-actions button {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

html.dark-mode body.app-body .worktime-factor-badge {
    color: #d7e9ad;
    border-color: rgba(164, 190, 91, .45);
    background: rgba(132, 160, 55, .18);
}

html.dark-mode body.app-body .worktime-factor-group,
html.dark-mode body.app-body .worktime-factor-group.night {
    border-color: var(--pp-line);
    background: rgba(255, 255, 255, .025);
}

html.dark-mode body.app-body .worktime-factor-group legend,
html.dark-mode body.app-body .worktime-factor-field > span:first-child {
    color: var(--pp-ink);
}

html.dark-mode body.app-body .worktime-factor-field {
    border-color: var(--pp-line);
    background: rgba(255, 255, 255, .045);
}

html.dark-mode body.app-body .worktime-factor-rule {
    color: #c2d9f5;
    border-color: rgba(96, 165, 250, .35);
    background: rgba(59, 130, 246, .12);
}

@media (max-width: 820px) {
    .worktime-factor-grid.three,
    .worktime-factor-grid.night-grid {
        grid-template-columns: 1fr;
    }

    .worktime-factor-heading,
    .worktime-factor-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .worktime-factor-badge {
        align-self: flex-start;
    }

    .worktime-factor-actions button {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .worktime-factor-group {
        padding: 13px;
    }

    .worktime-factor-field {
        padding: 12px;
    }

    .night-time-range {
        grid-template-columns: 1fr;
    }

    .night-time-range b {
        text-align: center;
    }
}

/* Schichtplan-Browserdruck als Gegenstück zum serverseitigen PDF.
   Diese Regeln stehen absichtlich in der zuletzt geladenen CSS-Schicht:
   ältere Layoutregeln reservieren sonst trotz ausgeblendeter Sidebar deren
   Breite und drücken den Ausdruck auf die linke Seitenhälfte. */
.shift-print-heading {
    display: none;
}

.standard-print-heading {
    display: none;
}

/* Einheitliche Typografie für die regulären Anwendungsseiten. Spezielle
   Kennzahlen, Kalenderzellen und Profilköpfe behalten bewusst ihre eigene
   Darstellungsgröße; die wiederkehrende Seitenhierarchie kommt aus diesen
   zentralen Stufen. */
body.app-body {
    --pp-type-page-title: 29px;
    --pp-type-page-subtitle: 15px;
    --pp-type-section-title: 19px;
    --pp-type-subsection-title: 16px;
    --pp-type-body: 15px;
    --pp-type-description: 14px;
    --pp-type-label: 13px;
    --pp-type-control: 15px;
    --pp-type-button: 14px;
    --pp-type-table: 14px;
    --pp-type-small: 12px;
}

body.app-body .main > .main-header h1 {
    font-size: var(--pp-type-page-title);
    line-height: 1.1;
}

body.app-body .main > .main-header p {
    font-size: var(--pp-type-page-subtitle);
    line-height: 1.4;
}

body.app-body .main > .card > h2,
body.app-body .main > .card > header > h2 {
    font-size: var(--pp-type-section-title);
    line-height: 1.2;
}

body.app-body .main > .card h3 {
    font-size: var(--pp-type-subsection-title);
    line-height: 1.25;
}

body.app-body .main > .card > p.muted,
body.app-body .main > .card > header > p.muted {
    font-size: var(--pp-type-description);
    line-height: 1.45;
}

body.app-body .main label {
    font-size: var(--pp-type-label);
    line-height: 1.35;
}

body.app-body .main input:not([type="checkbox"]):not([type="radio"]),
body.app-body .main select,
body.app-body .main textarea {
    font-size: var(--pp-type-control);
}

body.app-body .main button:not(.small-button):not(.small-danger-button):not(.mini-button):not(.schichtplan-delete-btn),
body.app-body .main .button-link:not(.button-compact) {
    font-size: var(--pp-type-button);
    line-height: 1.2;
}

body.app-body .main .table {
    font-size: var(--pp-type-table);
}

body.app-body .main .settings-grid-form small,
body.app-body .main .minimum-form small,
body.app-body .main .form-grid small,
body.app-body .main > .card > small.muted,
body.app-body .main .help-text {
    font-size: var(--pp-type-small);
}

/* Mindestbesetzung: Alle Feldtitel beginnen auf derselben Höhe. Der Hinweis
   unter "Abteilung" darf die Zahlenfelder nicht mehr nach unten drücken. */
@media (min-width: 701px) {
    body.app-body .minimum-form {
        align-items: start;
    }

    body.app-body .minimum-form > div:not(.calendar-form-action) {
        display: grid;
        grid-template-rows: auto 48px 20px;
        align-content: start;
        gap: 6px;
        min-width: 0;
    }

    body.app-body .minimum-form input {
        height: 48px;
    }

    body.app-body .minimum-form .calendar-form-action {
        align-self: start;
        padding-top: 24px;
    }

    body.app-body .minimum-form .calendar-form-action button {
        min-height: 48px;
        margin: 0;
    }
}

@media (max-width: 700px) {
    body.app-body {
        --pp-type-page-title: 26px;
        --pp-type-page-subtitle: 14px;
        --pp-type-section-title: 18px;
        --pp-type-control: 16px;
    }

    body.app-body .minimum-form .calendar-form-action {
        padding-top: 0;
    }
}

@media print {
    /* Gemeinsame Druckbasis für alle Berichts- und Planseiten. Ohne diese
       Korrektur kann die unsichtbare Desktop-Sidebar weiterhin Breite im
       Hauptbereich reservieren. */
    html,
    body.app-body {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.app-body .main {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    @page work-plan-print {
        size: A4 landscape;
        margin: 10mm;
    }

    @page reports-print {
        size: A4 landscape;
        margin: 10mm;
    }

    @page calendar-print {
        size: A3 landscape;
        margin: 10mm;
    }

    @page year-print {
        size: A3 landscape;
        margin: 10mm;
    }

    body.work-plan-page {
        page: work-plan-print;
    }

    body.reports-print-page {
        page: reports-print;
    }

    body.calendar-print-page {
        page: calendar-print;
    }

    body.year-print-page {
        page: year-print;
    }

    body.app-body .standard-print-heading {
        display: block !important;
        margin: 0 0 5mm !important;
    }

    body.app-body .standard-print-heading h1 {
        margin: 0 0 1.2mm !important;
        color: #172033 !important;
        font-size: 18pt !important;
        line-height: 1.05 !important;
    }

    body.app-body .standard-print-heading p {
        margin: 0 !important;
        color: #667085 !important;
        font-size: 10pt !important;
        line-height: 1.2 !important;
    }

    body.reports-print-page .report-disclosure {
        break-inside: auto;
        page-break-inside: auto;
    }

    body.reports-print-page .report-disclosure + .report-disclosure {
        break-before: page;
        page-break-before: always;
    }

    @page shift-plan {
        size: A4 portrait;
        margin: 10mm;
    }

    html,
    body.shift-plan-page {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.shift-plan-page .main {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.shift-plan-page .shift-print-heading {
        display: block !important;
        height: 22mm;
        margin: 0 0 2mm !important;
        overflow: hidden;
    }

    body.shift-plan-page .shift-print-heading h1 {
        margin: 0 0 1.2mm !important;
        color: #172033 !important;
        font-size: 16pt !important;
        line-height: 1.05 !important;
    }

    body.shift-plan-page .shift-print-heading p {
        margin: 0 !important;
        color: #667085 !important;
        font-size: 10.5pt !important;
        line-height: 1.15 !important;
    }

    body.shift-plan-page .schichtplan-grid {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        height: 245mm !important;
        margin: 0 !important;
        transform: none !important;
        zoom: 1 !important;
    }

    body.shift-plan-page .schichtplan-row {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.shift-plan-page .schichtplan-day {
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
    }
}