/* ============================================================================ Dark Mode — MGTickets Portal ---------------------------------------------------------------------------- Geactiveerd via . Werkt grotendeels door de grijs-ramp SEMANTISCH om te keren: in dark mode is --gray-50 het donkerste vlak en --gray-900 de lichtste tekst. Daardoor bewegen alle componenten die var(--gray-*) gebruiken automatisch mee (body, kaarten, tekst, borders). Hardcoded white-vlakken in de gedeelde shell + bootstrap worden hieronder gericht overschreven. Let op: losse pagina's met veel hardcoded hex-kleuren kunnen nog kleine "lekken" hebben (donkere tekst op donkere achtergrond). Die vergen een per-pagina polish-ronde — zie de gedeelde overrides onderaan als basis. ============================================================================ */ html[data-theme="dark"] { color-scheme: dark; /* Omgekeerde grijs-ramp (laag = donker vlak, hoog = lichte tekst) */ --gray-900: #f6f6fb; /* koppen / sterkste tekst */ --gray-800: #e8e8f2; /* body-tekst */ --gray-700: #d2d2e2; --gray-600: #b4b4cc; /* secundaire tekst */ --gray-500: #9090ac; /* muted tekst */ --gray-400: #6d6d8a; /* placeholders / iconen */ --gray-300: #3a3a56; /* sterke borders */ --gray-200: #2a2a40; /* borders / scheidingslijnen */ --gray-100: #14141f; /* pagina-achtergrond */ --gray-50: #101019; /* diepste vlak */ /* Oppervlakken — iets lichter dan de pagina zodat kaarten "zweven" */ --surface: #1e1e30; --surface-2: #27273f; --border-soft: #2e2e48; /* Pastel-badges (light tokens) gedempt zodat ze niet schreeuwen op donker */ --primary-light: rgba(229, 57, 53, 0.20); --success-light: rgba(76, 175, 80, 0.18); --warning-light: rgba(255, 152, 0, 0.18); --error-light: rgba(244, 67, 54, 0.18); --info-light: rgba(33, 150, 243, 0.18); /* Schaduwen sterker (anders onzichtbaar op donker) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.45); } /* ---------------------------------------------------------------------------- Gedeelde shell: hardcoded white-vlakken → oppervlak-kleur (selectors uit main.css met `background: white/#fff`) ---------------------------------------------------------------------------- */ html[data-theme="dark"] .header, html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stat-mini, html[data-theme="dark"] .mg-modal, html[data-theme="dark"] .search-results-dropdown, html[data-theme="dark"] .header-dropdown-menu, html[data-theme="dark"] .notifications-dropdown-menu, html[data-theme="dark"] .header-user-btn, html[data-theme="dark"] .dropdown-toggle.btn-filter, html[data-theme="dark"] .dropdown-toggle.form-select-custom, html[data-theme="dark"] .notification, html[data-theme="dark"] .mail-detail-panel, html[data-theme="dark"] .refund-extra-input, html[data-theme="dark"] .info-row-edit-input, html[data-theme="dark"] .plaats-suggestions, html[data-theme="dark"] .btn-icon, html[data-theme="dark"] .pdfviewer-btn { background: var(--surface); color: var(--gray-800); } /* Secundaire knop: subtiel oppervlak + leesbare tekst/rand */ html[data-theme="dark"] .btn-secondary { background: var(--surface-2); color: var(--gray-800); border-color: var(--gray-300); } html[data-theme="dark"] .btn-secondary:hover { background: var(--gray-300); } /* ---------------------------------------------------------------------------- Formuliervelden (inputs/selects/textarea) — ook bootstrap form-control ---------------------------------------------------------------------------- */ html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--surface); color: var(--gray-800); border-color: var(--gray-300); } html[data-theme="dark"] ::placeholder { color: var(--gray-400); } /* Globale zoekbalk in de header */ html[data-theme="dark"] .header-search { background: var(--surface-2); border-color: var(--gray-300); } html[data-theme="dark"] .header-search input { color: var(--gray-800); } /* ---------------------------------------------------------------------------- Tabellen ---------------------------------------------------------------------------- */ html[data-theme="dark"] .data-table, html[data-theme="dark"] table.data-table, html[data-theme="dark"] .table { background: var(--surface); color: var(--gray-800); } html[data-theme="dark"] .data-table thead th, html[data-theme="dark"] .table thead th { background: var(--surface-2); color: var(--gray-500); border-bottom-color: var(--gray-300); } html[data-theme="dark"] .data-table tbody td, html[data-theme="dark"] .table tbody td { border-bottom-color: var(--gray-200); } html[data-theme="dark"] .data-table tbody tr:hover, html[data-theme="dark"] .table tbody tr:hover { background: var(--surface-2); } /* ---------------------------------------------------------------------------- Bootstrap-componenten die hun eigen lichte kleuren meebrengen ---------------------------------------------------------------------------- */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .popover, html[data-theme="dark"] .offcanvas { background: var(--surface); color: var(--gray-800); border-color: var(--gray-300); } html[data-theme="dark"] .dropdown-item { color: var(--gray-800); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--surface-2); color: var(--gray-900); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--gray-300); } /* ---------------------------------------------------------------------------- Sidebar — was in light mode al donker (bg = gray-900). Door de omgekeerde ramp zou die nu LICHT worden, dus expliciet donker terugzetten. ---------------------------------------------------------------------------- */ html[data-theme="dark"] .sidebar { background: #0e0e17; border-right: 1px solid var(--gray-200); } html[data-theme="dark"] .sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .sidebar .nav-item.active { background: rgba(229, 57, 53, 0.22); } /* ---------------------------------------------------------------------------- Theme-toggle knop in de header ---------------------------------------------------------------------------- */ .header-theme-toggle .fa-sun { display: none; } html[data-theme="dark"] .header-theme-toggle .fa-moon { display: none; } html[data-theme="dark"] .header-theme-toggle .fa-sun { display: inline-block; } /* ---------------------------------------------------------------------------- Pagina-specifieke oppervlakken (hardcoded white in eigen page-CSS) ---------------------------------------------------------------------------- */ /* Dashboard — equipment-balken + chart-knop */ html[data-theme="dark"] .equipment-summary-item { background: var(--surface); border-color: var(--gray-300); } html[data-theme="dark"] .equipment-summary-item:hover { background: var(--surface-2); } html[data-theme="dark"] .chart-window-btn { background: var(--surface); color: var(--gray-700); border-color: var(--gray-300); } /* Event-detail — grote panelen, stat-tegels, form-secties, popovers */ html[data-theme="dark"] .stats-card, html[data-theme="dark"] .stat-box, html[data-theme="dark"] .form-section, html[data-theme="dark"] .status-toggle-warning, html[data-theme="dark"] .location-search-dropdown, html[data-theme="dark"] .stats-chart-tooltip, html[data-theme="dark"] .age-option-card, html[data-theme="dark"] .age-preview { background: var(--surface); color: var(--gray-800); border-color: var(--gray-300); } /* Event-detail — witte knoppen */ html[data-theme="dark"] .btn-back, html[data-theme="dark"] .btn-event-action, html[data-theme="dark"] .action-btn, html[data-theme="dark"] .btn-refresh, html[data-theme="dark"] .btn-refresh-interval, html[data-theme="dark"] .btn-image-edit { background: var(--surface); color: var(--gray-700); border-color: var(--gray-300); } /* Zachte overgang bij het wisselen van thema */ body, .card, .stat-card, .stat-mini, .header, .sidebar, .data-table, .form-input, .mg-modal, .dropdown-menu, .modal-content { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }