/* ============================================
   ROTA Expertise Tool - Global Dark Mode
   Gedeeld CSS voor ALLE pagina's
   ============================================ */

/* === BASIS === */
body.dark {
    background: #121215 !important;
    color: #f0f0f0 !important;
}

/* === GENERIEK: Tekst === */
body.dark div { color: #e5e5e5; }
body.dark span { color: #e5e5e5; }
body.dark p { color: #e5e5e5; }
body.dark li { color: #e5e5e5; }
body.dark td { color: #e5e5e5; }
body.dark th { color: #e5e5e5; }
body.dark label { color: #ccc !important; }
body.dark a { color: #60a5fa !important; }
body.dark small { color: #888 !important; }
body.dark .hint { color: #888 !important; }
body.dark .text-muted { color: #888 !important; }

/* === HEADER / TOPBAR === */
body.dark .header {
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) !important;
}
body.dark .topbar {
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) !important;
}

/* === CONTAINER / ACHTERGROND === */
body.dark .container { background: transparent !important; }

/* === KAARTEN / CARDS === */
body.dark .card,
body.dark .stat-card,
body.dark .report-card,
body.dark .type-card,
body.dark .group {
    background: #1e1e22 !important;
    border-color: #444 !important;
    color: #e5e5e5 !important;
}
body.dark .card-head {
    background: #252528 !important;
}
body.dark .card-head h2 { color: #60a5fa !important; }

/* === FORMULIER ELEMENTEN === */
body.dark input {
    background: #2a2a2e !important;
    border-color: #555 !important;
    color: #f0f0f0 !important;
}
body.dark select {
    background: #2a2a2e !important;
    border-color: #555 !important;
    color: #f0f0f0 !important;
}
body.dark textarea {
    background: #2a2a2e !important;
    border-color: #555 !important;
    color: #f0f0f0 !important;
}

/* === KNOPPEN === */
body.dark .btn,
body.dark .btn-new,
body.dark .profile-btn,
body.dark button {
    background: #333 !important;
    border-color: #555 !important;
    color: #e5e5e5 !important;
}
body.dark .btn.primary,
body.dark .btn-new {
    background: #2563eb !important;
    color: #fff !important;
}
body.dark .btn.success {
    background: #16a34a !important;
    color: #fff !important;
}
body.dark .logout-btn {
    background: rgba(220,50,50,0.3) !important;
    color: #fca5a5 !important;
}

/* === BERICHTEN === */
body.dark .message.success { background: #14532d !important; color: #86efac !important; border-color: #22c55e !important; }
body.dark .message.error { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #ef4444 !important; }

/* === BADGES === */
body.dark .badge.concept { background: #78350f !important; color: #fef3c7 !important; }
body.dark .badge.definitief { background: #14532d !important; color: #86efac !important; }
body.dark .status-badge { opacity: 0.9; }

/* === TOOLBAR / ZOEKBALK === */
body.dark .toolbar { background: transparent !important; }
body.dark .search-box input {
    background: #2a2a2e !important;
    border-color: #555 !important;
    color: #f0f0f0 !important;
}
body.dark .search-box select {
    background: #2a2a2e !important;
    border-color: #555 !important;
    color: #f0f0f0 !important;
}

/* === SELECTIE TOOLBAR === */
body.dark .selection-toolbar {
    background: #1a2744 !important;
    border-color: #2d4a7a !important;
}

/* === STATISTIEK KAARTEN === */
body.dark .stat-card .label { color: #888 !important; }
body.dark .stat-card .value { color: #f0f0f0 !important; }

/* === RAPPORT KAARTEN (dashboard) === */
body.dark .report-card {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .report-card:hover {
    background: #252528 !important;
    border-color: #60a5fa !important;
}
body.dark .report-card a { color: #e5e5e5 !important; text-decoration: none !important; }
body.dark .report-card h3 { color: #f0f0f0 !important; }
body.dark .report-meta span { color: #888 !important; }
body.dark .report-link { color: #e5e5e5 !important; }

/* === TYPE KAARTEN (nieuw rapport) === */
body.dark .type-card {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .type-card:hover {
    background: #252528 !important;
    border-color: #60a5fa !important;
    transform: translateY(-2px);
}
body.dark .type-card h3 { color: #f0f0f0 !important; }
body.dark .type-card p { color: #aaa !important; }
body.dark .type-card .code { color: #888 !important; }

/* === NOTIFICATIES === */
body.dark .notification-dropdown {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .notification-item {
    background: #252528 !important;
    border-color: #333 !important;
}
body.dark .notification-item.unread {
    background: #1a2744 !important;
}
body.dark .notification-header {
    background: #252528 !important;
    border-color: #444 !important;
}

/* === EMPTY STATE === */
body.dark .empty-state { color: #888 !important; }
body.dark .empty-state h3 { color: #aaa !important; }

/* === MODALS === */
body.dark .modal-content,
body.dark .modal-body {
    background: #1e1e22 !important;
    color: #e5e5e5 !important;
    border-color: #444 !important;
}
body.dark .modal-header {
    background: #252528 !important;
    border-color: #444 !important;
}

/* === CHECKBOXES (selectie) === */
body.dark .select-all-wrapper { color: #e5e5e5 !important; }
body.dark .selected-info { color: #aaa !important; }

/* === DARK MODE TOGGLE BUTTON === */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #555;
    background: #1e1e22;
    color: #f0f0f0;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
body:not(.dark) .dark-mode-toggle {
    background: #fff;
    color: #333;
    border-color: #ddd;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* === INLINE STYLE OVERRIDES (voor elementen met hardcoded styles) === */
body.dark div[style*="background:#f8fafc"],
body.dark div[style*="background: #f8fafc"],
body.dark div[style*="background:#fafafa"],
body.dark div[style*="background: #fafafa"],
body.dark div[style*="background:#f5f5f5"],
body.dark div[style*="background: #f5f5f5"],
body.dark div[style*="background:#fff"],
body.dark div[style*="background: #fff"],
body.dark div[style*="background:white"],
body.dark div[style*="background: white"],
body.dark div[style*="background:#ffffff"],
body.dark div[style*="background: #ffffff"] {
    background: #1e1e22 !important;
    color: #e5e5e5 !important;
    border-color: #444 !important;
}

body.dark div[style*="background:#eff6ff"],
body.dark div[style*="background: #eff6ff"],
body.dark div[style*="background:#eef6ff"],
body.dark div[style*="background: #eef6ff"],
body.dark div[style*="background:#f0f9ff"],
body.dark div[style*="background: #f0f9ff"] {
    background: #1a2744 !important;
    color: #93c5fd !important;
    border-color: #2d4a7a !important;
}

body.dark div[style*="border-top:1px solid #dee2e6"],
body.dark div[style*="border-top: 1px solid #dee2e6"] {
    border-top-color: #444 !important;
}

body.dark div[style*="border:1px solid #e2e8f0"],
body.dark div[style*="border: 1px solid #e2e8f0"],
body.dark div[style*="border:1px solid #ddd"],
body.dark div[style*="border: 1px solid #ddd"],
body.dark div[style*="border:1px solid #dee2e6"],
body.dark div[style*="border: 1px solid #dee2e6"] {
    border-color: #444 !important;
}

body.dark div[style*="color:#1f4e79"],
body.dark div[style*="color: #1f4e79"],
body.dark div[style*="color:#1e3a5f"],
body.dark div[style*="color: #1e3a5f"] {
    color: #60a5fa !important;
}
/* === LOGIN PAGINA === */
body.dark .login-container {
    background: #1e1e22 !important;
    color: #e5e5e5 !important;
    border-color: #444 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
body.dark .login-container h1,
body.dark .login-container h2 {
    color: #f0f0f0 !important;
}
body.dark .login-container .subtitle {
    color: #888 !important;
}
body.dark .login-container .form-group label {
    color: #ccc !important;
}
body.dark .login-container input[type="text"],
body.dark .login-container input[type="password"],
body.dark .login-container input[type="email"] {
    background: #2a2a2e !important;
    border-color: #555 !important;
    color: #f0f0f0 !important;
}
body.dark .login-container button[type="submit"],
body.dark .login-container .btn-login {
    background: #2563eb !important;
    color: #fff !important;
}
body.dark .login-container .error {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #ef4444 !important;
}
body.dark .login-container .warning {
    background: #78350f !important;
    color: #fef3c7 !important;
}
body.dark .login-container .register-link a {
    color: #60a5fa !important;
}
body.dark .login-container .footer-text {
    color: #888 !important;
}
body.dark .login-container .access-info {
    color: #666 !important;
}
body.dark .login-container hr {
    border-color: #444 !important;
}
body.dark .copyright-footer {
    color: #666 !important;
}
body.dark .copyright-footer a {
    color: #888 !important;
}

/* === INTAKE BEHEER === */
body.dark .intake-header,
body.dark .intake-nav {
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) !important;
}
body.dark .intake-card,
body.dark .intake-item {
    background: #1e1e22 !important;
    border-color: #444 !important;
    color: #e5e5e5 !important;
}
body.dark .intake-card:hover,
body.dark .intake-item:hover {
    background: #252528 !important;
    border-color: #60a5fa !important;
}
body.dark .intake-stats .stat,
body.dark .stats-grid .stat-card {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .intake-stats .stat .value,
body.dark .stats-grid .stat-card .value {
    color: #f0f0f0 !important;
}
body.dark .intake-stats .stat .label,
body.dark .stats-grid .stat-card .label {
    color: #888 !important;
}
body.dark .kenteken-badge {
    background: #F6C409 !important;
    color: #000 !important;
}
body.dark .status-badge-nieuw {
    background: #14532d !important;
    color: #86efac !important;
}

/* === DOSSIER PAGINA === */
body.dark .dossier-card {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .dossier-header {
    background: #252528 !important;
}
body.dark .timeline-item {
    background: #1e1e22 !important;
    border-color: #444 !important;
}

/* === PROFIEL PAGINA === */
body.dark .profile-card,
body.dark .settings-card {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .profile-header {
    background: #252528 !important;
}

/* === ADMIN PAGINA === */
body.dark .admin-card,
body.dark .admin-panel {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .admin-header {
    background: #252528 !important;
}
body.dark table {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark table th {
    background: #252528 !important;
    color: #e5e5e5 !important;
    border-color: #444 !important;
}
body.dark table td {
    background: #1e1e22 !important;
    color: #e5e5e5 !important;
    border-color: #333 !important;
}
body.dark table tr:hover td {
    background: #2a2a2e !important;
}
/* === DASHBOARD STATUS BADGES === */
body.dark .status-concept {
    background: #78350f !important;
    color: #fef3c7 !important;
}
body.dark .status-definitief {
    background: #14532d !important;
    color: #bbf7d0 !important;
}

/* === DASHBOARD RAPPORT CARDS === */
body.dark .rapport-card {
    background: #1e1e22 !important;
    border-color: #444 !important;
}
body.dark .rapport-card:hover {
    border-color: #60a5fa !important;
    background: #252528 !important;
}
body.dark .rapport-info span {
    color: #aaa !important;
}
body.dark .rapport-number {
    color: #f0f0f0 !important;
}