/* ============================================================================
   stijl.css — de plek waar de look van deze app woont.

   Blok 5G deel a, 25/8. Vóór dit bestand bestond die plek niet: achttien
   HTML-bestanden met elk hun eigen <style>-blok, acht stijl-injectoren in
   JavaScript, en nul gedeelde CSS. Het groen stond 133 keer met de hand
   ingetikt, `#fff` 122 keer — 895 hexvoorkomens over 88 unieke waarden.
   Daardoor was een donker thema niet duur maar ONMOGELIJK: een thema is
   "dezelfde structuur, andere waarden", en er was geen plek waar die waarden
   stonden.

   ── DE REGEL ────────────────────────────────────────────────────────────────
   BUITEN DIT BESTAND STAAT GEEN ENKELE KLEURWAARDE. Geen hex, geen rgb(),
   geen benoemde kleur. Wie er toch een nodig heeft, zet hier een token bij en
   verwijst ernaar. `src/stijltokens.test.js` telt de hexwaarden in `public/`
   en wordt rood zodra het er meer worden — zonder die wachter kruipt dit
   binnen twee blokken terug.

   De uitzonderingen staan in die test bij naam opgesomd, en het zijn er twee
   soorten, allebei BEELDGEGEVENS en geen stijl:
     · de acht tekenkleuren van `tekenen.html` — die worden in een JPEG
       gebrand die als bewijsstuk telt, dus een rode pijl blijft rood, ook in
       donkere modus;
     · het witte blad van `plaatsbezoek.html` en de datumstrook op het canvas —
       dat zijn pixels in een bestand, geen pixels op een scherm.

   ── HET DONKERE THEMA ───────────────────────────────────────────────────────
   DRIE STANDEN SINDS 5G DEEL b: volg het toestel (de standaard), altijd licht,
   of altijd donker. De keuze staat in het accountvak en woont in localStorage;
   `public/thema.js` zet ze als `data-thema` op <html> — in de <head>, dus vóór
   de eerste verf. Lees de kop van dat bestand vóór je hieraan raakt.

   Zonder die keuze staat er GEEN attribuut, en dan beslist `prefers-color-scheme`
   het net als in deel a. Er luistert dus niets naar een systeemwissel: zet iemand
   zijn gsm 's avonds op donker, dan volgt de app vanzelf.

   `color-scheme` is hier niet decoratief: zonder die regel blijven de NATIVE
   onderdelen (select, input, checkbox, scrollbalk) in donkere modus wit, en dan
   is de bedrijfskiezer een wit blok op een donkere balk. `light dark` op :root
   laat het toestel beslissen; de twee regels onderaan dit blok maken er een
   harde keuze van zodra hij er zelf een gemaakt heeft.

   ── DE TYPESCHAAL ───────────────────────────────────────────────────────────
   Vóór 5G stond het merendeel van de tekst onder 16 px: 83× 0.9rem, 57×
   0.95rem, 37× 0.85rem, 18× 0.8rem — 218 van de 342 groottes. Op een gsm in
   het licht van een werf is dat te klein.

   De schaal hieronder heeft één harde regel: GEEN LOPENDE TEKST ONDER 16 PX.
   `--t-label` (14 px) is de enige uitzondering en is bedoeld voor tekst die
   iets BENOEMT in plaats van iets te vertellen: een <label>, een badge, een
   kolomkop, een datumchip. Een zin — een hint, een uitleg, een sublijn — is
   lopende tekst en krijgt minstens `--t-klein`.

   De stappen zijn ~1.12× uit elkaar (14 · 16 · 17 · 19 · 22 · 28). Dicht
   genoeg om oude waarden erop te laten vallen zonder de indeling te breken,
   ver genoeg om hiërarchie te dragen. De pictogramgroottes staan er los
   onder: dat zijn emoji en geen tekst.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- de grondlaag ---------------------------------------------------- */
  --grond: #f4f5f7;          /* de pagina zelf */
  --vlak: #fff;              /* een kaart op die pagina */
  --vlak-zacht: #f7f8fa;     /* een lichte tint óp een kaart (zebra, subrij) */
  --vlak-rustig: #e8eaef;    /* een stille knop, een vulling, een spoorbalk */

  /* ---- lijnen ---------------------------------------------------------- */
  --lijn-zacht: #e5e7eb;     /* haarlijn van 1 px */
  --lijn: #d7dae0;           /* de gewone rand van 2 px */
  --lijn-sterk: #b6bcc7;     /* dezelfde rand bij hover */

  /* ---- inkt ------------------------------------------------------------ */
  --inkt: #1a1a2e;           /* gewone tekst */
  --inkt-zacht: #33384a;     /* iets rustiger */
  --gedempt-sterk: #4a5568;  /* bijzin */
  --gedempt: #6b7280;        /* label, hint */
  --uit: #a8b0bc;            /* uitgeschakeld */
  /* Blok 5E. Bewust LICHTER dan --gedempt, en bewust geen bestaand token: een
     placeholder die er even zwaar uitziet als een hint, wordt gelezen als een
     ingevulde waarde. Dat is precies wat er op 21/8 gebeurde — de tester hield
     "BE68 5390 0754 7034" en "BE0123456749" voor zijn eigen gegevens. */
  --placeholder: #a5adba;

  /* ---- het accent (groen) ---------------------------------------------- */
  --accent: #1d7a3a;
  --accent-diep: #1d5c30;    /* accenttekst óp een licht accentvlak */
  --accent-vlak: #e3f4e8;
  --accent-lijn: #bfe0c9;
  --accent-uit: #b7c3b9;     /* een uitgeschakelde accentknop */
  --op-accent: #fff;         /* tekst ÓP het accent */
  --accent-doorschijnend: rgba(29, 122, 58, 0.92);

  /* ---- fout (rood) ----------------------------------------------------- */
  --fout: #8a1c15;
  --fout-vlak: #fbe3e1;
  --fout-lijn: #e6a9a3;
  --fout-sterk: #c0392b;
  --opname: #b3261e;         /* de opnameknop is geen fout maar wél rood */
  --opname-bezig: #5f1410;

  /* ---- let op (amber) -------------------------------------------------- */
  --letop: #7a5300;
  --letop-diep: #4a3c00;
  --letop-gedempt: #6b5a1e;
  --letop-vlak: #fff3d6;
  --letop-vlak-zacht: #fffaf0;
  --letop-lijn: #e6c877;
  --letop-fel: #f5c518;      /* de impersonatiebalk — mag nergens anders op lijken */
  --letop-rand: #b78f00;
  --letop-focus: #b8860b;
  --op-letop-fel: #3a2c00;
  --op-fel: #fff;            /* wit óp een verzadigd rood of amber vlak */

  /* ---- info (blauw) en soort (paars) ----------------------------------- */
  --info: #1f4f8f;
  --info-diep: #26408a;
  --info-vlak: #e6ecff;
  --paars: #4a2f7a;
  --paars-vlak: #f0eafa;

  /* ---- overlay, schaduw en het tekendoek ------------------------------- */
  --overlay-grond: rgba(15, 18, 22, 0.55);   /* scrim: in beide thema's donker */
  --vlak-doorschijnend: rgba(255, 255, 255, 0.92);
  --schaduw: rgba(26, 26, 46, 0.12);
  --doek-grond: #cdd3da;     /* naast het blad op het tekenscherm */

  /* ---- de typeschaal --------------------------------------------------- */
  --t-label: 0.875rem;       /* 14 px — ENKEL wat iets benoemt */
  --t-klein: 1rem;           /* 16 px — de ondergrens voor lopende tekst */
  --t-basis: 1.0625rem;      /* 17 px */
  --t-groot: 1.1875rem;      /* 19 px */
  --t-kop: 1.375rem;         /* 22 px */
  --t-kop-l: 1.75rem;        /* 28 px */
  /* Pictogrammen zijn emoji en geen tekst: ze staan bewust NAAST de schaal en
     houden hun oude maat. Ze meeschalen zou de indeling van de keuzeknoppen en
     de eindschermen verzetten, en 5G deel a raakt geen indeling. */
  --t-picto: 2rem;
  --t-picto-l: 2.8rem;
  --t-picto-xl: 4rem;

  /* ---- raakdoelen ------------------------------------------------------
     44 px is de ondergrens uit CLAUDE.md sinds 5C, en ze geldt voor élk
     aantikbaar ding — ook voor een vinkje, een kruisje of een miniatuur. */
  --raakdoel: 44px;
}

/* ============================================================================
   HET DONKERE THEMA — dezelfde rollen, andere waarden.

   De volgorde van de grondlaag KEERT om en blijft consistent: in het licht is
   `--grond` donkerder dan `--vlak`, in het donker lichter. Wie hier een token
   bijzet, zet hem in allebei de blokken — een token dat enkel in :root staat,
   is in donkere modus de oude hardgecodeerde waarde terug.

   ── DRIE STANDEN SINDS 5G DEEL b, EN DAAROM STAAT DIT BLOK TWEE KEER ────────
   Deel a liet de app het toestel volgen en had genoeg aan één mediablok. Sinds
   de schakelaar in het accountvak zijn er drie standen, en die vragen twee
   ingangen naar dezelfde waarden:

     · `:root:not([data-thema="licht"])` binnen de mediaquery — volg het toestel,
       tenzij hij uitdrukkelijk LICHT gekozen heeft;
     · `:root[data-thema="donker"]` erbuiten — hij koos donker, wat het toestel
       ook zegt.

   ⚠️ DE TWEE BLOKKEN ZIJN ÉÉN WAARHEID IN TWEE VORMEN. Wijzig je er één, wijzig
   dan allebei. Het slot daarop is wachter **5G-19** in `src/stijltokens.test.js`:
   die vergelijkt ze token voor token én waarde voor waarde en wordt rood zodra ze
   uiteenlopen — dus dit KAN niet stil scheefgroeien, en dát is de prijs waarvoor
   de duplicatie aanvaard is.

   Waarom niet `light-dark()`, dat dit in één regel per token zou doen: valt die
   functie weg op een oudere browser, dan is de waarde ongeldig en valt élke kleur
   terug op niets — zwarte tekst op een doorzichtige grond, op precies het toestel
   dat het al moeilijk heeft. Twee blokken met een wachter erop is saaier en kan
   niet zo falen.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --grond: #14161c;
    --vlak: #1e2129;
    --vlak-zacht: #242832;
    --vlak-rustig: #2d323d;

    --lijn-zacht: #2f3540;
    --lijn: #3c4350;
    --lijn-sterk: #565f6e;

    --inkt: #e8ebf0;
    --inkt-zacht: #ccd3de;
    --gedempt-sterk: #b3bccb;
    --gedempt: #9aa3b2;
    --uit: #5c6472;
    /* Zelfde rol, andere waarde: donkerder dan --gedempt in plaats van lichter,
       want in het donkere thema ligt "verder weg" de andere kant op. */
    --placeholder: #6b7484;

    --accent: #4caf6d;
    --accent-diep: #8fd8a8;
    --accent-vlak: #16301f;
    --accent-lijn: #2c5a3b;
    --accent-uit: #35503f;
    --op-accent: #08150c;
    --accent-doorschijnend: rgba(76, 175, 109, 0.92);

    --fout: #ff9a90;
    --fout-vlak: #3a1a17;
    --fout-lijn: #6b2a24;
    --fout-sterk: #e8695a;
    --opname: #c8392c;
    --opname-bezig: #7e1d16;

    --letop: #e8bd63;
    --letop-diep: #f0d48a;
    --letop-gedempt: #c6ad72;
    --letop-vlak: #33280d;
    --letop-vlak-zacht: #2a2213;
    --letop-lijn: #6b5620;
    /* --letop-fel blijft geel: de impersonatiebalk is een alarm en hoort in
       allebei de thema's even luid te zijn. --op-letop-fel dus ook. */
    --letop-focus: #e0b350;

    --info: #7db0f0;
    --info-diep: #9db8f5;
    --info-vlak: #1a2440;
    --paars: #c0a6e8;
    --paars-vlak: #271b3a;

    --vlak-doorschijnend: rgba(30, 33, 41, 0.92);
    --schaduw: rgba(0, 0, 0, 0.45);
    --doek-grond: #2a2f38;
  }
}

/* De tweede ingang naar exact dezelfde waarden: hij koos DONKER, wat het
   toestel ook zegt. Zie de uitleg bij het blok hierboven — dit is één waarheid
   in twee vormen, en wachter 5G-19 bewaakt dat ze gelijk blijven. Gemaakt met
   een script uit het blok hierboven, dus ze kunnen bij het aanmaken al niet
   verschillen. */
:root[data-thema="donker"] {
  --grond: #14161c;
  --vlak: #1e2129;
  --vlak-zacht: #242832;
  --vlak-rustig: #2d323d;

  --lijn-zacht: #2f3540;
  --lijn: #3c4350;
  --lijn-sterk: #565f6e;

  --inkt: #e8ebf0;
  --inkt-zacht: #ccd3de;
  --gedempt-sterk: #b3bccb;
  --gedempt: #9aa3b2;
  --uit: #5c6472;
  /* Zelfde rol, andere waarde: donkerder dan --gedempt in plaats van lichter,
     want in het donkere thema ligt "verder weg" de andere kant op. */
  --placeholder: #6b7484;

  --accent: #4caf6d;
  --accent-diep: #8fd8a8;
  --accent-vlak: #16301f;
  --accent-lijn: #2c5a3b;
  --accent-uit: #35503f;
  --op-accent: #08150c;
  --accent-doorschijnend: rgba(76, 175, 109, 0.92);

  --fout: #ff9a90;
  --fout-vlak: #3a1a17;
  --fout-lijn: #6b2a24;
  --fout-sterk: #e8695a;
  --opname: #c8392c;
  --opname-bezig: #7e1d16;

  --letop: #e8bd63;
  --letop-diep: #f0d48a;
  --letop-gedempt: #c6ad72;
  --letop-vlak: #33280d;
  --letop-vlak-zacht: #2a2213;
  --letop-lijn: #6b5620;
  /* --letop-fel blijft geel: de impersonatiebalk is een alarm en hoort in
     allebei de thema's even luid te zijn. --op-letop-fel dus ook. */
  --letop-focus: #e0b350;

  --info: #7db0f0;
  --info-diep: #9db8f5;
  --info-vlak: #1a2440;
  --paars: #c0a6e8;
  --paars-vlak: #271b3a;

  --vlak-doorschijnend: rgba(30, 33, 41, 0.92);
  --schaduw: rgba(0, 0, 0, 0.45);
  --doek-grond: #2a2f38;
}

/* En de NATIVE onderdelen gaan mee. `color-scheme: light dark` op :root laat het
   toestel beslissen; zodra hij zelf gekozen heeft, moet een <select>, een
   <input>, een vinkje en de scrollbalk die keuze volgen en niet die van het
   toestel — anders staat er een wit uitklapmenu op een donkere balk, en dat is
   precies het gat dat deel a met die ene regel gedicht heeft. Deze twee regels
   dragen GEEN tokens: ze staan hier apart zodat wachter 5G-19 de twee donkere
   blokken hierboven zuiver kan vergelijken. */
:root[data-thema="licht"] { color-scheme: light; }
:root[data-thema="donker"] { color-scheme: dark; }

/* ============================================================================
   DE PLACEHOLDER — blok 5E, en het is één regel omdat 5G de plaats gaf.

   `::placeholder` kwam vóór dit blok in de héle public/ nergens voor. De browser
   zette hem dus zoals hij wilde, en op een gsm is dat donkerder dan op een
   laptop — donker genoeg om als ingevulde waarde te lezen. Zeven van de twintig
   placeholders in deze app zijn VOORBEELDWAARDEN (rekeningnummer, btw-nummer,
   ondernemingsnummer, BIC, website, juridische vorm), en ze staan alle zeven op
   bedrijf-profiel.html. Die mogen voorbeelden blijven zodra ze er ook uitzien
   als een voorbeeld.

   `opacity: 1` is niet decoratief: Firefox zet er van zichzelf een lagere
   doorzichtigheid op, en dan is de kleur hierboven niet meer de kleur die je
   ziet.

   DE TOETS die zegt of dit af is, staat op de noodweg en niet in een test: zet
   één keer een échte waarde naast een voorbeeld en kijk of je het verschil ziet.
   Zie je het niet, dan is deze waarde niet licht genoeg.

   ⚠️ EN DE KLEUR ALLEEN VOLSTAAT NIET — dat is de vondst van de noodweg (Steven,
   25/8). Náást een ingevulde waarde zie je het verschil meteen; op een LEEG
   formulier — een verse zaak, de allereerste keer — is er niets om mee te
   vergelijken, en dan leest een grijze `BE68 5390 0754 7034` nog altijd als
   "dit staat er al". Precies de toestand van een nieuwe gebruiker.

   Daarom draagt elk van de zes voorbeeldplaceholders op `bedrijf-profiel.html`
   nu het woordje `bv. ` VOORAAN. Vooraan en niet achteraan, en dat is gemeten op
   375 px: `(voorbeeld)` erachter past niet in het BIC-vakje — dat is een half
   veld van 121 px en het heeft er 170 nodig, dus dan wordt precies het woord
   afgekapt dat de verwarring moet wegnemen. Een voorvoegsel overleeft afkappen
   altijd. Het is bovendien de vorm die dit scherm zelf al gebruikte (`bv. BV`
   bij de juridische vorm, `Bv. Facturen…` bij de voorwaarden).

   ⚠️ EN DE REGEL GELDT NIET VOOR ALLE VIERENTWINTIG, want dat was te breed —
   nagekeken op 25/8 bij het nalezen van `a237f31`. Van de placeholders in deze
   app is het MERENDEEL een INSTRUCTIE en geen voorbeeld: "Zoek op naam,
   telefoon…", "Typ hier je bericht…", "Wat is er die dag gebeurd?", "leeg = geen
   voorschot". Het verschil is niet cosmetisch:

     · een VOORBEELD mag wegvallen zodra het als voorbeeld leest — dat is het
       hele punt;
     · een INSTRUCTIE is het énige wat er in een leeg zoekveld staat. Die
       lichter maken dan de browser zelf doet, is een achteruitgang.

   Vandaar twee regels in plaats van één, en de markering die ze scheidt is
   dezelfde `bv. ` die hierboven al de betekenis draagt. Dat is met opzet: een
   voorbeeld ZONDER dat woordje krijgt de lichte kleur niet, en valt dus terug op
   hintniveau. De verkeerde kant om te vergeten is de veilige kant.
   ========================================================================= */
::placeholder { color: var(--gedempt); opacity: 1; }
[placeholder^="bv. "]::placeholder,
[placeholder^="Bv. "]::placeholder { color: var(--placeholder); }

/* ============================================================================
   DE GEDEELDE BALK — verhuisd uit `zorgVoorBalkStijl()` in `bedrijf.js`.

   Die functie bestond alleen omdat er geen stylesheet was: ze spoot dit blok
   met JavaScript in de <head>, ná de stijl van de pagina. Hier staat het
   VÓÓR de stijl van de pagina, dus de cascade is omgekeerd. Nagekeken op
   25/8: geen enkele pagina definieert `.balk-nav`, `.nav-knop`,
   `.afmeld-knop`, `.beveiliging-knop`, `.vast-bedrijf`, `.gebruiker-naam` of
   `#impersonatieBalk`.

   ⚠️ EN SINDS 5G DEEL b WOONT OOK `.bedrijf-balk` ZELF HIER. Deel a liet die
   twee regels bewust op elf plaatsen staan — de hoogte van de balk was toen de
   nulmeting die bewees dat deel a geen indeling geraakt had. Deel b hertekent
   die balk, dus staan de elf identieke kopieën nu hier, op één plaats.
   De ENIGE die op zijn scherm blijft, is de derde regel van `tekenen.html`
   (`.kopbalk .bedrijf-balk`): die is schermspecifiek.

   ── WAT DEEL b MET DEZE BALK DOET ───────────────────────────────────────────
   Van DRIE REGELS naar ÉÉN. Gemeten op 375 px op een verse zaak: 140 px vóór,
   en die hoogte was bijna de helft van de reden dat de onderste ingang op Start
   op 840 px van 812 eindigde. Er staan nog twee dingen in:

     [← Terug] [⌂ Start] ······································· (SM)

   Alles wat "wie ben ik en waar zit ik" zegt — de bedrijfskiezer, "Aangemeld
   als …", Beveiliging en Afmelden — kruipt achter die ronde accountknop. Dat is
   Ophelia's punt van 25/8, en het is méér dan wat gevraagd was: Bedrijfsgegevens
   en Beheer zijn nu vanaf ELF schermen bereikbaar in plaats van vanaf Start
   alleen.

   HET IS GEEN HAMBURGER. Terug en Start blijven permanent zichtbaar — dat was
   de luidste klacht van 21/8 en de hele reden van blok 5A. Wat achter de knop
   gaat, is wat je zelden nodig hebt.

   ⚠️ DE 40 PX VAN DEEL a IS HIER 44 GEWORDEN (`var(--raakdoel)`), op alle
   raakdoelen van deze balk. Deel a liet ze op 40 staan omdat hun hoogte de
   nulmeting droeg; die reden is met dit blok vervallen.
   ========================================================================= */
.bedrijf-balk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--t-klein);
  color: var(--gedempt-sterk);
}

/* ⚠️ DE KIEZER VERHUIST IN DE DOM EN NIET IN DE HTML. Elk van de elf ingelogde
   schermen houdt zijn `<div class="bedrijf-balk">` mét `<label
   for="bedrijfKiezer">` en `<select id="bedrijfKiezer">` byte voor byte zoals
   hij was — wachter 5A-5 leest BESTANDEN, en het getal elf heeft nul marge.
   `bedrijf.js` verplaatst die twee bij het opbouwen naar het uitklapvak.

   Deze regel dekt het halve ogenblik ertussen: zolang ze DIRECTE KINDEREN van
   de balk zijn, staan ze er niet. Zodra `vulBalk()` ze verhuisd heeft, zijn ze
   geen direct kind meer en tonen ze gewoon — dus er blijft géén gat in het vak
   achter, en dát was de reden dat het werkplan tegen een kale `display: none`
   waarschuwde. */
.bedrijf-balk > label[for="bedrijfKiezer"],
.bedrijf-balk > #bedrijfKiezer { display: none; }

/* Blok 5A. De navigatiegroep staat als eerste kind in de balk; deze regel duwt
   de accountknop naar rechts. */
.bedrijf-balk .balk-nav {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bedrijf-balk .nav-knop {
  display: inline-flex;
  align-items: center;
  min-height: var(--raakdoel);
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--t-klein);
  color: var(--accent);
  background: var(--vlak);
  border: 2px solid var(--lijn);
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------------------------------------------- de accountknop en zijn vak
   De mechaniek staat in `zorgVoorAccount()` in bedrijf.js en is bewust saai:
   een gewone knop plus een `<div hidden>`. Géén <details> (die sluit niet op
   Esc en niet op een klik erbuiten) en géén Popover-API — twee openklap-
   mechanismen voor één ding is precies waar `zetTerugOverschrijving()` voor
   waarschuwt. */
.bedrijf-balk .account { position: relative; }

.bedrijf-balk .account-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--raakdoel);
  height: var(--raakdoel);
  padding: 0;
  font-family: inherit;
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--inkt);
  background: var(--vlak);
  border: 2px solid var(--lijn);
  border-radius: 50%;
  cursor: pointer;
}
.bedrijf-balk .account-knop[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

/* Bewust géén `display` op deze doos: dan doet `[hidden]` gewoon zijn werk,
   ook op de schermen die zelf geen `[hidden] { display: none !important }`
   zetten. */
.bedrijf-balk .account-vak {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 250px;
  max-width: 84vw;
  padding: 8px;
  text-align: left;
  background: var(--vlak);
  border: 2px solid var(--lijn);
  border-radius: 14px;
  box-shadow: 0 10px 28px var(--schaduw);
}

/* Blok 4F deel a, §4.2 — "Aangemeld als" en niet enkel de naam. Tot 15/8 stond
   hier de kale gebruikersnaam pal tegen de bedrijfsnaam: "Bedrijf Stielman BV
   Steven Meus" — twee namen zonder te weten welke van wie is. Het woordje
   ervoor lost dat op, en het reist met deze regel mee het vak in. */
.bedrijf-balk .account-vak .gebruiker-naam {
  display: block;
  padding: 8px 10px 10px;
  font-size: var(--t-klein);
  color: var(--gedempt);
}

.bedrijf-balk .account-bedrijf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 10px 10px;
}
.bedrijf-balk .account-bedrijf select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--raakdoel);
  padding: 8px 10px;
  font-size: var(--t-basis);
  font-family: inherit;
  color: inherit;
  background: var(--vlak);
  border: 2px solid var(--lijn);
  border-radius: 10px;
}
.bedrijf-balk .account-bedrijf .vast-bedrijf { font-weight: 600; color: var(--inkt); }

/* De themakiezer. Drie standen naast elkaar, want "volg mijn toestel" is een
   échte derde keuze en niet de afwezigheid van de andere twee — een tuimelknop
   met twee standen kan dat verschil niet uitdrukken. De streep eronder scheidt de
   twee INSTELLINGEN bovenaan het vak van de vier dingen die ergens naartoe gaan.
   De mechaniek staat in public/thema.js; dit is enkel de knop. */
.bedrijf-balk .account-thema {
  padding: 0 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--lijn-zacht);
}
.bedrijf-balk .account-thema-titel {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-label);
  color: var(--gedempt);
}
.bedrijf-balk .thema-groep { display: flex; gap: 6px; }
.bedrijf-balk .thema-knop {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--raakdoel);
  padding: 0 6px;
  font-family: inherit;
  font-size: var(--t-klein);
  color: var(--inkt);
  background: var(--vlak);
  border: 2px solid var(--lijn);
  border-radius: 10px;
  cursor: pointer;
}
/* De gekozen stand draagt het accent en niet enkel een vollere rand: op een gsm
   in de zon is een randverschil van 2 px geen verschil. */
.bedrijf-balk .thema-knop[aria-pressed="true"] {
  color: var(--accent-diep);
  background: var(--accent-vlak);
  border-color: var(--accent-lijn);
  font-weight: 700;
}

/* Elk item in het vak is een raakdoel, en dus 44 px. Dat geldt ook voor
   Beveiliging en Afmelden: die dragen sinds dit blok géén eigen knopvorm meer
   — in een menu is een omrande knop naast een link precies het soort verschil
   dat niets betekent. De stille vorm van Beveiliging blijft daarmee overeind:
   een ingang voor wie ze zoekt, geen aansporing (beslissing 10/8). */
.bedrijf-balk .account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--raakdoel);
  padding: 0 10px;
  font-family: inherit;
  font-size: var(--t-basis);
  text-align: left;
  text-decoration: none;
  color: var(--inkt);
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.bedrijf-balk .account-item:hover { background: var(--vlak-zacht); }

/* Impersonatiebalk: bewust een kleur die nergens anders in de app voorkomt.
   Zonder dat gebeurt er vroeg of laat iets in de verkeerde zaak. */
#impersonatieBalk {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: var(--letop-fel); color: var(--op-letop-fel);
  font-size: var(--t-basis); font-weight: 600;
  border-bottom: 3px solid var(--letop-rand);
}
#impersonatieBalk button {
  min-height: var(--raakdoel); padding: 8px 14px;
  font-family: inherit; font-size: var(--t-klein); font-weight: 600;
  color: var(--op-letop-fel); background: var(--vlak);
  border: 2px solid var(--letop-rand); border-radius: 10px; cursor: pointer;
}