/**
 * ============================================================
 * NexBoard Admin Unified Design System
 * Einheitliches, modernes Design für den gesamten Admin-Bereich
 * Version: 2.0
 * Datum: November 2025
 * ============================================================
 */

/* ============================================================
   0. ADMIN MODAL - Einheitliche Modal-Dialoge
   ============================================================ */

.admin-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.admin-modal.show {
    display: flex;
}

.admin-modal-content {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.admin-modal-header {
    padding: var(--space-xl);
    border-bottom: 1px solid var(--border-light);
}

.admin-modal-header h2 {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.admin-modal-body {
    padding: var(--space-xl);
}

.admin-modal-footer {
    padding: var(--space-xl);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}

/* Admin Text Utilities */
.admin-text-center {
    text-align: center;
}

.admin-code {
    font-size: var(--text-sm);
    background: var(--bg-gray);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-xs);
    font-family: 'Courier New', monospace;
    color: var(--accent-primary) !important; /* Gleiche Farbe wie link-primary */
}

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

/* 
 * .list-empty-state wurde nach list-standard.css verschoben.
 * Diese Definition wurde entfernt, um Konflikte zu vermeiden.
 * Siehe: list-standard.css (Zeile 226+) für die aktuelle Definition.
 */

/* ============================================================
   1. ADMIN PAGE LAYOUT - Konsistente Seitenstruktur
   ============================================================ */

/* Page Container - Zentrale Ausrichtung */
.admin-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Page Header - Einheitliche Kopfzeile für alle Admin-Seiten */
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.admin-page-header-content {
    flex: 1;
}

.admin-page-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.01em;
}

.admin-page-title-icon {
    font-size: 1.75rem;
    opacity: 0.85;
}

.admin-page-subtitle {
    font-size: 0.9375rem;
    color: var(--text-tertiary);
    line-height: 1.6;
    margin: 0;
}

.admin-page-subtitle strong {
    color: var(--text-secondary);
    font-weight: 500;
}

.admin-page-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Breadcrumbs - Navigationspfad */
.admin-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.admin-breadcrumbs a {
    color: var(--neutral-600);
    text-decoration: none;
    transition: color 0.15s ease;
}

.admin-breadcrumbs a:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.admin-breadcrumbs-separator {
    color: var(--border-medium);
}

/* ============================================================
   2. ADMIN CARDS - Einheitliches Karten-System
   ============================================================ */

/* Standard Card */
.admin-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-medium);
}

/* Dark Mode für admin-card - direkt nach Definition mit !important */
[data-theme="dark"] .admin-card {
    background: var(--bg-white) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .admin-card:hover {
    background: var(--bg-white) !important;
    border-color: var(--border-medium) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Card Header */
.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--neutral-100);
}

.admin-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-card-title-icon {
    font-size: 1.25rem;
    opacity: 0.85;
}

.admin-card-subtitle {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0.25rem 0 0 0;
    line-height: 1.5;
}

.admin-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Card Body */
.admin-card-body {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.admin-card-body p {
    margin: 0 0 0.75rem 0;
}

.admin-card-body p:last-child {
    margin-bottom: 0;
}

/* Card Footer */
.admin-card-footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--neutral-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================================
   3. ADMIN GRID SYSTEM - Kachel-Layouts
   ============================================================ */

/* Grid Container */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.admin-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.admin-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Grid Tile - Interaktive Kacheln */
.admin-tile {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-tile:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--neutral-500);
    transform: translateY(-2px);
}

.admin-tile-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.admin-tile-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--neutral-50);
    border: 1px solid var(--border-light);
}

.admin-tile-content {
    flex: 1;
}

.admin-tile-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.admin-tile-description {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

.admin-tile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ============================================================
   4. ADMIN BUTTONS - Einheitliche Button-Styles
   ============================================================ */

/* Button Base */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.admin-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

/* Button Variants */
.admin-btn-primary {
    background: var(--neutral-600);
    color: #ffffff;
    border-color: var(--neutral-600);
}

.admin-btn-primary:hover {
    background: var(--neutral-700);
    color: #ffffff;
    border-color: var(--neutral-700);
}

.admin-btn-secondary {
    background: var(--neutral-100);
    color: var(--neutral-600);
    border-color: var(--border-light);
}

.admin-btn-secondary:hover {
    background: var(--neutral-200);
    border-color: var(--border-medium);
}

.admin-btn-outline {
    background: var(--bg-white);
    color: var(--neutral-700);
    border-color: var(--border-medium);
}

.admin-btn-outline:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-400);
}

.admin-btn-ghost {
    background: transparent;
    color: var(--neutral-600);
    border-color: transparent;
}

.admin-btn-ghost:hover {
    background: rgba(75, 85, 99, 0.1);
}

.admin-btn-danger {
    background: var(--danger-50);
    color: var(--danger-700);
    border-color: var(--danger-100);
}

.admin-btn-danger:hover {
    background: var(--danger-300);
    border-color: var(--danger-400);
    color: var(--danger-800);
}

/* Button Sizes */
.admin-btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

.admin-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* Button Icon */
.admin-btn-icon {
    font-size: 1.125rem;
}

/* Button Block */
.admin-btn-block {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   5. ADMIN FORMS - Einheitliche Formulargestaltung
   ============================================================ */

/* Form Container */
.admin-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Form Row - Grid Layout */
.admin-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-form-row-2 {
    grid-template-columns: repeat(2, 1fr);
}

.admin-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.admin-form-row:last-child {
    margin-bottom: 0;
}

/* Form Group */
.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-form-label-required {
    color: #dc2626;
}

.admin-form-help {
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.4;
}

/* Form Controls */
.admin-form-input,
.admin-form-select,
.admin-form-textarea,
.admin-form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: #111827;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus,
.admin-form-control:focus {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

.admin-form-input:hover,
.admin-form-select:hover,
.admin-form-textarea:hover,
.admin-form-control:hover {
    border-color: #9ca3af;
}

.admin-form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Checkbox & Radio */
.admin-checkbox,
.admin-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.admin-checkbox input[type="checkbox"],
.admin-radio input[type="radio"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.admin-checkbox span,
.admin-radio span {
    font-size: 0.875rem;
    color: #374151;
}

/* Form Actions */
.admin-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6;
}

/* ============================================================
   6. ADMIN TABLES - Einheitliche Tabellen
   ============================================================ */

/* Table Container */
.admin-table-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.admin-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.admin-table thead {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.admin-table thead th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.admin-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.admin-table tbody tr:hover {
    background: #f9fafb;
}

.admin-table tbody tr:last-child {
    border-bottom: none;
}

.admin-table tbody td {
    padding: 0.875rem 1rem;
    color: #374151;
    vertical-align: middle;
}

/* ============================================================
   7. ADMIN BADGES & STATUS
   ============================================================ */

/* Badge Base */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Badge Variants */
.admin-badge-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.admin-badge-warning {
    background: #fed7aa;
    color: #92400e;
    border: 1px solid #fdba74;
}

.admin-badge-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.admin-badge-info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.admin-badge-neutral {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.admin-badge-new {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ============================================================
   8. ADMIN ALERTS - Benachrichtigungen
   ============================================================ */

.admin-alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.admin-alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.admin-alert-content {
    flex: 1;
}

.admin-alert-title {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.admin-alert-message {
    margin: 0;
    line-height: 1.5;
}

/* Alert Variants */
.admin-alert-success {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.admin-alert-warning {
    background: #fed7aa;
    border: 1px solid #fdba74;
    color: #92400e;
}

.admin-alert-error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.admin-alert-info {
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ============================================================
   9. ADMIN UTILITIES - Hilfeklassen
   ============================================================ */

/* Spacing */
.admin-mt-0 { margin-top: 0; }
.admin-mt-1 { margin-top: 0.5rem; }
.admin-mt-2 { margin-top: 1rem; }
.admin-mt-3 { margin-top: 1.5rem; }
.admin-mt-4 { margin-top: 2rem; }

.admin-mb-0 { margin-bottom: 0; }
.admin-mb-1 { margin-bottom: 0.5rem; }
.admin-mb-2 { margin-bottom: 1rem; }
.admin-mb-3 { margin-bottom: 1.5rem; }
.admin-mb-4 { margin-bottom: 2rem; }

/* Text Alignment */
.admin-text-left { text-align: left; }
.admin-text-center { text-align: center; }
.admin-text-right { text-align: right; }

/* Display */
.admin-flex { display: flex; }
.admin-flex-col { flex-direction: column; }
.admin-flex-row { flex-direction: row; }
.admin-justify-start { justify-content: flex-start; }
.admin-justify-center { justify-content: center; }
.admin-justify-end { justify-content: flex-end; }
.admin-justify-between { justify-content: space-between; }
.admin-items-start { align-items: flex-start; }
.admin-items-center { align-items: center; }
.admin-items-end { align-items: flex-end; }
.admin-gap-1 { gap: 0.5rem; }
.admin-gap-2 { gap: 1rem; }
.admin-gap-3 { gap: 1.5rem; }
.admin-gap-4 { gap: 2rem; }

/* ============================================================
   10. RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 1024px) {
    .admin-page-container {
        padding: 1.5rem;
    }
    
    .admin-grid-2,
    .admin-grid-3,
    .admin-grid-4 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .admin-form-row-2,
    .admin-form-row-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-page-container {
        padding: 1rem;
    }
    
    .admin-page-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .admin-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .admin-grid {
        grid-template-columns: 1fr;
    }
    
    .admin-tile {
        padding: 1.25rem;
    }
    
    .admin-card {
        padding: 1.25rem;
    }
    
    .admin-form {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .admin-page-title {
        font-size: 1.5rem;
    }
    
    .admin-card-header {
        flex-direction: column;
    }
    
    .admin-card-actions {
        width: 100%;
    }
    
    .admin-form-actions {
        flex-direction: column;
    }
    
    .admin-form-actions .admin-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   11. PRINT STYLES
   ============================================================ */

@media print {
    .admin-page-actions,
    .admin-card-actions,
    .admin-btn,
    .admin-form-actions {
        display: none !important;
    }
    
    .admin-card,
    .admin-table-container {
        box-shadow: none;
        border: 1px solid #d1d5db;
    }
}

/* ============================================================
   12. ADMIN DASHBOARD TILES
   ============================================================ */

.admin-dashboard-grid,
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.admin-dashboard-tile,
.settings-tile {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    transition: all var(--transition-fast);
    min-height: 140px;
}

.admin-dashboard-tile:hover,
.settings-tile:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-medium);
    transform: translateY(-2px);
}

.admin-dashboard-tile-header,
.settings-tile-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.admin-dashboard-tile-icon,
.settings-tile-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    border: 1px solid var(--border-light);
    flex-shrink: 0;
    font-size: 1.5rem;
}

.admin-dashboard-tile-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-primary);
}

.admin-dashboard-tile-content,
.settings-tile-content {
    flex: 1;
    min-width: 0;
}

.admin-dashboard-tile h2,
.settings-tile h2 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: 1.3;
}

.admin-dashboard-tile-subtitle,
.settings-tile-subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: 1.5;
}

.admin-dashboard-tile-links,
.settings-tile-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

/* Badge-New für Admin */
.admin-badge-new,
.admin-dashboard-tile .badge-new {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    background: var(--error-100);
    color: var(--error-700);
    margin-left: var(--space-sm);
}

/* Modal Styles für Admin */
.admin-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.admin-modal.show {
    display: flex;
}

.admin-modal-content {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-2xl);
}

.admin-modal-header {
    padding: var(--space-xl);
    border-bottom: 1px solid var(--border-light);
}

.admin-modal-header h2 {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.admin-modal-body {
    padding: var(--space-xl);
}

.admin-modal-footer {
    padding: var(--space-xl);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}

/* Info Grid für Modal/Details */
.admin-info-grid {
    background: var(--bg-gray);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.admin-info-grid-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.admin-info-item-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-xs);
}

.admin-info-item-value {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* Code/Username Styling */
.admin-code {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    background: var(--bg-gray);
    padding: 0.125rem var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--accent-primary) !important; /* Gleiche Farbe wie link-primary */
}

/* Responsive Admin Dashboard */
@media (max-width: 768px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-tile {
        padding: var(--space-lg);
    }
    
    .admin-modal-content {
        max-height: 90vh;
    }
    
    .admin-info-grid-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .admin-dashboard-tile-links {
        flex-direction: column;
    }

    .admin-dashboard-tile-links .btn {
        width: 100%;
        justify-content: center;
    }
    
    .admin-modal-footer {
        flex-direction: column;
    }
}

/* ============================================================
   DARK MODE SUPPORT
   ============================================================ */

[data-theme="dark"] .admin-page-header {
    background: var(--bg-white) !important;
    border-color: var(--border-light) !important;
}

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

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

[data-theme="dark"] .admin-card,
[data-theme="dark"] .admin-section-card {
    background: var(--bg-white) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .admin-card-header,
[data-theme="dark"] .admin-section-header {
    background: var(--bg-gray) !important;
    border-color: var(--border-light) !important;
}

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

/* Inline Styles in Admin Cards - Dark Mode: Schwarze Textfarbe auf weiß */
[data-theme="dark"] .admin-card strong[style*="color: #111827"],
[data-theme="dark"] .admin-card strong[style*="color:#111827"],
[data-theme="dark"] .admin-card span[style*="color: #111827"],
[data-theme="dark"] .admin-card span[style*="color:#111827"],
[data-theme="dark"] .admin-card label[style*="color: #111827"] span,
[data-theme="dark"] .admin-card label[style*="color:#111827"] span,
[data-theme="dark"] .admin-card label[style*="color: #111827"] strong,
[data-theme="dark"] .admin-card label[style*="color:#111827"] strong {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .admin-card span[style*="color: #6b7280"],
[data-theme="dark"] .admin-card span[style*="color:#6b7280"],
[data-theme="dark"] .admin-card small[style*="color: #6b7280"],
[data-theme="dark"] .admin-card small[style*="color:#6b7280"] {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .admin-card-subtitle,
[data-theme="dark"] .admin-section-subtitle {
    color: var(--text-tertiary) !important;
}

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

[data-theme="dark"] .admin-list-item:hover {
    background: var(--bg-hover) !important;
}

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

[data-theme="dark"] .admin-list-item-meta {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .admin-dashboard-tile,
[data-theme="dark"] .admin-tile,
[data-theme="dark"] .settings-tile {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .admin-dashboard-tile:hover,
[data-theme="dark"] .admin-tile:hover,
[data-theme="dark"] .settings-tile:hover {
    background: #2a2a2a !important;
    border-color: rgba(160, 160, 160, 0.3) !important;
}

[data-theme="dark"] .admin-dashboard-tile-title,
[data-theme="dark"] .admin-tile-title,
[data-theme="dark"] .settings-tile h2 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .admin-dashboard-tile-desc,
[data-theme="dark"] .admin-tile-description,
[data-theme="dark"] .settings-tile-subtitle {
    color: #909090 !important;
}

[data-theme="dark"] .admin-tile-icon,
[data-theme="dark"] .admin-dashboard-tile-icon,
[data-theme="dark"] .settings-tile-icon {
    background: transparent !important;
    border-color: rgba(160, 160, 160, 0.2) !important;
}

[data-theme="dark"] .admin-modal-content {
    background: #252525 !important;
    border: 1px solid #3a3a3a !important;
}

[data-theme="dark"] .admin-modal-header {
    background: #222222 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .admin-modal-header h2 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .admin-modal-body {
    color: #c0c0c0 !important;
    background: #252525 !important;
}

[data-theme="dark"] .admin-modal-footer {
    background: #222222 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .admin-info-grid {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.2) !important;
}

[data-theme="dark"] .admin-info-item-label {
    color: #808080 !important;
}

[data-theme="dark"] .admin-info-item-value {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .admin-code {
    background: transparent !important;
    color: #7cb8e8 !important;
    border: 1px solid rgba(124, 184, 232, 0.2) !important;
}

/* Admin Table Container Dark Mode - Angepasster Stil */
[data-theme="dark"] .admin-table-container {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .admin-table thead {
    background: #2a2a2a !important;
    border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .admin-table th {
    color: #c0c0c0 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .admin-table tbody tr {
    background: transparent !important;
    border-bottom-color: rgba(160, 160, 160, 0.15) !important;
}

[data-theme="dark"] .admin-table td {
    color: #c0c0c0 !important;
    border-color: rgba(160, 160, 160, 0.15) !important;
}

[data-theme="dark"] .admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Protokoll Badge Dark Mode */
[data-theme="dark"] .protokoll-badge {
    background: var(--bg-hover) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-secondary) !important;
}

/* Admin Card Dark Mode - Angepasster Stil */
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] div.admin-card,
html[data-theme="dark"] .admin-page-container .admin-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] div.admin-card,
[data-theme="dark"] .protokoll-filters,
[data-theme="dark"] .admin-card.protokoll-card {
    background: #252525 !important;
    border-color: #3a3a3a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .admin-card:hover,
[data-theme="dark"] .admin-card:hover,
[data-theme="dark"] div.admin-card:hover {
    background: #2a2a2a !important;
    border-color: rgba(160, 160, 160, 0.3) !important;
    box-shadow: none !important;
}

/* Admin Page Container Dark Mode */
html[data-theme="dark"] .admin-page-container,
[data-theme="dark"] .admin-page-container {
    background: transparent !important;
}

[data-theme="dark"] .admin-card input[type="text"],
[data-theme="dark"] .admin-card select {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.25) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .admin-card input[type="text"]:focus,
[data-theme="dark"] .admin-card select:focus {
    border-color: rgba(124, 184, 232, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(124, 184, 232, 0.15) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .admin-card input::placeholder {
    color: #606060 !important;
}

[data-theme="dark"] .admin-form-group label,
[data-theme="dark"] .admin-card label {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .list-empty-state-title {
    color: #808080 !important;
}

/* Admin Badges Dark Mode - Transparenter Stil */
[data-theme="dark"] .admin-badge-success {
    background: transparent !important;
    color: #7cc8a8 !important;
    border: 1px solid rgba(124, 200, 168, 0.3) !important;
}

[data-theme="dark"] .admin-badge-warning {
    background: transparent !important;
    color: #e8b878 !important;
    border: 1px solid rgba(232, 184, 120, 0.3) !important;
}

[data-theme="dark"] .admin-badge-error {
    background: transparent !important;
    color: #e08080 !important;
    border: 1px solid rgba(224, 128, 128, 0.3) !important;
}

[data-theme="dark"] .admin-badge-info {
    background: transparent !important;
    color: #7cb8e8 !important;
    border: 1px solid rgba(124, 184, 232, 0.3) !important;
}

[data-theme="dark"] .admin-badge-neutral {
    background: transparent !important;
    color: var(--text-tertiary) !important;
    border: 1px solid rgba(160, 160, 160, 0.3) !important;
}

[data-theme="dark"] .admin-badge-primary {
    background: transparent !important;
    color: #7cb8e8 !important;
    border: 1px solid rgba(124, 184, 232, 0.3) !important;
}

[data-theme="dark"] .admin-badge-new {
    background: transparent !important;
    color: #e08080 !important;
    border: 1px solid rgba(224, 128, 128, 0.3) !important;
}

/* Admin Alerts Dark Mode - Transparenter Stil */
[data-theme="dark"] .admin-alert-success {
    background: transparent !important;
    border: 1px solid rgba(124, 200, 168, 0.3) !important;
    color: #7cc8a8 !important;
}

[data-theme="dark"] .admin-alert-warning {
    background: transparent !important;
    border: 1px solid rgba(232, 184, 120, 0.3) !important;
    color: #e8b878 !important;
}

[data-theme="dark"] .admin-alert-error {
    background: transparent !important;
    border: 1px solid rgba(224, 128, 128, 0.3) !important;
    color: #e08080 !important;
}

[data-theme="dark"] .admin-alert-info {
    background: transparent !important;
    border: 1px solid rgba(124, 184, 232, 0.3) !important;
    color: #7cb8e8 !important;
}

/* Admin Buttons Dark Mode - Transparenter Stil */
[data-theme="dark"] .admin-btn-primary {
    background: transparent !important;
    color: #7cb8e8 !important;
    border: 1px solid rgba(124, 184, 232, 0.4) !important;
}

[data-theme="dark"] .admin-btn-primary:hover {
    background: rgba(124, 184, 232, 0.1) !important;
    border-color: rgba(124, 184, 232, 0.6) !important;
}

[data-theme="dark"] .admin-btn-secondary {
    background: transparent !important;
    color: var(--text-tertiary) !important;
    border: 1px solid rgba(160, 160, 160, 0.3) !important;
}

[data-theme="dark"] .admin-btn-secondary:hover {
    background: rgba(160, 160, 160, 0.1) !important;
    border-color: rgba(160, 160, 160, 0.5) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .admin-btn-outline {
    background: transparent !important;
    color: var(--text-tertiary) !important;
    border-color: rgba(160, 160, 160, 0.3) !important;
}

[data-theme="dark"] .admin-btn-outline:hover {
    background: rgba(160, 160, 160, 0.1) !important;
    border-color: rgba(160, 160, 160, 0.5) !important;
}

[data-theme="dark"] .admin-btn-danger {
    background: transparent !important;
    color: #e08080 !important;
    border: 1px solid rgba(224, 128, 128, 0.3) !important;
}

[data-theme="dark"] .admin-btn-danger:hover {
    background: rgba(224, 128, 128, 0.1) !important;
    border-color: rgba(224, 128, 128, 0.5) !important;
}

[data-theme="dark"] .admin-btn-ghost {
    background: transparent !important;
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .admin-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #c0c0c0 !important;
}

/* Admin Forms Dark Mode - Angepasster Stil */
[data-theme="dark"] .admin-form {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .admin-form-label {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .admin-form-help {
    color: #808080 !important;
}

[data-theme="dark"] .admin-form-input,
[data-theme="dark"] .admin-form-select,
[data-theme="dark"] .admin-form-textarea,
[data-theme="dark"] .admin-form-control {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.25) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .admin-form-input:hover,
[data-theme="dark"] .admin-form-select:hover,
[data-theme="dark"] .admin-form-textarea:hover,
[data-theme="dark"] .admin-form-control:hover {
    border-color: rgba(160, 160, 160, 0.4) !important;
}

[data-theme="dark"] .admin-form-input:focus,
[data-theme="dark"] .admin-form-select:focus,
[data-theme="dark"] .admin-form-textarea:focus,
[data-theme="dark"] .admin-form-control:focus {
    border-color: rgba(124, 184, 232, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(124, 184, 232, 0.15) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .admin-form-input::placeholder,
[data-theme="dark"] .admin-form-textarea::placeholder {
    color: #606060 !important;
}

[data-theme="dark"] .admin-checkbox label,
[data-theme="dark"] .admin-radio label {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .admin-checkbox input[type="checkbox"],
[data-theme="dark"] .admin-radio input[type="radio"] {
    accent-color: #7cb8e8;
}

/* Checkbox Card Dark Mode - Transparenter Stil */
[data-theme="dark"] .checkbox-card,
[data-theme="dark"] .tracking-option,
[data-theme="dark"] .option-card {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.25) !important;
    color: #c0c0c0 !important;
}

[data-theme="dark"] .checkbox-card:hover,
[data-theme="dark"] .tracking-option:hover,
[data-theme="dark"] .option-card:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(160, 160, 160, 0.4) !important;
}

[data-theme="dark"] .checkbox-card.selected,
[data-theme="dark"] .tracking-option.selected,
[data-theme="dark"] .option-card.selected {
    background: rgba(124, 184, 232, 0.1) !important;
    border-color: rgba(124, 184, 232, 0.4) !important;
}

/* Fieldset/Legend Dark Mode */
[data-theme="dark"] fieldset {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] legend {
    color: #e0e0e0 !important;
    background: #252525 !important;
}

/* Fields Container Dark Mode */
[data-theme="dark"] .fields-container,
[data-theme="dark"] .field-group {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .field-group-title {
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

/* ============================================================
   AUTO THEME - Dark Mode (System Preference)
   ============================================================ */

@media (prefers-color-scheme: dark) {
    /* Admin Cards - Auto Theme */
    [data-theme="auto"] .admin-card,
    [data-theme="auto"] div.admin-card,
    [data-theme="auto"] .admin-page-container .admin-card,
    [data-theme="auto"] .protokoll-filters,
    [data-theme="auto"] .admin-card.protokoll-card {
        background: var(--bg-white) !important;
        border-color: var(--border-light) !important;
        box-shadow: none !important;
    }

    [data-theme="auto"] .admin-card:hover,
    [data-theme="auto"] div.admin-card:hover {
        background: var(--bg-hover) !important;
        border-color: var(--border-medium) !important;
        box-shadow: none !important;
    }

    [data-theme="auto"] .admin-page-container {
        background: transparent !important;
    }

    [data-theme="auto"] .admin-card input[type="text"],
    [data-theme="auto"] .admin-card select {
        background: #454545 !important;
        border: 1px solid #555555 !important;
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] .admin-card input[type="text"]:focus,
    [data-theme="auto"] .admin-card select:focus {
        border-color: #5aafff !important;
        box-shadow: 0 0 0 2px rgba(90, 175, 255, 0.2) !important;
        background: #505050 !important;
    }

    [data-theme="auto"] .admin-card input::placeholder {
        color: #808080 !important;
    }

    [data-theme="auto"] .admin-form-group label,
    [data-theme="auto"] .admin-card label {
        color: var(--text-secondary) !important;
    }

    [data-theme="auto"] .list-empty-state-title {
        color: #808080 !important;
    }

    /* Admin Forms - Auto Theme */
    [data-theme="auto"] .admin-form {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-form-label {
        color: var(--text-secondary) !important;
    }

    [data-theme="auto"] .admin-form-help {
        color: var(--text-tertiary) !important;
    }

    [data-theme="auto"] .admin-form-input,
    [data-theme="auto"] .admin-form-select,
    [data-theme="auto"] .admin-form-textarea,
    [data-theme="auto"] .admin-form-control {
        background: #454545 !important;
        border: 1px solid #555555 !important;
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] .admin-form-input:hover,
    [data-theme="auto"] .admin-form-select:hover,
    [data-theme="auto"] .admin-form-textarea:hover,
    [data-theme="auto"] .admin-form-control:hover {
        border-color: #666666 !important;
    }

    [data-theme="auto"] .admin-form-input:focus,
    [data-theme="auto"] .admin-form-select:focus,
    [data-theme="auto"] .admin-form-textarea:focus,
    [data-theme="auto"] .admin-form-control:focus {
        border-color: #5aafff !important;
        box-shadow: 0 0 0 2px rgba(90, 175, 255, 0.2) !important;
        background: #505050 !important;
    }

    [data-theme="auto"] .admin-form-input::placeholder,
    [data-theme="auto"] .admin-form-textarea::placeholder {
        color: #808080 !important;
    }

    [data-theme="auto"] .admin-checkbox label,
    [data-theme="auto"] .admin-radio label {
        color: var(--text-secondary) !important;
    }

    [data-theme="auto"] .admin-checkbox input[type="checkbox"],
    [data-theme="auto"] .admin-radio input[type="radio"] {
        accent-color: #5aafff;
    }

    /* Checkbox Card - Auto Theme */
    [data-theme="auto"] .checkbox-card,
    [data-theme="auto"] .tracking-option,
    [data-theme="auto"] .option-card {
        background: #3a3a3a !important;
        border: 1px solid #4a4a4a !important;
        color: var(--text-secondary) !important;
    }

    [data-theme="auto"] .checkbox-card:hover,
    [data-theme="auto"] .tracking-option:hover,
    [data-theme="auto"] .option-card:hover {
        background: #454545 !important;
        border-color: #555555 !important;
    }

    [data-theme="auto"] .checkbox-card.selected,
    [data-theme="auto"] .tracking-option.selected,
    [data-theme="auto"] .option-card.selected {
        background: rgba(90, 175, 255, 0.15) !important;
        border-color: rgba(90, 175, 255, 0.4) !important;
    }

    /* Fieldset/Legend - Auto Theme */
    [data-theme="auto"] fieldset {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] legend {
        color: var(--text-primary) !important;
        background: #3a3a3a !important;
    }

    /* Fields Container - Auto Theme */
    [data-theme="auto"] .fields-container,
    [data-theme="auto"] .field-group {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] .field-group-title {
        color: var(--text-primary) !important;
        border-color: #4a4a4a !important;
    }

    /* Admin Page Header - Auto Theme */
    [data-theme="auto"] .admin-page-header {
        color: var(--text-primary) !important;
    }

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

    [data-theme="auto"] .admin-page-subtitle {
        color: var(--text-tertiary) !important;
    }

    /* Admin Section Cards - Auto Theme */
    [data-theme="auto"] .admin-section-card {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-card-header,
    [data-theme="auto"] .admin-section-header {
        border-bottom-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-card-title,
    [data-theme="auto"] .admin-section-title {
        color: var(--text-primary) !important;
    }

    /* Inline Styles in Admin Cards - Auto Theme (Dark Mode): Schwarze Textfarbe auf weiß */
    [data-theme="auto"] .admin-card strong[style*="color: #111827"],
    [data-theme="auto"] .admin-card strong[style*="color:#111827"],
    [data-theme="auto"] .admin-card span[style*="color: #111827"],
    [data-theme="auto"] .admin-card span[style*="color:#111827"],
    [data-theme="auto"] .admin-card label[style*="color: #111827"] span,
    [data-theme="auto"] .admin-card label[style*="color:#111827"] span,
    [data-theme="auto"] .admin-card label[style*="color: #111827"] strong,
    [data-theme="auto"] .admin-card label[style*="color:#111827"] strong {
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] .admin-card span[style*="color: #6b7280"],
    [data-theme="auto"] .admin-card span[style*="color:#6b7280"],
    [data-theme="auto"] .admin-card small[style*="color: #6b7280"],
    [data-theme="auto"] .admin-card small[style*="color:#6b7280"] {
        color: var(--text-tertiary) !important;
    }

    [data-theme="auto"] .admin-card-subtitle,
    [data-theme="auto"] .admin-section-subtitle {
        color: var(--text-tertiary) !important;
    }

    /* Admin List Items - Auto Theme */
    [data-theme="auto"] .admin-list-item {
        border-bottom-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-list-item:hover {
        background: #454545 !important;
    }

    [data-theme="auto"] .admin-list-item-title {
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] .admin-list-item-meta {
        color: var(--text-tertiary) !important;
    }

    /* Admin Tiles - Auto Theme */
    [data-theme="auto"] .admin-dashboard-tile,
    [data-theme="auto"] .admin-tile,
    [data-theme="auto"] .settings-tile {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-dashboard-tile:hover,
    [data-theme="auto"] .admin-tile:hover,
    [data-theme="auto"] .settings-tile:hover {
        background: #454545 !important;
        border-color: #555555 !important;
    }

    [data-theme="auto"] .admin-dashboard-tile-title,
    [data-theme="auto"] .admin-tile-title,
    [data-theme="auto"] .settings-tile h2 {
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] .admin-dashboard-tile-desc,
    [data-theme="auto"] .admin-tile-description,
    [data-theme="auto"] .settings-tile-subtitle {
        color: var(--text-tertiary) !important;
    }

    [data-theme="auto"] .admin-tile-icon,
    [data-theme="auto"] .admin-dashboard-tile-icon,
    [data-theme="auto"] .settings-tile-icon {
        color: #5aafff !important;
    }

    /* Admin Tables - Auto Theme */
    [data-theme="auto"] .admin-table-container {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-table thead {
        background: var(--bg-gray) !important;
        border-bottom-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-table th {
        color: var(--text-tertiary) !important;
        border-bottom-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-table tbody tr {
        background: #3a3a3a !important;
        border-bottom-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-table td {
        color: var(--text-secondary) !important;
        border-bottom-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-table tbody tr:hover {
        background: #454545 !important;
    }

    /* Admin Badges - Auto Theme */
    [data-theme="auto"] .admin-badge-success {
        background: transparent !important;
        color: #7cc8a8 !important;
        border: 1px solid rgba(124, 200, 168, 0.3) !important;
    }

    [data-theme="auto"] .admin-badge-warning {
        background: transparent !important;
        color: #e8b878 !important;
        border: 1px solid rgba(232, 184, 120, 0.3) !important;
    }

    [data-theme="auto"] .admin-badge-error {
        background: transparent !important;
        color: #e08080 !important;
        border: 1px solid rgba(224, 128, 128, 0.3) !important;
    }

    [data-theme="auto"] .admin-badge-info {
        background: transparent !important;
        color: #7cb8e8 !important;
        border: 1px solid rgba(124, 184, 232, 0.3) !important;
    }

    [data-theme="auto"] .admin-badge-neutral {
        background: transparent !important;
        color: var(--text-tertiary) !important;
        border: 1px solid rgba(160, 160, 160, 0.3) !important;
    }

    [data-theme="auto"] .admin-badge-primary {
        background: transparent !important;
        color: #7cb8e8 !important;
        border: 1px solid rgba(124, 184, 232, 0.3) !important;
    }

    [data-theme="auto"] .admin-badge-new {
        background: transparent !important;
        color: #e08080 !important;
        border: 1px solid rgba(224, 128, 128, 0.3) !important;
    }

    /* Admin Alerts - Auto Theme */
    [data-theme="auto"] .admin-alert-success {
        background: transparent !important;
        border: 1px solid rgba(124, 200, 168, 0.3) !important;
        color: #7cc8a8 !important;
    }

    [data-theme="auto"] .admin-alert-warning {
        background: transparent !important;
        border: 1px solid rgba(232, 184, 120, 0.3) !important;
        color: #e8b878 !important;
    }

    [data-theme="auto"] .admin-alert-error {
        background: transparent !important;
        border: 1px solid rgba(224, 128, 128, 0.3) !important;
        color: #e08080 !important;
    }

    [data-theme="auto"] .admin-alert-info {
        background: transparent !important;
        border: 1px solid rgba(124, 184, 232, 0.3) !important;
        color: #7cb8e8 !important;
    }

    /* Admin Buttons - Auto Theme */
    [data-theme="auto"] .admin-btn-primary {
        background: transparent !important;
        color: #5aafff !important;
        border: 1px solid rgba(90, 175, 255, 0.4) !important;
    }

    [data-theme="auto"] .admin-btn-primary:hover {
        background: rgba(90, 175, 255, 0.1) !important;
        border-color: rgba(90, 175, 255, 0.6) !important;
    }

    [data-theme="auto"] .admin-btn-secondary {
        background: transparent !important;
        color: var(--text-tertiary) !important;
        border: 1px solid rgba(160, 160, 160, 0.3) !important;
    }

    [data-theme="auto"] .admin-btn-secondary:hover {
        background: rgba(160, 160, 160, 0.1) !important;
        border-color: rgba(160, 160, 160, 0.5) !important;
        color: var(--text-secondary) !important;
    }

    [data-theme="auto"] .admin-btn-outline {
        background: transparent !important;
        color: var(--text-tertiary) !important;
        border-color: rgba(160, 160, 160, 0.3) !important;
    }

    [data-theme="auto"] .admin-btn-outline:hover {
        background: rgba(160, 160, 160, 0.1) !important;
        border-color: rgba(160, 160, 160, 0.5) !important;
    }

    [data-theme="auto"] .admin-btn-danger {
        background: transparent !important;
        color: #e08080 !important;
        border: 1px solid rgba(224, 128, 128, 0.3) !important;
    }

    [data-theme="auto"] .admin-btn-danger:hover {
        background: rgba(224, 128, 128, 0.1) !important;
        border-color: rgba(224, 128, 128, 0.5) !important;
    }

    [data-theme="auto"] .admin-btn-ghost {
        background: transparent !important;
        color: var(--text-tertiary) !important;
    }

    [data-theme="auto"] .admin-btn-ghost:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: var(--text-secondary) !important;
    }

    /* Admin Info Grid - Auto Theme */
    [data-theme="auto"] .admin-info-grid {
        background: #3a3a3a !important;
    }

    [data-theme="auto"] .admin-info-item-label {
        color: var(--text-tertiary) !important;
    }

    [data-theme="auto"] .admin-info-item-value {
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] .admin-code {
        background: #2a2a2a !important;
        border-color: #4a4a4a !important;
        color: #5aafff !important; /* Gleiche Farbe wie link-primary im Auto-Theme */
    }

    [data-theme="auto"] .protokoll-badge {
        background: #454545 !important;
        border-color: #555555 !important;
        color: var(--text-secondary) !important;
    }

    /* Inline Styles überschreiben - Admin Cards mit inline Styles */
    [data-theme="auto"] .admin-card[style*="background: #f9fafb"],
    [data-theme="auto"] .admin-card[style*="background:#f9fafb"] {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-card[style*="background: #eff6ff"],
    [data-theme="auto"] .admin-card[style*="background:#eff6ff"] {
        background: rgba(90, 175, 255, 0.1) !important;
        border-color: rgba(90, 175, 255, 0.3) !important;
    }

    /* Inline Text-Farben überschreiben */
    [data-theme="auto"] [style*="color: #111827"],
    [data-theme="auto"] [style*="color:#111827"],
    [data-theme="auto"] [style*="color: #1a1a1a"],
    [data-theme="auto"] [style*="color:#1a1a1a"],
    [data-theme="auto"] [style*="color: #000"],
    [data-theme="auto"] [style*="color:#000"],
    [data-theme="auto"] [style*="color: black"],
    [data-theme="auto"] [style*="color:black"],
    [data-theme="auto"] [style*="color: #374151"],
    [data-theme="auto"] [style*="color:#374151"] {
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] [style*="color: #6b7280"],
    [data-theme="auto"] [style*="color:#6b7280"] {
        color: var(--text-tertiary) !important;
    }

    /* Inline Border-Farben überschreiben */
    [data-theme="auto"] [style*="border: 1px solid #e5e7eb"],
    [data-theme="auto"] [style*="border:1px solid #e5e7eb"],
    [data-theme="auto"] [style*="border-top: 1px solid #e5e7eb"],
    [data-theme="auto"] [style*="border-top:1px solid #e5e7eb"],
    [data-theme="auto"] [style*="border-bottom: 1px solid #e5e7eb"],
    [data-theme="auto"] [style*="border-bottom:1px solid #e5e7eb"] {
        border-color: #4a4a4a !important;
    }

    /* Inline Background-Farben für Labels/Checkboxes überschreiben - Sehr spezifisch */
    [data-theme="auto"] label[style*="background: #ffffff"],
    [data-theme="auto"] label[style*="background:#ffffff"],
    [data-theme="auto"] label[style*="background: #FFFFFF"],
    [data-theme="auto"] label[style*="background:#FFFFFF"],
    [data-theme="auto"] label[style*="background: white"],
    [data-theme="auto"] label[style*="background:white"] {
        background: #454545 !important;
        border-color: #555555 !important;
    }

    [data-theme="auto"] label[style*="background: transparent"],
    [data-theme="auto"] label[style*="background:transparent"] {
        background: transparent !important;
        border-color: transparent !important;
    }

    /* Admin Checkbox Labels - Auto Theme - Sehr spezifisch */
    [data-theme="auto"] .admin-checkbox[style*="background: #ffffff"],
    [data-theme="auto"] .admin-checkbox[style*="background:#ffffff"],
    [data-theme="auto"] .admin-checkbox[style*="background: #FFFFFF"],
    [data-theme="auto"] .admin-checkbox[style*="background:#FFFFFF"],
    [data-theme="auto"] .admin-checkbox[style*="background: white"],
    [data-theme="auto"] .admin-checkbox[style*="background:white"] {
        background: #454545 !important;
        border-color: #555555 !important;
    }

    [data-theme="auto"] .admin-checkbox[style*="background: transparent"],
    [data-theme="auto"] .admin-checkbox[style*="background:transparent"] {
        background: transparent !important;
        border-color: transparent !important;
    }

    /* Permission Labels in Admin Cards - Auto Theme - Sehr spezifisch */
    [data-theme="auto"] .admin-card label[style*="background: #ffffff"],
    [data-theme="auto"] .admin-card label[style*="background:#ffffff"],
    [data-theme="auto"] .admin-card label[style*="background: #FFFFFF"],
    [data-theme="auto"] .admin-card label[style*="background:#FFFFFF"],
    [data-theme="auto"] .admin-card label[style*="background: white"],
    [data-theme="auto"] .admin-card label[style*="background:white"] {
        background: #454545 !important;
        border-color: #555555 !important;
    }

    /* Text-Farben in Permission Labels überschreiben - Sehr spezifisch */
    [data-theme="auto"] label[style*="color: #111827"] span,
    [data-theme="auto"] label[style*="color:#111827"] span,
    [data-theme="auto"] label[style*="color: #111827"] div,
    [data-theme="auto"] label[style*="color:#111827"] div,
    [data-theme="auto"] label[style*="color: #111827"],
    [data-theme="auto"] label[style*="color:#111827"],
    [data-theme="auto"] .admin-checkbox[style*="color: #111827"] span,
    [data-theme="auto"] .admin-checkbox[style*="color:#111827"] span,
    [data-theme="auto"] .admin-checkbox[style*="color: #111827"] div,
    [data-theme="auto"] .admin-checkbox[style*="color:#111827"] div,
    [data-theme="auto"] .admin-checkbox[style*="color: #111827"],
    [data-theme="auto"] .admin-checkbox[style*="color:#111827"],
    [data-theme="auto"] .admin-card label span[style*="color: #111827"],
    [data-theme="auto"] .admin-card label div[style*="color: #111827"] {
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] label[style*="color: #6b7280"] span,
    [data-theme="auto"] label[style*="color:#6b7280"] span,
    [data-theme="auto"] label[style*="color: #6b7280"] div,
    [data-theme="auto"] label[style*="color:#6b7280"] div,
    [data-theme="auto"] label[style*="color: #6b7280"],
    [data-theme="auto"] label[style*="color:#6b7280"],
    [data-theme="auto"] .admin-checkbox[style*="color: #6b7280"] span,
    [data-theme="auto"] .admin-checkbox[style*="color:#6b7280"] span,
    [data-theme="auto"] .admin-checkbox[style*="color: #6b7280"] div,
    [data-theme="auto"] .admin-checkbox[style*="color:#6b7280"] div,
    [data-theme="auto"] .admin-checkbox[style*="color: #6b7280"],
    [data-theme="auto"] .admin-checkbox[style*="color:#6b7280"],
    [data-theme="auto"] .admin-card label span[style*="color: #6b7280"],
    [data-theme="auto"] .admin-card label div[style*="color: #6b7280"] {
        color: var(--text-tertiary) !important;
    }

    /* Border-Farben in Permission Labels überschreiben */
    [data-theme="auto"] label[style*="border: 1px solid #d1d5db"],
    [data-theme="auto"] label[style*="border:1px solid #d1d5db"],
    [data-theme="auto"] label[style*="border-color: #d1d5db"],
    [data-theme="auto"] label[style*="border-color:#d1d5db"],
    [data-theme="auto"] .admin-checkbox[style*="border: 1px solid #d1d5db"],
    [data-theme="auto"] .admin-checkbox[style*="border:1px solid #d1d5db"],
    [data-theme="auto"] .admin-checkbox[style*="border-color: #d1d5db"],
    [data-theme="auto"] .admin-checkbox[style*="border-color:#d1d5db"] {
        border-color: #555555 !important;
    }

    /* Permission Cards - Auto Theme (für inline styled cards) */
    [data-theme="auto"] .admin-card[style*="padding: 1.25rem"],
    [data-theme="auto"] .admin-card[style*="padding:0.875rem"] {
        background: #3a3a3a !important;
        border-color: #4a4a4a !important;
    }

    [data-theme="auto"] .admin-card[style*="padding: 1.25rem"] [style*="border-bottom: 1px solid #e5e7eb"],
    [data-theme="auto"] .admin-card[style*="padding:0.875rem"] [style*="border-bottom: 1px solid #e5e7eb"] {
        border-bottom-color: #4a4a4a !important;
    }
}

/* ============================================================
   ADMIN GROUPS MANAGEMENT STYLES
   (Ehemals: admin-groups.css)
   ============================================================ */

/* Manage User Card */
.manage-user-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.manage-user-card-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.manage-user-card-header h2 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* Group Card */
.group-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--bg-white);
    transition: all var(--transition-fast);
}

.group-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-medium);
}

.group-card-primary {
    background: var(--bg-gray);
    border-color: var(--border-medium);
}

.group-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}

.group-card-title {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Permission Module */
.permission-module {
    background: var(--bg-gray);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.permission-module-title {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.permission-item {
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    transition: background var(--transition-fast);
}

.permission-item.checked {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
}

.permission-item-name {
    font-weight: var(--font-medium);
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.permission-item-desc {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--text-tertiary);
}

.empty-state-icon {
    font-size: 2rem;
    opacity: 0.3;
    margin-bottom: var(--space-md);
}

.empty-state-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.empty-state-text {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.manage-user-card-header p {
    margin: var(--space-sm) 0 0 0;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Admin Grid */
.admin-grid-2-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: var(--space-xl);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.info-item {
    background: var(--bg-gray);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.info-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.info-value {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* Members Table */
.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.members-table th {
    text-align: left;
    padding: var(--space-md);
    background: var(--bg-gray);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-light);
}

.members-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.members-table tr:hover {
    background: var(--bg-gray);
}

/* Permission Module */
.permission-module {
    margin-bottom: var(--space-xl);
}

.permission-module-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-light);
}

.permission-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-sm);
}

.permission-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-gray);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.permission-check {
    color: var(--success-500);
    font-weight: var(--font-bold);
}

/* Section Title */
.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* ============================================================
   RESPONSIVE - Admin Groups
   ============================================================ */

@media (max-width: 768px) {
    .manage-user-card {
        padding: var(--space-lg);
    }
    
    .group-card {
        padding: var(--space-md);
    }
    
    .permission-module {
        padding: var(--space-lg);
    }
}

/* ============================================================
   DARK MODE SUPPORT - Admin Groups
   ============================================================ */

[data-theme="dark"] .manage-user-card {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .manage-user-card-header {
    border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .manage-user-card-header h2 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .manage-user-card-header p {
    color: #808080 !important;
}

[data-theme="dark"] .group-card {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.2) !important;
}

[data-theme="dark"] .group-card:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(160, 160, 160, 0.3) !important;
}

[data-theme="dark"] .group-card-primary {
    background: rgba(124, 184, 232, 0.05) !important;
    border-color: rgba(124, 184, 232, 0.2) !important;
}

[data-theme="dark"] .group-card-title {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .permission-module {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .permission-module-title {
    color: #e0e0e0 !important;
    border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .permission-item {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.15) !important;
}

[data-theme="dark"] .permission-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .permission-item.checked {
    background: rgba(124, 184, 232, 0.1) !important;
    border-color: rgba(124, 184, 232, 0.3) !important;
}

[data-theme="dark"] .permission-item-name {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .permission-item-desc {
    color: #808080 !important;
}

[data-theme="dark"] .empty-state {
    color: #808080 !important;
}

[data-theme="dark"] .empty-state-title {
    color: #a0a0a0 !important;
}

[data-theme="dark"] .empty-state-text {
    color: #707070 !important;
}

[data-theme="dark"] .info-item {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.2) !important;
}

[data-theme="dark"] .info-label {
    color: #808080 !important;
}

[data-theme="dark"] .info-value {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .members-table th {
    background: #2a2a2a !important;
    color: #c0c0c0 !important;
    border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .members-table td {
    color: #c0c0c0 !important;
    border-bottom-color: rgba(160, 160, 160, 0.15) !important;
}

[data-theme="dark"] .members-table tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .section-title {
    color: #e0e0e0 !important;
}

/* ============================================================
   AUTO THEME - Dark Mode (System Preference) - Admin Groups
   ============================================================ */

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .manage-user-card {
        background: var(--bg-white) !important;
        border-color: var(--border-light) !important;
    }

    [data-theme="auto"] .manage-user-card-header {
        border-bottom-color: var(--border-light) !important;
    }

    [data-theme="auto"] .manage-user-card-header h2 {
        color: var(--text-primary) !important;
    }

    [data-theme="auto"] .manage-user-card-header p {
        color: var(--text-tertiary) !important;
    }

    [data-theme="auto"] .group-card {
        background: var(--bg-white) !important;
        border-color: var(--border-light) !important;
    }

    [data-theme="auto"] .group-card:hover {
        background: var(--bg-hover) !important;
        border-color: var(--border-medium) !important;
    }

    [data-theme="auto"] .group-card-primary {
        background: rgba(90, 175, 255, 0.1) !important;
        border-color: rgba(90, 175, 255, 0.3) !important;
    }

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

    [data-theme="auto"] .permission-module {
        background: var(--bg-white) !important;
        border-color: var(--border-light) !important;
    }

    [data-theme="auto"] .permission-module-title {
        color: var(--text-primary) !important;
        border-bottom-color: var(--border-light) !important;
    }

    [data-theme="auto"] .permission-item {
        background: var(--bg-hover) !important;
        border-color: var(--border-medium) !important;
    }

    [data-theme="auto"] .permission-item:hover {
        background: var(--bg-active) !important;
    }

    [data-theme="auto"] .permission-item.checked {
        background: rgba(90, 175, 255, 0.15) !important;
        border-color: rgba(90, 175, 255, 0.4) !important;
    }

    [data-theme="auto"] .permission-item-name {
        color: var(--text-secondary) !important;
    }

    [data-theme="auto"] .permission-item-desc {
        color: var(--text-tertiary) !important;
    }

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

    [data-theme="auto"] .empty-state-title {
        color: var(--text-tertiary) !important;
    }

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

    [data-theme="auto"] .info-item {
        background: var(--bg-white) !important;
        border-color: var(--border-light) !important;
    }

    [data-theme="auto"] .info-label {
        color: var(--text-tertiary) !important;
    }

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

    [data-theme="auto"] .members-table th {
        background: var(--bg-gray) !important;
        color: var(--text-secondary) !important;
        border-bottom-color: var(--border-light) !important;
    }

    [data-theme="auto"] .members-table td {
        color: var(--text-secondary) !important;
        border-bottom-color: rgba(74, 74, 74, 0.5) !important;
    }

    [data-theme="auto"] .members-table tr:hover {
        background: var(--bg-hover) !important;
    }

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

/* ============================================================
   ADMIN SETTINGS STYLES
   (Ehemals: admin-settings.css)
   ============================================================ */

.settings-container {
    max-width: 900px;
    margin: 0 auto;
}

.settings-form {
    max-width: 900px;
    margin: 0 auto;
}

.settings-section {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border-light);
}

.settings-section-icon {
    font-size: var(--text-2xl);
    opacity: 0.8;
}

.settings-section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.settings-section-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

.settings-form .form-section {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.settings-form .form-section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-light);
}

.settings-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
}

.settings-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
}

.settings-form .form-group label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.settings-form .form-group input,
.settings-form .form-group select {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.settings-form .form-group input:focus,
.settings-form .form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.settings-form .form-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

.settings-form .test-section,
.test-section {
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    padding: var(--space-xl, 1.5rem);
    margin-top: var(--space-xl, 1.5rem);
    box-shadow: var(--shadow-sm);
}

.settings-form .test-section-title,
.test-section-title {
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #1f2937);
    margin: 0 0 var(--space-sm, 0.5rem) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
}

.test-section > .form-hint {
    margin-bottom: var(--space-lg, 1rem);
}

.settings-form .button-group {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

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

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.form-label .required {
    color: var(--error-500);
}

.form-input,
.form-select,
.form-textarea {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
    max-width: 450px; /* Einheitliche Feldbreite */
}

/* Select-Dropdowns schmaler */
.form-select {
    max-width: 350px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
    max-width: 550px; /* Textareas etwas breiter */
}

/* Warning Box */
.warning-box {
    background: var(--warning-100);
    border: 1px solid var(--warning-300);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.warning-box-title {
    font-weight: var(--font-semibold);
    color: var(--warning-700);
    margin-bottom: var(--space-sm);
}

.warning-box-text {
    font-size: var(--text-sm);
    color: var(--warning-800);
}

/* Test Results */
.test-results {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}

.test-results table {
    width: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
}

.test-results th {
    background: var(--bg-gray);
    padding: var(--space-sm);
    text-align: left;
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--border-light);
}

.test-results td {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--border-light);
}

/* Toggle Field */
.toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
}

.toggle-label-group {
    flex: 1;
}

.toggle-label {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.toggle-description {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-light);
}

.btn-save {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-save:hover {
    background: #1565B8; /* Dunklerer Blauton */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-cancel {
    background: var(--bg-white);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel:hover {
    background: var(--bg-gray);
    border-color: var(--border-medium);
    text-decoration: none;
    color: var(--text-primary);
}

/* Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ============================================================
   RESPONSIVE - Admin Settings
   ============================================================ */

@media (max-width: 768px) {
    .settings-container,
    .settings-form {
        max-width: 100%;
    }
    
    .settings-section {
        padding: var(--space-lg);
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-form .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DARK MODE SUPPORT - Admin Settings
   ============================================================ */

[data-theme="dark"] .settings-section,
[data-theme="dark"] .settings-form .form-section,
[data-theme="dark"] .test-section {
    background: #252525 !important;
    border-color: #3a3a3a !important;
}

[data-theme="dark"] .settings-section-header {
    border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .settings-section-title,
[data-theme="dark"] .settings-form .form-section-title {
    color: #e0e0e0 !important;
    border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .settings-section-subtitle {
    color: #808080 !important;
}

[data-theme="dark"] .settings-form .form-group label,
[data-theme="dark"] .form-label {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .settings-form .form-group input,
[data-theme="dark"] .settings-form .form-group select,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.25) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .settings-form .form-group input:focus,
[data-theme="dark"] .settings-form .form-group select:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: rgba(124, 184, 232, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(124, 184, 232, 0.15) !important;
}

[data-theme="dark"] .settings-form .form-hint,
[data-theme="dark"] .form-hint {
    color: #707070 !important;
}

[data-theme="dark"] .test-section-title {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .warning-box {
    background: transparent !important;
    border: 1px solid rgba(232, 184, 120, 0.3) !important;
}

[data-theme="dark"] .warning-box-title {
    color: #e8b878 !important;
}

[data-theme="dark"] .warning-box-text {
    color: #c9a882 !important;
}

[data-theme="dark"] .test-results {
    background: transparent !important;
    border: 1px solid rgba(160, 160, 160, 0.2) !important;
}

[data-theme="dark"] .test-results th {
    background: #2a2a2a !important;
    color: #c0c0c0 !important;
    border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .test-results td {
    color: #c0c0c0 !important;
    border-bottom-color: rgba(160, 160, 160, 0.15) !important;
}

[data-theme="dark"] .toggle-label {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .toggle-description {
    color: #707070 !important;
}

[data-theme="dark"] .action-buttons {
    border-top-color: #3a3a3a !important;
}

[data-theme="dark"] .btn-save {
    background: transparent !important;
    color: #7cb8e8 !important;
    border: 1px solid rgba(124, 184, 232, 0.4) !important;
}

[data-theme="dark"] .btn-save:hover {
    background: rgba(124, 184, 232, 0.1) !important;
    border-color: rgba(124, 184, 232, 0.6) !important;
}

[data-theme="dark"] .btn-cancel {
    background: transparent !important;
    color: #a0a0a0 !important;
    border: 1px solid rgba(160, 160, 160, 0.3) !important;
}

[data-theme="dark"] .btn-cancel:hover {
    background: rgba(160, 160, 160, 0.1) !important;
    border-color: rgba(160, 160, 160, 0.5) !important;
}

[data-theme="dark"] .checkbox-label {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .checkbox-label input[type="checkbox"] {
    accent-color: #7cb8e8;
}

/* ============================================================
   AUTO THEME SUPPORT - Dark Mode (System Preference) - Admin Settings
   ============================================================ */

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .settings-section,
    [data-theme="auto"] .settings-form .form-section,
    [data-theme="auto"] .test-section {
        background: #252525 !important;
        border-color: #3a3a3a !important;
    }

    [data-theme="auto"] .settings-section-header {
        border-bottom-color: #3a3a3a !important;
    }

    [data-theme="auto"] .settings-section-title,
    [data-theme="auto"] .settings-form .form-section-title {
        color: #e0e0e0 !important;
        border-bottom-color: #3a3a3a !important;
    }

    [data-theme="auto"] .settings-section-subtitle {
        color: #808080 !important;
    }

    [data-theme="auto"] .settings-form .form-group label,
    [data-theme="auto"] .form-label {
        color: #c0c0c0 !important;
    }

    [data-theme="auto"] .settings-form .form-group input,
    [data-theme="auto"] .settings-form .form-group select,
    [data-theme="auto"] .form-input,
    [data-theme="auto"] .form-select,
    [data-theme="auto"] .form-textarea {
        background: transparent !important;
        border: 1px solid rgba(160, 160, 160, 0.25) !important;
        color: #e0e0e0 !important;
    }

    [data-theme="auto"] .settings-form .form-group input:focus,
    [data-theme="auto"] .settings-form .form-group select:focus,
    [data-theme="auto"] .form-input:focus,
    [data-theme="auto"] .form-select:focus,
    [data-theme="auto"] .form-textarea:focus {
        border-color: rgba(124, 184, 232, 0.5) !important;
        box-shadow: 0 0 0 2px rgba(124, 184, 232, 0.15) !important;
    }

    [data-theme="auto"] .settings-form .form-hint,
    [data-theme="auto"] .form-hint {
        color: #707070 !important;
    }

    [data-theme="auto"] .test-section-title {
        color: #e0e0e0 !important;
    }

    [data-theme="auto"] .warning-box {
        background: transparent !important;
        border: 1px solid rgba(232, 184, 120, 0.3) !important;
    }

    [data-theme="auto"] .warning-box-title {
        color: #e8b878 !important;
    }

    [data-theme="auto"] .warning-box-text {
        color: #c9a882 !important;
    }

    [data-theme="auto"] .test-results {
        background: transparent !important;
        border: 1px solid rgba(160, 160, 160, 0.2) !important;
    }

    [data-theme="auto"] .test-results th {
        background: #2a2a2a !important;
        color: #c0c0c0 !important;
        border-bottom-color: #3a3a3a !important;
    }

    [data-theme="auto"] .test-results td {
        color: #c0c0c0 !important;
        border-bottom-color: rgba(160, 160, 160, 0.15) !important;
    }

    [data-theme="auto"] .toggle-label {
        color: #c0c0c0 !important;
    }

    [data-theme="auto"] .toggle-description {
        color: #707070 !important;
    }

    [data-theme="auto"] .action-buttons {
        border-top-color: #3a3a3a !important;
    }

    [data-theme="auto"] .btn-save {
        background: transparent !important;
        color: #7cb8e8 !important;
        border: 1px solid rgba(124, 184, 232, 0.4) !important;
    }

    [data-theme="auto"] .btn-save:hover {
        background: rgba(124, 184, 232, 0.1) !important;
        border-color: rgba(124, 184, 232, 0.6) !important;
    }

    [data-theme="auto"] .btn-cancel {
        background: transparent !important;
        color: #a0a0a0 !important;
        border: 1px solid rgba(160, 160, 160, 0.3) !important;
    }

    [data-theme="auto"] .btn-cancel:hover {
        background: rgba(160, 160, 160, 0.1) !important;
        border-color: rgba(160, 160, 160, 0.5) !important;
    }

    [data-theme="auto"] .checkbox-label {
        color: #c0c0c0 !important;
    }

    [data-theme="auto"] .checkbox-label input[type="checkbox"] {
        accent-color: #7cb8e8;
    }
}

/* ============================================================
   SETTINGS OVERVIEW GRID - Tiles für Settings-Übersicht
   ============================================================ */

.settings-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--space-lg, 1.5rem);
}

.settings-overview-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg, 1rem);
    padding: var(--space-xl, 1.5rem);
    background: var(--bg-gray, #f9fafb);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    text-decoration: none !important;
    color: inherit;
    transition: all 0.2s ease;
}

.settings-overview-tile:hover,
.settings-overview-tile:focus,
.settings-overview-tile:active {
    background: var(--bg-white, #ffffff);
    border-color: var(--accent-primary, #4b5563);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    text-decoration: none !important;
}

.settings-overview-tile-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.settings-overview-tile-content {
    flex: 1;
    min-width: 0;
}

.settings-overview-tile-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #1f2937);
    text-decoration: none !important;
}

.settings-overview-tile-content p {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-tertiary, #6b7280);
    line-height: 1.5;
    text-decoration: none !important;
}

.settings-overview-tile-status {
    margin-top: 0.75rem;
}

/* Dark Mode für Settings Overview */
[data-theme="dark"] .settings-overview-tile {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .settings-overview-tile:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(124, 184, 232, 0.4);
}

[data-theme="dark"] .settings-overview-tile-content h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .settings-overview-tile-content p {
    color: #909090;
}

/* Auto Theme Dark Mode für Settings Overview */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .settings-overview-tile {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="auto"] .settings-overview-tile:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(90, 175, 255, 0.4);
    }

    [data-theme="auto"] .settings-overview-tile-content h3 {
        color: #e0e0e0;
    }

    [data-theme="auto"] .settings-overview-tile-content p {
        color: #909090;
    }
}

/* Responsive für Settings Overview */
@media (max-width: 640px) {
    .settings-overview-tile {
        padding: var(--space-lg, 1rem);
    }
    
    .settings-overview-tile-icon {
        font-size: 1.5rem;
    }
}