/*
 * ============================================
 * ABSENZIO - KONSOLIDIERTES DARK MODE CSS
 * ============================================
 * Letzte Aktualisierung: 2025-09-30
 * 
 * Diese Datei vereint alle Dark Mode Stile in einer
 * gut strukturierten und wartbaren Datei.
 * 
 * Unterstützt:
 * - Automatischen Dark Mode (@media prefers-color-scheme)
 * - Manuellen Dark Mode ([data-theme="dark"])
 */

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLEN)
   ============================================ */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2a2a2a;
    --dark-bg-tertiary: #333;
    --dark-border: #404040;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #999;
    --dark-hover: rgba(255, 255, 255, 0.08);
    --dark-subtle: rgba(255, 255, 255, 0.03);
}

/* ============================================
   AUTOMATISCHER DARK MODE
   ============================================ */
@media (prefers-color-scheme: dark) {
    
    /* ========== GLOBAL & LAYOUT ========== */
    :root {
        --bs-body-bg: var(--dark-bg-primary);
        --bs-body-color: var(--dark-text-primary);
        --bs-border-color: var(--dark-border);
        --bs-white: var(--dark-bg-secondary);
        --bs-light: var(--dark-bg-secondary);
    }

    body {
        background-color: var(--dark-bg-primary);
        color: var(--dark-text-primary);
    }

    /* ========== CARDS & CONTAINERS ========== */
    .card {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border);
        color: var(--dark-text-primary);
    }

    .card-header {
        background-color: var(--dark-bg-tertiary);
        border-bottom: 1px solid var(--dark-border);
    }

    .card-body {
        background-color: var(--dark-bg-secondary);
        color: var(--dark-text-primary);
    }

    .card-footer {
        background-color: var(--dark-bg-secondary);
        border-top: 1px solid var(--dark-border);
    }

    /* ========== TABLES ========== */
    /* CSS-Variablen für Tables */
    :root {
        --bs-table-bg: var(--dark-bg-secondary);
        --bs-table-striped-bg: var(--dark-subtle);
        --bs-table-hover-bg: var(--dark-hover);
    }

    /* Base table styles */
    .table,
    table {
        background-color: var(--dark-bg-secondary);
        color: var(--dark-text-primary);
        border-color: var(--dark-border);
    }

    .table td,
    .table th {
        background-color: var(--dark-bg-secondary);
        color: var(--dark-text-primary);
        border-color: var(--dark-border);
    }

    /* Table header */
    .table thead,
    .table thead th {
        background-color: var(--dark-bg-tertiary);
        color: var(--dark-text-primary);
        border-color: var(--dark-border);
    }

    /* Table hover */
    .table-hover tbody tr:hover,
    .table-hover tbody tr:hover td,
    .table-hover tbody tr:hover th {
        background-color: var(--dark-hover);
        color: var(--dark-text-primary);
    }

    /* Table striped */
    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--dark-subtle);
    }

    /* Override any white backgrounds */
    .bg-white,
    .bg-light,
    .table-light {
        background-color: var(--dark-bg-secondary) !important;
        color: var(--dark-text-primary) !important;
    }

    /* ========== FORMS ========== */
    .form-control,
    .form-select {
        background-color: var(--dark-bg-tertiary);
        border-color: var(--dark-border);
        color: var(--dark-text-primary);
    }

    .form-control:focus,
    .form-select:focus {
        background-color: var(--dark-bg-tertiary);
        border-color: #0d6efd;
        color: var(--dark-text-primary);
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .form-label {
        color: var(--dark-text-primary);
    }

    /* Date inputs */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        background-color: var(--dark-bg-tertiary);
        border-color: var(--dark-border);
        color: var(--dark-text-primary);
        color-scheme: dark;
    }

    /* Checkboxes & Switches */
    .form-check-input {
        background-color: #495057;
        border: 2px solid #6c757d;
    }

    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .form-check-input:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .form-check-label {
        color: var(--dark-text-primary);
    }

    /* ========== NAVIGATION ========== */
    .navbar-dark {
        background-color: var(--dark-bg-primary) !important;
    }

    /* Dropdown menus */
    .dropdown-menu {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border);
    }

    .dropdown-item {
        color: var(--dark-text-primary);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--dark-hover);
        color: #fff;
    }

    .dropdown-divider {
        border-top-color: var(--dark-border);
    }

    .dropdown-header {
        color: var(--dark-text-secondary);
    }

    /* Mobile bottom navigation */
    .fixed-bottom.bg-light,
    .mobile-bottom-nav {
        background-color: var(--dark-bg-primary) !important;
        border-top: 1px solid var(--dark-border) !important;
    }

    .mobile-bottom-nav .btn-link {
        color: var(--dark-text-primary) !important;
    }

    .mobile-bottom-nav .btn-link:hover {
        color: #fff !important;
        background-color: var(--dark-hover) !important;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav a[aria-current="page"] {
        color: #4da3ff !important;
        background-color: rgba(77, 163, 255, 0.1) !important;
    }

    /* ========== BUTTONS & LINKS ========== */
    a {
        color: #4da3ff;
    }

    a:hover {
        color: #80bfff;
    }

    .btn-outline-primary {
        color: #4da3ff;
        border-color: #4da3ff;
    }

    .btn-outline-primary:hover {
        background-color: #4da3ff;
        border-color: #4da3ff;
        color: #fff;
    }

    .btn-outline-secondary {
        color: #adb5bd;
        border-color: #6c757d;
    }

    .btn-light {
        background-color: #e0e0e0;
        border-color: #e0e0e0;
        color: var(--dark-bg-primary);
    }

    .btn-light:hover {
        background-color: #f0f0f0;
        border-color: #f0f0f0;
        color: var(--dark-bg-primary);
    }

    /* Quick action cards */
    .quick-action {
        background-color: var(--dark-bg-secondary) !important;
        border: 1px solid var(--dark-border) !important;
    }

    .quick-action:hover {
        background-color: var(--dark-bg-tertiary) !important;
        transform: translateY(-2px);
    }

    .quick-action .card-body {
        color: var(--dark-text-primary);
    }

    /* ========== ALERTS ========== */
    .alert {
        border: 1px solid transparent;
    }

    .alert-info {
        background-color: rgba(13, 202, 240, 0.2);
        border-color: rgba(13, 202, 240, 0.4);
        color: #6edff6;
    }

    .alert-primary {
        background-color: rgba(13, 110, 253, 0.2);
        border-color: rgba(13, 110, 253, 0.3);
        color: #4da3ff;
    }

    .alert-success {
        background-color: rgba(25, 135, 84, 0.2);
        border-color: rgba(25, 135, 84, 0.3);
        color: #75d399;
    }

    .alert-danger {
        background-color: rgba(220, 53, 69, 0.2);
        border-color: rgba(220, 53, 69, 0.3);
        color: #f1748d;
    }

    .alert-warning {
        background-color: rgba(255, 193, 7, 0.2);
        border-color: rgba(255, 193, 7, 0.3);
        color: #ffd454;
    }

    /* ========== BADGES ========== */
    .badge {
        font-weight: 500;
    }

    .badge.bg-danger {
        background-color: #dc3545 !important;
        color: #fff !important;
    }

    /* ========== MODALS ========== */
    .modal-content {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border);
        color: var(--dark-text-primary);
    }

    .modal-header,
    .modal-footer {
        border-color: var(--dark-border);
    }

    /* ========== PAGINATION ========== */
    .pagination {
        --bs-pagination-bg: var(--dark-bg-secondary);
        --bs-pagination-border-color: var(--dark-border);
        --bs-pagination-color: var(--dark-text-primary);
        --bs-pagination-hover-bg: var(--dark-hover);
        --bs-pagination-hover-border-color: var(--dark-border);
        --bs-pagination-hover-color: #fff;
        --bs-pagination-disabled-bg: var(--dark-bg-secondary);
        --bs-pagination-disabled-border-color: var(--dark-border);
        --bs-pagination-disabled-color: #6c757d;
    }

    .page-link {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border);
        color: var(--dark-text-primary);
    }

    .page-link:hover {
        background-color: var(--dark-hover);
        border-color: var(--dark-border);
        color: #fff;
    }

    .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    .page-item.disabled .page-link {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border);
        color: #6c757d;
    }

    /* ========== BREADCRUMBS ========== */
    .breadcrumb {
        background-color: var(--dark-bg-secondary);
        border: 1px solid var(--dark-border);
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
    }

    .breadcrumb-item {
        color: var(--dark-text-secondary);
    }

    .breadcrumb-item a {
        color: #01c29a;
        text-decoration: none;
        transition: all 0.15s ease-in-out;
    }

    .breadcrumb-item a:hover {
        color: #0ca385;
        background-color: rgba(1, 194, 154, 0.1);
    }

    .breadcrumb-item.active {
        color: var(--dark-text-primary);
        font-weight: 500;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: var(--dark-text-secondary);
    }

    /* ========== LIST GROUPS ========== */
    .list-group,
    .list-group-item {
        background-color: var(--dark-bg-secondary);
        color: var(--dark-text-primary);
        border-color: var(--dark-border);
    }

    .list-group-item:hover {
        background-color: var(--dark-hover);
    }

    /* Upcoming items */
    .upcoming-item {
        background-color: var(--dark-bg-secondary);
        border-left: 4px solid var(--dark-border);
        padding-left: 15px;
        margin-bottom: 12px;
        transition: background-color 0.2s;
    }

    .upcoming-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .upcoming-holiday {
        border-left-color: #17a085;
    }

    .upcoming-absence {
        border-left-color: #0a58ca;
    }

    .upcoming-deadline {
        border-left-color: #d39e00;
    }

    /* ========== BORDERS & UTILITIES ========== */
    .border,
    .border-1,
    .border-top,
    .border-bottom,
    .border-start,
    .border-end {
        border-color: var(--dark-border) !important;
    }

    .text-muted {
        color: var(--dark-text-secondary) !important;
    }

    .text-dark {
        color: var(--dark-text-primary) !important;
    }

    /* ========== SHADOWS ========== */
    .shadow {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
    }

    .shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
    }

    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6) !important;
    }

    /* ========== SPECIAL COMPONENTS ========== */
    /* Login Card */
    .login-card {
        background-color: var(--dark-bg-secondary);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    }

    /* Dashboard Stats */
    .stat-card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    }

    /* Calendar */
    .fc-theme-standard td,
    .fc-theme-standard th {
        border-color: var(--dark-border);
    }

    .fc-theme-standard .fc-scrollgrid {
        border-color: var(--dark-border);
    }

    /* Footer */
    .footer {
        background-color: var(--dark-bg-primary);
        border-top: 1px solid var(--dark-border);
    }

    /* ========== FILTER SECTIONS ========== */
    .filter-section,
    .search-section,
    .mb-3.p-3.rounded,
    .mb-4.p-4.rounded {
        background-color: var(--dark-bg-secondary);
        border: 1px solid var(--dark-border);
        border-radius: 0.375rem;
    }

    /* ========== RESPONSIVE OVERRIDES ========== */
    .table-responsive {
        border-color: var(--dark-border);
    }

    /* Ensure containers don't have unwanted backgrounds */
    .container,
    .container-fluid,
    .row {
        background-color: transparent;
    }
}

/* ============================================
   MANUELLER DARK MODE ([data-theme="dark"])
   ============================================ */
[data-theme="dark"] {
    /* CSS Variables */
    --bs-body-bg: var(--dark-bg-primary);
    --bs-body-color: var(--dark-text-primary);
    --bs-border-color: var(--dark-border);
    --bs-white: var(--dark-bg-secondary);
    --bs-light: var(--dark-bg-secondary);
    --bs-table-bg: var(--dark-bg-secondary);
    --bs-table-striped-bg: var(--dark-subtle);
    --bs-table-hover-bg: var(--dark-hover);
}

[data-theme="dark"] body {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--dark-bg-tertiary);
    border-bottom: 1px solid var(--dark-border);
}

[data-theme="dark"] .card-body {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

/* Tables */
[data-theme="dark"] .table,
[data-theme="dark"] table {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .table thead,
[data-theme="dark"] .table thead th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:hover th {
    background-color: var(--dark-hover);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--dark-subtle);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--dark-bg-tertiary);
    border-color: #0d6efd;
    color: var(--dark-text-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-theme="dark"] .form-label {
    color: var(--dark-text-primary);
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
    color-scheme: dark;
}

[data-theme="dark"] .form-check-input {
    background-color: #495057;
    border: 2px solid #6c757d;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Navigation */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--dark-text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dark-hover);
    color: #fff;
}

/* Buttons & Links */
[data-theme="dark"] a {
    color: #4da3ff;
}

[data-theme="dark"] a:hover {
    color: #80bfff;
}

/* Alerts */
[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.2);
    border-color: rgba(13, 202, 240, 0.4);
    color: #6edff6;
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(13, 110, 253, 0.2);
    border-color: rgba(13, 110, 253, 0.3);
    color: #4da3ff;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: rgba(25, 135, 84, 0.3);
    color: #75d399;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.3);
    color: #f1748d;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffd454;
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--dark-border);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--dark-hover);
    border-color: var(--dark-border);
    color: #fff;
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

[data-theme="dark"] .breadcrumb-item a {
    color: #01c29a;
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: #0ca385;
    background-color: rgba(1, 194, 154, 0.1);
}

/* List Groups */
[data-theme="dark"] .list-group,
[data-theme="dark"] .list-group-item {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--dark-hover);
}

/* Utilities */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .table-light {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .border {
    border-color: var(--dark-border) !important;
}

/* ============================================
   ENDE DER KONSOLIDIERTEN DARK MODE STILE
   ============================================ */