/* =====================================================================================================================
   static/css/portaal.css — FlexBase 2.0 F1.10: de tokenlaag van het medewerkersportaal
   (portaal_basis en alles wat daarop bouwt — portaal, instellingen, inloggen, registreren, gesprek, wachtwoord, en de
   klant-inlog/-registratie/-instellingen/beloning die dezelfde schil gebruiken — plus portaal_taal, portaal_agenda,
   portaal_diensten en het chatpaneel portaal_chat).

   Zelfde tokennamen als de kantoorstijl (flexbase.css: --page, --surface-*, --text-*, --grid, --baseline, --accent …),
   met de eigen primaire kleur van het portaal (keuze 33: --portaal-primair, het blauwe verloop van de knoppen).
   Dark mode gaat via deze tokens (prefers-color-scheme), niet meer via !important-hexkleuren in elke pagina.
   Geen HTML-wijziging (spec §2.6): de pagina's verwijzen alleen naar var(--…); markup, klassen, inline stijlen,
   formulieren, scripts en vertaalsleutels zijn ongewijzigd.
   ===================================================================================================================== */

:root {
  color-scheme: light dark;
  --page:          #f8f8f7;
  --surface-1:     #ffffff;
  --surface-2:     #f1f3f6;
  --surface-3:     #e9ecf0;
  --text-primary:  #1f2533;
  --text-secondary:#4c525c;
  --text-muted:    #6b7280;   /* bewust donkerder dan kantoor (#868d98): telefoon buiten, ≥ 4,5:1 op wit */
  --grid:          #e5e7ec;   /* randen van kaarten en vakken */
  --baseline:      #c9ced6;   /* randen van invoervelden */
  --lijn-zacht:    #eef0f3;
  --accent:        #f4bc36;   /* HFS-geel: actief tabblad, links, accenten */
  --accent-d:      #e2a71d;
  --accent-zacht:  #fdf5df;
  --link:          #8a5f00;   /* tekstlinks en gele tekst op licht: donker goud, ≥ 5:1 op wit, pagina en lichtgeel (HFS-geel haalt 2:1) */
  --op-accent:     #1f2533;
  --portaal-primair-1: #4d82ff;   /* eigen primaire kleur van het portaal (keuze 33) */
  --portaal-primair-2: #2749c9;
  --op-primair:    #ffffff;
  --donker:        #1f2533;   /* donkere vlakken: gekozen dag, actieve chip, chatbubbel 'ik' */
  --op-donker:     #ffffff;
  --kop-donker:    #1f2533;   /* kopbalk chatpaneel, chatknop */
  --op-kop-donker: #ffffff;
  --kop-1:         #eef3fb;   /* verloop achter het logo */
  --kop-2:         #e2e9f5;
  --st-goed:       #157347;
  --st-goed-bg:    #eafaf0;
  --st-fout:       #c62828;
  --st-fout-bg:    #fdecec;
  --st-let-op:     #b07b00;
  --bol:           #c62828;   /* rood tellerbolletje */
  --uit:           #c4c9d1;   /* dagen buiten de maand */
  --veld:          #ffffff;
  --schaduw-doos:  0 10px 30px rgba(31, 37, 51, .08);
  --schaduw-kaart: 0 10px 26px rgba(31, 37, 51, .12);
  --focus-ring:    0 0 0 3px rgba(244, 188, 54, .45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:          #121418;
    --surface-1:     #1b1e23;
    --surface-2:     #22262d;
    --surface-3:     #2a2e35;
    --text-primary:  #eceef1;
    --text-secondary:#c2c7cf;
    --text-muted:    #9aa0a6;
    --grid:          #30353c;
    --baseline:      #3d434b;
    --lijn-zacht:    #262a31;
    --accent-d:      #f4bc36;
    --accent-zacht:  #2c2921;
    --link:          #f4bc36;   /* in het donker is HFS-geel zelf goed leesbaar */
    --donker:        #f4bc36;   /* in het donker: geel vlak met donkere tekst (zoals de diensten al deden) */
    --op-donker:     #1f2533;
    --kop-donker:    #22262d;
    --op-kop-donker: #eceef1;
    --kop-1:         #232a35;
    --kop-2:         #1d232d;
    --st-goed:       #6fcf8f;
    --st-goed-bg:    #173324;
    --st-fout:       #ff8a80;
    --st-fout-bg:    #3a1f1f;
    --st-let-op:     #e8a212;
    --uit:           #4a4f57;
    --veld:          #121418;
    --schaduw-doos:  0 10px 30px rgba(0, 0, 0, .35);
    --schaduw-kaart: 0 10px 26px rgba(0, 0, 0, .4);
  }

  /* Leesbaarheidsbrug voor inline-gestileerde vakken (fase 1 verandert geen portaal-HTML): een vak dat in de HTML
     een vaste lichte achtergrond heeft, houdt in het donker donkere tekst, zodat het als licht kaartje leesbaar blijft
     in plaats van lichte tekst op een lichte achtergrond. Raakt alleen elementen met zo'n inline achtergrond. */
  [style*="background:#fff"], [style*="background:#fd"], [style*="background:#fb"], [style*="background:#f6"],
  [style*="background:#f4bc36"], [style*="background:#e7f3ec"], [style*="background:#e9f7ee"], [style*="background:#eafaf0"],
  [style*="background:#eef7ee"], [style*="background:#e9ebef"], [style*="background:#d9ecef"], [style*="background:#c7e0f7"],
  [style*="background:#c9ecc4"], [style*="background:#f7cfdd"] { color: #1f2533; }
  /* invoervelden binnen zo'n wit kaartje (bv. Instellingen) blijven licht, zodat het kaartje één geheel is */
  [style*="background:#fff"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([disabled]),
  [style*="background:#fff"] select, [style*="background:#fff"] textarea {
    background: #ffffff; color: #1f2533; border-color: #c9ced6; color-scheme: light; }
  [style*="background:#fff"] input ~ button { color: #1f2533; }   /* het oogje naast een wachtwoordveld */
}

/* Beloningsvragenlijst (beloning_invullen): het petrol van het ABU/NBBU-formulier blijft een eigen kleur */
:root { --sugb: #1d7a8c; --sugb-zacht: #e4f0f2; --sugb-intro: #d9ecef; --op-sugb: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --sugb: #5cb8c9; --sugb-zacht: #1c3035; --sugb-intro: #1a2c30; --op-sugb: #10262b; }
}

/* Het oogje naast elk wachtwoordveld (door het bestaande script toegevoegd) volgt de tekstkleur van het veld, niet de
   witte knoptekst — anders is het op een licht veld onzichtbaar waar het teken niet als kleuren-emoji wordt getoond */
button[aria-label="Wachtwoord tonen of verbergen"] { color: var(--text-primary); }

/* Toetsenbordbediening: één zichtbare focusring in het hele portaal */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }