/* Ailex — donker thema (02-11-2026, klus "Ailex profiel, instellingen en donker thema", Gustavo). Een donkere variant van de huidige
   kleuren (zelfde paars en blauw, zelfde vormen), niet de oude geel-zwarte stijl. Alleen met html[data-thema="donker"]; index.html zet
   die vóór de eerste paint (geen flits). Contrast: tekst #ECEEFF op #1E2140 14:1, zacht #B4B8E0 op #1E2140 8,5:1, #14162E op accent #A99BFF 7,6:1.
   De kaartjes in de chat houden hun eigen kleurkoppen; alleen het oppervlak eronder wordt donker. */
html[data-thema="donker"] {
  color-scheme: dark; background: #14162E;
  --ax-oppervlak: #1E2140; --ax-oppervlak-2: #272B52; --ax-tekst: #ECEEFF; --ax-tekst-zacht: #B4B8E0; --ax-lijn: rgba(236, 238, 255, .13);
  --ax-schaduw-vast: 0 1px 2px rgba(0, 0, 0, .45); --ax-glans: rgba(255, 255, 255, .06); --ax-accent: #A99BFF; --ax-op-accent: #14162E; --ax-rood: #FF8A80;
}
html[data-thema="donker"] body { background: #14162E; color: #ECEEFF; }
/* de grote vlakken: paneel, berichten, balk, panelen in Privé/Werk/Bedrijf, het lijstje en de praatwolk */
html[data-thema="donker"] .stage, html[data-thema="donker"] .bg { background: #14162E; }
html[data-thema="donker"] #sheet.sheet { background: #181A36; border-color: rgba(236, 238, 255, .10); color: #ECEEFF; }
html[data-thema="donker"] #sheet .sheet-head h2, html[data-thema="donker"] #sheetTitle { color: #C9C0FF; }
html[data-thema="donker"] .msg .body, html[data-thema="donker"] .msg.martha .body { background: #1E2140; color: #ECEEFF; border-color: rgba(236, 238, 255, .12); }
html[data-thema="donker"] .msg.alex .body { background: #2E2A66; color: #F2F0FF; }
html[data-thema="donker"] .msg .meta { color: #B4B8E0; }
html[data-thema="donker"] #kopSchuif.sg-seg, html[data-thema="donker"] .kl-lijst, html[data-thema="donker"] .pl-paneel, html[data-thema="donker"] .m3g-bal, html[data-thema="donker"] .m3g-bal-zeg {
  background: #1E2140; color: #ECEEFF; border-color: rgba(236, 238, 255, .12); }
html[data-thema="donker"] .sg-deel, html[data-thema="donker"] .sg-gk { color: #ECEEFF; }
html[data-thema="donker"] .sg-deel[aria-selected="true"], html[data-thema="donker"] .sg-deel[data-zacht] { background: #2B3A5C; color: #ECEEFF; }
html[data-thema="donker"] .sg-menu { color: #ECEEFF; }
html[data-thema="donker"] .pl, html[data-thema="donker"] .pl-sub, html[data-thema="donker"] .pl-leeg, html[data-thema="donker"] .m3d-a-t, html[data-thema="donker"] .m3d-a-kop { color: #ECEEFF; }
html[data-thema="donker"] .pl-inv, html[data-thema="donker"] #input, html[data-thema="donker"] textarea, html[data-thema="donker"] input[type="text"], html[data-thema="donker"] input[type="password"] {
  background: #272B52; color: #ECEEFF; border-color: rgba(236, 238, 255, .18); }
html[data-thema="donker"] .pl-k:not(.aan), html[data-thema="donker"] .sg-keuze button:not([aria-pressed="true"]) { background: #272B52; color: #ECEEFF; border-color: rgba(236, 238, 255, .14); }
html[data-thema="donker"] .m3d-account { background: transparent; color: #ECEEFF; }
/* het paneel en de achtergrond hebben een verloop met een hoge voorrang in speelgoed.css/kleur.css: hier bewust !important */
html[data-thema="donker"] body, html[data-thema="donker"] .bg, html[data-thema="donker"] .stage, html[data-thema="donker"] .frame { background: #14162E !important; }
html[data-thema="donker"] #sheet.sheet, html[data-thema="donker"] #sheet.sheet.open { background: #181A36 !important; }
/* de paneeltitel (PROFIEL, INSTELLINGEN) en het woordje Menu: lichte letters op donker */
html[data-thema="donker"] #sheetTitle, html[data-thema="donker"] #sheet .sheet-head .t3d { color: #C9C0FF !important; -webkit-text-fill-color: #C9C0FF; background: none; text-shadow: none; }
html[data-thema="donker"] .sg-woord { color: #ECEEFF; }

/* 02-11-2026 (klus "Ailex vorige instellingen terug"; eigenaar: "sommige bij de donkere modus kan ik ook niet lezen"). Gemeten met een
   contrastscript over chat, Privé/Werk/Bedrijf, dossier, planner, Profiel en Instellingen in alle zes kleurthema's: de lichte tinten
   (paneelverloop --s-zacht, rijen --paper-2, kaartvlakken --f-zacht) bleven licht terwijl de tekst al licht was (1,0-1,7:1).
   Nu mengen die tinten met het donkere vlak in plaats van met wit, en de "inkt" van een kaartje wordt een lichte variant van zijn
   familiekleur. De kleurthema's (data-skin) zetten alleen --blauw/--roze/... en de familie, dus ze lopen hier vanzelf mee. */
html[data-thema="donker"] { --kaart: #1E2140; --paper: #1E2140; --paper-2: #272B52; --ink: #ECEEFF; --text: #ECEEFF; --text-dim: #B4B8E0;
  --ax-rand: rgba(236, 238, 255, .16); --ax-rand-sterk: #8E93C8; }
html[data-thema="donker"] :is(#sheet, .sg-menu-lijst, .kl-lijst, .m3d-start) { --s-zacht: color-mix(in srgb, var(--s-a) 20%, #1E2140); --kaart: #1E2140; }
html[data-thema="donker"] .vb { --f-zacht: color-mix(in srgb, var(--f-a) 24%, #1E2140); --f-inkt: color-mix(in srgb, var(--f-a) 38%, #FFFFFF);
  --paper: var(--ax-oppervlak); --paper-2: var(--f-zacht); --ink: var(--f-inkt); --text: var(--ax-tekst); --text-dim: var(--ax-tekst-zacht); --gk-inkt: var(--ax-tekst); }
html[data-thema="donker"] :is(.pl-rij, .pl-pr) { background: #272B52; }
html[data-thema="donker"] .pl-vink { background: #272B52; color: #ECEEFF; }
html[data-thema="donker"] .pl-todo.af .pl-vink { color: #14162E; }
html[data-thema="donker"] .vb-zstap li:is(.hold, .gemist) b { color: #FF8A80; }
/* het gele praatwolkje van de assistent in Privé blijft geel, dus met donkere letters; de "Verzonnen voorbeeld"-regel op een gekleurd kaartvlak in gewone tekstkleur */
html[data-thema="donker"] .sheet .pl-martha .pl-ballon { color: #262A4D; }
html[data-thema="donker"] .vb .vb-nep { color: var(--ax-tekst); }
/* chatkaartjes verder naar beneden (gemeten met doorscrollen): knoppen en chips met een lichte vulling krijgen donkere letters,
   code en de stand-pil een donker vlak, de zachte bijregel net iets lichter op een gekleurd kaartvlak */
html[data-thema="donker"] .vb { --ax-tekst-zacht: #C9CCEF; --f-zacht: color-mix(in srgb, var(--f-a) 18%, #1E2140); }
html[data-thema="donker"] .vb :is(.vb-knop.geel, .vb-knop.groen) { color: #14162E; }
html[data-thema="donker"] :is(.chip.c, .chip.g) { color: #14162E; }
html[data-thema="donker"] .chip.y { background: color-mix(in srgb, var(--blauw) 35%, #1E2140); color: #ECEEFF; }
html[data-thema="donker"] .vb .vb-bundel i { color: #14162E; }
html[data-thema="donker"] .vb .vb-voorblad em { background: var(--rozedd); color: #FFFFFF; }
html[data-thema="donker"] .vb .vb-stand { background: rgba(0, 0, 0, .30); color: #FFFFFF; }
html[data-thema="donker"] :is(.msg, .vb) pre { background: #14162E; color: #ECEEFF; }
html[data-thema="donker"] .sch-vb-knoppen i { color: #14162E; }
html[data-thema="donker"] .sch-vb-knoppen i + i { color: #FFFFFF; }
/* weerkaart: de gele zon-gloed rechtsboven gaf onder witte letters 3,4-3,8:1; in donker alleen het avondrode verloop (wit erop 5,9-11:1) */
html[data-thema="donker"] .vb[data-gk="weer"]:is(:has(.vb-groot), :has(.vb-week)) { background-image: linear-gradient(160deg, #B93A0B 0%, #8E2F10 55%, #6A2310 100%); }

/* 02-11-2026 herstelronde (klus "Ailex donker herstel", Lucía K2): --bg1/--bg2 bleven in donker de lichte kleurthema-tint (#DDE6FF Snoep,
   #FFEBD2 Zon, ...). Het waasje achter de kop (speelgoed.css #kopStrook::before) en een paar vlakjes (.sch-uitleg, .sg-keuze) gebruiken die,
   dus Menu, SETUP en PROFIEL stonden op een lichte waas (1,08:1). Nu per kleurthema een donkere tint: het donkere vlak met 8% van de
   eigen themakleur. Dubbel [data-thema] zodat dit boven html[data-skin="..."] in schermen.css wint. */
html[data-thema="donker"][data-thema] { --bg1: color-mix(in srgb, var(--blauw) 8%, #14162E); --bg2: color-mix(in srgb, var(--roze) 8%, #181A36); }
/* Dossier en Planner (nu echt geopend in de meting): de titel van Dossier was wijnrood (#B0244A, 2,6:1), de Planner had een eigen licht
   palet (--pn-tekst #2A1F4D op donker, 1,1:1); afgevinkte rijen in Privé stonden op 55% (2,7:1): nu zacht-licht met doorhaling. */
html[data-thema="donker"] .dos-h { color: #FF9EB5; }
html[data-thema="donker"] .pn { --pn-zacht: #272B52; --pn-lijn: rgba(236, 238, 255, .18); --pn-tekst: #ECEEFF; --pn-grijs: #B4B8E0; }
html[data-thema="donker"] .pl-rij.af .pl-t { opacity: 1; color: #B4B8E0; }

/* 02-11-2026 herstelronde 2 (klus "Ailex donker herstel herstel", Lucía): het afgevinkte vakje in Privé stond met #14162E op de
   middentint --green van het kleurthema (Zee 4,4, Bos 4,0, Bes 2,9, Nacht 3,2:1). Nu een lichte tint van diezelfde themakleur, de
   donkere letter blijft. Het telgetal in de chips was een fel wit pilletje: in donker een donker pilletje met lichte letter. */
html[data-thema="donker"] .pl-todo.af .pl-vink { background: color-mix(in srgb, var(--green) 45%, #FFFFFF); color: #14162E; }
html[data-thema="donker"][data-thema] :is(.sheet, body) .pl-tel { background: #14162E; color: #ECEEFF; border-color: rgba(236, 238, 255, .35); }
/* Planner in donker (herstelronde 2: nu met een echt team gemeten, eerst bleef de proef op "Geen verbinding" staan). planner.css heeft een
   eigen licht palet met witte vlakken (#fff) en paarse letters (--pn-b #5530A8): in donker de vlakken donker, de paarse tekstkleur
   licht, de meldkleuren (ok/fout/geel) een donker vlak met lichte letter. Wat aan staat (.aan, .doel) houdt zijn eigen vulling. */
html[data-thema="donker"] .pn { --pn-b: #C9C0FF; --pn-ok: #8FE6C2; --pn-ok-bg: #173A31; --pn-mis: #FFA8A8; --pn-mis-bg: #3E1E27;
  --pn-geel: #FFD98A; --pn-geel-bg: #3A321C; }
html[data-thema="donker"] .pn :is(.pn-bakje, .pn-bol i, .pn-code, .pn-inv, .pn-k, .pn-kaart, .pn-rij, .pn-rol, .pn-tab, .pn-vink, .pn-wk-cel,
  .pn-wk-hoek, .pn-wk-naam, .pn-kaartrij):not(.aan):not(.doel) { background: #1E2140; }
html[data-thema="donker"][data-thema] .pn :is(.pn-k.rood.aan, form .pn-k.rood) { background: #B3261E; border-color: #7A1515; color: #FFFFFF; }

/* 02-11-2026 (klus "Ailex kleine punten testpoppen", Fenna punt 2): de uitleg in het ballonnetje bovenaan Privé/Werk/Bedrijf
   bleef #262A4D (speelgoed.css .m3g-bal-tekst p) op de donkere ballon: onleesbaar. Nu licht, zoals de rest van de ballon. */
html[data-thema="donker"] .m3g-bal-tekst p, html[data-thema="donker"] .m3g-bal-kop, html[data-thema="donker"] .m3g-bal-x { color: #ECEEFF; }
html[data-thema="donker"] .m3g-bal-x svg { background: #272B52; }
html[data-thema="donker"] .m3g-bal-nooit { color: #262A4D; }   /* donkere letters op de muntgroene knop, zoals in licht (was 1,48:1) */
/* intro (punt 5): in donker een donkere achtergrond met lichte letters */
html[data-thema="donker"] .m3g-intro { color: #ECEEFF; }
html[data-thema="donker"] .m3g-intro-tik { color: #B4B8E0; }
/* 02-11-2026 (klus "Ailex app zo mooi als web", contrast_proef: eigenaar donker Werk-inplannen en Werk-planner, 1,72:1 en 1,55:1, stond al
   rood vóór deze klus): de veldnamen (.pl-lab "Wie", "Project") en de uren onder de tijdbalk (.pl-as "06" .. "16") hadden vast #555. */
html[data-thema="donker"] :is(.pl-lab, .pl-as) { color: #B4B8E0; }
/* Zelfde klus: de projectbalken in de Werk-planner hebben een lichte projectkleur als achtergrond (planning.js, #9CC4FF, #FFD98A, ...);
   in donker erfden ze lichte tekst (1,55:1). Op die lichte balk blijft de tekst donker, zoals in licht. */
html[data-thema="donker"] .pl-bar { color: #1A1C33; }