/* ======================================================================
   Version 3.0.3 — Dark Glass App Theme
   Überträgt die Optik der neuen Login-Seite auf die eigentliche Anwendung.
   ====================================================================== */
:root {
    --app-bg: #061426;
    --app-bg-soft: #0a1d35;
    --app-panel: rgba(12, 31, 56, 0.82);
    --app-panel-strong: rgba(8, 24, 45, 0.95);
    --app-border: rgba(91, 154, 255, 0.26);
    --app-border-soft: rgba(148, 177, 220, 0.16);
    --app-text: #f4f7ff;
    --app-muted: #aebbd0;
    --app-accent: #3b82f6;
    --app-accent-strong: #2563eb;
    --app-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

body.app-body {
    color: var(--app-text);
    background:
        radial-gradient(circle at 70% 0%, rgba(37, 99, 235, 0.14), transparent 32%),
        linear-gradient(145deg, #07172b 0%, #061426 58%, #040d1a 100%);
    background-attachment: fixed;
}

.sidebar {
    width: 280px;
    background: linear-gradient(180deg, rgba(7, 20, 38, 0.98), rgba(4, 14, 28, 0.98));
    border-right: 1px solid var(--app-border-soft);
    box-shadow: 16px 0 40px rgba(0, 0, 0, 0.18);
    padding: 24px 18px;
}

.brand {
    padding: 0 4px 22px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--app-border-soft);
}

.sidebar-logo {
    width: 100%;
    max-width: 190px;
    max-height: 100px;
    object-fit: contain;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.brand strong {
    color: #fff;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.brand span {
    color: var(--app-muted);
}

.sidebar nav {
    gap: 7px;
}

.sidebar a {
    color: #c6d2e5;
    border: 1px solid transparent;
    padding: 12px 14px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.sidebar a:hover {
    color: white;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.18);
    transform: translateX(2px);
}

.sidebar a.active {
    color: white;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.30), rgba(37, 99, 235, 0.16));
    border-color: rgba(96, 165, 250, 0.34);
    box-shadow: inset 3px 0 0 #60a5fa, 0 8px 20px rgba(0, 0, 0, 0.15);
}

.main {
    min-width: 0;
    padding: 34px;
}

.main-header h1,
.card h2,
.card h3,
.dashboard-today-card h2 {
    color: var(--app-text);
}

.main-header p,
.muted,
small.muted,
.version {
    color: var(--app-muted) !important;
}

.card,
.settings-panel,
.calendar-panel,
.form-card,
.stamp-clock-card {
    color: var(--app-text);
    background: linear-gradient(145deg, rgba(14, 35, 63, 0.90), rgba(7, 23, 43, 0.88));
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.card {
    border-radius: 20px;
}

.card p,
.card li,
.card td,
.card label,
.card span {
    color: inherit;
}

input,
select,
textarea {
    color: var(--app-text);
    background: rgba(5, 18, 35, 0.72);
    border-color: rgba(125, 164, 219, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

input::placeholder,
textarea::placeholder {
    color: #7f90aa;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #4f8ff7;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

select option {
    color: #111827;
    background: white;
}

button,
.logout,
.button-link {
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-strong));
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
}

button:hover,
.logout:hover,
.button-link:hover {
    filter: brightness(1.08);
}

.small-link,
.tab {
    color: #dce8ff;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.small-link:hover,
.tab:hover {
    color: white;
    background: rgba(59, 130, 246, 0.20);
}

.tab.active {
    color: white;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: rgba(96, 165, 250, 0.55);
}

.tabs,
.settings-tabs,
.settings-subtabs {
    background: rgba(5, 18, 35, 0.48);
    border-color: var(--app-border-soft);
}

.table {
    color: var(--app-text);
}

.table th {
    color: #dbe7f8;
    background: rgba(59, 130, 246, 0.12);
}

.table td {
    border-color: var(--app-border-soft);
}

.table tr:hover {
    background: rgba(59, 130, 246, 0.07);
}

.back-link {
    color: #78a9ff;
}

.dashboard-today-card {
    color: white;
    background:
        radial-gradient(circle at 70% 10%, rgba(59, 130, 246, 0.24), transparent 40%),
        linear-gradient(155deg, #0c203a, #061426);
    border: 1px solid rgba(96, 165, 250, 0.30);
    box-shadow: var(--app-shadow);
}

.dashboard-date,
.dashboard-today-card p,
.today-big-number span {
    color: #becbe0;
}

.status-card {
    color: #eef5ff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
}

.status-work { background: linear-gradient(145deg, rgba(22, 163, 74, .28), rgba(5, 65, 38, .38)); }
.status-vacation { background: linear-gradient(145deg, rgba(59, 130, 246, .30), rgba(30, 64, 175, .34)); }
.status-free { background: linear-gradient(145deg, rgba(234, 179, 8, .28), rgba(113, 63, 18, .34)); }
.status-sick { background: linear-gradient(145deg, rgba(239, 68, 68, .28), rgba(127, 29, 29, .34)); }
.status-training { background: linear-gradient(145deg, rgba(139, 92, 246, .28), rgba(76, 29, 149, .34)); }
.status-business { background: linear-gradient(145deg, rgba(6, 182, 212, .28), rgba(21, 94, 117, .34)); }

.warning-box {
    color: var(--app-text);
    border-color: rgba(251, 191, 36, 0.25);
    background: rgba(120, 74, 5, 0.24);
}

.warning-danger {
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(127, 29, 29, 0.30);
}

.warning-warning {
    border-color: rgba(251, 191, 36, 0.32);
    background: rgba(120, 74, 5, 0.26);
}

.quick-actions a {
    color: white;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.22);
}

.quick-actions a:hover {
    background: rgba(59, 130, 246, 0.28);
}

.bar {
    background: rgba(148, 163, 184, 0.16);
}

.bar span {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.stamp-clock-card {
    text-align: center;
}

.stamp-in {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.25);
}

.stamp-out {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.25);
}

.error {
    color: #fca5a5;
}

@media (max-width: 900px) {
    body.app-body {
        display: block;
    }

    .sidebar {
        width: 100%;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--app-border-soft);
        position: relative;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 0 12px;
        margin-bottom: 10px;
    }

    .sidebar-logo {
        width: 74px;
        height: 50px;
        margin: 0;
        padding: 5px;
        border-radius: 10px;
    }

    .brand strong,
    .brand span {
        display: block;
    }

    .sidebar nav {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .main {
        padding: 18px;
    }

    .main-header {
        align-items: flex-start;
        gap: 14px;
    }
}

/* ==========================================================
   Version 3.0.3 — Hybrid Theme
   Dunkle Navigation und Außenfläche, heller Arbeitsbereich.
   ========================================================== */

body.app-body {
    background: #071426;
    color: #172033;
}

body.app-body .main {
    background: #f4f6f9;
    color: #172033;
}

body.app-body .main-header h1,
body.app-body .main h1,
body.app-body .main h2,
body.app-body .main h3,
body.app-body .main h4,
body.app-body .main label,
body.app-body .main p,
body.app-body .main li,
body.app-body .main span,
body.app-body .main td,
body.app-body .main th {
    color: inherit;
}

body.app-body .main-header p,
body.app-body .main .muted,
body.app-body .main small.muted,
body.app-body .main .version {
    color: #667085 !important;
}

body.app-body .card,
body.app-body .settings-panel,
body.app-body .calendar-panel,
body.app-body .form-card,
body.app-body .stamp-clock-card,
body.app-body .year-table-card,
body.app-body .employee-year-card {
    color: #172033;
    background: #ffffff;
    border: 1px solid #d8e0ea;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.app-body input,
body.app-body select,
body.app-body textarea {
    color: #172033;
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: none;
}

body.app-body input::placeholder,
body.app-body textarea::placeholder {
    color: #9aa4b2;
}

body.app-body input:focus,
body.app-body select:focus,
body.app-body textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

body.app-body .tabs,
body.app-body .settings-tabs,
body.app-body .settings-subtabs {
    background: #ffffff;
    border-color: #d8e0ea;
}

body.app-body .tab,
body.app-body .small-link {
    color: #263246;
    background: #eef2f7;
    border-color: #e2e8f0;
}

body.app-body .tab:hover,
body.app-body .small-link:hover {
    color: #172033;
    background: #e2e8f0;
}

body.app-body .tab.active {
    color: #ffffff;
    background: #24344d;
    border-color: #24344d;
}

body.app-body .table {
    color: #172033;
    background: #ffffff;
}

body.app-body .table th {
    color: #263246;
    background: #eef3f8;
}

body.app-body .table td {
    color: #172033;
    border-color: #dbe2ea;
}

body.app-body .table tr:hover {
    background: #f7faff;
}

body.app-body .dashboard-today-card {
    color: #ffffff;
    background: linear-gradient(155deg, #122641, #091a30);
    border-color: rgba(59, 130, 246, 0.35);
}

body.app-body .dashboard-today-card h2,
body.app-body .dashboard-today-card p,
body.app-body .dashboard-today-card span {
    color: #ffffff;
}

body.app-body .dashboard-date,
body.app-body .dashboard-today-card .dashboard-date,
body.app-body .dashboard-today-card .today-big-number span {
    color: #c8d3e2;
}

body.app-body .warning-box {
    color: #172033;
    background: #fff7dc;
    border-color: #f3d273;
}

body.app-body .warning-danger {
    color: #7f1d1d;
    background: #fee2e2;
    border-color: #fca5a5;
}

body.app-body .warning-warning {
    color: #713f12;
    background: #fef3c7;
    border-color: #fcd34d;
}

body.app-body .quick-actions a {
    color: #263246;
    background: #eef2f7;
    border-color: #d8e0ea;
}

body.app-body .quick-actions a:hover {
    color: #172033;
    background: #e2e8f0;
}

/* Kalender wieder hell, lesbar und ohne blaue Tagesumrandung */
body.app-body .calendar-card,
body.app-body .calendar-scroll,
body.app-body .calendar-table {
    background: #ffffff;
    color: #172033;
}

body.app-body .calendar-table th,
body.app-body .calendar-table td {
    color: #172033;
    border-color: #dce3eb;
}

body.app-body .calendar-table th {
    background: #eef3f8;
}

body.app-body .calendar-table th small,
body.app-body .employee-col span,
body.app-body .employee-col em {
    color: #667085 !important;
}

body.app-body .calendar-table .employee-col,
body.app-body .year-table-header .year-employee-title,
body.app-body .year-employee-row .year-employee-info,
body.app-body .calendar-table thead th.employee-col {
    color: #172033 !important;
    background: #ffffff !important;
}

body.app-body .calendar-table .employee-col strong,
body.app-body .calendar-table .employee-col a {
    color: #172033 !important;
}

body.app-body .calendar-cell {
    background: #ffffff;
}

body.app-body .calendar-cell.weekend,
body.app-body .weekend {
    background: #f3f5f8;
}

body.app-body .calendar-table .today,
body.app-body .today {
    outline: none !important;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.42);
    background: #fff1c7 !important;
}

body.app-body .calendar-table th.today {
    background: #f8d77a !important;
    color: #4b3510 !important;
}

body.app-body .calendar-table td.today.weekend {
    background: #f8e5b3 !important;
}

body.app-body .calendar-headline,
body.app-body .calendar-toolbar,
body.app-body .legend {
    color: #172033;
}

body.app-body .legend-item + span,
body.app-body .legend span {
    color: #526071;
}

body.app-body .year-table-header,
body.app-body .year-employee-row {
    color: #172033;
    background: #ffffff;
    border-color: #dce3eb;
}

body.app-body .year-table-header {
    background: #eef3f8;
}

/* Statuskarten behalten ihre Farbcodierung, aber mit dunkler lesbarer Schrift */
body.app-body .status-card {
    color: #172033;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body.app-body .status-card h3,
body.app-body .status-card strong,
body.app-body .status-card span,
body.app-body .status-card p {
    color: #172033;
}

body.app-body .status-work { background: #d9f7e4; border-color: #b6ebc8; }
body.app-body .status-vacation { background: #dce9ff; border-color: #bfd5fb; }
body.app-body .status-free { background: #fff2bf; border-color: #f5df8a; }
body.app-body .status-sick { background: #ffe0e0; border-color: #f6bcbc; }
body.app-body .status-training { background: #e9e2ff; border-color: #d4c6fb; }
body.app-body .status-business { background: #d7f5fa; border-color: #b4e7ef; }

@media (max-width: 900px) {
    body.app-body .main {
        background: #f4f6f9;
    }
}


/* --- Responsive Karten-Tabellen (v1.1.6) ------------------------------
   Tabellen mit der Zusatzklasse .table-cards klappen auf schmalen
   Bildschirmen in ein Karten-Layout um: jede Zeile wird eine Karte,
   jede Zelle eine "Beschriftung: Wert"-Zeile (Beschriftung kommt aus
   dem data-label-Attribut). Rein CSS, kein JavaScript noetig. */
@media (max-width: 760px) {
    .table.table-cards thead {
        display: none;
    }

    .table.table-cards,
    .table.table-cards tbody {
        display: block;
        width: 100%;
    }

    .table.table-cards tr {
        display: block;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .table.table-cards tr:hover {
        background: #ffffff;
    }

    .table.table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border: none;
        padding: 6px 0;
        text-align: right;
    }

    .table.table-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6b7280;
        font-size: 13px;
        text-align: left;
        flex-shrink: 0;
    }

    .table.table-cards td:not([data-label])::before {
        content: none;
    }

    /* Name als Kartentitel hervorheben */
    .table.table-cards td.card-title-cell {
        font-size: 17px;
        font-weight: 700;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 4px;
    }

    /* Aktions-Buttons als volle Zeile unter der Karte */
    .table.table-cards td.mitarbeiter-actions {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid #f1f5f9;
        text-align: left;
    }
}

/* --- Kompakter Kopfbereich (v1.1.7) ------------------------------------
   Weniger Höhe für Titel, Toolbar und Steuer-Karten, damit der
   eigentliche Inhalt (Kalender, Schichtplan) frueher sichtbar ist.
   Reine Optik - keine Funktion entfernt. Bewusst als Override-Block am
   Dateiende, damit die Original-Regeln unangetastet bleiben. */

.main {
    padding: 18px 28px 28px;
}

.main-header {
    margin-bottom: 14px;
}

.main-header h1 {
    font-size: 24px;
}

.main-header p {
    margin-top: 2px;
    font-size: 14px;
}

.logout {
    padding: 8px 14px;
    font-size: 14px;
}

.calendar-toolbar {
    margin-bottom: 10px;
}

.calendar-toolbar .small-link {
    padding: 6px 10px;
    font-size: 14px;
}

.mt {
    margin-top: 12px;
}

/* Mindestbesetzung: schmale einzeilige Leiste statt grosser Karte */
.staffing-chip-card {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.staffing-card-head {
    margin-bottom: 0;
    gap: 12px;
    flex: 0 0 auto;
}

.staffing-card-head h2 {
    font-size: 15px;
}

.staffing-card-head p {
    font-size: 12px;
    margin-top: 0;
}

.staffing-ampel-legend {
    font-size: 12px;
}

.staffing-rule-chips {
    flex: 1 1 auto;
}

.staffing-rule-chip {
    min-height: 34px;
    padding: 4px 12px;
    gap: 8px;
    font-size: 14px;
}

/* Kompakte Steuer-Karten (z. B. Schichtplan-Filter) */
.card-compact {
    padding: 14px 18px;
}

.card-compact .form-grid {
    gap: 12px;
}

.card-compact input,
.card-compact select,
.card-compact button {
    padding-top: 8px;
    padding-bottom: 8px;
}

.card-compact p {
    font-size: 13px;
    margin-bottom: 0;
}

/* --- Einzeilige Filter-Leiste (v1.1.9) ---------------------------------
   Für die Filterbereiche oben auf Berichte- und Schichtplan-Seite:
   alle Felder und Buttons in EINER Zeile (umbricht auf schmalen
   Bildschirmen). Ersetzt dort das dreispaltige Grid mit Button-Zeile. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
}

.filter-bar > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-bar label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}

.filter-bar input,
.filter-bar select {
    padding: 7px 10px;
    font-size: 14px;
    width: auto;
}

.filter-bar input[type="number"] {
    width: 92px;
}

.filter-bar select {
    min-width: 170px;
    max-width: 240px;
}

.filter-bar .form-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
}

.filter-bar .form-actions button,
.filter-bar .form-actions .button-link {
    width: auto;
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
}

@media (max-width: 760px) {
    .filter-bar > div {
        flex: 1 1 100%;
    }

    .filter-bar input,
    .filter-bar input[type="number"],
    .filter-bar select {
        width: 100%;
        max-width: none;
    }

    .filter-bar .form-actions {
        flex-wrap: wrap;
    }
}

/* --- Monatskalender drucken (v1.1.11) -----------------------------------
   Die Monatsübersicht hatte bisher keine Druckansicht. print-hide blendet
   die interaktiven Elemente aus (siehe kalender.html); hier nur noch
   Detailkorrekturen für ein sauberes, gut lesbares Ausdruck-Layout. */
@media print {
    .empty-cell {
        display: none;
    }

    .calendar-pro-table {
        width: 100%;
        table-layout: fixed;
    }

    .calendar-pro-table th,
    .calendar-pro-table td {
        font-size: 10px;
        padding: 3px 2px;
    }

    .calendar-scroll {
        overflow: visible;
    }
}

/* ---- v1.1.14: Markiermodus Jahresübersicht + Minus-Tage-Anzeige ------- */

.paint-chip {
    display: inline-flex !important;
    width: auto !important;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f3f4f6;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
}

.paint-chip-delete {
    background: #fee2e2;
    color: #991b1b;
}

.paint-chip-delete.paint-chip-active {
    background: #991b1b !important;
    color: #ffffff !important;
}

.paint-chip-delete.paint-chip-active span,
.paint-chip-delete.paint-chip-active span:not(.legend-item) {
    color: #ffffff !important;
}

.paint-chip:hover {
    background: #d1d5db;
}

.paint-chip-active {
    background: #243044 !important;
    color: #ffffff !important;
}

.paint-chip-active span,
.paint-chip-active span:not(.legend-item) {
    color: #ffffff !important;
}

.paint-chip .legend-item {
    width: 22px;
    height: 22px;
}

.paint-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #6b7280;
}

.paint-mode-on .single-day[data-date] {
    cursor: crosshair;
}

/* Vorschau-Markierung: gleiche Farben wie gespeicherte Einträge, aber mit
   gestricheltem blauem Rahmen, damit man "noch nicht gespeichert" sieht. */
.single-day.paint-mark {
    outline: 2px dashed #1d4ed8;
    outline-offset: -2px;
}

.single-day.entry-work-paint { background: #dcfce7 !important; }
.single-day.entry-vacation-paint { background: #dbeafe !important; }
.single-day.entry-free-paint { background: #fef3c7 !important; }
.single-day.entry-sick-paint { background: #fee2e2 !important; }
.single-day.entry-training-paint { background: #ede9fe !important; }
.single-day.entry-business-paint { background: #cffafe !important; }

.paint-save-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #111827;
    color: #f9fafb;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    z-index: 200;
    font-weight: 600;
}

.paint-save-bar .mini-button {
    background: #374151;
    color: #f9fafb;
    border: none;
}

/* Zu viel genommener Urlaub: Balken wird rot und Warnhinweis erscheint. */
.kz-progress-over i {
    background: #dc2626 !important;
}

.kz-over-warning {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
}

/* Lösch-Vorschau: roter Rahmen + leichter roter Schimmer */
.single-day.paint-delete-mark {
    outline: 2px dashed #dc2626;
    outline-offset: -2px;
    background: #fee2e2 !important;
    color: #991b1b;
    position: relative;
}

.single-day.paint-delete-mark span::after {
    content: "✕";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
    color: #dc2626;
    pointer-events: none;
}

/* ---- v1.1.14 Fixes: Chips horizontal + aktive Schrift + Löschen nur Admin */

/* Legende in yearly-control-card: explizit als horizontale Reihe.
   Das globale "button { width: 100% }" würde jeden Chip auf volle Breite
   strecken – daher brauchen .paint-chip explizite !important-Overrides
   (bereits in .paint-chip selbst gesetzt), und der Container muss row sein. */
.yearly-control-card .legend {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

/* body.app-body überschreibt sonst die Chip-Farben – höhere Spezifität */
body.app-body .legend .paint-chip {
    display: inline-flex !important;
    width: auto !important;
    color: #374151;
}

body.app-body .legend .paint-chip span:not(.legend-item) {
    color: inherit;
}

/* Aktiver Chip: identisch zu .department-chip.active */
body.app-body .legend .paint-chip.paint-chip-active,
.paint-chip.paint-chip-active {
    background: #243044 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    outline: none !important;
}

body.app-body .legend .paint-chip.paint-chip-active span,
.paint-chip.paint-chip-active span:not(.legend-item) {
    color: #ffffff !important;
}

/* Aktiver Löschen-Chip */
body.app-body .legend .paint-chip-delete.paint-chip-active,
.paint-chip-delete.paint-chip-active {
    background: #991b1b !important;
    color: #ffffff !important;
    border-color: transparent !important;
    outline: none !important;
}

body.app-body .legend .paint-chip-delete.paint-chip-active span:not(.legend-item),
.paint-chip-delete.paint-chip-active span:not(.legend-item) {
    color: #ffffff !important;
}

/* ---- v1.1.15: Abteilungsfilter in der Jahresübersicht lesbar ---------
   Das App-Theme setzt für alle span-Elemente eine eigene Textfarbe.
   Dadurch blieb die Beschriftung aktiver Abteilungs-Chips dunkel.
   Die höhere Spezifität hält Text und Chip-Zustand nun synchron. */
body.app-body .main .department-chip.active,
body.app-body .main .department-chip:has(input:checked) {
    background: #243044 !important;
    color: #ffffff !important;
}

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

body.app-body .main .department-chip:not(.active):not(:has(input:checked)) span {
    color: #111827 !important;
}


/* ---- v1.2.0: Login-Passwortanzeige und Passwortmanager-Unterstützung ---- */
.login-v3 .login-input-wrap input {
    padding-right: 68px;
}

.login-v3 .login-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    transform: translateY(-50%);
    background: transparent;
    color: #dce8f8;
    font-size: 21px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}

.login-v3 .login-password-toggle:hover,
.login-v3 .login-password-toggle:focus-visible {
    background: rgba(92, 145, 218, 0.18);
    outline: 2px solid rgba(96, 155, 245, 0.55);
    outline-offset: 1px;
}


/* v1.2.3: Sofortfilter in der Mitarbeiterübersicht */
.employee-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.employee-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 520px;
    justify-content: flex-end;
}

.employee-search-input {
    width: min(100%, 520px);
    min-height: 46px;
    margin: 0;
}

.employee-filter-reset {
    min-height: 46px;
    width: auto;
    flex: 0 0 auto;
    padding-inline: 18px;
    white-space: nowrap;
}

.employee-filter-reset:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* v1.9.7: sekundäre Seitenaktionen sauber neben dem Logout halten. */
.main-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.main-header-actions .button-link,
.main-header-actions .logout {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/* Auf sehr breiten Bildschirmen brauchen Auswahl-, Datums- und
   Uhrzeitfelder nicht die Fläche einer Landebahn. */
.worktime-employee-form,
.worktime-entry-form {
    max-width: 980px;
}

@media (max-width: 760px) {
    .main-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.employee-no-results td {
    padding: 34px 18px !important;
    text-align: center;
}

.employee-no-results strong,
.employee-no-results span {
    display: block;
}

.employee-no-results span {
    margin-top: 6px;
    color: var(--muted, #64748b);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .employee-toolbar,
    .employee-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-filter {
        flex-basis: auto;
    }

    .employee-search-input {
        width: 100%;
        max-width: none;
    }
}

/* v1.2.3: dezenter freiwilliger Hinweis auf eine vom Admin vergebene PIN */
.pin-hint-card {
    border-left: 4px solid var(--primary, #2f73ed);
}
.pin-hint-card p {
    margin-bottom: 0.75rem;
}

/* v1.2.3: Mehrtagesauswahl im Monatskalender per Maus */
body.calendar-dragging,
body.calendar-dragging * {
    user-select: none;
    cursor: cell !important;
}

.calendar-pro-table td.calendar-cell.drag-range-selected {
    position: relative;
    background: rgba(47, 115, 237, 0.24) !important;
    box-shadow: inset 0 0 0 2px rgba(47, 115, 237, 0.72);
}

.calendar-pro-table td.calendar-cell.drag-range-start {
    box-shadow: inset 3px 0 0 #2f73ed, inset 0 0 0 2px rgba(47, 115, 237, 0.72);
}

.calendar-pro-table td.calendar-cell.drag-range-end {
    box-shadow: inset -3px 0 0 #2f73ed, inset 0 0 0 2px rgba(47, 115, 237, 0.72);
}

/* Kompakter und sicher scrollbar auf kleinen Bildschirmen */
@media (max-width: 768px) {
    .modal-backdrop {
        align-items: flex-start;
        padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .modal {
        width: 100%;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: 16px;
        padding: 18px;
    }

    .modal-header {
        margin-bottom: 12px;
    }

    .modal-close {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 24px;
    }

    .modal .form-grid.two-cols {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .modal label {
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .modal input,
    .modal select,
    .modal textarea {
        min-height: 48px;
        font-size: 16px;
    }

    .modal-actions {
        position: sticky;
        bottom: -18px;
        margin: 14px -18px -18px;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #e2e8f0;
        backdrop-filter: blur(8px);
    }
}


/* v1.3.1: Stempeluhr-Basis. Geplante und noch nicht freigegebene
   Anwesenheit bleibt grün schraffiert; freigegebene Anwesenheit ist voll grün. */
.entry-work-planned-cell {
    background: repeating-linear-gradient(
        135deg,
        #dcfce7,
        #dcfce7 6px,
        #86efac 6px,
        #86efac 12px
    ) !important;
}

/* Jahresübersicht Einzelperson: Markieren per Mausziehen */
@media (pointer: fine) {
    .paint-mode-on .single-day[data-date] {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* v1.3.5: gezielte Mobilkorrekturen für Berichte, Urlaub und Zeitkonto. */
.mobile-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
    .clean-summary,
    .year-summary.clean-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .clean-summary div {
        min-width: 0;
        padding: 12px;
    }

    .clean-summary strong {
        font-size: 13px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .clean-summary span {
        font-size: 22px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .vacation-request-list {
        gap: 9px;
        margin-top: 12px;
    }

    .vacation-request-card {
        padding: 11px 12px;
        border-radius: 10px;
    }

    .vacation-request-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
        align-items: start;
    }

    .vacation-request-main strong {
        font-size: 15px;
    }

    .vacation-request-main p {
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .vacation-status {
        padding: 5px 9px;
        font-size: 12px;
    }

    .report-header {
        align-items: stretch;
    }

    .report-header .button-link {
        width: 100%;
        text-align: center;
    }

    .report-mobile-table tr {
        padding: 9px 11px !important;
        margin-bottom: 9px !important;
    }

    .report-mobile-table td {
        padding: 4px 0 !important;
    }

    .main {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(28px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 390px) {
    .clean-summary,
    .year-summary.clean-summary {
        grid-template-columns: 1fr;
    }

    .vacation-request-main {
        grid-template-columns: 1fr;
    }

    .vacation-status {
        justify-self: start;
    }
}


/* ==========================================================
   v1.3.3 — eindeutige Stempeluhr-Zustände
   ========================================================== */

/* Eingestempelt, aber noch nicht ausgestempelt: gelb schraffiert. */
.entry-badge.entry-work-open {
    background: repeating-linear-gradient(
        135deg,
        #facc15,
        #facc15 4px,
        #eab308 4px,
        #eab308 8px
    ) !important;
    color: #422006 !important;
    border: 2px solid #ca8a04 !important;
}

.calendar-cell.entry-work-open-cell,
.day-strip.entry-work-open-cell,
.single-day.entry-work-open-cell {
    background: repeating-linear-gradient(
        135deg,
        #fef9c3,
        #fef9c3 6px,
        #fde68a 6px,
        #fde68a 12px
    ) !important;
    color: #713f12 !important;
}

/* Ausgestempelt, aber noch nicht freigegeben: grün mit Uhrsymbol. */
.entry-badge.entry-work-pending {
    background: #22c55e !important;
    color: #ffffff !important;
    border: 2px solid #15803d !important;
    font-size: 13px;
}

.calendar-cell.entry-work-pending-cell,
.day-strip.entry-work-pending-cell,
.single-day.entry-work-pending-cell {
    position: relative;
    background: repeating-linear-gradient(
        45deg,
        #dcfce7,
        #dcfce7 5px,
        #bbf7d0 5px,
        #bbf7d0 10px
    ) !important;
    color: #14532d !important;
}

.day-strip.entry-work-pending-cell::after,
.single-day.entry-work-pending-cell::after {
    content: "🕒";
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 10px;
    line-height: 1;
}

.legend-pill.work-open-pill {
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #eab308;
}

.legend-pill.work-pending-pill {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #22c55e;
}

/* v1.3.11: Unterbrechung/Feierabend an der Stempeluhr. */
.stamp-finish-options {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 760px;
    margin: 16px auto 0;
}

.stamp-finish-options form {
    flex: 1 1 180px;
}

.stamp-finish-options button {
    width: 100%;
}

.stamp-choice {
    min-height: 62px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 850;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .13);
    transition: transform .15s ease, box-shadow .15s ease;
}

.stamp-choice:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(15, 23, 42, .18);
}

.stamp-choice span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
}

.stamp-break {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.stamp-finish {
    background: linear-gradient(135deg, #0f766e, #16a34a);
}

@media (max-width: 600px) {
    .stamp-finish-options {
        flex-direction: column;
    }

    .stamp-finish-options form {
        flex-basis: auto;
    }
}

.stamp-day-finished {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-weight: 800;
}

.pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f766e, #16a34a);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.pdf-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #0d665f, #15803d);
}

/* v1.3.14: Admin bearbeitet einen Zeitblock direkt an seiner Tabellenzeile. */
.inline-time-edit-row td {
    padding: 0 !important;
    background: #eff6ff;
}

.inline-time-edit {
    padding: 18px;
    border: 2px solid #3b82f6;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .08);
}

.inline-time-edit-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.inline-time-edit-head strong,
.inline-time-edit-head small {
    display: block;
}

.inline-time-edit-head strong {
    font-size: 18px;
}

.time-edit-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr .8fr 1.7fr auto;
    gap: 10px;
    align-items: end;
}

.time-edit-grid label {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.time-edit-grid input {
    margin-top: 5px;
}

.time-edit-grid button {
    white-space: nowrap;
}

.time-duration-cell {
    white-space: nowrap;
    font-weight: 750;
}

.time-duration-cell span,
.time-duration-cell small,
.clean-summary > div > span,
.clean-summary > div > small {
    display: block;
}

.time-duration-cell small,
.clean-summary > div > small {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.clean-summary > div > small {
    line-height: 1.2;
}

.clean-summary > div > small.balance-negative {
    color: #dc2626;
}

.clean-summary > div > small.balance-positive {
    color: #16a34a;
}

@media (max-width: 1050px) {
    .time-edit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .time-edit-note,
    .time-edit-grid button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .table.table-cards.time-entry-table tr {
        padding: 6px 9px;
        margin-bottom: 7px;
        border-radius: 10px;
    }

    .table.table-cards.time-entry-table td {
        padding: 2px 0;
        min-height: 24px;
        font-size: 14px;
    }

    .time-duration-cell small {
        margin-top: 0;
        font-size: 11px;
    }

    .table.table-cards.time-entry-table td::before {
        font-size: 12px;
    }

    .table.table-cards.time-entry-table td.card-title-cell {
        padding-bottom: 5px;
        margin-bottom: 2px;
        font-size: 15px;
    }

    .table.table-cards.time-entry-table td.mitarbeiter-actions {
        padding-top: 6px;
        margin-top: 3px;
    }

    .time-entry-table .small-button,
    .time-entry-table .button-link.small-button {
        padding: 7px 10px;
        font-size: 13px;
        margin: 0;
    }

    .table.table-cards.time-entry-table .inline-time-edit-row {
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .table.table-cards.time-entry-table .inline-time-edit-row td {
        display: block;
        padding: 0;
    }
}

.overlap-warning-card {
    padding: 14px 18px;
    border-left: 5px solid #f59e0b;
}

.overlap-warning-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.overlap-warning-head h2,
.overlap-warning-head p {
    margin: 0;
}

.overlap-warning-card details {
    margin-top: 8px;
}

@media (max-width: 760px) {
    .overlap-warning-head {
        align-items: stretch;
        flex-direction: column;
    }
}

/* v1.3.7: kompaktere Listen und einheitlicher Pending-Urlaubsmarker. */
.vacation-list-card {
    padding: 18px;
}

.vacation-list-card > h2 {
    margin-bottom: 4px;
}

.vacation-list-card > .muted {
    margin: 0 0 8px;
}

.vacation-request-list {
    gap: 8px;
    margin-top: 10px;
}

.vacation-request-card {
    padding: 9px 12px;
    border-radius: 10px;
}

.vacation-request-main {
    gap: 8px 12px;
}

.vacation-request-main strong {
    font-size: 15px;
    line-height: 1.2;
}

.vacation-request-main p {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.25;
}

.vacation-status {
    padding: 4px 10px;
    font-size: 12px;
}

.time-block-list p {
    margin: 2px 0;
}

.entry-badge.pending-vacation-badge {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #f59e0b !important;
    color: #78350f !important;
    border: 2px solid #b45309 !important;
    font-size: 13px !important;
    animation: none !important;
    box-shadow: 0 2px 4px rgba(120, 53, 15, 0.22);
}

td.calendar-cell.pending-vacation {
    background: repeating-linear-gradient(
        135deg,
        #fff7e0,
        #fff7e0 6px,
        #ffdf8a 6px,
        #ffdf8a 12px
    ) !important;
}

@media (max-width: 760px) {
    .vacation-list-card {
        padding: 13px;
    }

    .vacation-request-card {
        padding: 8px 10px;
    }

    .table.table-cards tr {
        padding: 8px 10px;
        margin-bottom: 8px;
    }

    .table.table-cards td {
        padding: 3px 0;
    }
}
.pause-minutes-setting input[type="number"] {
    width: 7rem;
    margin-left: 0.5rem;
}

.pause-not-deducted {
    color: #64748b;
    font-weight: 600;
}

.pause-not-deducted small {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.pause-not-deducted-note {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.72rem;
}
.pending-wish-free {
    background: repeating-linear-gradient(135deg, #fff7d6, #fff7d6 7px, #ffe7a3 7px, #ffe7a3 14px) !important;
}
.pending-wish-free-badge, .pending-wish-free-legend { color: #8a5a00; }
.entry-wish-free { background: #ffe7a3; color: #6b4700; }

/* ============================================================
   v1.5.5: Fester freier Tag - Schraffur als Overlay
   Bewusst ganz am Dateiende: background-image legt sich als
   halbtransparente Schraffur ÜBER jede Grundfarbe (weiß, Wochenende,
   Ferien, Feiertag, heute), statt mit den background-Kurzschreibweisen
   dieser Regeln zu konkurrieren. Behebt den 1.5.4-Fehler, dass die
   Schraffur in Ferienzellen unsichtbar war.
   ============================================================ */
.calendar-pro-table td.fixed-off-cell,
body.app-body .calendar-cell.fixed-off-cell {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(100, 116, 139, 0.22) 0px,
        rgba(100, 116, 139, 0.22) 4px,
        rgba(100, 116, 139, 0) 4px,
        rgba(100, 116, 139, 0) 9px
    ) !important;
}

/* v1.5.5: Hinweis im Kalender-Modal, wenn der gewählte Zeitraum feste
   freie Tage des Mitarbeiters enthält. Wird per JavaScript gefüllt und
   eingeblendet; Speichern bleibt bewusst möglich (kein hartes Verbot). */
.fixed-off-warning {
    margin: 10px 0 2px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #78350f;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ============================================================
   v1.6.1: Mobile-Feinschliff
   ============================================================ */

/* Kalender-Modal: darf nie höher als der Bildschirm werden - sonst
   sind die Speichern/Löschen-Buttons auf dem Handy unerreichbar.
   dvh statt vh, damit die dynamische Adressleiste mobiler Browser
   korrekt berücksichtigt wird. */
.modal {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
    /* Tabellen: Bisher wurden breite Tabellen (Backups, Mitarbeiter-
       liste, Nutzerverwaltung, ...) vom overflow-x:hidden des
       Hauptbereichs schlicht abgeschnitten - Spalten rechts waren
       unerreichbar. Jetzt scrollen sie innerhalb ihrer Karte seitlich. */
    .table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .table th,
    .table td {
        padding: 10px 12px;
    }

    /* Touch-Flächen der kleinen Tabellen-Buttons (Herunterladen,
       Löschen, Bearbeiten) fürs Tippen mit dem Daumen vergrößern. */
    .table .small-link,
    .table .inline-form button.small-link {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* Modal: kompaktere Ränder, mehr Platz für den Inhalt. */
    .modal-backdrop {
        padding: 12px;
        place-items: start center;
    }

    .modal {
        padding: 18px;
        max-height: calc(100dvh - 24px);
    }

    /* iOS zoomt bei Eingabefeldern unter 16px automatisch hinein -
       betrifft die Kompakt-Formulare (z.B. Mitarbeiter bearbeiten).
       Auf Touch-Geräten daher mindestens 16px. */
    .wide-form.form-compact input,
    .wide-form.form-compact select,
    .wide-form.form-compact textarea {
        font-size: 16px;
    }

    /* Auto-Backup-Einstellungen: Checkbox, Uhrzeit und Button
       untereinander statt unschön umbrechend nebeneinander. */
    .auto-backup-form {
        display: grid;
        gap: 10px;
        justify-items: start;
    }

    .auto-backup-form button {
        width: 100%;
    }
}

/* ============================================================
   v1.6.2: Kalender-Darstellung Ferien/Feiertage/Wochenende
   Bewusst am Dateiende, damit diese Regeln die Prioritätskonflikte
   weiter oben endgültig entscheiden.
   ============================================================ */

/* 1) Einträge sehen ÜBERALL gleich aus - auch in Ferien-/Feiertags-
   zellen: Pastellfläche plus farbiges Kürzel-Badge. Vorher gewannen
   je nach Zelle mal die (eigentlich für die Jahresübersicht gedachten)
   kräftigen Vollflächenfarben, mal das Ferienblau - dieselbe Urlaubs-
   zelle sah innerhalb und außerhalb der Ferien verschieden aus. */
.calendar-pro-table td.entry-work-cell     { background: #dcfce7 !important; }
.calendar-pro-table td.entry-vacation-cell { background: #dbeafe !important; }
.calendar-pro-table td.entry-free-cell     { background: #fef3c7 !important; }
.calendar-pro-table td.entry-sick-cell     { background: #fee2e2 !important; }
.calendar-pro-table td.entry-training-cell { background: #ede9fe !important; }
.calendar-pro-table td.entry-business-cell { background: #cffafe !important; }

/* 2) Wochenenden bleiben auch in den Ferien erkennbar: statt vom
   Ferienblau überdeckt zu werden, bekommen Sa/So dort einen spürbar
   dunkleren Blauton (analog: dunkleres Orange an Feiertagen). */
.calendar-pro-table th.weekend.school-holiday-header,
.calendar-pro-table td.weekend.school-holiday-cell {
    background: #cfdff2 !important;
}

.calendar-pro-table th.weekend.holiday-header,
.calendar-pro-table td.weekend.holiday-cell {
    background: #f6d3ac !important;
}

/* Heute-Markierung behält in allen Kombinationen das letzte Wort. */
.calendar-pro-table th.today,
.calendar-pro-table td.today {
    background: #eef4ff !important;
}

/* 3) Das Ferien-Symbol im Spaltenkopf war kaum erkennbar klein. */
.calendar-pro-table th b[title] {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    margin-top: 2px;
}

/* ============================================================
   v1.7.1: Jahresübersicht - Ferien, Feiertage, Anträge lesbar
   Auf 4px-Strichbreite sind Schraffuren und zarte Töne unlesbar
   (sahen aus wie "blasse Balken" ohne erkennbare Bedeutung).
   Daher hier: kräftigere Vollfarben, exklusiv für .day-strip -
   Monats- und Einzelansicht behalten ihre bisherige Darstellung.
   ============================================================ */

/* Ferien und Feiertage in den Farbfamilien des Monatskalenders,
   für Strichbreite leicht kräftiger. Einträge gewinnen weiterhin
   (deren Farben sind mit !important definiert). */
.day-strip.school-holiday-cell {
    background: #cfe1f6;
}

.day-strip.holiday-cell {
    background: #f8d29c;
}

/* Wochenende bleibt auch in Ferien/an Feiertagen erkennbar
   (gleiche Idee wie im Monatskalender seit v1.6.2). */
.day-strip.weekend.school-holiday-cell {
    background: #afc9e8;
}

.day-strip.weekend.holiday-cell {
    background: #eebf7d;
}

/* Offene Anträge: kräftiges Bernstein statt zarter Schraffur -
   der Hauptgrund für die "blassen Balken"-Verwirrung. */
.day-strip.pending-vacation {
    background: #f59e0b !important;
}

.day-strip.pending-wish-free {
    background: #facc15 !important;
}

/* Stempeluhr-/Planungszustände: Schraffur auf Strichbreite durch
   Vollfarben ersetzen (heller als die satten Bestätigt-Farben). */
.day-strip.entry-work-planned-cell {
    background: #86efac !important;
}

.day-strip.entry-work-open-cell {
    background: #fde047 !important;
}

.day-strip.entry-work-pending-cell {
    background: #4ade80 !important;
}

/* Das 🕒-Symbol ist auf 4px nur Pixelmatsch. */
.day-strip.entry-work-pending-cell::after {
    content: none;
}

/* Legenden-Pillen für die neuen Antragsfarben. */
.legend-pill.pending-strip-pill {
    background: #f59e0b;
    color: #451a03;
    border: 1px solid #b45309;
}

.legend-pill.wish-strip-pill {
    background: #facc15;
    color: #422006;
    border: 1px solid #a16207;
}

/* ============================================================
   v1.7.2: Jahresansicht - horizontales Scrollen ohne Überlappung
   ============================================================ */
.year-table-header .year-employee-title,
.year-employee-row .year-employee-info {
    position: sticky;
    left: 0;
    background: white;
    z-index: 3;
    box-shadow: 8px 0 10px -8px rgba(17, 24, 39, 0.18);
    padding-right: 6px;
}

@media print {
    /* Beim Drucken gibt es kein Scrollen - Haftung deaktivieren. */
    .year-table-header .year-employee-title,
    .year-employee-row .year-employee-info {
        position: static;
        box-shadow: none;
    }
}

/* ============================================================
   v1.8.1: Schichtplan-Vorlagen - Formular-Layout-Fix
   Die zwei Vorlagen-Formulare (Speichern/Anwenden) hatten
   fälschlich .inline-form (display:inline-block, für winzige
   Ein-Knopf-Formulare gedacht) - dadurch hatte der umschließende
   Flex-Container keine verlässliche Breite und das Namensfeld
   kollabierte auf wenige Pixel. Eigene Klasse mit echtem
   Block-Layout statt der Zweckentfremdung von .inline-form.
   ============================================================ */
.template-form {
    display: block;
    width: 100%;
}

.template-form-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.template-form-row input[type="text"],
.template-form-row select {
    flex: 1;
    min-width: 0; /* verhindert, dass ein langer Vorlagenname/Text die Zeile sprengt */
    margin-bottom: 0;
}

.template-form-row button {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.template-form .checkbox-label {
    font-weight: normal;
    margin-top: 8px;
}

@media (max-width: 720px) {
    .template-form-row {
        flex-direction: column;
    }

    .template-form-row button {
        width: 100%;
    }
}

/* ============================================================
   v1.8.3: Arbeitsplan - aktuelle und nächste Woche nebeneinander
   Mobile-first: standardmäßig untereinander (jede Wochentabelle
   scrollt ohnehin selbst horizontal für ihre 7 Tage). Ab einer
   Mindestbreite, bei der zwei Wochentabellen nebeneinander noch
   sinnvoll Platz haben, wechselt die Ansicht auf zwei Spalten.
   ============================================================ */
.arbeitsplan-weeks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 12px;
    min-width: 0;
}

.arbeitsplan-week-card {
    min-width: 0;
    max-width: 100%;
}

.arbeitsplan-week-title {
    margin: 0 0 10px;
    font-size: 16px;
}

.arbeitsplan-scroll-hint {
    display: none;
}

.arbeitsplan-week-card > .calendar-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

@media (max-width: 760px) {
    .arbeitsplan-print-card {
        min-width: 0;
        overflow: hidden;
    }

    .arbeitsplan-scroll-hint {
        display: block;
        margin: -4px 0 8px;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }

    .arbeitsplan-table {
        min-width: 455px;
    }
}

@media (min-width: 1100px) {
    .arbeitsplan-weeks-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

@media print {
    /* Beim Drucken/PDF weiterhin klar untereinander statt gequetscht
       nebeneinander - jede Woche bekommt ihre eigene Druckseite über
       die bestehende .single-day/print-Logik der Tabellen. */
    .arbeitsplan-weeks-grid {
        grid-template-columns: 1fr;
    }

    .arbeitsplan-scroll-hint {
        display: none !important;
    }
}

/* ============================================================
   v1.8.4: Arbeitsplan-Kopfbereich - Fehlerkorrektur + Straffung
   ============================================================ */

/* BUGFIX: Der "Drucken"-Button ist als <button> ausgezeichnet (die
   übrigen Schnellzugriffe als <a>) und erbte dadurch die globale Regel
   button { width: 100% } - das riss ihn in der Flex-Zeile auf volle
   Breite und brach dadurch die ganze Zeile um. Betraf nur dieses eine
   Element, sah aber wie ein kompletter Layout-Fehler aus. */
.week-quicknav .button-link {
    width: auto;
}

/* Filter-Zeile (Jahr/KW/Abteilung/Anzeigen) kompakt in einer Reihe
   statt Anzeigen als eigene volle Zeile darunter - spart eine
   komplette Zeile Leerraum, bevor der eigentliche Plan sichtbar wird. */
.arbeitsplan-filter-grid {
    display: grid;
    grid-template-columns: 110px 130px 1fr auto;
    gap: 14px;
    align-items: end;
}

.arbeitsplan-filter-grid .form-actions button {
    white-space: nowrap;
}

.arbeitsplan-toolbar .week-quicknav,
.arbeitsplan-toolbar .legend {
    margin-top: 14px;
}

.arbeitsplan-toolbar {
    padding-bottom: 18px;
}

@media (max-width: 900px) {
    .arbeitsplan-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .arbeitsplan-filter-grid .form-actions {
        grid-column: 1 / -1;
    }

    .arbeitsplan-filter-grid .form-actions button {
        width: 100%;
    }
}