/* Database page placeholders */
.database-page .profile-left,
.database-page .profile-right {
    min-height: 200px;
}

/* Löschungszeiträume Labels größer und linksbündig */
.database-page .widget-content .form-group label {
    font-size: 1.1em;
    font-weight: 600;
    text-align: left;
    margin-bottom: 8px;
}

/* Backup Buttons untereinander und zentriert */
.database-page .backup-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Backup Meta Box */
.database-page .backup-meta {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Gelber, dauerhafter Info-Container unter dem Button */
.database-page .backup-info {
    background-color: #fff3cd; /* soft yellow */
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.database-page .backup-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/*
 * Copyright (c) 2025 Daniel Seelinger
 * Alle Rechte vorbehalten.
 * info@danielseelinger.com
 */

/* ===== SETTINGS PAGE STYLES ===== */
.password-prompt-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.password-prompt-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    border: 1px solid var(--border-color);
    margin: 0 auto;
    text-align: center;
}

.password-prompt-header {
    text-align: center;
    margin-bottom: 2rem;
}

.password-prompt-header h1 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.password-prompt-header p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.password-prompt-form {
    margin-top: 2rem;
    text-align: center;
}

.password-prompt-form .form-group {
    margin-bottom: 1.5rem;
    text-align: center;
}

.password-prompt-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.password-prompt-form .form-input {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
    box-sizing: border-box;
    display: block;
}

.password-prompt-form .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.password-prompt-form .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.password-prompt-form .btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.password-prompt-form .btn-primary {
    background: var(--primary-color);
    color: white;
}

.password-prompt-form .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.password-prompt-form .btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.password-prompt-form .btn-secondary:hover {
    background: var(--bg-primary);
    transform: translateY(-1px);
}

.password-prompt-form .alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-prompt-form .alert-error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

.settings-container {
    padding: 20px;
}

.settings-content {
    margin-top: 20px;
}

.settings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.settings-left,
.settings-right {
    min-height: 400px;
}

.settings-form-container {
    padding: 20px;
}

.settings-form-container p {
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
    padding: 20px;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 2px dashed var(--border-color);
}

/* Aragon2 Form Styles */
.settings-form {
    max-width: 100%;
}

.settings-form .form-group {
    margin-bottom: 20px;
}

.settings-form .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.settings-form .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.settings-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
}

.number-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.number-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    min-width: 80px;
}

/* Verstecke die Standard-Pfeile des Number-Input */
.number-input::-webkit-outer-spin-button,
.number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.number-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.number-btn {
    width: 32px;
    height: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.number-btn:hover {
    background: var(--bg-primary);
    border-color: var(--primary-color);
}

.number-btn:active {
    transform: scale(0.95);
}

.text-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}

.text-input:focus,
.number-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.audit-form .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.audit-form .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.audit-form .form-group {
    margin-bottom: 15px;
}

.audit-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-primary);
}

.audit-info {
    margin-top: 20px;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.audit-info h4 {
    margin: 0 0 10px 0;
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audit-info ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.audit-info li {
    margin-bottom: 5px;
}

/* Responsive Design für Settings */
@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .settings-container {
        padding: 15px;
    }
    
    .settings-form .form-row,
    .audit-form .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .settings-form .form-row .form-group,
    .audit-form .form-row .form-group {
        margin-bottom: 15px;
    }
    
    .modal-content {
        margin: 10% auto;
        width: 95%;
    }
    
    .modal-buttons {
        flex-direction: column;
    }
    
    .password-verification-box {
        padding: 30px 20px;
    }
}

/* CMS Styling - Tag/Nacht Theme System */


/* ========================================
   SETTINGS PAGE STYLES
   ======================================== */

/* Settings Container */
.settings-container {
    padding: 20px;
}

.settings-content {
    margin-top: 20px;
}

.settings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}



.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    color: var(--text-primary);
    margin: 0 0 10px 0;
    font-size: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 16px;
}


.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #dc2626;
}


/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: var(--bg-primary);
    margin: 2% auto;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.close {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 25px;
}

.modal-body p {
    margin: 0 0 20px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.modal-buttons {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-buttons .btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
}



/* CSS Custom Properties für Themes */
:root {
    /* DRK Farben */
    --drk-red: #dc2626;
    --drk-red-dark: #b91c1c;
    --drk-red-light: #ef4444;
    
    /* Tag Theme (Standard) */
    --bg-primary: #e6eaee;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #e9ecef;
    --border-color-hover: #dc2626;
    --hover-bg-color: #f0f8ff;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.2);
}

/* Nacht Theme */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --bg-card: #232323;
    --text-primary: #f2f2f2;
    --text-secondary: #a3a3a3;
    --text-muted: #666666;
    --border-color: #333333;
    --border-color-hover: #dc2626;
    --hover-bg-color: #2a2a2a;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.5);
}


/* Basis-Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Login-Seite */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/login_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.login-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.login-container {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}

.login-box {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}


.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo {
    margin-bottom: 20px;
}

.login-logo img {
    height: 200px;
    width: auto;
    max-width: 100%;
}

.login-header h1 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.login-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.login-form .form-group {
    margin-bottom: 24px;
}

.login-form label {
    display: flex;
    align-items: center;
    color: #ffffff !important;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.login-form label i {
    margin-right: 8px;
    font-size: 16px;
    color: #ffffff;
}

.login-form input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-form input::placeholder {
    color: rgb(255, 255, 255);
}

.login-form input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.849);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.login-form .alert {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-form .alert i {
    margin-right: 8px;
    font-size: 18px;
}

.btn-full {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    background: var(--accent-color);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.btn-full i {
    margin-right: 8px;
    font-size: 18px;
}

.btn-full:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.btn-full:active {
    transform: translateY(0);
}

.login-form .form-help {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-top: 4px;
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive Design für Login */
@media (max-width: 480px) {
    .login-box {
        padding: 30px 20px;
        margin: 10px;
    }
    
    .login-header h1 {
        font-size: 28px;
    }
    
    .login-logo img {
        height: 150px;
    }
}



.main-content .container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header z-index sicherstellen */
.header {
    position: relative;
    z-index: 100;
}

/* Main content z-index */
.main-content {
    position: relative;
    z-index: 1;
}


/* ===== PROFILE MODALS ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-content {
    background: var(--bg-secondary);
    margin: 5% auto;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10000;
}

.modal-header {
    background: var(--bg-primary);
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body {
    padding: 30px;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 20px;
}


/* ===== PASSWORD CHANGE REQUIRED ===== */
.password-change-required {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 20px;
}

.password-change-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    overflow: hidden;
}

.password-change-header {
    background: var(--drk-red);
    color: white;
    padding: 30px;
    text-align: center;
}

.password-change-header .alert-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.password-change-header h1 {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 600;
}

.password-change-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 14px;
}

.password-change-form-container {
    padding: 30px;
}

.password-change-form .form-group {
    margin-bottom: 20px;
}

.password-change-form .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
}

.password-change-form .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.password-change-form .form-group input:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.password-change-form .form-help {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-secondary);
}

.password-change-form .btn-full {
    width: 100%;
    margin-top: 10px;
}

.password-change-info {
    background: var(--bg-tertiary);
    padding: 20px 30px;
    border-top: 1px solid var(--border-color);
}

.password-change-info p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-change-info i {
    color: var(--drk-red);
}

/* ===== PASSWORD EXPIRY WARNINGS ===== */
@media (max-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .profile-form .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .profile-image-upload {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Form-Styling */
.form-group {
    margin-bottom: 20px;
}

/* Backup-Codes Buttons */
.backup-codes-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.backup-codes-buttons .btn {
    flex: 1;
    min-width: 140px;
}

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

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.form-group input:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

/* Button-Styling */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background-color: var(--drk-red);
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: var(--drk-red-dark);
    transform: translateY(-1px);
}

.btn-full {
    width: 100%;
    padding: 12px;
}

/* Alert-Styling */
.alert {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-error {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--drk-red-light);
    border: 1px solid var(--drk-red);
}

/* Header-Styling */
.main-header {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navbar-brand {
    margin-right: auto;
    margin-left: -200px;
}

.logo-img {
    height: 70px;
    width: auto;
    transition: opacity 0.3s ease;
}

.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

.navbar-user {
    font-size: 14px;
    color: var(--text-secondary);
    margin-right: 20px;
}

.user-greeting {
    font-weight: 500;
    color: var(--text-primary);
}

.navbar-clock {
    font-size: 15px;
    color: var(--text-secondary);
    text-align: right;
    font-weight: 600;
}

.navbar-clock #timedate a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.navbar-clock #timedate {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

/* Theme Toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
}

.theme-toggle-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.theme-switch {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-switch.active {
    background-color: var(--drk-red);
}

.theme-switch-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-switch.active .theme-switch-slider {
    transform: translateX(26px);
}

.theme-switch-icons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.theme-switch-icons.sun {
    left: 6px;
}

.theme-switch-icons.moon {
    right: 6px;
}

.theme-switch.active .theme-switch-icons.sun {
    color: white;
}

.theme-switch:not(.active) .theme-switch-icons.moon {
    color: var(--text-primary);
}

.hamburger-container {
    display: flex;
    align-items: center;
}

.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background-color: var(--text-primary);
    transition: all 0.3s ease;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Slide-Navigation */
.slide-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.404);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.slide-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.slide-navigation {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: var(--bg-card);
    z-index: 1001;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px var(--shadow);
    border-left: 1px solid var(--border-color);
}

.slide-navigation.active {
    right: 0;
}

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

.slide-brand-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

.slide-nav-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
}

.slide-nav-menu {
    padding: 20px 0;
}

.slide-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.slide-nav-item {
    margin: 0;
}

.slide-nav-user {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}


.slide-nav-profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: block;
    margin: 0 auto;
}

.slide-nav-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    color: var(--text-primary);
    font-weight: 600;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    margin: 10px 20px;
}

.slide-nav-user-info i {
    display: none;
}

.slide-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.slide-nav-link:hover {
    background-color: var(--bg-secondary);
}

.slide-nav-link i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.slide-nav-link:hover i {
    color: var(--drk-red);
}

/* Dropdown-Menü */
.slide-nav-dropdown {
    position: relative;
}

.slide-nav-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slide-nav-dropdown-header:hover {
    background-color: var(--bg-secondary);
}

.slide-nav-dropdown-header i:first-child {
    font-size: 18px;
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.slide-nav-dropdown-header:hover i:first-child {
    color: var(--drk-red);
}

.dropdown-arrow {
    font-size: 14px;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.slide-nav-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.slide-nav-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--bg-secondary);
    border-left: 3px solid var(--drk-red);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.slide-nav-dropdown.active .slide-nav-dropdown-menu {
    max-height: 300px;
}

.slide-nav-dropdown-item {
    margin: 0;
}

.slide-nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 40px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 14px;
}

.slide-nav-dropdown-link:hover {
    background-color: var(--bg-primary);
}

.slide-nav-dropdown-link i {
    font-size: 16px;
    width: 18px;
    text-align: center;
    color: var(--text-secondary);
}

.slide-nav-dropdown-link:hover i {
    color: var(--drk-red);
}

.slide-nav-profile,
.slide-nav-logout {
    margin-top: 20px;
    padding: 0 20px;
}

.slide-nav-profile-link,
.slide-nav-logout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.slide-nav-logout-link {
    color: var(--drk-red-light);
}

.slide-nav-profile-link:hover,
.slide-nav-logout-link:hover {
    background-color: var(--bg-secondary);
}

/* Mobile Theme Toggle */
.slide-nav-theme {
    margin-top: 20px;
    padding: 0 20px;
}

.slide-nav-theme .theme-toggle {
    justify-content: center;
    margin: 0;
    padding: 15px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.slide-nav-theme .theme-toggle-label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.slide-nav-theme .theme-switch {
    margin: 0 15px;
}

/* ===== IMPORT/EXPORT PAGE ===== */
/* Import/Export Form Styles */
.import-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.import-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.import-form label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

/* File Picker Styles */
.file-picker-container {
    position: relative;
}

.file-picker-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.file-picker-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.file-picker-label:hover {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    color: var(--primary-color);
}

.file-picker-text {
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.file-picker-text.selected {
    color: var(--primary-color);
    font-weight: 600;
}

.file-picker-label i {
    font-size: 18px;
}

/* Form Select Styles */
.form-select {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Slider Styles */
.slider-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    width: 100%;
}

.slider-label span {
    flex: 1;
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

/* SlideThree Slider - Exakt aus dem Original-Script */
.slideThree {
    width: 80px;
    height: 26px;
    background: #333;
    margin: 0;
    position: relative;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideThree:after {
    content: 'Nein';
    color: #27ae60;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
}

.slideThree:before {
    content: 'Ja';
    color: #e61c1c;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
}

.slideThree label {
    display: block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
}

.slideThree input[type=checkbox] {
    visibility: hidden;
}

.slideThree input[type=checkbox]:checked + label {
    left: 43px;
}

/* Shifts Modal: C1 Slider Abstand nach unten */
#newShiftModal .slider-label {
    align-items: flex-start;
}

#newShiftModal .slideThree {
    margin-top: 45px;
}

#newShiftModal .slider-label span {
    margin-top: 45px;
}

/* Edit Shift Modal: C1 Slider Abstand nach unten */
#editShiftModal .slider-label {
    align-items: flex-start;
}

#editShiftModal .slideThree {
    margin-top: 45px;
}

/* Ausgeschieden Slider Anpassungen für employees.php */
#editEmployeeModal .retired-slider {
    margin-top: 30px;
    margin-bottom: 5px;
}

#editEmployeeModal .retired-slider span {
    margin-top: 0;
    margin-bottom: 5px;
}

#editEmployeeModal .retired-slider .slideThree {
    margin-top: 10px;
}

#editShiftModal .slider-label span {
    margin-top: 55px;
}

/* Status Badges für Mitarbeiter */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.status-active {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge.status-retired {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-badge i {
    font-size: 14px;
}



/* Button Styles - CMS Standard */
.btn-import {
    width: 100%;
    padding: 10px 16px;
    background: var(--drk-red);
    color: white;
    border: 1px solid var(--drk-red);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-import:hover {
    background: var(--drk-red-dark);
    border-color: var(--drk-red-dark);
    transform: translateY(-1px);
}

/* Export Button */
.btn-export {
    width: 100%;
    padding: 10px 16px;
    background: var(--drk-red);
    color: white;
    border: 1px solid var(--drk-red);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-export:hover {
    background: var(--drk-red-dark);
    border-color: var(--drk-red-dark);
    transform: translateY(-1px);
}

/* Page Header Spacing - Alle Seiten - Höhere Spezifität */
.content-wrapper .page-header {
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.content-wrapper .page-header h1 {
    margin-bottom: 10px !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.content-wrapper .page-header p {
    margin: 0 !important;
    color: var(--text-secondary) !important;
    font-size: 16px !important;
}

/* Widget Header Spacing - Alle Widgets - Höhere Spezifität */
.widget .widget-header {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.widget .widget-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* Content Spacing - Allgemein - Höhere Spezifität */
.main-content .content-wrapper {
    padding-top: 20px !important;
}

.profile-container .profile-content {
    margin-top: 20px !important;
}

/* Employee Modal - Breiter */

#editEmployeeModal .modal-content {
    max-width: 900px;
    width: 90%;
    max-height: 95vh;
    overflow: visible;
    margin-top: 8% !important;
}

#editEmployeeModal .modal-footer {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 20px !important;
    border-top: 1px solid var(--border-color) !important;
    background: var(--bg-secondary) !important;
    border-radius: 0 0 12px 12px !important;
}

#editEmployeeModal .modal-footer .btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Modal-Buttons im Employee-Modal weiter nach oben */
#editEmployeeModal .modal-buttons {
    margin-top: -100px !important;
    position: relative !important;
}

/* Step Indicator */
.step-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.step.active {
    opacity: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background-color: var(--drk-red);
    color: white;
}

.step-label {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: var(--text-color);
}

.step-content {
    min-height: 300px;
}

/* Chat Search */
.chat-search-container {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

.chat-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.chat-search-box:focus-within {
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.chat-search-box i {
    color: var(--text-muted);
    margin-right: 8px;
    font-size: 16px;
}

.chat-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    padding: 0;
}

.chat-search-box input::placeholder {
    color: var(--text-muted);
}

.chat-search-box button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.chat-search-box button:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}

/* Employee Name Cell */
.users-table td.employee-name-cell {
    text-align: left !important;
    vertical-align: middle !important;
    padding-left: 15px !important;
}

.users-table .employee-name-cell .user-info {
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}

.users-table .employee-name-cell .user-name {
    font-size: 16px !important;
    font-weight: 500;
    color: var(--text-color);
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force left alignment for employee names */
.users-table tbody tr td.employee-name-cell * {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Employee table hover effect */
.users-table tbody tr:hover {
    background-color: var(--hover-bg-color) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.users-table tbody tr:hover td {
    border-color: var(--border-color-hover);
}

/* Employee Avatar */
.employee-avatar-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;
}

.employee-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}


/* Import Alert Messages */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert i {
    font-size: 16px;
}

.container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-wrapper {
    background: transparent;
    border-radius: 8px;
    padding: 5px;
    margin: 0 auto 20px auto;
    width: 100%;
    max-width: none;
    border: none;
    box-shadow: none;
    flex: 1;
}

.page-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.page-header h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 300;
    color: var(--text-primary);
}

.page-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
}

/* Datumsleiste */
.date-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0 0 20px 0;
    padding: 2px 20px;
    background-color: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow);
    border: 1px solid var(--border-color);
}

.date-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.date-nav-btn:hover {
    background-color: var(--drk-red);
    color: white;
    border-color: var(--drk-red);
}

.date-nav-btn i {
    font-size: 18px;
}

.date-picker-container {
    position: relative;
}

.date-picker {
    padding: 12px 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
    text-align: center;
}

/* Datepicker Icon Styling */
.date-picker::-webkit-calendar-picker-indicator {
    filter: invert(0);
    cursor: pointer;
}

[data-theme="dark"] .date-picker::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.date-picker:hover {
    border-color: var(--drk-red);
}

/* Widgets */
.widgets-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.widget {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px var(--shadow);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--shadow);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.widget-header i {
    font-size: 24px;
    color: var(--drk-red);
}

.widget-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.widget-content {
    text-align: center;
}

/* Spezielle Behandlung für Benutzer-Widget */
.widget:has(.widget-users-list) .widget-content {
    text-align: left;
}

.widget-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--drk-red);
    margin-bottom: 5px;
}

.widget-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.widget-users-list {
    margin-top: 0;
    max-height: 120px;
    overflow-y: auto;
}

.user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 6px;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.user-card:hover {
    background-color: var(--bg-primary);
    border-color: var(--drk-red);
}

.user-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

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

.user-actions i {
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px;
    border-radius: 4px;
}

.user-actions i:hover {
    color: var(--drk-red);
    background-color: var(--bg-secondary);
    transform: scale(1.1);
}

.user-item.no-users {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 12px;
}

/* Benutzerverwaltung */
.users-container {
    background-color: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* User Search Styles */
.user-search-form {
    position: relative;
    height: 25px;
    display: inline-block;
    margin-left: 30px;
}

.user-search-input {
    height: 25px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    border: none;
    border-bottom: 2px solid transparent;
    outline: none;
    color: var(--text-primary);
    background: transparent;
    padding: 8px 45px 8px 12px;
    width: 120px;
    position: absolute;
    top: -5px;
    left: 0; /* Nach links positioniert */
    z-index: 3;
    transition: width 0.4s cubic-bezier(0.000, 0.795, 0.000, 1.000), border-bottom-color 0.4s ease;
    cursor: pointer;
    border-radius: 0;
}

.user-search-input:focus {
    width: 250px;
    z-index: 1;
    border-bottom-color: var(--drk-red-dark);
    cursor: text;
}

.user-search-input:focus:hover {
    border-bottom-color: var(--drk-red);
}

.user-search-submit {
    height: 25px;
    width: 25px;
    color: var(--text-primary);
    background: var(--accent-color);
    border: none;
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.4s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-search-submit:hover {
    opacity: 1;
}

.user-search-submit i {
    font-size: 18px;
}

.user-search-clear {
    height: 25px;
    width: 25px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.4s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-search-clear:hover {
    opacity: 1;
    color: var(--text-primary);
}

.user-search-clear i {
    font-size: 14px;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    margin-top: 5px;
}

.search-results.show {
    display: block;
}

.search-result-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

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

.search-result-item:hover {
    background: var(--bg-secondary);
}

.search-result-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.search-result-details {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 15px;
}

.search-result-role {
    background: var(--accent-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.search-result-status {
    font-size: 11px;
}

.search-result-status.active {
    color: #10b981;
}

.search-result-status.inactive {
    color: #ef4444;
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* Creator Badge Styles */
.creator-badge {
    display: inline-block;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.creator-badge.system {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Profile Card Modal Styles */
.profile-card {
    width: 100%;
    min-height: 700px;
    margin: 8% auto 0;
    box-shadow: 0px 8px 60px -10px rgba(13,28,39,0.6);
    background: var(--bg-primary);
    border-radius: 12px;
    max-width: 700px;
    position: relative;
    border: 1px solid var(--border-color);
    z-index: 1001;
}

.profile-card.active .profile-card-form {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .1s;
}

.profile-card-form {
    transform: scale(.8);
    transition: all .3s;
}

.profile-card.active .profile-card-form {
    transform: none;
    transition-delay: .1s;
}

.profile-card__img {
    width: 150px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(5%);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 4;
    box-shadow: 0px 5px 50px 0px var(--accent-color), 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}

.profile-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-card__cnt {
    margin-top: 50px;
    text-align: center;
    padding: 0 20px;
    padding-bottom: 20px;
    transition: all .3s;
}

.profile-card__name {
    font-weight: 700;
    font-size: 24px;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.profile-card__txt {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.profile-card-form {
    box-shadow: 0 4px 30px rgba(15, 22, 56, 0.35);
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    background: var(--bg-primary);
    border-radius: 10px;
    padding: 35px;
    transform: scale(.8);
    position: relative;
    z-index: 3;
    transition: all .3s;
    opacity: 0;
    pointer-events: none;
}

.profile-card-form__bottom {
    justify-content: space-between;
    display: flex;
    gap: 15px;
}

.profile-card__button {
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 25px;
    min-width: 120px;
    border-radius: 6px;
    min-height: 40px;
    color: #fff;
    cursor: pointer;
    backface-visibility: hidden;
    transition: all .3s;
    flex: 1;
}

.profile-card__button:focus {
    outline: none;
}

.profile-card__button.button--blue {
    background: var(--drk-red);
    box-shadow: 0px 4px 30px rgba(211, 47, 47, 0.4);
}

.profile-card__button.button--blue:hover {
    box-shadow: 0px 7px 30px rgba(211, 47, 47, 0.75);
    transform: translateY(-2px);
}

.profile-card__button.button--gray {
    box-shadow: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.profile-card__button.button--gray:hover {
    background: var(--border-color);
}

.profile-card__overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: auto;
    opacity: 0;
    background: rgba(0, 0, 0, 0.432);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    transition: all .3s;
}

.users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.users-actions {
    display: flex;
    gap: 10px;
}

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

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

.stat-item strong {
    color: var(--drk-red);
    font-weight: 600;
}

.users-table-container {
    overflow-x: auto;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th {
    background-color: var(--bg-secondary);
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.users-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.user-row:hover {
    background-color: var(--bg-secondary);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-fullname {
    font-weight: 500;
}

.user-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.user-badge.admin {
    background-color: var(--drk-red);
    color: white;
}

.role-badge {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.role-badge.role-admin {
    background-color: var(--drk-red);
    color: white;
}

.role-badge.role-editor {
    background-color: #f59e0b;
    color: white;
}

.role-badge.role-user {
    background-color: var(--text-secondary);
    color: white;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active {
    background-color: #10b981;
    color: white;
}

.status-badge.inactive {
    background-color: #ef4444;
    color: white;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

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

.btn-icon:hover {
    background-color: var(--drk-red);
    color: white;
    border-color: var(--drk-red);
}

.btn-icon.danger:hover {
    background-color: #ef4444;
    border-color: #ef4444;
}

.no-users {
    text-align: center;
    padding: 40px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 48px;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 16px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

.modal-container {
    background-color: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    border-radius: 12px 12px 0 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.modal-form {
    padding: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 20px;
}

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

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.form-group input:hover,
.form-group select:hover {
    border-color: var(--drk-red);
}

.password-match {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    min-height: 16px;
}

.password-match.match {
    color: #10b981;
}

.password-match.no-match {
    color: #ef4444;
}

.password-match.empty {
    color: var(--text-secondary);
}

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

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.dashboard-card {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.card-header h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

.card-content p {
    margin: 0 0 15px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Admin Grid */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.admin-card {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px var(--shadow);
    transition: all 0.3s ease;
}

/* Footer */
.main-footer {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 20px 0;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.footer-copyright {
    text-align: center;
    font-size: 14px;
}

.footer-copyright p {
    margin: 5px 0;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 15px;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .content-wrapper {
        padding: 20px;
    }
    
    .dashboard-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }
    
    .slide-navigation {
        width: 280px;
        right: -280px;
    }
}

/* Uhr-Styling */
#timedate {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.2;
}

#timedate a {
    color: var(--text-secondary);
    text-decoration: none;
}

/* Chat System Styles */
.navbar-chat {
    margin-right: 20px;
}

.chat-icon-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 40px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.chat-icon-btn:hover {
    color: var(--drk-red);
    background: var(--bg-secondary);
}

.chat-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--drk-red);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: 600;
    min-width: 9px;
    text-align: center;
    line-height: 1.2;
}

.chat-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px;
    height: 800px;
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    z-index: 2000;
    display: flex;
    overflow: hidden;
}

.people-list {
    width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.people-list .list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

.people-list .list li {
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    position: relative;
}

.people-list .list li:hover {
    background: var(--bg-primary);
}

.people-list .list li.active {
    background: var(--drk-red);
    color: white;
}

.people-list .list li img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.people-list .list li .about {
    flex: 1;
    min-width: 0;
}

.people-list .list li .name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 2px;
}

.people-list .list li.active .name {
    color: white;
}

.people-list .list li .status {
    font-size: 12px;
    color: var(--text-secondary);
}

.people-list .list li.active .status {
    color: rgba(255, 255, 255, 0.8);
}

.people-list .list li .status i {
    margin-right: 5px;
}

.people-list .list li .status i.online {
    color: #10b981; /* Grün für online */
}

.people-list .list li .status i.offline {
    color: #ef4444; /* Rot für offline */
}

/* Online-Status Text auch grün färben */
.people-list .list li .status:has(i.online) {
    color: #10b981;
}

/* Fallback für Browser ohne :has() Support */
.people-list .list li .status.online-text {
    color: #10b981;
}

.people-list .list li .status.offline-text {
    color: var(--text-secondary);
}

.people-list .list li.inactive {
    opacity: 0.6;
}

.people-list .list li.inactive .name {
    color: var(--text-secondary);
}

.people-list .list li.inactive .status {
    color: var(--text-secondary);
}

.chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.chat-header-info {
    display: flex;
    align-items: center;
}

.chat-header-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.chat-header-details {
    flex: 1;
}

.chat-header-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 2px;
}

.chat-header-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.chat-close-btn:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-history li {
    margin-bottom: 10px;
}

.chat-history li.clearfix {
    clear: both;
}

.chat-history li .message-data {
    margin-bottom: 15px;
}

.chat-history li .message-data-time {
    color: var(--text-secondary);
    font-size: 12px;
    padding-left: 6px;
}

.chat-history li .message {
    color: var(--text-primary);
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    margin-bottom: 30px;
    width: 90%;
    position: relative;
}

.chat-history li .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: var(--bg-secondary);
    border-width: 10px;
    margin-left: -10px;
}

.chat-history li.other .message:after {
    border-bottom-color: var(--bg-secondary);
    left: 93%;
}

.chat-history li .message-data-name {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
}

.chat-history li .message-data-time {
    color: var(--text-secondary);
    font-size: 12px;
    padding-left: 6px;
}

.chat-history li.other .message-data {
    text-align: right;
}

.chat-history li.other .message {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.chat-history li.you .message {
    background: var(--drk-red);
    color: white;
    margin-left: auto;
}

.chat-history li.you .message-time-right {
    color: rgba(255, 255, 255, 0.8);
}

.chat-history li.you .message:after {
    border-bottom-color: var(--drk-red);
    left: 7%;
}

.chat-message {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-message textarea {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    resize: none;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.chat-message textarea:focus {
    border-color: var(--drk-red);
}

.chat-message button {
    background: var(--drk-red);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.chat-message button:hover {
    background: var(--drk-red-dark);
    transform: scale(1.05);
}

/* ===== PASSWORD EXPIRY WARNINGS ===== */
.password-warning-banner {
    background: linear-gradient(135deg, #fef3cd 0%, #fecaca 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.password-warning-banner.warning-critical {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.password-warning-banner .warning-icon {
    font-size: 24px;
    color: #f59e0b;
    flex-shrink: 0;
}

.password-warning-banner.warning-critical .warning-icon {
    color: #dc2626;
}

.password-warning-banner .warning-content {
    flex: 1;
}

.password-warning-banner .warning-title {
    font-weight: 600;
    color: #92400e;
    margin: 0 0 5px 0;
    font-size: 16px;
}

.password-warning-banner.warning-critical .warning-title {
    color: #dc2626;
}

.password-warning-banner .warning-message {
    color: #92400e;
    margin: 0;
    font-size: 14px;
}

.password-warning-banner.warning-critical .warning-message {
    color: #dc2626;
}

.password-warning-banner .warning-action {
    flex-shrink: 0;
}

.password-warning-banner .btn-warning {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease;
}

.password-warning-banner .btn-warning:hover {
    background: #d97706;
}

.password-warning-banner.warning-critical .btn-warning {
    background: #dc2626;
}

.password-warning-banner.warning-critical .btn-warning:hover {
    background: #b91c1c;
}

.password-expiry-info {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 15px 0;
}

.password-expiry-info .info-title {
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 8px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.password-expiry-info .info-text {
    color: #1e40af;
    margin: 0;
    font-size: 13px;
}

.password-expiry-info .days-remaining {
    font-weight: bold;
    font-size: 16px;
}

.password-expiry-info .days-remaining.critical {
    color: #dc2626;
}

.password-expiry-info .days-remaining.warning {
    color: #f59e0b;
}

.password-expiry-info .days-remaining.ok {
    color: #059669;
}

/* ===== ADMIN PASSWORD MANAGEMENT ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card.stat-danger {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.stat-card.stat-warning {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.stat-card.stat-info {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.stat-icon {
    font-size: 32px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.stat-card.stat-danger .stat-icon {
    color: #dc2626;
}

.stat-card.stat-warning .stat-icon {
    color: #f59e0b;
}

.stat-card.stat-info .stat-icon {
    color: #3b82f6;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
}

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

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-info strong {
    font-weight: 600;
    color: var(--text-primary);
}

.user-info small {
    color: var(--text-secondary);
    font-size: 12px;
}

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

.status-badge.status-expired {
    background: #fecaca;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.status-badge.status-critical {
    background: #fef3cd;
    color: #f59e0b;
    border: 1px solid #fde68a;
}

.status-badge.status-warning {
    background: #dbeafe;
    color: #3b82f6;
    border: 1px solid #93c5fd;
}

.status-badge.status-ok {
    background: #d1fae5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.days-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    min-width: 30px;
    text-align: center;
}

.days-badge.status-expired {
    background: #dc2626;
    color: white;
}

.days-badge.status-critical {
    background: #f59e0b;
    color: white;
}

.days-badge.status-warning {
    background: #3b82f6;
    color: white;
}

.days-badge.status-ok {
    background: #059669;
    color: white;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.action-buttons .btn {
    padding: 6px 10px;
    font-size: 12px;
    min-width: auto;
}

.card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ===== ABMELDUNGEN FORM ===== */
.abmeldung-form {
    max-width: 800px;
    margin: 0 auto;
}

.abmeldung-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.abmeldung-form .form-group {
    margin-bottom: 20px;
}

.abmeldung-form .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
}

.abmeldung-form .form-group input,
.abmeldung-form .form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.abmeldung-form .form-group input:focus,
.abmeldung-form .form-group select:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    background: #ffffff;
}

.abmeldung-form .form-group input:hover,
.abmeldung-form .form-group select:hover {
    border-color: #9ca3af;
}

.abmeldung-form .form-group input[readonly] {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

.abmeldung-form .form-group select {
    cursor: pointer;
}

.abmeldung-form .form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.abmeldung-form .form-actions .btn {
    min-width: 150px;
}

/* Dark Theme Support für Abmeldungen */
@media (prefers-color-scheme: dark) {
    .abmeldung-form .form-group input,
    .abmeldung-form .form-group select {
        border-color: #4b5563;
        background: #374151;
        color: #f9fafb;
    }
    
    .abmeldung-form .form-group input:focus,
    .abmeldung-form .form-group select:focus {
        background: #374151;
        border-color: var(--drk-red);
    }
    
    .abmeldung-form .form-group input:hover,
    .abmeldung-form .form-group select:hover {
        border-color: #6b7280;
    }
    
    .abmeldung-form .form-group input[readonly] {
        background: #1f2937;
        color: #9ca3af;
        border-color: #374151;
    }
}

/* Responsive Design für Abmeldungen */
@media (max-width: 768px) {
    .abmeldung-form .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .abmeldung-form .form-actions {
        flex-direction: column;
    }
    
    .abmeldung-form .form-actions .btn {
        width: 100%;
        min-width: auto;
    }
}

.chat-message button:disabled {
    background: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
}

/* Responsive Chat */
@media (max-width: 768px) {
    .chat-container {
        width: 95%;
        height: 90%;
        top: 5%;
        left: 2.5%;
        transform: none;
    }
    
    .people-list {
        width: 200px;
    }
}

/* Chat Overlay */
.chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.247);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1999;
    display: none;
}

.chat-overlay.active {
    display: block;
}

.chat-container {
    z-index: 2000;
}

.message-time-only {
    color: var(--text-secondary);
    font-size: 11px;
    margin-bottom: 5px;
    text-align: center;
    opacity: 0.7;
}

.message-time-left {
    color: var(--text-secondary);
    font-size: 11px;
    margin-bottom: 5px;
    text-align: left;
    opacity: 0.7;
    padding-left: 10px;
}

.message-time-right {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 8px;
    text-align: right;
    opacity: 0.7;
}

.message-time-left {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 8px;
    text-align: right;
    opacity: 0.7;
}

.message-content {
    margin-bottom: 0;
}

.message-sender {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    opacity: 0.8;
}

.message-header-left {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-align: left;
    opacity: 0.7;
    padding-left: 10px;
    display: block;
}

.message-header-right {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-align: right;
    opacity: 0.7;
    padding-right: 10px;
    display: block;
}

/* Date Input Styling */
.date-input {
    width: 120px;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    text-align: center;
    transition: all 0.2s ease;
}

.date-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.date-input::placeholder {
    color: var(--text-muted);
    font-size: 12px;
}

.date-input:invalid {
    border-color: var(--error-color);
}

.date-input:valid {
    border-color: var(--success-color);
}

/* Heute Button Styling */
.date-today-btn {
    background-color: var(--drk-red) !important;
    color: white !important;
    border-color: var(--drk-red) !important;
    height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 60px !important;
}

.date-today-btn:hover {
    background-color: var(--drk-red-dark) !important;
    border-color: var(--drk-red-dark) !important;
    transform: scale(1.05);
}

/* Standort-Buttons Styling */
.location-buttons {
    display: flex;
    gap: 8px;
    margin-left: 20px;
}

.location-btn {
    padding: 8px 12px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--drk-red);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    text-align: center;
}

.location-btn:hover {
    background-color: var(--drk-red);
    color: white;
    transform: translateY(-1px);
}

.location-btn.active {
    background-color: var(--drk-red);
    color: white;
    border-color: var(--drk-red-dark);
}

/* ===== AUSFALLMANAGEMENT CONTAINER ===== */
.ausfallmanagement-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.container-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ausfall-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px var(--shadow);
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 300px;
}

.ausfall-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--shadow);
}

.container-title {
    background: var(--bg-secondary);
    padding: 5px 20px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.container-content {
    padding: 20px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* Responsive Design für Container */
@media (max-width: 1200px) {
    .container-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container-row {
        grid-template-columns: 1fr;
    }
    
    .ausfall-container {
        min-height: 250px;
    }
    
    .container-content {
        min-height: 200px;
    }
}

/* ===== FX-MITARBEITER LEISTE ===== */
.fx-mitarbeiter-leiste {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    padding: 2px 20px;
    background-color: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow);
    border: 1px solid var(--border-color);
}

.fx-mitarbeiter-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 12px 0;
    flex-shrink: 0;
}

.fx-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.fx-icon-container:hover {
    background-color: var(--drk-red);
    color: white;
    border-color: var(--drk-red);
}

.fx-icon-container i {
    font-size: 20px;
}

.fx-search-container {
    position: relative;
    flex: 1;
    max-width: 300px;
}

/* ===== FX-CONTAINER ROW ===== */
.fx-container-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.fx-item-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px var(--shadow);
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 200px;
}

.fx-item-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--shadow);
}

.fx-item-title {
    background: var(--bg-secondary);
    padding: 5px 20px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.fx-item-content {
    padding: 20px;
    min-height: 150px;
    display: flex;
    flex-direction: column; /* Immer untereinander anordnen */
    align-items: stretch;    /* Volle Breite nutzen */
    justify-content: flex-start;
}

/* Responsive Design für FX-Container */
@media (max-width: 1200px) {
    .fx-container-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .fx-container-row {
        grid-template-columns: 1fr;
    }
    
    .fx-item-container {
        min-height: 150px;
    }
    
    .fx-item-content {
        min-height: 100px;
    }
}

/* ===== ACCORDION STYLING ===== */
.accordion {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.accordion .inner {
    padding-left: 1em;
    overflow: hidden;
    display: none;
}


.accordion li {
    margin: 0.5em 0;
}

.accordion a.toggle {
    width: 100%;
    display: block;
    background: #313131;
    color: white;
    padding: 0.75em;
    border-radius: 0.15em;
    border: 1px solid var(--border-color);
    transition: background 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

.accordion a.toggle:hover {
    background: var(--drk-red-dark);
}

.accordion .inner li {
    padding: 0.5em 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.accordion .inner li:last-child {
    border-bottom: none;
}

/* Container-Content für alle Container */
.ausfall-container .container-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 15px;
}

.ausfall-container .container-content .accordion {
    width: 90%;
    max-width: 500px;
}

.accordion-rechteck {
    margin-top: 10px;
}

/* ===== KREIS-RECHTECK STYLING ===== */
.kreis-rechteck {
    width: 350px;
    height: 40px;
    border: 2px dashed #afaaab93;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.kreis-rechteck:hover {
    background: rgba(220, 38, 38, 0.05);
    border-color: var(--drk-red-dark);
    transform: scale(1.02);
}

.kreis-rechteck i {
    font-size: 32px;
    color: #666666; /* Dunkelgrau für helles Theme */
    transition: all 0.3s ease;
}

/* Im dunklen Theme hellgrau */
[data-theme="dark"] .kreis-rechteck i {
    color: #ffffff6e;
}

.kreis-rechteck:hover i {
    color: #aa1625b9;
    transform: scale(1.1);
}

/* ===== DIENSTE-MODAL ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-container {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 12px 12px 0 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

#editEmployeeModal .modal-body {
    min-height: 60vh;
    padding: 20px;
    overflow: visible;
}

#editEmployeeModal form {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
}

#editEmployeeModal .modal-buttons {
    margin-top: auto;
    margin-bottom: 20px;
}

.modal-footer {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
    padding: 20px !important;
    border-top: 1px solid var(--border-color) !important;
    background: var(--bg-secondary) !important;
    border-radius: 0 0 12px 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-footer .btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.dienste-content {
    min-height: 200px;
    color: var(--text-primary);
}

/* Dienste-Suche */
.dienste-search-container {
    margin-bottom: 20px;
}

.dienste-search-form {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.dienste-search-form:focus-within {
    border-color: var(--drk-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.dienste-search-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.dienste-search-input::placeholder {
    color: var(--text-secondary);
}

.dienste-search-submit,
.dienste-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dienste-search-submit:hover,
.dienste-search-clear:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dienste-search-submit i,
.dienste-search-clear i {
    font-size: 16px;
}

/* Dienste-Dropdown */
.dienste-dropdown {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    width: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    max-height: 300px;
    overflow-y: auto;
}

.dienste-search-container {
    position: relative;
}

.dienste-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
}

.dienste-loading i {
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dienste-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dienste-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.dienste-item:hover {
    background: var(--bg-secondary);
    border-color: var(--drk-red);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dienste-item.selected {
    background: rgba(220, 38, 38, 0.1);
    border-color: var(--drk-red);
}

.dienste-item-info {
    flex: 1;
}

.dienste-item-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dienste-item-details {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    align-items: center;
}

.dienste-item-details span:nth-child(even) {
    color: var(--text-tertiary);
    font-weight: bold;
}

.dienste-item-badges {
    display: flex;
    gap: 6px;
}

.dienste-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.dienste-badge.c1 {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.dienste-badge.nfs {
    background: rgba(220, 38, 38, 0.1);
    color: var(--drk-red);
}

.dienste-no-results {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Ausgewählter Dienst */
.dienste-selected {
    margin-top: 15px;
}

.selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid var(--drk-red);
    border-radius: 8px;
}

.selected-info {
    flex: 1;
}

.selected-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

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

.selected-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.selected-remove:hover {
    background: var(--drk-red);
    color: white;
}

/* Dienste-Formular */
.dienste-form {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 20px;
}

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

.form-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* ===== ACCORDION STYLES ===== */
.accordion {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.accordion li {
    list-style: none;
}

.accordion .inner {
    padding-left: 1em;
    overflow: hidden;
    display: none;
    background-color: transparent;
    border-radius: 0 0 10px 10px;
}

.accordion .inner.show {
    display: block;
}

.accordion li {
    margin: 0.5em 0;
}

.accordion a.toggle {
    width: 100%;
    display: block;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.75em;
    border-radius: 10px;
    transition: background 0.3s ease;
    border: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 500;
}

.accordion a.toggle:hover {
    background: var(--bg-primary);
    border-color: var(--drk-red);
}

.accordion a.toggle.has-missing-employees {
    border-color: var(--drk-red);
    border-width: 1px;
}

/* Accordion Header Layout */
.accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    position: relative;
}

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

.badge-container {
    display: flex;
    gap: 6px;
}

.action-icons {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    margin-left: auto;
}

.accordion a.toggle:hover .action-icons {
    opacity: 1;
}

.action-icon {
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.edit-icon {
    color: var(--text-secondary);
}

.edit-icon:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.delete-icon {
    color: var(--text-secondary);
}

.delete-icon:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.xbox-icon {
    color: var(--text-secondary);
}

.xbox-icon:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.badge {
    padding: 2px 4px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.8;
}

.badge-missing {
    background-color: rgba(251, 191, 36, 0.8);
    border: 2px solid #967405;
    color: #1d1c1c;
}

.badge-nfs {
    background-color: rgba(220, 38, 38, 0.8);
    border: 2px solid #960505;
    color: white;
}

.accordion .inner li {
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 13px;
    color: white;
}

.accordion .inner li:last-child {
    border-bottom: none;
}

/* Missing Employees Boxes */
.missing-employees-container {
    padding: 0.5em 0;
    text-align: center; /* zentriert Inhalte wie das Notes-Badge */
}

/* Notes Anzeige über den Kästchen */
.open-shift-notes {
    width: fit-content;
    margin: 6px auto 8px auto;
    font-size: 12px;
    display: inline-block;
    text-align: center;
    background: #dbeafe; /* hellblau */
    color: #1e40af; /* dunkler blau Text */
    border: 1px solid #93c5fd;
    padding: 4px 10px;
    border-radius: 999px; /* Badge/Pill */
}


.open-shift-notes-icon {
    color: #829ae9;
    font-size: 28px; /* etwas größer */
    margin-right: 8px;
    position: relative;
    top: 6px; /* leicht nach unten versetzt */
}

.missing-employees-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 90%;
    margin: 0 auto;
}

.missing-employee-box {
    width: 100%;
    height: 40px;
    border: 2px dashed #afaaab93;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
}

.missing-employee-box:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: var(--drk-red);
}

.missing-employee-box i {
    color: var(--drk-red);
    font-size: 18px;
}

/* Accordion-Container Layout */
.ausfall-container .container-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
    gap: 15px;
}

.ausfall-container .accordion {
    width: 100%;
    max-width: 400px;
    order: 1; /* Accordion kommt zuerst */
}

.ausfall-container .kreis-rechteck {
    order: 2; /* Gestricheltes Feld kommt nach den Accordions */
}

/* FX-Mitarbeiter Modal Styles */
.fx-employee-search-container {
    margin-bottom: 20px;
}

.fx-employee-search-form {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.fx-employee-search-form:focus-within {
    border-color: var(--drk-red);
}

.fx-employee-search-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.fx-employee-search-input::placeholder {
    color: var(--text-muted);
}

.fx-employee-search-submit,
.fx-employee-search-clear {
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-employee-search-submit:hover,
.fx-employee-search-clear:hover {
    color: var(--drk-red);
}

.fx-employee-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 29%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.fx-employee-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fx-employee-loading i {
    animation: spin 1s linear infinite;
}

.fx-employee-list {
    max-height: 250px;
    overflow-y: auto;
}

.fx-employee-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fx-employee-item:hover {
    background-color: var(--hover-bg-color);
}

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

.fx-employee-item-info {
    flex: 1;
}

.fx-employee-item-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.fx-employee-item-details {
    font-size: 12px;
    color: var(--text-secondary);
}

.fx-employee-item-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.fx-employee-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.fx-employee-badge.qualification {
    background-color: var(--drk-red);
    color: white;
}

.fx-employee-badge.c1 {
    background-color: #10b981;
    color: white;
}

.fx-employee-no-results {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.fx-employee-selected {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.fx-selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fx-selected-info {
    flex: 1;
}

.fx-selected-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.fx-selected-details {
    font-size: 12px;
    color: var(--text-secondary);
}

.fx-selected-remove {
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.fx-selected-remove:hover {
    background: var(--drk-red);
    color: white;
}

.fx-type-selection {
    margin-top: 16px;
}

.fx-type-selection .form-group {
    margin-bottom: 0;
}

.fx-type-selection .form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.fx-type-selection .form-select:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

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

.fx-type-selection .form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.fx-type-selection .form-input:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.fx-type-selection .form-input::placeholder {
    color: var(--text-muted);
}

/* Scrollbar-Styling für FX-Modal */
.fx-employee-dropdown::-webkit-scrollbar,
.fx-employee-list::-webkit-scrollbar {
    width: 6px;
}

.fx-employee-dropdown::-webkit-scrollbar-track,
.fx-employee-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.fx-employee-dropdown::-webkit-scrollbar-thumb,
.fx-employee-list::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.fx-employee-dropdown::-webkit-scrollbar-thumb:hover,
.fx-employee-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Dienste-Accordion Styling */
.dienste-accordion {
    margin-top: 10px;
    width: 100%;
    min-width: 100%;
}

.dienste-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 100%;
}

.dienste-accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    min-width: 100%;
}

.dienste-accordion-item:hover {
    border-color: var(--border-color-hover);
    box-shadow: 0 2px 8px var(--shadow);
}

.dienste-accordion-header {
    padding: 8px 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.dienste-accordion-header:hover {
    background: var(--hover-bg-color);
}

.dienste-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.dienste-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.dienste-header-badges {
    display: flex;
    gap: 6px;
}

.dienste-header-actions {
    display: flex;
    gap: 6px;
    margin-right: 8px;
}

.dienste-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
}

.dienste-action-btn i {
    font-size: 16px;
}

.dienste-action-btn:hover {
    background: var(--hover-bg-color);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.dienste-action-btn.edit-btn:hover {
    background: #3b82f6;
    color: white;
}

.dienste-action-btn.delete-btn:hover {
    background: #ef4444;
    color: white;
}

.dienste-action-btn.deactivate-btn:hover {
    background: #6b7280;
    color: white;
}

.dienste-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.dienste-badge.nfs {
    background: #dc2626;
    color: white;
}

.dienste-badge.missing {
    background: #f59e0b;
    color: white;
}

.accordion-icon {
    transition: transform 0.3s ease;
    color: var(--text-secondary);
    font-size: 16px;
}

.dienste-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--bg-card);
}

.dienste-accordion-item.open .dienste-accordion-content {
    max-height: 200px;
}

.dienste-details {
    padding: 12px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.dienste-info {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.dienste-info-compact {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

.dienste-slot {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.dienste-slot:last-child {
    margin-bottom: 0;
}

/* Mitarbeiter-Karten */
.employee-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--drk-red);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto 8px auto;
    position: relative;
    box-shadow: 0 2px 4px var(--shadow);
    max-width: 80%;
    width: 100%;
}

.employee-card:hover {
    border-color: var(--drk-red-dark);
    background: var(--hover-bg-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-strong);
}

.employee-card i {
    font-size: 18px;
    color: var(--drk-red);
    transition: color 0.3s ease;
}

.employee-card:hover i {
    color: var(--drk-red-dark);
}

.employee-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employee-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.employee-note {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

.employee-remove-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: #dc2626;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.employee-remove-btn:hover {
    background: #b91c1c;
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.employee-remove-btn i {
    font-size: 10px;
    color: white;
}

.dienste-badge.complete {
    background: #10b981;
    color: white;
}
.dienste-accordion-item.not-staffed {
    border: 1px solid #dc2626; /* Rot - nicht vollständig besetzt */
}

.dienste-accordion-item.partially-contacted {
    border: 1px solid #fbbf24; /* Gelb - besetzt aber nicht alle kontaktiert */
}

.dienste-accordion-item.fully-contacted {
    border: 1px solid #10b981; /* Grün - besetzt und alle kontaktiert */
}

.employee-card.no-contact {
    border: 1px solid #fbbf24; /* Gelb - noch nicht kontaktiert */
}

.employee-card.contacted {
    border: 1px solid #10b981; /* Grün - bereits kontaktiert */
}
.fx-employee-assigned {
    opacity: 0.4;
    text-decoration: line-through;
    background-color: rgba(0, 0, 0, 0.05);
    border-left: 3px solid #dc2626;
}

.fx-employee-assigned .fx-employee-name {
    text-decoration: line-through;
    color: #6b7280;
}

.fx-employee-assigned .fx-employee-badges {
    opacity: 0.6;
}

.fx-employee-assigned .fx-employee-details {
    opacity: 0.6;
}
.employee-contact-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.employee-contact-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    opacity: 0.8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.employee-contact-btn:hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.employee-contact-btn.phone-btn {
    background: #10b981;
    color: white;
}

.employee-contact-btn.phone-btn:hover {
    background: #059669;
}

.employee-contact-btn.message-btn {
    background: #3b82f6;
    color: white;
}

.employee-contact-btn.message-btn:hover {
    background: #2563eb;
}

.employee-contact-btn i {
    font-size: 16px;
    color: white !important;
}

.employee-contact-btn:hover i {
    color: white !important;
}

.employee-contact-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #9ca3af !important;
}

.employee-contact-btn.disabled:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.employee-remove-btn i {
    font-size: 10px;
    color: white !important;
}

.employee-remove-btn:hover i {
    color: white !important;
}

.slot-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.slot-field:hover {
    border-color: var(--border-color-hover);
    background: var(--hover-bg-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--shadow);
}

.slot-field i {
    font-size: 18px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.slot-field:hover i {
    color: var(--border-color-hover);
}

.slot-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.placeholder-name {
    color: var(--text-primary);
    font-weight: 500;
}

.slot-note {
    color: var(--text-muted);
    font-style: italic;
    margin-left: 8px;
}

.dienste-notes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-primary);
}

.dienste-notes strong {
    color: var(--text-secondary);
    margin-right: 8px;
}

/* Bearbeiten-Modal Styling */
.dienste-info-display {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.dienste-info-display .form-group {
    margin-bottom: 12px;
}

.dienste-info-display .form-group:last-child {
    margin-bottom: 0;
}

.dienste-info-display label {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-size: 14px;
}

.info-display {
    color: var(--text-primary);
    font-size: 14px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-height: 20px;
}

/* Modal-Overlay für Bearbeiten-Modal */
#editDiensteModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

#editDiensteModal.active {
    display: flex;
}

/* Responsive Design für Bearbeiten-Modal */
@media (max-width: 768px) {
    .dienste-info-display {
        padding: 12px;
    }
    
    .info-display {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* Abgemeldete Dienste Styling */
.dienste-accordion-item.out-of-service {
    opacity: 0.7;
    background: #f8f9fa;
    border-color: #6c757d;
}

.dienste-accordion-item.out-of-service .dienste-name {
    color: #6c757d;
    text-decoration: line-through;
}

.dienste-badge.out-of-service {
    background: #6c757d;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* Dark Theme für abgemeldete Dienste */
[data-theme="dark"] .dienste-accordion-item.out-of-service {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .dienste-accordion-item.out-of-service .dienste-name {
    color: #a0aec0;
}
.fx-item-content .accordion {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none; /* Rahmen vom Gesamt-Container entfernen */
    border-radius: 0;
    background: transparent;
}

/* FX-Accordion Tab Styling */
.fx-item-content .tab {
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    overflow: hidden;
    margin-bottom: 5px;
}

.fx-item-content .tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.fx-item-content .tab__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.fx-item-content .tab input:checked ~ .tab__content {
    max-height: 200px;
}

.fx-item-content .tab input:checked ~ .tab__label::after {
    transform: rotate(180deg);
}

.fx-item-content .tab__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fx-item-content .tab__label:hover {
    background: var(--hover-bg-color);
}

.fx-item-content .tab__label::after {
    content: '▼';
    transition: transform 0.3s ease;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Dienste-Accordion Styles – identisch zu FX (CSS-only) */
.ausfall-container .container-content .accordion {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.ausfall-container .container-content .tab {
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    overflow: hidden;
    margin-bottom: 5px;
}

/* Dienste mit Notes: hellblaue Linie rechts */
.ausfall-container .container-content .tab.has-notes,
.ausfall-container ul .tab.has-notes {
    border-right: 6px solid #93c5fd; /* hellblau rechts als Linie */
}

/* Unvollständig besetzte Dienste: linke dicke rote Linie */
.ausfall-container .container-content .tab.not-staffed,
.ausfall-container ul .tab.not-staffed {
    border-left: 6px solid var(--drk-red);
}

.ausfall-container .container-content .tab.fully-staffed,
.ausfall-container ul .tab.fully-staffed {
    border-left: 6px solid #f59e0b; /* gelb */
}

/* Accordion-Styles für offene Schichten - Verstärkte Selektoren */
.ausfall-container .container-content .tab input,
.ausfall-container ul .tab input,
.ausfall-container .container-content .tab.fully-staffed input,
.ausfall-container ul .tab.fully-staffed input,
.ausfall-container .container-content .tab.not-staffed input,
.ausfall-container ul .tab.not-staffed input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.ausfall-container .container-content .tab__content,
.ausfall-container ul .tab__content,
.ausfall-container .container-content .tab.fully-staffed .tab__content,
.ausfall-container ul .tab.fully-staffed .tab__content,
.ausfall-container .container-content .tab.not-staffed .tab__content,
.ausfall-container ul .tab.not-staffed .tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s ease;
    background: var(--bg-secondary);
}

.ausfall-container .container-content .tab input:checked ~ .tab__content,
.ausfall-container ul .tab input:checked ~ .tab__content,
.ausfall-container .container-content .tab.fully-staffed input:checked ~ .tab__content,
.ausfall-container ul .tab.fully-staffed input:checked ~ .tab__content,
.ausfall-container .container-content .tab.not-staffed input:checked ~ .tab__content,
.ausfall-container ul .tab.not-staffed input:checked ~ .tab__content {
    max-height: 30rem;
    padding: 10px 0;
}

.ausfall-container .container-content .tab__label,
.ausfall-container ul .tab__label,
.ausfall-container .container-content .tab.fully-staffed .tab__label,
.ausfall-container ul .tab.fully-staffed .tab__label,
.ausfall-container .container-content .tab.not-staffed .tab__label,
.ausfall-container ul .tab.not-staffed .tab__label {
    display: flex;
    color: var(--text-primary);
    background: var(--bg-secondary);
    cursor: pointer;
    justify-content: space-between;
    padding: 5px 16px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.ausfall-container .container-content .tab__label:hover,
.ausfall-container ul .tab__label:hover,
.ausfall-container .container-content .tab.fully-staffed .tab__label:hover,
.ausfall-container ul .tab.fully-staffed .tab__label:hover,
.ausfall-container .container-content .tab.not-staffed .tab__label:hover,
.ausfall-container ul .tab.not-staffed .tab__label:hover {
    background: var(--bg-primary);
}

/* Action-Icons im Dienste-Header wieder auf Hover zeigen */
.ausfall-container .container-content .tab__label .action-icons,
.ausfall-container ul .tab__label .action-icons,
.ausfall-container .container-content .tab.fully-staffed .tab__label .action-icons,
.ausfall-container ul .tab.fully-staffed .tab__label .action-icons,
.ausfall-container .container-content .tab.not-staffed .tab__label .action-icons,
.ausfall-container ul .tab.not-staffed .tab__label .action-icons {
    opacity: 0;
}

.ausfall-container .container-content .tab__label:hover .action-icons,
.ausfall-container ul .tab__label:hover .action-icons,
.ausfall-container .container-content .tab.fully-staffed .tab__label:hover .action-icons,
.ausfall-container ul .tab.fully-staffed .tab__label:hover .action-icons,
.ausfall-container .container-content .tab.not-staffed .tab__label:hover .action-icons,
.ausfall-container ul .tab.not-staffed .tab__label:hover .action-icons {
    opacity: 1;
}

.no-missing-message {
    padding: 12px;
    text-align: center;
    color: var(--success-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-missing-message i {
    margin-right: 8px;
}

/* Container für Schicht-Inhalt */
.shift-content-container {
    text-align: center;
}

/* Container für Mitarbeiter-Karten und gestrichelte Boxen */
.employees-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 90%;
    margin: 0 auto;
    align-items: center;
}

/* Kleine Mitarbeiter-Karten */
.employee-card {
    width: 100%;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.employee-card:hover {
    background: var(--hover-bg-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.employee-card-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.employee-card-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.employee-card-qualification {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

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

.employee-card-remove {
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.employee-card-remove:hover {
    background: var(--danger-hover-color);
}


.fx-item-content .tab {
    position: relative;
    border: none; /* Ränder entfernt */
    border-radius: 8px;
    background: var(--bg-card);
    overflow: hidden;
    margin-bottom: 7px; /* Abstand unter jedem Item */
    box-shadow: 0 1px 3px var(--shadow);
}

/* Qualifikationslinien links (FX-Mitarbeiter) */
/* Badge-Farben nach Qualifikation statt Randfarben */
.fx-item-content .tab.qual-nfs .fx-badge.qualification {
    background-color: var(--drk-red);
    color: #fff;
    border: 1px solid var(--drk-red-dark);
}

.fx-item-content .tab.qual-rs .fx-badge.qualification,
.fx-item-content .tab.qual-nfsau .fx-badge.qualification {
    background-color: #2563eb; /* Blau */
    color: #fff;
    border: 1px solid #1e40af;
}

.fx-item-content .tab.qual-rh .fx-badge.qualification {
    background-color: #7c3aed; /* Violett */
    color: #fff;
    border: 1px solid #5b21b6;
}

.fx-item-content .tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.fx-item-content .tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s ease;
    background: var(--bg-secondary);
}

.fx-item-content .tab input:checked ~ .tab__content {
    max-height: 20rem; /* Erhöht für mehr Inhalt */
}

.fx-item-content .tab__label {
    display: flex;
    color: var(--text-primary);
    background: var(--bg-secondary);
    cursor: pointer;
    justify-content: space-between;
    padding: 12px 16px;
    transition: background-color 0.3s ease;
}

.fx-item-content .tab__label:hover {
    background: var(--bg-primary);
}


.fx-employee-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-right: 1em;
    position: relative;
}

/* FX-Mitarbeiter Löschen-Button */
.fx-delete-btn {
    background: #dc2626;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: 4px;
    font-size: 12px;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
}

.fx-delete-btn:hover {
    background: #ef4444;
}

.fx-delete-btn i {
    font-size: 12px;
}

/* Lösch-Icon CSS entfernt - wird woanders implementiert */

.fx-employee-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.fx-employee-name {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.fx-employee-notes {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 2px;
    font-style: italic;
    display: block;
    width: 100%;
}

.fx-employee-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.fx-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.fx-badge.qualification {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.fx-badge.c1 {
    background-color: #10b981;
    color: white;
}

.fx-badge.fx-stations {
    background: #dbeafe; /* hellblau */
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.fx-employee-details {
    padding: 16px;
}

.fx-employee-details .detail-item {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.fx-employee-details .detail-item:last-child {
    margin-bottom: 0;
}

/* Assign Modal Employee Search */
.assign-modal-container {
    max-height: 80vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
}

.assign-modal-container .modal-body {
    flex: 1;
    overflow-y: auto;
}

.assign-modal-container .modal-footer {
    margin-top: 0;
    flex-shrink: 0;
}

.employee-search-container {
    position: relative;
}

.employee-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.employee-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

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

.employee-item:hover {
    background-color: var(--hover-bg);
}

.employee-item.no-results {
    color: var(--text-muted);
    cursor: default;
}

.employee-item.no-results:hover {
    background-color: transparent;
}

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

.employee-name {
    font-weight: 500;
    color: var(--text-primary);
}

.employee-details {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.selected-employee {
    margin-top: 12px;
    padding: 12px;
    background-color: var(--success-bg);
    border: 1px solid var(--success-color);
    border-radius: 8px;
}

.selected-employee-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.selected-employee-name {
    font-weight: 500;
    color: var(--success-color);
}

.btn-remove-selection {
    background: none;
    border: none;
    color: var(--success-color);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-remove-selection:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.fx-employee-details .detail-item strong {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Farben für Aktionen im FX-Dropdown */
.fx-employee-actions .edit-fx-btn {
    background-color: #f59e0b; /* Gelb */
    border: 1px solid #d97706;
    color: #111827;
}
.fx-employee-actions .edit-fx-btn:hover {
    background-color: #d97706;
    border-color: #b45309;
}

.fx-employee-actions .delete-fx-btn {
    background-color: #dc2626; /* Rot */
    border: 1px solid #b91c1c;
    color: #fff;
}
.fx-employee-actions .delete-fx-btn:hover {
    background-color: #b91c1c;
    border-color: #991b1b;
}

/* Monatsnavigation für AFT Plan */
.month-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 2px 20px;
    background-color: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow);
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.month-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.month-nav-btn:hover {
    background-color: var(--drk-red);
    color: white;
    border-color: var(--drk-red);
}

.month-nav-btn i {
    font-size: 18px;
}

.month-display {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 120px;
    text-align: center;
    padding: 8px 12px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.month-display span {
    display: block;
}

/* Kalender-Tabelle für AFT Plan */
.calendar-container {
    background-color: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.calendar-table thead {
    background-color: var(--bg-secondary);
}

.calendar-table th {
    padding: 8px 6px;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    font-size: 13px;
}

.calendar-table th:last-child {
    border-right: none;
}

.calendar-table td {
    padding: 6px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    vertical-align: middle;
}

.calendar-table td:last-child {
    border-right: none;
}

.calendar-table tbody tr:hover {
    background-color: var(--hover-bg-color);
}

.calendar-table tbody tr:hover .date-cell {
    background-color: var(--hover-bg-color);
}

/* Spalten-spezifische Styles */
.date-cell {
    width: 70px;
    text-align: center;
    font-weight: 500;
    background-color: var(--bg-secondary);
    padding: 6px 3px;
}

.date-cell .weekday {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
    font-weight: 400;
}

.date-cell .date {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.district-cell {
    width: 110px;
    text-align: center;
}

.night-cell {
    width: 100px;
    text-align: center;
    background-color: rgba(59, 130, 246, 0.1);
}

.info-cell {
    width: 120px;
    text-align: center;
}

.merged-district-cell {
    width: 330px; /* 110px * 3 */
    text-align: center;
}

.district-input,
.night-input,
.info-input {
    width: 80%;
    padding: 8px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.2s ease;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.district-input:placeholder-shown,
.night-input:placeholder-shown {
    border: 1px dashed rgba(251, 191, 36, 0.4);
    background-color: rgba(251, 191, 36, 0.05);
}

.district-input:focus,
.night-input:focus,
.info-input:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.district-input::placeholder,
.night-input::placeholder,
.info-input::placeholder {
    color: var(--text-muted);
    font-size: 12px;
}

.merged-input {
    width: 90%;
    padding: 8px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.2s ease;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.merged-input:placeholder-shown {
    border: 1px dashed rgba(251, 191, 36, 0.4);
    background-color: rgba(251, 191, 36, 0.05);
}

.merged-input:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.merged-input::placeholder {
    color: var(--text-muted);
    font-size: 12px;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--bg-card);
    margin: 5% auto;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

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

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    color: var(--text-muted);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px 24px;
}

.modal-body textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.2s ease;
}

.modal-body textarea:focus {
    outline: none;
    border-color: var(--drk-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.modal-body textarea::placeholder {
    color: var(--text-muted);
}

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

.btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

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

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

.btn-primary {
    background-color: var(--drk-red);
    color: white;
    border-color: var(--drk-red);
}

.btn-primary:hover {
    background-color: var(--drk-red-dark);
    border-color: var(--drk-red-dark);
}

/* Info-Feld Container und Delete-Button */
.info-field-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.info-field-container:hover .info-delete-btn {
    display: block !important;
}

/* Delete-Button nur anzeigen wenn Info-Feld Inhalt hat */
.info-input:not(:placeholder-shown) + .info-delete-btn {
    display: block !important;
}

.info-delete-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--drk-red);
    color: white;
    border: none;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
    z-index: 10;
}

.info-delete-btn:hover {
    background-color: var(--drk-red-dark);
    transform: translateY(-50%) scale(1.1);
}

/* Abmeldungen Container */
.abmeldungen-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.abmeldungen-left,
.abmeldungen-right {
    flex: 1;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    min-height: 400px;
}

.abmeldungen-left h2,
.abmeldungen-right h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
}

.abmeldungen-left p,
.abmeldungen-right p {
    color: var(--text-secondary);
    margin: 0;
}

/* Form-Elemente in Abmeldungen */
.abmeldungen-left .form-group {
    margin-bottom: 20px;
}

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

.abmeldungen-left .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.abmeldungen-left .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.abmeldungen-left .form-control::placeholder {
    color: var(--text-muted);
}

/* Inline Form-Elemente - Verbessertes Design */
.abmeldungen-left .form-group-inline {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.abmeldungen-left .form-group-inline:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.abmeldungen-left .form-label-inline {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
    min-width: fit-content;
    letter-spacing: 0.3px;
}

.abmeldungen-left .form-control-inline {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.abmeldungen-left .form-control-inline:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
    transform: translateY(-1px);
}

.abmeldungen-left .form-control-inline::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

/* Stylisches Form-Design für Abmeldungen */
.abmeldungen-left .form-group-styled {
    margin-bottom: 24px;
    position: relative;
}

.abmeldungen-left .form-label-styled {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.abmeldungen-left .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.abmeldungen-left .form-input-styled {
    width: 100%;
    padding: 16px 20px 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.abmeldungen-left .form-input-styled:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1), 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    background: var(--bg-primary);
}

.abmeldungen-left .form-input-styled::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

.abmeldungen-left .input-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.3s ease;
}

.abmeldungen-left .form-input-styled:focus + .input-icon {
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

/* Hover-Effekt für Input-Wrapper */
.abmeldungen-left .input-wrapper:hover .form-input-styled {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.abmeldungen-left .input-wrapper:hover .input-icon {
    color: var(--primary-color);
}

/* Datepicker-spezifisches Styling mit eigenem Icon */
.abmeldungen-left .datepicker-custom {
    color-scheme: light;
    padding-right: 50px;
    cursor: pointer;
}

/* Browser-Kalendersymbol komplett verstecken */
.abmeldungen-left .datepicker-custom::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

/* Unser eigenes Kalender-Icon */
.abmeldungen-left .datepicker-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1;
}

.abmeldungen-left .datepicker-custom:focus + .datepicker-icon {
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

/* Hover-Effekt für Datepicker */
.abmeldungen-left .input-wrapper:hover .datepicker-icon {
    color: var(--primary-color);
}

/* Dark Theme - Icon wird automatisch richtig dargestellt */
[data-theme="dark"] .abmeldungen-left .datepicker-custom {
    color-scheme: dark;
}

[data-theme="dark"] .abmeldungen-left .datepicker-icon {
    color: var(--text-muted);
}

[data-theme="dark"] .abmeldungen-left .datepicker-custom:focus + .datepicker-icon {
    color: var(--primary-color);
}

[data-theme="dark"] .abmeldungen-left .input-wrapper:hover .datepicker-icon {
    color: var(--primary-color);
}

/* Button Anpassungen für Abmeldungen */
.abmeldungen-left .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.abmeldungen-left .btn i {
    font-size: 16px;
}

/* Textvorlage Styling für Ausschreibungen */
.textvorlage-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.textvorlage-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.textvorlage-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.textvorlage-text {
    flex: 1;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.textvorlage-text pre {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.textvorlage-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.textvorlage-actions .btn {
    padding: 8px 16px;
    font-size: 12px;
    min-width: auto;
}

/* Fahrzeuge-Liste Styling */
.fahrzeuge-liste {
    margin-top: 20px;
}

.fahrzeuge-liste .no-data {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.fahrzeuge-liste .no-data i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.fahrzeuge-liste .no-data p {
    font-size: 16px;
    margin: 0;
}

/* Fahrzeug-Tabelle - Verbessertes Styling */
.fahrzeug-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.fahrzeug-tabelle tr {
    border: none;
}

.fahrzeug-tabelle td {
    padding: 0;
    vertical-align: middle;
}

/* Checkbox-Spalte */
.fahrzeug-checkbox-cell {
    width: 50px;
    text-align: center;
    padding-right: 16px;
}

.fahrzeug-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--drk-red);
    transform: scale(1.2);
}

/* Fahrzeug-Karte - CMS-konformes Design */
.fahrzeug-karte {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fahrzeug-karte:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Neue Inline-Darstellung - CMS-konform */
.fahrzeug-info-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fahrzeug-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.fahrzeug-callsign {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    margin: 0;
    border: 1px solid var(--border-color);
}

.fahrzeug-zeit {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    margin: 0;
    border: 1px solid var(--border-color);
    font-family: 'Courier New', monospace;
}

/* Lade-Animation für Button */
.btn i.ti-loader-2 {
    animation: spin 1s linear infinite;
}

@keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
}

/* Ausschreibungen - Kompakte Shift-Liste */
.shifts-compact {
    margin-top: 16px;
}

.date-group {
    margin-bottom: 24px;
}

.date-header {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.shifts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shift-item {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    transition: all 0.2s ease;
}

.shift-item:hover {
    border-color: var(--drk-red);
    box-shadow: 0 2px 4px var(--shadow);
}

.shift-checkbox-label {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    margin: 0;
}

.shift-checkbox {
    margin-right: 12px;
    transform: scale(1.2);
}

.shift-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shift-main-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.shift-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1em;
}

.shift-callsign {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 3px;
}

.shift-time {
    font-size: 0.9em;
    color: var(--text-secondary);
    font-weight: 500;
}

.shift-missing-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.missing-slot {
    font-size: 0.85em;
    color: var(--drk-red);
    font-weight: 500;
    background: #fef2f2;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #fecaca;
}

/* Textvorlage Container */
.textvorlage-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.textvorlage-content {
    margin-top: 16px;
}

.textvorlage-content .no-data {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.textvorlage-content .no-data i {
    font-size: 2em;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Textvorlage Display */
.textvorlage-display {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.textvorlage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

.textvorlage-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-primary);
}

.textvorlage-text {
    padding: 20px 0;
}

.textvorlage-text pre {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Loading und Error States */
.loading-state,
.error-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.loading-state i {
    font-size: 2em;
    margin-bottom: 12px;
    color: var(--drk-red);
}

.error-state i {
    font-size: 2em;
    margin-bottom: 12px;
    color: var(--drk-red);
}

.loading-state p,
.error-state p {
    margin: 0;
    font-size: 1em;
}

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


/* Abstand unter Widgets zur Info-Leiste */
.widgets-container + .date-navigation.info-bar {
    margin-top: 20px;
}

/* Optionale Layout-Hilfen für den Info-Bartitel und -Aktionen */
.date-navigation.info-bar {
    justify-content: space-between;
    margin-top: 20px !important;
}

/* Info-Bar Titel mit Icons in einer Zeile */
.date-navigation.info-bar .info-bar-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-navigation.info-bar .info-bar-title h3 {
    margin: 0;
}

/* Info/Krankmeldungen – Grid unter der Info-Bar */
.info-krank-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}

.info-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px var(--shadow);
    overflow: hidden;
    height: fit-content;
}

.info-card .card-header {
    background: var(--bg-secondary);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.info-card .card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.info-card .card-content {
    padding: 15px 20px 20px 20px;
    color: var(--text-primary);
}

.info-card .card-header {
    padding: 12px 20px;
}

@media (max-width: 768px) {
    .info-krank-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Info Modal Textfeld Breite anpassen */
#add-info-modal textarea {
    width: 95%;
    resize: vertical;
}

/* Info-Tabelle Styles */
.info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0;
    table-layout: fixed;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow);
}

.info-table th,
.info-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

/* Info-Tabelle Spaltenbreiten */
.info-table th:nth-child(1),
.info-table td:nth-child(1) {
    width: 12%; /* Datum */
}

.info-table th:nth-child(2),
.info-table td:nth-child(2) {
    width: 12%; /* Von */
}

.info-table th:nth-child(3),
.info-table td:nth-child(3) {
    width: 68%; /* Info */
}

.info-table th:nth-child(4),
.info-table td:nth-child(4) {
    width: 8%; /* Aktionen */
    text-align: center;
}

/* Krankmeldungen-Tabelle Spaltenbreiten */
#krankmeldungen-table-container .info-table th:nth-child(1),
#krankmeldungen-table-container .info-table td:nth-child(1) {
    width: 14%; /* Datum */
}

#krankmeldungen-table-container .info-table th:nth-child(2),
#krankmeldungen-table-container .info-table td:nth-child(2) {
    width: 10%; /* Von */
}

#krankmeldungen-table-container .info-table th:nth-child(3),
#krankmeldungen-table-container .info-table td:nth-child(3) {
    width: 17%; /* Mitarbeiter */
}

#krankmeldungen-table-container .info-table th:nth-child(4),
#krankmeldungen-table-container .info-table td:nth-child(4) {
    width: 6%; /* Wache */
}

#krankmeldungen-table-container .info-table th:nth-child(5),
#krankmeldungen-table-container .info-table td:nth-child(5) {
    width: 55%; /* Info */
}

/* Krankmeldungen-Tabelle gelbe Hinterlegung */
#krankmeldungen-table-container .info-table td {
    background-color: rgba(255, 255, 0, 0.1);
}

[data-theme="dark"] #krankmeldungen-table-container .info-table td {
    background-color: rgba(255, 255, 0, 0.2);
}

/* NFS-Mitarbeiter rote Schrift */
#krankmeldungen-table-container .info-table td.nfs-employee {
    color: #dc2626;
    font-weight: 600;
}

[data-theme="dark"] #krankmeldungen-table-container .info-table td.nfs-employee {
    color: #ff5858;
}

.info-table th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.info-table th:first-child {
    border-top-left-radius: 8px;
}

.info-table th:last-child {
    border-top-right-radius: 8px;
}

.info-table td {
    font-size: 13px;
    color: var(--text-primary);
}

.info-table .info-text.important {
    font-weight: 600;
    color: #fc8484;
}

/* Status-basierte Zeilenhinterlegung */
.info-table tr[data-status="info"] {
    background-color: rgba(59, 130, 246, 0.1); /* Leicht blau */
}

.info-table tr[data-status="wichtig"] {
    background-color: rgba(239, 68, 68, 0.1); /* Leicht rot */
}

[data-theme="dark"] .info-table tr[data-status="info"] {
    background-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .info-table tr[data-status="wichtig"] {
    background-color: rgba(239, 68, 68, 0.2);
}


.info-table .loading-info,
.info-table .no-data,
.info-table .error-info {
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    padding: 20px;
}

.info-table .error-info {
    color: #ef4444;
}

/* Mitarbeitersuche Styles */
.employee-search-container {
    position: relative;
}

.employee-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px var(--shadow);
}

.employee-search-result {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.employee-search-result:hover {
    background-color: var(--bg-secondary);
}

.employee-search-result:last-child {
    border-bottom: none;
}

.employee-result-name {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.employee-result-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.search-loading,
.search-no-results,
.search-error {
    padding: 12px 16px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.search-error {
    color: #ef4444;
}

.selected-employee {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}


.selected-employee h4 {
    margin: 0 0 10px 0;
    color: var(--text-primary);
    font-size: 16px;
}

.selected-employee strong {
    color: var(--text-primary);
    font-size: 16px;
}

.selected-employee-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selected-employee-name {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.selected-employee-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.qualification-badge {
    background-color: var(--drk-red);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.station-badge {
    background-color: #3b82f6;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.date-navigation.info-bar .info-bar-actions {
    display: flex;
    gap: 10px;
}

/* Hover-Aktionen für Tabellenzeilen */
.info-table tr {
    position: relative;
}

.info-table tr:hover .row-actions {
    opacity: 1;
    visibility: visible;
}

.row-actions {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    background: var(--bg-card);
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow);
    border: 1px solid var(--border-color);
}

.row-actions button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.row-actions button:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.row-actions .delete-btn:hover {
    background: #dc2626;
    color: white;
}

.row-actions .edit-btn:hover {
    background: #3b82f6;
    color: white;
}

.fix-gap-placeholder{ gap: 15px; }

/* Footer-Links Styling */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
}

.footer-link:hover {
    color: var(--drk-red);
    text-decoration: underline;
}

.live-update-status{display:flex;align-items:center;gap:10px}
.date-navigation .live-update-status{margin-left:auto}
.date-navigation .location-buttons{display:none}

/* Tabs für Dienst-Container */
.dienste-tabs{position:relative;display:flex;gap:4px;align-items:center;margin:8px 0;padding:4px;border-radius:999px}
.dienste-tab{appearance:none;background:transparent;color:#dad0d0;padding:4px 10px;border-radius:999px;font-size:13px;line-height:24px;cursor:pointer;border:none;position:relative;z-index:2}
.dienste-tab.active{color:#131212;}
.dienste-tab:focus{outline:none}
.dienste-tabs-glider{position:absolute;left:0;top:3px;height:32px;width:0;background:rgba(206, 206, 206, 0.479);border-radius:10px;transition:transform .25s ease-out,width .25s ease-out;z-index:1;}
.date-navigation .dienste-tabs{background:transparent}

/* Tabs in der Datumsleiste platzieren */
.date-navigation{gap:10px}
.date-navigation .dienste-tabs{margin:0 0 0 10px}
.date-navigation .live-update-status{margin-left:auto}

/* Zwei-Spalten-Layout für Regionen-Tabs */
/* Spezielles Layout nur für Tab Donnersberg: #container-1 und #container-4 nebeneinander */
.ausfallmanagement-container.mode-donnersberg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ausfallmanagement-container.mode-donnersberg .container-row{display:contents}
.ausfallmanagement-container.mode-donnersberg #container-2,
.ausfallmanagement-container.mode-donnersberg #container-3,
.ausfallmanagement-container.mode-donnersberg #container-5,
.ausfallmanagement-container.mode-donnersberg #container-6{display:none}

/* Spezielles Layout nur für Tab Kaiserslautern: #container-2 und #container-5 nebeneinander */
.ausfallmanagement-container.mode-kaiserslautern{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ausfallmanagement-container.mode-kaiserslautern .container-row{display:contents}
/* Spezielles Layout nur für Tab Kusel: #container-3 und #container-6 nebeneinander */
.ausfallmanagement-container.mode-kusel{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ausfallmanagement-container.mode-kusel .container-row{display:contents}
.ausfallmanagement-container.mode-kusel #container-1,
.ausfallmanagement-container.mode-kusel #container-2,
.ausfallmanagement-container.mode-kusel #container-4,
.ausfallmanagement-container.mode-kusel #container-5{display:none}

/* Sanftes dunkles Blau (nur Farbe) für Header der Container 4, 5, 6 */
#container-4 .container-title,
#container-5 .container-title,
#container-6 .container-title{background-color:#0b1f4d85;color:#ffffff}

/* Sanftes Gelb (nur Farbe) für Header der Container 1, 2, 3 */
#container-1 .container-title,
#container-2 .container-title,
#container-3 .container-title{background-color:#66ff1f2a;color:#ffffff}
.live-update-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border-color,#e2e2e2);background:linear-gradient(180deg,var(--bg-secondary,#f8f9fb),var(--bg-primary,#ffffff));border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.04);color:var(--text-primary,#1f2937)}
.live-update-indicator i{color:var(--accent-color,#94ed2f);font-size:16px}
.live-update-indicator .live-update-text{font-weight:500;font-size:13px}
.live-update-indicator .live-update-time{margin-left:6px;padding:2px 8px;font-size:12px;line-height:18px;border-radius:999px;background:var(--chip-bg,#eef2ff);color:var(--chip-fg,#3730a3);border:1px solid var(--chip-border,#e5e7eb)}
.live-update-indicator.paused{background:linear-gradient(180deg,#fff7ed,#ffffff);border-color:#fde68a}
.live-update-indicator.paused i{color:#d97706}
.live-update-indicator.paused .live-update-time{background:#fef3c7;color:#92400e;border-color:#fde68a}
.live-update-notification{margin-left:8px;animation:slideInRight 0.3s ease-out}
.live-update-notification .notification-content{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid var(--drk-red,#c1121f);background:linear-gradient(135deg,#fff5f5,#ffffff);box-shadow:0 4px 20px rgba(193,18,31,0.15);position:relative;overflow:hidden}
.live-update-notification .notification-content::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--drk-red,#c1121f),#ff6b6b);animation:pulse 2s ease-in-out infinite}
.live-update-notification .notification-content i{color:var(--drk-red,#c1121f);font-size:16px;animation:bellRing 0.5s ease-in-out}
.live-update-notification .notification-text{font-weight:600;color:var(--text-primary,#1f2937);font-size:14px}
.live-update-notification .notification-btn{padding:8px 16px;font-size:13px;border-radius:8px;background:var(--drk-red,#c1121f);color:white;border:none;font-weight:500;transition:all 0.2s ease;cursor:pointer}
.live-update-notification .notification-btn:hover{background:#a00e1a;transform:translateY(-1px);box-shadow:0 2px 8px rgba(193,18,31,0.3)}
.live-update-notification .notification-close{padding:6px;border-radius:6px;background:transparent;border:none;color:var(--text-muted,#6b7280);cursor:pointer;transition:all 0.2s ease}
.live-update-notification .notification-close:hover{background:rgba(193,18,31,0.1);color:var(--drk-red,#c1121f)}

/* Dark Theme für Live-Update-Notification */
[data-theme="dark"] .live-update-notification .notification-content{background:linear-gradient(135deg,#2d1b1b,#1f1f1f);border-color:var(--drk-red,#ef4444)}
[data-theme="dark"] .live-update-notification .notification-content::before{background:linear-gradient(90deg,var(--drk-red,#ef4444),#ff6b6b)}
[data-theme="dark"] .live-update-notification .notification-text{color:#e5e7eb}
[data-theme="dark"] .live-update-notification .notification-close{color:#9ca3af}
[data-theme="dark"] .live-update-notification .notification-close:hover{background:rgba(239,68,68,0.1);color:var(--drk-red,#ef4444)}

/* Animationen */
@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
@keyframes bellRing{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}

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

/* Footer: Copyright rechtsbündig */
.footer-copyright{margin-left:auto;text-align:right}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        order: 2;
    }
    
    .footer-copyright {
        order: 1;
    }
}

/* ===== PROFILE PAGE STYLES ===== */
.profile-container .profile-content {
    margin-top: 20px !important;
}

.profile-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-left,
.profile-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-right {
    margin-top: 0;
}

.profile-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.profile-card .card-header {
    background: var(--bg-primary);
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.profile-card .card-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
}

.profile-card .card-content {
    padding: 30px;
}

.profile-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Benutzerverwaltung */
.users-container {
    background-color: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.users-actions {
    display: flex;
    gap: 10px;
}

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

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

.stat-item strong {
    color: var(--drk-red);
    font-weight: 600;
}

.users-table-container {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .profile-form .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


#globalLoader{position:fixed;inset:0;z-index:99999;pointer-events:none;opacity:0;transition:opacity .25s ease}
#globalLoader.active{opacity:1;pointer-events:auto}
#globalLoader .loader-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.39);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(14px)}
#globalLoader .loader-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
#globalLoader .loader-text{color:var(--text-primary,#111827);font-size:14px;letter-spacing:.2px}

/* Loader: animiertes Kreuz (Linien bauen sich auf) */
.loader-cross{display:block}
.loader-cross path{fill:transparent;stroke:var(--drk-red,#c1121f);stroke-width:4;stroke-linejoin:miter;stroke-miterlimit:2;stroke-linecap:butt;vector-effect:non-scaling-stroke;shape-rendering:crispEdges;stroke-dasharray:400;stroke-dashoffset:400;animation:drawCross 3s ease-in-out infinite}

/* Light/Dark Anpassung */
[data-theme="dark"] #globalLoader .loader-backdrop{background:rgba(0, 0, 0, 0.445)}
[data-theme="dark"] #globalLoader .loader-text{color:#e5e7eb}
[data-theme="dark"] .loader-cross path{stroke:var(--drk-red,#ef4444)}

@keyframes drawCross{0%{stroke-dashoffset:400;opacity:.9}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:1}}

/* Scrollbars weiterhin versteckt, auch während Loader aktiv ist */
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}


/* Alerts (Message) – aus @Alerts/ übernommen, leicht angepasst */
.Message {
    display: table;
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    margin: 0;
    width: 400px;
    max-width: calc(100% - 40px);
    background-color: rgba(31,41,55,0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #fff;
    transition: all 0.2s ease;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1000000;
}
.Message.is-hidden { opacity: 0; height: 0; font-size: 0; padding: 0; margin: 0; display: block; }
.Message--orange { }
.Message--green { }
.Message--blue { }
.Message-icon { display: table-cell; vertical-align: middle; width: 68px; padding: 22px; text-align: center; background-color: rgba(0,0,0,0.25); }
.Message--orange .Message-icon { background-color: #F39C12; }
.Message--green .Message-icon { background-color: #2ECC40; }
.Message--blue .Message-icon { background-color: #0074D9; }
.Message-icon > i { width: 28px; font-size: 28px; }
.Message-body { display: table-cell; vertical-align: middle; padding: 18px 16px 18px 10px; }
.Message-body > p { line-height: 1.32; margin-top: 5px; }
.Message-button { position: relative; margin: 10px 6px -6px; background-color: rgba(0,0,0,0.25); border: none; padding: 8px 12px; font-size: 14px; color: #fff; cursor: pointer; border-radius: 7px; }
.Message-button:hover { background-color: rgba(0,0,0,0.3); }
.Message-button:active { background-color: rgba(0,0,0,0.3); top: 1px; }
.Message-close { position: absolute; background-color: rgba(0,0,0,0.3); color: #fff; border: none; font-size: 16px; right: 6px; top: 6px; opacity: 0; cursor: pointer; border-radius: 7px; padding: 5px; }
.Message:hover .Message-close { opacity: 1; }