/* ═══════════════════════════════════════════════════════════════
   Absenzio – Consolidated Design System
   Wird NACH allen anderen CSS-Dateien geladen.
   Definiert die einheitliche visuelle Sprache der App.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS Custom Properties (Design Tokens) ─────────────── */
:root {
    /* Farben */
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    
    /* Spacing */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows sind in dark-mode-consolidated.css definiert (Light + Dark Varianten) */
    
    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease;
}


/* ── 2. Card Design System ─────────────────────────────────── */

/* Basis-Card: Kein Hover-Effekt (für statische Info-Cards) */
.card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: none;
    margin-bottom: var(--space-lg);
}

/* Interaktive Card: Hover-Effekt NUR für klickbare Cards */
.card-interactive,
.stat-card,
.quick-action,
.admin-tile,
.admin-stat-card {
    transition: var(--transition-base);
    cursor: pointer;
}

.card-interactive:hover,
.stat-card:hover,
.quick-action:hover,
.admin-tile:hover,
.admin-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Card-Header Varianten */
.card-header {
    background-color: var(--bg-card-header, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #eee);
}

/* Primärer Card-Header (z.B. Formular-Überschriften) */
.card-header-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0b5ed7 100%);
    color: white;
    border-bottom: none;
    font-weight: 600;
}

.card-header-primary h4,
.card-header-primary h5,
.card-header-primary h6 {
    color: white;
}

/* Subtiler Card-Header (z.B. Sektionen, Infos) */
.card-header-subtle {
    background-color: var(--bg-card-header, #f8f9fa);
    border-bottom: 2px solid var(--border-color, #e9ecef);
    font-weight: 600;
}


/* ── 3. Alert System (einmalig, ohne !important) ──────────── */
.alert {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    border: 1px solid transparent;
    font-weight: 500;
}

.alert .alert-heading {
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.alert p:last-child {
    margin-bottom: 0;
}


/* ── 4. Status-Badge System (Single Source of Truth) ──────── */
.status-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-md);
}

.status-approved  { background-color: var(--success-color); color: white; }
.status-pending   { background-color: #6c757d; color: white; }
.status-rejected  { background-color: var(--danger-color); color: white; }
.status-warning   { background-color: var(--warning-color); color: white; }
.status-partial   { background-color: #fd7e14; color: white; }
.status-deleted   { background-color: #343a40; color: white; }
.status-special   { background-color: var(--info-color); color: #000; }


/* ── 4b. Notification Count Badge (Single Source of Truth) ── */
.notification-count-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 1;
    color: #fff;
    background-color: var(--danger-color);
    border-radius: 10rem;
    top: -6px;
    right: -10px;
}

/* Navbar-spezifische Positionierung */
.navbar .notification-count-badge {
    top: 2px;
    right: -4px;
}


/* ── 5. Form Controls ─────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Bessere Validierungs-Styles */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger-color);
    background-image: none; /* Bootstrap-Icon entfernen für saubereres Design */
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
    display: block;
    font-size: 0.85em;
    margin-top: var(--space-xs);
}

/* Label-Konsistenz */
.form-label.fw-semibold {
    font-size: 0.9rem;
    margin-bottom: var(--space-xs);
}


/* ── 6. Button Konsistenz ─────────────────────────────────── */
.btn {
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    font-weight: 500;
}


/* ── 7. Tabellen ──────────────────────────────────────────── */

/* Tabellen-Hover: sanfter Effekt */
.table-hover tbody tr:hover {
    background-color: var(--table-hover-bg, rgba(0, 0, 0, 0.02));
}

/* Spaltenbreiten-Klassen (ersetzen inline styles) */
.table-col-sm     { width: 10%; }
.table-col-md     { width: 15%; }
.table-col-lg     { width: 20%; }
.table-col-xl     { width: 25%; }
.table-col-status { width: 160px; min-width: 160px; }
.table-col-actions { width: 140px; min-width: 140px; }

/* Entferne Hover auf Buttons/Badges innerhalb von Tabellen */
.table .btn:hover,
.table .action-buttons:hover,
.table .status-container:hover,
.table .badge:hover {
    background-color: transparent;
}


/* ── 8. Container für Formulare ───────────────────────────── */
.container-form {
    max-width: 900px;
}

@media (min-width: 1200px) {
    .container-form {
        max-width: 800px;
    }
}


/* ── 9. Collapsible Info-Alerts ───────────────────────────── */
.alert-collapsible {
    cursor: pointer;
    user-select: none;
}

.alert-collapsible .collapse-icon {
    transition: var(--transition-fast);
}

.alert-collapsible[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}


/* ── 9b. Mobile Navigation Link (theme-aware) ────────────── */
.mobile-nav-link {
    color: var(--mobile-nav-link, #212529);
    border: none;
    background: none;
    transition: var(--transition-base);
    border-radius: 8px;
    margin: 2px;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
    color: var(--link-color);
    background-color: var(--mobile-nav-active-bg, rgba(13, 110, 253, 0.1));
    text-decoration: none;
}

.mobile-nav-link.active {
    color: var(--mobile-nav-active, #0d6efd);
    background-color: var(--mobile-nav-active-bg, rgba(13, 110, 253, 0.1));
    font-weight: 700;
}


/* ── 10. Mobile Optimierungen ─────────────────────────────── */
@media (max-width: 767.98px) {
    .card {
        margin-bottom: var(--space-md);
    }
    
    /* Nur eigenständige Buttons auf volle Breite – NICHT in Tabellen oder Action-Gruppen */
    .d-grid .btn,
    .mobile-stack .btn,
    .form-actions .btn {
        width: 100%;
        margin-bottom: var(--space-sm);
    }
    
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Tabellen-Spalten: feste Breiten auf Mobile entfernen */
    .table th,
    .table td {
        white-space: normal;
        word-break: break-word;
    }
    
    /* Overflow-Schutz – NUR auf .container (nicht .container-fluid in Navbar,
       da overflow-x: hidden auch overflow-y auf auto setzt und Dropdowns clippt) */
    .container {
        overflow-x: hidden;
    }
}


/* ── 11. Empty States ─────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
}

.empty-state i {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: var(--space-md);
    display: block;
}

.empty-state h4 {
    color: var(--text-primary, #212529);
    margin-bottom: var(--space-sm);
}

/* ── 12. Breadcrumb Responsive ───────────────────────────── */
.breadcrumb-responsive {
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}