/* Stijl van de urenmodule.

   Functioneel kaal, maar in de familie: hetzelfde themasysteem als De Levende
   Assistent. Dezelfde regel geldt hier: onder het themablok noemt geen enkel
   onderdeel nog een kleur bij naam, alles loopt via een variabele.
   `tests/test_thema.py` telt dat na.

   Dit scherm is voor een chauffeur die in de cabine zit, met één duim, in de
   kou. Daarom: grote raakvlakken (minstens 44 px), weinig tekst, geen enkele
   beweging die op iets laat wachten. */

@import url("letters.css");

/* ------------------------------------------------------ 0. het themablok */

:root {
  /* -- letters -- */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: Karla, "Segoe UI", system-ui, -apple-system, sans-serif;
  /* De titelletter van de chauffeursapp, en alleen daarvan. Andrea,
     23-10-2026: *"Titels: stevige serif 700 (Source Serif 4 Bold) — niet de
     dunne sierletter die er nu staat."* Cormorant Garamond is díé sierletter:
     op een telefoon in de cabine leest een titel van 32 px daarin als
     versiering, en dit is een app waar loon aan hangt.

     Hij staat náást de twee families en niet in plaats van een van beide: de
     kantoorschermen houden Cormorant. `tests/test_thema.py` kijkt na dat
     `--kopletter` alleen in sectie 9 wordt gebruikt, zodat hij niet alsnog de
     kantoorschermen in kruipt. De zwaarte is 600 en niet 700; zie
     `letters.css`. */
  --kopletter: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  /* -- de maatladder: vijf treden, meer niet -- */
  --reus:  2rem;
  --groot: 1.375rem;
  --tekst: 0.9375rem;
  --klein: 0.8125rem;
  --label: 0.6875rem;

  /* -- vorm -- */
  --rond: 14px;
  --rond-klein: 10px;
  --raak: 44px;              /* de kleinste knop die een duim kan raken */
  --schaduw: 0 1px 2px rgba(43, 43, 43, 0.05);
  --schaduw-zwaar: 0 2px 10px rgba(22, 35, 59, 0.25);

  /* -- kleur: KikiGo -- */
  --paper: #FAF8F7;
  --kaart: #FFFFFF;
  --ink: #2B2B2B;
  --gedempt: #75706F;
  --rand: #EAE5E2;
  --rand-zacht: #F2EEEC;

  --accent: #A85D74;
  --accent-tint: #F3D9E1;
  --goed: #6E9B76;
  --goed-tint: #DCEBDE;
  --aandacht: #A85D74;
  --aandacht-tint: #F3D9E1;
  --let-op: #A64B2A;
  --let-op-tint: #F3E3DA;

  --actie: #6E9B76;
  --actie-tekst: #FFFFFF;
  --lucht: #DDE8EF;
  --lucht-rand: #C8D9E4;
  --lucht-deep: #3D6A85;

  /* -- de schil: dezelfde als in de app bij LogiGO --
     Andrea, 04-10-2026: *"ik wil dezelfde opzet hebben als we de app hebben
     voor LogiGO."* Donkere zijbalk, het rode vierkantje met de K, en het
     menu-item waar je staat in diezelfde kleur. Eén plek om het te wijzigen:
     wordt dit ooit een tweede administratie, dan staat de kleur hier. */
  --zijbalk: #16233B;
  --zijbalk-tekst: #E9EDF3;
  --zijbalk-gedempt: #A3AFC2;
  --zijbalk-pil: #2A3953;
  --zijbalk-fel: #FFFFFF;
  --nadruk: #C4302B;
  /* Hetzelfde rood, zacht: voor de dienstkaart en de gekozen stand op het
     chauffeursscherm. Andrea's bouwopdracht van 20-10-2026 vraagt daar een
     "zacht rood vlak op 8-10% dekking met een rode rand"; dit is `--nadruk` op
     tien procent over wit. Elke andere kleurfamilie in dit blad heeft al zijn
     tint (`--accent-tint`, `--goed-tint`, `--let-op-tint`); rood had er geen,
     omdat rood tot vandaag alleen een vierkantje met een K was. */
  --nadruk-tint: #F9EAEA;
  --merk: 1.0625rem;
  --mini: 0.625rem;

  /* -- de maten die alleen de chauffeursapp gebruikt --

     De ladder hierboven heeft vijf treden en die blijven staan: ze gelden voor
     alle schermen van kantoor. De chauffeursapp is één app op één telefoon, en
     Andrea gaf er eigen maten voor. Tussen `--groot` (22) en `--tekst` (15) zit
     niets wat daarop lijkt, en die twee verzetten zou elk kantoorscherm raken.

     Ze staan hier met `dienst-` ervoor zodat te zien is waar ze horen, en
     `tests/test_thema.py` kijkt na dat ze nergens buiten sectie 9 worden
     gebruikt - anders kruipen ze alsnog de kantoorschermen in. Het getal 17 px
     voor een knop bestond al: dat is `--merk`.

     Op 21-10-2026 stond de titel op 28 px. De bouwopdracht van 23-10-2026 zet
     hem op 32 - *"titel serif 700, 32px"* - en die vervangt de vorige
     schermindeling, dus staat hij nu op 2rem. De basis gaat van 15 naar 16 px
     (*"de sans van de app, basis 16px"*): dat is `--dienst-tekst`, en hij geldt
     alleen binnen `.blad-dienst`. Een kaarttitel is 20 px
     (`--dienst-kaartkop`), een kaartkopje binnen een kaart 18 px
     (`--dienst-kop`), een pil en een subtekstje 12 px (`--dienst-label`). */
  --dienst-titel: 2rem;
  --dienst-merk: 1.5rem;
  --dienst-kaartkop: 1.25rem;
  --dienst-kop: 1.125rem;
  --dienst-tekst: 1rem;
  --dienst-label: 0.75rem;

  /* De sluier achter een vel dat van onderen inschuift. Hij doet twee dingen:
     het vel leest als iets dat vóór het scherm hangt, en een tik ernaast sluit
     het weer. 21-10-2026. */
  --sluier: rgba(26, 23, 22, 0.38);

  /* De balk van een dienst op de klok, en de stip op zijn begintijd. Staat
     apart van `--accent` omdat het planbord er een eigen kleur voor heeft. */
  --tijdbalk: var(--accent);
  --tijdbalk-zacht: var(--goed);
  /* De tekst in een lege plek die om invullen vraagt. */
  --let-op-tekst: var(--let-op);
  /* Of een regel met een gat als geheel gekleurd wordt, of alleen de lege cel
     erin. Zie het nieuwe gezicht hieronder. */
  --regelmarkering: var(--let-op-tint);
  /* Op Vandaag live blijft de regel zelf wél kleuren: daar is het geen lege
     plek om in te vullen maar een rit die nú misgaat. */
  --aandacht-regel: var(--let-op-tint);
  /* Een leeg vakje in het weekrooster. Dat zijn er bij een lege week ruim
     honderd naast elkaar, dus het is lichter dan één losse lege plek: anders
     is het hele scherm één kleur en wijst het nergens meer naar. */
  --gatvlak: var(--let-op-tint);
}

/* -- Het nieuwe gezicht van kantoor --------------------------------------

   Andrea, 24-10-2026, met een ontwerp erbij: wit vlak, navy zijbalk, felrood
   accent, blauwe balken op de klok. *"Geen beige, crème of zandtint,
   nergens."*

   Het staat hier als één stel kleuren en niet als nieuwe klassen: alles in dit
   blad leest dezelfde namen als eerst, dus de kaarten, tabellen, pillen en de
   zijbalk veranderen mee zonder dat er één sjabloon wordt aangeraakt.

   HET CHAUFFEURSSCHERM DOET SINDS 24-10-2026 OOK MEE. Het hing eerst alleen
   achter `.blad-schil`, de schil van kantoor, zodat Andrea de ploeg eerst kon
   inlichten: *"daarna wil ik zelf het startsein geven."* Dat sein kwam
   dezelfde avond, en toen was het omzetten deze ene regel - `.blad-schil`
   werd `body`, zodat ook het scherm van de chauffeur en het vel eronder
   meegaan. Geen tweede blok en geen gekopieerde kleuren: één stel namen voor
   de hele module. */

body {
  --paper: #F7F8FA;
  --kaart: #FFFFFF;
  --ink: #111827;
  --gedempt: #6B7280;
  --rand: #E5E7EB;
  --rand-zacht: #F1F3F6;
  --rond: 12px;
  --schaduw: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* Inter voor al het werk; Karla blijft staan als de letter niet laadt. Het
     scherm van de chauffeur houdt Karla tot Andrea daar het startsein geeft -
     en dat gaat vanzelf mee met de ene regel hierboven. */
  --sans: Inter, Karla, "Segoe UI", system-ui, -apple-system, sans-serif;
  /*  De titels van kantoor: stevig en recht. Het ontwerp vraagt DM Serif
      Display; die letter ligt niet in deze werkmap en halen we niet van
      buiten (zie letters.css). Source Serif 4 600 ligt er wel en doet
      hetzelfde werk - een serif met rechte cijfers, geen sierletter. */
  --titelletter: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  /* Rood is het accent: knoppen, het actieve menu-item, wat aandacht vraagt. */
  --accent: #E5383B;
  --accent-tint: #FDE8E8;
  --aandacht: #E5383B;
  --aandacht-tint: #FDE8E8;
  --nadruk: #E5383B;
  --nadruk-tint: #FDE8E8;

  /* Een lege plek om in te vullen is geel - en alleen de cel, niet de hele
     regel. Dat laatste stond met zoveel woorden in de opdracht. */
  --let-op: #F2C94C;
  --let-op-tint: #FFF6DD;
  --let-op-tekst: #B7791F;
  --regelmarkering: transparent;
  --aandacht-regel: #FDEEE3;
  --gatvlak: #FFFBEF;

  /* De zijbalk blijft donker, maar dan navy. */
  --zijbalk: #14213D;
  --zijbalk-pil: #22304F;
  --zijbalk-tekst: #E9EDF3;
  --zijbalk-gedempt: #9AA7BD;
  --zijbalk-fel: #FFFFFF;

  /* Blauw voor wat er op de klok loopt. Een charterrit blijft herkenbaar
     anders - lichter, want het is werk van een ander bedrijf. */
  --lucht: #DCE8FB;
  --lucht-rand: #B9D0F6;
  --lucht-deep: #1E6FE8;
  --tijdbalk: #1E6FE8;
  --tijdbalk-zacht: #9CC0F5;

  /* Koel blauw voor wat gekozen is en voor een blok dat iets uitlegt. Uit
     Andrea's ontwerp van het scherm Bussen (25-10-2026): de gekozen regel
     krijgt een lichtblauw vlak met een blauwe balk ernaast, en onderaan de
     lijst staat een lichtblauw infoblok. */
  --koel: #EEF4FF;
  --koelvlak: #F3F7FD;
  --koelrand: #E1E9F5;

}

/* Het raster van kantoor is 100vh hoog en draagt zijn eigen vlak. */
.blad-schil { background: var(--paper); }

/* ------------------------------------------------------------- 1. de pagina */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 96px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--tekst);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.blad { max-width: 560px; margin: 0 auto; }
.blad-breed { max-width: 1100px; margin: 0 auto; }

h1 {
  font-family: var(--serif);
  font-size: var(--reus);
  font-weight: 600;
  margin: 24px 0 2px;
  line-height: 1.15;
}

h2 {
  font-family: var(--serif);
  font-size: var(--groot);
  font-weight: 600;
  margin: 28px 0 10px;
}

.kernzin { color: var(--gedempt); margin: 0 0 20px; }

.label {
  font-size: var(--label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gedempt);
  display: block;
  margin: 0 0 6px;
}

a { color: var(--accent); }

/* -------------------------------------------------------------- 2. kaarten */

.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  padding: 16px;
  margin: 0 0 12px;
}

.vak { margin: 0 0 18px; }

/* --------------------------------------------------------- 3. keuzeknoppen */

.keuze { display: flex; flex-wrap: wrap; gap: 8px; }

/* Alleen het bolletje van een radio of vinkje verdwijnt; het label ernaast is de
   knop. Een gewoon invulveld in een keuzerij blijft gewoon staan. */
.keuze input[type="radio"],
.keuze input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.keuze label,
.knopje {
  min-height: var(--raak);
  min-width: var(--raak);
  padding: 10px 16px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.keuze input:checked + label,
.knopje[aria-pressed="true"] {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.uurrooster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.kwartierrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }

.tijdknop {
  min-height: var(--raak);
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.tijdknop[aria-pressed="true"] {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.tijdvak { margin-bottom: 14px; }

.tijdvak summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-height: var(--raak);
  padding: 8px 0;
  border-bottom: 1px solid var(--rand);
}

.tijdvak summary::-webkit-details-marker { display: none; }

.tijdwaarde {
  font-family: var(--serif);
  font-size: var(--groot);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- 4. formulier */

input[type="date"],
input[type="text"],
/* Een mailadres hoort er hetzelfde uit te zien als de rest en net zo groot te
   zijn: dit was het enige invulvak dat smaller dan een duim bleef. 20-10-2026,
   toen het mailadres van een chauffeur op het Team-scherm kwam. */
input[type="email"],
input[type="number"],
/* Een zoekveld hoort hier ook bij. Zonder dit stond het zoekvak voor de bus op
   het chauffeursscherm er als enige kaal bij: scherpe hoeken, een andere rand,
   en te laag voor een duim. 21-10-2026. */
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: var(--raak);
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  font: inherit;
}

.knop {
  display: block;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--rond-klein);
  background: var(--actie);
  color: var(--actie-tekst);
  font: inherit;
  font-size: var(--groot);
  font-family: var(--serif);
  font-weight: 600;
  cursor: pointer;
}
/* Een knop die javascript wegzet, blijft weg. `display: block` hierboven wint
   het anders van de `[hidden] { display: none }` van de browser zelf, en dan
   staat er een knop die er niet hoort te staan - zoals "Toon" op het
   weekscherm, die alleen bestaat voor wie geen javascript heeft. 23-10-2026. */
.knop[hidden], .knopje[hidden] { display: none; }

.knop-stil {
  background: var(--kaart);
  color: var(--ink);
  border: 1px solid var(--rand);
  font-family: var(--sans);
  font-size: var(--tekst);
  min-height: var(--raak);
}

.knoprij { display: flex; gap: 8px; }

/* Een rij invulvelden met hun opschrift erboven - geen keuzeknoppen. */
.veldrij { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.veldrij label { flex: 1; min-width: 120px; font-size: var(--klein); color: var(--gedempt); }
.veldrij input, .veldrij select { margin-top: 4px; }
.veldrij button { flex: 0 0 auto; }
.knoprij .knop { width: auto; flex: 1; }

/* ------------------------------------------------------------- 5. meldingen */

.melding {
  border-radius: var(--rond-klein);
  padding: 12px 14px;
  margin: 0 0 14px;
  border: 1px solid var(--rand);
}

.melding-goed { background: var(--goed-tint); border-color: var(--goed); }
.melding-fout { background: var(--let-op-tint); border-color: var(--let-op); }

.seintje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--klein);
  border: 1px solid var(--rand);
}

.seintje-leeg { background: var(--lucht); border-color: var(--lucht-rand); color: var(--lucht-deep); }
.seintje-goed { background: var(--goed-tint); border-color: var(--goed); color: var(--goed); }
.seintje-veel { background: var(--let-op-tint); border-color: var(--let-op); color: var(--let-op); }

/* ------------------------------------------------------------ 6. de lijst */

.regel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rand-zacht);
}

.regel:last-child { border-bottom: 0; }
.regel-dag { font-weight: 600; }
.regel-mee { color: var(--gedempt); font-size: var(--klein); }

.getal {
  font-family: var(--serif);
  font-size: var(--groot);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.leeg { color: var(--gedempt); font-style: italic; }

.brief {
  background: var(--rand-zacht);
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  padding: 12px 14px;
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-family: var(--sans);
  font-size: var(--klein);
}

/* ------------------------------------------------------------- 7. de tabel */

/* Twee tabellen, één vorm: het weekraster en de gewone lijst (chauffeurs, de
   telling bij Doorgeven). Getallen onder getallen, één regel per ding. */
.rooster, .lijst { width: 100%; border-collapse: collapse; font-size: var(--klein); }
.lijst th, .lijst td {
  border-bottom: 1px solid var(--rand);
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
}
.lijst thead th {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gedempt);
  font-weight: 600;
  white-space: nowrap;
}
.lijst tbody tr:hover { background: var(--rand-zacht); }
.lijst td.cijfer, .lijst th.cijfer {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lijst tfoot th { border-top: 2px solid var(--rand); border-bottom: 0; font-weight: 700; }
.lijst .klein { font-size: var(--klein); color: var(--gedempt); }

.rooster th, .rooster td {
  border: 1px solid var(--rand);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
.rooster th { background: var(--rand-zacht); font-weight: 600; white-space: nowrap; }
.rooster td.cijfer, .rooster th.cijfer { text-align: right; font-variant-numeric: tabular-nums; }
.rooster tr.totaalrij td { background: var(--rand-zacht); font-weight: 700; }
/* Een dienst die rijdt en waar niemand op staat. Dit stond op --lucht, en dat
   leest als "rustig" terwijl de uitleg eronder rood belooft. Een gat hoort op
   te vallen; dit is hetzelfde tintje als een seintje dat aandacht vraagt.
   05-10-2026. */
/* De zeven dagvinkjes van een dienst horen op één regel. Breken ze af, dan
   wordt elke rij drie regels hoog en is zeventien diensten geen lijst meer maar
   een trap. De tabel staat in een .schuif, dus hij mag breder zijn dan het
   scherm. 05-10-2026. */
.lijst td .keuze.dagen { flex-wrap: nowrap; }
.lijst td .keuze.dagen label { padding: 10px 12px; }
.rooster td.gemist { background: var(--gatvlak); }
/* Op het dagscherm is een hele regel één dienst, dus daar kleurt de rij. */
.rooster tr.gemist td { background: var(--gatvlak); }
.rooster td.veel { background: var(--let-op-tint); }
.rooster td.vrij { background: var(--goed-tint); }
/* Een dienst die afwijkt van wat hij normaal duurt. Zelfde kleur als de andere
   dingen die om een blik vragen: het is geen fout, het is iets om na te kijken.
   Andrea, 14-10-2026. */
.rooster td.wijkt { background: var(--let-op-tint); }

/* Het vinkje "nagekeken" bij een regel in het weekraster. Klein en stil als er
   nog niets mee is gedaan, groen zodra jij ernaar hebt gekeken. Het staat naast
   de uren, want daar kijk je toch al. 14-10-2026. */
.vinkvorm { display: inline; }
.vinkje {
  border: 1px solid var(--rand);
  background: none;
  color: var(--gedempt);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
}
.vinkje:hover { border-color: var(--goed); color: var(--goed); }
.vinkje.aan {
  background: var(--goed-tint);
  border-color: var(--goed);
  color: var(--goed);
  font-weight: 700;
}
.schuif { overflow-x: auto; }

/*  Een tabel die zijwaarts verdergaat, zegt dat ook. Andrea, 24-10-2026, over
    Diensten: *"de kolommen lopen rechts uit beeld"* - je kón schuiven, maar
    niets liet zien dat daar nog iets stond. Een balk die altijd te zien is,
    en een eerste kolom die blijft staan, zodat je bij kolom negen nog weet
    welke dienst je invult. */
.schuif { scrollbar-width: thin; }
.schuif::-webkit-scrollbar { height: 10px; }
.schuif::-webkit-scrollbar-track { background: var(--rand-zacht); }
.schuif::-webkit-scrollbar-thumb {
  background: var(--rand);
  border-radius: 999px;
}
.breedtabel th:first-child, .breedtabel td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--kaart);
}
/*  Een cel die de hele rij beslaat (zoals "Aanpassen" onder een bus) hoort
    niet mee te plakken: hij is breder dan het scherm, en dan blijft er een
    stuk van zijn tekst aan de linkerrand hangen. */
.breedtabel td[colspan] { position: static; }
/*  Wat erin staat blijft wél in beeld: anders hangt er bij kolom vijf nog een
    staartje "…en" van Aanpassen aan de linkerrand. */
.breedtabel td[colspan] > a,
.breedtabel td[colspan] > details {
  position: sticky;
  left: 0;
  /*  Zonder dit is het blok net zo breed als de hele tabel en valt er niets te
      laten plakken. */
  display: inline-block;
  min-width: 240px;
}
/*  De kaart laat links en rechts geen lucht meer: anders schuiven de kolommen
    zichtbaar achter die rand langs en lijkt het of er letters afbreken. De
    tekst houdt zijn marge, de tabel niet. */
.kaart.schuif.strak { padding-left: 0; padding-right: 0; }
.schuifzin { margin: 0 0 8px; font-size: var(--klein); color: var(--gedempt); }

/*  Het blok van één chauffeur staat dicht tot je op zijn naam klikt. Stonden
    ze alle elf open, dan was de lijst waar je voor komt elf kaartjes verderop.
    Het klapje zelf doet de rest (`:target` plus het scriptje op het scherm). */
.kaart.man { display: none; }
.kaart.man:target { display: block; }
.terug-lijst { margin-left: auto; font-size: var(--klein); font-weight: 400; }

/* Een dagvakje houdt een leesbare breedte. Zonder dit perst de tabel zeven
   dagen in de ruimte die er is, en dan past "een lange dienstnaam 9:00" niet in
   een kolom van veertig pixels. Liever schuiven dan knijpen. */
.rooster th:first-child, .rooster td:first-child { min-width: 150px; }
.rooster thead th:not(:first-child) { min-width: 108px; }

/* De namenkolom blijft staan als je naar vrijdag schuift. Met elf chauffeurs
   naast zeven dagen schuift het raster opzij, en dan stond je bij donderdag te
   raden wiens regel je las. */
.rooster th:first-child,
.rooster td:first-child,
.rooster tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--kaart);
  box-shadow: 1px 0 0 var(--rand);
}
.rooster thead th:first-child { z-index: 3; background: var(--rand-zacht); }
.rooster tbody th:first-child { background: var(--rand-zacht); }
.rooster tfoot td:first-child { background: var(--rand-zacht); }

/* Het plusje waarmee je een vakje invult. In een leeg vakje vult het de hele
   cel, zodat je nergens precies hoeft te mikken; naast een dienst die er al
   staat is het klein, want daar is het de tweede dienst van die dag. */
.plusje {
  display: inline-block;
  text-decoration: none;
  color: var(--gedempt);
  font-size: var(--groot);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.plusje-leeg {
  display: block;
  width: 100%;
  min-height: var(--raak);
  text-align: center;
  padding: 8px 0;
}
.plusje:hover, .plusje:focus-visible {
  background: var(--rand-zacht);
  color: var(--ink);
}

/* Een klapje dat je niet herkent, bestaat niet. De eigen inlog stond er als een
   kaartje met één regel erin: geen driehoekje, geen plusje, niets dat zei dat
   er iets onder zat. Andrea zette haar wachtwoord daardoor in het vak erboven
   en kreeg "dat klopt niet". 07-10-2026. */
.openklap > summary { list-style: none; }
/* De klapregel zelf: een plusje en een regel die zegt wat eronder zit. Stond met
   de hand in het sjabloon; nu één keer hier, zodat elk klapje er hetzelfde
   uitziet. */
.openklap > summary.klapkop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--raak);
  cursor: pointer;
}
.openklap > summary::-webkit-details-marker { display: none; }
.openklap > summary .plusje::before { content: "+"; }
.openklap[open] > summary .plusje::before { content: "\2212"; }
.openklap > summary:hover .plusje {
  background: var(--rand-zacht);
  color: var(--ink);
}

/* ------------------------------------------------------------ 7b. de schil

   Dezelfde opzet als de app bij LogiGO: een donkere zijbalk links met het rode
   vierkantje en de plekken eronder, rechts het werk. Andrea, 04-10-2026: *"ik
   wil dezelfde opzet hebben als we de app hebben voor LogiGO."*

   Alleen het beheer draagt deze schil. Het scherm van de chauffeur blijft één
   pagina zonder menu: hij zit in een cabine en hoeft nergens heen. */

.blad-schil { max-width: none; margin: 0 -16px; }

.raam {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.zijkant {
  background: var(--zijbalk);
  color: var(--zijbalk-tekst);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Het vierkantje met de K is opmaak en geen inhoud, dus staat het in de stijl
   en niet in de HTML. */
/* Het merk in de zijbalk: de naam groot, het laatste stuk in rood. Geen
   vierkantje met een letter meer en geen ondertitel - het ontwerp van
   24-10-2026 wil de naam zelf zien. */
.merk { display: flex; align-items: center; padding: 0 8px 6px; }
.merktekst { min-width: 0; }
.merk .naam {
  font-family: var(--titelletter);
  font-size: var(--reus);
  font-weight: 600;
  color: var(--zijbalk-fel);
  line-height: 1.1;
}
.merk .naam .staart { color: var(--nadruk); }

.groepkop {
  display: block;
  font-size: var(--mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zijbalk-gedempt);
  padding: 0 12px 8px;
}

.zijkant nav { display: flex; flex-direction: column; gap: 2px; }
.zijkant nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--raak);
  padding: 10px 12px;
  border-radius: var(--rond-klein);
  color: var(--zijbalk-tekst);
  text-decoration: none;
}
.zijkant nav a:hover { background: var(--zijbalk-pil); color: var(--zijbalk-fel); }
.zijkant nav a[aria-current="page"] {
  background: var(--nadruk);
  color: var(--zijbalk-fel);
  font-weight: 500;
}
.zijkant footer { margin-top: auto; }
.zijkant footer .knopje { width: 100%; }

.midden { padding: 26px 26px 40px; min-width: 0; }
.midden > h1 { margin-top: 0; }

/* De kop van de pagina: links de titel met zijn kernzin, rechts een plek die
   bijna elk scherm leeg laat. Op Nu staat daar of dit beeld van nu is. */
.paginakop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.paginatitel { flex: 1 1 320px; min-width: 0; }
.paginatitel h1 { margin-top: 0; }

/* Op een breed scherm is er geen menuknop nodig; het menu staat er al. */
.menu-knop, .menu-sluiten { display: none; }

@media (max-width: 860px) {
  .raam { grid-template-columns: minmax(0, 1fr); }
  .zijkant {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    transform: translateX(-100%);
  }
  /* Het menu ligt over het scherm zodra je erom vraagt. Geen script: het adres
     zelf zet hem open, en dan werkt hij ook als er iets met de pagina misgaat. */
  .zijkant:target { transform: none; }
  .menu-sluiten {
    display: block;
    text-align: right;
    color: var(--zijbalk-gedempt);
    text-decoration: none;
    min-height: var(--raak);
  }
  .menu-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 30;
    min-height: var(--raak);
    padding: 0 18px;
    border-radius: 999px;
    background: var(--zijbalk);
    color: var(--zijbalk-fel);
    text-decoration: none;
    box-shadow: var(--schaduw-zwaar);
  }
  .midden { padding: 18px 16px 90px; }
}

/* ------------------------------------------------------- 7c. de busbalk
   Wanneer is welke bus bezet. De lijst erboven zegt wie een dienst rijdt; dit
   zegt waar die auto dan is. Twee ritten die elkaar op één bus overlappen zie
   je hier meteen, en in een lijst nooit.

   Alles staat in procenten: de breedte komt uit de tijd, niet uit het aantal
   pixels. Zo klopt hij op een telefoon net zo goed. */

.balkrij {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.balkrij .kent { font-size: var(--klein); white-space: nowrap; }
.baan {
  position: relative;
  height: 30px;
  border-radius: var(--rond-klein);
  background: var(--rand-zacht);
  border: 1px solid var(--rand);
  overflow: hidden;
}
.baan .blok {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: var(--rond-klein);
  padding: 0 8px;
  font-size: var(--mini);
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
}
/* Gereden: een echte rit, met een echt begin en einde. */
.baan .gereden { background: var(--goed-tint); border: 1px solid var(--goed); }
.baan .loopt { background: var(--accent-tint); border: 1px solid var(--accent); }
/* Gepland: alleen een begintijd bekend. Open vlak, want de lengte is een
   schatting of niet meer dan een streepje. */
.baan .gepland {
  background: var(--let-op-tint);
  border: 1px dashed var(--let-op);
  color: var(--let-op);
}
.baan .nu {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--nadruk);
}
.balkuren {
  position: relative;
  /* Twee regels hoog: onderin de uren, bovenin het bordje met "nu". Op één
     regel liepen die door elkaar heen en stond er NU09:20 over het uur 09. */
  height: 34px;
  font-size: var(--mini);
  color: var(--gedempt);
}
.balkuren span {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
}
.balkrij.botst .baan { border-color: var(--let-op); }

/* De baan onderaan: een rit zonder bus terwijl er wél een bus bij hoort. Daar is
   een boete niet terug te zoeken, dus die baan valt op. Rijdt de charter met
   zijn eigen auto, dan ontbreekt er niets en blijft de baan gewoon. */
.balkrij.ontbreekt .kent { color: var(--let-op); font-weight: 600; }
.balkrij.ontbreekt .baan {
  border-color: var(--let-op);
  background: var(--let-op-tint);
}

/* Het rode streepje "nu" draagt zijn tijd, boven de balk in de urenrij. Zonder
   dat getal moet je het streepje tegen de uren aanleggen om te weten hoe laat
   het is - en dat is precies de leesstap die dit scherm overslaat. */
.numarker {
  position: absolute;
  top: 0;
  bottom: auto;
  transform: translateX(-50%);
  color: var(--nadruk);
  font-weight: 600;
  white-space: nowrap;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 0;
  font-size: var(--klein);
  color: var(--gedempt);
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 18px; height: 11px; border-radius: 4px; flex: none; }
.legenda .l-gereden { background: var(--goed-tint); border: 1px solid var(--goed); }
.legenda .l-loopt { background: var(--accent-tint); border: 1px solid var(--accent); }
.legenda .l-gepland { background: var(--let-op-tint); border: 1px dashed var(--let-op); }
.legenda .l-nu { width: 2px; height: 14px; border-radius: 0; background: var(--nadruk); }

/* -------------------------------------------------- 7d. het scherm Nu

   Een toestandscherm: hier is "goed" niet minder maar compleet. Elke rit van
   vandaag staat erop, ook de rit die gewoon goed gaat - want een gat kan alleen
   opvallen als er een omgeving is waarin het een gat ís. Wat af is wordt
   opgevouwen; daar valt niets meer te beslissen. */

.verbinding {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--klein);
  color: var(--gedempt);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bolletje {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--goed);
  flex: none;
}

/* Vier tellers op een rij. Het icoon in zijn gekleurde vlakje is geen
   versiering: wie visueel leest, scant daarmee in plaats van te lezen. */
.telrij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.telkaart { display: flex; align-items: center; gap: 12px; }
.tegeltje {
  width: 36px;
  height: 36px;
  border-radius: var(--rond-klein);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tegel-actief { background: var(--lucht); color: var(--lucht-deep); }
.tegel-straks { background: var(--rand-zacht); color: var(--gedempt); }
.tegel-aandacht { background: var(--let-op-tint); color: var(--let-op); }
.tegel-klaar { background: var(--goed-tint); color: var(--goed); }

.telgetal {
  display: block;
  font-family: var(--serif);
  font-size: var(--reus);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.telwoord { display: block; font-size: var(--klein); color: var(--gedempt); }

/* Links het werk, rechts een kolom die niets van je vraagt behalve een besluit. */
.nuwerk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

/* De pil met de stand. Drie kleuren, niet vier: blauw en neutraal zijn allebei
   "staat klaar", oranje is aandacht, groen is geregeld. Het woord op het scherm
   mag het woord van de operatie zijn; de kleur blijft er één van de drie. */
.pil-actief { background: var(--lucht); border-color: var(--lucht-rand); color: var(--lucht-deep); }
.pil-aandacht { background: var(--let-op-tint); border-color: var(--let-op); color: var(--let-op); }
.pil-geregeld { background: var(--goed-tint); border-color: var(--goed); color: var(--goed); }

/* Het kenteken als klein label, zodat het één ding is en geen stuk tekst. */
.kentlabel {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--rand-zacht);
  font-size: var(--mini);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* "Geen" is een uitkomst, geen leegte: een bus die niet nodig is staat er als
   woord, zodat je ziet dat er naar gekeken is. */
.nietnodig { color: var(--gedempt); font-size: var(--klein); }

/* Het gat is de knop: een keuzelijst op de plek waar het feit hoort te staan,
   met een oranje rand zodat je hem van een meter afstand ziet. Eén lijst vult
   één gat; er is met opzet geen knop die er meer tegelijk doet. */
.gat { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gat select {
  width: auto;
  min-width: 132px;
  border-color: var(--let-op);
  background: var(--let-op-tint);
  color: var(--ink);
}
.gat .knopje { padding: 8px 12px; }

/* Een kaart in Nu oplossen: een icoon, de dienst, één regel, één knop. */
.vraagkaart {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rand-zacht);
}
.vraagkaart:last-child { border-bottom: 0; }
.vraagkaart .tegeltje { width: 28px; height: 28px; }
.vraagkaart .knopje { margin-top: 6px; }

/* Laatste updates: het tijdstip ervoor, wat er gebeurde erachter. */
.updates { list-style: none; margin: 0; padding: 0; }
.updates li { display: flex; gap: 10px; padding: 5px 0; font-size: var(--klein); }
.updates .stip {
  color: var(--gedempt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* De lijst op Nu knijpt niet maar schuift: een tijd als "17:00 – verwacht 22:00"
   hoort op één regel te staan, en een keuzelijst met zijn knop ernaast. Drie
   regels van elk drie regels hoog is geen lijst meer maar een trap. */
.nulijst { min-width: 700px; }
.nulijst td.tijd { white-space: nowrap; }

/* Onder de werkbreedte zakt de rechterkolom eronder. Naast elkaar geperst wordt
   geen van beide leesbaar, en dan is onder elkaar het hele beeld nog heel. */
@media (max-width: 1280px) {
  .nuwerk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .telrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- 8. de voettekst */

.voet {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rand);
  color: var(--gedempt);
  font-size: var(--klein);
}


/* ---------------------------------------------- de vertrekprocedure (stap 2)

   Wat een chauffeur naloopt voordat hij wegrijdt. Hij staat op een erf, met
   zijn telefoon in één hand en zijn sleutels in de andere: elk vinkje is dus
   een vlak van 44 pixels hoog, en de tekst staat links van het randje zodat
   een duim hem raakt zonder te mikken.

   Geen foto's en geen kilometerstand, op het besluit van 19-10-2026. Wat
   overblijft past op één scherm zonder scrollen - en dát is wat maakt dat het
   ook echt gebeurt. */

.vertreklijst { list-style: none; margin: 6px 0 0; padding: 0; }
.vertreklijst li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--raak);
  padding: 4px 0;
  border-top: 1px solid var(--rand-zacht);
}
.vertreklijst li:first-child { border-top: 0; }
.vertreklijst input[type="checkbox"] {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  accent-color: var(--accent);
  margin: 0;
}
/* Het hele label is het tikvlak, niet alleen het hokje. */
.vertreklijst label {
  flex: 1;
  min-height: var(--raak);
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Het vak van de procedure in het formulier van de chauffeur. Een eigen randje
   eromheen: dit is één handeling en geen losse velden. */
.vak.vertrek { border: 1px solid var(--rand); border-radius: var(--rond-klein);
               padding: 12px; }
.vak.vertrek input[type="text"] { margin-top: 8px; }

/* Op het beheerscherm staat per punt een tekstvak met twee knoppen ernaast.
   Een punt dat van de lijst is gehaald blijft staan, maar gedempt: het hoort
   bij de geschiedenis en niet meer bij vandaag. */
.vertreklijst.beheer li { flex-wrap: wrap; align-items: flex-end; }
.vertreklijst.beheer li.uit { opacity: 0.55; }
.vertreklijst.beheer form { flex: 1 1 auto; min-width: 0; }


/* De belknop onderaan het chauffeursscherm. Hij staat los van de kaarten:
   dit is geen onderdeel van het invullen maar de uitweg als er iets niet
   klopt. Breed en met een ruim tikvlak, want hij wordt met een werkhandschoen
   aangetikt. Nieuw op 20-10-2026. */
.bellen { margin: 18px 0 8px; }
/* De tekst hoort midden in de knop te staan. Zonder dit staat hij linksboven
   in een vak van 44 pixels hoog, en dan lijkt het geen knop maar een regel met
   een lijst eromheen. 20-10-2026. */
.bellen .knop {
  width: 100%;
  min-height: var(--raak);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* ------------------------------------------- 9. het chauffeursscherm (telefoon)

   De drie schermen van Andrea's bouwopdracht van 20-10-2026: Je dienst starten,
   Controle vóór vertrek, Je dienst loopt. Plus Mijn uren en Meer.

   Ontworpen op 390 px breed en nagekeken op 360. Elk tikvlak is minstens 48 px,
   want er wordt met werkhandschoenen getikt, in het donker, met één duim.

   **Rood is hier de merkkleur.** Dat is Andrea's uitzondering voor dit ene
   scherm: de hoofdknoppen, de voortgangsbalk, de dienstkaart en de plek waar je
   staat in de onderbalk zijn rood (`--nadruk`), net als het vierkantje met de K
   in de zijbalk van kantoor. Wat aandacht vraagt is oranje (`--let-op`) en wat
   goed is groen (`--goed`) - dezelfde kleur mag niet twee dingen betekenen.
   Andrea, 20-10-2026, op dat voorstel: *"5 is goed."*

   De kantoorschermen blijven ongemoeid: alles hieronder hangt onder
   `.blad-dienst`, en dat staat alleen op de schermen van de chauffeur. */

.blad-dienst { max-width: 440px; }

/* -- de kopbalk: 56 px, donkerblauw, zoals de zijbalk van kantoor -- */

.kopbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  margin: 0 -16px 10px;
  padding: 0 16px;
  background: var(--zijbalk);
  color: var(--zijbalk-tekst);
}
/* "LogiGo" in de kopbalk staat in dezelfde stevige serif als de titels, op
   24 px. Andrea's bouwsteen 1, 23-10-2026: *"links 'LogiGo' serif 700 wit
   24px."* Hij stond in de sierletter van kantoor, en dan is het merk van de app
   de dunste letter op het scherm. */
.kopmerk {
  font-family: var(--kopletter);
  font-size: var(--dienst-merk);
  font-weight: 600;
  color: var(--zijbalk-fel);
}
.kopnaast { font-size: var(--klein); color: var(--zijbalk-gedempt); }

/* -- de onderbalk: drie plekken, alle drie van hem --

   Vast onderaan het scherm, met ruimte voor de balk van de telefoon zelf
   (`safe-area`). De body houdt onderaan 96 px vrij, dus er valt niets onder. */

.onderbalk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--kaart);
  border-top: 1px solid var(--rand);
}
/* Geschreven als `.blad-dienst .onderbalk a` en niet als `.onderbalk a`: even
   verderop staat `.blad-dienst a { color: var(--nadruk) }` voor de tekstlinks,
   en die zou anders winnen op volgorde - dan staan alle drie de plekken in het
   rood en zegt de balk niet meer waar je bent. */
.blad-dienst .onderbalk a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  color: var(--gedempt);
  text-decoration: none;
  font-size: var(--klein);
}
.blad-dienst .onderbalk a[aria-current="page"] {
  color: var(--nadruk);
  font-weight: 600;
}

/* -- de kop van scherm 1 -- */

/* "Hoi [voornaam]" op 16 px, de basis van de app, en niet op de 15 van
   kantoor. Andrea's bouwsteen 2, 23-10-2026: *"optioneel 'Hoi [voornaam]'
   16px subtekst."* */
.groet { color: var(--gedempt); font-size: var(--dienst-tekst); margin: 8px 0 0; }
.groet + h1 { margin-top: 2px; }

/* De titel van de chauffeur staat in sectie 9j, bij de paginakop: hij kreeg op
   23-10-2026 een eigen letter (`--kopletter`) en een eigen maat (32 px), en
   die twee horen bij elkaar te staan. */

/* Geen kopjes in hoofdletters meer, nergens op deze schermen. Andrea,
   21-10-2026: *"Kopjes in hoofdletters met letterafstand"* moeten weg. Ze
   lazen als systeemtaal en ze kostten een regel hoogte.

   Twee soorten, en het verschil doet ertoe: het kopje van een kaart is een
   kopje en staat in de kopletter (`.kaartkop`); de kleine onderschriften
   binnen een kaart - "of typ het zelf", "Pauze in minuten" - blijven klein en
   gedempt, want dat zijn ze. Op de kantoorschermen blijft `.label` wat hij
   was. */
.kaartkop {
  font-size: var(--dienst-kop);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  display: block;
  margin: 0 0 4px;
}
.blad-dienst .label {
  letter-spacing: normal;
  text-transform: none;
  font-size: var(--klein);
}

.stap {
  font-size: var(--klein);
  color: var(--gedempt);
  margin: 6px 0 4px;
}
.voortgang {
  height: 6px;
  border-radius: 999px;
  background: var(--rand);
  overflow: hidden;
  margin: 0 0 12px;
}
.voortgang i { display: block; height: 100%; background: var(--nadruk); }

/* -- de datumregel met "Wijzigen" -- */

/* Een eigen lichte regel met een kalenderblad ervoor, zoals in het ontwerp.
   Stond eerst als een streep onder een regel tekst; dan leest het als een
   tussenkopje in plaats van als iets wat je kunt aantikken. 21-10-2026. */
.datumvak { margin: 0 0 10px; }
.datumvak > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  cursor: pointer;
  background: var(--rand-zacht);
  border-radius: var(--rond-klein);
}
.datumvak > summary::-webkit-details-marker { display: none; }
.datumvak > summary svg { flex: none; color: var(--gedempt); }
.datumtekst { flex: 1; font-weight: 600; font-size: var(--klein); }
.wijzig { color: var(--nadruk); font-size: var(--klein); }
.datumvak[open] > summary { border-radius: var(--rond-klein) var(--rond-klein) 0 0; }
.datumvak > input[type="date"] { margin-top: 8px; }

/* -- de keuzeschakelaar: nu starten of achteraf invullen --

   De twee keuzerondjes staan als eerste kind van het formulier, buiten beeld.
   Daardoor kan de stijl met één regel laten zien wat bij de gekozen stand
   hoort, zonder een script. Doet de telefoon geen javascript, dan werkt dit
   nog steeds - het is de browser die het rondje aanzet. */

.modus { position: absolute; opacity: 0; pointer-events: none; }

.schakelaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.schakelaar label {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  cursor: pointer;
  user-select: none;
}
#modus-nu:checked ~ .schakelaar label[for="modus-nu"],
#modus-achteraf:checked ~ .schakelaar label[for="modus-achteraf"] {
  background: var(--nadruk);
  border-color: var(--nadruk);
  color: var(--actie-tekst);
  font-weight: 600;
}

.alleen-nu, .alleen-achteraf { display: none; }
#modus-nu:checked ~ .alleen-nu { display: block; }
#modus-achteraf:checked ~ .alleen-achteraf { display: block; }

/* -- een kaartje per vraag: één vraag, één omlijsting -- */

.kaartje {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  padding: 8px 12px;
  margin: 0 0 10px;
}

/* Wat hij koos: een zacht rood vlak met een rode rand. Uit Andrea's
   bouwopdracht van 20-10-2026: *"Gekozen keuze (dienst, bus): zacht rood vlak
   met een rode rand."* Op de kantoorschermen blijft dit roze (`--accent`);
   rood is alleen hier het merk. */
.blad-dienst .keuze input:checked + label {
  background: var(--nadruk-tint);
  border-color: var(--nadruk);
  color: var(--nadruk);
}
.blad-dienst .keuze input:checked + label .regel-mee { color: var(--nadruk); }
/* Hetzelfde voor het uur en het kwartier dat hij aantikte: wat gekozen is, is
   op dit scherm rood. Eén kleur voor "dit heb ik gekozen". */
.blad-dienst .tijdknop[aria-pressed="true"] {
  background: var(--nadruk-tint);
  border-color: var(--nadruk);
  color: var(--nadruk);
}
/* En de vinkjes van de vertreklijst. Op de kantoorschermen blijven ze roze. */
.blad-dienst .vertreklijst input[type="checkbox"] { accent-color: var(--nadruk); }
.voorkeuze { margin: 0 0 8px; font-size: var(--klein); color: var(--gedempt); }
.let-op { color: var(--let-op); font-weight: 600; }

/* -- de hoofdknop is rood, alleen hier -- */

/* Knoppen staan hier in de gewone letter en niet in de kopletter. Andrea,
   21-10-2026: *"Serif in knoppen. 'Verder naar vertrekcheck →' staat nu in een
   dunne serif. Knoppen horen in de sans, 600."* Op de kantoorschermen blijft de
   knop zoals hij was. */
.blad-dienst .knop {
  background: var(--nadruk);
  font-family: var(--sans);
  font-size: var(--merk);
  font-weight: 600;
}
.blad-dienst .knop-stil {
  background: var(--kaart);
  color: var(--ink);
  border: 1px solid var(--rand);
}
.blad-dienst a { color: var(--nadruk); }
/* Behalve een link die de vorm van een knop heeft. Zonder deze twee regels
   wint `.blad-dienst a` van `.knop`, en dan staat er rode tekst op een rode
   knop: een leeg rood balkje. Gevonden op 360 px bij "Bel de planning" onder
   Meer, 20-10-2026. */
/* En een link met de vorm van een knop hoort zijn tekst in het midden te
   hebben. Een `<button>` doet dat vanzelf, een `<a>` niet - dan staat "Bel de
   planning" links in een knop van volle breedte. Gezien op de afdruk van
   23-10-2026. */
.blad-dienst a.knop {
  color: var(--actie-tekst);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blad-dienst a.knop-stil { color: var(--ink); text-decoration: none; }

/* Een knop die nog niet mag. Hij blijft staan waar hij staat en hij blijft
   leesbaar; eronder zegt een regel wat er nog moet. Weghalen zou erger zijn:
   dan zoekt hij een knop die er niet is. */
.blad-dienst .knop:disabled { opacity: 0.45; cursor: not-allowed; }

/* Een opschrift dat het zoekveld heeft weggefilterd. Zonder deze regel blijft
   hij staan: `.keuze label` zet `display` en dat wint van `hidden`. */
.keuze label[hidden] { display: none; }

/* ------------------------------------- 9i. één voorstel per vraag, met een vel

   Andrea, 21-10-2026, na haar proefrit: *"Het ontwerp is één rustig scherm met
   per vraag één voorstel en een knop Wijzigen. De huidige versie is een muur
   van knoppen."* Zeventien diensten en veertien bussen stonden als losse
   knoppen onder elkaar; met een voorstel voor dienst en bus past het scherm nu
   op één telefoon van 390 bij 844, inclusief de hoofdknop.

   Het is een gewone `details`. Dicht is het één regel, open is het de lijst.
   Het schuift alleen van onderen in als javascript werkt (`html.js`); zonder
   javascript klapt het open op zijn plek, want een vel dat vastgeplakt staat en
   niet dicht kan, is een val. */

.kiesvak > summary { list-style: none; cursor: pointer; }
.kiesvak > summary::-webkit-details-marker { display: none; }

/* De voorstelregel. Een zacht vlak met een gewone rand en gewone tekst.

   Dit was eerst rood vlak, rode rand én rode tekst, voor zowel de dienst als
   de bus. Samen met de schakelaar, het knopje Aanpassen en de hoofdknop stond
   er dan vijf keer rood op één scherm. Andrea, 22-10-2026: *"al dat rood pas
   het aan."* Rood is nu waar het hoort - de knop waar je op drukt, de stand
   die aanstaat, en de plek waar je bent in de onderbalk. Het busje ervoor
   blijft rood: dat is één klein merkteken en geen vlak. */
.kiesregel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 12px;
  background: var(--rand-zacht);
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  color: var(--ink);
}
.kiesregel svg { color: var(--nadruk); }
/* Staat er niets voor: dan een leeg vak en geen gevuld. Een lege keuze die
   eruitziet als een gemaakte keuze is erger dan een leeg vak. */
.kiesregel-leeg {
  background: var(--kaart);
  color: var(--gedempt);
}
.kiesregel-leeg svg { color: var(--gedempt); }
.kiesregel svg { flex: none; }
.kiestekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kiestekst strong { font-weight: 600; }
.kiesonder { font-size: var(--klein); color: var(--gedempt); }
.kiesregel-leeg .kiesonder { color: var(--gedempt); }
.kiespijl { flex: none; color: var(--gedempt); font-size: var(--dienst-kop); }

/* Het vel zelf. */
.vel { padding: 12px 0 0; }
.velkop {
  font-family: var(--kopletter);
  font-size: var(--dienst-kop);
  font-weight: 600;
  margin: 0 0 10px;
}
.vellijst { max-height: 46vh; overflow-y: auto; margin: 10px 0 0; }
.vellijst label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 10px;
  border-bottom: 1px solid var(--rand-zacht);
  cursor: pointer;
}
.vellijst label[hidden] { display: none; }
.vellijst input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.vellijst input:checked + label { background: var(--nadruk-tint); color: var(--nadruk); }
.velnaam { font-weight: 600; }
.velmee { font-size: var(--klein); color: var(--gedempt); }
.vellijst input:checked + label .velmee { color: var(--nadruk); }
/* "Vorige keer" staat rechts, klein en gedempt: het is een geheugensteun en
   geen keuze. */
.vellaatst {
  margin-left: auto;
  font-size: var(--dienst-label);
  color: var(--gedempt);
}
.velstreep { border: 0; border-top: 1px solid var(--rand); margin: 8px 0; }
.vel .knop { margin-top: 12px; }

/* Als javascript werkt, komt het vel van onderen in beeld - zoals het paneel
   op het scherm Week van kantoor. Achter het vel komt een sluier, en omdat die
   bij de `summary` hoort sluit een tik ernaast het vel weer. */
.js .kiesvak[open] > summary::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 29;
  background: var(--sluier);
}
.js .kiesvak[open] > .vel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  max-height: 80vh;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
  background: var(--kaart);
  border-top: 1px solid var(--rand);
  border-radius: var(--rond) var(--rond) 0 0;
  box-shadow: var(--schaduw-zwaar);
}

/* Het label boven de voorkeuze van de bus: 12 px, gedempt, geen hoofdletters. */
.voorkeuzelabel {
  display: block;
  margin: 6px 0 2px;
  font-size: var(--dienst-label);
  color: var(--gedempt);
}

/* -- de starttijd: een klok, de tijd groot, en een knopje "Aanpassen" --

   De tijd staat in de gewone letter met rechte cijfers op vaste breedte.
   Andrea, 21-10-2026: *"Sierlijke cijfers in de tijd (07:18 met hangende
   cijfers)"* moeten weg. In Cormorant hangen de cijfers onder de regel; dat
   leest als versiering, en aan deze tijd hangt loon. */

.tijdvak-groot { margin-bottom: 0; }
.tijdvak-groot > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  /* Geen streep eronder: de kaart heeft al een rand, en twee lijnen om
     hetzelfde heen kosten hoogte die dit scherm niet heeft. */
  border-bottom: 0;
}
.tijdvak-groot > summary svg { flex: none; color: var(--gedempt); }
.tijdgroot {
  flex: 1;
  font-family: var(--sans);
  font-size: var(--dienst-titel);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
}
/* Elke tijd en elk urenbedrag op deze schermen staat in de gewone letter met
   rechte cijfers. Andrea, 21-10-2026: *"Sierlijke cijfers in de tijd."* In
   Cormorant hangen de cijfers onder de regel; dat leest als versiering, en hier
   staat telkens een tijd waar loon aan hangt. Op de kantoorschermen blijven de
   grote cijfers in de kopletter staan. */
.blad-dienst .getal,
.blad-dienst .tijdwaarde,
.blad-dienst .telgetal,
.blad-dienst .maandkaart .telgetal {
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
}

/* "Aanpassen" is een stil knopje: de tijd staat er al, en hij hoeft hem
   meestal niet aan te raken. Stond in het rood; zie de uitleg bij
   `.kiesregel`. 22-10-2026. */
.tijdaanpas {
  flex: none;
  padding: 8px 14px;
  border-radius: var(--rond-klein);
  background: var(--kaart);
  border: 1px solid var(--rand);
  color: var(--ink);
  font-size: var(--klein);
  font-weight: 600;
}

/* -- onder de hoofdknop -- */

.hoofdknop { margin-top: 4px; }
/* Eén korte regel, en alleen als er werkelijk iets ontbreekt. Hier stond elke
   dag de vaste uitleg over bereik; die hoort bij een fout. */
.knophint {
  margin: 8px 0 0;
  font-size: var(--klein);
  color: var(--gedempt);
}
.knophint[hidden] { display: none; }

.hulpregel { text-align: center; margin: 16px 0 0; }
.hulpregel a { font-size: var(--klein); }

/* De twee lijstjes onder de knop. Ze horen bij vandaag, maar niemand heeft ze
   nodig om weg te kunnen - dus staan ze eronder en niet ertussen. */
.verderkop { font-size: var(--dienst-kop); margin: 22px 0 8px; }

/* -- scherm 2: terug, samenvatting, de twee meldknoppen, het signaalvlak -- */

.terugrij { margin: 14px 0 0; }
.terugknop {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--nadruk);
  font: inherit;
  cursor: pointer;
}

.samenvatting { background: var(--rand-zacht); }

/* De ritbalk op scherm 2: dienst, bus, tijd in één regel, met een streepje
   ertussen. Zoals in het ontwerp van 21-10-2026. */
.ritbalk {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 0 6px;
  padding: 0 4px;
  background: var(--rand-zacht);
  border-radius: var(--rond-klein);
}
.ritbalk span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--klein);
  font-weight: 600;
}
.ritbalk span + span { border-left: 1px solid var(--rand); }
.ritbalk svg { flex: none; color: var(--gedempt); }
.tijdklein { font-variant-numeric: lining-nums tabular-nums; }
.ritdag { margin: 0 0 12px; font-size: var(--klein); color: var(--gedempt); }

.tweekeuze { display: grid; grid-template-columns: 1fr 1fr; }
.tweekeuze label { min-height: 48px; }
.keuze input:checked + label.keuze-goed {
  background: var(--goed-tint);
  border-color: var(--goed);
  color: var(--goed);
}
.keuze input:checked + label.keuze-letop {
  background: var(--let-op-tint);
  border-color: var(--let-op);
  color: var(--let-op);
}

/* Het signaalvlak. Oranje en niet rood: rood is hier het merk, oranje is wat
   aandacht vraagt. Het staat er altijd, ook als alles in orde is - dit is geen
   melding over wat hij net deed maar de regel van het huis. */
.signaal {
  background: var(--let-op-tint);
  border: 1px solid var(--let-op);
  border-radius: var(--rond-klein);
  color: var(--let-op);
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: var(--klein);
}
.signaal::before { content: "⚠ "; }

/* -- scherm 3: de bevestiging, de dienstkaart, de rijen, het vel -- */

/* "Start opgeslagen" krimpt na vier seconden in plaats van te verdwijnen.
   Andrea's opdracht: *"Na 4 seconden klein maken, niet weghalen."* Met de stijl
   en niet met een script, zodat er niets te wachten valt. */
.bevestiging {
  background: var(--goed-tint);
  border: 1px solid var(--goed);
  border-radius: var(--rond-klein);
  color: var(--goed);
  padding: 14px;
  margin: 16px 0 0;
  font-weight: 600;
  animation: krimpen 0.25s ease-out 4s forwards;
}
@keyframes krimpen {
  to { padding: 5px 10px; font-size: var(--klein); }
}

/* De dienstkaart: zacht rood met een rode rand. Dit is het enige vlak op het
   scherm dat zegt "dit loopt nu", en daarom draagt het de merkkleur. */
.dienstkaart {
  background: var(--nadruk-tint);
  border: 1px solid var(--nadruk);
  border-radius: var(--rond);
  padding: 16px;
  margin: 0 0 12px;
}
.dienstkaart p { margin: 0; }
.dienstkaart .getal { display: block; margin-top: 8px; }

/* Een rij die ergens naartoe gaat: een woord links, een pijl rechts. */
.doelrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rand-zacht);
  text-decoration: none;
  color: var(--ink);
}
.doelrij:last-child { border-bottom: 0; }
.doelrij .pijl { color: var(--nadruk); }

/* Het vel van onderen. Een `details` en geen laag die over het scherm valt: het
   schuift open waar je het aantikt, het werkt zonder javascript, en er is niets
   dat blijft hangen als de telefoon iets anders doet. */
.vel { margin: 0 0 14px; }
.vel > summary { list-style: none; }
.vel > summary::-webkit-details-marker { display: none; }
.velknop {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.velblad {
  border: 1px solid var(--rand);
  border-top: 0;
  border-radius: 0 0 var(--rond) var(--rond);
  background: var(--kaart);
  padding: 16px;
}

/* -- Mijn uren -- */

/* De kop van een dag, met het totaal van die dag rechts. Andrea, 21-10-2026:
   *"IK WIL IN 1X ZIEN HOEVEEL UUR PER DAG ER STAAT."* Reed hij twee ritten op
   één dag, dan stonden er twee losse getallen en mocht hij zelf optellen. */
.dagkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--rand-zacht);
}
.dagkop:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.daggetal {
  font-family: var(--sans);
  font-size: var(--dienst-kop);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}

.maandkaart { text-align: center; }
/*  Alleen binnen de maandkaart. `.telgetal` bestaat al sinds het scherm Nu van
    kantoor, waar het op een <span> staat en zijn `display: block` nodig heeft.
    Een kale `.telgetal` hieronder zou die van kantoor overschrijven en de vier
    tellers daar op één regel duwen. 21-10-2026. */
.maandkaart .telgetal {
  font-family: var(--serif);
  font-size: var(--reus);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 2px;
  line-height: 1.1;
}
.maandrij {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--klein);
}
.maandrij a { min-height: 48px; display: inline-flex; align-items: center; }
.urenrij { align-items: flex-start; }


/* ------------------------------------- 9j. de bouwstenen van Mijn LogiGo
   (23-10-2026)

   Andrea's bouwopdracht van 23-10-2026 begint met een diagnose en niet met een
   wens: *"Het ontwerp is één app met één stijl. De huidige versie bestaat uit
   stukken in verschillende stijlen."* Haar oplossing staat er ook bij: *"bouw
   eerst een vaste set bouwstenen. Stel daarna elk scherm uitsluitend uit die
   bouwstenen samen."*

   Dit blok is die set. Zeventien stuks, elk één keer beschreven; de macro's die
   ze neerzetten staan in `sjablonen/_onderdelen.html` en `/u/<token>/_bouwstenen`
   toont ze alle zeventien naast elkaar. Komt er een achttiende vorm bij, dan
   hoort dat hier te gebeuren en niet in een sjabloon - een scherm met een eigen
   stijl is precies waar deze opdracht vandaan komt.

   Wat hier bewust níét gebeurt: de kleuren uit haar tabel worden niet als
   hexwaarde overgenomen. Elke kleurrol loopt via een token uit het themablok
   (`tests/test_thema.py`), en welk token bij welke rol hoort staat per
   bouwsteen in het commentaar. Vier van die tokens staan een paar graden naast
   haar waarde; dat is gemeld en niet stilletjes bijgesteld. */

/* De basis van de app is 16 px en niet de 15 van kantoor. Andrea: *"Al het
   andere: de sans van de app, basis 16px."* */
.blad-dienst { font-size: var(--dienst-tekst); }

/* Wat verborgen is, blijft verborgen - ook als het een knop is.

   Dit was een echte fout, en hij stond er al: `hidden` zet `display: none` via
   de browser zelf, en dat is de zwakste regel die er is. Elke klasse met een
   eigen `display` wint ervan. De knop "Op mijn beginscherm zetten" draagt
   `hidden` tot de telefoon hem werkelijk aanbiedt - en stond er dus altijd,
   bij iedereen, ook op een iPhone die er niets mee doet. Precies de knop die
   niets doet waar Andrea's opdracht tegen waarschuwt. Gezien op de afdruk van
   23-10-2026. `tests/test_opbeginscherm.py` houdt het vast. */
.blad-dienst [hidden] { display: none; }

/* -- bouwsteen 2: de paginakop -- */

/* "Hoi [voornaam]" erboven (gedempt), de titel in de stevige serif, en een
   optionele subregel van 17 px eronder. `.groet` bestond al. */
.blad-dienst h1 {
  font-family: var(--kopletter);
  font-size: var(--dienst-titel);
  font-weight: 600;
  margin: 10px 0 2px;
}
.subregel {
  margin: 0 0 16px;
  font-size: var(--merk);
  font-weight: 500;
  color: var(--gedempt);
}

/* -- bouwsteen 3: de kaart -- */

/* De kaart zelf is `.kaart` uit sectie 2: wit, 1 px rand, radius 14. Alleen de
   schaduw gaat eraf - Andrea: *"geen schaduw"* - en de kaarttitel komt erbij,
   op 20 px in de kopletter. */
.blad-dienst .kaart { box-shadow: none; }
.kaarttitel {
  font-family: var(--kopletter);
  font-size: var(--dienst-kaartkop);
  font-weight: 600;
  margin: 0 0 6px;
}
/* Een kaarttitel die een lijstregel krijgt in plaats van tekst: dan hoort er
   geen dubbele witruimte tussen. */
.kaarttitel + .lijstregel { margin-top: 2px; }
/* De kopjes bínnen een kaart (18 px) blijven in de kopletter staan en niet in
   de sierletter. Gescopeerd op `.blad-dienst` zodat een kantoorscherm dat ooit
   `.kaartkop` gebruikt er de zijne houdt. */
.blad-dienst .kaartkop { font-family: var(--kopletter); }

/* -- bouwsteen 4: de lijstregel -- */

/* De vorm waar deze hele opdracht om draait. Andrea: *"Het ontwerp werkt met
   lijstregels die doorklikken. De huidige versie zet alles uitgeschreven onder
   elkaar."* Minstens 56 px hoog, een lijn-icoon van 22 px links, de titel op
   16 px 500, een optioneel subtekstje van 13 px, en rechts een waarde, een pil
   of `[plek]` met een chevron erachter.

   De hele regel is één `<a>` of één `<button>`: wie met handschoenen tikt mikt
   niet op een pijltje van acht pixels. */
.lijstregel {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rand-zacht);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lijstregel:last-child { border-bottom: 0; }
/* Een lijstregel is een link, en een link is op dit scherm rood - maar een
   lijstregel hoort zwarte tekst te hebben met een rood pijltje erachter, niet
   een hele regel in het rood. Zonder deze regel wint `.blad-dienst a` (die één
   graad specifieker is dan `.lijstregel`) en leest de hele lijst als een rij
   links. Gezien op de eerste afdruk van 390 × 844, 23-10-2026. Hetzelfde geldt
   voor een tegel en voor een dag in de dagenrij. */
.blad-dienst a.lijstregel,
.blad-dienst a.tegel,
.blad-dienst a.dagvak { color: var(--ink); }
/* Een regel die nergens heen gaat (nog niet beschikbaar) is geen knop: geen
   handje, geen chevron, en de titel gedempt. */
.lijstregel-uit { cursor: default; color: var(--gedempt); }
.lijstregel > svg { flex: none; color: var(--gedempt); }
.lijstregel-uit > svg { opacity: 0.55; }
.regeltekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.regeltitel { font-size: var(--dienst-tekst); font-weight: 500; }
.regelsub { font-size: var(--klein); color: var(--gedempt); }
/* Rechts: een waarde, of `[plek]` in grijs als er nog niets is. Rechte cijfers
   op vaste breedte, want hier staan tijden en kentekens. */
.regelwaarde {
  flex: none;
  font-size: var(--dienst-tekst);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}
.regelplek { flex: none; font-size: var(--klein); color: var(--gedempt); }
.chevron { flex: none; color: var(--gedempt); font-size: var(--dienst-kop); }

/* -- bouwsteen 5, 6 en 7: de drie knoppen -- */

/* De hoofdknop: één per scherm, volle breedte, 52 px, rood. `.knop` uit sectie
   3 geeft hem zijn vorm; hier staat alleen wat Andrea's tabel erbij zet. */
.blad-dienst .hoofdknop { min-height: 52px; margin-top: 10px; }

/* De omlijnde knop: wit met een rode rand van 1,5 px. Voor "Achteraf invullen"
   en "Beschikbaarheid doorgeven" - dingen die mogen, maar niet de weg zijn. */
.blad-dienst .omlijnd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--nadruk);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--nadruk);
  font-family: var(--sans);
  font-size: var(--merk);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0 0 12px;
}

/* De grijze knop: voor iets dat er nog niet is. Hij blijft staan en blijft
   leesbaar; weghalen zou erger zijn, dan zoekt hij een knop die er niet is.
   Kleurrol: `--rand` als vlak en `--gedempt` als tekst - het lichtgrijs en het
   grijs uit Andrea's tabel, een paar graden ernaast. Gemeld. */
.blad-dienst .grijsknop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--rond-klein);
  background: var(--rand);
  color: var(--gedempt);
  font-family: var(--sans);
  font-size: var(--merk);
  font-weight: 600;
  text-align: center;
  cursor: default;
  margin: 0 0 12px;
}

/* -- bouwsteen 8: de tegel -- */

/* Twee naast elkaar, halve breedte, 64 px hoog: icoon, titel, subtekst. Actief
   heeft een rode rand; niet beschikbaar is een grijs vlak met de reden erin -
   niet een knop die niets doet. */
.tegelrij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px;
}
.tegel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 12px;
  border: 1.5px solid var(--nadruk);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  text-decoration: none;
}
.tegel > svg { flex: none; color: var(--nadruk); }
.tegeltekst { min-width: 0; display: flex; flex-direction: column; }
.tegeltitel { font-size: var(--dienst-tekst); font-weight: 600; }
.tegelsub { font-size: var(--dienst-label); color: var(--gedempt); }
.tegel-uit {
  border: 1px solid var(--rand);
  background: var(--rand-zacht);
  color: var(--gedempt);
  cursor: default;
}
.tegel-uit > svg { color: var(--gedempt); }

/* -- bouwsteen 9: de pil -- */

/* Vier standen en geen vijfde. Grijs = afgerond, geel = er ontbreekt iets,
   rood = loopt nu, zacht grijs = los berichtje.

   Kleurrollen: grijs is `--rand-zacht` op `--gedempt`, rood is `--nadruk-tint`
   op `--nadruk`, en "ontbreekt" is `--let-op-tint` op `--let-op`. Dat laatste
   is de terracotta van deze module en niet het geel uit Andrea's tabel; in dit
   stijlblad betekent "vraagt aandacht" al `--let-op`, en dezelfde betekenis
   twee kleuren geven is erger dan één graad kleurverschil. Gemeld.

   De stand "loopt nu" heet hier `pil-nu` en niet `pil-loopt`. Dat laatste
   bestaat al in sectie 10, voor het weekraster van kantoor: een rood gevuld
   pilletje met witte tekst. Die staat verderop in dit blad en zou dus winnen,
   en dan had een chauffeur stilletjes de pil van kantoor op zijn scherm. Twee
   betekenissen op één naam is een fout die je pas op een telefoon ziet. */
.pil {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rand-zacht);
  color: var(--gedempt);
  font-size: var(--dienst-label);
  font-weight: 600;
  white-space: nowrap;
}
.pil-letop { background: var(--let-op-tint); color: var(--let-op); }
.pil-nu { background: var(--nadruk-tint); color: var(--nadruk); }
.pil-goed { background: var(--goed-tint); color: var(--goed); }

/* -- bouwsteen 10: de infobalk -- */

/* Lichtblauwgrijs, een info-icoon, 14 px. Hij vertelt iets wat hij hoort te
   weten en vraagt niets: *"Afgerond is niet automatisch goedgekeurd."*
   Kleurrol: de luchtfamilie die er al was (`--lucht`).

   Hij heet `uitlegbalk` en niet `infobalk`. Dat laatste bestaat al in sectie
   10, voor het weekraster van kantoor, en die is oranje. Hij staat verderop in
   dit blad en won dus: de rustige blauwe balk van de chauffeur kwam er oranje
   uit. Gezien op de afdruk van 23-10-2026, en precies het soort fout waar het
   bouwstenenblad voor is. */
.uitlegbalk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
  border: 1px solid var(--lucht-rand);
  border-radius: var(--rond-klein);
  background: var(--lucht);
  color: var(--lucht-deep);
  font-size: var(--klein);
}
.uitlegbalk > svg { flex: none; margin-top: 1px; }

/* -- bouwsteen 11: de signaalbalk -- */

/* Zacht roze met een rood icoon, een regel tekst en een rode link. Dit is geen
   fout en geen alarm: het is een aanbod. *"Geen dienst ingepland?"* met
   *"Dienst kiezen →"* ernaast. Kleurrol: `--nadruk-tint` op `--nadruk`.

   Niet te verwarren met `.signaal` uit sectie 9 hierboven: dat is het oranje
   vlak van de vertrekcheck, en dat blijft oranje omdat het daar wél om iets
   gaat wat aandacht vraagt. */
.signaalbalk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
  border-radius: var(--rond-klein);
  background: var(--nadruk-tint);
  font-size: var(--klein);
}
.signaalbalk > svg { flex: none; color: var(--nadruk); }
.signaaltekst { flex: 1; min-width: 0; }
.signaalbalk a { font-weight: 600; white-space: nowrap; }

/* -- bouwsteen 12: de lege staat -- */

/* Een eerlijk leeg scherm. Een lijn-icoon van 48 px in grijs, een titel van
   17 px en één regel uitleg. Andrea: *"Planning toont een eerlijke lege staat
   zolang er geen rooster is."* Geen verzonnen voorbeelddienst, geen
   grijze balkjes die laden suggereren. */
.legestaat { text-align: center; padding: 28px 16px; }
.legestaat > svg { color: var(--rand); }
.legekop {
  font-family: var(--sans);
  font-size: var(--merk);
  font-weight: 600;
  margin: 10px 0 4px;
}
.legeuitleg { font-size: var(--klein); color: var(--gedempt); margin: 0; }

/* -- bouwsteen 13: de periodekiezer -- */

/* Een kaart van 48 px met ‹ links, de periode in het midden en › rechts. De
   pijlen zijn knoppen met een `aria-label`, want "‹" alleen leest een
   voorleesprogramma niet voor. */
.periode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 0 6px;
  margin: 0 0 12px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
}
.periodepijl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--nadruk);
  font-size: var(--dienst-kaartkop);
  text-decoration: none;
  cursor: pointer;
}
.periodepijl[aria-disabled="true"] { color: var(--rand); cursor: default; }
.periodenaam {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

/* -- bouwsteen 14: de dagenrij -- */

/* Zeven vakjes met de dag en de datum. Vandaag is rood gevuld met witte tekst;
   de dag die hij aantikte krijgt een rode rand. */
.dagenrij {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 0 12px;
}
.dagvak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 52px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--dienst-label);
}
.dagvak b {
  font-size: var(--klein);
  font-variant-numeric: lining-nums tabular-nums;
}
.dagvak-nu {
  background: var(--nadruk);
  border-color: var(--nadruk);
  color: var(--actie-tekst);
}
.blad-dienst a.dagvak-nu { color: var(--actie-tekst); }
.dagvak-gekozen { border: 1.5px solid var(--nadruk); }

/* -- bouwsteen 15: het vel van onderen -- */

/* Wit, radius 16 boven, een greep, een titel en een ✕ om te sluiten. Het is
   een `details` en geen laag die met javascript wordt opgebouwd: zonder script
   klapt het open op zijn plek, en er blijft nooit iets hangen.

   Het vel van de dienst- en buskeuze (`.kiesvak`, sectie 9i) is hetzelfde
   ding met een eigen zoekveld erin; die blijft staan zoals hij was. */
.velvanonder > summary { list-style: none; cursor: pointer; }
.velvanonder > summary::-webkit-details-marker { display: none; }
/* De knop die het vel opent is de `summary` zelf. Een `summary` is van zichzelf
   een lijstregel met een driehoekje, en daardoor stond de tekst van "Dienst
   afronden" links in plaats van in het midden - gezien op de afdruk van
   23-10-2026. Deze twee regels maken er weer een gewone knop van. */
.blad-dienst .velvanonder > summary.knop,
.blad-dienst .velvanonder > summary.omlijnd {
  display: flex;
  align-items: center;
  justify-content: center;
}
.velblad-los {
  padding: 0;
  margin: 10px 0 0;
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  background: var(--kaart);
}
.velgreep {
  width: 40px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--rand);
}
.velkoprij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 0;
}
.velkoprij .velkop { margin: 0; font-family: var(--kopletter); }
.velsluit {
  flex: none;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--gedempt);
  font-size: var(--dienst-kop);
  cursor: pointer;
}
.velinhoud { padding: 6px 16px 16px; }
/* Met javascript schuift hij van onderen in, net als het keuzevel. */
.js .velvanonder[open] > summary::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 29;
  background: var(--sluier);
}
.js .velvanonder[open] > .velblad-los {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  max-height: 85vh;
  overflow-y: auto;
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  border: 0;
  border-top: 1px solid var(--rand);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--schaduw-zwaar);
}

/* -- bouwsteen 16: de onderbalk, nu met vier plekken -- */

/* Vandaag · Planning · Uren · Mijn zaken. Hij had er drie; Andrea's ontwerp
   heeft er vier. De kolommen staan hier en niet in sectie 9 hierboven, zodat
   er één plek is waar het getal vier staat. */
.blad-dienst .onderbalk { grid-template-columns: repeat(4, 1fr); }

/* -- de dienstregel op Vandaag: een busje in een rood rondje -- */

.dienstregel { border-bottom: 1px solid var(--rand-zacht); }
.rondje {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--nadruk-tint);
  color: var(--nadruk);
}
.rondje svg { color: var(--nadruk); }
.dienstnaam { font-size: var(--merk); font-weight: 600; }
/* De pil onder de dienstnaam, niet rechts ernaast. Hij staat in de tekstkolom
   van de regel, dus hij hoort links uit te lijnen en een haartje lucht boven
   en onder te hebben. */
.regeltekst .pil { align-self: flex-start; margin: 3px 0 1px; }

/* -- Mijn uren: één kaart per registratie -- */

/* Links de datum, rechts de pil; dan de dienst, de tijden, de pauze, en de duur
   één keer. Andrea: *"nu staat de duur twee keer, die dubbeling gaat weg."* */
.regkaart { padding: 14px 16px; }
.regkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
}
.regdatum {
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
.regdienst { font-size: var(--klein); color: var(--gedempt); margin: 0; }
.regtijden {
  margin: 6px 0 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.regpauze { font-size: var(--klein); color: var(--gedempt); margin: 2px 0 0; }
.regduur {
  display: block;
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: var(--dienst-kaartkop);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}
.regactie { display: inline-block; margin: 8px 0 0; font-weight: 600; }
/* Dezelfde actie, maar als knop in een formulier - "Intrekken →" op de
   verlofpagina. Een link kan geen verzoek met een CSRF-token versturen, dus is
   het een knop; hij hoort er alleen uit te zien als de link ernaast. */
.blad-dienst button.regactie {
  border: 0;
  padding: 0;
  background: none;
  color: var(--nadruk);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* Het maandtotaal: groot, in de kopletter, met rechte cijfers. "12 u 16 min"
   en niet "12:16" - voor een chauffeur is dat het verschil tussen lezen en
   omrekenen. */
.blad-dienst .maandkaart .telgetal {
  font-family: var(--kopletter);
  font-weight: 600;
}

/* -- Mijn zaken: de profielkaart -- */

.profielkaart { display: flex; align-items: center; gap: 14px; }
.profielnaam { display: block; font-size: var(--merk); font-weight: 600; }
.profielkaart .rondje { background: var(--rand-zacht); color: var(--gedempt); }
.profielkaart .rondje svg { color: var(--gedempt); }

/* -- een subpagina van Mijn zaken -- */

/* Bovenaan "‹ Mijn zaken" en verder niets bijzonders: de onderbalk blijft
   staan met Mijn zaken actief, zodat de weg terug twee kanten heeft. */
.terugrij .terugknop { text-decoration: none; font-weight: 600; }

/* -- bouwsteen 17: de voetregel -- */

/* Die staat in `_basis.html`, buiten elk blok, en komt daardoor op elk scherm
   mee: *"Interne urenregistratie · geen tachograafregistratie."* Hij heeft hier
   geen eigen regel nodig - `.voet` in sectie 8 doet precies wat Andrea's tabel
   vraagt: 12 px, gedempt, gecentreerd. `tests/test_voettekst.py` houdt vast
   dat hij nergens kan verdwijnen. */

/* -- 360 px: alles blijft staan, er wordt alleen minder omheen gelaten -- */

@media (max-width: 374px) {
  .schakelaar label, .tweekeuze label { padding: 8px 6px; font-size: var(--klein); }
  .kaartje { padding: 10px; }
  .onderbalk a { font-size: var(--mini); }
}

/* -- 9m. ziekmelden: twee stappen, in die volgorde --

   Andrea, 25-10-2026: *"eerst bellen, daarna in de app ter registratie."*
   Genummerd, zodat de volgorde geen zin is die je kunt overslaan maar iets
   wat je ziet staan. */
.ziekstappen {
  margin: 0 0 16px;
  padding: 0 0 0 22px;
  display: grid;
  gap: 14px;
}
.ziekstappen li { font-size: var(--dienst-tekst); }
.ziekstappen strong { display: block; }
.ziekstappen .knop { margin-top: 10px; }

/* -- 9n. een knop is geen link - ook hier --

   Dezelfde regel als op kantoor (A1 uit haar lijst). Andrea, 24-10-2026:
   *"ja trek die regel ook door bij de chauffeur."* Alles wat als knop, lipje
   of tegel leest, draagt geen streep; een echte link krijgt hem pas als je
   erover gaat. Op een telefoon is dat laatste zeldzaam - met een duim ga je
   nergens overheen - en dat is precies de bedoeling: onderweg hoort er geen
   streep onder te staan. */

.blad-dienst a { text-decoration: none; }
.blad-dienst a:hover { text-decoration: underline; }
.blad-dienst .knop:hover,
.blad-dienst .knop-stil:hover,
.blad-dienst .tegel:hover,
.blad-dienst .kiesregel:hover,
.blad-dienst .onderbalk a:hover { text-decoration: none; }
/*  Deze drie droegen hun streep uitgeschreven; nu krijgen ze hem pas bij
    hover, net als elke andere link. */
.wijzig:hover { text-decoration: underline; }
.hulpregel a:hover { text-decoration: underline; }
.terugknop:hover { text-decoration: underline; }


/* ============================================================ 10. scherm Week

   Het weekraster van kantoor: chauffeurs in de rijen, de zeven dagen in de
   kolommen. 20-10-2026.

   Alles hieronder gebruikt de kleuren die er al stonden; er is geen tint bij
   gekomen. Twee keuzes die het uitleggen waard zijn:

     - `--nadruk` is het rood van LogiGO en was tot nu toe alleen het merk en de
       plek-waar-je-staat. Op dit scherm is het óók de kleur van de hoofdknop en
       van de gekozen schakelaar, want zo vroeg Andrea het op 20-10-2026. Rood
       blijft hier dus merk en actie, en nooit alarm: dat is `--let-op`.
     - De kolom van vandaag staat op `--accent-tint`: het zachte rood dat er al
       was. Dit scherm maakt zelf geen enkele tint bij. (`--nadruk-tint` kwam
       er op 20-10-2026 bij voor het chauffeursscherm hierboven; het weekraster
       gebruikt hem niet.) */

/* ------------------------------------------------- 10a. de bedieningsregel */

.weekbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}
.weekknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* De weeknavigatie is één groep. Aan elkaar geplakt, zodat het één ding is om
   naar te kijken en niet drie losse knoppen. */
.weeknav, .schakel { display: flex; }
.weeknav .knopje, .schakel .knopje { border-radius: 0; margin-left: -1px; }
.weeknav .knopje:first-child, .schakel .knopje:first-child {
  border-radius: var(--rond-klein) 0 0 var(--rond-klein);
  margin-left: 0;
}
.weeknav .knopje:last-child, .schakel .knopje:last-child {
  border-radius: 0 var(--rond-klein) var(--rond-klein) 0;
}
.knopje.aan { background: var(--rand-zacht); font-weight: 600; }

/* De gekozen helft van de schakelaar Week | Maand, in het rood van LogiGO. */
.knopje.nadruk-aan {
  background: var(--nadruk);
  border-color: var(--nadruk);
  color: var(--actie-tekst);
  font-weight: 600;
}

/* De hoofdknop. Rood gevuld, en kort: een knop die de hele breedte neemt hoort
   onder een formulier en niet in een regel met andere knoppen ernaast. */
.knop-nadruk { background: var(--nadruk); color: var(--actie-tekst); }
.knop-kort {
  width: auto;
  min-height: var(--raak);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: var(--tekst);
  font-family: var(--sans);
}
.knop-omlijnd {
  background: var(--kaart);
  color: var(--nadruk);
  border: 1px solid var(--nadruk);
  font-family: var(--sans);
  font-size: var(--tekst);
  min-height: var(--raak);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Verwijderen is een link en geen knop: het hoort niet even zwaar te wegen als
   Opslaan, en er zit een bevestigingsvraag achter. */
.alsjelink {
  border: 0;
  background: none;
  color: var(--let-op);
  font: inherit;
  font-size: var(--klein);
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 0;
  min-height: var(--raak);
}

/* -------------------------------------------------- 10b. de drie kerncijfers */

.kerngetallen { display: flex; flex-wrap: wrap; gap: 10px; }
.kerngetal {
  margin: 0;
  padding: 10px 14px;
  min-width: 150px;
  flex: 0 1 auto;
}
.kernlabel { display: block; font-size: var(--klein); color: var(--gedempt); }
.kernwaarde {
  display: block;
  font-size: var(--groot);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Geen getal maar een zin: er valt niets te beoordelen. Dan hoort er ook geen
   groot cijfer te staan. */
.kernwaarde.kernleeg {
  font-size: var(--klein);
  font-weight: 400;
  color: var(--gedempt);
  white-space: normal;
  max-width: 190px;
}

/* ----------------------------------------------------------- 10c. de infobalk */

/* Eén rustige regel met uitleg, niet een waarschuwing. Hij stond op de tint
   van "let op", met een rand in diezelfde kleur, en las daardoor als een
   melding dat er iets mis was - terwijl er alleen staat waaróm een lege cel
   geen verwijt is. In het ontwerp is het een witte balk met een oranje
   rondje. 23-10-2026. */
.infobalk {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  padding: 8px 14px;
  margin: 0 0 12px;
  font-size: var(--klein);
}
.info-teken {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--let-op);
  color: var(--actie-tekst);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--label);
  font-weight: 700;
}

/* -------------------------------------------------------- 10d. de filterregel */

.filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.filterbalk .veldje { flex: 0 1 240px; min-width: 150px; }
.filterbalk .veldje + .veldje { flex: 0 1 180px; }
.filterbalk .veldje .label { margin-bottom: 4px; }

/* Een opschrift dat er wél is maar niet te zien. Andrea wil geen kopjes in
   hoofdletters boven de filters; een voorleesprogramma heeft ze wel nodig om
   te zeggen waar een veld voor is. Weghalen zou dat scherm stil maken. */
.visueel-weg {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.filterbalk input[type="search"] {
  width: 100%;
  min-height: var(--raak);
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  font: inherit;
}
.weeklegenda {
  margin-left: auto;
  font-size: var(--klein);
  color: var(--gedempt);
  align-self: center;
}

/* ------------------------------------------------------------ 10e. het raster */

/* Vaste kolombreedtes: de namen links, de zeven dagen even breed daarnaast,
   het totaal rechts. Zonder `table-layout: fixed` rekt de kolom mee met de
   langste naam en verspringt het raster bij elke week. Andrea, 22-10-2026. */
.weektabel .rooster { table-layout: fixed; width: 100%; }
.weektabel .rooster td { position: relative; text-align: center; }
.weektabel .rooster th[scope="row"], .weektabel .rooster td { height: var(--raak); }
/* De namenkolom en de totaalkolom houden hun eigen breedte; de zeven dagen
   delen wat er overblijft. */
.weektabel .rooster th:first-child,
.weektabel .rooster td:first-child { width: 200px; text-align: left; }
.weektabel .rooster th:last-child,
.weektabel .rooster td:last-child { width: 110px; text-align: right; }
/* De zeven dagkoppen staan midden boven hun kolom, net als de getallen
   eronder. Ze stonden links, en dan staat "ma 19 okt" niet boven de 9:00 maar
   ernaast. In het ontwerp staan ze gecentreerd. 23-10-2026. */
.weektabel .rooster thead th:not(:first-child):not(:last-child) {
  text-align: center;
}
/* De namenkolom is wit, net als in het ontwerp - niet het grijs van een
   kopregel. Grijs leest als "dit is een kop", en dit zijn gewoon de mensen.
   Hij moet wél dekkend blijven: hij staat vast terwijl de rest eronderdoor
   schuift. 23-10-2026. */
.weektabel .rooster tbody th:first-child { background: var(--kaart); }

/* De kolom van vandaag over de hele hoogte, met een rood labeltje onder de
   datum. Weekenddagen staan gedempt: zaterdag en zondag zijn de uitzondering
   en niet de regel. */
/* De kolom van vandaag in het zachte rood van het merk, over de hele hoogte.
   Stond op `--accent-tint` (het roze van kantoor); Andrea vroeg op 22-10-2026
   om rood op lage dekking, en dat is `--nadruk-tint`. Er wordt geen nieuwe
   tint bijgemaakt. */
.weektabel .rooster .kol-vandaag { background: var(--nadruk-tint); }
.weektabel .rooster thead th.kol-vandaag { background: var(--nadruk-tint); }
.weektabel .rooster .kol-weekend { background: var(--rand-zacht); }
/* Het labeltje "Vandaag" onder de datum. Een klein rechthoekje met een zachte
   hoek, zoals in het ontwerp - geen pil en geen hoofdletters. Het stond in
   kapitalen en schreeuwde daarmee harder dan de dag eronder. 23-10-2026. */
.nulabel {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--nadruk);
  color: var(--actie-tekst);
  font-size: var(--mini);
  font-weight: 600;
}
/* Het totaal van de dag, in de kolomkop. Andrea, 21-10-2026: *"IK WIL IN 1X
   ZIEN HOEVEEL UUR PER DAG ER STAAT."* Het stond in een rij ónder het raster;
   met tien chauffeurs moest je daarvoor scrollen. De kop blijft nu ook staan
   terwijl je langs de namen gaat - anders is "in één keer" alsnog een keer
   scrollen. */
/* De totaalrij onderaan: iets hoger dan een gewone rij, met een lijn erboven
   zodat hij losstaat van de ploeg. Andrea, 22-10-2026. */
.weektabel .rooster tfoot td {
  height: 48px;
  border-top: 1px solid var(--gedempt);
  background: var(--rand-zacht);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.weektabel .rooster tfoot td:first-child { font-weight: 600; }

/* De optelling per dag boven de kaarten op een telefoon. */
.dagtotaal {
  display: block;
  margin-top: 2px;
  font-size: var(--tekst);
  font-variant-numeric: tabular-nums;
}
.weektabel .rooster thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--kaart);
}
/* De namenkolom staat al vast bij zijwaarts schuiven. In de hoek komen die
   twee samen, en daar moet de kop bovenop blijven. */
.weektabel .rooster thead th:first-child { z-index: 4; }

/* Dezelfde optelling boven de kaarten op een telefoon. */
.dagtotaalkaart .daguren {
  font-size: var(--klein);
  font-variant-numeric: tabular-nums;
}

/* De subtekst in een kolomkop en onder het weektotaal. */
.kopmee {
  display: block;
  font-size: var(--mini);
  font-weight: 400;
  color: var(--gedempt);
  text-transform: none;
  letter-spacing: 0;
}
/* "telt niet mee", achter de naam op dezelfde regel. Eronder zou de rij hoger
   maken, en die moet 44 px blijven. 22-10-2026. */
.nietmee {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--rand-zacht);
  color: var(--gedempt);
  font-size: var(--mini);
  font-weight: 400;
  white-space: nowrap;
}

/* Wie uitstaat maar deze week nog uren heeft: grijs, met "(uit)" erachter. */
.man-uit { color: var(--gedempt); font-weight: 400; }

/* -- de cel --

   In een cel staat alleen het getal. Andrea, 22-10-2026: *"de cel van Andrea
   (test) is een heel verhaal van 6 regels. Daardoor wordt de rij 4x zo hoog.
   In het ontwerp staat in een cel alleen het getal."* De dienst, de tijden, de
   herkomst, de historie en het vinkje staan in het paneel eronder.

   De cel is één klikvlak over zijn hele oppervlak: je hoeft nergens te mikken.
   Het is een link en geen knop, want het paneel opent met een gewoon adres -
   dan werkt dit scherm ook zonder javascript. */
.weektabel .rooster td.cel { padding: 0; }
.cel-knop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 44px;
  padding: 2px 4px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}
.cel-knop:hover { background: var(--rand-zacht); }
/* De cel waar het paneel op openstaat. Een rand aan de binnenkant, zodat de
   rij 44 px blijft: een echte rand duwt de tabel uit elkaar. 23-10-2026. */
.weektabel .rooster td.cel-aan { box-shadow: inset 0 0 0 2px var(--nadruk); }
.cel-duur { font-weight: 600; font-variant-numeric: tabular-nums; }
/* "2x" mag de rij niet hoger maken: vandaar de krappe regelhoogte. */
.cel-aantal { font-size: var(--mini); color: var(--gedempt); line-height: 1.1; }
.cel-verlof { font-size: var(--klein); color: var(--gedempt); }

/* Het streepje van een lege cel. Lichtgrijs, en met opzet géén nul: niet
   ingevuld is iets anders dan nul gewerkt. */
.streepje { color: var(--gedempt); }
.celuren { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Twee bolletjes rechtsboven in de cel. Oranje: nakijken. Groen: al gezien.
   Ze liggen bovenop en nemen geen ruimte in, zodat de rij 44 px blijft. */
.cel-stip, .cel-vink {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.cel-stip { background: var(--let-op); }
.cel-vink { background: var(--goed); }

/* Een lopende dienst: wel gestart, nog niet afgerond. Een pilletje in het rood
   van het merk, zonder tijd - want zolang iemand onderweg is staat zijn tijd
   niet vast, en hij telt dus nergens mee. */
.pil-loopt {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--nadruk);
  color: var(--actie-tekst);
  font-size: var(--mini);
}

/* "+ Toevoegen" in een lege cel. Hij ligt over de hele cel en is doorzichtig
   tot je er met de muis of met Tab bij komt: zo blijft het raster rustig en
   hoef je nergens precies te mikken. Doorzichtig en niet weggehaald, want een
   knop die er niet staat kun je ook niet met het toetsenbord bereiken. */
/* De maat staat vast op 28 px. Zonder die maat rekte de knop zich uit tot de
   hele cel, en dan sprong de rij van 44 naar 49 px zodra je er met de muis
   overheen ging - het hele raster schoof onder je hand weg. Andrea, punt 2:
   *"28px hoog"* en *"Gewone rij: exact 44px."* 23-10-2026. */
.weektabel .rooster .plusje-leeg {
  display: none;
  align-items: center;
  justify-content: center;
  /*  `min-height` staat hierboven voor het chauffeursscherm op 44 px, en
      min-height wint het altijd van height. Daarom hier eerst uitgezet. */
  min-height: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--nadruk);
  border-radius: 6px;
  background: var(--kaart);
  color: var(--nadruk);
  font-size: var(--mini);
  font-weight: 600;
}
.weektabel .rooster .cel-leeg:hover .streepje,
.weektabel .rooster .cel-leeg:focus-visible .streepje { display: none; }
.weektabel .rooster .cel-leeg:hover .plusje-leeg,
.weektabel .rooster .cel-leeg:focus-visible .plusje-leeg { display: inline-flex; }

/* ------------------------------------------- 10f. hetzelfde op een telefoon */

/* Zeven kolommen passen niet op een duim. Per chauffeur dus een kaart met de
   zeven dagen als vakjes. Op een breed scherm staan ze uit; daar is de tabel
   het betere beeld. */
.weekkaarten { display: none; }
.mankop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.dagvakjes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dagvakje {
  min-height: var(--raak);
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
}
.dagvakje .dagnaam { font-size: var(--mini); color: var(--gedempt); }
.dagvakje .celuren, .dagvakje .streepje { font-size: var(--klein); }

/* ----------------------------------------------------------- 10g. het paneel */

/* Eén kaart onder het raster, over de volle breedte. Hij bestaat alleen na een
   klik en krijgt dan de focus. De rode rand zegt: hier sta je nu. */
.paneel { border-color: var(--nadruk); }
.paneel:focus { outline: none; }
.paneelkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.paneelkop h2 { margin: 0; }
.paneelstand { font-size: var(--klein); color: var(--gedempt); }

/* Waar deze registratie vandaan komt, en hoe lang de dienst zelf duurde. Klein
   en stil: het is geen getal om op te tellen maar iets om te weten. */
.herkomst {
  margin: 14px 0 6px;
  font-size: var(--klein);
  color: var(--gedempt);
}
.historie { margin: 0; padding: 0; border: 0; box-shadow: none; }

/* --------------------------------------------------- 10h. tablet en telefoon */

/* Tablet: het raster schuift opzij terwijl de namenkolom blijft staan (dat doet
   `.schuif` met de sticky eerste kolom al), en de kerncijfers komen onder de
   bedieningsregel in plaats van ernaast. */
@media (max-width: 1100px) {
  .weekbalk { flex-direction: column; }
  .kerngetallen { width: 100%; }
  .kerngetal { flex: 1 1 150px; }
  .weeklegenda { margin-left: 0; width: 100%; }
}

/* Telefoon: de tabel gaat uit en de kaarten aan, en het paneel komt als vel van
   onderen - met zijn eigen schuifbalk, zodat de rest van de pagina eronder
   blijft staan waar hij stond. */
@media (max-width: 760px) {
  .weektabel { display: none; }
  .weekkaarten { display: block; }
  .weekknoppen { width: 100%; }
  .weekknoppen .knop-kort { flex: 1 1 auto; }
  .paneel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    max-height: 86vh;
    overflow-y: auto;
    margin: 0;
    border-radius: var(--rond) var(--rond) 0 0;
    box-shadow: var(--schaduw-zwaar);
  }
}

/* ------------------------------------------------------ 11. Uren doorgeven */

/* Een kop met een knop ernaast. Op een smal scherm valt de knop eronder in
   plaats van dat hij de kop in de verdrukking brengt. */
.kaartbalk {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}
.kaartbalk > div { min-width: 0; }
.kaartbalk p { margin: 2px 0 0; }

/* Het blad dat straks in de mail staat. Een eigen rand eromheen, zodat je ziet
   waar het begint en ophoudt - dit is precies wat de boekhouder krijgt. */
.doorgeefblad {
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  padding: 14px 16px;
  background: var(--kaart);
}
.doorgeefkop { margin: 0 0 10px; }
.doorgeefblad .lijst tbody tr:hover { background: transparent; }

/* De regel "Samen" krijgt een rustige vulling, zodat het oog hem vindt zonder
   dat er een streep of een kleur aan te pas komt. */
.lijst tfoot tr.samenrij { background: var(--rand-zacht); }

/* Wat de uren zeggen over wie een dienst rijdt. Onder de keuzelijst, gedempt:
   het is een waarneming en geen keuze. Zie overzicht.gereden_door. */
.uitdeuren {
  display: block;
  margin-top: 4px;
  font-size: var(--mini);
  color: var(--gedempt);
}

/* De regel "wie is niet gestart", boven het scherm Nu. De kleur van "let op"
   uit het themablok hierboven - niet die van een storing: er is niets stuk,
   er ontbreekt iemand. Zie overzicht.nu_beeld. */
.nietgestart {
  background: var(--let-op-tint);
  border-color: var(--let-op);
  margin-bottom: 16px;
}
.belregels { list-style: none; margin: 8px 0 0; padding: 0; }
.belregels li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rand);
}
.belregels li:last-child { border-bottom: 0; }

/* De naam van de charter in de chauffeurskolom van het scherm Nu. Gedempt:
   het is een bedrijf en geen mens van ons. */
.charternaam { color: var(--gedempt); }

/* -- Vandaag live: vier tellers boven de tabel ---------------------------
   Andrea, 24-10-2026, bij het ontwerp: de dag begint met vier getallen -
   hoeveel ritten, hoeveel gestart, hoeveel klaar, hoeveel nog te gaan. Ze
   zijn alle vier een knop: erop klikken zet het filter van de tabel. */
.kpivelden { display: flex; gap: 14px; flex-wrap: wrap; }
.kpikaart {
  flex: 1 1 150px;
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--kaart);
  text-decoration: none;
  color: inherit;
}
.kpikaart.aan { border-color: var(--nadruk); background: var(--nadruk-tint); }
.kpigetal { display: block; font-size: var(--reus); line-height: 1.2; }

/* De balk boven het planbord: is deze dag gedeeld, en is er daarna nog iets
   veranderd. Zie db.planning_delen. */
/* De balk waarmee je deelt blijft onderaan staan terwijl je het bord langsgaat
   - anders moet je na elke wijziging naar beneden scrollen om te zien dat de
   ploeg nog de oude versie ziet. Andrea's ontwerp van 24-10-2026. */
.deelbalk {
  position: sticky;
  bottom: 0;
  /*  Boven de vaste kolommen van het bord: die blijven ook staan, en zonder
      dit tekenen ze zich dwars door de balk heen. */
  z-index: 5;
  border-top: 1px solid var(--rand);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--kaart);
}
.deelbalk.let-op { border-color: var(--let-op); background: var(--let-op-tint); }
/*  De knoppenrij in de deelbalk, met het vinkje ervoor. Op het weekrooster
    staan er twee knoppen en een vinkje naast elkaar; op een smal scherm gaan
    ze onder elkaar in plaats van elkaar te verdringen. */
.deelknoppen {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mailvink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--klein);
  color: var(--gedempt);
}
.deelzin { margin: 0; }

/* A1. Een knop is geen link. Alles wat als knop of als lipje leest, draagt
   geen streep - en een echte link krijgt hem pas als je erover gaat.

   Sinds 24-10-2026 geldt dat tweede deel ook voor gewone links: op Chauffeurs
   stonden alle namen onderstreept en op Bussen elke "Aanpassen". Andrea bij
   het nalopen van de kantoorschermen: *"doe die drie allemaal."* Een lijst van
   elf namen met elf strepen eronder leest als een waarschuwing; de kleur zegt
   al genoeg dat je erop kunt klikken. */
.knopje, .bordtab, .segment a, .segment span, .kiesplek, .keuzepil,
.kpikaart, .datumvak { text-decoration: none; }
.midden a { text-decoration: none; }
.midden a:hover { text-decoration: underline; }
.knopje:hover, .bordtab:hover, .segment a:hover, .kiesplek:hover,
.kpikaart:hover, .datumvak:hover { text-decoration: none; }

/* A2. Titels in de titelletter, stevig en op maat. */
.bordtitel, .zijtitel {
  font-family: var(--titelletter);
  color: var(--ink);
  font-weight: 600;
}
.bordtitel { font-size: var(--reus); }
.zijtitel { font-size: var(--groot); }

/* A5. Geen schreeuwende labels meer: geen kapitalen, geen letterspatiëring. */
.label, .groepkop {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--klein);
}

/* -- Het planbord: diensten tegen de klok --------------------------------
   Naar het ontwerp van Andrea, 24-10-2026. De tijdas rekent in punten (zie
   dagbord.py): elk uur is tachtig punten breed en wordt niet samengeperst -
   past hij niet, dan schuift hij. De drie eerste kolommen blijven staan. */

.bordkop {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bordtitel {
  font-family: var(--serif);
  font-size: var(--reus);
  margin: 0;
}
.bordonder { margin: 2px 0 0; color: var(--gedempt); }
.bordstuur { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.datumkiezer { margin: 0; }
.datumvak {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--kaart);
  cursor: pointer;
}
.datumvak input { border: 0; background: none; padding: 0; width: 1.6rem; }

/* De statusregel: drie getallen, rood zodra er iets ontbreekt. */
.standregel {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 14px;
}
.standding { display: inline-flex; gap: 8px; align-items: center; }
.standding svg { color: var(--gedempt); }
.standding.mist, .standding.mist svg { color: var(--accent); font-weight: 600; }

.bordvelden { display: flex; gap: 16px; align-items: flex-start; }
.bordkaart { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.bordzij { flex: 0 0 330px; display: flex; flex-direction: column; gap: 16px; }
.zijtitel { font-family: var(--serif); font-size: var(--groot); margin: 0 0 6px; }

.bordtabs { display: flex; gap: 18px; border-bottom: 1px solid var(--rand); }
.bordtab {
  padding: 6px 0 10px;
  color: var(--gedempt);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.bordtab.aan { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* De tijdas mag breder zijn dan het scherm; dan schuift hij. */
/*  De tijdas is breder dan het scherm; dan hoort híj te schuiven en niet de
    hele bladzijde. Daarvoor moet dit vak zelf smal mogen blijven - zonder
    max-width groeit het mee met de tabel en schuift de pagina. */
.bordschuif { overflow-x: auto; width: 100%; max-width: 100%; }
table.planbord { border-collapse: collapse; width: max-content; min-width: 100%; }
table.planbord th, table.planbord td {
  border-bottom: 1px solid var(--rand-zacht);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
table.planbord thead th {
  border-bottom: 1px solid var(--rand);
  color: var(--gedempt);
  font-weight: 600;
}
table.planbord tbody tr { height: 68px; }
/* De drie eerste kolommen blijven staan terwijl de klok eronderdoor schuift.
   Ze krijgen een vaste breedte: de plek waarop ze blijven plakken (`left`)
   moet precies optellen, anders schuift er een kolom over zijn buurman heen. */
.vastkolom {
  position: sticky;
  background: var(--kaart);
  box-sizing: border-box;
  z-index: 3;
}
thead .vastkolom { z-index: 4; }
.dienstkolom { left: 0; width: 160px; min-width: 160px; font-weight: 600; }
.wiekolom { left: 160px; width: 180px; min-width: 180px; font-weight: 400; }
.buskolom { left: 340px; width: 120px; min-width: 120px; font-weight: 400;
            box-shadow: 1px 0 0 var(--rand); }
.borddetail { display: block; color: var(--gedempt); font-size: var(--klein); }
.klokkolom { padding: 0 0 0 12px; position: relative; z-index: 1; }

/* De kop van de tijdas: elk heel uur een eigen label. */
.klokkop { position: relative; height: 34px; }
.pb-uurlabel {
  position: absolute;
  bottom: 4px;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--klein);
}
.pb-uurdag { display: block; color: var(--gedempt); font-weight: 400; }

/* Het spoor van één dienst. */
.pb-spoor { position: relative; height: 48px; }
.pb-uurlijn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rand);
}
.pb-halfuurlijn {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-left: 1px dotted var(--rand-zacht);
}
.pb-ritbalk {
  position: absolute;
  top: 20px;
  height: 8px;
  border-radius: 4px;
  background: var(--tijdbalk);
}
/* Geen eindtijd bekend: een stippellijn tot het eind van de as. */
.pb-ritopen {
  position: absolute;
  top: 23px;
  right: 0;
  border-top: 2px dotted var(--gedempt);
}
.pb-ritstip {
  position: absolute;
  top: 16px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--tijdbalk);
  border: 3px solid var(--kaart);
}
.pb-ritstart {
  position: absolute;
  top: 0;
  color: var(--tijdbalk);
  font-weight: 600;
  font-size: var(--klein);
}
.pb-ritklaar {
  position: absolute;
  top: 18px;
  color: var(--gedempt);
  font-size: var(--klein);
}
/* De rode lijn op dit moment, alleen op de dag van vandaag. */
.pb-nulijn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.pb-nulabel {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--actie-tekst);
  font-size: var(--klein);
}

.bordlegenda { color: var(--gedempt); font-size: var(--klein); margin: 10px 0 0; }
.pb-legstip, .pb-legnu {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tijdbalk);
}
.pb-legnu { background: var(--accent); }
.pb-legstippel {
  display: inline-block;
  width: 18px;
  border-top: 2px dotted var(--gedempt);
  vertical-align: middle;
}

/* Een lege plek is een knop: hier hoort iemand te staan. */
.kiesplek {
  display: inline-block;
  padding: 4px 10px;
  border: 1px dashed var(--let-op);
  border-radius: 8px;
  background: var(--let-op-tint);
  color: var(--let-op-tekst);
  cursor: pointer;
}
.vrijlijst, .regellijst { list-style: none; margin: 4px 0 12px; padding: 0; }
.vrijlijst li { padding: 3px 0; border-bottom: 1px solid var(--rand-zacht); }
.regellijst li { padding: 6px 0; }
.uitroep {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--actie-tekst);
  text-align: center;
  font-weight: 700;
}
.geregeld { color: var(--goed); font-weight: 600; }

/*  Onder de twaalfhonderd punten gaat de rechterkolom onder het bord staan.
    De klok is waar dit scherm om draait; die mag niet wegdrukken voor een
    lijstje dat er ook onder kan. Haar ontwerp rekent op 1280 en breder. */
@media (max-width: 1279px) {
  .bordvelden { flex-direction: column; }
  .bordzij { flex: 1 1 auto; width: 100%; }
}
/*  Op een telefoon is het bord geen tabel maar een stapel kaartjes.

    De drie vaste kolommen samen zijn 410 punten breed; op een scherm van 375
    is er dan niets over voor de klok, en zodra de tijdas opzij schoof keek je
    naar balken zonder namen. Andrea, 24-10-2026: *"de namen verdwijnen."*
    Daarom hieronder: tabel weg, kaartjes aan. Dezelfde ritten, dezelfde
    knoppen - alleen op elkaar in plaats van naast elkaar, met het streepje
    van de dag eronder zodat je nog ziet waar de rit valt. */
.pb-kaarten { display: none; }
@media (max-width: 760px) {
  /*  Op de tabbladen per chauffeur en per bus blijft de ene vaste kolom wél
      staan terwijl de klok langsschuift - anders zie je daar balken zonder
      namen. Smaller dan op kantoor, zodat er klok naast past. */
  .groepkolom { width: 140px; min-width: 140px; }
  /*  Alleen het bord van Per route wisselt om naar kaartjes; de tabbladen per
      chauffeur en per bus houden hun tabel, want daar staat één vaste kolom
      en past de klok er wél naast. */
  .metkaarten, .kloklegenda { display: none; }
  .pb-kaarten { display: block; list-style: none; margin: 0; padding: 0; }
  .pb-kaart {
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--kaart);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  /*  Een rit waar nog een chauffeur of een bus bij moet, valt op - net als de
      gele vakjes in de tabel. */
  .pb-kaartopen { border-left: 3px solid var(--let-op); }
  .pb-kaartkop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 0;
  }
  .pb-kaartcode { font-weight: 700; }
  .pb-kaarttijd {
    color: var(--gedempt);
    font-size: var(--klein);
    white-space: nowrap;
  }
  /*  De dag in het klein: de hele balk is het venster van de tijdas, het
      blauwe streepje de rit, en het rode lijntje nu. */
  .pb-minibaan {
    position: relative;
    display: block;
    height: 6px;
    margin: 10px 0 2px;
    border-radius: 999px;
    background: var(--rand-zacht);
  }
  .pb-ministreep {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--tijdbalk);
  }
  .pb-ministip {
    position: absolute;
    top: -2px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--tijdbalk);
  }
  .pb-minunu {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--accent);
  }
  .pb-kaartregel {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 8px 0 0;
  }
  .pb-kaartlabel {
    flex: 0 0 76px;
    color: var(--gedempt);
    font-size: var(--klein);
  }
  .pb-kaartwaarde { flex: 1 1 auto; min-width: 0; }
  /*  De deelbalk plakt hier niet onderaan. Daar staat de knop Menu al, en die
      twee gingen dwars door elkaar heen; op een telefoon is de bladzijde kort
      genoeg om de balk gewoon aan het eind tegen te komen. */
  .deelbalk { position: static; }
}

/* De twee andere tabbladen: dezelfde dag, op een rij per chauffeur of per bus.
   Eén vaste kolom in plaats van drie. */
.groepkolom { left: 0; width: 220px; min-width: 220px; font-weight: 600;
              box-shadow: 1px 0 0 var(--rand); }

/* Het ingeklapte deel van de zijbalk: de schermen waar je niet elke dag bent.
   Andrea, 24-10-2026: *"de rest onder een inklapbare groep Meer, onderaan."* */
.meermenu { margin-top: 10px; }
.meermenu > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--rond-klein);
  color: var(--zijbalk-gedempt);
}
.meermenu > summary::-webkit-details-marker { display: none; }
.meermenu > summary::after { content: " ▾"; }
.meermenu[open] > summary::after { content: " ▴"; }
.meermenu > summary:hover { background: var(--zijbalk-pil); color: var(--zijbalk-fel); }

/* B1. De knoppen in de kop: de datum voluit, een segment met één rand, en de
   rode knop die het werk doet. */
.datumvak { gap: 10px; }
.datumtekst { white-space: nowrap; }
.datumvak input[type="date"] { width: 1.4rem; color: transparent; }
.segment {
  display: inline-flex;
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
}
.segment > * { padding: 6px 14px; color: var(--ink); }
.segment .aan { background: var(--lucht); font-weight: 600; }
.knopje.hoofd {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--actie-tekst);
  font-weight: 600;
}
.knopje.hoofd:hover { filter: brightness(1.05); }

/* B2. Elk cijfer in de statusregel heeft zijn eigen ronde vlak. */
.standteken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rand-zacht);
}
.standding.mist .standteken { background: var(--accent-tint); }

/* B6. Wie een rit rijdt die niet van ons is: de naam gewoon, met een pil
   erachter die zegt wat het is. */
.soortpil {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--rand-zacht);
  color: var(--gedempt);
  font-size: var(--klein);
}

/* B11. Onder het bord net zoveel lucht als de balk hoog is, anders staat de
   laatste knop er half achter. */
.bordvelden { padding-bottom: 12px; }
.deelknoppen { display: flex; gap: 10px; }

/* B3. Lucht aan de randen van de tijdas, anders valt het eerste en het laatste
   label half weg. En het nu-label staat op zijn eigen regel bovenin. */
.klokkop { height: 46px; padding: 0 24px; }
.pb-spoor { padding: 0 24px; }
.pb-uurlabel { bottom: 2px; }
.pb-nulabel { top: 0; bottom: auto; }

/* B4. Wat buiten beeld ligt, meldt zich aan de rand. */
.pb-elders {
  position: absolute;
  top: 12px;
  padding: 3px 10px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--kaart);
  color: var(--gedempt);
  font-size: var(--klein);
  cursor: pointer;
  z-index: 2;
}

/* C1. De vier kaarten van Vandaag live: een rond icoonvlak links, het getal
   groot ernaast, het woord eronder. Wit, ook als je er een kiest - dan is het
   een rode rand en geen gekleurd vlak. */
.kpikaart {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--kaart);
}
.kpikaart.aan { border-color: var(--accent); background: var(--kaart); }
.kpiteken {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.kpiteken.lucht { background: var(--lucht); color: var(--lucht-deep); }
.kpiteken.goed { background: var(--goed-tint); color: var(--goed); }
.kpiteken.let { background: var(--accent-tint); color: var(--accent); }
.kpiwoord { display: block; color: var(--gedempt); font-size: var(--klein); }

/* C2. De chips staan in de kaart, onder de titel. De gekozen chip is rood. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.chip {
  padding: 5px 14px;
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: var(--kaart);
  color: var(--ink);
  text-decoration: none;
}
.chip.aan {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--actie-tekst);
  font-weight: 600;
}
.chip:hover { text-decoration: none; }

/* C4. Geen chauffeur is geen grijs woord maar een melding. */
.letpil {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--aandacht-regel);
  color: var(--let-op-tekst);
  font-size: var(--klein);
}

/* C8. "Nu opvolgen": één kaartje per punt, met het ding dat je gaat doen
   ernaast. */
.doenlijst { list-style: none; margin: 0; padding: 0; }
.doenkaart {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--aandacht-regel);
}
.doenteken {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kaart);
  color: var(--let-op-tekst);
}
.doentekst { flex: 1 1 auto; min-width: 0; }
.doentekst b { display: block; }
.doentekst .regel-mee { display: block; }

/* C1/C2: het seintje met een teken ervoor. */
.seintje svg { vertical-align: -3px; margin-right: 4px; }

/* De tabel op Vandaag live mag schuiven als hij niet past: liever de laatste
   kolom achter de rand dan een pil die halverwege wordt afgeknipt. */
.bordkaart .schuifveld { overflow-x: auto; max-width: 100%; }
table.planbord.levend { width: max-content; min-width: 100%; }
table.planbord.levend td, table.planbord.levend th { white-space: nowrap; }

/* B8. Beschikbaar: één kaartje per naam. Het telefoonnummer staat in de
   tooltip - dit rijtje is om te kiezen, niet om te bellen. */
.naamlijst { list-style: none; margin: 4px 0 14px; padding: 0; }
.naamkaart {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  margin-bottom: 6px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--kaart);
}
.naamkaart svg { color: var(--gedempt); }
.greep { color: var(--rand); letter-spacing: -2px; }

/* Een knop over de volle breedte van de kaart, zoals onder Nog te regelen. */
.knopje.breed { display: block; width: 100%; text-align: center; margin-top: 6px; }

/* ====================================================== 12. scherm Bussen

   Andrea's ontwerp van 25-10-2026, met een afdruk erbij: links de lijst,
   rechts een paneel met het dossier van de gekozen bus. Wat er stond was een
   tabel met onder elke bus een tweede regel "Aanpassen" - twee regels per bus,
   en alles wat je over een bus wilt weten verstopt in een klapje.

   De functies blijven dezelfde: toevoegen, aanpassen, uitzetten, weghalen en
   zoeken op kenteken voor een boete. Alleen de indeling verandert. */

/* -- 12a. de zijbalk draagt tekens -- */
/*  De zijbalk zet zijn regels met space-between, zodat het tellertje achter
    Nu en Verlof rechts komt. In het hoofdmenu staat geen teller maar een
    teken, en dan hoort de tekst juist tegen het teken aan. */
.zijkant nav.hoofdmenu a { justify-content: flex-start; gap: 14px; }
.zijkant nav.hoofdmenu a svg { flex: none; }
.meermenu > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--raak);
}
.meermenu > summary svg { flex: none; }
.meermenu > summary svg:last-child { margin-left: auto; }
.meermenu[open] > summary svg:last-child { transform: rotate(180deg); }
/*  Het pijltje staat nu in het teken zelf; het oude tekstpijltje erachter zou
    er dubbel bij staan. */
.meermenu > summary::after,
.meermenu[open] > summary::after { content: none; }

/* -- 12b. de topbalk -- */
.topbalk {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
  margin: -26px -26px 20px;
  padding: 0 26px;
  background: var(--kaart);
  border-bottom: 1px solid var(--rand);
}
.topwie {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gedempt);
  font-size: var(--klein);
}
.toppunt {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--koel);
  color: var(--tijdbalk);
  font-weight: 700;
}

/* -- 12c. twee kolommen -- */
.busvelden { display: flex; gap: 20px; align-items: flex-start; }
.buslijst { flex: 1 1 auto; min-width: 0; }
.buszij { flex: 0 0 610px; max-width: 610px; }

/* -- 12d. de zoekkaart -- */
.zoekvak {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
}
.zoekvak svg { flex: none; color: var(--gedempt); }
.zoekvak input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  min-height: var(--raak);
  font: inherit;
  color: var(--ink);
}
.zoekvak input:focus { outline: none; }
.zoekvak .knopje { flex: none; }

/* -- 12e. de lijst: één regel per bus -- */
.bustabel { width: 100%; border-collapse: collapse; }
/*  De kolomkoppen zijn hier klein en in kapitalen. Dat is met opzet de
    uitzondering op A5: dit zijn geen labels in een formulier maar de randen
    van een tabel, en daar helpt het rustige grijs juist. */
.bustabel thead th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rand);
  font-size: var(--mini);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.bustabel td {
  padding: 0 12px;
  height: 70px;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}
.bustabel tbody tr:last-child td { border-bottom: 0; }
.buskenteken, .busnaam { color: var(--ink); font-size: var(--tekst); }
.buskenteken { font-weight: 600; }
.buskenteken a, .busnaam a { color: inherit; display: block; }
/*  De gekozen regel: een koel vlak en een blauwe balk ervoor. */
.bustabel tr.gekozen td { background: var(--koel); }
.bustabel tr.gekozen td:first-child { box-shadow: inset 3px 0 0 var(--tijdbalk); }
.buspil {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--rand-zacht);
  color: var(--gedempt);
  font-size: var(--klein);
}

/* -- 12f. de schakelaar in plaats van "Uitzetten" -- */
.busschakel {
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--rand);
  cursor: pointer;
}
.busschakel i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kaart);
  box-shadow: var(--schaduw);
  transition: transform 0.12s ease-out;
}
.busschakel[aria-pressed="true"] { background: var(--zijbalk); }
.busschakel[aria-pressed="true"] i { transform: translateX(18px); }

/* -- 12g. de twee knoppen achter een regel -- */
.busacties { display: flex; align-items: center; gap: 4px; }
.busknopje {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--rond-klein);
  background: none;
  color: var(--gedempt);
  cursor: pointer;
}
.busknopje:hover { background: var(--rand-zacht); color: var(--ink); }
.busmenu { position: relative; }
.busmenu > summary { list-style: none; cursor: pointer; }
.busmenu > summary::-webkit-details-marker { display: none; }
.busmenu[open] > .busmenublad { display: block; }
.busmenublad {
  display: none;
  position: absolute;
  right: 0;
  z-index: 6;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  box-shadow: var(--schaduw-zwaar);
}
.busmenublad a, .busmenublad button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--rond-klein);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.busmenublad a:hover, .busmenublad button:hover { background: var(--rand-zacht); }
.busmenublad .reden {
  display: block;
  padding: 6px 10px;
  color: var(--gedempt);
  font-size: var(--klein);
}

/* -- 12h. het infoblok onder de lijst -- */
.businfo {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--koelrand);
  border-radius: var(--rond-klein);
  background: var(--koelvlak);
  color: var(--gedempt);
  font-size: var(--klein);
}
.businfo svg { flex: none; color: var(--tijdbalk); }

/* -- 12i. het paneel rechts -- */
.buschips { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.buschip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--ink);
  font-size: var(--klein);
}
.buschip[aria-current="true"] {
  background: var(--zijbalk);
  border-color: var(--zijbalk);
  color: var(--zijbalk-fel);
  font-weight: 600;
}
.buspaneelkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.buspaneelnaam { margin: 0; color: var(--gedempt); font-size: var(--klein); }
.bustitel {
  margin: 0;
  font-family: var(--titelletter);
  font-size: var(--groot);
  color: var(--ink);
}
.bustabs {
  display: flex;
  gap: 18px;
  margin: 14px 0 18px;
  border-bottom: 1px solid var(--rand);
}
.bustabs a, .bustabs span {
  padding: 8px 2px;
  color: var(--gedempt);
  font-size: var(--klein);
}
.bustabs [aria-current="page"] {
  color: var(--tijdbalk);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--tijdbalk);
}
.busregels { margin: 0; }
.busregel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
}
.busregel dt { color: var(--gedempt); font-size: var(--klein); }
.busregel dd { margin: 0; color: var(--ink); text-align: right; }
.buswegen { display: grid; gap: 8px; margin: 14px 0 0; }
.buswegen a { color: var(--tijdbalk); font-size: var(--klein); }
.busstreep { border: 0; border-top: 1px solid var(--rand); margin: 16px 0; }
.busdossier {
  margin: 0 0 10px;
  font-family: var(--titelletter);
  font-size: var(--groot);
  color: var(--ink);
}

/* -- 12j. toevoegen en bewerken: een vel over het scherm -- */
.busvel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--sluier);
}
.busvelblad {
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: var(--rond);
  background: var(--kaart);
  box-shadow: var(--schaduw-zwaar);
}
.busvelblad h2 {
  margin: 0 0 14px;
  font-family: var(--titelletter);
  font-size: var(--groot);
}
.busvelblad label { display: block; margin: 0 0 12px; }
.busvelblad input[type="text"] { width: 100%; }
.busvelhulp { margin: 4px 0 0; color: var(--gedempt); font-size: var(--klein); }
.busvelknoppen {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* -- 12k. smaller scherm --

   Onder de twaalfhonderd punten schuift het paneel over de lijst heen in
   plaats van ernaast; onder de 768 wordt elke bus een kaartje, net als op het
   planbord. Dezelfde gegevens, op elkaar in plaats van naast elkaar. */
@media (max-width: 1279px) {
  .busvelden { flex-direction: column; }
  .buszij { flex: 1 1 auto; width: 100%; max-width: 100%; }
}
@media (max-width: 767px) {
  .bustabel thead { display: none; }
  .bustabel, .bustabel tbody, .bustabel tr, .bustabel td { display: block; }
  .bustabel tr {
    position: relative;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
  }
  .bustabel tr.gekozen { background: var(--koel); border-left: 3px solid var(--tijdbalk); }
  .bustabel tr.gekozen td { background: none; }
  .bustabel tr.gekozen td:first-child { box-shadow: none; }
  .bustabel td {
    height: auto;
    padding: 2px 0;
    border-bottom: 0;
  }
  .bustabel td.busrechts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
  }
}

/* ---------------------------------------------------------------- 13. demo

   De balk boven de demo. Andrea, 26-10-2026, over wie erin mag: *"iedereen
   met de link."* Dan hoort er bovenaan te staan dat alles wat je ziet
   verzonnen is - niet in kleine letters onderaan, maar als eerste zin, over
   de volle breedte, boven het menu uit.

   De kleuren komen uit het thema: dit is een mededeling en geen fout, dus
   --let-op met zijn eigen tint eronder. */
.demobalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: var(--let-op-tint);
  border-bottom: 1px solid var(--rand);
  color: var(--let-op);
}

.demobalk p {
  margin: 0;
  font-size: var(--klein);
}

.demobalk form { margin: 0; }

/* De weg terug naar het platform. Harun, 28-10-2026: *"je kan vanuit daar
   niet meer terug."* Dezelfde vorm als de demobalk - boven alles, over de
   volle breedte - maar rustig van kleur: dit is geen waarschuwing, het is een
   deur. Wie doorliep hoort hem te zien zonder ergens op te klikken. */
.terugbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: var(--kaart);
  border-bottom: 1px solid var(--rand);
}

.terugbalk p { margin: 0; font-size: var(--klein); }

/* In het menu staat hij boven de plekken, met een streep eronder: terug is
   geen plek in deze app maar de deur waardoor je binnenkwam. */
.hoofdmenu.terugweg {
  margin-bottom: 10px;
  padding-bottom: 10px;
  /* De pilkleur van de zijbalk als streep: donker genoeg om te scheiden, uit
     het themablok, zodat hier geen eigen kleur ontstaat. */
  border-bottom: 1px solid var(--zijbalk-pil);
}

/* Het pasboek: één regel per overdracht, nieuwste bovenaan. Geen tabel —
   de regels zijn ongelijk van lengte en een tabel zou ze uit elkaar trekken. */
.paslijst { list-style: none; margin: 0; padding: 0; }

.paslijst li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rand-zacht);
}

.paslijst li:last-child { border-bottom: 0; }

/*  De naam in het urenraster is de weg naar zijn kaart. Hij mag niet schreeuwen
    als een link - het is nog steeds gewoon de naam in de linkerkolom - maar hij
    moet wel laten merken dat er iets achter zit. Andrea, 30-10-2026: *"kijk
    hier is niets doorklikbaar."* */
.man-naar { color: inherit; text-decoration: none; }
.man-naar:hover,
.man-naar:focus-visible { text-decoration: underline; }

/*  De klep van "Chauffeur toevoegen". Andrea, 30-10-2026: *"chauffeur
    toevoegen wat meer zichtbaar maken."* Het stond er als een grijs regeltje
    in kleinkapitaal, terwijl het de enige handeling op dat scherm is die iets
    toevoegt. Het klapje blijft - je voegt iemand één keer toe en kijkt daarna
    honderd keer naar de lijst - maar de klep draagt nu de kleur van het huis
    en een plusteken, zodat hij te zien is zonder dat hij de lijst wegdrukt. */
.erbij-klep {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}
.erbij-klep::-webkit-details-marker { display: none; }
.erbij-klep::marker { content: ""; }
.erbij-plus {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}
details[open] > .erbij-klep .erbij-plus { transform: rotate(45deg); }

/*  Foto's bij een melding. Andrea, 09-11-2026, tweede van de drie
    verbeteringen. Klein en naast elkaar: wie zijn melding terugzoekt wil zien
    dát er een foto bij zit, niet erdoorheen scrollen. Een tik erop opent hem
    op ware grootte.  */
.fotorij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.fotorij img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.fotoform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
/*  De knop is een label om een veld dat niemand hoort te zien: een
    bestandsveld ziet er op elke telefoon anders uit, en dit ziet er overal
    hetzelfde uit. Eigen klassenamen, want dit blad wordt ook door de
    kantoorschermen geladen en een naam die in allebei staat krijgt de kleur
    van de laatste - zie tests/test_thema.py.  */
.fotoknop { margin: 0; }
.fotomelding { flex-basis: 100%; margin: 0; }