/* app/ui-donker.css — donkere stand: kleurcorrecties over de hele app (Dafydd 29-10-2026: "veel issues met het dark
   theme … zorg dat het allemaal opgelost is, het zal veelal donker gebruikt worden").
   Als LAATSTE stylesheet geladen. Alles hangt aan .dark op <html> (modules/i18n-theme.js applyTheme); die zet sinds
   29-10 ook data-theme="dark|light", zodat de Nabespreken-regels (:root[data-theme="dark"] en de
   prefers-color-scheme-blokken met :root:not([data-theme="light"])) dezelfde themakeuze volgen als de rest.
   Gevonden met een contrastmeting (WCAG AA: 4,5:1, groot 3:1) over alle hoofdschermen en een CSS-scan op lichte vlakken
   en nachtblauwe tekst zonder donkere variant. */

/* ── 1. Statuskleuren als tekst: licht genoeg op het donkere vlak (de huisstijl-tokenlaag zette ze in :root opnieuw
   op de lichte waarden, waardoor index.html's .dark-waarden wegvielen) ── */
.dark{
  --teal:#39c5cf; --partner:#94a3b8; --blue:#6ea8ff; --blue-soft:#16233c; --purple:#b49dff;
  --good:#4ac26b; --bad:#ff6b61; --warn:#e3a92b; --warn-soft:rgba(227,169,43,.16);
}
/* Tokens die in de CSS met een lichte terugvalwaarde worden gebruikt maar nergens gedefinieerd zijn
   (var(--ul-surface,#fff) e.d.): in donker krijgen ze hier een echte donkere waarde */
.dark{
  --ink:#e8ebef; --lijn:rgba(255,255,255,.14); --vlak2:rgba(255,255,255,.04);
  --nb-kw-groen:#6fcf97; --nb-kw-rood:#ff8a80; --ul-accent:#8fb1ff; --ul-bg:#12161d;
  --ul-ink:#e8ebef; --ul-ink-3:#9aa3b0; --ul-muted:#aab3bf; --ul-tekst-zacht:#aab3bf;
  --ul-lijn:#2a323d; --ul-line:#2a323d; --ul-rand-sterk:#4a5566;
  --ul-surface:#1a2029; --ul-veld:#1a2029; --ul-zacht:#242b36; --v59-vlak:#242b36;
}
/* Oefenen leent --brand/--good/--bad van de v59-tokens (#C4501B e.a.): als tekst op donker te donker */
.dark body[data-nactief="oefen"] #view-oefenen{--brand:#e8632f; --good:#4ac26b; --bad:#ff6b61}
.dark .oefbar-reeks b,.dark .v59-knop-t,.dark .v59-doneer .v59-ic,.dark body[data-schil="normaal"] .n-tab.on{color:var(--ul-oranje-op,#f3b27a)}

/* ── 2. Nachtblauwe tekst (--ul-navy / --v59-navy) wordt in donker vrijwel zwart: lichte tekst ── */
.dark .nb-badge{background:#2f3a4a;color:var(--ul-tekst)}
.dark .nb-keuze-ic{background:var(--ul-chip);color:var(--ul-tekst)}
.dark .nb-speltabel tr.nb-spel-open .nb-nrknop,
.dark .nb-speltabel tr.nb-pz-ronde th{color:var(--ul-tekst)}
.dark .v59-uitg-teller{background:#2f3a4a;color:var(--ul-tekst)}
.dark .oef59-tab{color:var(--ul-tekst)}
.dark .v59-doneer{background:var(--ul-kaart);color:var(--ul-tekst);border-color:var(--ul-rand-knop)}
.dark .v59-doneer:hover{background:var(--ul-oranje-tint)}
.dark .ch-bereikstap{background:#2f3a4a;color:var(--ul-tekst)}
.dark .bs-pijl,.dark .bs-p-code b{color:var(--ul-tekst)}
.dark .ul-st-bol{color:var(--ul-tekst)}
.dark .ul-st-dag.gehaald .ul-st-bol{color:#0f1a12}

/* ── 3. Lichte vlakken die in donker oplichten ── */
/* Start › Mijn bridge › partners */
.dark .st-mbp{background:var(--ul-chip)}
.dark .st-mbp-aantal{background:#2f3a4a;color:var(--ul-tekst)}
/* Club/Nabespreken-knoppen zonder eigen variant vielen terug op de lichtgrijze systeemknop */
.dark .ch-knop:not(.ch-primair):not(.ch-link):not(.ch-navy):not(.ch-omlijnd-licht):not(.ch-omlijnd-donker):not(.nb-mb-knop):not(.nb-mb-volgknop){
  background:var(--ul-chip);color:var(--ul-tekst);border:1px solid var(--ul-rand-knop)}
/* wedstrijdvorm-labels (Club › Competities) */
.dark .nb-vorm{background:#2f3a4a;color:var(--ul-tekst)}
.dark .nb-vorm-butler{background:#1c2a44;color:#b9cdf7}
.dark .nb-vorm-viertallen{background:#33291a;color:#ead3a8}
/* "In Mijn bridge ✓": --ul-groen is in donker lichtgroen → donkere tekst */
.dark .nb-mb-ok{color:#0f1a12}
/* verwijderkruisje in Mijn bridge */
.dark .nb-mb-weg{color:#9aa3b0}
.dark .nb-mb-weg:hover,.dark .nb-mb-weg:focus-visible{color:#ff8a80;background:rgba(255,138,128,.12)}
/* tooltip-bolletjes, kleurbehandeling-zoekveld, bied-spellen-kaart */
.dark .ul-tip-rijk .ul-tip-bel:not(.ul-tip-op):not(.ul-tip-neer){background:#2f3a4a;color:var(--ul-tekst)}
/* Rijke tooltips in donker (Dafydd 30-10: "mis tooltip kleur elementen"): de donkere kaartregel zette border-color voor
   alle kanten en wiste zo het gekleurde accent links; ▲/▼-bolletje groen/rood houden */
:root.dark .ul-tip.ul-tip-rijk{border-left:5px solid #8aa4d6}
:root.dark .ul-tip.ul-tip-rijk.ul-tip-pos{border-left-color:#4ac26b}
:root.dark .ul-tip.ul-tip-rijk.ul-tip-neg{border-left-color:#ff6b61}
:root.dark .ul-tip.ul-tip-rijk.ul-tip-prog{border-left-color:#6ea8ff}
:root.dark .ul-tip-meer .ul-tip-blok.ul-tip-pos{border-left-color:#4ac26b}
:root.dark .ul-tip-meer .ul-tip-blok.ul-tip-neg{border-left-color:#ff6b61}
:root.dark .ul-tip-meer .ul-tip-blok.ul-tip-prog{border-left-color:#6ea8ff}
:root.dark .ul-tip-rijk .ul-tip-bel.ul-tip-op{background:#2E7D4F;color:#fff}
:root.dark .ul-tip-rijk .ul-tip-bel.ul-tip-neer{background:#C0392B;color:#fff}
.dark .kl-zoek input{background:var(--ul-chip);color:var(--ul-tekst)}
.dark .sq-kaart{color:#1b1f2a}
/* expert: hero-tegel en heatmap-cel */
.dark .x-hero-tel-oranje{background:var(--ul-oranje-tint);color:var(--ul-tekst)}
.dark .x-hc-1{background:#1f4a32}
/* Doormeten (beheer) */
.dark .vr-laag0{background:#2a2752;color:#cfc9ff}
.dark .vr-st-voorstel,.dark .vr-melding{background:#3a2d12;color:#f1d79a}
.dark .vr-st-toegepast,.dark .vr-st-hermeten{background:#16281b;color:#9fdcb0}
.dark .vr-st-afgewezen{background:#2a323d;color:var(--ul-tekst)}
/* Top bridge: scheidingstekens in de stappenladder */
.dark .tbv-sep{color:#7d8796}

/* ── 4. Wit op een te licht vlak ── */
/* goud (plek 1) haalt met wit maar 2,3:1 — ook in licht: donkere inkt */
.nb-rk-1{color:#1A1D26}
/* avatars (partner/tegenstanders) op een licht vlak in donker: donkere letter */
.dark .pavat{color:#0f1a2c}
/* Top bridge-chip op het merkvlak */
.dark .tb-filtsum .chipbtn{color:#fff}
/* Systeem › Vastgelegd: oranje stap-link op het lichtere vlak */
.dark .vast-step{color:var(--ul-oranje-op,#f3b27a)}
/* primaire knop op de voortgangspagina: lichte tekst → wit */
.dark .ul-knop-primair{color:#fff}
/* vlak in --brand met witte tekst: in donker de donkere variant (wit haalt ≥ 4,5:1) */
.dark .opn-staaf,
.dark .nb-match-table tbody th button[aria-expanded="true"],
.dark .ai-primair,
.dark .th-knop,
.dark .btn-acc,
.dark .btn-primary,
.dark .bt-subtab-badge,
.dark .cl-bigbtn,
.dark .brandmark,
.dark .brandtile,
.dark .drawer .tabbtn .badge,
.dark .tabbtn .badge,
.dark .auction .bc.ask,
.dark .whybox>summary::before,
.dark .rd-cel.rd-sel,
.dark .tb-filtsum #tbToggleFilters2,
.dark .tb-selvoet-knop{background:var(--merkvlak)!important}
.dark [style*="background:var(--brand);color:#fff"]{background:var(--merkvlak)!important}
/* vlak in --good met witte tekst: in donker de donkere variant (wit haalt ≥ 4,5:1) */
.dark .th-melding.goed .th-melding-ico,
.dark .th-balk.terug,
.dark .th-stoel.is-klaar .th-stoel-vink,
.dark [data-th-kaart].is-gepakt::after,
.dark .btn-good,
.dark .okbadge{background:#1a7f37!important}
.dark [style*="background:var(--good);color:#fff"]{background:#1a7f37!important}
/* vlak in --bad met witte tekst: in donker de donkere variant (wit haalt ≥ 4,5:1) */
.dark .th-melding.fout .th-melding-ico,
.dark .nokbadge{background:#c8372a!important}
.dark [style*="background:var(--bad);color:#fff"]{background:#c8372a!important}
/* vlak in --warn met witte tekst: in donker de donkere variant (wit haalt ≥ 4,5:1) */
.dark .th-melding.let .th-melding-ico{background:#9a6400!important}
.dark [style*="background:var(--warn);color:#fff"]{background:#9a6400!important}

/* ── 5. Randen en focuslijnen in nachtblauw (--ul-navy e.d.) zijn in donker onzichtbaar: lichtgrijs ── */
.dark .bs-k:hover:not(:disabled),
.dark .bs-k-sel,
.dark .bs-k-spec.bs-k-sel,
.dark .bs-sel,
.dark .sq-kaart.on,
.dark .sq-niveau-k:hover,
.dark .sq-niveau-k:focus-visible,
.dark .ulscan-bbx:hover:not(:disabled),
.dark .x-lvltab.on,
.dark .kl-optie-gekozen,
.dark .kl-optie-gekozen .kl-bol,
.dark .kl-band-gekozen,
.dark .kl-fchip-on,
.dark .nb-pil.on,
.dark .nb-chip.on,
.dark .nb-sorteer-kies,
.dark .nb-pil-open,
.dark .ul-oef-optie:hover:not([disabled]),
.dark .ul-tb-avatar,
.dark .nb-hand-eigen,
.dark .nb-seizoen-ouder.on,
.dark .oef59 .ul-oef-optie:hover:not([disabled]),
.dark body[data-nactief="oefen"] #view-oefenen .btn-ghost:hover,
.dark body[data-nactief="oefen"] #view-oefenen .opt:hover:not(.lock),
.dark .oefbar-stip,
.dark .oef-an:hover,
.dark .nz-wb-rij:hover,
.dark .v59-ico[data-nieuw]::after,
.dark .v59-uitg:has(> .v59-uitg-kop:hover),
.dark .st-tegel:hover,
.dark .ch-bereik.on,
.dark .ch-keuzeknop.on,
.dark .ub-tab.on{border-color:#8a94a2}
.dark button.x-hc:focus-visible,
.dark .tbv-heat-cel:focus-visible,
.dark .nb-mx-knop.nb-mx-aan{outline-color:#e8ebef}

/* 31-10-2026 (Dafydd: "kleur theme goed doorvoeren") — formuliervelden, sluitknop en actieve tabjes in donker */
:root.dark{color-scheme:dark}
.dark .nb-zoekveld,.dark :where(input[type=search],input[type=text],input[type=email],input[type=number],input[type=password],textarea,select){background-color:var(--ul-veld,#1a2029);color:var(--ul-tekst);border:1px solid var(--ul-rand-knop,#4a5566)}
.dark .nb-zoekveld{border-radius:10px;padding:10px 12px;font:inherit;font-size:16px;min-height:44px;box-sizing:border-box}
.dark .nb-zoekveld::placeholder,.dark :where(input,textarea)::placeholder{color:var(--ul-muted,#aab3bf);opacity:1}
.dark .nb-zoekveld:focus{outline:2px solid var(--ul-accent,#8fb1ff);outline-offset:1px}
.dark .n-sheet-sluit{color:var(--ul-tekst)}
/* Actieve tab/segment: overal hetzelfde als Mijn bridge | Wereld (donkere pil, witte tekst) i.p.v. een witte pil */
.dark .ul-seg-btn.on,.dark .bt-subtab.on,.dark .boom-tab[aria-current="page"]{background:#0f1a2c!important;color:#fff!important;box-shadow:inset 0 0 0 1px var(--ul-rand-sterk,#4a5566)}
.dark .ul-seg-kop .ul-seg-btn.on,.dark .dm-seg-donker .ul-seg-btn.on{background:#fff!important;color:var(--ul-navy)!important;box-shadow:none}
.dark .bt-subtab.on .bt-subtab-badge{background:var(--ul-oranje,#c4501b);color:#fff}