/* 
 * DARK MODE CSS FIX - Final Version
 * Ersetze die theme-fixes.css komplett mit diesem Code
 * Ausbalancierte Farben statt extremes Schwarz
 */

/* ===== ROOT VARIABLES ===== */
:root {
    /* Light Theme (Standard) */
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f2f2f7;
    --bg-quaternary: #e5e5ea;
    --bg-hover: rgba(0, 0, 0, 0.04);
    
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --text-tertiary: #c7c7cc;
    
    --accent-primary: #007aff;
    --accent-secondary: #0051d5;
    --accent-success: #30d158;
    --accent-warning: #ff9500;
    --accent-error: #ff3b30;
    
    --border-primary: rgba(0, 0, 0, 0.1);
    --border-secondary: rgba(0, 0, 0, 0.06);
    
    --shadow-small: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.2);
    
    --overlay-backdrop: rgba(0, 0, 0, 0.4);
    --overlay-light: rgba(255, 255, 255, 0.8);
}

/* ===== AUSBALANCIERTES DARK THEME ===== */
[data-theme="dark"],
body[data-theme="dark"] {
    /* Weiche, dunkelgraue Töne statt extremes Schwarz */
    --bg-primary: #1a1a1a !important;           /* Sehr dunkles Grau statt Schwarz */
    --bg-secondary: #2d2d30 !important;         /* Dunkelgrau für Container */
    --bg-tertiary: #383838 !important;          /* Mittleres Grau für Hervorhebungen */
    --bg-quaternary: #404040 !important;        /* Helles Grau für Hover */
    --bg-hover: rgba(255, 255, 255, 0.06) !important;
    
    /* Optimierte Textfarben für bessere Lesbarkeit */
    --text-primary: #ffffff !important;         /* Reines Weiß für Haupttext */
    --text-secondary: #b3b3b3 !important;       /* Helles Grau für Sekundärtext */
    --text-tertiary: #8a8a8a !important;        /* Mittleres Grau für unwichtigen Text */
    
    /* Hellere Accent-Farben für besseren Kontrast */
    --accent-primary: #1e90ff !important;       /* Helleres Blau */
    --accent-secondary: #1c7ed6 !important;     
    --accent-success: #40c057 !important;       /* Helleres Grün */
    --accent-warning: #fd7e14 !important;       /* Helleres Orange */
    --accent-error: #fa5252 !important;         /* Helleres Rot */
    
    /* Sichtbare Borders im Dark Mode */
    --border-primary: rgba(255, 255, 255, 0.15) !important;
    --border-secondary: rgba(255, 255, 255, 0.08) !important;
    
    /* Angepasste Schatten */
    --shadow-small: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    --shadow-medium: 0 8px 40px rgba(0, 0, 0, 0.5) !important;
    --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    
    /* Dark Mode Overlays */
    --overlay-backdrop: rgba(0, 0, 0, 0.8) !important;
    --overlay-light: rgba(45, 45, 48, 0.9) !important;
}

/* ===== OPTIMIERTES HIGH CONTRAST THEME ===== */
[data-theme="highContrast"],
body[data-theme="highContrast"] {
    /* Echtes Schwarz-Weiß für maximalen Kontrast */
    --bg-primary: #000000 !important;
    --bg-secondary: #ffffff !important;
    --bg-tertiary: #000000 !important;
    --bg-quaternary: #333333 !important;
    --bg-hover: #444444 !important;
    
    --text-primary: #ffffff !important;
    --text-secondary: #ffffff !important;
    --text-tertiary: #cccccc !important;
    
    /* Leuchtende Farben für Accessibility */
    --accent-primary: #00ffff !important;       /* Cyan */
    --accent-secondary: #00cccc !important;
    --accent-success: #00ff00 !important;       /* Leuchtend Grün */
    --accent-warning: #ffff00 !important;       /* Leuchtend Gelb */
    --accent-error: #ff0000 !important;         /* Leuchtend Rot */
    
    --border-primary: #ffffff !important;
    --border-secondary: #cccccc !important;
    
    --shadow-small: 0 0 0 2px #ffffff !important;
    --shadow-medium: 0 0 0 3px #ffffff !important;
    --shadow-large: 0 0 0 4px #ffffff !important;
    
    --overlay-backdrop: rgba(0, 0, 0, 0.95) !important;
    --overlay-light: rgba(255, 255, 255, 0.95) !important;
}

/* ===== SMOOTH TRANSITIONS ===== */
*, *::before, *::after {
    transition: background-color 0.3s ease, 
               color 0.3s ease, 
               border-color 0.3s ease,
               box-shadow 0.3s ease !important;
}

/* ===== BODY & GRUNDELEMENTE ===== */
html, body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.container {
    background: transparent !important;
}

/* ===== HEADER ===== */
.header {
    background: transparent !important;
    color: var(--text-primary) !important;
}

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

.header p {
    color: var(--text-secondary) !important;
}

/* ===== NAVIGATION ===== */
.nav {
    background: var(--overlay-light) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
}

.nav-content {
    background: transparent !important;
}

.nav-item {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.nav-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.nav-item.active {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* ===== SESSION CONTROLS ===== */
.session-controls {
    background: transparent !important;
}

.session-timer {
    background: rgba(30, 144, 255, 0.15) !important;
    border: 1px solid rgba(30, 144, 255, 0.3) !important;
    color: var(--accent-primary) !important;
}

.session-timer.warning {
    background: rgba(253, 126, 20, 0.15) !important;
    border-color: rgba(253, 126, 20, 0.3) !important;
    color: var(--accent-warning) !important;
}

.session-timer.critical {
    background: rgba(250, 82, 82, 0.15) !important;
    border-color: rgba(250, 82, 82, 0.3) !important;
    color: var(--accent-error) !important;
}

.logout-btn {
    background: rgba(250, 82, 82, 0.15) !important;
    color: var(--accent-error) !important;
    border: 1px solid rgba(250, 82, 82, 0.3) !important;
}

.logout-btn:hover {
    background: rgba(250, 82, 82, 0.25) !important;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.theme-toggle:hover {
    background: var(--bg-quaternary) !important;
}

.theme-selector {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-large) !important;
}

.theme-option {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.theme-option:hover {
    background: var(--bg-tertiary) !important;
}

.theme-option.active {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

.theme-option-desc {
    color: var(--text-secondary) !important;
}

/* ===== SECTIONS & CONTAINERS ===== */
.section,
.stats-section {
    background: transparent !important;
}

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

.section-title i {
    color: var(--accent-primary) !important;
}

/* ===== STATISTICS CARDS ===== */
.stat-card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-secondary) !important;
    box-shadow: var(--shadow-small) !important;
}

.stat-card:hover {
    box-shadow: var(--shadow-medium) !important;
}

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

.stat-label {
    color: var(--text-secondary) !important;
}

/* Spezifische Stat Card Farben */
.stat-card.critical .stat-number { color: var(--accent-error) !important; }
.stat-card.warning .stat-number { color: var(--accent-warning) !important; }
.stat-card.success .stat-number { color: var(--accent-success) !important; }
.stat-card.info .stat-number { color: var(--accent-primary) !important; }

/* ===== TABLES - RUNDE ECKEN BEHOBEN ===== */
.table-container {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-secondary) !important;
    box-shadow: var(--shadow-small) !important;
    border-radius: 12px !important;
    overflow: hidden; /* Verhindert komische Ecken */
}

.table-header {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

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

table {
    background: var(--bg-secondary) !important;
    border-radius: 0 !important; /* Tabelle selbst hat keine Rundung */
}

th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-secondary) !important;
}

tr:hover td {
    background: var(--bg-tertiary) !important;
}

/* ===== CARDS ===== */
.card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-secondary) !important;
    box-shadow: var(--shadow-small) !important;
}

.card:hover {
    box-shadow: var(--shadow-medium) !important;
}

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

.card-category {
    color: var(--accent-primary) !important;
}

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

/* ===== BUTTONS ===== */
.btn-primary {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent-primary) !important;
}

.btn-primary:hover {
    background: var(--accent-secondary) !important;
    border-color: var(--accent-secondary) !important;
}

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

.btn-secondary:hover {
    background: var(--bg-quaternary) !important;
}

.btn-outline {
    background: transparent !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--accent-primary) !important;
}

.btn-outline:hover {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* ===== MODALS - POPUP FIX ===== */
.modal {
    background: var(--overlay-backdrop) !important;
    backdrop-filter: blur(20px) !important;
}

.modal-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-large) !important;
}

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

/* ===== DELETE MODAL SPEZIFISCH ===== */
.delete-modal {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

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

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

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

/* ===== CONFIRM MODAL SPEZIFISCH ===== */
.confirm-modal {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

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

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

/* ===== FORMS ===== */
.form-label {
    color: var(--text-primary) !important;
}

.form-input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.form-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.2) !important;
}

.form-input::placeholder {
    color: var(--text-tertiary) !important;
}

.form-actions {
    border-top: 1px solid var(--border-secondary) !important;
}

/* ===== DROPDOWNS ===== */
.dropdown {
    overflow: visible !important;
    position: relative; /* wichtig, falls dropdown-menu absolut positioniert ist */
}

.dropdown-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.dropdown-btn:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    
}

.dropdown-menu {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-medium) !important;
    overflow: visible !important;
    position: absolute;
    z-index: 9999; /* oder höher je nach Stack */
}

.dropdown-item {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background: var(--bg-tertiary) !important;
}

.dropdown-item.delete:hover {
    background: rgba(250, 82, 82, 0.15) !important;
    color: var(--accent-error) !important;
}

/* ===== STATUS BADGES ===== */
.status {
    color: #ffffff !important;
}

.status.open {
    background: var(--accent-error) !important;
}

.status.retest {
    background: var(--accent-warning) !important;
}

.status.fixed,
.status.resolved {
    background: var(--accent-success) !important;
}

.status.implemented {
    background: var(--accent-primary) !important;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-medium) !important;
}

.toast.success {
    border-color: var(--accent-success) !important;
}

.toast.error {
    border-color: var(--accent-error) !important;
}

.toast.warning {
    border-color: var(--accent-warning) !important;
}

.toast.info {
    border-color: var(--accent-primary) !important;
}

/* ===== LOADING & ERROR STATES ===== */
.loading {
    color: var(--text-secondary) !important;
}

.error {
    background: rgba(250, 82, 82, 0.15) !important;
    border: 1px solid var(--accent-error) !important;
    color: var(--accent-error) !important;
}

/* ===== FOOTER ===== */
footer {
    color: var(--text-secondary) !important;
    border-top: 1px solid var(--border-primary) !important;
}

/* ===== LINKS ===== */
.link {
    color: var(--accent-primary) !important;
}

.link:hover {
    color: var(--accent-secondary) !important;
}

/* ===== HIGH CONTRAST SPEZIFISCHE FIXES ===== */
[data-theme="highContrast"] .nav-item.active {
    background: var(--accent-primary) !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
}

[data-theme="highContrast"] .btn-primary {
    background: var(--accent-primary) !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
}

[data-theme="highContrast"] .stat-card,
[data-theme="highContrast"] .card,
[data-theme="highContrast"] .table-container {
    border: 3px solid #ffffff !important;
    background: #ffffff !important;
}

[data-theme="highContrast"] .modal-content {
    background: #ffffff !important;
    color: #000000 !important;
    border: 3px solid #ffffff !important;
}

[data-theme="highContrast"] .form-input {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

[data-theme="highContrast"] th {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

[data-theme="highContrast"] td {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

/* ===== KEYBOARD SHORTCUTS MODAL ===== */
.shortcuts-help-overlay {
    background: var(--overlay-backdrop) !important;
}

.shortcuts-help-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.shortcuts-help-title {
    color: var(--text-primary) !important;
}

.shortcuts-category {
    background: var(--bg-tertiary) !important;
}

.shortcuts-category-title {
    color: var(--text-primary) !important;
}

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

.shortcut-key {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .theme-toggle span {
        display: none !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .theme-toggle,
    .logout-btn,
    .session-timer {
        display: none !important;
    }
}