/* =========================================
   assistenzteam.eu – Modern SaaS Design
========================================= */

:root {
    --primary-dark: #23285E;
    --primary-teal: #1C9E8F;
    --primary-blue: #5F8FAF;
    --text-dark: #4A4A4A;
    --bg-light: #F2F2F2;
    --surface-card: #ffffff;
    --surface-elevated: #ffffff;
    --input-bg: #ffffff;
    --input-border: #d5dbe3;
    --table-head-bg: var(--primary-dark);
    --table-head-text: #ffffff;
    --table-striped: #f8fafc;
}

[data-theme="dark"] {
    --text-dark: #e5ebf3;
    --bg-light: #0f1420;
    --surface-card: #172033;
    --surface-elevated: #121b2a;
    --input-bg: #101827;
    --input-border: #2a3547;
    --table-head-bg: #1b2940;
    --table-head-text: #e5ebf3;
    --table-striped: #121b2a;
    --sidebar-bg: #131d2e;
    --sidebar-border: rgba(229, 235, 243, 0.12);
}

/* =========================================
   BODY
========================================= */

body {
    background-color: var(--bg-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    margin: 0;
    /* FIX: Unteren Abstand sicherstellen damit
       letzter Inhalt nicht abgeschnitten wird */
    padding-bottom: 40px;
}

/* =========================================
   NAVBAR
========================================= */

.navbar-custom {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-teal));
    padding: 14px 24px;
}

.logo {
    max-height: 40px;
}

.app-title {
    font-weight: 600;
    font-size: 20px;
    color: white;
    white-space: nowrap;
}

/* =========================================
   LOGOUT BUTTON
========================================= */

.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.75);
    color: white;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.25);
    color: white;
    transform: translateY(-1px);
}

.logout-btn--icon {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0;
}

.logout-btn--icon i {
    font-size: 1rem;
    line-height: 1;
}

.logout-btn--icon .logout-label {
    display: none;
}

.nav-controls {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.nav-logo-top {
    display: none;
}

.nav-brand-wrap {
    min-width: 0;
    flex: 0 1 auto;
}

/* =========================================
   CARDS
========================================= */

.card {
    border: none;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    overflow: visible;
    background-color: var(--surface-card);
    color: var(--text-dark);
}

.card-body {
    padding: 30px;
}

/* =========================================
   HOVER-CARD (Dashboard Kacheln)
========================================= */

.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: visible;
}

.hover-card .card-title {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-align: center;
    max-width: 100%;
    line-height: 1.35;
}

/* Dashboard: Kachel-Raster – gleiche Höhen, Buttons unten bündig */
.dashboard-tiles {
    --dashboard-tile-min-h: 200px;
}

.dashboard-tiles > .col {
    display: flex;
}

.dashboard-tiles .hover-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: var(--dashboard-tile-min-h);
    width: 100%;
}

.dashboard-tiles .hover-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dashboard-tiles .dashboard-tile-emoji {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    line-height: 1.1;
    opacity: 0.92;
}

.dashboard-tiles .card-title {
    font-size: clamp(0.95rem, 2.8vw, 1.1rem);
}

.dashboard-tiles .card-title .badge {
    display: inline-block;
    margin-top: 0.25rem;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
}

.dashboard-section-title {
    font-weight: 700;
    letter-spacing: 0.1px;
    margin-top: 0.25rem;
}

.dashboard-mobile-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1.14rem;
    line-height: 1.3;
    font-weight: 600;
    background: var(--surface-card);
    border: 1px solid var(--input-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.dashboard-mobile-nav .nav-link i {
    font-size: 1.32rem;
    width: 26px;
    text-align: center;
    flex: 0 0 26px;
}

.dashboard-mobile-nav .nav-link:hover {
    background: rgba(95, 143, 175, 0.14);
}

.dashboard-mobile-nav .nav-link.is-disabled {
    opacity: 0.65;
    pointer-events: none;
}

.dashboard-mobile-nav--tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (max-width: 430px) {
    .dashboard-mobile-nav .nav-link {
        font-size: 1.08rem;
        padding: 10px 10px;
    }

    .dashboard-mobile-nav .nav-link i {
        font-size: 1.2rem;
        width: 22px;
        flex-basis: 22px;
    }

    .dashboard-mobile-nav--tiles {
        gap: 8px;
    }
}


.dashboard-tiles .hover-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.hover-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* =========================================
   BUTTONS
========================================= */

.btn-primary {
    background-color: var(--primary-dark);
    border: none;
    border-radius: 10px;
}

.btn-primary:hover {
    background-color: #1b204b;
}

.btn-success {
    border-radius: 10px;
}

.btn-danger {
    border-radius: 10px;
}

.btn-info {
    border-radius: 10px;
}

/* =========================================
   TABLES
========================================= */

.table {
    border-radius: 12px;
    overflow: hidden;
}

.table thead {
    background-color: var(--primary-dark);
    color: white;
}

/* =========================================
   FORMS
========================================= */

.form-control,
.form-select {
    border-radius: 10px;
    padding: 10px 14px;
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 0.2rem rgba(28,158,143,0.2);
}

/* =========================================
   ALERTS / FEHLERMELDUNGEN
========================================= */
.alert {
    font-size: 1rem;
    line-height: 1.45;
}

[data-theme="dark"] .navbar-custom {
    background: linear-gradient(135deg, #141a42, #126a63);
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 8px 12px;
}

/* Header-Actions: Darkmode + Logout visuell einheitlich */
.nav-actions .theme-toggle-btn,
.nav-actions .logout-btn--icon {
    height: 38px;
    border: 1px solid rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.15);
}

.nav-actions .theme-toggle-btn:hover,
.nav-actions .logout-btn--icon:hover {
    background: rgba(255,255,255,0.25);
}

[data-theme="dark"] .table {
    --bs-table-bg: var(--surface-card);
    --bs-table-color: var(--text-dark);
    --bs-table-border-color: var(--input-border);
    --bs-table-striped-bg: var(--table-striped);
    --bs-table-striped-color: var(--text-dark);
}

[data-theme="dark"] .table thead {
    background-color: var(--table-head-bg);
    color: var(--table-head-text);
}

[data-theme="dark"] .text-muted {
    color: #afbac9 !important;
}

[data-theme="dark"] .offcanvas,
[data-theme="dark"] .modal-content {
    background-color: var(--surface-card);
    color: var(--text-dark);
}

[data-theme="dark"] .btn-outline-secondary {
    color: #d2dae6;
    border-color: #5a677a;
}

[data-theme="dark"] .btn-secondary {
    background-color: #3b475b;
    border-color: #3b475b;
}

/* =========================================
   DARKMODE FEINTUNING (Kontrast)
========================================= */
[data-theme="dark"] body {
    color: var(--text-dark);
}

[data-theme="dark"] .card {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .form-control::placeholder {
    color: #8ea0b7;
    opacity: 1;
}

[data-theme="dark"] .table-primary,
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-info {
    --bs-table-bg: #1a2538;
    --bs-table-color: #e5ebf3;
    --bs-table-border-color: #2a3547;
}

[data-theme="dark"] .table-warning {
    --bs-table-bg: #3a3219;
    --bs-table-color: #ffefbd;
}

[data-theme="dark"] .table-danger {
    --bs-table-bg: #3a1f27;
    --bs-table-color: #ffd6de;
}

[data-theme="dark"] .table-info {
    --bs-table-bg: #1c3040;
    --bs-table-color: #d3eeff;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: inherit;
    color: inherit;
}

[data-theme="dark"] .table thead.table-primary,
[data-theme="dark"] .table thead.table-secondary {
    --bs-table-bg: #1b2940;
    --bs-table-color: #e5ebf3;
}

/* Bootstrap-Kontextzeilen explizit setzen (inkl. Summenzeilen) */
[data-theme="dark"] .table tbody tr.table-secondary > * {
    background-color: #263246 !important;
    color: #e5ebf3 !important;
}

[data-theme="dark"] .table tbody tr.table-danger > * {
    background-color: #3a1f27 !important;
    color: #ffd6de !important;
}

[data-theme="dark"] .table tbody tr.table-warning > * {
    background-color: #3a3219 !important;
    color: #ffefbd !important;
}

[data-theme="dark"] .table tbody tr.table-info > * {
    background-color: #1c3040 !important;
    color: #d3eeff !important;
}

[data-theme="dark"] .table tbody tr.table-light > * {
    background-color: #222d41 !important;
    color: #dce5f0 !important;
}

[data-theme="dark"] .btn-dark {
    background-color: #22314a;
    border-color: #22314a;
}

[data-theme="dark"] .btn-outline-dark {
    color: #d2dae6;
    border-color: #607089;
}

[data-theme="dark"] .btn-outline-dark:hover {
    color: #0f1420;
    background-color: #d2dae6;
    border-color: #d2dae6;
}

/* Auswertung: seiten-spezifische Darkmode-Nachschärfung */
[data-theme="dark"] .auswertung-page .card,
[data-theme="dark"] .auswertung-page .table-responsive {
    background-color: var(--surface-card);
}

[data-theme="dark"] .auswertung-page .text-muted {
    color: #c5d0de !important;
}

[data-theme="dark"] .auswertung-page .table {
    --bs-table-bg: #172238;
    --bs-table-color: #e5ebf3;
    --bs-table-border-color: #2a3547;
    --bs-table-striped-bg: #131d30;
    --bs-table-striped-color: #e5ebf3;
}

[data-theme="dark"] .auswertung-page .table > :not(caption) > * > * {
    color: #e5ebf3 !important;
    border-color: #2a3547 !important;
}

/* Bootstrap-Stripe-Overlay global für die Auswertung deaktivieren
   (sonst werden Kontextzeilen je nach odd/even wieder aufgehellt). */
[data-theme="dark"] .auswertung-page .table.table-striped > tbody > tr > * {
    --bs-table-accent-bg: transparent !important;
}

[data-theme="dark"] .auswertung-page .table thead.table-primary > tr > th,
[data-theme="dark"] .auswertung-page .table thead.table-secondary > tr > th {
    background-color: #1b2940 !important;
    color: #e5ebf3 !important;
}

[data-theme="dark"] .auswertung-page .table tbody tr.table-secondary > * {
    --bs-table-bg: #f0f2f5 !important;
    --bs-table-color: #1f242d !important;
    --bs-table-accent-bg: #f0f2f5 !important;
    background-color: #f0f2f5 !important;
    color: #1f242d !important;
}

[data-theme="dark"] .zeiterfassung-page .table tbody tr.table-secondary > * {
    --bs-table-bg: #f0f2f5 !important;
    --bs-table-color: #1f242d !important;
    --bs-table-accent-bg: #f0f2f5 !important;
    background-color: #f0f2f5 !important;
    color: #1f242d !important;
}

.zeiterfassung-page #vertretung_fuer_user_id {
    font-size: 1rem;
}

[data-theme="dark"] .zeiterfassung-page #vertretung_fuer_user_id {
    color: #e8eef7;
}

[data-theme="dark"] .auswertung-page .table tbody tr.table-danger > * {
    --bs-table-bg: #f7dfe5 !important;
    --bs-table-color: #1f1417 !important;
    --bs-table-accent-bg: #f7dfe5 !important;
    background-color: #f7dfe5 !important;
    color: #1f1417 !important;
}

[data-theme="dark"] .auswertung-page .table tbody tr.table-warning > * {
    --bs-table-bg: #f6eec9 !important;
    --bs-table-color: #211b0c !important;
    --bs-table-accent-bg: #f6eec9 !important;
    background-color: #f6eec9 !important;
    color: #211b0c !important;
}

[data-theme="dark"] .auswertung-page .table tbody tr.table-info > * {
    --bs-table-bg: #1f3244 !important;
    --bs-table-color: #d7f0ff !important;
    --bs-table-accent-bg: #1f3244 !important;
    background-color: #1f3244 !important;
    color: #d7f0ff !important;
}

/* In Warnung/Fehler-Zeilen sind Hinweise aktuell als .text-muted markiert.
   Auf hellem Kontext-Hintergrund muss die Schrift dunkel bleiben. */
[data-theme="dark"] .auswertung-page .table tbody tr.table-danger .text-muted,
[data-theme="dark"] .auswertung-page .table tbody tr.table-warning .text-muted {
    color: #2b2b2b !important;
}

[data-theme="dark"] code {
    color: #99d6ff;
}

/* =========================================
   MOBILE OPTIMIERUNG
========================================= */

@media (max-width: 768px) {

    .navbar-custom {
        padding: 12px 16px;
    }

    .navbar-custom .container-fluid {
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .logo {
        max-height: 30px;
    }

    .app-title {
        font-size: 17px;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-controls {
        order: 1;
    }

    .nav-logo-top {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 2px;
    }

    .nav-logo-top .logo {
        max-height: 30px;
    }

    .nav-logo-top .app-title {
        font-size: 15px;
        line-height: 1.1;
        max-width: 100%;
        text-align: center;
        color: white;
    }

    .nav-actions {
        order: 3;
        margin-left: 0;
        gap: 6px;
    }

    .theme-toggle-label {
        display: none;
    }

    .logout-btn {
        padding: 8px 10px;
    }

    .logout-label {
        display: none;
    }

    .card-body {
        padding: 20px;
    }

    .alert {
        font-size: 1rem;
        line-height: 1.45;
    }

    .row,
    [class*="col-"] {
        overflow: visible !important;
    }

    .hover-card:hover {
        transform: translateZ(0);
        box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    }

    /* FIX: Extra Abstand unten auf Mobile
       verhindert Abschneiden durch Browser-UI-Leisten */
    body {
        padding-bottom: 80px;
    }

}

@media (max-width: 430px) {
    .nav-logo-top .app-title {
        max-width: 190px;
    }
}

/* =========================================
   APP SHELL + SIDEBAR (UI ONLY)
   Used by layout/header.php later
========================================= */

:root {
    --sidebar-width: 240px;
    --sidebar-bg: var(--surface-card);
    --sidebar-border: rgba(35, 40, 94, 0.10);
    --content-padding: 24px;
}

/* App shell container:
   - Desktop: sidebar + content side by side
   - Mobile: sidebar hidden (Drawer overlay will be used in header.php)
*/
.app-shell {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.app-shell__sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 14px 12px;
    flex: 0 0 auto;
}

.app-shell__content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 var(--content-padding);
}

/* Desktop collapsed state:
   - No layout shift (sidebar outer width stays constant)
   - Only labels hidden, icons remain visible
*/
.sidebar-collapsed aside.app-shell__sidebar .nav-label {
    display: none;
}

.sidebar-collapsed aside.app-shell__sidebar .nav-link {
    justify-content: center;
    gap: 0 !important;
}

/* Base sidebar navigation links */
.app-shell__sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-shell__sidebar .nav-group {
    margin-top: 10px;
}

.app-shell__sidebar .nav-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 600;
    color: var(--text-dark);
}

.app-shell__sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-dark);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

[data-theme="dark"] .app-shell__sidebar .nav-link,
[data-theme="dark"] .app-shell__sidebar .nav-group-title {
    color: #d8e1ec;
}

[data-theme="dark"] .app-shell__sidebar .nav-link:hover,
[data-theme="dark"] .app-shell__sidebar .nav-group-title:hover {
    background: rgba(95, 143, 175, 0.22);
    color: #e5ebf3;
}

.app-shell__sidebar .nav-link:hover {
    background: rgba(95, 143, 175, 0.14);
    color: var(--primary-dark);
}

/* Active state (Variant A: icon highlight only, no active bar) */
.app-shell__sidebar .nav-link.is-active {
    background: rgba(28, 158, 143, 0.14);
    color: var(--primary-teal);
}

[data-theme="dark"] .app-shell__sidebar .nav-link.is-active,
[data-theme="dark"] .sidebar-collapsed aside.app-shell__sidebar .nav-group-title.is-active {
    background: rgba(28, 158, 143, 0.24);
    color: #81e4d9;
}

.app-shell__sidebar .nav-link.is-active:hover {
    background: rgba(28, 158, 143, 0.18);
    color: var(--primary-teal);
}

/* Active group (used for Admin "Mitarbeiter" highlight in collapsed mode) */
.sidebar-collapsed aside.app-shell__sidebar .nav-group-title.is-active {
    background: rgba(28, 158, 143, 0.14);
    color: var(--primary-teal);
}

/* Mobile: hide desktop sidebar in layout; use overlay drawer later */
@media (max-width: 991.98px) {
    aside.app-shell__sidebar {
        display: none;
    }

    .app-shell__content {
        padding: 0 16px;
    }
}

/* Hide sub-navigation in desktop collapsed state */
.sidebar-collapsed aside.app-shell__sidebar .nav-group-sub {
    display: none;
}

/* Mobile: Offcanvas-Navigation mit vollständigen Textlabels, lesbare Breite */
@media (max-width: 991.98px) {
    #sidebarDrawer.offcanvas-start {
        --bs-offcanvas-width: min(320px, 92vw);
    }

    /* Flex-Layout: scrollbarer Bereich beginnt oben */
    #sidebarDrawer.offcanvas {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100dvh;
    }

    #sidebarDrawer .offcanvas-header {
        flex-shrink: 0;
    }

    #sidebarDrawer .offcanvas-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        overflow-anchor: none;
        padding-top: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        scroll-behavior: auto;
    }

    #sidebarDrawer .sidebar-drawer {
        flex: 0 0 auto;
        width: 100%;
        align-self: stretch;
    }

    #sidebarDrawer .sidebar-drawer .nav {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    /* Text + Icon wie Desktop: linksbündig, Abstand zwischen Icon und Label */
    #sidebarDrawer .sidebar-drawer .nav-link {
        justify-content: flex-start;
        gap: 10px;
    }

    #sidebarDrawer .sidebar-drawer .nav-group-title {
        justify-content: flex-start;
        gap: 10px;
    }

    #sidebarDrawer .sidebar-drawer .nav-group-sub .nav-link {
        justify-content: flex-start;
    }
}

/* Dashboard: Abstand vor Archivierung (Admin) */
.dashboard-archiv-separator {
    margin-top: 3.5rem !important;
    margin-bottom: 1.25rem !important;
}

/* =========================================
   AUTH PAGES (e.g. login)
========================================= */

/* Login: Petrol-Hintergrund + Layout in login.php (nonce); hier Kontrast / Karte */

/* Logo-Zeile über der Karte: gut lesbar auf dunklem Grund */
body.auth-page .text-muted {
    color: rgba(255, 255, 255, 0.88) !important;
}

.auth-card {
    max-width: 460px;
    margin: 0 auto;
    background-color: #fff;
    border: none;
    border-radius: 1rem;
    overflow: hidden;
}

body.auth-page .auth-card .card-body {
    background-color: #fff;
}

body.auth-page .auth-page-logo {
    border-radius: 0.75rem;
}

/* =========================================
   KALENDER (abwesenheiten)
========================================= */

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-toolbar__left {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.calendar-toolbar__title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-dark);
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.calendar-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
}

.calendar-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.calendar-dot--urlaub,
.calendar-event--urlaub { background: #198754; color: #fff; }
.calendar-dot--elternzeit,
.calendar-event--elternzeit { background: #6f42c1; color: #fff; }
.calendar-dot--meeting,
.calendar-event--meeting { background: #0d6efd; color: #fff; }
.calendar-dot--teamevent,
.calendar-event--teamevent { background: #0dcaf0; color: #0f1b24; }
.calendar-dot--sonstiges,
.calendar-event--sonstiges { background: #6c757d; color: #fff; }
.calendar-dot--geburtstag { background: #ffc107; color: #1d1d1d; }
.calendar-dot--feiertag { background: #d63384; color: #fff; }
.calendar-dot--ferien { background: #fd7e14; color: #fff; }
.calendar-dot--jubilaeum { background: #0d6efd; color: #ffffff; }
.calendar-dot--storniert,
.calendar-event--storniert { background: #dc3545; color: #fff; }

.calendar-grid-wrap {
    overflow-x: auto;
}

.calendar-shell {
    position: relative;
}

.calendar-drawer-backdrop {
    display: none;
}

.calendar-create-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 92vw);
    height: 100%;
    background: var(--surface-card);
    border-left: 1px solid var(--input-border);
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.18);
    padding: 16px;
    overflow-y: auto;
    transform: translateX(108%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.18s ease;
    z-index: 20;
}

.calendar-create-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.calendar-user-checklist {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--input-bg);
}

.calendar-month-grid {
    table-layout: fixed;
    min-width: 920px;
}

.calendar-month-grid th {
    text-align: center;
    font-weight: 700;
}

.calendar-day-cell {
    min-width: 130px;
    height: 145px;
    vertical-align: top;
    border-color: var(--input-border);
}

.calendar-day-cell.is-current-month {
    background: var(--surface-card);
}

.calendar-day-cell.is-outside-month {
    background: #eef2f7;
}

.calendar-day-cell.is-weekend.is-current-month {
    background: #f8fbff;
}

.calendar-day-cell.is-today {
    box-shadow: inset 0 0 0 2px rgba(28, 158, 143, 0.7);
}

.calendar-day-number--today {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(28, 158, 143, 0.16);
    color: #0c6e64;
}

.calendar-day-number {
    font-size: 0.82rem;
}

.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-day-specials {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.calendar-event {
    display: block;
    border-radius: 8px;
    padding: 3px 7px;
    font-size: 0.75rem;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.12s ease, filter 0.12s ease;
}

.calendar-event:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.calendar-special {
    display: block;
    border-radius: 8px;
    padding: 2px 7px;
    font-size: 0.73rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.calendar-special--feiertag {
    background: rgba(214, 51, 132, 0.14);
    color: #9e1f60;
    border-color: rgba(214, 51, 132, 0.28);
}

.calendar-special--ferien {
    background: rgba(253, 126, 20, 0.14);
    color: #a24b07;
    border-color: rgba(253, 126, 20, 0.28);
}

.calendar-special--geburtstag {
    background: rgba(255, 193, 7, 0.2);
    color: #7a5a00;
    border-color: rgba(255, 193, 7, 0.38);
}

.calendar-special--jubilaeum {
    background: rgba(13, 110, 253, 0.16);
    color: #0b4fc2;
    border-color: rgba(13, 110, 253, 0.34);
}

.calendar-more-events {
    font-size: 0.74rem;
    color: #657187;
    padding: 1px 2px;
}

.calendar-mobile-list {
    display: none;
}

.calendar-mobile-day {
    border: 1px solid var(--input-border);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: var(--surface-card);
}

.calendar-mobile-day__date {
    font-weight: 700;
    margin-bottom: 8px;
}

.calendar-mobile-day__events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calendar-event-row-highlight > * {
    animation: eventRowPulse 1.6s ease;
}

@keyframes eventRowPulse {
    0% { background-color: rgba(28, 158, 143, 0.24); }
    100% { background-color: transparent; }
}

[data-theme="dark"] .calendar-day-cell.is-outside-month {
    background: #101827;
}

[data-theme="dark"] .calendar-day-cell.is-current-month {
    background: #172238;
}

[data-theme="dark"] .calendar-day-cell.is-weekend.is-current-month {
    background: #1c2a41;
}

[data-theme="dark"] .calendar-day-cell.is-today {
    box-shadow: inset 0 0 0 2px rgba(129, 228, 217, 0.75);
}

[data-theme="dark"] .calendar-day-number--today {
    background: rgba(129, 228, 217, 0.2);
    color: #a8efe8;
}

[data-theme="dark"] .calendar-more-events {
    color: #9dafc6;
}

[data-theme="dark"] .calendar-special--feiertag {
    background: rgba(214, 51, 132, 0.24);
    color: #ffb5d6;
    border-color: rgba(255, 181, 214, 0.35);
}

[data-theme="dark"] .calendar-special--ferien {
    background: rgba(253, 126, 20, 0.24);
    color: #ffd4b2;
    border-color: rgba(255, 212, 178, 0.35);
}

[data-theme="dark"] .calendar-special--geburtstag {
    background: rgba(255, 193, 7, 0.24);
    color: #ffe59a;
    border-color: rgba(255, 229, 154, 0.35);
}

[data-theme="dark"] .calendar-special--jubilaeum {
    background: rgba(13, 110, 253, 0.24);
    color: #bfd7ff;
    border-color: rgba(191, 215, 255, 0.35);
}

@media (max-width: 991.98px) {
    .calendar-shell {
        display: flex;
        flex-direction: column;
    }

    .calendar-toolbar {
        order: 1;
    }

    .calendar-legend {
        order: 2;
    }

    .calendar-create-drawer {
        order: 3;
    }

    .calendar-mobile-list,
    .calendar-grid-wrap {
        order: 4;
    }

    .calendar-mobile-list {
        display: block;
    }

    .calendar-grid-wrap {
        display: none;
    }

    .calendar-toolbar__title {
        width: 100%;
    }

    .calendar-toolbar__left {
        width: 100%;
    }

    .calendar-toolbar__left .btn {
        flex: 1 1 30%;
        min-width: 0;
    }

    .calendar-create-drawer {
        display: none;
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: 1px solid var(--input-border);
        border-radius: 12px;
        margin-top: 10px;
    }

    .calendar-create-drawer.is-open {
        display: block;
    }

    .calendar-drawer-backdrop {
        display: none !important;
    }

    .calendar-events-table thead {
        display: none;
    }

    .calendar-events-table,
    .calendar-events-table tbody,
    .calendar-events-table tr,
    .calendar-events-table td {
        display: block;
        width: 100%;
    }

    .calendar-events-table tr {
        border: 1px solid var(--input-border);
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 10px;
        background: var(--surface-card);
    }

    .calendar-events-table td {
        border: none !important;
        padding: 6px 2px !important;
    }

    .calendar-events-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        display: inline;
    }

    .calendar-actions-cell details > summary {
        width: 100%;
    }

    .calendar-actions-cell .btn {
        width: 100%;
    }

    .calendar-edit-form,
    .calendar-delete-form {
        margin-top: 8px;
    }
}

@media (min-width: 992px) {
    .calendar-drawer-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(6, 16, 30, 0.24);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 15;
    }

    .calendar-drawer-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* =========================================
   CSP: keine Inline-style="" Attribute
========================================= */

.app-footer-spacer {
    height: 32px;
}

.sidebar-drawer-fullwidth {
    width: 100%;
    border-right: none;
}

.dienstplan-month-input {
    width: 160px;
    max-width: 100%;
}

.dienstplan-filter-select {
    width: auto;
    max-width: 100%;
}

.dienstplan-name-highlight {
    font-weight: bold;
    color: #0d6efd;
}

.admin-th-name {
    min-width: 220px;
}

.admin-th-pb {
    min-width: 200px;
}

.admin-th-actions {
    min-width: 300px;
}

.pb-expiry-meta {
    font-size: 0.75rem;
}

.announcement-scroll-box {
    max-height: 280px;
    overflow-y: auto;
}

.app-progress-thin {
    height: 8px;
}

.app-progress-bar-zero {
    width: 0%;
}

/* Passwortstärke (change_password.php) — ohne JS-inline-style */
.app-pw-strength-weak {
    width: 25%;
}

.app-pw-strength-mid {
    width: 60%;
}

.app-pw-strength-strong {
    width: 100%;
}