/* ═══════════════════════════════════════════════════════════════════════════
   whitelabel.css — leesbaarheid zodra er een eigen achtergrond staat

   Het probleem
   ------------
   De thema's zijn getekend op een bekende ondergrond: het waker-thema op een
   donkere gradient, dark op #191919, light op #F7F7F7. Daarop werken vlakken
   van 4 tot 8 procent prima — je ziet een kaart, en de tekst erin staat op een
   voorspelbare kleur.

   Een whitelabel-achtergrond vervangt die ondergrond door een afbeelding van
   1920×1080 die de klant zelf aanlevert. Die kan licht zijn, donker, druk of
   rustig. Vanaf dat moment klopt de aanname niet meer: een kaart van 4 procent
   is over een foto simpelweg onzichtbaar en de tekst valt samen met het beeld.
   Op de vergelijkpagina was dat het duidelijkst — `--cmp-surface` is 4 procent
   wit, dus daar bleef alleen zwevende tekst over.

   De oplossing, twee lagen, allebei alleen actief bij .has-wl-bg
   -------------------------------------------------------------
   1. De afbeelding krijgt een sluier (scrim) in de kleur van het actieve thema.
      Daarmee is de ondergrond achter *alles* weer voorspelbaar, ook achter los
      staande tekst die niet in een kaart zit.
   2. Elk oppervlak dat rechtstreeks op de body ligt — kaarten, tabellen, de
      navigatie, de zijbalk, de paginakop — wordt dekkend in plaats van
      doorschijnend. Wat binnen zo'n kaart staat (pillen, badges, knoppen) mag
      doorschijnend blijven: dat leest nu tegen een bekende kleur.

   Zonder whitelabel verandert er niets. Elke regel hier hangt aan .has-wl-bg,
   dat door navbar.html op <html> wordt gezet zodra er een achtergrond is.

   Twee knoppen om aan te draaien
   ------------------------------
   --wl-scrim-strength   hoe sterk de sluier over de afbeelding ligt. Hoger is
                         beter leesbaar, lager laat meer van de afbeelding zien.
   --wl-surface          de kleur van kaarten en panelen.

   Contrast is nagerekend tegen het slechtste geval (een egaal witte en een
   egaal zwarte achtergrondafbeelding); zie de notitie onderaan dit bestand.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. Tokens per thema
   ─────────────────────────────────────────────────────────────────────────── */

[data-theme="waker"].has-wl-bg {
    --wl-scrim-strength: 0.66;
    --wl-scrim: linear-gradient(135deg,
                    rgba(0, 0, 0, var(--wl-scrim-strength)) 0%,
                    rgba(2, 20, 10, var(--wl-scrim-strength)) 50%,
                    rgba(0, 0, 0, var(--wl-scrim-strength)) 100%);
    --wl-base:      #02140A;   /* zichtbaar als de afbeelding niet laadt */
    --wl-surface:   rgba(6, 17, 10, 0.93);   /* kaarten en panelen          */
    --wl-surface-2: rgba(0, 0, 0, 0.82);     /* genest binnen een kaart     */
    --wl-bar:       rgba(3, 11, 6, 0.95);    /* navigatie, zijbalk, voet    */
}

[data-theme="dark"].has-wl-bg {
    --wl-scrim-strength: 0.66;
    --wl-scrim: linear-gradient(rgba(25, 25, 25, var(--wl-scrim-strength)),
                                rgba(25, 25, 25, var(--wl-scrim-strength)));
    --wl-base:      #191919;
    --wl-surface:   #242527;
    --wl-surface-2: #1F2022;
    --wl-bar:       #1F2022;
}

[data-theme="light"].has-wl-bg {
    /* Lichte tekst-op-donker gaat mis boven een donkere foto, dus hier ligt de
       sluier zwaarder: donkere tekst heeft een lichte ondergrond nodig. */
    --wl-scrim-strength: 0.72;
    --wl-scrim: linear-gradient(rgba(247, 247, 247, var(--wl-scrim-strength)),
                                rgba(247, 247, 247, var(--wl-scrim-strength)));
    --wl-base:      #F7F7F7;
    --wl-surface:   #FFFFFF;
    --wl-surface-2: #F4F5F7;
    --wl-bar:       #FFFFFF;
}


/* ───────────────────────────────────────────────────────────────────────────
   2. De achtergrond zelf: sluier bovenop, afbeelding eronder

   Bewust twee background-layers in plaats van ::before/::after met een
   negatieve z-index. Een pseudo-element met z-index:-1 wordt in de
   schilder-volgorde vóór de achtergrond van de body getekend en zou daar dus
   onder verdwijnen; gestapelde background-layers hebben dat probleem niet en
   werken in elke browser hetzelfde. De eerste laag ligt bovenop.
   ─────────────────────────────────────────────────────────────────────────── */

html.has-wl-bg body.custom-background {
    background-color: var(--wl-base);
    background-image: var(--wl-scrim), var(--wl-bg, none);
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. Balken: navigatie, zijbalk, voettekst, meldingen

   Alleen het waker-thema; dark en light hebben hier al dekkende kleuren
   (#1F2022 / #FFFFFF). De blur blijft staan, die kost niets extra nu de kleur
   erachter toch dekkend is.
   ─────────────────────────────────────────────────────────────────────────── */

[data-theme="waker"].has-wl-bg .custom-navbar-styling-hover,
[data-theme="waker"].has-wl-bg .custom-navbar-styling-hover:hover,
[data-theme="waker"].has-wl-bg #waker-sidebar,
[data-theme="waker"].has-wl-bg .sb-footer-bar {
    background: var(--wl-bar);
}

[data-theme="waker"].has-wl-bg .sb-open-btn,
[data-theme="waker"].has-wl-bg .theme-switcher {
    background: var(--wl-surface);
}

[data-theme="waker"].has-wl-bg .waker-toast {
    background: var(--wl-surface);
}


/* ───────────────────────────────────────────────────────────────────────────
   4. Kaarten en panelen

   Ook hier alleen waker: in dark en light zijn .glass-card en .glass-panel al
   dekkend (#242527 / #FFFFFF) en hoeft er niets te gebeuren.
   ─────────────────────────────────────────────────────────────────────────── */

[data-theme="waker"].has-wl-bg .glass-card,
[data-theme="waker"].has-wl-bg .glass-card:hover,
[data-theme="waker"].has-wl-bg .glass-card-lg,
[data-theme="waker"].has-wl-bg .glass-card-sm,
[data-theme="waker"].has-wl-bg .glass-card-neutral,
[data-theme="waker"].has-wl-bg .glass-panel {
    background: var(--wl-surface);
}

/* Kleinere vlakken die óók los op de body kunnen liggen. */
[data-theme="waker"].has-wl-bg .icon-badge,
[data-theme="waker"].has-wl-bg .info-box,
[data-theme="waker"].has-wl-bg .status-indicator,
[data-theme="waker"].has-wl-bg .chart-container,
[data-theme="waker"].has-wl-bg .progress-container,
[data-theme="waker"].has-wl-bg .domain-search-container,
[data-theme="waker"].has-wl-bg .list-item {
    background: var(--wl-surface-2);
}


/* ───────────────────────────────────────────────────────────────────────────
   5. Tabellen

   .glass-table-wrapper heeft in géén enkel thema een eigen achtergrond — het
   beeld komt volledig van de cellen, en die zijn in het waker-thema
   doorschijnend (kop 7%, rij 22%). Eén dekkende kleur op de wrapper vangt dat
   in alle drie de thema's op: ook een cel die daarna nog doorschijnend is
   (.scan-sub-row td staat op 4% met !important) leest dan tegen een bekende
   kleur in plaats van tegen de foto.
   ─────────────────────────────────────────────────────────────────────────── */

html.has-wl-bg .glass-table-wrapper,
html.has-wl-bg .table-responsive {
    background: var(--wl-surface);
}

[data-theme="waker"].has-wl-bg .glass-table thead tr th {
    background: var(--wl-bar);
}
[data-theme="waker"].has-wl-bg .glass-table tbody tr td {
    background: var(--wl-surface);
}
[data-theme="waker"].has-wl-bg .table > thead > tr > th,
[data-theme="waker"].has-wl-bg .table > tbody > tr > td {
    background-color: var(--wl-surface);
}


/* ───────────────────────────────────────────────────────────────────────────
   6. Paginakop

   Elke pagina na inloggen begint met een titel en een ondertitel op
   opacity 0.45, rechtstreeks op de body. Dat is het eerste wat onleesbaar
   wordt boven een foto. De klasse .page-head staat in de sjablonen en doet
   zonder whitelabel niets; hier krijgt hij een eigen blok.
   ─────────────────────────────────────────────────────────────────────────── */

html.has-wl-bg .page-head {
    background: var(--wl-surface);
    border: 1px solid var(--glass-border, rgba(127, 127, 127, 0.22));
    border-radius: 14px;
    padding: 14px 18px;
}

/* De ondertitels staan op 0.45 — te dun zodra de ondergrond niet meer vast is. */
html.has-wl-bg .page-head p[style*="opacity"] {
    opacity: 0.72 !important;
}


/* ───────────────────────────────────────────────────────────────────────────
   7. Pagina-eigen oppervlakken

   Deze staan in een <style>-blok in de sjabloon zelf en zijn in álle drie de
   thema's doorschijnend — anders dan de gedeelde .glass-* klassen, die in dark
   en light al dekkend zijn. Dit is dus het deel dat ook in dark en light
   misging.

   De selectors hier zijn bewust één klasse zwaarder dan die in de sjabloon,
   zodat de volgorde van laden niet uitmaakt.
   ─────────────────────────────────────────────────────────────────────────── */

/* Scans vergelijken — .cmp-schead en .cmp-md hangen allebei aan deze variabele,
   dus één override zet beide blokken tegelijk goed. */
html.has-wl-bg #compare-report {
    --cmp-surface: var(--wl-surface);
}

/* OSINT-rapport: tabbalk, weergaveschakelaar en exportknoppen. */
html.has-wl-bg #osint-tabs,
html.has-wl-bg .mode-switch,
html.has-wl-bg #osint-hero .export-btn,
html.has-wl-bg #osint-summary .export-btn,
html.has-wl-bg #osint-report .view-toggle .btn {
    background: var(--wl-surface-2);
}

/* OSINT-rapport: de blokken die zelf op de body liggen. */
html.has-wl-bg .triage-tile,
html.has-wl-bg #osint-summary .dash-card,
html.has-wl-bg #osint-summary.capture .dash-title,
html.has-wl-bg #osint-report .cert-acc-item,
html.has-wl-bg .rawblock pre,
html.has-wl-bg .scan-tip-bar {
    background: var(--wl-surface);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Nagerekend contrast (WCAG 2.1 AA, ASVS V3.7 / EN 301 549)

   Doorgerekend op de twee uitersten die een klant kan aanleveren: een egaal
   witte en een egaal zwarte afbeelding. Alle getallen hieronder gelden dus ook
   voor elke foto daartussenin.

   Los van een kaart, op de sluier (het vangnet — waker/dark, sluier 0.66,
   ondergrond rgb(87) boven een egaal witte afbeelding):

     titel        #ffffff                     →   7.3 : 1
     lopende tekst rgba(255,255,255,0.7)      →   4.5 : 1   (AA gehaald)
     ondertitel   rgba(255,255,255,0.72)      →   4.7 : 1   (AA gehaald)

   Light-thema, sluier 0.72 boven een egaal zwarte afbeelding, ondergrond
   rgb(178):

     kop  #111111                             →   8.9 : 1
     tekst #333333                            →   6.0 : 1

   Binnen een blok — en na deze wijziging staat vrijwel alle tekst in een blok:

     waker, --wl-surface op wit → rgb(23,34,27)
     witte tekst                              →  16.4 : 1
     tekst op 0.7                             →   8.6 : 1

   Eén uitzondering: `small` in het light-thema staat op opacity 0.52 en haalt
   los op de sluier maximaal 2.9 : 1 — ook bij een sluier van 0.80. Dat is
   precies de reden dat de paginakop een eigen blok kreeg (§6) in plaats van
   dat we het met de sluier alleen proberen op te lossen; binnen een blok haalt
   diezelfde `small` ruim de norm.

   Wil je meer van de afbeelding zien: verlaag --wl-scrim-strength. Onder 0.66
   zakt losse lopende tekst in het waker-thema door de AA-grens van 4.5 : 1;
   tekst binnen een blok blijft tot ver daaronder in orde.
   ═══════════════════════════════════════════════════════════════════════════ */