/**
 * ZE - Zeiterfassung Styles
 * Eigenständiges CSS für das Zeiterfassungs-Modul
 */

/* ============================================
   Layout
   ============================================ */
#ze-app {
    display: flex;
    min-height: 100vh;
    background: var(--color-background);
}

/*#sidebar {
    width: 260px;
    background: var(--color-card-bg);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
}*/

#main-content {
    flex: 1;
    margin-left: 260px;
    padding: 24px;
    min-height: 100vh;
}

/* ============================================
   Sidebar
   ============================================ */
.sidebar-logo {
    margin-bottom:18px
}

/*.sidebar-logo img {
    height: 32px;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.15s ease;
}

.nav-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-primary);
}

.nav-item.active {
    background: var(--color-primary-light, #f3e5f5);
    color: var(--color-text-white);
    font-weight: 500;
}

.nav-item .material-icons {
    font-size: 22px;
}

.nav-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-section-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 16px 8px;
}*/

/* App Switcher 
.app-switcher {
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-switcher .label {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-right: auto;
}

.app-link {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.app-link:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-primary));
}

.app-link.active {
    background: var(--color-primary);
    color: var(--color-text-white);
}*/

/* User Menu */
.sidebar-user {
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    display: block;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-logout {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.btn-logout:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-danger, var(--color-error));
}

/* ============================================
   Setup Banner
   ============================================ */
.setup-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--color-text-white);
    padding: 20px 24px;
    margin: -24px -24px 24px -24px;
    border-radius: 0;
}

.setup-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
}

.setup-banner-content .material-icons {
    font-size: 32px;
    opacity: 0.9;
}

.setup-banner-content div {
    flex: 1;
}

.setup-banner-content strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.setup-banner-content p {
    margin: 0;
    opacity: 0.9;
    font-size: 14px;
}

.setup-banner .btn {
    background: var(--color-card-bg);
    color: #667eea;
    border: none;
}

.setup-banner .btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Cards
   ============================================ */
.card {
    background: var(--color-card-bg);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.card h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
}


/* ============================================
   Kalender-Widget
   ============================================ */
.kalender-widget{
    background: var(--color-card-bg);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border:solid 1px var(--color-primary);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Stempel-Widget (Hauptfunktion)
   ============================================ */
.stempel-widget {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    border: solid 1px var(--color-primary);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
}

.stempeln-h3{
    background-color: var(--color-primary);
    color:var(--color-text-white);
}

.stempel-uhr {
    font-size: 20px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.stempel-datum {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.stempel-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 32px;
}

.stempel-status.nicht-gestempelt {
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
}

.stempel-status.anwesend {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.stempel-status.pause {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.stempel-status.gegangen {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.stempel-status .material-icons {
    font-size: 18px;
}

.stempel-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.stempel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
    border: 2px solid var(--color-border-strong);
    border-radius: 16px;
    background: var(--color-card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100px;
    height:100px
}

.stempel-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: var(--color-primary-light, var(--color-primary-subtle));
}

.stempel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stempel-btn .material-icons {
    font-size: 36px;
    color: var(--color-primary);
}

.stempel-btn span:last-child {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.stempel-btn.kommen .material-icons { color: var(--color-success); }
.stempel-btn.gehen .material-icons { color: var(--color-info); }
.stempel-btn.pause .material-icons { color: var(--color-warning-dark); }

/* ============================================
   Mobile-Responsive Grid für Stempel-Seite
   ============================================ */
.stempel-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.85fr;
    gap: 24px;
    align-items: stretch;
}

.stempel-rechts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Mobile Anpassungen */
@media (max-width: 900px) {
    .stempel-grid {
        grid-template-columns: 1fr;
    }
    
    .stempel-widget {
        max-width: 100%;
    }
    
    .kalender-widget {
        max-width: 100%;
    }
}

/* Buchungen heute */
.buchungen-heute {
    margin-top: 40px;
    text-align: left;
}

.buchungen-heute h4 {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.buchung-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.buchung-item:last-child {
    border-bottom: none;
}

.buchung-zeit {
    font-size: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    width: 60px;
}

.buchung-typ {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.buchung-typ.kommen {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.buchung-typ.gehen {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.buchung-typ.pause_start,
.buchung-typ.pause_ende {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* Tages-Zusammenfassung */
.tages-zusammenfassung {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.zusammenfassung-item {
    text-align: center;
}

.zusammenfassung-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.zusammenfassung-wert {
    font-size: 24px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.zusammenfassung-wert.positiv {
    color: var(--color-success);
}

.zusammenfassung-wert.negativ {
    color: var(--color-error);
}

/* ============================================
   Team-Übersicht
   ============================================ */
.team-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Die zentrierte .stat-card mit .value/.label ist entfallen - die vier
   Kacheln in den Anwesenheiten nutzen jetzt .kb-stat aus
   keybuki-ui.css. Sie stand hier doppelt: die zweite Definition weiter
   unten (Flex mit .stat-icon, fuer die Schichtplanung) hat ihr
   text-align: center ohnehin ueberschrieben. Die bleibt, ist damit
   wieder eindeutig. */

/* Team-Tabelle */
.team-table {
    width: 100%;
    border-collapse: collapse;
}

.team-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.team-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: middle;
}

.team-table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.ma-name {
    font-weight: 500;
}

.ma-abteilung {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
}

.status-badge.anwesend {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-badge.pause {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.status-badge.gegangen {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.status-badge.nicht_gestempelt {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

/* ============================================
   Meine Zeiten (Monatsübersicht)
   ============================================ */
.monat-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.monat-navigation h2 {
    margin: 0;
    font-size: 24px;
}

.monat-nav-btns {
    display: flex;
    gap: 8px;
}

.zeiten-kalender {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.kalender-header {
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.kalender-tag {
    aspect-ratio: 1;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.kalender-tag:hover {
    background: rgba(0, 0, 0, 0.04);
}

.kalender-tag.heute {
    border: 2px solid var(--color-primary);
}

.kalender-tag.wochenende {
    background: var(--color-surface-subtle);
}

.kalender-tag.feiertag {
    background: var(--color-warning-light);
}

.kalender-tag .tag-nummer {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.kalender-tag .tag-stunden {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.kalender-tag .tag-differenz {
    font-size: 10px;
    position: absolute;
    bottom: 4px;
    right: 6px;
}

.kalender-tag .tag-differenz.positiv { color: var(--color-success); }
.kalender-tag .tag-differenz.negativ { color: var(--color-error); }

/* Monatssaldo */
.monat-saldo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 24px;
    padding: 24px;
    background: var(--color-surface-subtle);
    border-radius: 12px;
}

.saldo-item {
    text-align: center;
}

.saldo-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.saldo-wert {
    font-size: 28px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Arbeitszeitmodelle
   ============================================ */
.modell-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.modell-card {
    background: var(--color-card-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.15s ease;
}

.modell-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.modell-card.standard {
    border-color: var(--color-primary);
    border-width: 2px;
}

.modell-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.modell-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modell-kuerzel {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-surface-subtle);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.modell-wochenstunden {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.modell-wochenstunden small {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.wochenverteilung {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.wochentag {
    text-align: center;
    padding: 8px 4px;
    border-radius: 6px;
    background: var(--color-surface-subtle);
}

.wochentag .tag {
    font-size: 11px;
    color: var(--color-text-muted);
}

.wochentag .stunden {
    font-size: 14px;
    font-weight: 500;
}

.wochentag.frei {
    background: transparent;
    opacity: 0.4;
}

/* ============================================
   Formulare & Inputs
   ============================================ */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--color-text-primary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background: var(--color-border-strong);
}

.btn-danger {
    background: var(--color-error);
    color: var(--color-text-white);
}

.btn-icon {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background: rgba(0, 0, 0, 0.06);
}

.btn-icon.danger:hover {
    background: #fee;
    color: var(--color-error);
}

/* ============================================
   Modal
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    opacity:1
}

.modal-overlay.hidden {
    display: none;
    opacity:0
}

.modal-content {
    background: var(--color-card-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 60%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================================
   Filter Bar
   ============================================ */
.filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-bar select,
.filter-bar input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--color-input-border);
    border-radius: 6px;
    font-size: 14px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    #sidebar {
        width: 72px;
    }
    
    #sidebar .sidebar-nav span:not(.material-icons),
    #sidebar .nav-section-title,
    #sidebar .app-switcher .label,
    #sidebar .user-info {
        display: none;
    }
    
    #sidebar .nav-item {
        justify-content: center;
        padding: 12px;
    }
    
    #main-content {
        margin-left: 72px;
    }
    
    .team-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .monat-saldo {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #sidebar {
        display: none;
    }
    
    #main-content {
        margin-left: 0;
        padding: 16px;
    }
    
    .stempel-uhr {
        font-size: 48px;
    }
    
    .stempel-buttons {
        flex-direction: column;
    }
    
    .stempel-btn {
        width: 100%;
    }
    
    .tages-zusammenfassung {
        grid-template-columns: 1fr;
    }
    
    .zeiten-kalender {
        font-size: 12px;
    }
}

/* ============================================
   Utilities
   ============================================ */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
}

.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.empty .material-icons {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* ============================================
   BukiPi ZE - Empty States Erweiterung
   Baut auf bestehender .empty Klasse auf
   ============================================ */

/* Titel innerhalb Empty State */
.empty h4,
.empty-state h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

/* Beschreibungstext */
.empty p,
.empty-state p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 20px 0;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Icon etwas prominenter */
.empty .material-icons,
.empty-state .material-icons {
    opacity: 0.6;
    color: var(--color-primary)
}

/* Kompakte Variante für kleinere Bereiche */
.empty.empty-compact,
.empty-state.empty-compact {
    padding: 30px 16px;
}

.empty.empty-compact .material-icons,
.empty-state.empty-compact .material-icons {
    font-size: 36px;
    margin-bottom: 12px;
}

.empty.empty-compact h4,
.empty-state.empty-compact h4 {
    font-size: 15px;
}

.empty.empty-compact p,
.empty-state.empty-compact p {
    font-size: 13px;
    margin-bottom: 16px;
}

/* Button Styling (nutzt bestehende .btn Klassen) */
.empty .btn,
.empty-state .btn {
    margin-top: 4px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--color-surface-subtle);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge.primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.hidden {
    display: none !important;
}

.nav-item .badge {
    background: #e74c3c;
    color: var(--color-text-white);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
}

/* ============================================
   Stempeln-Seite Redesign (NEU)
   Diese Styles am Ende der ze-styles.css einfügen
   ============================================ */

/* Layout für Stempel-Seite */
.stempel-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: start;
}

.stempel-right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card mit farbigem Header */

/* Stempel-Seite Container */
.stempel-page-container {
    max-width: 900px;
    margin: 0 auto;
}

.stempel-card {
    background: var(--color-card-bg);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.stempel-card-header {
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.stempel-card-header .material-icons {
    font-size: 22px;
}

/* Kalender-Card nimmt mehr Platz ein */
.stempel-card.kalender-card {
    flex: 2;
}

.stempel-card.urlaub-card {
    flex: 1;
}

/* Uhr - Überschreibt alte Styles */
.stempel-card .stempel-uhr {
    font-size: 56px;
    font-weight: 700;
    text-align: center;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
    margin-bottom: 4px;
}

.stempel-card .stempel-datum {
    text-align: center;
    color: var(--color-text-muted, var(--color-text-secondary));
    font-size: 16px;
    margin-bottom: 20px;
}

/* Status Badge (NEU) */
.stempel-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-subtle);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted, var(--color-text-secondary));
    margin: 0 auto 24px;
    width: fit-content;
}

.stempel-card-body {
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    padding: 24px;

}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex-shrink: 0;
}

.status-dot.anwesend {
    background: var(--color-success);
}

.status-dot.pause {
    background: var(--color-warning);
}

.status-dot.abwesend {
    background: var(--color-text-muted);
}

.status-dot.warning {
    background: var(--color-warning);
}

.stempel-status-badge.anwesend {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.stempel-status-badge.pause {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.stempel-status-badge.warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* Stempel-Buttons Row (NEU) */
.stempel-buttons-row {
    display: flex;
    justify-content: center;    
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
}

.stempel-action-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    border-radius: 12px;
    border: 2px solid transparent;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stempel-action-btn .material-icons {
    font-size: 28px;
}

.stempel-action-btn.primary {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

.stempel-action-btn.primary:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(199, 21, 133, 0.3);
}

.stempel-action-btn.secondary {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
}

.stempel-action-btn.secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.stempel-action-btn.secondary:hover:not(:disabled) {
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
}

/* Buchungen Section (NEU) */
.buchungen-section {
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
    margin-top: 8px;
    width: 100%;
    text-align: left;
}

.buchungen-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.buchungen-liste {
    min-height: 40px;
}

.keine-buchungen {
    color: var(--color-text-muted);
    font-size: 14px;
}

.buchungen-liste .buchung-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-surface-subtle);
}

.buchungen-liste .buchung-item:last-child {
    border-bottom: none;
}

.buchung-icon {
    font-size: 18px;
    color: var(--color-primary);
}

.buchungen-liste .buchung-zeit {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    width: auto;
    font-size: 14px;
}

.buchungen-liste .buchung-typ {
    color: var(--color-text-muted, var(--color-text-secondary));
    font-size: 13px;
    background: none;
    padding: 0;
}

/* Kalender Navigation (NEU) */
.kalender-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.kalender-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, var(--color-text-secondary));
    transition: all 0.2s;
}

.kalender-nav-btn:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
}

.kalender-titel {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* Kalender Grid (NEU) */
.kalender-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
}

.kalender-wochentag {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, var(--color-text-secondary));
    padding: 8px 4px;
}

.kalender-wochentag.weekend {
    color: #e57373;
}

.kalender-grid .kalender-tag {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    position: relative;
    transition: all 0.15s;
    padding: 0;
    cursor: default;
}

.kalender-grid .kalender-tag.leer,
.kalender-grid .kalender-tag.andere-monat {
    color: var(--color-border-strong);
}

.kalender-grid .kalender-tag.weekend {
    color: #e57373;
}

.kalender-grid .kalender-tag.vergangen {
    color: var(--color-text-muted);
}

.kalender-grid .kalender-tag.klickbar {
    cursor: pointer;
}

.kalender-grid .kalender-tag.klickbar:hover {
    background: var(--color-surface-subtle);
    transform: scale(1.08);
}

.kalender-grid .kalender-tag.heute {
    background: var(--color-primary);
    color: var(--color-text-white) !important;
    font-weight: 600;
    border: none;
}

.kalender-grid .kalender-tag.heute .tag-nummer {
    color: var(--color-text-white);
}

.kalender-grid .tag-nummer {
    font-weight: 500;
    line-height: 1;
}

.tag-kuerzel {
    font-size: 9px;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1;
}

.kalender-grid .kalender-tag.abwesenheit {
    border: 2px solid;
    cursor: default;
}

.kalender-grid .kalender-tag.abwesenheit.beantragt {
    background: var(--color-card-bg) !important;
    border-style: dashed;
}

/* Urlaubsübersicht (NEU) */
.urlaub-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.urlaub-stat {
    text-align: center;
    padding: 14px 8px;
    border-radius: 10px;
}

.urlaub-stat.anspruch {
    background: var(--color-info-light);
}

.urlaub-stat.anspruch .urlaub-stat-wert,
.urlaub-stat.anspruch .urlaub-stat-label {
    color: #1565c0;
}

.urlaub-stat.genommen {
    background: var(--color-warning-light);
}

.urlaub-stat.genommen .urlaub-stat-wert,
.urlaub-stat.genommen .urlaub-stat-label {
    color: var(--color-warning-dark);
}

.urlaub-stat.beantragt {
    background: var(--color-primary-subtle);
}

.urlaub-stat.beantragt .urlaub-stat-wert,
.urlaub-stat.beantragt .urlaub-stat-label {
    color: #c2185b;
}

.urlaub-stat.verfuegbar {
    background: var(--color-success-light);
}

.urlaub-stat.verfuegbar .urlaub-stat-wert,
.urlaub-stat.verfuegbar .urlaub-stat-label {
    color: var(--color-success);
}

.urlaub-stat.verfuegbar.niedrig {
    background: var(--color-error-light);
}

.urlaub-stat.verfuegbar.niedrig .urlaub-stat-wert,
.urlaub-stat.verfuegbar.niedrig .urlaub-stat-label {
    color: var(--color-error);
}

.urlaub-stat-wert {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.urlaub-stat-label {
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

.urlaub-keine-daten {
    color: var(--color-text-muted);
    text-align: center;
    padding: 20px;
}

/* Responsive für neues Design */
@media (max-width: 900px) {
    .stempel-layout {
        grid-template-columns: 1fr;
    }
    
    .stempel-right-column {
        order: -1;
    }
    
    .urlaub-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .stempel-card .stempel-uhr {
        font-size: 42px;
    }
    
    .stempel-action-btn {
        padding: 16px 12px;
    }
    
    .stempel-action-btn .material-icons {
        font-size: 24px;
    }
    
    .urlaub-stat-wert {
        font-size: 22px;
    }
    
    .urlaub-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rotating {
    animation: rotate 1s linear infinite;
}

/* Schichtplanung Einstellungen */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-full-width {
    grid-column: 1 / -1;
}

.color-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
}

.input-mini {
    width: 50px;
    padding: 4px 8px;
    text-align: center;
}

.input-with-suffix {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-suffix input {
    width: 80px;
}

.row-inactive {
    opacity: 0.5;
}

.schicht-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--color-text-white);
    font-weight: bold;
    font-size: 12px;
    margin-right: 8px;
}

/* Mein Schichtplan - Mitarbeiter-Ansicht */
.schichtplan-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.kw-display {
    font-size: 18px;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
}

.highlight-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--color-text-white);
    margin-bottom: 20px;
}

.highlight-card .card-body {
    padding: 20px;
}

.next-shift-empty {
    text-align: center;
    padding: 20px;
    opacity: 0.9;
}

.next-shift-empty .material-icons {
    font-size: 48px;
    margin-bottom: 8px;
}

.next-shift-today {
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 16px;
}

.next-shift-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 12px;
}

.next-shift-details {
    display: flex;
    align-items: center;
    gap: 16px;
}

.schicht-badge-lg {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--color-text-white);
}

.next-shift-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.next-shift-info strong {
    font-size: 20px;
}

.next-shift-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
}

.next-shift-time .material-icons {
    font-size: 18px;
}

/* Wochenübersicht */
.mein-wochenplan {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wochentag-card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-surface-subtle);
    border-radius: 8px;
    gap: 16px;
}

.wochentag-heute {
    background: var(--color-info-light);
    border: 2px solid #2196F3;
}

.wochentag-vergangen {
    opacity: 0.6;
}

.wochentag-header {
    min-width: 120px;
}

.wochentag-name {
    font-weight: 600;
    display: block;
}

.wochentag-datum {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.wochentag-schicht {
    flex: 1;
}

.meine-schicht {
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.meine-schicht strong {
    margin-right: auto;
}

.schicht-zeit {
    font-size: 14p
}

.schicht-pause {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.keine-schicht {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.keine-schicht .material-icons {
    font-size: 18px;
}

/* Kommende Schichten */
.kommende-schichten-liste {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kommende-woche-header {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.kommende-woche-schichten {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kommende-schicht-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-surface-subtle);
    border-radius: 6px;
}

.schicht-badge-sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text-white);
}

.kommende-datum {
    min-width: 100px;
}

.kommende-zeit {
    color: var(--color-text-secondary);
}

/* Statistik Dashboard */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--color-card-bg);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), #e91e63);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
}

.stat-icon .material-icons {
    font-size: 28px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.stat-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Stunden pro Mitarbeiter */
.stunden-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stunden-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stunden-ma-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ma-name {
    font-weight: 500;
    min-width: 150px;
}

.ma-stunden {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.ma-diff {
    font-size: 12px;
    font-weight: 500;
}

.ma-diff.positive {
    color: var(--color-success);
}

.ma-diff.negative {
    color: #f44336;
}

.stunden-bar-container {
    height: 8px;
    background: var(--color-border-strong);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.stunden-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #e91e63);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.soll-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: var(--color-text-primary);
    transform: translateX(-50%);
}

/* Fairness Tabelle */
.highlight-high {
    background: var(--color-error-light) !important;
    color: var(--color-error-dark);
    font-weight: 600;
}

.highlight-low {
    background: var(--color-success-light) !important;
    color: var(--color-success-dark);
    font-weight: 600;
}

.highlight-high-dot, .highlight-low-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
}

.highlight-high-dot {
    background: var(--color-error-light);
    border: 2px solid var(--color-error);
}

.highlight-low-dot {
    background: #c8e6c9;
    border: 2px solid var(--color-success);
}

/* Schichtverteilung */
.schicht-verteilung-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.verteilung-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.verteilung-label {
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.verteilung-bar-container {
    flex: 1;
    height: 24px;
    background: var(--color-surface-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.verteilung-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.verteilung-wert {
    min-width: 100px;
    text-align: right;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Arbeitsbereiche */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: var(--color-surface-subtle);
    border-radius: 8px;
    margin-bottom: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
}

.checkbox-item:hover {
    background: var(--color-border);
    border-radius: 4px;
}

.modal-lg {
    max-width: 700px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-row .form-group.flex-2 {
    flex: 2;
}

.ma-preview {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-left: 4px;
}

/* Verfügbarkeit Tabs */
.verfuegbarkeit-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.verfuegbarkeit-tabs .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-card-bg);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.verfuegbarkeit-tabs .tab-btn:hover {
    background: var(--color-surface-subtle);
}

.verfuegbarkeit-tabs .tab-btn.active {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

/* Wochen-Grid */
.verfuegbarkeit-wochen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.verfuegbarkeit-tag-card {
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    overflow: hidden;
}

.verfuegbarkeit-tag-card .tag-header {
    background: var(--color-surface-subtle);
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border-strong);
}

.verfuegbarkeit-tag-card .tag-regeln {
    padding: 8px;
    min-height: 60px;
}

.regel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--color-surface-subtle);
    border-radius: 4px;
    margin-bottom: 6px;
}

.regel-item .regel-text {
    flex: 1;
    font-size: 13px;
}

.regel-item .regel-text small {
    color: var(--color-text-secondary);
    display: block;
}

.regel-item .btn-icon-sm {
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
}

.regel-item .btn-icon-sm:hover {
    opacity: 1;
}

.regel-item .btn-icon-sm .material-icons {
    font-size: 16px;
}

.keine-regel {
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 16px;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
}

/* Verfügbarkeit im Grid */
.sp-tag-cell.nicht-verfuegbar {
    background: var(--color-error-light) !important;
}

.sp-tag-cell.bevorzugt {
    background: var(--color-info-light) !important;
}

.sp-tag-cell.konflikt {
    background: var(--color-error-light) !important;
    animation: konflikt-pulse 1s ease-in-out infinite;
}

@keyframes konflikt-pulse {
    0%, 100% { background: var(--color-error-light); }
    50% { background: #ef9a9a; }
}

.sp-tag-cell .verf-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0.7;
}

.sp-tag-cell {
    position: relative;
}

.sp-schicht-badge.konflikt-badge {
    border: 2px solid #f44336 !important;
}

/* Tags Grid */
.tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--color-surface-subtle);
    border-radius: 20px;
    font-size: 13px;
}

.tag-item.inactive {
    opacity: 0.5;
}

.tag-item .tag-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.tag-item .tag-kategorie {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.tag-item .tag-count {
    color: var(--color-text-muted);
    font-size: 11px;
}

.tag-item .tag-actions {
    display: flex;
    gap: 2px;
    margin-left: 4px;
}

.tag-item .btn-icon-sm {
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
}

.tag-item .btn-icon-sm:hover {
    opacity: 1;
}

.tag-item .btn-icon-sm .material-icons {
    font-size: 14px;
}

/* Checkbox Row */
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.checkbox-inline input {
    margin: 0;
}

/* Schicht-Dropdown Tags */
.sp-schicht-dropdown-divider {
    height: 1px;
    background: var(--color-border-strong);
    margin: 8px 0;
}

.sp-schicht-dropdown-section {
    font-size: 11px;
    color: var(--color-text-secondary);
    padding: 4px 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.sp-schicht-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
}

.sp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.sp-tag .material-icons {
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
}

.sp-tag .material-icons:hover {
    opacity: 1;
}

.btn-tag-add {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: 1px dashed var(--color-text-muted);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Aktiver Tab ist pink ausgefuellt -> rotes Badge sieht darauf schlecht aus.
   Auf dem aktiven Tab: weisser Kreis, pinke Zahl. */
.nav-item.active #abwesenheitenBadge,
.nav-item.active #abwesenheitenBadgeVorgesetzter,
.nav-item.active #korrekturenBadge,
.nav-item.active #korrekturenBadgeVorgesetzter {
    background: var(--color-card-bg);
    color: var(--color-primary);
}

.btn-tag-add .material-icons {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.btn-tag-add:hover {
    background: var(--color-surface-subtle);
}

.sp-wunsch-herz {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #e91e63;
    font-size: 14px;
    cursor: pointer;
}

.sp-wunsch-herz::before {
    content: 'Wünscht: ' attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--primary-color, #e91e63);
    color: var(--color-text-white);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    margin-bottom: 6px;
}

.sp-wunsch-herz::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 8px;
    border: 6px solid transparent;
    border-top-color: var(--primary-color, #e91e63);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    margin-bottom: -6px;
}

.sp-wunsch-herz:hover::before,
.sp-wunsch-herz:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ===== HEUTE HERVORHEBEN ===== */
.sp-grid-header-cell.heute {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.sp-grid-header-cell.heute small {
    color: rgba(255,255,255,0.85);
}

.sp-tag-cell.heute {
    background: #fff3ff;
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.sp-heute-badge {
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    opacity: 0.9;
}

/* ===== WOCHENENDE ANDERS ===== */
.sp-grid-header-cell.wochenende {
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
}

.sp-grid-header-cell.wochenende .sp-header-tag {
    color: #888;
}

.sp-tag-cell.wochenende {
    background: repeating-linear-gradient(
        -45deg,
        var(--color-surface-subtle),
        var(--color-surface-subtle) 4px,
        var(--color-surface-subtle) 4px,
        var(--color-surface-subtle) 8px
    );
}

.sp-tag-cell.wochenende:hover {
    background: var(--color-surface-subtle);
}

/* Wochenende + Heute Kombination */
.sp-grid-header-cell.wochenende.heute {
    background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    color: var(--color-text-white);
}

.sp-tag-cell.wochenende.heute {
    background: #e8eaf6;
    box-shadow: inset 0 0 0 2px #3f51b5;
}

/* ===== FEIERTAGE MARKIEREN ===== */
.sp-grid-header-cell.feiertag {
    background: linear-gradient(135deg, var(--color-error) 0%, #b71c1c 100%);
    color: var(--color-text-white);
}

.sp-grid-header-cell.feiertag small {
    color: rgba(255,255,255,0.85);
}

.sp-grid-header-cell.feiertag .sp-header-tag {
    color: var(--color-text-white);
}

.sp-feiertag-badge {
    display: block;
    font-size: 9px;
    font-weight: 500;
    background: rgba(255,255,255,0.2);
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sp-tag-cell.feiertag {
    background: var(--color-error-light);
    position: relative;
}

.sp-tag-cell.feiertag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-error);
}

.sp-tag-cell.feiertag:hover {
    background: var(--color-error-light);
}

/* Feiertag + Heute Kombination */
.sp-grid-header-cell.feiertag.heute {
    background: linear-gradient(135deg, #d32f2f 0%, var(--color-error) 100%);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.3);
}

.sp-tag-cell.feiertag.heute {
    background: var(--color-error-light)    ;
    box-shadow: inset 0 0 0 2px var(--color-error);
}

/* ===== HEADER VERBESSERUNGEN ===== */
.sp-grid-header-cell {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 70px;
    justify-content: center;
    transition: background 0.2s;
}

.sp-header-tag {
    font-size: 14px;
    font-weight: 700;
}

.sp-grid-header-cell small {
    font-size: 12px;
    font-weight: 400;
}

/* ===== BESETZUNGS-FOOTER ANPASSUNGEN ===== */
.sp-besetzung-cell.wochenende {
    background: var(--color-surface-subtle);
}

.sp-besetzung-cell.feiertag {
    background: #fff5f5;
}

.sp-besetzung-cell.heute {
    background: #f0f7ff;
}

/* ===== WARNUNGEN BANNER ===== */
.schichtplanung-warnungen {
    background: linear-gradient(135deg, var(--color-warning-light) 0%, #ffe0b2 100%);
    border-left: 4px solid var(--color-warning);
    padding: 0;
    margin: 0;
}

.warnungen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
}

.warnungen-header .material-icons {
    color: #e65100;
    font-size: 24px;
}

.warnungen-header strong {
    flex: 1;
    color: #e65100;
}

.warnungen-details {
    padding: 0 20px 16px 20px;
    border-top: 1px solid rgba(255, 152, 0, 0.3);
    margin-top: 8px;
    padding-top: 16px;
}

.warnung-tag-gruppe {
    background: var(--color-card-bg);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.warnung-tag-gruppe:last-child {
    margin-bottom: 0;
}

.warnung-tag-header {
    padding: 10px 16px;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.warnung-tag-header strong {
    color: var(--color-text-primary);
}

.feiertag-hint {
    font-size: 12px;
    color: var(--color-error);
    font-weight: 500;
}

.warnung-tag-items {
    padding: 8px 16px;
}

.warnung-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-surface-subtle);
}

.warnung-item:last-child {
    border-bottom: none;
}

.warnung-item .schicht-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.warnung-item .warnung-text {
    flex: 1;
    font-size: 14px;
}

.warnung-item.unterbesetzung .warnung-text {
    color: #d84315;
}

.warnung-item.ueberbesetzung .warnung-text {
    color: var(--color-text-secondary);
}

.warnung-badge {
    background: #ffccbc;
    color: #d84315;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.warnung-badge.info {
    background: var(--color-info-light);
    color: #1565c0;
}

/* ===== BESETZUNGS-FOOTER ERWEITERT ===== */
.sp-besetzung-footer {
    border-top: 2px solid var(--color-border-strong);
    background: var(--color-surface-subtle);
    display: flex;
    flex-direction: column;
}

.sp-besetzung-row {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr);
    border-bottom: 1px solid var(--color-border);
}

.sp-besetzung-row:last-child {
    border-bottom: none;
}

.sp-besetzung-label {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 13px;
    border-right: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.sp-besetzung-label .schicht-name {
    font-weight: 600;
}

.sp-besetzung-label .schicht-zeit {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 400;
    margin-left: auto;
}

.sp-besetzung-cell {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid var(--color-surface-subtle);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.sp-besetzung-cell:last-child {
    border-right: none;
}

.sp-besetzung-cell.neutral {
    color: var(--color-text-muted);
}

.sp-besetzung-cell.ok {
    color: var(--color-success);
    font-weight: 500;
}

.sp-besetzung-cell.unterbesetzt {
    background: var(--color-error-light);
    color: #d32f2f;
    font-weight: 600;
}

.sp-besetzung-cell.unterbesetzt .material-icons {
    font-size: 14px;
}

.sp-besetzung-cell.ueberbesetzt {
    background: var(--color-warning-light);
    color: #f57c00;
    font-weight: 600;
}

.sp-besetzung-cell.heute {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card-bg));
}

.sp-besetzung-cell.unterbesetzt.heute {
    background: linear-gradient(135deg, var(--color-error-light) 50%, color-mix(in srgb, var(--color-primary) 15%, white) 50%);
}

.sp-besetzung-cell.heute {
    background: var(--color-info-light);
}

.sp-besetzung-cell.wochenende {
    background: var(--color-surface-subtle);
}

.sp-besetzung-cell.feiertag {
    background: var(--color-error-light);
}

.sp-besetzung-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.sp-besetzung-item .farbe {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.sp-besetzung-item .material-icons {
    font-size: 14px;
}

.sp-besetzung-item .besetzung-zahlen {
    font-weight: 500;
}

/* Status-Farben */
.sp-besetzung-item.ok {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.sp-besetzung-item.ok .material-icons {
    display: none;
}

.sp-besetzung-item.unterbesetzt {
    background: var(--color-error-light);
    color: var(--color-error-dark);
    font-weight: 600;
}

.sp-besetzung-item.unterbesetzt .material-icons {
    color: var(--color-error);
    animation: pulse-warning 1.5s ease-in-out infinite;
}

.sp-besetzung-item.ueberbesetzt {
    background: var(--color-warning-light);
    color: #e65100;
}

.sp-besetzung-item.ueberbesetzt .material-icons {
    color: #e65100;
}

.sp-besetzung-item.neutral {
    color: var(--color-text-secondary);
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Hover-Effekt auf Footer-Items */
.sp-besetzung-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Setup-Warnungen */
.warnungen-setup {
    background: var(--color-info-light);
    border-left: 4px solid var(--color-info);
    margin-bottom: 1px;
}

.warnungen-header.setup {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.warnungen-header.setup .material-icons {
    color: var(--color-info);
}

.warnungen-header.setup strong {
    color: #1565c0;
    flex: 1;
}

.warnungen-setup-items {
    padding: 0 20px 12px 20px;
}

.warnung-item.setup {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-card-bg);
    border-radius: 6px;
    margin-bottom: 8px;
}

.warnung-item.setup:last-child {
    margin-bottom: 0;
}

.warnung-item.setup .material-icons {
    color: var(--color-info);
    font-size: 20px;
}

.warnung-item.setup .warnung-text {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
}

.warnung-item.setup .btn {
    flex-shrink: 0;
}

/* Besetzungsbedarf Team-Auswahl */
.bedarf-input.has-team-value {
    background: var(--color-info-light);
    border-color: var(--color-info);
}

.bedarf-input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

#bedarf-team-select {
    font-size: 14px;
}

/* ========================================
   Drag & Drop für Schichtplanung
   ======================================== */

/* Schicht wird gezogen */
.sp-schicht-badge.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    cursor: grabbing !important;
}

.sp-schicht-badge[draggable="true"] {
    cursor: grab;
}

.sp-schicht-badge[draggable="true"]:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Drop-Zone Highlighting */
.sp-tag-cell.drop-zone {
    background: rgba(33, 150, 243, 0.05);
}

.sp-tag-cell.drop-hover {
    background: rgba(33, 150, 243, 0.15) !important;
    outline: 2px dashed #2196f3;
    outline-offset: -2px;
}

.sp-tag-cell.drop-hover.drop-replace {
    background: rgba(255, 152, 0, 0.15) !important;
    outline-color: var(--color-warning);
}

.sp-tag-cell.drop-invalid {
    background: rgba(244, 67, 54, 0.1) !important;
    cursor: not-allowed;
}

/* Animation beim Droppen */
@keyframes dropSuccess {
    0% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.sp-schicht-badge.just-dropped {
    animation: dropSuccess 0.3s ease-out;
}

/* ========================================
   Team-Wochenansicht (Papershift-Style)
   ======================================== */

.team-wochen-grid {
    display: flex;
    flex-direction: column;
    min-width: 700px;
}

.wochen-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 2px solid var(--color-border-strong);
}

.wochen-tag-header {
    padding: 12px 8px;
    text-align: center;
    background: var(--color-surface-subtle);
    border-right: 1px solid var(--color-border-strong);
}

.wochen-tag-header:last-child {
    border-right: none;
}

.wochen-tag-header.heute {
    background: var(--color-info-light);
}

.wochen-tag-header .tag-kuerzel {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.wochen-tag-header .tag-datum {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.wochen-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.wochen-tag-spalte {
    padding: 8px;
    border-right: 1px solid var(--color-border-strong);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wochen-tag-spalte:last-child {
    border-right: none;
}

.wochen-tag-spalte.heute {
    background: rgba(33, 150, 243, 0.05);
}

.keine-schichten {
    color: var(--color-border-strong);
    text-align: center;
    padding: 20px;
    font-size: 18px;
}

/* Schicht-Karten */
.schicht-karte {
    border-radius: 8px;
    padding: 10px;
    color: var(--color-text-white);
    text-align: center;
    border-left: 4px solid;
    position: relative;
    transition: transform 0.1s, box-shadow 0.1s;
}

.schicht-karte:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.schicht-karte .schicht-zeit {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.schicht-karte .schicht-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.schicht-karte .schicht-besetzung {
    font-size: 12px;
    opacity: 0.9;
}

.schicht-karte .schicht-mitarbeiter {
    font-size: 11px;
    margin-top: 6px;
    opacity: 0.85;
    max-height: 40px;
    overflow: hidden;
}

/* Status-Farben (werden mit inline-style überschrieben) */
.schicht-karte.leer {
    background: var(--color-text-muted) !important;
}

.schicht-karte.unterbesetzt {
    /* Farbe kommt von inline-style, aber etwas transparenter */
}

.schicht-karte.besetzt {
    /* Volle Farbe */
}

/* Meine Schicht hervorheben */
.schicht-karte.meine-schicht {
    box-shadow: 0 0 0 3px var(--color-card-bg), 0 0 0 5px #2196f3;
}

.meine-marker {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 14px;
    color: #ffeb3b;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .team-wochen-grid {
        min-width: 100%;
    }
    
    .wochen-header,
    .wochen-body {
        grid-template-columns: repeat(7, minmax(80px, 1fr));
    }
    
    .schicht-karte {
        padding: 6px;
    }
    
    .schicht-karte .schicht-zeit {
        font-size: 10px;
    }
    
    .schicht-karte .schicht-name {
        font-size: 11px;
    }
    
    .schicht-karte .schicht-mitarbeiter {
        display: none;
    }
}

/* Tag-Auswahl Popup */
.tag-auswahl-popup {
    background: var(--color-card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 180px;
    max-height: 250px;
    overflow-y: auto;
    padding: 6px 0;
}

.tag-auswahl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}

.tag-auswahl-item:hover {
    background: var(--color-surface-subtle);
}

.tag-auswahl-item .tag-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.tag-auswahl-item small {
    color: #888;
    margin-left: auto;
}

/* Tag-Auswahl Inline */
.tag-auswahl-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border-strong);
    width: 100%;
}

.tag-auswahl-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.1s;
}

.tag-auswahl-chip:hover {
    transform: scale(1.05);
}

/* ============================================
   BukiPi ZE - Custom Confirm Dialog
   Baut auf bestehenden .modal Klassen auf
   ============================================ */

/* Confirm-spezifische Modal-Breite */
.modal-content.modal-confirm {
    max-width: 400px;
}

/* Icon im Header */
.modal-confirm .confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.modal-confirm .confirm-icon .material-icons {
    font-size: 32px;
}

/* Danger Variante (Löschen etc.) */
.modal-confirm.confirm-danger .confirm-icon {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

/* Warning Variante */
.modal-confirm.confirm-warning .confirm-icon {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* Info Variante */
.modal-confirm.confirm-info .confirm-icon {
    background: var(--color-info-light);
    color: #1565c0;
}

/* Success Variante */
.modal-confirm.confirm-success .confirm-icon {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

/* Body zentriert */
.modal-confirm .modal-body {
    text-align: center;
    padding: 24px 24px 16px;
}

/* Titel */
.modal-confirm .confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

/* Beschreibung */
.modal-confirm .confirm-message {
    font-size: 14px;
    color: var(--color-text-muted, var(--color-text-secondary));
    margin: 0;
    line-height: 1.5;
}

/* Footer Buttons */
.modal-confirm .modal-footer {
    justify-content: center;
    gap: 12px;
    padding: 16px 24px 24px;
    border-top: none;
}

.modal-confirm .modal-footer .btn {
    min-width: 100px;
}

/* Danger Button */
.btn-danger {
    background: var(--color-error);
    color: var(--color-text-white);
}

.btn-danger:hover {
    background: #b71c1c;
}

/* ============================================
   Wochen-Timeline Komponente
   3 Kalenderwochen mit Zeitbalken
   ============================================ */

/* Container */
.wochen-timeline {
    background: var(--color-card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
}

/* Header mit Navigation */
.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: var(--color-text-white);
}

.timeline-nav {
    display: flex;
    width:100%;
    align-items: space-between;
    gap: 8px;
}

.timeline-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: black;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.timeline-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.timeline-heute-btn {
    padding: 6px 12px;
    border-radius: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: black;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.timeline-heute-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Wochen-Container */
.timeline-wochen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-border-strong);
}

/* Einzelne Woche */
.timeline-woche {
    background: var(--color-card-bg);
    padding: 12px;
}

.woche-header {
    text-align: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.woche-kw {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.woche-zeitraum {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Tage-Grid innerhalb einer Woche */
.woche-tage {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Einzelner Tag */
.timeline-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 70px;
}

.timeline-tag:hover {
    background: var(--color-surface-subtle);
    transform: translateY(-2px);
}

.timeline-tag.ist-heute {
    background: var(--color-primary-light, var(--color-primary-subtle));
    box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline-tag.ist-heute:hover {
    background: var(--color-primary-light, var(--color-primary-subtle));
}

/* Wochentag Label */
.tag-wochentag {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.timeline-tag.ist-wochenende .tag-wochentag,
.timeline-tag.ist-feiertag .tag-wochentag {
    color: #e57373;
}

/* Datum */
.tag-datum {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.timeline-tag.ist-heute .tag-datum,
.timeline-tag.ist-heute .tag-wochentag  {
    color: var(--color-text-white);
    font-weight: 700;
}

/* Zeit-Balken */
.tag-balken {
    width: 100%;
    height: 30px;
    width:30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-white);
    position: relative;
}

/* Balken-Farben nach Status */
.tag-balken.status-erfuellt {
    background: linear-gradient(135deg, var(--color-success), #66bb6a);
}

.tag-balken.status-minusstunden {
    background: linear-gradient(135deg, var(--color-neutral), var(--color-text-secondary));
}

.tag-balken.status-urlaub {
    background: linear-gradient(135deg, #ffc107, #ffca28);
    color: var(--color-text-primary);
}

.tag-balken.status-krank {
    background: linear-gradient(135deg, #ff7043, #ff8a65);
}

.tag-balken.status-abwesend {
    background: linear-gradient(135deg, #7986cb, #9fa8da);
}

.tag-balken.status-wochenende,
.tag-balken.status-feiertag {
    background: transparent;
    border: 2px dashed var(--color-border-strong);
    color: var(--color-text-muted);
}

.tag-balken.status-leer {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border-strong);
    color: var(--color-border-strong);
}

/* Zukunft: leicht transparent */
.timeline-tag.ist-zukunft .tag-balken.status-leer {
    background: repeating-linear-gradient(
        45deg,
        var(--color-surface-subtle),
        var(--color-surface-subtle) 4px,
        var(--color-surface-subtle) 4px,
        var(--color-surface-subtle) 8px
    );
}

/* Stunden-Anzeige unter dem Balken */
.tag-stunden {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.tag-stunden.positiv {
    color: var(--color-success, var(--color-success));
}

.tag-stunden.negativ {
    color: var(--color-text-muted);
}

/* Tooltip */
.timeline-tag[data-tooltip] {
    position: relative;
}

.timeline-tag[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary);
    color: var(--color-text-white);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
    margin-bottom: 4px;
}

.timeline-tag[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Legende */
.timeline-legende {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 12px;
    background: var(--color-surface-subtle);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.legende-farbe {
    width: 16px;
    height: 10px;
    border-radius: 2px;
}

.legende-farbe.erfuellt {
    background: var(--color-success);
}

.legende-farbe.minusstunden {
    background: var(--color-text-muted);
}

.legende-farbe.urlaub {
    background: #ffc107;
}

.legende-farbe.krank {
    background: #ff7043;
}

.legende-farbe.frei {
    border: 2px dashed var(--color-border-strong);
    background: transparent;
}

/* ============================================
   Modal für Tag-Details
   ============================================ */
.tag-detail-modal .modal-content {
    max-width: 400px;
}

.tag-detail-header {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 16px;
}

.tag-detail-datum {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.tag-detail-wochentag {
    font-size: 14px;
    color: var(--color-text-muted)
}

.tag-detail-zeiten {
    background: var(--color-surface-subtle);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.tag-detail-zeiten h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.zeit-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.zeit-row:last-child {
    border-bottom: none;
}

.zeit-label {
    color: var(--color-text-secondary)
}

.zeit-wert {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.zeit-wert.positiv {
    color: var(--color-success, var(--color-success));
}

.zeit-wert.negativ {
    color: var(--color-error, var(--color-error));
}

/* Aktions-Buttons im Modal */
.tag-detail-aktionen {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tag-detail-aktionen .btn {
    justify-content: flex-start;
    gap: 10px;
}

.tag-detail-aktionen .btn .material-icons {
    font-size: 20px;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 900px) {
    .timeline-wochen {
        grid-template-columns: 1fr;
    }
    
    .timeline-woche {
        border-bottom: 1px solid var(--color-border);
    }
    
    .timeline-woche:last-child {
        border-bottom: none;
    }
}

@media (max-width: 500px) {
    .timeline-tag {
        padding: 4px 1px;
        min-height: 60px;
    }
    
    .tag-wochentag {
        font-size: 9px;
    }
    
    .tag-datum {
        font-size: 12px;
    }
    
    .tag-balken {
        height: 16px;
        font-size: 9px;
    }
    
    .tag-stunden {
        font-size: 9px;
    }
    
    .timeline-legende {
        gap: 10px;
    }
    
    .legende-item {
        font-size: 10px;
    }
}

/* Touch-Support für Mobile */
@media (hover: none) {
    .timeline-tag:hover {
        transform: none;
        background: transparent;
    }
    
    .timeline-tag.ist-heute:hover {
        background: var(--color-primary-light, var(--color-primary-subtle));
    }
    
    .timeline-tag:active {
        transform: scale(0.95);
        background: var(--color-surface-subtle);
    }
}

/**
 * ZE Ruhezeit - Verstöße & Benachrichtigungen
 * Styles für den Benachrichtigungen-Tab
 */

/* ============================================
   Verstöße Header
   ============================================ */
.verstoesse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.verstoesse-stats {
    display: flex;
    gap: 20px;
}

.verstoesse-stats .stat {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.verstoesse-stats .stat strong {
    font-size: 18px;
    color: var(--color-text-primary);
    margin-right: 4px;
}

.verstoesse-stats .stat.ungelesen strong {
    color: var(--color-warning, var(--color-warning));
}

/* ============================================
   Verstöße Liste
   ============================================ */
.verstoesse-liste {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.verstoesse-datum-gruppe {
    margin-bottom: 8px;
}

.datum-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-surface-subtle);
}

/* ============================================
   Einzelner Verstoß
   ============================================ */
.verstoss-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--color-card-bg);
    border-radius: 10px;
    border: 1px solid var(--color-border-strong);
    transition: all 0.15s;
}

.verstoss-item.ungelesen {
    background: #fffbf0;
    border-color: #ffe0b2;
}

.verstoss-item.gelesen {
    opacity: 0.7;
}

.verstoss-item.gelesen:hover {
    opacity: 1;
}

.verstoss-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Verstoß Icon
   ============================================ */
.verstoss-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.verstoss-icon .material-icons {
    font-size: 24px;
    color: var(--color-text-white);
}

.verstoss-icon.typ-ruhezeit {
    background: linear-gradient(135deg, #5c6bc0, #7986cb);
}

.verstoss-icon.typ-arbeitszeit {
    background: linear-gradient(135deg, #ef5350, #e57373);
}

.verstoss-icon.typ-pause {
    background: linear-gradient(135deg, var(--color-warning), #ffb74d);
}

/* ============================================
   Verstoß Content
   ============================================ */
.verstoss-content {
    flex: 1;
    min-width: 0;
}

.verstoss-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.verstoss-mitarbeiter {
    font-weight: 600;
    color: var(--color-text-primary);
}

.verstoss-zeit {
    font-size: 12px;
    color: var(--color-text-muted);
}

.verstoss-typ {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.verstoss-beschreibung {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.verstoss-kommentar {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--color-surface-subtle);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.verstoss-kommentar .material-icons {
    font-size: 16px;
    color: var(--color-text-muted);
}

/* ============================================
   Verstoß Actions
   ============================================ */
.verstoss-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================
   Badge für Navigation
   ============================================ */
.nav-badge {
    background: #e74c3c;
    color: var(--color-text-white);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

.nav-badge.hidden {
    display: none;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 600px) {
    .verstoesse-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .verstoss-item {
        flex-direction: column;
        gap: 12px;
    }
    
    .verstoss-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Team Tabs */
.team-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.team-tabs .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.team-tabs .tab-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-subtle);
}

.team-tabs .tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.team-tabs .tab-btn .material-icons {
    font-size: 20px;
}

/* Tab Badge */
.tab-badge {
    background: #e74c3c;
    color: var(--color-text-white);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

.tab-badge.hidden {
    display: none;
}

/* Übersicht Header im Tab */
.team-uebersicht-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.team-uebersicht-header .header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================================
   TOP NAVIGATION ICONS
   ============================================ */

.top-nav-icons {
    position: absolute;
    top: 16px;
    right: 24px;
    display: flex;
    gap: 16px;
    z-index: 100;
}

.top-nav-btn {
    position: relative;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-nav-btn:hover {
    transform: translateY(-2px);
}

.top-nav-btn .material-icons {
    font-size: 22px;
    color: #555;
}

.top-nav-btn:hover .material-icons {
    color: var(--color-primary);
}

/* Badge */
.top-nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e74c3c;
    color: var(--color-text-white);
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ============================================
   TOP NAVIGATION MODALS
   ============================================ */

.top-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 199;
}

.top-nav-modal {
    position: fixed;
    top: 70px;
    right: 24px;
    width: 380px;
    max-height: calc(100vh - 100px);
    background: var(--color-card-bg);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-nav-modal-large {
    width: 480px;
}

.top-nav-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.top-nav-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-nav-modal-header h3 .material-icons {
    font-size: 20px;
    color: var(--color-primary);
}

.top-nav-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.top-nav-modal-close:hover {
    background: var(--color-border);
}

.top-nav-modal-close .material-icons {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.top-nav-modal-actions {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

.top-nav-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.top-nav-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Benachrichtigungs-Items */
.top-nav-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-surface-subtle);
    cursor: pointer;
    transition: background 0.2s;
}

.top-nav-item:hover {
    background: var(--color-surface-subtle);
}

.top-nav-item:last-child {
    border-bottom: none;
}

.top-nav-item.ungelesen {
    background: #fff8f0;
    border-left: 3px solid var(--color-primary);
}

.top-nav-item.ungelesen:hover {
    background: #fff0e0;
}

.top-nav-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.top-nav-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.top-nav-item-time {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.top-nav-item-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.top-nav-item-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 8px;
}

.top-nav-item-type.typ-neu {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.top-nav-item-type.typ-geaendert {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.top-nav-item-type.typ-geloescht {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.top-nav-item-type.typ-veroeffentlicht {
    background: var(--color-info-light);
    color: #1565c0;
}

.top-nav-item-type.typ-ruhezeit {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.top-nav-item-type.typ-arbeitszeit {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* Profil Modal */
.profil-form {
    padding: 20px;
}

.profil-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.profil-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 12px;
    overflow: hidden;
}

.profil-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profil-avatar-actions {
    display: flex;
    gap: 8px;
}

.profil-section {
    margin-bottom: 24px;
}

.profil-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profil-section-title .material-icons {
    font-size: 18px;
    color: var(--color-primary);
}

.profil-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.profil-row.single {
    grid-template-columns: 1fr;
}

.profil-field label {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.profil-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.profil-field input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.profil-field input:disabled {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.profil-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .top-nav-icons {
        top: 12px;
        right: 12px;
        gap: 6px;
    }
    
    .top-nav-btn {
        width: 36px;
        height: 36px;
    }
    
    .top-nav-btn .material-icons {
        font-size: 20px;
    }
    
    .top-nav-modal {
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 80px);
    }
    
    .top-nav-modal-large {
        width: auto;
    }
}

/* ============================================
   QUALIFIKATIONEN
   ============================================ */

/* Qualifikationen-Liste */
.qualifikationen-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qualifikation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px 20px;
    transition: all 0.2s ease;
}

.qualifikation-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.qualifikation-card.inaktiv {
    opacity: 0.6;
    background: var(--color-surface-subtle);
}

.qualifikation-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.qualifikation-farbe {
    width: 12px;
    height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
}

.qualifikation-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qualifikation-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-heading);
}

.qualifikation-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.qualifikation-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.qualifikation-meta .material-icons {
    font-size: 16px;
}

.qualifikation-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qualifikation-actions .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.qualifikation-actions .btn-icon:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text-heading);
}

.qualifikation-actions .btn-icon.btn-danger:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Qualifikation Badge (kleine Tags) */
.quali-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-white);
    white-space: nowrap;
}

.quali-badge.quali-badge-sm {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 10px;
}

.quali-badge .material-icons {
    font-size: 14px;
}

/* Qualifikationen im Schichtplan */
.schicht-qualifikationen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.schicht-quali-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Qualifikationen-Auswahl (Multi-Select) */
.quali-select-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quali-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quali-select-item:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-subtle);
}

.quali-select-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.quali-select-item .quali-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quali-select-item .quali-color {
    width: 8px;
    height: 24px;
    border-radius: 3px;
}

.quali-select-item .quali-name {
    font-weight: 500;
    font-size: 14px;
}

.quali-select-item .quali-pflicht-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Mitarbeiter Qualifikationen Liste */
.ma-quali-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ma-quali-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-white);
}

.ma-quali-tag .ablauf-info {
    font-size: 11px;
    opacity: 0.9;
    margin-left: 4px;
}

.ma-quali-tag.abgelaufen {
    opacity: 0.7;
    text-decoration: line-through;
}

.ma-quali-tag.bald-abgelaufen {
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.ma-quali-tag .remove-quali {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 4px;
    padding: 0;
}

.ma-quali-tag .remove-quali:hover {
    background: rgba(255, 255, 255, 0.5);
}

.ma-quali-tag .remove-quali .material-icons {
    font-size: 14px;
}

/* Qualifikation hinzufügen Dropdown */
.quali-add-dropdown {
    position: relative;
    display: inline-block;
}

.quali-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--color-border-strong);
    border-radius: 16px;
    background: var(--color-card-bg);
    color: var(--color-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quali-add-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.quali-add-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 250px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
}

.quali-add-menu.show {
    display: block;
}

.quali-add-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.quali-add-menu-item:hover {
    background: var(--color-surface-subtle);
}

.quali-add-menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.quali-add-menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.quali-add-menu-item .quali-color {
    width: 8px;
    height: 20px;
    border-radius: 3px;
}

/* Warnung bei fehlender Qualifikation */
.quali-warnung {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    color: #92400e;
    font-size: 13px;
    margin-top: 8px;
}

.quali-warnung .material-icons {
    font-size: 18px;
    color: #f59e0b;
}

.quali-fehlt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #991b1b;
    font-size: 13px;
    margin-top: 8px;
}

.quali-fehlt .material-icons {
    font-size: 18px;
    color: #dc2626;
}

/* Leere Liste */
.qualifikationen-leer {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.qualifikationen-leer .material-icons {
    font-size: 64px;
    color: var(--color-border-strong);
    margin-bottom: 16px;
}

.qualifikationen-leer h3 {
    font-size: 18px;
    color: #374151;
    margin-bottom: 8px;
}

.qualifikationen-leer p {
    font-size: 14px;
    margin-bottom: 20px;
}

/* Info-Box */
.info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    font-size: 14px;
}

.info-box .material-icons {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Bereich Header */
.bereich-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.bereich-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-heading);
    margin: 0;
}

/* Schichtwünsche - füge das zu deiner ze-styles.css hinzu */

/* Klickbare Schicht-Karten */
.schicht-karte.klickbar {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.schicht-karte.klickbar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.schicht-karte.klickbar:active {
    transform: translateY(0);
}

/* Wunsch-Marker (Herz) */
.schicht-karte.mein-wunsch {
    position: relative;
}

.wunsch-marker {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 16px;
    color: var(--color-text-white);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Meine Schicht Marker (Stern) */
.meine-marker {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 14px;
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Schicht-Karte braucht position relative für die Marker */
.schicht-karte {
    position: relative;
}

/* ============================================
   STEMPELN-HERO (Redesign 2026) — auf Keybuki-Tokens
   Additiver Block. Klassen-Praefix .ze-hero-* / .ze-stats / .ze-tl
   Ersetzt schrittweise den alten ".stempel-card"-Look.
   ============================================ */

.ze-hero-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

/* ---- Begruessung ---- */
.ze-hero-greeting {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ze-hero-greeting h1 {
    margin: 0 0 4px;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
}
.ze-hero-greeting .ze-hero-sub {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-muted);
}
.ze-hero-datebadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border, var(--color-border-warm));
    border-radius: var(--radius-lg);
    padding: 9px 15px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--color-text-secondary);
}
.ze-hero-datebadge .material-icons { font-size: 18px; color: var(--color-primary); }

/* ---- Top-Grid: Hero-Card + rechte Spalte ---- */
.ze-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

/* ---- Hero-Card (Uhr/Ring) ---- */
.ze-hero-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border, var(--color-border-warm));
    border-radius: var(--radius-xl);
    padding: 30px 30px 26px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- Status-Pille ---- */
.ze-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 13.5px;
    background: var(--color-surface-warm);
    color: var(--color-text-muted);
}
.ze-hero-status .ze-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: ze-pulse 1.6s ease-in-out infinite;
}
/* Flaeche 9% / Rahmen 30% wie bei den Kacheln - wirkt in beiden Themen.
   Vorher feste Hexwerte, im Dunkelmodus helle Inseln. */
.ze-hero-status.is-anwesend { background: color-mix(in srgb, var(--color-success) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); color: var(--color-success); }
.ze-hero-status.is-pause    { background: color-mix(in srgb, var(--color-warning) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); color: var(--color-warning); }
.ze-hero-status.is-gegangen { background: color-mix(in srgb, var(--color-success) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); color: var(--color-success); }
.ze-hero-status.is-warning  { background: color-mix(in srgb, var(--color-warning) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); color: var(--color-warning); }
@keyframes ze-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Ring ---- */
.ze-hero-ring {
    position: relative;
    width: 248px; height: 248px;
    margin: 22px 0 6px;
}
.ze-hero-ring svg { width: 248px; height: 248px; transform: rotate(-90deg); }
.ze-hero-ring .ze-ring-bg   { fill: none; stroke: var(--color-border-warm); stroke-width: 16; }
.ze-hero-ring .ze-ring-fg   { fill: none; stroke: var(--color-primary); stroke-width: 16; stroke-linecap: round; transition: stroke-dashoffset .6s ease, stroke .3s ease; }
.ze-hero-ring.is-pause    .ze-ring-fg { stroke: var(--color-warning); }
.ze-hero-ring.is-gegangen .ze-ring-fg { stroke: var(--color-success); }
.ze-hero-ring .ze-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.ze-hero-time {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -1.5px;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.ze-hero-target {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 3px;
}

/* ---- Taetigkeits-Tabs (datengetrieben; leer = nicht gerendert) ---- */
.ze-hero-tasks {
    width: 100%;
    margin: 16px 0 4px;
}
.ze-hero-tasks-label {
    font-size: 12.5px;
    color: var(--color-text-muted);
    font-weight: 600;
    text-align: center;
    margin-bottom: 9px;
}
.ze-hero-tasks-row {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.ze-task-chip {
    border: 1px solid transparent;
    background: var(--color-surface-warm);
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all .15s ease;
}
.ze-task-chip:hover { background: var(--color-border-subtle); }
.ze-task-chip.is-active {
    border-color: #f3cfe0;
    background: #fcebf3;
    color: var(--color-primary);
}

/* ---- Action-Buttons ---- */
.ze-hero-actions {
    width: 100%;
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.ze-act-btn {
    flex: 1;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 15.5px;
    padding: 12.75px 15px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background .15s ease;
}
.ze-act-btn .material-icons { font-size: 20px; }
.ze-act-primary {
    color: var(--color-text-white);
    background: var(--color-primary);
}
.ze-act-primary:hover { background: var(--color-primary-dark); }
.ze-act-secondary {
    color: var(--color-primary);
    background: var(--color-card-bg);
    border: 1.5px solid #f0bbd6;
}
.ze-act-secondary:hover { background: #fdeff6; }
.ze-act-warning {
    color: var(--color-text-white);
    background: var(--color-warning);
}
.ze-act-warning:hover { background: #e08c0a; }
.ze-act-neutral {
    color: var(--color-text-secondary);
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border, var(--color-surface-warm));
}
.ze-act-neutral:hover { background: var(--color-surface-warm); }
.ze-act-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Rechte Spalte ---- */
.ze-hero-right {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ---- Stat-Kacheln (Ist/Soll/Pause/Saldo) ---- */
.ze-stats-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border, var(--color-border-warm));
    border-radius: var(--radius-xl);
    padding: 24px 26px;
    box-shadow: var(--shadow-md);
}
.ze-stats-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}
.ze-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ze-stat {
    border-radius: var(--radius-lg);
    padding: 14px 15px;
}
.ze-stat-label { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.ze-stat-value {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 23px;
    font-variant-numeric: tabular-nums;
}
/* Kachel-Farbschema "Heute im Ueberblick".
   Vormals zwoelf feste Hex-Werte - reine Hellmodus-Toene, im
   Dunkelmodus falsch. Jetzt dasselbe Rezept wie .kb-stat in
   keybuki-ui.css: Flaeche 9 %, Rahmen 30 %, Wert gegen die Textfarbe
   verschoben. Ist/Soll/Saldo tragen damit dieselben Farben wie in
   Meine Zeiten und der Mitarbeiter-Detailseite.
   Soll war Indigo (#6b5cf6) - dafuer gibt es keinen Token und in den
   anderen Ansichten ist Soll die ruhige Kachel. */
.ze-stat {
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
}
.ze-stat-label { color: var(--color-text-muted); }
.ze-stat-value { color: var(--color-text-heading); }

.ze-stat.is-ist   { background: color-mix(in srgb, var(--color-info) 9%, transparent);    border-color: color-mix(in srgb, var(--color-info) 30%, transparent); }
.ze-stat.is-ist   .ze-stat-label { color: var(--color-info); }
.ze-stat.is-ist   .ze-stat-value { color: color-mix(in srgb, var(--color-info) 55%, var(--color-text-heading)); }

.ze-stat.is-pause { background: color-mix(in srgb, var(--color-warning) 9%, transparent); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.ze-stat.is-pause .ze-stat-label { color: var(--color-warning); }
.ze-stat.is-pause .ze-stat-value { color: color-mix(in srgb, var(--color-warning) 55%, var(--color-text-heading)); }

.ze-stat.is-saldo { background: color-mix(in srgb, var(--color-success) 9%, transparent); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.ze-stat.is-saldo .ze-stat-label { color: var(--color-success); }
.ze-stat.is-saldo .ze-stat-value { color: color-mix(in srgb, var(--color-success) 55%, var(--color-text-heading)); }

/* Negativer Wochensaldo: Klasse wird in ze-app.js gesetzt. */
.ze-stat.is-saldo.is-negativ { background: color-mix(in srgb, var(--color-error) 9%, transparent); border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
.ze-stat.is-saldo.is-negativ .ze-stat-label { color: var(--color-error); }
.ze-stat.is-saldo.is-negativ .ze-stat-value { color: color-mix(in srgb, var(--color-error) 55%, var(--color-text-heading)); }

/* ---- Heutiger Verlauf (Timeline) ---- */
.ze-tl-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border, var(--color-border-warm));
    border-radius: var(--radius-xl);
    padding: 24px 26px;
    box-shadow: var(--shadow-md);
    flex: 1;
}
.ze-tl-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.ze-tl-head .ze-stats-title { margin-bottom: 0; }
.ze-tl-count { font-size: 12.5px; color: var(--color-text-muted); }
.ze-tl-list { display: flex; flex-direction: column; }
.ze-tl-item { display: flex; gap: 13px; align-items: flex-start; }
.ze-tl-rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.ze-tl-dot {
    width: 12px; height: 12px; border-radius: 50%;
    flex-shrink: 0; margin-top: 3px;
    border: 3px solid;
}
.ze-tl-line { width: 2px; flex: 1; min-height: 12px; background: var(--color-border-warm); }
.ze-tl-item:last-child .ze-tl-line { background: transparent; }
.ze-tl-body { padding-bottom: 15px; }
.ze-tl-title { font-weight: 600; font-size: 14px; color: var(--color-text-primary); }
.ze-tl-sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 1px; }
.ze-tl-time {
    margin-left: auto;
    font-family: var(--font-family);
    font-weight: 600; font-size: 13.5px;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.ze-tl-dot.is-kommen     { background: var(--color-success); border-color: #d7f1df; }
.ze-tl-dot.is-pause      { background: var(--color-warning); border-color: #fbeccb; }
.ze-tl-dot.is-pauseende  { background: #7b6cf6;             border-color: #e3defb; }
.ze-tl-dot.is-gehen      { background: var(--color-primary); border-color: #fad4e6; }
.ze-tl-dot.is-empty      { background: var(--color-border-strong);             border-color: var(--color-surface-warm); }

/* ---- Diese Woche (bestehende WochenTimeline restyled) ---- */
.ze-week-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border, var(--color-border-warm));
    border-radius: var(--radius-xl);
    padding: 26px 30px 22px;
    box-shadow: var(--shadow-md);
    margin-top: 22px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .ze-hero-grid { grid-template-columns: 1fr; }
    .ze-hero-greeting h1 { font-size: 25px; }
}

/* ============================================
   WOCHENBALKEN (Diese Woche) — Mockup-Stil
   ============================================ */

.ze-week-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 10px;
}
.ze-week-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}
.ze-week-legend .ze-wl-item { display: flex; align-items: center; gap: 7px; }
.ze-week-legend .ze-wl-swatch { width: 11px; height: 11px; border-radius: 4px; background: var(--color-primary); }
.ze-week-legend .ze-wl-line { width: 14px; height: 2px; border-radius: 2px; background: var(--color-border-strong); display: inline-block; }
.ze-week-sum {
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
}

.ze-week-chart {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    height: 172px;
    padding-top: 18px;
    position: relative;
}
.ze-week-target {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 2px dashed #e7dad0;
    pointer-events: none;
}
.ze-week-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.ze-week-hours {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
.ze-week-bar {
    width: 100%;
    max-width: 46px;
    border-radius: 11px 11px 6px 6px;
    transition: height .4s ease;
    background: #f3b6d2;
}
.ze-week-bar.is-today  { background: var(--color-primary); }
.ze-week-bar.is-future { background: var(--color-surface-warm); }
.ze-week-bar.is-urlaub { background: #d7f1df; }
.ze-week-bar.is-krank  { background: #fbeccb; }
.ze-week-bar.is-feier  { background: #e3defb; }
.ze-week-day {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 11px;
}
.ze-week-col.is-today .ze-week-day,
.ze-week-col.is-today .ze-week-hours { color: var(--color-primary); }

/* ============================================
   ABWESENHEITEN-VIEW (Mockup-Layout, Keybuki-Tokens)
   ============================================ */

.abw-wrap { max-width: 1180px; margin: 0 auto; }
.abw-header { margin-bottom: 30px; }
.abw-header h1 {
    margin: 0 0 6px;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 34px;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
}
.abw-header p { margin: 0; font-size: 16px; color: var(--color-text-muted); }

.abw-grid {
    display: grid;
    grid-template-columns: 1.42fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ---- Form-Karte ---- */
.abw-form-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-surface-warm);
    border-radius: 26px;
    box-shadow: 0 24px 48px -34px rgba(173,120,150,.45);
    overflow: hidden;
}
.abw-form-inner { padding: 30px 32px 32px; }

.abw-step {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary);
    margin-bottom: 13px;
}
.abw-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.abw-opt { font-weight: 400; color: var(--color-text-muted); }

/* ---- Art-Chips ---- */
.abw-chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.abw-chip {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--color-border-warm);
    background: var(--color-card-bg);
    color: var(--color-text-primary);
    font-family: var(--font-family); font-weight: 600; font-size: 14px;
    padding: 9px 15px; border-radius: 9999px; cursor: pointer;
    transition: all .15s ease;
}
.abw-chip:hover { background: var(--color-surface-warm); }
.abw-chip-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* ---- Kalender ---- */
.abw-cal {
    border: 1px solid var(--color-surface-warm);
    border-radius: 20px;
    padding: 18px 20px 20px;
    background: var(--color-background);
}
.abw-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.abw-cal-month {
    font-family: var(--font-family); font-weight: 600; font-size: 16px;
    color: var(--color-text-primary);
}
.abw-cal-nav {
    width: 34px; height: 34px; border-radius: 11px;
    border: 1px solid var(--color-surface-warm); background: var(--color-card-bg); color: #6b6470;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.abw-cal-nav:hover { background: var(--color-surface-warm); }
.abw-cal-nav .material-icons { font-size: 19px; }

.abw-cal-dow {
    display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 6px;
}
.abw-cal-dow > div {
    text-align: center; font-size: 11.5px; font-weight: 700;
    color: var(--color-text-muted); padding: 4px 0;
}
.abw-cal-dow > div.is-we { color: #d9b9c9; }

.abw-cal-grid { display: flex; flex-direction: column; gap: 6px; }
.abw-cal-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }

.abw-cal-day {
    aspect-ratio: 1 / 1;
    border: none; background: transparent;
    border-radius: 11px;
    font-family: var(--font-family); font-weight: 600; font-size: 14px;
    color: var(--color-text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s ease;
}
.abw-cal-day:hover { background: var(--color-primary-subtle); }
.abw-cal-day.is-out { color: var(--color-border-strong); }
.abw-cal-day.is-we { color: #b9a6b0; }

/* Feiertage: eigener Punkt statt Ausgrauung. Sie sind keine leeren Tage,
   sondern haben einen Grund - der Titel am Button nennt ihn. */
.abw-cal-day.is-feiertag {
    color: var(--color-primary);
    font-weight: 600;
    position: relative;
}
.abw-cal-day.is-feiertag::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}
/* Feiertag am Wochenende: das Wochenende gewinnt optisch, der Punkt bleibt. */
.abw-cal-day.is-we.is-feiertag { color: #b9a6b0; font-weight: 400; }
.abw-cal-day.is-we.is-feiertag::after { background: #d9c4cf; }
.abw-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.abw-cal-day.is-mid { background: var(--color-primary-subtle); color: var(--color-primary); border-radius: 0; }
.abw-cal-day.is-start { background: var(--color-primary); color: var(--color-text-white); border-radius: 11px 0 0 11px; }
.abw-cal-day.is-end { background: var(--color-primary); color: var(--color-text-white); border-radius: 0 11px 11px 0; }
.abw-cal-day.is-start.is-single { border-radius: 11px; }

/* Eigene Abwesenheiten im Antragskalender markieren */
.abw-cal-day.is-abw:not(.is-start):not(.is-end):not(.is-mid) {
    background: color-mix(in srgb, var(--abw-farbe, var(--color-primary)) 20%, var(--color-card-bg));
    color: var(--color-text-primary);
    border-radius: 11px;
}
.abw-cal-day.is-abw.is-abw-beantragt:not(.is-start):not(.is-end):not(.is-mid) {
    background: repeating-linear-gradient(
        45deg,
        var(--abw-farbe, var(--color-primary)),
        var(--abw-farbe, var(--color-primary)) 5px,
        var(--color-card-bg) 5px,
        var(--color-card-bg) 11px
    );
    color: #6b5560;
}

/* ---- VON/BIS/ARBEITSTAGE ---- */
.abw-summary { display: flex; gap: 12px; margin-top: 16px; }
.abw-sum-box { flex: 1; background: var(--color-primary-subtle); border-radius: 14px; padding: 13px 16px; }
.abw-sum-box.is-accent {
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light, var(--color-primary-light)));
    color: var(--color-text-white);
}
.abw-sum-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px; margin-bottom: 3px;
    color: #c76aa0;
}
.abw-sum-box.is-accent .abw-sum-label { color: var(--color-text-white); opacity: .85; }
.abw-sum-val {
    font-family: var(--font-family); font-weight: 700; font-size: 16px;
    color: var(--color-text-primary);
}
.abw-sum-box.is-accent .abw-sum-val { color: var(--color-text-white); }

/* ---- halbe Tage ---- */
.abw-half-row { display: flex; gap: 20px; margin-top: 14px; }
.abw-half {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: var(--color-text-muted); cursor: pointer; font-weight: 500;
}
.abw-half input { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* ---- Notiz ---- */
.abw-notiz {
    width: 100%; min-height: 80px; resize: vertical; box-sizing: border-box;
    border: 1px solid var(--color-surface-warm); background: #fffcfb;
    border-radius: 14px; padding: 13px 15px;
    font-family: var(--font-family); font-size: 14.5px;
    color: var(--color-text-primary); outline: none; line-height: 1.5;
}
.abw-notiz:focus { border-color: var(--color-primary); }

/* ---- Submit ---- */
.abw-submit-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-surface-warm);
}
.abw-submit-hint { font-size: 13.5px; color: var(--color-text-muted); }
.abw-submit-btn {
    border: none; cursor: pointer; font-family: var(--font-family);
    font-weight: 700; font-size: 15.5px; color: var(--color-text-white);
    padding: 14px 28px; border-radius: 15px;
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap;
    transition: background .15s ease;
}
.abw-submit-btn:hover { background: var(--color-primary-dark); }
.abw-submit-btn:disabled { opacity: .6; cursor: default; }
.abw-submit-btn .material-icons { font-size: 18px; }

/* ---- Success ---- */
.abw-success { padding: 48px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.abw-success-icon {
    width: 84px; height: 84px; border-radius: 50%;
    background: linear-gradient(135deg, #15B7A6, #46D6A0);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 30px -12px rgba(21,183,166,.6);
}
.abw-success-icon .material-icons { font-size: 40px; color: var(--color-text-white); }
.abw-success h2 {
    margin: 24px 0 8px; font-family: var(--font-family); font-weight: 700;
    font-size: 26px; color: var(--color-text-primary);
}
.abw-success p { margin: 0 0 26px; font-size: 15px; color: var(--color-text-muted); max-width: 360px; }
.abw-success-box {
    width: 100%; max-width: 420px; background: var(--color-surface-warm);
    border: 1px solid var(--color-surface-warm); border-radius: 18px;
    padding: 20px 22px; text-align: left;
    display: flex; flex-direction: column; gap: 13px;
}
.abw-success-line { display: flex; justify-content: space-between; font-size: 14.5px; }
.abw-success-line span { color: var(--color-text-muted); }
.abw-success-btn {
    margin-top: 26px; border: 1.5px solid #f0bbd6; background: var(--color-card-bg);
    color: var(--color-primary); font-family: var(--font-family);
    font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 14px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
}
.abw-success-btn:hover { background: #fdeff6; }

/* ---- rechte Spalte ---- */
.abw-side { display: flex; flex-direction: column; gap: 24px; }
.abw-side-card {
    background: var(--color-card-bg); border: 1px solid var(--color-surface-warm);
    border-radius: 22px; padding: 22px 24px;
    box-shadow: 0 24px 48px -34px rgba(173,120,150,.35);
}
.abw-side-title {
    font-family: var(--font-family); font-weight: 700; font-size: 18px;
    color: var(--color-text-primary); margin-bottom: 16px;
}
.abw-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.abw-side-count { font-size: 13px; color: var(--color-text-muted); }

.abw-rest-line { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14.5px; }
.abw-rest-line.is-total { border-top: 1px solid var(--color-surface-warm); margin-top: 6px; padding-top: 12px; }
.abw-rest-line span { color: var(--color-text-muted); }
.abw-rest-line strong { color: var(--color-text-primary); }
.abw-rest-line.is-total strong { color: var(--color-primary); font-size: 16px; }

.abw-antrag-item { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--color-border-warm); }
.abw-antrag-item:last-child { border-bottom: none; }
.abw-antrag-art { font-weight: 600; font-size: 14px; color: var(--color-text-primary); }
.abw-antrag-zeit { font-size: 12.5px; color: var(--color-text-muted); }
.abw-badge { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 9999px; white-space: nowrap; }
.abw-badge.is-beantragt { background: #fef3e2; color: var(--color-warning); }
.abw-badge.is-genehmigt { background: #e8f6ec; color: var(--color-success); }
.abw-badge.is-abgelehnt { background: #fde8ea; color: var(--color-error); }

@media (max-width: 980px) {
    .abw-grid { grid-template-columns: 1fr; }
}

/* ---- Resturlaub-Karte (Balance, Mockup-Stil) ---- */
.abw-bal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}
.abw-bal-label {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.abw-bal-big {
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.abw-bal-num {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--color-primary);
}
.abw-bal-of {
    font-size: 16px;
    color: var(--color-text-muted);
    font-weight: 600;
}
.abw-bal-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light, var(--color-primary-light)));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -8px rgba(199,49,120,.6);
    flex-shrink: 0;
}
.abw-bal-icon .material-icons { color: var(--color-text-white); font-size: 24px; }

.abw-bal-bar {
    display: flex;
    height: 13px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-border-warm);
    margin-bottom: 14px;
}
.abw-bal-seg { height: 100%; transition: width .35s ease; }
.abw-bal-seg.is-used { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light, var(--color-primary-light))); }
.abw-bal-seg.is-planned { background: var(--color-warning, var(--color-warning)); }

.abw-bal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12.5px;
}
.abw-bal-legend > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--color-text-muted);
}
.abw-bal-dot { width: 10px; height: 10px; border-radius: 3px; }
.abw-bal-dot.is-used { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light, var(--color-primary-light))); }
.abw-bal-dot.is-planned { background: var(--color-warning, var(--color-warning)); }
.abw-bal-dot.is-free { background: var(--color-border-warm); }

/* ---- Resturlaub-Balken: 3 Segmente ---- */
.abw-bal-seg.is-used {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light, var(--color-primary-light)));
}
.abw-bal-seg.is-beantragt {
    background: repeating-linear-gradient(
        45deg,
        var(--color-warning, var(--color-warning)),
        var(--color-warning, var(--color-warning)) 5px,
        var(--color-card-bg) 5px,
        var(--color-card-bg) 10px
    );
    cursor: help;
}
.abw-bal-seg.is-dies {
    background: var(--color-warning, var(--color-warning));
}

.abw-bal-dot.is-used {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light, var(--color-primary-light)));
}
.abw-bal-dot.is-beantragt {
    background: repeating-linear-gradient(
        45deg,
        var(--color-warning, var(--color-warning)),
        var(--color-warning, var(--color-warning)) 2.5px,
        var(--color-card-bg) 2.5px,
        var(--color-card-bg) 5px
    );
}
.abw-bal-dot.is-dies {
    background: var(--color-warning, var(--color-warning));
}
.abw-bal-dot.is-free {
    background: var(--color-border-warm);
}
.abw-bal-legitem { cursor: help; }

/* ---- Wer ist abwesend (Team-Karte) ---- */
.abw-team-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}
.abw-team-item + .abw-team-item { border-top: 1px solid var(--color-surface-warm); }
.abw-team-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--color-text-white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
    font-family: var(--font-family);
}
.abw-team-info { flex: 1; min-width: 0; }
.abw-team-name {
    font-weight: 600; font-size: 14.5px;
    color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.abw-team-tag {
    font-size: 11.5px; font-weight: 700;
    padding: 4px 11px; border-radius: 9999px;
    white-space: nowrap;
}

/* ============================================
   MEINE ZEITEN — Stat-Karten (Mockup-Design, flacher)
   ============================================ */
.mz-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
/* .mz-card* ersetzt durch .kb-stat aus keybuki-ui.css - ein Baustein
   fuer Meine Zeiten und die Mitarbeiter-Detailseite. .mz-cards bleibt
   als Raster (4 Spalten, mobil 2). */
/* Soll war #7B6CF6 (Violett, hartkodiert) - jetzt neutral wie in der
   Mitarbeiter-Detailseite, wo Soll ebenfalls die ruhige Kachel ist. */

@media (max-width: 820px) {
    .mz-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   MEINE ZEITEN — Tabelle (Mockup)
   ============================================ */
.mz-table {
    background: var(--color-card-bg);
    border: 1px solid var(--color-surface-warm);
    border-radius: 22px;
    box-shadow: 0 24px 48px -38px rgba(173,120,150,.4);
    overflow: hidden;
}
.mz-thead {
    display: grid;
    grid-template-columns: 1.6fr .9fr .9fr .8fr .9fr .9fr 52px;
    gap: 8px;
    padding: 13px 26px;
    background: var(--color-surface-warm);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.mz-tbody { display: flex; flex-direction: column; }
.mz-row {
    display: grid;
    grid-template-columns: 1.6fr .9fr .9fr .8fr .9fr .9fr 52px;
    gap: 8px;
    padding: 11px 26px;
    align-items: center;
    border-top: 1px solid var(--color-border-subtle);
}
.mz-row:first-child { border-top: none; }
.mz-row.is-we { background: var(--color-surface-subtle); }
.mz-row.is-feiertag { background: #fef7f8; }
/* Vorher #fdeff5 — feste Ableitung der alten Primaerfarbe. Wirkte im
   Dunkelmodus als helle Insel und folgte nicht der Mandanten-CI. */
.mz-row.is-today { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }

.mz-cell-tag { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mz-badge {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex-shrink: 0; line-height: 1;
}
.mz-badge-dow { font-size: 9px; font-weight: 700; letter-spacing: .3px; }
.mz-badge-num { font-family: var(--font-family); font-weight: 700; font-size: 15px; }
.mz-tag-text { min-width: 0; }
.mz-tag-title {
    display: block; font-weight: 600; font-size: 14.5px;
    color: var(--color-text-primary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.mz-tag-note { display: block; font-size: 12px; color: var(--color-text-muted); }

.mz-cell {
    font-weight: 600; font-size: 14.5px;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.mz-cell.mz-muted { color: var(--color-text-muted); font-weight: 500; }
.mz-cell.mz-ist { font-family: var(--font-family); font-weight: 700; }
.mz-cell.mz-saldo { font-weight: 700; font-size: 14px; }
.mz-cell.mz-action { display: flex; justify-content: center; }

.mz-edit {
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1px solid var(--color-surface-warm);
    background: var(--color-card-bg);
    color: #c0808f;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.mz-edit:hover { border-color: #f0bbd6; background: #fdeff6; color: var(--color-primary); }
.mz-edit .material-icons { font-size: 15px; }

@media (max-width: 760px) {
    .mz-thead { display: none; }
    .mz-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }
    .mz-cell-tag { grid-column: 1 / -1; }
}
/* Meine Zeiten — Monatsnavigation */
.mz-monthnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}
.mz-nav {
    width: 36px; height: 36px;
    border-radius: 11px;
    border: 1px solid var(--color-surface-warm);
    background: var(--color-card-bg);
    color: #6b6470;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.mz-nav:hover { background: var(--color-surface-warm); border-color: #e5dbd6; }
.mz-month-label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-text-primary);
    min-width: 160px;
    text-align: center;
}

/* ============================================
   ANWESENHEITEN — Summary-Karten (Mockup)
   ============================================ */
.anw-feiertag {
    padding: 12px 18px;
    background: #fef7f8;
    border: 1px solid #f8dde1;
    border-radius: 14px;
    display: flex; align-items: center; gap: 10px;
    color: var(--color-error);
    font-weight: 600; font-size: 14px;
    margin-bottom: 18px;
}
.anw-feiertag .material-icons { font-size: 20px; }

.anw-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.anw-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-surface-warm);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 18px 36px -34px rgba(173,120,150,.5);
}
.anw-card-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.anw-card-icon.is-office { background: #e1f6f2; color: #15b7a6; }
.anw-card-icon.is-remote { background: #edeafe; color: #7b6cf6; }
.anw-card-icon.is-away   { background: var(--color-primary-subtle); color: var(--color-primary); }

.anw-card-num {
    font-family: var(--font-family);
    font-weight: 700; font-size: 28px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.anw-card-num.is-office { color: #15b7a6; }
.anw-card-num.is-remote { color: #7b6cf6; }
.anw-card-num.is-away   { color: var(--color-primary); }
.anw-card-label {
    font-size: 13.5px; color: var(--color-text-muted);
    margin-top: 4px;
}
@media (max-width: 720px) {
    .anw-cards { grid-template-columns: 1fr; }
}

/* ============================================
   ANWESENHEITEN — Heute-Team-Liste (Mockup)
   ============================================ */
.anw-listcard {
    background: var(--color-card-bg);
    border: 1px solid var(--color-surface-warm);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 24px 48px -38px rgba(173,120,150,.4);
}
.anw-listcard-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.anw-listcard-title {
    font-family: var(--font-family);
    font-weight: 600; font-size: 17px;
    color: var(--color-text-primary);
}
.anw-listcard-date { font-size: 12.5px; color: var(--color-text-muted); }

.anw-list { display: flex; flex-direction: column; gap: 4px; }
.anw-item {
    display: flex; align-items: center; gap: 13px;
    padding: 10px 8px;
    border-radius: 13px;
    transition: background .12s ease;
}
.anw-item:hover { background: var(--color-surface-warm); }

.anw-avatar-wrap { position: relative; flex-shrink: 0; }
.anw-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    color: var(--color-text-white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    font-family: var(--font-family);
}
.anw-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--color-card-bg);
}
.anw-item-info { flex: 1; min-width: 0; }
.anw-item-name {
    font-weight: 600; font-size: 14.5px;
    color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anw-item-role { font-size: 12.5px; color: var(--color-text-muted); }
.anw-item-tag {
    font-size: 11.5px; font-weight: 700;
    padding: 5px 12px; border-radius: 9999px;
    white-space: nowrap;
}

/* Anwesenheiten — Scope-Pills */
.anw-scope {
    display: inline-flex;
    background: var(--color-surface-subtle);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.anw-scope-pill {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13.5px;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
}
.anw-scope-pill:hover { color: var(--color-text-primary); }
.anw-scope-pill.is-active {
    background: var(--color-card-bg);
    color: var(--color-primary);
    box-shadow: 0 2px 6px -2px rgba(0,0,0,.15);
}

/* ============================================
   ANWESENHEITEN — Heute+Woche nebeneinander + Wochengrid
   ============================================ */
.anw-twocol {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .anw-twocol { grid-template-columns: 1fr; }
}

.anw-wkcard {
    background: var(--color-card-bg);
    border: 1px solid var(--color-surface-warm);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 24px 48px -38px rgba(173,120,150,.4);
}
.anw-wkcard-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; flex-wrap: wrap; gap: 8px;
}
.anw-wkcard-title {
    font-family: var(--font-family);
    font-weight: 600; font-size: 17px;
    color: var(--color-text-primary);
}
.anw-wk-legend {
    display: flex; gap: 14px;
    font-size: 12px; color: var(--color-text-muted);
}
.anw-wk-legend span { display: flex; align-items: center; gap: 6px; }
.anw-wk-dot { width: 10px; height: 10px; border-radius: 4px; }

.anw-wk-headrow,
.anw-wk-row {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 7px;
    align-items: center;
}
.anw-wk-headrow { margin-bottom: 9px; padding-left: 2px; }
.anw-wk-dow {
    text-align: center; font-size: 12px; font-weight: 700;
    color: var(--color-text-muted);
}
.anw-wk-dow.is-fr { color: var(--color-primary); }
.anw-wk-body { display: flex; flex-direction: column; gap: 13px; }
.anw-wk-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.anw-wk-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-primary); color: var(--color-text-white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px; flex-shrink: 0;
    font-family: var(--font-family);
}
.anw-wk-name {
    font-weight: 600; font-size: 13.5px; color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anw-wk-cell {
    height: 35px; border-radius: 9px;
}
/* 20.10.2026: 20 % satter (Grundfarbe beigemischt), vorher zu blass */
.anw-wk-cell.is-buero  { background: #b8e9e3; border: 1px solid #9ddfd5; }
.anw-wk-cell.is-remote { background: #d6d1fc; border: 1px solid #c4bbfa; }
.anw-wk-cell.is-abw    { background: color-mix(in srgb, var(--color-primary-subtle) 80%, var(--color-primary) 20%); border: 1px solid color-mix(in srgb, #f6cfe2 80%, var(--color-primary) 20%); }
.anw-wk-cell.is-frei   { background: var(--color-surface-subtle); border: 1px solid var(--color-border-subtle); }

/* Halber Tag (20.10.2026): zwei Haelften mit den bestehenden Farben, diagonal geschnitten */
.anw-wk-cell.anw-wk-halb { position: relative; overflow: hidden; background: transparent; border: 1px solid var(--color-border-subtle); }
.anw-wk-halb > .anw-wk-cell { position: absolute; inset: 0; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.anw-wk-halb > .anw-wk-cell:first-child { clip-path: polygon(0 0, 100% 0, 0 100%); }
.anw-wk-halb > .anw-wk-cell:last-child  { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Kein Arbeitstag (20.10.2026) */
.anw-frei-head { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.anw-list-frei { margin-top: 10px; }
.anw-list-frei .anw-item { background: var(--color-surface-subtle); border-radius: 12px; padding-left: 12px; padding-right: 12px; margin-bottom: 8px; }
.anw-list-frei .anw-item-name { color: var(--color-text-muted); }
.anw-leer { padding: 16px 0; font-size: 14px; color: var(--color-text-muted); }

.anw-wk-dot.is-buero  { background: #15b7a6; }
.anw-wk-dot.is-remote { background: #7b6cf6; }
.anw-wk-dot.is-abw    { background: var(--color-primary); }
/* Onboarding-Hinweis in der Stempeln-Hero (kein Mitarbeiterprofil) */
.ze-onboard-hint {
    padding: 4px 2px;
}
.ze-onboard-text {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted, var(--color-text-secondary));
    margin: 0 0 16px;
}
.ze-onboard-steps {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ze-onboard-steps li {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
}
.ze-onboard-steps li::marker {
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================
   ZE-Onboarding: Sidebar ausblenden (Fullwidth-Setup)
   ============================================ */
body.ze-onboarding-active #sidebar {
    display: none;
}
body.ze-onboarding-active #main-content {
    margin-left: 0;
}

/* Breite Variante für die Team-Mitglieder-Zuordnung */
.modal-content.modal-content-teamzuordnung {
    max-width: 900px;
}

/* ===== Arbeitszeitmodelle – Live-Übersicht (Option A) ===== */
.azm-summary {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}
.azm-summary strong { color: var(--color-text-primary); }

.azm-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 14px;
}
.azm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--color-primary-light, var(--color-primary-subtle));
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
}

.azm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.azm-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.azm-card.is-individuell {
    border-left-color: var(--color-border-strong);
}

.azm-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.azm-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.azm-card-hours {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}
.azm-card.is-individuell .azm-card-hours { color: var(--color-text-secondary); }
.azm-card-hours span { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }

.azm-bar {
    height: 6px;
    background: var(--color-border-subtle);
    border-radius: 3px;
    overflow: hidden;
}
.azm-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
}
.azm-card.is-individuell .azm-bar-fill { background: var(--color-border-strong); }

.azm-tage {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.azm-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border-radius: 6px;
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}
.azm-tag.is-aktiv {
    background: var(--color-primary-light, var(--color-primary-subtle));
    color: var(--color-primary);
}
.azm-card.is-individuell .azm-tag.is-aktiv {
    background: var(--color-border-subtle);
    color: var(--color-text-secondary);
}
.azm-tag-label { font-size: 10px; font-weight: 600; text-transform: uppercase; }
.azm-tag-std { font-size: 12px; font-weight: 700; }

.azm-card-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ===== Arbeitszeitmodelle – Listen-Ansicht (1a) – überschreibt Grid/Card ===== */
.azm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.azm-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 10px;
    padding: 14px 18px;
}
.azm-row.is-individuell {
    border-left-color: var(--color-border-strong);
}

.azm-row-name {
    flex: 0 0 200px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Tagesverteilung: feste Breite, mittig */
.azm-row .azm-tage {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
}
.azm-row .azm-tag {
    width: 42px;
    padding: 5px 0;
}

/* Auslastungsbalken nimmt den flexiblen Rest ein */
.azm-row-bar {
    flex: 1 1 auto;
    min-width: 60px;
}

.azm-row-staff {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 600;
    min-width: 52px;
    justify-content: flex-end;
}

/* Tages-Badges: aktive Tage kräftig pink + weiße Schrift, inaktive grau + dunkle Schrift */
.azm-tag {
    background: var(--color-border-subtle);
    color: var(--color-text-primary);
}
.azm-tag.is-aktiv {
    background: var(--color-primary);
    color: var(--color-text-white);
}
.azm-tag.is-aktiv .azm-tag-label,
.azm-tag.is-aktiv .azm-tag-std {
    color: var(--color-text-white);
}
.azm-card.is-individuell .azm-tag.is-aktiv,
.azm-row.is-individuell .azm-tag.is-aktiv {
    background: var(--color-primary);
    color: var(--color-text-white);
}
.azm-row.is-individuell .azm-tag.is-aktiv .azm-tag-label,
.azm-row.is-individuell .azm-tag.is-aktiv .azm-tag-std {
    color: var(--color-text-white);
}

/* Zähler-Kreise hinter den Gruppen-Überschriften: kräftig pink + weiße Zahl */
.azm-count {
    background: var(--color-primary);
    color: var(--color-text-white);
}

/* === ZE Bearbeiten-Modal: Arbeitstage-Pills (Kompakt-Redesign) === */
.ze-tag-pill {
    border: 1px solid #D8DED9;
    background: var(--color-card-bg);
    color: var(--color-text-muted, #8A958D);
    transition: background .12s, border-color .12s, color .12s;
}
.ze-tag-pill.aktiv,
.ze-tag-pill:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-white);
}
#arbeitstageContainer input[type="number"]:disabled {
    background: #F4F6F3;
    color: #B7C0B9;
    border-color: #E7EBE6;
}

/* ============================================================
   ZEITKORREKTUR-MODAL (Inline-Bearbeitung) — .zk-*
   Primärfarbe folgt der Mandanten-CI (--color-primary).
   Semantische Farben (Kommen/Pause) sind CI-unabhängig.
   ============================================================ */
:root {
  --sem-kommen:      #157347;
  --sem-kommen-bg:   #E4F2EA;
  --sem-kommen-brd:  #8FBFA3;
  --sem-pause:       #9A6A00;
  --sem-pause-bg:    #FCEFCF;
  --sem-pause-brd:   #E0B85E;
  --sem-pause-fill:  #F2C94C;
}

#zeitkorrekturModal .zk-modal {
  width:560px; max-width:100%;
  background:var(--color-card-bg); border-radius:16px;
  box-shadow:0 24px 60px -18px rgba(23,36,28,.28), 0 2px 8px rgba(23,36,28,.08);
  display:flex; flex-direction:column; overflow:visible;
}
#zeitkorrekturModal .zk-head { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--color-border); }
#zeitkorrekturModal .zk-title { font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--color-text-primary); }
#zeitkorrekturModal .zk-sub { font-size:13px; color:var(--color-text-secondary); margin-top:2px; }
#zeitkorrekturModal .zk-close { width:34px; height:34px; border:none; background:var(--color-surface-subtle); border-radius:10px; font-size:15px; color:var(--color-text-primary); cursor:pointer; }
#zeitkorrekturModal .zk-close:hover { background:var(--color-border-subtle); }

#zeitkorrekturModal .zk-body { padding:22px 24px; display:flex; flex-direction:column; gap:22px; max-height:70vh; overflow-y:auto; }
#zeitkorrekturModal .zk-label { font-size:12.5px; font-weight:600; color:var(--color-text-secondary); }

#zeitkorrekturModal .zk-timeline-head { display:flex; justify-content:space-between; align-items:baseline; }
#zeitkorrekturModal .zk-total { font-size:13px; font-weight:800; color:var(--color-primary-dark, var(--color-primary)); font-variant-numeric:tabular-nums; }
#zeitkorrekturModal .zk-bar { position:relative; height:56px; background:var(--color-surface-subtle); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; margin-top:8px; }
#zeitkorrekturModal .zk-tick { position:absolute; top:0; bottom:0; width:1px; background:var(--color-border-subtle); }
#zeitkorrekturModal .zk-tick-lbl { position:absolute; bottom:4px; font-size:10.5px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
#zeitkorrekturModal .zk-seg { position:absolute; top:12px; height:18px; border-radius:5px; background:color-mix(in srgb, var(--color-primary) 42%, white); }
#zeitkorrekturModal .zk-seg.is-pause { background:var(--sem-pause-fill); border:1px solid var(--sem-pause-brd); }
#zeitkorrekturModal .zk-marker { position:absolute; top:9px; transform:translateX(-50%); width:9px; height:24px; border-radius:4px; border:2px solid var(--color-card-bg); box-shadow:0 1px 3px rgba(23,36,28,.25); }

#zeitkorrekturModal .zk-rows { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
#zeitkorrekturModal .zk-row { display:flex; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--color-border); border-radius:11px; background:var(--color-surface-subtle); }
#zeitkorrekturModal .zk-type { width:104px; text-align:center; font-size:12.5px; font-weight:800; padding:6px 0; border-radius:99px; }
#zeitkorrekturModal .zk-type.kommen { color:#1B7A47; background:#F4FAF6; }
#zeitkorrekturModal .zk-type.gehen  { color:#C0392B; background:#FDF4F4; }
#zeitkorrekturModal .zk-type.pause_start, #zeitkorrekturModal .zk-type.pause_ende { color:#A87500; background:#FDF9EF; }
#zeitkorrekturModal .zk-time { padding:8px 10px; border:1px solid var(--color-border-strong); border-radius:8px; font:inherit; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; background:var(--color-card-bg); }
#zeitkorrekturModal .zk-time.changed { border-color:var(--color-primary); box-shadow:0 0 0 2px var(--color-primary-light, var(--color-primary-subtle)); }
#zeitkorrekturModal .zk-time.missing { border-color:var(--color-danger, var(--color-error)); box-shadow:0 0 0 2px var(--color-error-light); }
#zeitkorrekturModal .zk-badge { font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:99px; }
#zeitkorrekturModal .zk-badge.korr { color:var(--sem-pause); background:var(--sem-pause-bg); }
#zeitkorrekturModal .zk-badge.neu  { color:var(--sem-kommen); background:var(--sem-kommen-bg); }
#zeitkorrekturModal .zk-badge.miss { color:var(--color-danger, var(--color-error)); background:var(--color-error-light); }
#zeitkorrekturModal .zk-spacer { flex:1; }
#zeitkorrekturModal .zk-del { width:32px; height:32px; border:none; background:transparent; border-radius:8px; cursor:pointer; font-size:14px; color:var(--color-text-muted); }
#zeitkorrekturModal .zk-del:hover { background:var(--color-primary-light, var(--color-primary-subtle)); color:var(--color-danger, var(--color-error)); }
#zeitkorrekturModal .zk-empty { padding:14px; border:1px dashed var(--color-border-strong); border-radius:11px; text-align:center; font-size:13px; color:var(--color-text-muted); }

#zeitkorrekturModal .zk-add-row { display:flex; gap:8px; margin-top:8px; position:relative; }
#zeitkorrekturModal .zk-add { flex:1; padding:9px 0; border-radius:10px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; border:1px dashed; }
#zeitkorrekturModal .zk-add.kommen { border-color:#B5D2BF; background:#F4FAF6; color:#1B7A47; }
#zeitkorrekturModal .zk-add.pause  { border-color:#EBCF8A; background:#FDF9EF; color:#A87500; }
#zeitkorrekturModal .zk-add.gehen  { border-color:#E5B3B3; background:#FDF4F4; color:#C0392B; }

#zeitkorrekturModal .zk-pause-pick { position:absolute; top:calc(100% + 6px); left:33.33%; transform:translateX(-50%); background:var(--color-card-bg); border:1px solid var(--color-border); border-radius:11px; box-shadow:0 12px 28px -10px rgba(23,36,28,.35); padding:6px; display:flex; flex-direction:column; gap:4px; z-index:20; min-width:150px; }
#zeitkorrekturModal .zk-pause-pick button { border:none; background:transparent; padding:9px 12px; border-radius:8px; font:inherit; font-size:13.5px; font-weight:600; text-align:left; cursor:pointer; color:var(--color-text-primary); }
#zeitkorrekturModal .zk-pause-pick button:hover { background:var(--sem-pause-bg); }

#zeitkorrekturModal .zk-tag-btn { margin-top:8px; width:100%; padding:11px 0; border-radius:10px; border:1px dashed var(--color-border-strong); background:var(--color-surface-subtle); color:var(--color-text-secondary); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
#zeitkorrekturModal .zk-tag-btn:hover { background:var(--color-border-subtle); }
#zeitkorrekturModal .zk-tag-btn small { font-weight:500; color:var(--color-text-muted); }

#zeitkorrekturModal .zk-tag-panel { margin-top:8px; border:1px solid var(--sem-pause-brd); background:#FFFDF7; border-radius:11px; padding:14px; display:flex; flex-direction:column; gap:10px; }
#zeitkorrekturModal .zk-tag-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#zeitkorrekturModal .zk-tag-row label { font-size:12.5px; font-weight:600; color:var(--color-text-secondary); }
#zeitkorrekturModal .zk-tag-row input { padding:8px 10px; border:1px solid var(--color-border-strong); border-radius:8px; font:inherit; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
#zeitkorrekturModal .zk-tag-preview { font-size:12.5px; color:var(--sem-pause); background:var(--sem-pause-bg); border-radius:8px; padding:8px 10px; }
#zeitkorrekturModal .zk-tag-actions { display:flex; gap:8px; justify-content:flex-end; }
#zeitkorrekturModal .zk-tag-actions button { padding:8px 14px; border-radius:9px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
#zeitkorrekturModal .zk-tag-cancel { border:1px solid var(--color-border-strong); background:var(--color-card-bg); color:var(--color-text-primary); }
#zeitkorrekturModal .zk-tag-ok { border:none; background:var(--color-primary); color:var(--color-text-white); }
#zeitkorrekturModal .zk-tag-ok:disabled { background:var(--color-border-strong); cursor:not-allowed; }

#zeitkorrekturModal .zk-warn { display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--sem-pause); background:var(--sem-pause-bg); border-radius:9px; padding:8px 12px; margin-top:8px; }

#zeitkorrekturModal .zk-reason { display:flex; flex-direction:column; gap:6px; }
#zeitkorrekturModal .zk-reason textarea { padding:10px 12px; border:1px solid var(--color-border-strong); border-radius:9px; font:inherit; font-size:14px; resize:vertical; }
#zeitkorrekturModal .zk-reason textarea:focus { outline:2px solid var(--color-primary); outline-offset:1px; }

#zeitkorrekturModal .zk-diff { font-size:12px; color:var(--color-text-secondary); background:var(--color-surface-subtle); border-radius:9px; padding:10px 12px; }
#zeitkorrekturModal .zk-diff strong { color:var(--color-text-primary); }
#zeitkorrekturModal .zk-diff ul { margin:6px 0 0 16px; }
#zeitkorrekturModal .zk-diff li { margin:2px 0; }

#zeitkorrekturModal .zk-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-top:1px solid var(--color-border); background:var(--color-surface-subtle); }
#zeitkorrekturModal .zk-actions { display:flex; gap:10px; }
#zeitkorrekturModal .zk-btn-cancel { padding:10px 16px; border:1px solid var(--color-border-strong); background:var(--color-card-bg); border-radius:10px; font:inherit; font-size:14px; font-weight:600; color:var(--color-text-primary); cursor:pointer; }
#zeitkorrekturModal .zk-btn-cancel:hover { background:var(--color-surface-subtle); }
#zeitkorrekturModal .zk-btn-submit { padding:10px 16px; border:none; border-radius:10px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; background:var(--color-primary); color:var(--color-text-white); }
#zeitkorrekturModal .zk-btn-submit:disabled { background:var(--color-border-strong); cursor:not-allowed; }

/* ============================================
   Confirm-Dialog über verschachtelten Modals
   ============================================ */
/* Das Abwesenheiten-Bearbeiten-Modal setzt z-index inline auf 10000.
   Der Bestätigungsdialog wird aus ihm heraus geöffnet und muss darüber liegen. */
#confirm-dialog-overlay {
    z-index: 10001;
}

/* ============================================
   btn-secondary: Hover ohne Groessensprung
   ============================================ */
/* components.css:40 setzt beim Hover 2px Rahmen, waehrend .btn (ze.css:832)
   border:none hat - der Button wird dadurch 4px groesser. Rahmen dauerhaft
   reservieren und nur die Farbe wechseln. */
.btn-secondary {
    border: 2px solid transparent;
}

.btn-secondary:hover {
    border-color: var(--color-text-heading);
}

/* ---- Einstellungen: Tab-Leiste im Portal-Stil ----
   Uebernommen aus dpa/assets/css/dpa.css (dort .tabs / .tab-btn ab Zeile 1012).
   ZE laedt dpa.css nicht; die vorhandenen ZE-Varianten sind an Elternselektoren
   gebunden (.verfuegbarkeit-tabs, .team-tabs) und greifen hier nicht.
   Eigener Praefix .ze-einst-tabs, damit sie sich nicht gegenseitig ueberschreiben. */
.ze-einst-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
    /* Neun Tabs passen auf schmalen Fenstern nicht mehr nebeneinander.
       nowrap ist noetig, sonst bricht die Leiste um statt zu scrollen. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.ze-einst-tabs::-webkit-scrollbar {
    height: 4px;
}

.ze-einst-tabs::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 2px;
}

.ze-einst-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.ze-einst-tabs .settings-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ze-einst-tabs .tab-btn {
    padding: 12px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.ze-einst-tabs .tab-btn:hover {
    color: var(--color-primary);
}

.ze-einst-tabs .tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ============================================
   Offene-Antraege-Badge: runder Kreis in der Sidebar
   Ueberschreibt die generische .nav-badge (Pille) fuer die
   Antrags-Badges. Feste Hoehe = Breite -> echter Kreis bei
   einstelligen Zahlen; waechst kontrolliert bei zweistellig/99+.
   ============================================ */
#abwesenheitenBadge,
#abwesenheitenBadgeVorgesetzter,
#korrekturenBadge,
#korrekturenBadgeVorgesetzter {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    background: #e74c3c;
    color: var(--color-text-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
}

/* Bulk-Aktionsleiste Mitarbeiterliste — uebernommen aus dpa.css:1059 ff.
   Bei Aenderungen am DPA-Original beide Stellen anfassen. */
.bulk-actions {
    background: var(--color-card-bg);
    color: var(--color-text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid var(--color-primary);
    margin-bottom: 16px;
    animation: zeBulkSlideDown 0.2s ease;
}

@keyframes zeBulkSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bulk-actions-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bulk-actions #ze-selected-count {
    font-weight: 600;
    margin-right: 8px;
}

.bulk-actions .btn {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-text-white);
}

.bulk-actions .btn:hover {
    background: var(--color-primary-dark);
}

.bulk-actions .btn-danger {
    background: var(--color-error);
    border-color: var(--color-error);
}

.bulk-actions .btn-danger:hover {
    background: var(--color-error);
}

@media (max-width: 768px) {
    .bulk-actions {
        flex-direction: column;
        gap: 8px;
    }
}