/* ADP-look voor de Expertise Tool (2026-10-20, besluit Gerd: "zelfde look als de
   autodataport tools inclusief de porsche garage hero").

   Geldt voor dashboard, dashboard-subpagina's, nieuw rapport, login, monitor,
   profiel en admin. Wordt NIET per pagina geladen maar door nginx (sub_filter
   in /etc/nginx/sites-available/app.s-tax.nl) vlak voor </head> gezet, net
   als op autodataport.nl. De zes V2-wizards krijgen look-wizard.css.

   Alles hangt onder body.dark: de look is een donkere look. In lichte modus
   blijft de pagina zoals hij was, want glas over de donkere foto met donkere
   tekst is onleesbaar. Donker is sinds dezelfde datum de standaard
   (includes/dark-mode-head.php + dark-mode-toggle.php).

   Specificiteit: css/dark-mode.css schrijft body.dark .x { ... !important },
   dus hier steeds html body.dark .x met !important, anders wint dark-mode.css.

   Terugdraaien: de sub_filter-regel uit de nginx-config halen + reload.
   Dit bestand mag blijven staan. */

html:has(> body.dark) {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.66) 0%, rgba(15, 23, 42, 0.82) 100%),
        url('/assets/branding/hero-bg.jpg') center center / cover no-repeat fixed !important;
    min-height: 100%;
    color-scheme: dark;
}
html body.dark {
    background: transparent !important;
}

/* ---- Kopbalk: donker glas, zoals de balk van AutoDataPort ---- */
html body.dark .header,
html body.dark .topbar {
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
/* backdrop-filter maakt van de kopbalk een eigen laag. Zonder z-index valt het
   meldingen-menu (absolute, in .header) dan achter de glazen tegels eronder.
   Alleen .header: .topbar (monitor) is sticky met eigen z-index en blijft zo. */
html body.dark .header {
    position: relative;
    z-index: 100;
}

/* ---- Glas voor de kaarten van de Expertise Tool zelf ---- */
html body.dark .card,
html body.dark .stat-card,
html body.dark .report-card,
html body.dark .type-card,
html body.dark .table-card,
html body.dark .login-container,
html body.dark .dossier,
html body.dark .dossier-card,
html body.dark .profile-card,
html body.dark .settings-card,
html body.dark .admin-card,
html body.dark .admin-panel,
html body.dark .intake-card,
html body.dark .selection-toolbar {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
html body.dark .report-card:hover,
html body.dark .type-card:hover,
html body.dark .intake-card:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: #60a5fa !important;
}

/* Uitklapmenu's en vensters blijven dicht (geen doorkijk door tekst heen) */
html body.dark .notification-dropdown,
html body.dark .modal-content,
html body.dark .modal-body {
    background: rgba(15, 23, 42, 0.97) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

/* ---- Leesbaarheid: lichtere tinten, geen tekst-halo (les van ADP 2026-06-14) ---- */
html body.dark small,
html body.dark .hint,
html body.dark .text-muted,
html body.dark .report-meta span,
html body.dark .empty-state,
html body.dark .selected-info {
    color: #AEB8C8 !important;
}
html body.dark .stat-card .label,
html body.dark .type-card p,
html body.dark .type-card .type-desc {
    color: #CBD5E1 !important;
}
/* Paginakop op "Nieuw rapport" was donkerblauw op donker */
html body.dark .container > h2 {
    color: #f1f5f9;
}

/* Donkere scrollbalken, zoals op AutoDataPort */
html:has(> body.dark) * { scrollbar-width: thin; scrollbar-color: #475569 #0F172A; }
html:has(> body.dark) ::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(> body.dark) ::-webkit-scrollbar-track { background: #0F172A; border-radius: 6px; }
html:has(> body.dark) ::-webkit-scrollbar-thumb { background: #475569; border-radius: 6px; }
html:has(> body.dark) ::-webkit-scrollbar-thumb:hover { background: #64748B; }
html:has(> body.dark) ::-webkit-scrollbar-corner { background: #0F172A; }