/* Ordo — productieplanning Axiom B.V.
   Visuele taal ontleend aan de bestaande productieplanning-PDF:
   zwarte balken, dichte regels, kleur als betekenis en niet als versiering.

   Rubik is het huisletter van Axiom en staat op onze eigen server. Voor tijden
   en tellingen gebruiken we dezelfde letter met tabelcijfers (tnum), zodat de
   kolommen uitlijnen zonder een tweede lettertype te hoeven laden. */

@font-face{font-family:Rubik; font-style:normal; font-weight:300;
  src:url("fonts/Rubik-Light.a38c0942c077.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:normal; font-weight:400;
  src:url("fonts/Rubik-Regular.ed50e96ec4b1.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:normal; font-weight:500;
  src:url("fonts/Rubik-Medium.7e7a7c064cc7.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:normal; font-weight:700;
  src:url("fonts/Rubik-Bold.ae1f470f539e.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:italic; font-weight:400;
  src:url("fonts/Rubik-Italic.d30821158a55.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:italic; font-weight:500;
  src:url("fonts/Rubik-MediumItalic.0774597d7bd8.woff2") format("woff2"); font-display:swap;}

:root{
  --papier:#FBFAF8;
  --vlak:#F1EFEA;
  --band:#E8E5DF;
  --lijn:#D8D4CB;
  --inkt:#191813;
  --inkt-2:#4A483F;
  --inkt-3:#7B786D;
  --balk:#15140F;
  --balk-inkt:#FBFAF8;
  --signaal:#B7302A;
  --signaal-zacht:#F6E2E0;
  --mijlpaal:#1F5FA8;
  --mijlpaal-zacht:#E2ECF7;
  --gereed:#4A7C59;
  --gereed-zacht:#EAF3EC;
  --eigen:#7B4FA8;
  --eigen-zacht:#F1EBF8;
  --chiprand:#8F8A7C;
  --chipvlak:var(--papier);
  /* De achtergrond van alles waar je in typt. Bewust net iets lichter dan
     --papier: een invoerveld hoort op te vallen als een gaatje in de pagina.
     Dit is een eigen kleur en geen #fff in de code, want in het donkere thema
     moet het juist net iets lichter dan de donkere pagina zijn — en een hard
     wit veld met lichte letters erin is onleesbaar. */
  --invoer:#FFFFFF;
  --radius:2px;
  --cijfers:"Rubik",ui-monospace,monospace;
  /* De rode O van Ordo. Eén kleur voor het woordmerk, het aanmeldscherm en het
     beeldmerk in de adresbalk, zodat ze niet uit elkaar kunnen lopen. Hij staat
     hier los van --mark-rood: die negen markeringskleuren zijn van de planning
     en mogen veranderen zonder dat het merk meeverandert. */
  --ordo-rood:#F0362B;
  /* Vinkjes, datumkiezers, keuzelijsten en schuifbalken tekent de browser zelf;
     die trekken zich niets van onze kleuren aan. Met color-scheme weet hij in
     welke wereld hij staat en tekent hij ze passend. Zonder deze regel is het
     kalendericoontje in een datumveld zwart op donkergrijs. */
  color-scheme:light;
}

*{box-sizing:border-box;}
:root{--kophoogte:var(--kopgemeten, 0px);}

/* `hidden` moet altijd winnen. De browser zet er zelf `display:none` op, maar
   dat is een regel uit de browser en die verliest van élke eigen display-regel.
   Zo stond de werkbalk "Bewerken staat aan" ook te lezen terwijl bewerken uit
   stond, en dook de invoerregel op een telefoon op waar hij niet hoorde. Eén
   regel hier is betrouwbaarder dan hem bij elk onderdeel apart onthouden. */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  background:var(--papier);
  color:var(--inkt);
  font:15px/1.45 "Rubik","Segoe UI",Helvetica,Arial,sans-serif;
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- kop ---------- */
/* De kopbalk blijft in beeld tijdens het scrollen. In een planning van dertig
   regels per dag was je hem na één veeg kwijt, en dan moet je helemaal terug om
   naar Tijdlijn, Opzet of Beheer te springen.
   thema.js meet de balk en zet het antwoord in --kopgemeten; hieronder wordt
   daar --kophoogte van gemaakt, want alles wat óók plakt — de dagkop, de
   kolomkop, de kop van de tijdlijn — moet er precies onder blijven hangen, en
   die hoogte verandert mee als de balk op een smal scherm afbreekt.
   Op een telefoon blijft de balk niet staan (zie de media-regel onderaan): daar
   zou hij een vijfde van het scherm opeten. --kophoogte is daar dus 0. */
.kop{
  background:var(--balk); color:var(--balk-inkt);
  display:flex; align-items:center; gap:20px;
  padding:10px 22px;
  position:sticky; top:0; z-index:6;
}
.merk{display:flex; align-items:center; gap:11px; text-decoration:none;}
.merk .logo{
  /* Het bronbestand is zwarte inkt op transparant; op de zwarte balk keren we
     het om in plaats van een tweede bestand bij te houden. */
  height:19px; width:auto; display:block; filter:invert(1); opacity:.95;
}
/* ORDO staat naast AXIOM en hoort er even groot bij te staan. "Even groot" is
   voor letters de kaphoogte, niet de lettergrootte. De 0,70 em waar dit eerder
   op gerekend was klopte niet: op het scherm nagemeten zette Rubik bij 27px
   precies 18 pixels inkt neer tegen 19 van het logo ernaast — één pixel te
   kort, en dat zie je. Naast elkaar gezet op drie maten gaf 27,5px de beste
   overeenkomst: de bovenkant van de letters en de basislijn lopen dan gelijk.
   Exact even veel inkt bestaat niet — hij springt van 18 naar 20 pixels — en
   dat komt door de ronde O, die bij elke letter iets over de kaplijn heen
   steekt. De regelhoogte blijft op 19px vastgezet, anders duwt de grotere letter de balk
   uit elkaar; het zijn alleen hoofdletters, dus er steekt niets onder of boven
   uit. Bij deze maat is de brede spatiëring van eerder te veel; hij zou het
   woord twee keer zo breed maken als het logo. */
.merk .woordmerk{
  font-weight:700; font-size:27.5px; line-height:19px; letter-spacing:.02em;
  text-transform:uppercase;
  padding-left:13px; border-left:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.94);
}
.merk .woordmerk .o{color:var(--ordo-rood);}
/* De projectnaam mag krimpen, de knoppen niet. Zonder `min-width:0` duwt een
   lange naam ("STRESSTEST — extreme planning … meerdaagse stresstest") de
   knoppen rechts uit elkaar: "Nu" viel half weg en "Afmelden" brak in tweeën.
   Nu kort de naam af met een beletselteken en blijft de balk één regel. */
/* De naam van de planning is waar je op zoekt als je drie tabbladen open hebt
   staan, en hij stond links weggedrukt tegen het merk aan op 14px. Nu groter en
   gecentreerd.

   Wél in de rij en niet absoluut in het midden van de balk: dat laatste was de
   eerste poging en hij liep dwars over de knoppen heen. Met veertien knoppen
   rechts is het echte midden van de balk gewoon niet vrij — op 1600 pixels
   beslaan ze er 846. Als flex-item met `flex:1` staat hij midden in de ruimte
   die er wél is, tussen het merk en de knoppen, en botst hij per definitie
   nooit: wordt die ruimte krap, dan krimpt hij mee en kort hij af. */
.kop .project{
  flex:1 1 auto; min-width:0; text-align:center;
  font-size:17px; opacity:.9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kop .project b{font-weight:600; opacity:1;}
/* Op een smal scherm is er geen ruimte om iets te centreren; dan telt alleen
   nog dat de naam leesbaar blijft en de knoppen heel blijven. */
@media (max-width:1180px){
  .kop .project{font-size:14px; text-align:left; flex:0 1 auto;}
}
.kop .rechts{margin-left:auto; display:flex; gap:6px; align-items:center; flex:none;}

/* Op een breed scherm bestaat het uitklapmenu niet: de knop is weg en de
   inhoud staat gewoon in de rij. `display:contents` laat de span zelf
   verdwijnen zodat de knoppen erin flex-items van .rechts blijven — anders
   zouden ze als groep gaan schuiven en anders uitlijnen dan nu. */
.kop .menuknop{display:none;}
.kop .verderop{display:contents;}

.schakel{display:flex; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); overflow:hidden;}
.schakel a{
  padding:5px 14px; font-size:13px; text-decoration:none;
  color:rgba(255,255,255,.7); background:transparent;
}
.schakel a.actief{background:var(--balk-inkt); color:var(--balk); font-weight:600;}
.knop{
  padding:5px 12px; font-size:13px; text-decoration:none;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius);
  color:rgba(255,255,255,.8);
}
.knop:hover{background:rgba(255,255,255,.1);}

/* Alle knoppen in de kopbalk even hoog en even groot. Ze waren het niet: een
   <a> en een <button> rekenen hun hoogte anders uit, `.stil` zette de letter
   op 12px en de taalschakelaar gebruikte de `font:`-verkorting die en passant
   de regelhoogte op 1 zette. Resultaat: zes knoppen naast elkaar van 24, 26,
   27, 29,4 en 30,8 pixels hoog. Hier staat de maat één keer; de varianten
   eronder gaan alleen nog over kleur en nadruk, niet meer over formaat. */
.kop .knop,
.kop .schakel a{
  align-items:center; justify-content:center;
  height:28px; padding:0 12px; font-size:12px; line-height:1;
  box-sizing:border-box; white-space:nowrap;
}
/* `display` staat apart, en de uitklapknop valt er buiten. Die hoort op een
   breed scherm niet te bestaan (`.kop .menuknop{display:none}` hierboven), maar
   een gedeelde regel die display zet is even specifiek en staat later, dus won
   hij van het verbergen — en zo verscheen "Meer" ineens midden tussen Bewerken
   en Opzet. Op een smal scherm zet `.kop .rechts .knop` hem alsnog aan; die is
   specifieker en dat is precies de bedoeling. */
.kop .knop:not(.menuknop),
.kop .schakel a{display:inline-flex;}

/* ---------- het profielmenu ----------
   Wachtwoord en afmelden achter één poppetje. Dezelfde knop als de rest van de
   balk — zelfde hoogte, zelfde rand — alleen vierkant, want er staat een icoon
   in en geen woord. */
.profiel{position:relative; display:inline-flex;}
.kop .profielknop{width:28px; padding:0;}
.kop .profielknop svg{
  width:16px; height:16px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Open: de knop krijgt dezelfde nadruk als een aangezette knop elders in de
   balk, zodat je ziet waar het venstertje bij hoort. */
.profiel.open .profielknop{background:rgba(255,255,255,.14); color:#fff;}
.profielmenu{
  display:none;
  position:absolute; top:100%; right:0; z-index:70;
  background:var(--balk); border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius); box-shadow:0 10px 28px rgba(0,0,0,.4);
  padding:6px; margin-top:6px;
  flex-direction:column; gap:4px; min-width:150px;
}
.profiel.open .profielmenu{display:flex;}
/* In het zwevende venstertje staan de knoppen onder elkaar, vullen ze de
   breedte en hebben ze geen eigen rand: daar is het een menu en geen rij. Op
   een smal scherm gaat dit niet op — dan zit het profiel al ín het uitklapmenu
   en horen deze twee eruit te zien als de knoppen ernaast. Vandaar de
   ondergrens; onder de 700 blijven ze gewone knoppen. */
/* Alleen de regels die als menu-item onder elkaar staan. De NL/EN-schakelaar
   valt er buiten: die is één knop van twee helften en hoort naast elkaar te
   blijven, anders is niet meer te zien dat het een keuze uit twee is.

   Met `.kop` ervoor, want op een smal scherm zet `.kop .rechts .knop` een
   hoogte en een uitlijning die anders van deze regel wint — en dan staan de
   menu-items daar ineens gecentreerd en 34 pixels hoog. */
.kop .rechts .profielmenu > .knop,
.kop .rechts .profielmenu > .afmelden > .knop{
  display:flex; justify-content:flex-start; align-items:center;
  width:100%; min-height:0; height:32px; padding:0 10px; font-size:13px;
  border-color:transparent; color:rgba(255,255,255,.85);
}
.kop .rechts .profielmenu > .knop:hover,
.kop .rechts .profielmenu > .afmelden > .knop:hover{background:rgba(255,255,255,.12); color:#fff;}
.kop .rechts .profielmenu .taalknop{width:100%; margin:0;}
.kop .rechts .profielmenu .taalknop .knop{flex:1; min-height:0; height:32px;}
/* Instellingen boven, je account eronder. Eén haarlijn zegt dat zonder er een
   kopje bij te hoeven zetten. */
.profielstreep{
  display:block; height:1px; margin:4px 2px;
  background:rgba(255,255,255,.18);
}
.profielmenu .afmelden{margin:0; display:block;}

/* ---------- bedieningsbalk ---------- */
.balk{background:var(--vlak); border-bottom:1px solid var(--lijn); padding:9px 22px;}
.balk-rij{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.balk-rij + .balk-rij{margin-top:8px;}
.etiket{
  font:500 10.5px/1 var(--cijfers); font-variant-numeric:tabular-nums;
  letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-3);
  white-space:nowrap;
}

/* `align-items:flex-start` is hier geen smaakkwestie maar een vangnet: zonder
   dat worden alle dagknoppen zo hoog als de hoogste, en dan rekt één knop met
   te veel ruimte erin de hele balk uit. Dat gebeurde: een dag zonder werk droeg
   de klasse `leeg`, en die betekent elders "de lege staat van een scherm" met
   zestig pixels lucht. De klasse heet nu `stil`, en mocht er ooit weer iets
   groots in één knop belanden, dan blijft de rij nu toch laag. */
/* Zeven pixels en niet drie. De gekozen dag heeft een rood randje dat 2 pixels
   búiten de knop ligt — met opzet, anders verspringt de hele rij zodra je een
   andere dag kiest — en met drie pixels ertussen raakte dat randje zijn buren
   bijna aan. Dan leest het als een fout in plaats van als een aanwijzing. */
.dagen{display:flex; gap:7px; flex-wrap:wrap; align-items:flex-start;}
.dag{
  display:flex; flex-direction:column; align-items:center;
  min-width:40px; padding:3px 7px; text-decoration:none;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); line-height:1.15;
}
.dag small{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--inkt-3);}
.dag b{font-size:15px; font-weight:600;}
/* Een dag zonder regels: wel een tab, maar gedimd. Je ziet in één blik welke
   dagen nog leeg zijn, en je kunt er meteen heen om te beginnen. */
.dag.stil{opacity:.5; border-style:dashed;}
.dag.stil:hover{opacity:.85;}
/* De +-tab: zelfde maat als een dag, zodat hij in de rij past. Alleen in de
   bewerkstand zichtbaar — een dag toevoegen is bewerken. */
.dag.plus{cursor:pointer; font:inherit; color:var(--inkt-2); display:none;}
.bewerkstand .dag.plus{display:flex;}
.dag.plus:hover{border-color:var(--inkt-2); color:var(--inkt);}
.dag.plus:disabled{opacity:.4; cursor:default;}
/* De dag waar je naar kijkt. Donker gevuld was al zo, maar tussen veertien
   knoppen op een donkere balk viel dat te weinig op: je moest zoeken welke dag
   je open had staan. Nu staat er het merkrood omheen — dezelfde kleur als de O
   in de kop, en de enige plek in de balk waar rood iets betekent. Het rode
   randje ligt buiten de knop met een schaduw, zodat de knoppen even breed
   blijven; een dikkere rand zou de hele rij een pixel laten verspringen zodra
   je een andere dag kiest. */
.dag.actief{
  background:var(--balk); border-color:var(--balk);
  box-shadow:0 0 0 2px var(--ordo-rood);
  /* De ring ligt búiten de knop, en de knop ernaast heeft een eigen
     achtergrond. Die werd er dus overheen geschilderd: bij "Alle" — de eerste
     in de rij — zag je alleen het linkerstukje rood staan. Eén laagje omhoog
     en hij staat er helemaal omheen. */
  position:relative; z-index:1;
}
.dag.actief small{color:rgba(255,255,255,.72);}
.dag.actief b{color:#fff;}
/* Een dag zonder werk die je tóch aanklikt: dan is hij de gekozen dag en hoort
   hij niet meer half doorzichtig te zijn. */
.dag.actief.stil{opacity:1; border-style:solid;}

/* De rand van een chip stond op `--lijn` en de vulling op `--papier` — dezelfde
   kleur als de pagina eronder. In het lichte thema valt dat mee, in het donkere
   is het verschil tussen #393C41 en #17181A zo klein dat de filterknoppen bijna
   verdwijnen. Alex zag ze niet. Een knop hoort zichtbaar te zijn dat hij een
   knop is, dus daar horen eigen kleuren bij die per thema kunnen verschillen. */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; font-size:12.5px; text-decoration:none;
  border:1px solid var(--chiprand); border-radius:999px; background:var(--chipvlak);
  white-space:nowrap;
}
.chip:hover{border-color:var(--inkt-3);}
.chip.actief{background:var(--balk); color:#fff; border-color:var(--balk);}
.chip .stip{width:8px; height:8px; border-radius:50%; flex:none;}
.chip .nr{
  font:500 10px/1 var(--cijfers); opacity:.55;
}

select,input[type=search]{
  font:14px/1 inherit; padding:4px 8px;
  border:1px solid var(--lijn); border-radius:var(--radius); background:var(--papier);
  color:var(--inkt);
}
input[type=search]{min-width:220px;}

.telling{
  margin-left:auto;
  font:500 11px/1 var(--cijfers); letter-spacing:.1em;
  text-transform:uppercase; color:var(--inkt-3);
}

/* ---------- lijst ---------- */
.inhoud{padding:0 22px 60px;}
.groepkop{
  display:flex; align-items:baseline; gap:12px;
  background:var(--balk); color:var(--balk-inkt);
  padding:5px 12px; margin:18px 0 0;
  font-weight:600; font-size:14px; letter-spacing:.01em;
  position:sticky; top:var(--kophoogte, 0px); z-index:3;
}
.groepkop .telling-klein{
  margin-left:auto; font:500 10.5px/1 var(--cijfers);
  letter-spacing:.12em; opacity:.6;
}

/* `table-layout:fixed` is hier geen detail. Elke dag is een eigen tabel, en
   zonder deze regel bepaalt elke tabel zijn kolombreedtes op zijn eigen inhoud:
   AREA begon op dinsdag ergens anders dan op woensdag, en je oog moet dan bij
   elk dagblok opnieuw zoeken. Alex zag het meteen. De breedtes staan al op de
   koppen (kolomopzet in views.py); nu worden ze ook gevolgd. */
table.planning{width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed;}
/* Bij een vaste indeling knipt een lange tekst niet meer af maar breekt hij af,
   zodat er niets onleesbaar wordt. */
/* `break-word` en niet `anywhere`: een woord breekt alleen als het op geen
   enkele regel heel past. Met `anywhere` mag de browser overal knippen, ook
   als er verderop ruimte is — en dan zie je "Afasdom" met een losse "e"
   eronder terwijl de kolom breed genoeg was. De kolombreedte zelf wordt
   gemeten in planning/tekstbreedte.py; dit is het vangnet daaronder. */
table.planning td, table.planning th{overflow-wrap:break-word;}
table.planning thead th{
  position:sticky; top:calc(var(--kophoogte, 0px) + 29px); z-index:2;
  background:var(--vlak); text-align:left;
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-2);
  padding:7px 10px; border-bottom:1px solid var(--lijn); white-space:nowrap;
}
table.planning.zonderkop thead th{top:var(--kophoogte, 0px);}
table.planning td{padding:6px 10px; border-bottom:1px solid var(--lijn); vertical-align:top;}
table.planning tbody tr:nth-child(even) td{background:var(--vlak);}
td.tijd{
  font:500 13.5px/1.4 var(--cijfers);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
td.tijd .eind{color:var(--inkt-3);}
/* Nachtblok: het +1'tje achter een eindtijd die op de volgende dag valt. */
sup.volgende-dag{
  font:600 9px/1 var(--cijfers); color:var(--signaal);
  margin-left:2px; vertical-align:super; letter-spacing:0;
}
/* Area, discipline en bedrijf. Hier stond `white-space:nowrap`, en dat is
   dezelfde fout als bij `.disc` hierboven — alleen viel het daar eerder op
   omdat die cel een flexbox is en tóch afbrak. Een bedrijf als
   "NCM / The Producers" liep dwars over de kolom Werk heen.
   `break-word` en niet `anywhere`: eerst bij de spaties afbreken, en alleen
   middenin een woord als er echt geen ruimte is. Anders krijg je "Produ" /
   "cers", en dat is precies wat de statuspil eerder de das omdeed. */
td.smal{white-space:normal; overflow-wrap:break-word;}

/* Het statusetiket en wat ernaast hoort — paperclip, voorstelmerkje, envelopje
   — staan op één regel. Zonder dit zakte de paperclip eronder en werd élke rij
   twee regels hoog, ook de rijen zonder bijlage: bij honderd regels een halve
   pagina scrollen voor niets. De kolombreedte wordt in views.kolomopzet
   berekend op wat er op deze pagina daadwerkelijk naast staat. */
td.statuscel{white-space:nowrap;}
td.werk{width:44%;}

/* Het vertaalknopje in een lege Engelse cel. Bewust ingetogen — een grijze
   hint, geen echte knop — want het staat op elke nog-niet-vertaalde regel en
   mag de lijst niet opdringen. Alleen zichtbaar als je erover gaat of erin zit. */
button.vertaal-regel{
  font:inherit; font-size:12px; color:var(--inkt-3);
  background:transparent; border:1px dashed var(--chiprand); border-radius:5px;
  padding:1px 7px; cursor:pointer; opacity:.7;
}
button.vertaal-regel:hover{
  color:var(--inkt); border-color:var(--inkt-3); border-style:solid; opacity:1;
}
button.vertaal-regel:disabled{cursor:default; opacity:.55;}

/* `white-space:nowrap` stond hier zodat "Licht / Rigging" niet halverwege
   afbrak. Met vaste kolombreedtes werd dat een ramp: op een smaller scherm
   krimpen alle kolommen mee, en een naam die niet mag afbreken loopt dan
   dwars over de kolom ernaast heen — Alex zag letterlijk
   "Licht / RiggingPhlippo / L&L" over elkaar staan. Nu breekt hij netjes af
   tussen de woorden; het kleurvlakje blijft bij het eerste stuk. */
.disc{display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap;}
.disc i{align-self:center;}
.disc i{width:9px; height:9px; border-radius:2px; flex:none; display:inline-block;}

/* Smalle naamkolom (area/discipline/bedrijf), aangezet met het knopje in de kop.
   Op een smal scherm kroppen lange namen de werkzaamheden op; smal gezet wordt
   de naam ingekort met een beletselteken en gaat de ruimte terug naar de tekst.
   De volledige naam blijft in de tooltip (title) staan. Zie kolommen.js, dat de
   smal-gezette kolom op een vaste kleine breedte houdt en niet meelaat rekken. */
/* Alleen als het krap is (kolommen.js zet dan krap-<kolom> op de tabel). Met
   ruimte genoeg staat de naam er helemaal, ook als de kolom smal gezet is. */
table.krap-area td.smal[data-veld="area"],
table.krap-discipline td.smal[data-veld="discipline"],
table.krap-bedrijf td.smal[data-veld="organisatie"]{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
table.krap-discipline td.smal[data-veld="discipline"] .disc{display:inline; flex-wrap:nowrap;}
table.krap-discipline td.smal[data-veld="discipline"] .disc i{vertical-align:middle; margin-right:4px;}

/* Het knopje in de kop: ⟩⟨ maakt smal, ⟨⟩ weer breed. Ingetogen, feller als je
   erover gaat; als de kolom smal staat krijgt hij de signaalkleur zodat je ziet
   dát er iets is ingeklapt. */
th.kop-naam .kop-tekst{vertical-align:middle;}
table.krap-area th[data-kol="area"],
table.krap-discipline th[data-kol="discipline"],
table.krap-bedrijf th[data-kol="bedrijf"]{overflow:hidden;}
table.krap-area th[data-kol="area"] .kop-tekst,
table.krap-discipline th[data-kol="discipline"] .kop-tekst,
table.krap-bedrijf th[data-kol="bedrijf"] .kop-tekst{
  display:inline-block; max-width:58px; overflow:hidden;
  text-overflow:ellipsis; vertical-align:bottom;
}
a.kol-smalknop{
  display:inline-block; margin-left:6px; text-decoration:none;
  font-size:11px; line-height:1; letter-spacing:-2px; color:var(--inkt-3);
  opacity:.5; vertical-align:middle; font-variant-numeric:normal;
}
a.kol-smalknop:hover{opacity:1; color:var(--inkt);}
th.kop-naam.is-smal a.kol-smalknop{opacity:.85; color:var(--signaal);}

/* De regel "Opdrachtgever: X — wijzigen" boven de deelnemers. Hij hoort bij de
   lijst en niet bij de uitleg erboven, dus iets dichter tegen de lijst aan. */
.opdrachtgeverregel{margin:-6px 0 10px;}
.opdrachtgeverregel a{margin-left:8px;}

/* ---------- de projectenlijst ---------- */
/* Een eigen tabel, los van `table.planning`. Die heeft een vaste kolomindeling
   (elke kolom even breed) en een eigen telefoonopmaak; hier wil je juist het
   omgekeerde: de datums zijn zo breed als een datum, en alles wat overblijft
   gaat naar de projectnaam. Past het toch niet, dan schuift de omhulling. */
/* Bewust géén `overflow` op deze omhulling: een schuifbare doos wordt een eigen
   scrollcontext, en dan plakt de tabelkop aan de doos in plaats van aan het
   scherm — hij zakte tot midden in de lijst. De kolommen passen nu vanzelf
   (alleen de naam is rekbaar) en op een smal scherm vallen er kolommen weg. */
table.projectenlijst{
  width:100%; border-collapse:collapse; font-size:14px; table-layout:auto;
}
/* De kop plakt onder de zwarte balk (51px) én onder de "Projecten"-band (30px).
   Zit dat niet goed, dan schuift de kop tot over de eerste regels heen. */
table.projectenlijst thead th{
  position:sticky; top:calc(var(--kophoogte, 0px) + 30px); z-index:2;
  background:var(--vlak); text-align:left;
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-2);
  padding:7px 10px; border-bottom:1px solid var(--lijn); white-space:nowrap;
}
table.projectenlijst td{
  padding:8px 10px; border-bottom:1px solid var(--lijn); vertical-align:middle;
}
table.projectenlijst tbody tr:nth-child(even) td{background:var(--vlak);}
table.projectenlijst tbody tr:hover td{background:var(--band);}
/* Klikbare kolomkoppen. De pijl staat alleen bij de kolom waarop gesorteerd
   wordt, zodat je in één oogopslag ziet waar je naar kijkt. */
table.projectenlijst th.sorteerkop{padding:0;}
table.projectenlijst th.sorteerkop a{
  display:block; padding:7px 10px; text-decoration:none; color:inherit;
  white-space:nowrap;
}
table.projectenlijst th.sorteerkop a:hover{color:var(--inkt); background:var(--band);}
table.projectenlijst th.sorteerkop.actief a{color:var(--inkt);}
table.projectenlijst th.sorteerkop .pijl{
  display:inline-block; width:10px; margin-left:4px; color:var(--signaal);
}
/* De verdeling. `width:1%` bij een automatische indeling betekent: zo smal als
   de inhoud toelaat. Alleen de naamkolom heeft geen breedte en slokt daarmee
   alles op wat overblijft — dat is de kolom waar je op zoekt. */
table.projectenlijst th.kol-naam,
table.projectenlijst td.kol-naam{width:auto; min-width:240px;}
table.projectenlijst th.kol-periode, table.projectenlijst td.kol-periode,
table.projectenlijst th.kol-aangemaakt, table.projectenlijst td.kol-aangemaakt,
table.projectenlijst th.kol-versie, table.projectenlijst td.kol-versie,
table.projectenlijst th.kol-gewijzigd, table.projectenlijst td.kol-gewijzigd,
table.projectenlijst th.kol-weggegooid, table.projectenlijst td.kol-weggegooid,
table.projectenlijst th.kol-bedrijven, table.projectenlijst td.kol-bedrijven,
table.projectenlijst th.kol-meldingen, table.projectenlijst td.kol-meldingen,
table.projectenlijst th.kol-versies, table.projectenlijst td.kol-versies,
table.projectenlijst th.kol-beheerder, table.projectenlijst td.kol-beheerder,
table.projectenlijst th.kol-knoppen, table.projectenlijst td.kol-knoppen{
  width:1%; white-space:nowrap;
}
/* Getallen lijnen op hun cijfers uit en staan rechts: zo zie je in één blik
   welke planning er twaalf bedrijven heeft en welke twee, zonder te lezen. */
table.projectenlijst th.getal, table.projectenlijst td.getal{text-align:right;}
table.projectenlijst td.getal{
  font:500 13px/1.4 var(--cijfers); font-variant-numeric:tabular-nums;
  color:var(--inkt-2);
}
table.projectenlijst td.kol-beheerder{color:var(--inkt-2); font-size:14px;}
/* Een lege waarde die een stand is, geen gat. Grijs en licht, zodat hij niet
   meeleest met de namen ernaast. */
table.projectenlijst .stille-waarde{color:var(--inkt-3); font-style:italic;}
table.projectenlijst td.getal .stille-waarde{font-style:normal;}
/* Wat op je bord ligt hoort op te vallen — dat is de hele reden dat deze kolom
   er staat. Alleen als er iets ligt: nul krijgt een streepje. */
table.projectenlijst .meldmerk{
  display:inline-block; min-width:22px;
  font:600 12px/1 var(--cijfers); font-variant-numeric:tabular-nums;
  border-radius:11px; padding:5px 8px; text-align:center;
  background:var(--signaal, #B7302A); color:#FFFFFF;
}
/* Wie er als laatste iets deed, als bijschrift onder de datum. */
table.projectenlijst .doorwie{
  display:block; font:400 11.5px/1.3 inherit; color:var(--inkt-3);
  letter-spacing:0; white-space:nowrap; max-width:150px;
  overflow:hidden; text-overflow:ellipsis;
}
/* De prullenbak heeft naast de naam nog een tweede rekbare kolom: de locatie.
   Die krijgt een kleiner deel dan de naam — een zaalnaam is korter dan een
   projectnaam en mag desnoods over twee regels — maar wél mee-ademen, want met
   een vaste breedte brak "Sportpaleis & Lotto Arena Antwerpen" in vier regels
   terwijl er rechts ruimte over was. */
table.projectenlijst th.kol-locatie,
table.projectenlijst td.kol-locatie{width:auto; min-width:150px; color:var(--inkt-2);}
table.projectenlijst td.kol-weggegooid{
  font:500 13px/1.4 var(--cijfers); font-variant-numeric:tabular-nums;
  color:var(--inkt-2);
}
table.projectenlijst td.kol-weggegooid .bij{
  display:block; font:400 11.5px/1.3 inherit; color:var(--inkt-3);
  letter-spacing:0; text-transform:none;
}
table.projectenlijst td.kol-knoppen{text-align:right;}
table.projectenlijst td.kol-knoppen form{display:inline;}
/* Zonder de band "Projecten" erboven plakt de kop gewoon onder de zwarte balk;
   met de 30px erbij zou hij dertig pixels te laag hangen en de eerste regel
   half bedekken. */
table.projectenlijst.zonderband thead th{top:var(--kophoogte, 0px);}
table.projectenlijst td.kol-periode,
table.projectenlijst td.kol-aangemaakt,
table.projectenlijst td.kol-gewijzigd{
  font:500 13px/1.4 var(--cijfers); font-variant-numeric:tabular-nums;
  color:var(--inkt-2);
}
/* Aangemaakt is de rustigste van de drie datums: dat gegeven zoek je op, je
   scant er niet op. Iets lichter, zodat "laatst gewijzigd" opvalt. */
table.projectenlijst td.kol-aangemaakt{color:var(--inkt-3);}
table.projectenlijst td.kol-gewijzigd{color:var(--inkt);}
table.projectenlijst td.kol-naam a{text-decoration:none;}
table.projectenlijst td.kol-naam a:hover b{text-decoration:underline;}
/* De locatie hangt onder de projectnaam: één kolom minder, en de naam blijft
   het anker van de regel. */
table.projectenlijst .plek{
  display:block; font-size:13px; color:var(--inkt-3); margin-top:1px;
}
/* Versie en concept dragen hetzelfde kadertje: allebei zijn ze een toestand van
   de planning. Alleen de toon verschilt — vastgelegd is stevig, concept cursief
   en grijs. */
table.projectenlijst .versiemerk{
  display:inline-block;
  font:500 12px/1 var(--cijfers); letter-spacing:.04em;
  border:1px solid var(--lijn); border-radius:3px; padding:3px 6px;
  background:var(--papier); white-space:nowrap; color:var(--inkt);
}
table.projectenlijst .versiemerk.nogvast{
  font-weight:400; font-style:italic; color:var(--inkt-3);
  background:transparent;
}

/* Smal scherm: eerst gaat "aangemaakt" eraf, daarna de periode. Wat overblijft
   is waar je op zoekt — naam, versie en wanneer er voor het laatst iets
   veranderde. */
/* De grenzen hieronder zijn gemeten, niet geschat. De tabel heeft met alle
   kolommen ongeveer 1430 pixels nodig; zonder Bedrijven 1320, zonder
   Aangemaakt 1200, zonder Beheerder 1020. Stonden ze lager, dan schoof op een
   laptopscherm (1280, 1366, 1440) de héle pagina zijwaarts — gemeten op
   20-09-2026: 1449 nodig bij 1440 zicht. Onder ±1100 vangt `.inhoud` het al op.
   Rudy koos: kolommen eerder laten wegvallen, kop blijft plakken. */
@media (max-width: 1150px){
  table.projectenlijst .doorwie{display:none;}
}
@media (max-width: 1500px){
  table.projectenlijst th.kol-bedrijven,
  table.projectenlijst td.kol-bedrijven{display:none;}
}
@media (max-width: 1360px){
  table.projectenlijst th.kol-aangemaakt,
  table.projectenlijst td.kol-aangemaakt{display:none;}
}
@media (max-width: 1280px){
  table.projectenlijst th.kol-beheerder,
  table.projectenlijst td.kol-beheerder{display:none;}
}
@media (max-width: 700px){
  table.projectenlijst th.kol-periode,
  table.projectenlijst td.kol-periode{display:none;}
  table.projectenlijst th.kol-naam,
  table.projectenlijst td.kol-naam{min-width:0;}
  table.projectenlijst td{padding:7px 8px;}
}
/* Te beoordelen blijft tot het laatst staan, ook op een telefoon: dat is de
   kolom waarvoor je dit scherm opent. */

/* De balk met zoeken en de twee schakelaars. */
.projectenbalk{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 12px;
}
.projectenbalk .zoekveld{
  flex:0 1 260px; min-width:150px;
  font:400 14px/1.4 inherit; color:var(--inkt);
  background:var(--papier); border:1px solid var(--lijn); border-radius:5px;
  padding:7px 10px;
}
.projectenbalk .zoekveld:focus-visible{
  outline:2px solid var(--signaal, #B7302A); outline-offset:0;
}
.projectenbalk .chip.stil{opacity:.7;}
.projectenbalk .paneelknop{flex:none;}
/* De snelkoppelingen achteraan. Ingetogen tot je erover gaat — ze horen bij de
   regel, niet bovenop de planningnaam. Eigen klassenaam, want `.acties` staat in
   de planningtabel standaard op `display:none` (die verschijnt pas in de
   bewerkstand) — hergebruiken maakte de knoppen hier onzichtbaar. */
th.kol-projectacties,
td.projectacties{
  white-space:nowrap; text-align:right; width:1%; padding-left:4px; padding-right:8px;
}
/* Twee even grote vierkantjes naast elkaar, met een rand: zo staan ze op elke
   regel op dezelfde plek in plaats van als losse tekens te zweven. */
td.projectacties .rijknop + .rijknop{margin-left:3px;}
a.rijknop{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; box-sizing:border-box;
  text-decoration:none; font-size:13px; line-height:1;
  color:var(--inkt-2); border:1px solid var(--lijn); border-radius:4px;
  background:var(--papier);
}
a.rijknop:hover{color:var(--inkt); border-color:var(--inkt-3); background:var(--vlak);}
a.rijknop:focus-visible{outline:2px solid var(--signaal); outline-offset:1px;}
/* Weggooien staat in rust net zo rustig als de rest — het is één knop tussen
   drie en hoort niet de hele lijst te domineren. Pas onder de muis kleurt hij,
   zodat je vlak voordat je klikt ziet dat dit de andere is. */
a.rijknop.gevaar:hover{
  color:#fff; border-color:var(--signaal); background:var(--signaal);
}

/* De andere regels van een selectie die je versleept: ze gaan mee, dus ze
   lichten mee op. Met Alt (kopiëren) dezelfde stippellijn als de gepakte rij. */
/* De dagkop is in de bewerkstand aan te klikken als plek om te plakken. */
body.bewerkstand .groepkop[data-datum]{cursor:pointer;}
body.bewerkstand .groepkop[data-datum]:hover{text-decoration:underline; text-underline-offset:3px;}
.groepkop.doeldag{box-shadow:inset 4px 0 0 var(--signaal); outline:2px solid var(--signaal); outline-offset:-2px;}
tr.sleept-mee td{opacity:.55;}
tr.sleept-mee.kopieert td{opacity:1; outline:1px dashed var(--inkt-3); outline-offset:-1px;}

tr.kritiek td{background:var(--signaal-zacht) !important; color:var(--signaal); font-weight:600;}
tr.mijlpaal td{background:var(--mijlpaal-zacht) !important; color:var(--mijlpaal); font-weight:600;}
tr.informatief td{color:var(--inkt-3); font-style:italic;}
.gedeeld-merk{
  font:500 9.5px/1 var(--cijfers); letter-spacing:.1em;
  border:1px solid currentColor; border-radius:2px; padding:2px 4px; opacity:.7;
}

/* Een status is één woord in een kadertje. `white-space:nowrap` is hier geen
   opmaakvoorkeur maar noodzaak: de cellen mogen sinds de vaste kolombreedtes
   overal afbreken, en dan werd VERTRAAGD een kadertje om VERTRAAG met de D
   eronder buiten de lijn. Breken doen lange teksten, niet een etiket. */
.status{
  font:500 10px/1 var(--cijfers); letter-spacing:.08em;
  text-transform:uppercase; padding:3px 6px; border-radius:2px;
  border:1px solid var(--lijn); color:var(--inkt-3); background:var(--papier);
  white-space:nowrap;
}
/* Een status krijgt zijn kleur van de keuze in Opzet > Statussen, niet meer van
   een vaste sleutel: wie een eigen status "gekeurd" maakt en die groen zet,
   krijgt hem ook groen te zien. */
.status[class*="st-"]{color:var(--st-kleur); border-color:var(--st-kleur);}
.status.st-geel    {--st-kleur:#9A7A12;}
.status.st-oranje  {--st-kleur:#C2701C;}
.status.st-rood    {--st-kleur:#B7302A;}
.status.st-roze    {--st-kleur:#9A2F6B;}
.status.st-paars   {--st-kleur:#6B4E9B;}
.status.st-blauw   {--st-kleur:#1F5FA8;}
.status.st-turkoois{--st-kleur:#0F8A7E;}
.status.st-groen   {--st-kleur:#4A7C59;}
.status.st-grijs   {--st-kleur:#6B6250;}

.leeg{padding:60px 0; text-align:center; color:var(--inkt-3);}
/* Dezelfde zin, maar nu boven een rij dagen in plaats van in een leeg scherm.
   Zestig pixels lucht eronder zou de eerste dagkop wegduwen. */
.leeg.nogniets{padding:22px 0 10px;}

/* ---------- de asknop boven de tijdlijn ---------- */
.asknop{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 0 0;
}
.asknop .etiket{
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-3);
}
.asknop .hint{font-size:12.5px; color:var(--inkt-3); margin-left:4px;}
/* De zoomknoppen: rechts in dezelfde rij. */
.asknop .zoom{display:inline-flex; align-items:center; gap:4px; margin-left:auto;}
.asknop .zoom button{min-width:30px; justify-content:center; font-variant-numeric:tabular-nums;}
.asknop .zoom .zoomstand{min-width:54px;}
.asknop .zoom button:disabled{opacity:.4; cursor:default;}

/* ---------- loopt door uit gisteren ---------- */
/* Een rij bovenaan het dagblok: nachtploegen van de dag ervoor die die ochtend
   nog bezig zijn. Rustiger dan de regels eronder, want het is context en geen
   werk van deze dag. */
/* Het streepje links is een schaduw en geen rand. Een rand van 3px op deze cel
   wint bij border-collapse van de rand van 1px die de kolom eronder heeft, en
   dan schuift de hele kolom 2px op — precies één dagtabel anders dan de rest. */
tr.doorloper-rij td{
  padding:0 !important; background:var(--vlak) !important;
  border-bottom:1px solid var(--lijn);
}
td.doorloper-cel{box-shadow:inset 3px 0 0 var(--inkt-3);}
.doorloper-kop{
  display:block; padding:6px 12px 2px;
  font:500 10.5px/1 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-3);
}
a.doorloper{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding:4px 12px 7px; color:var(--inkt-2); text-decoration:none; font-size:13px;
}
a.doorloper:hover{color:var(--inkt); background:var(--papier);}
a.doorloper .tijd{
  font:500 13px/1.4 var(--cijfers); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
a.doorloper .werk{flex:1 1 220px;}

/* ---------- tijdlijn ---------- */
.tijdlijn{margin-top:14px; border:1px solid var(--lijn); background:var(--papier);
  /* De breedte van de namenkolom en de zoomstand, als variabelen: de breedte
     van de tijd rekent ermee (zie de min-width hieronder). De namenkolom staat
     ook nog vast in grid-template-columns; die twee lopen samen op. */
  --naamkolom:270px; --zoom:1;}
.tijdlijn.met-area{--naamkolom:480px;}
/* Het hele project achter elkaar. De tijdlijn wordt dan breder dan het scherm
   en schuift binnen zijn eigen kader — de pagina zelf blijft staan. De namen
   links plakken mee, anders scrol je weg van de regel waar je naar kijkt. */
.tijdlijn.breeduit{overflow-x:auto; overscroll-behavior-x:contain;}
/* Zodra er horizontaal geschoven kan worden, is de tijdlijn zelf het kader
   waarbinnen `sticky` telt — en dan duwt een offset van de kopbalk de as juist
   naar beneden, over de eerste regel heen. Binnen dit kader is nul de goede
   waarde. */
.tijdlijn.breeduit .tl-kop{top:0;}
.tijdlijn.breeduit .tl-kop,
.tijdlijn.breeduit .tl-rij,
.tijdlijn.breeduit .tl-band{min-width:calc(var(--naamkolom) + var(--dagen, 1) * 190px * var(--zoom));}
/* Zoomen (knoppen − en + naast As, zie tijdlijnzoom.js). De As-knoppen kiezen
   wélk stuk tijd je ziet; zoomen kiest hoe breed een uur is. Rudy, 20
   september: "dit schaalt toch de grootte waarop het gedeelte inzoomt?" — dat
   deden de As-knoppen niet, vandaar deze knoppen erbij.
   Op één dag is 100% de schermbreedte; groter dan dat schuift de tijdlijn in
   zijn eigen kader, net als bij alle dagen, met de namen die blijven staan. */
.tijdlijn.gezoomd:not(.breeduit) .tl-kop,
.tijdlijn.gezoomd:not(.breeduit) .tl-rij,
.tijdlijn.gezoomd:not(.breeduit) .tl-band{min-width:calc(var(--naamkolom) + (100% - var(--naamkolom)) * var(--zoom));}
.tijdlijn.gezoomd{overflow-x:auto; overscroll-behavior-x:contain;}
.tijdlijn.gezoomd .tl-kop{top:0;}
.tijdlijn.gezoomd .tl-naam{position:sticky; left:0; z-index:2; background:var(--papier);}
.tijdlijn.gezoomd .hoek{position:sticky; left:0; z-index:4; background:var(--vlak);}
.tijdlijn.gezoomd .tl-rij:nth-child(even) .tl-naam{background:var(--vlak);}
/* De namen op laag 2, niet 4. Ze hoeven alleen boven de balken te liggen die
   er bij opzij scrollen onderdoor schuiven, en die hebben geen eigen laag. Op 4
   lagen ze even hoog als de vastgezette balk bovenaan (html[data-balk-vast]),
   en omdat ze later in de pagina staan schilderden ze eroverheen: bij scrollen
   schoven de namen over de dagknoppen (Rudy, 20 september). De hoek zit in de
   kop van de tijdlijn, die zijn eigen laag heeft; die mag op 4 blijven. */
.tijdlijn.breeduit .tl-naam{position:sticky; left:0; z-index:2; background:var(--papier);}
.tijdlijn.breeduit .hoek{position:sticky; left:0; z-index:4; background:var(--papier);}
.tijdlijn.breeduit .hoek{background:var(--vlak);}
.tijdlijn.breeduit .tl-rij:nth-child(even) .tl-naam{background:var(--vlak);}
/* Middernacht is bij alle dagen de dagovergang; die mag zwaarder wegen dan een
   uurstreep, want daar kijk je op als je zoekt waar een dag begint. */
.tijdlijn.breeduit .tl-raster span.middernacht{background:var(--inkt-3);}
.tl-kop{
  display:grid; grid-template-columns:270px 1fr;
  border-bottom:1px solid var(--lijn); background:var(--vlak);
  position:sticky; top:var(--kophoogte, 0px); z-index:3;
}
.tl-kop .as{position:relative; height:26px;}
.tl-kop .as span{
  position:absolute; top:7px; transform:translateX(-50%);
  font:500 10.5px/1 var(--cijfers); color:var(--inkt-2);
}
.tl-kop .hoek{
  padding:7px 12px; border-right:1px solid var(--lijn);
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-2);
}
.tl-groep{
  background:var(--balk); color:var(--balk-inkt);
  padding:4px 12px; font-weight:600; font-size:13px;
}
.tl-rij{display:grid; grid-template-columns:270px 1fr; border-bottom:1px solid var(--lijn);}
.tl-rij:nth-child(even){background:var(--vlak);}
.tl-naam{
  padding:5px 12px; border-right:1px solid var(--lijn);
  font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tl-naam small{color:var(--inkt-3);}
/* Met de area erbij (knop "Area tonen" in de balk) wordt de naamkolom breder;
   de area staat vooraan, in een eigen vakje, zodat de disciplines eronder
   nog op één lijn blijven. */
.tijdlijn.met-area .tl-kop,
.tijdlijn.met-area .tl-rij{grid-template-columns:480px 1fr;}
.tl-area{
  display:inline-block; width:210px; margin-right:8px; vertical-align:bottom;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--inkt-2);
}
.tl-spoor{position:relative; height:26px;}
/* De uurlijntjes als herhalend verloop in plaats van een span per uur per rij.
   Zie de toelichting in views.py: als losse spans liep dat bij het hele project
   op tot ruim een miljoen elementen. Middernacht blijft een echte span, want die
   staat er maar een handvol keer en mag zwaarder wegen. */
.tl-raster{
  position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    to right, var(--band) 0 1px, transparent 1px var(--uurbreedte, 100%));
}
.tl-raster span{position:absolute; top:0; bottom:0; width:1px; background:var(--band);}
/* Middernacht: waar de tijdlijn de volgende dag in loopt. Iets zwaarder dan de
   uurlijntjes, zodat je in één oogopslag ziet waar de dag omslaat. */
.tl-raster span.middernacht{width:2px; background:var(--inkt-3);}
.tl-kop .as span.middernacht{color:var(--inkt); font-weight:700;}
.tl-balk{
  position:absolute; top:5px; height:16px; border-radius:2px;
  background:var(--inkt); color:#fff; overflow:hidden;
  font:500 11px/16px var(--cijfers); white-space:nowrap;
  /* Zodat een heel kort blok zichtbaar blijft. Dit stond eerder als een
     ondergrens van 1,5% in de berekening, en een percentage van de as is bij
     het hele project iets heel anders dan bij één dag — daar werd een lunch
     van twee uur bijna vijf uur breed. Beeldpunten dus, geen procenten. */
  min-width:3px;
}
/* Het celwit zit op de tekst en niet op de balk. Op de balk is het een
   ondergrens die je niet ziet: twaalf pixels padding maakt een blok van vier
   pixels alsnog drie keer te breed. Zo is de balk precies zijn eigen tijd, en
   wordt de tekst gewoon afgeknipt. */
.tl-balk .tl-tekst{padding:0 6px;}
/* Past de tekst niet in een korte balk, dan staat hij ernaast (tijdlijn.js).
   In de kleur van een losse tekst bij een punt, want hij staat nu op het spoor
   en niet meer op de balk. */
.tl-balk.tekst-naast{overflow:visible;}
.tl-balk.tekst-naast .tl-tekst{
  position:absolute; left:100%; top:0; color:var(--inkt-2);
  font:400 12px/16px "Rubik","Segoe UI",Helvetica,Arial,sans-serif;
  overflow:hidden; text-overflow:ellipsis; box-sizing:border-box;
}
.tl-balk.tekst-naast.naar-links .tl-tekst{left:auto; right:100%;}
/* Een balk zonder eigen disciplinekleur krijgt `--inkt` als achtergrond, en die
   is in het donkere thema juist lícht. Met een vaste witte tekst stond er dan
   wit op wit: Alex kon de vaste blokken (lunch, diner) niet meer lezen. De
   tekst moet dus de kleur van het papier zijn — donker in het donker, licht in
   het licht. Balken mét een disciplinekleur houden hun witte tekst; die kleuren
   zijn in beide thema's verzadigd genoeg. */
.tl-balk.kleurloos{color:var(--papier);}
.tl-ruit{
  position:absolute; top:7px; width:12px; height:12px; margin-left:-6px;
  transform:rotate(45deg); background:var(--inkt); border-radius:1px;
}
/* Zonder eindtijd maar geen mijlpaal: een punt. Even groot als de ruit op
   zijn punt staat (12px gedraaid is ~17px van hoek tot hoek), zodat ze op één
   rij even zwaar wegen. Zie tijdlijnas.py, "vorm". */
.tl-ruit.punt{
  top:6px; width:14px; height:14px; margin-left:-7px;
  transform:none; border-radius:50%;
}
.tl-ruit.kritiek,.tl-balk.kritiek{background:var(--signaal);}
.tl-ruit.mijlpaal,.tl-balk.mijlpaal{background:var(--mijlpaal);}
.tl-band{
  grid-column:1 / -1; padding:4px 12px;
  font-size:12.5px; font-weight:600;
  background:var(--signaal-zacht); color:var(--signaal);
  border-bottom:1px solid var(--lijn);
}
.tl-band.mijlpaal{background:var(--mijlpaal-zacht); color:var(--mijlpaal);}
.tl-legenda{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.1em; text-transform:uppercase; color:var(--inkt-3);
}
.tl-legenda i{display:inline-block; width:14px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle;}
.tl-legenda i{background:var(--inkt-3);}
.tl-legenda i.ruit{width:9px; height:9px; transform:rotate(45deg); border-radius:1px;}
.tl-legenda i.punt{width:10px; height:10px; border-radius:50%;}

/* =====================================================================
   Bewerken
   ===================================================================== */

.kop .afmelden{margin:0;}
/* Alleen nadruk; het formaat staat bij .kop .knop. */
.knop.stil{opacity:.55;}
.knop.stil:hover{opacity:1;}
button.knop{cursor:pointer; background:transparent; font-family:inherit;}
button.knop.aan{background:var(--balk-inkt); color:var(--balk); font-weight:600; border-color:var(--balk-inkt);}

/* ---------- meldingen ---------- */
/* Meldingen staan boven in het midden en niet meer rechtsboven: daar vielen ze
   half over de knoppenbalk en las je ze pas als je ze al kwijt was. Boven in
   het midden lees je ze meteen, en ze bedekken niets waar je op klikt — daarom
   bovenaan en niet echt in het midden van het scherm. */
/* Onder de kopbalk en niet erover. De meldingen stonden op 14 pixels van de
   bovenkant en dus middenin de balk — en sinds de planningnaam daar gecentreerd
   staat, precies op die naam. "Regel opgeslagen" dekte af waar je aan werkte.
   thema.js meet de balk en zet de hoogte in --kopgemeten; die verandert mee als
   de knoppen op een smal scherm afbreken. */
/* Boven álles, ook boven een open venster. Ze stonden op 60 en de donkere laag
   van een venster op 90, dus een melding die je juist op dat moment nodig hebt
   — "Vink eerst aan wat je wilt veranderen" bij F2 — kwam grijs achter dat
   venster te liggen. Alex: *"Klopt. Maar dit is in het grijze scherm erachter.
   Dit mag duidelijker."* Een melding hoort bij wat je zojuist deed, dus hij
   hoort nooit achter iets te verdwijnen. */
.meldingen{
  position:fixed; top:calc(var(--kopgemeten, 48px) + 10px);
  left:50%; transform:translateX(-50%); z-index:100;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  max-width:min(520px,calc(100vw - 24px)); pointer-events:none;
}
.melding{
  background:var(--balk); color:var(--balk-inkt);
  padding:9px 15px; border-radius:var(--radius); font-size:13.5px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  animation:melding-in .16s ease-out;
  pointer-events:auto; text-align:center;
}
.melding.error{background:var(--signaal);}
.melding.success{background:var(--gereed);}
/* Wegfaden in plaats van ineens verdwijnen: je ziet dan dat hij weggaat en
   vraagt je niet af of je iets gemist hebt. */
.melding.weg{opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s;}
@keyframes melding-in{from{opacity:0; transform:translateY(-5px);}to{opacity:1;}}

@media (max-width:640px){
  .meldingen{max-width:calc(100vw - 16px);}
}

/* ---------- de Nu-weergave ----------
   Eén moment, drie groepen. Groter en luchtiger dan de lijst: dit lees je op
   een steiger met een telefoon in één hand, niet aan een bureau. */
.nukop{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:16px 0 6px;
}
.nukop h1{margin:0; font-size:22px;}
.nukop .toelichting{margin:2px 0 0;}

.nugroep{margin:14px 0 6px;}
.nugroep h2{
  margin:0 0 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-3); display:flex; align-items:center; gap:8px;
}
.nugroep h2 .telling{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--band); color:var(--inkt-2);
  font:600 11px/1 var(--cijfers); letter-spacing:0;
}
.nulijst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}

.nuregel{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--radius); padding:11px 13px;
}
/* Een streepje links per groep: bezig is de enige die de aandacht mag pakken,
   blijven-staan krijgt het signaal, zo meteen blijft stil. */
.nugroep.bezig .nuregel{border-left:3px solid var(--balk);}
.nugroep.blijft .nuregel{border-left:3px solid var(--signaal);}
.nugroep.straks .nuregel{border-left:3px solid var(--lijn);}

.nuinhoud{flex:1; min-width:0;}
.nukoprij{
  margin:0 0 3px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--inkt-2);
}
.nutijd{font:600 16px/1.1 var(--cijfers); color:var(--inkt);}
.nutijd .tot{font-weight:400; font-size:13px; color:var(--inkt-3);}
.nubedrijf{color:var(--inkt-2);}
.nuwerk{margin:0; font-size:15.5px; line-height:1.35;}
.nuarea{margin:3px 0 0; font-size:12.5px; color:var(--inkt-3);}

/* Het vinkje. Groot genoeg voor een duim met een handschoen aan: 40 bij 40. */
.vinkje{
  flex:0 0 auto; width:40px; height:40px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--lijn); border-radius:var(--radius);
  background:var(--vlak);
  /* Het vinkje staat er al flauw in als het uit staat. Met kleur `transparent`
     was het een leeg grijs vakje dat op een stukgelopen afbeelding leek; nu zie
     je meteen wat er gebeurt als je erop tikt. */
  color:var(--lijn);
  font-size:19px; line-height:1; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.vinkje:hover{border-color:var(--inkt-3); color:var(--inkt-3);}
.vinkje.aan{background:var(--gereed); border-color:var(--gereed); color:#fff;}
/* Gemeld als klaar, wacht op Axiom: gestippeld in de klaar-kleur, niet gevuld.
   De regel zelf krijgt geen streep, want in de planning is nog niets anders. */
.vinkje.wacht{border-style:dashed; border-color:var(--gereed); color:var(--gereed); background:none;}
.vinkje:disabled{opacity:.55; cursor:default;}
.vinkje.stil{border-style:dashed; color:var(--inkt-3); cursor:default;}
/* Een regel die je niet mag afvinken — het werk van een ander bedrijf — houdt
   wél zijn plek. Zonder dit springt de tekst van die regels naar links en
   leest de lijst als twee lijsten door elkaar. Hier hoort geen vakje te staan:
   een grijs of gestreept vakje leest als "het mag even niet", en dat is het
   niet; het gaat gewoon niet over jou. */
.vinkje.leeg{border-color:transparent; background:none; cursor:default;}

/* Afgevinkt: doorgestreept en stiller, en in de onderste groep één regel hoog. */
.nuregel.af .nuwerk{text-decoration:line-through; color:var(--inkt-3);}
.nugroep.klaar .nulijst.dicht{gap:2px;}
.nugroep.klaar .nuregel{
  align-items:center; gap:10px; padding:5px 10px; border-left:0;
  background:transparent; border-color:transparent;
}
.nugroep.klaar .vinkje{width:28px; height:28px; font-size:15px; border-width:1px;}
.nugroep.klaar .nutijd{font-size:13px;}
.nugroep.klaar .nuwerk{
  font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:700px){
  .nukop h1{font-size:19px;}
  .nuregel{padding:10px 11px; gap:10px;}
  .vinkje{width:44px; height:44px;}   /* op een telefoon nog iets ruimer */
}

/* ---------- werkbalk boven de lijst ---------- */
.werkbalk{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 0 2px; border-bottom:1px dashed var(--lijn); margin-bottom:2px;
}
.werkbalk .hint{font-size:12.5px; color:var(--inkt-3);}
.werkbalk .greep-uitleg{letter-spacing:-1px; color:var(--inkt-2);}

/* ---------- cellen die je kunt aanklikken ---------- */
.bewerkstand table.planning td[data-veld]{cursor:text;}
.bewerkstand table.planning td[data-veld]:hover{
  box-shadow:inset 0 0 0 1px var(--lijn); background:var(--invoer);
}
td[data-veld].open{padding:2px 4px; box-shadow:inset 0 0 0 2px var(--balk) !important;}
td[data-veld].open input,
td[data-veld].open select,
td[data-veld].open textarea{
  width:100%; font:inherit; font-size:13.5px; border:0; outline:0;
  background:var(--invoer); padding:3px 4px; resize:vertical;
}
tr.bezig{opacity:.45;}
tr.bewaard td{background:var(--gereed-zacht) !important; transition:background .5s;}
tr.mislukt td{background:var(--signaal-zacht) !important;}

/* De regel waar je net vandaan kwam. Na het bewerkformulier springt de browser
   naar `#r-<kenmerk>`; deze gloed zegt wélke rij dat was, zodat je niet hoeft
   te zoeken tussen honderd regels die er hetzelfde uitzien. Hij dooft vanzelf.
   `!important` omdat een markeerkleur of een eigen-regelkleur er anders
   overheen ligt — dit duurt twee seconden en mag even winnen. */
tr.aangeraakt td{
  background:var(--mijlpaal-zacht) !important;
  transition:background 1.4s ease-out;
}
@media (prefers-reduced-motion: reduce){
  tr.aangeraakt td{transition:none;}
}

/* ---------- volgorde slepen ---------- */
th.kol-greep,td.greep{width:22px; padding:6px 2px 6px 8px;}
td.greep{
  color:var(--lijn); cursor:grab; user-select:none;
  letter-spacing:-2px; font-size:15px; text-align:center;
}
.bewerkstand td.greep{color:var(--inkt-3);}
td.greep:active{cursor:grabbing;}
tr.sleept{opacity:.35;}
tbody.bezig{opacity:.5;}
th.kol-greep,td.greep,th.kol-acties,td.acties{display:none;}
.bewerkstand th.kol-greep,
.bewerkstand td.greep,
.bewerkstand th.kol-acties,
.bewerkstand td.acties{display:table-cell;}

/* ---------- kleine knoppen achter de regel ---------- */
th.kol-acties,td.acties{width:76px; white-space:nowrap; text-align:right;}
td.acties form{display:inline; margin:0;}
.mini{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:2px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt-2);
  font-size:13px; line-height:1; text-decoration:none; cursor:pointer;
}
.mini:hover{background:var(--balk); color:#fff; border-color:var(--balk);}

/* De soortkeuze in de invoerregel, achter de werkzaamheden. Geen eigen kolom:
   die zou de tabel onder je handen verschuiven. Vandaar naast het tekstveld in
   dezelfde cel, met flex zodat het tekstveld de rest opeet. */
td.werkinvoer .werkrij{display:flex; gap:4px; align-items:center;}
td.werkinvoer .werkrij > input{flex:1 1 auto; min-width:0;}
.typekeuze{
  flex:0 0 auto; max-width:38%;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt-2);
  font:inherit; font-size:12px; padding:2px 4px; cursor:pointer;
}
.mini.gevaar:hover{background:var(--signaal); border-color:var(--signaal);}

/* ---------- tijdlijn: slepen en rekken ---------- */
.tl-balk .tl-tekst{pointer-events:none;}
.bewerkstand .tl-balk{cursor:grab;}
.bewerkstand .tl-balk.sleept{cursor:grabbing; box-shadow:0 0 0 2px var(--papier),0 0 0 3px var(--balk);}
/* De nachtploeg van gisteren, vandaag in beeld. Iets rustiger dan het werk van
   deze dag — het is bezette tijd, geen nieuwe klus — en met een schuine rand
   links waar hij het beeld uit loopt, zodat het geen blok lijkt dat om
   middernacht begon. */
.tl-balk.vanuit-gisteren{opacity:.72;}
.tl-balk.vanuit-gisteren.afgeknipt{
  border-top-left-radius:0; border-bottom-left-radius:0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7px);
  mask-image:linear-gradient(to right, transparent 0, #000 7px);
}
.tl-balk.vanuit-gisteren .tl-tekst::before{content:"\2190\00a0";}
/* De tijd tijdens het slepen. Staat op body, buiten het spoor: het spoor snijdt
   af wat erbuiten valt, en juist als je over middernacht heen rekt wil je nog
   kunnen lezen waar je staat. */
.tl-sleeplabel{
  position:absolute; z-index:40; pointer-events:none;
  padding:3px 7px; border-radius:3px;
  background:var(--inkt); color:var(--papier);
  font:500 12px/1.2 var(--cijfers); font-variant-numeric:tabular-nums;
  white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.tl-greep{display:none;}
.bewerkstand .tl-greep{
  display:block; position:absolute; top:0; bottom:0; width:7px;
  cursor:ew-resize; background:rgba(255,255,255,.32);
}
.bewerkstand .tl-greep.links{left:0;}
.bewerkstand .tl-greep.rechts{right:0;}
.bewerkstand .tl-balk:hover .tl-greep{background:rgba(255,255,255,.6);}
.tl-losse-tekst{
  position:absolute; top:5px; font-size:12px; white-space:nowrap; color:var(--inkt-2);
  /* Een moment laat op de dag heeft zijn tekst rechts van de ruit staan, en die
     stak buiten het spoor uit. Op een breed scherm valt dat niet op; op een
     telefoon ging de hele pagina daardoor zijwaarts schuiven. De tekst mag nu
     niet breder zijn dan wat er rechts nog over is. */
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
/* Een moment in de rechterhelft krijgt zijn tekst links van de ruit. Daar is
   ruimte, dus hij wordt niet meer aan de rand afgeknipt. */
.tl-losse-tekst.naar-links{text-align:right;}
/* Het spoor houdt zijn eigen inhoud binnen, zodat een uitstekende balk of tekst
   nooit de pagina breder maakt dan het scherm. */
.tl-spoor{overflow:hidden;}

/* =====================================================================
   Formulieren
   ===================================================================== */

.blad{max-width:720px; margin:26px auto 70px; padding:0 22px;}
.blad.breed{max-width:1000px;}
/* Nog een maat erbij voor een blad met een brede tabel erin: vijf kolommen en
   twee knoppen passen niet fatsoenlijk in duizend pixels, en dan gaan de namen
   over twee regels terwijl er scherm over is. */
.blad.breedst{max-width:1200px;}
.blad h1{font-size:23px; font-weight:500; letter-spacing:-.01em; margin:0 0 4px;}
/* Een leesmaat van 56 tekens klopt op een smal blad van 720 pixels. Op een
   breed blad klopte hij niet meer: op de bedrijvenpagina stond dezelfde alinea
   als een koker van 532 pixels uiterst links, met woorden die afbraken, naast
   een tabel van 1454. Dat leest niet als een keuze maar als een fout.

   De maat schaalt nu mee met het blad. Niet tot de volle breedte — dan wordt
   een regel op die pagina bijna 180 tekens lang en raak je bij het terugspringen
   de volgende regel kwijt — maar ruim genoeg dat de alinea bij de tabel hoort.
   Op de bedrijvenpagina scheelt dat elf regels tekst tegen zes. */
.blad .toelichting{color:var(--inkt-2); margin:0 0 22px; max-width:56ch;}
.blad.breed .toelichting,
.blad.breedst .toelichting,
.blad.bedrijvenblad .toelichting{max-width:min(100%, 92ch);}

.veldenrij{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.veld{margin-bottom:15px;}
.veld > label{
  display:block; margin-bottom:4px;
  font:500 10.5px/1 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-2);
}
.veld input[type=text],.veld input[type=date],.veld input[type=time],
.veld input[type=number],.veld input[type=email],.veld input[type=password],
.veld select,.veld textarea{
  width:100%; font:15px/1.4 inherit; padding:7px 9px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--invoer); color:var(--inkt);
}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:0; border-color:var(--balk); box-shadow:0 0 0 3px rgba(21,20,15,.09);
}
.veld input[type=color]{width:52px; height:34px; padding:2px; cursor:pointer;}

/* Het kleurenpalet als matrix. Hier stond een <input type=color> — zestien
   miljoen kleuren voor iets waar er 33 van bestaan — en daarna een rij pillen
   met de naam erin. Rudy: *"zet die kleuren gewoon in een matrix zoals
   normaal"* en *"kleuren in verloop van tinten in logisch volgorde"*.

   Acht kolommen, één per kleurtoon in de volgorde van de ring, en vier rijen:
   de basiskleur bovenaan en daaronder een kwart, de helft en driekwart van de
   weg naar de buurkolom. Van links naar rechts loopt het kleurenwiel rond, van
   boven naar beneden loopt elke kolom over in zijn buurman. Grijs staat er los
   onder; die heeft geen kleurtoon.

   De naam staat in de tooltip en niet in het vakje: 33 namen naast elkaar is
   een raster van woorden, en juist dát was de vorige fout. Het radioknopje
   blijft in de opmaakstroom (verborgen via opacity in plaats van display:none)
   zodat toetsenbord en schermlezer hem houden. */
.veld .kleurmatrix{
  display:grid; grid-template-columns:repeat(8, 30px); gap:4px;
  width:max-content; max-width:100%;
}
.veld .kleurstaal{
  position:relative; display:block; height:30px; cursor:pointer;
  border-radius:var(--radius); background:var(--staal);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.veld .kleurstaal .naam{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.veld .kleurstaal input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.veld .kleurstaal:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px var(--lijn);}
/* De gekozen kleur krijgt een ring in zijn eigen kleur met een witte spleet
   ertussen, zodat hij ook op een donkere achtergrond opvalt. */
.veld .kleurstaal:has(input:checked){
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),
             0 0 0 2px var(--papier), 0 0 0 4px var(--staal);
}
.veld .kleurstaal:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:3px;}
@media (max-width:520px){
  .veld .kleurmatrix{grid-template-columns:repeat(8, 1fr); width:100%;}
  .veld .kleurstaal{height:0; padding-bottom:100%;}
}

.veld .uitleg{font-size:12.5px; color:var(--inkt-3); margin-top:4px;}
.veld .fout{font-size:12.5px; color:var(--signaal); margin-top:4px; font-weight:500;}
.veld.heeft-fout input,.veld.heeft-fout select,.veld.heeft-fout textarea{border-color:var(--signaal);}
.veld.aankruis{display:flex; align-items:flex-start; gap:9px;}
.veld.aankruis > label{text-transform:none; letter-spacing:0; font:inherit; margin:0;}

.formulierfouten{
  background:var(--signaal-zacht); border-left:3px solid var(--signaal);
  padding:10px 14px; margin-bottom:18px; color:var(--signaal); font-weight:500;
}

.knoppen{display:flex; align-items:center; gap:10px; margin-top:26px;
  padding-top:18px; border-top:1px solid var(--lijn);}
.hoofdknop{
  background:var(--balk); color:var(--balk-inkt); border:1px solid var(--balk);
  padding:9px 20px; font:500 15px/1 inherit; border-radius:var(--radius); cursor:pointer;
}
.hoofdknop:hover{background:#000;}
.tweedeknop{
  padding:9px 16px; font:15px/1 inherit; text-decoration:none;
  border:1px solid var(--lijn); border-radius:var(--radius); color:var(--inkt-2);
  background:var(--papier); display:inline-flex; align-items:center;
}
.tweedeknop:hover{border-color:var(--inkt-3);}
.wegknop{margin-left:auto; color:var(--signaal); border-color:transparent; background:transparent;
  padding:9px 12px; text-decoration:none; border-radius:var(--radius);}
.wegknop:hover{background:var(--signaal-zacht);}

/* =====================================================================
   Opzetscherm
   ===================================================================== */

/* `align-items:start` hoort erbij. Zonder dat rekt elk paneel zich uit tot de
   hoogte van het langste in dezelfde rij: bij een verse planning stond er onder
   "1 gebied" driehonderdvijftig pixels leegte, alleen omdat de kolom met
   bedrijven ernaast lang was. Een paneel is zo hoog als zijn inhoud. */
.opzet{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:22px; margin-top:22px; align-items:start;
}
.paneel{border:1px solid var(--lijn); background:var(--invoer);}
/* De kop van een paneel staat verderop, in het blok over Opzet en Beheer: hij
   was hier een zwarte balk en is daar een lichte kop geworden. Twee keer
   dezelfde selector is één keer te veel, dus hier staat hij niet meer. */
.paneel .uitleg{padding:10px 14px 0; color:var(--inkt-3); font-size:13px; margin:0;}
.paneel ul{list-style:none; margin:8px 0 0; padding:0;}
.paneel li{
  display:flex; align-items:center; gap:9px;
  padding:7px 14px; border-top:1px solid var(--band); font-size:14px;
}
.paneel li:first-child{border-top:0;}
.paneel li .stip{width:10px; height:10px; border-radius:2px; flex:none; border:1px solid rgba(0,0,0,.12);}
.paneel li .bij{color:var(--inkt-3); font-size:12.5px;}
.paneel li .rechts{margin-left:auto; display:flex; gap:3px;}
.paneel .toevoegen{display:block; padding:10px 14px; border-top:1px solid var(--band);
  font-size:13.5px; text-decoration:none; color:var(--inkt-2); background:var(--vlak);}
.paneel .toevoegen:hover{background:var(--band); color:var(--inkt);}
/* Een ingang waar iets achter zit. Alleen als er echt iets staat: een merkteken
   dat er altijd is, is geen merkteken meer. */
.paneel .toevoegen.let-op{color:var(--inkt); font-weight:600;}
.paneel .toevoegen.let-op .telling-klein{
  background:var(--signaal); color:#fff; border-radius:9px;
  padding:1px 7px; margin-left:4px; font-weight:600;
}
.paneel .leegje{padding:14px; color:var(--inkt-3); font-size:13.5px; font-style:italic;}

/* Voor- en achternaam staan in één cel op de mensenpagina; zonder dit staan ze
   onder elkaar en is de regel twee keer zo hoog als bij bedrijven. Het flexvak
   zit bewust *in* de cel en niet op de cel zelf: een `td` met `display:flex`
   doet niet meer mee aan de kolombreedtes van de tabel, en dan kromp de hele
   naamkolom tot twee velden van dertig pixels. */
table.bedrijventabel td.veld-naam .naamduo{display:flex; gap:6px;}
table.bedrijventabel td.veld-naam .naamduo input{min-width:0; flex:1 1 0;}

/* ---------- Opzet: statusregel, panelen en hun knoppen ----------

   Hier stonden vijf voortgangstegels (`.stappen`, `.stap`) met vinkjes en
   tellingen, en daaronder dezelfde vijf dingen nog een keer als panelen. Rudy:
   *"de knoppen zitten allemaal wat verstopt en voelt niet goed"*. Dat klopte,
   en de tegels waren daar het luidruchtigste deel van: ze hielpen één keer, bij
   een splinternieuwe planning, en stonden daarna voorgoed in de weg zonder dat
   je erop kon klikken. Er is nu één regel met dezelfde gegevens.

   Alles hieronder staat bewust onder `.opzet` en niet los. `.paneel` en
   `.toevoegen` worden op zes andere schermen ook gebruikt (Beheer, bedrijven,
   gebruikers, voorstellen, uitnodigen); die veranderen hier niet mee. Wil je ze
   later dezelfde behandeling geven, dan is dat een eigen ronde en geen
   bijvangst van deze. */
.statusregel{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  margin:10px 0 0; padding-bottom:11px; border-bottom:1px solid var(--lijn);
  font-size:13px; color:var(--inkt-2);
}
.statusregel b{color:var(--inkt); font-weight:600;}
.statusregel .wijziglink{margin-left:auto; color:var(--inkt-2); font-size:12.5px;}
.statusregel .wijziglink:hover{color:var(--inkt);}

/* De twee knoppen waarvoor je hier binnenkomt, bovenaan in plaats van onder
   zes panelen door. */
.hoofdrij{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0;}
.hoofdrij .hoofdknop{text-decoration:none; display:inline-flex; align-items:center;}

/* Eén kolom, alles even breed.

   Eerst drie kolommen, daarna twee — en allebei hetzelfde probleem: panelen
   hebben ongelijke hoogtes, dus onder een kort paneel valt een gat en de rest
   schuift op zodra er ergens een regel bij komt. Rudy: *"het verspringt en
   voelt niet praktisch... dan liever alles onder elkaar per sectie en breder
   (uniform) trekken."*

   Onder elkaar heeft geen enkel gat, elke sectie is even breed, en de volgorde
   ligt vast: wat er staat blijft staan waar het stond. Een paneel is breder dan
   het nodig heeft, maar breed en voorspelbaar leest beter dan smal en
   verspringend. */
.opzet{grid-template-columns:1fr; gap:14px; margin-top:20px;}

/* Een lichte kop in plaats van een zwarte balk. Op Opzet staan er zes naast
   elkaar en maken zes zwarte balken van een overzicht een streepjescode; op
   Beheer geldt hetzelfde. Rudy, nadat hij het op Opzet had gezien: *"zelfde
   behandeling graag"*. De naam van het paneel is genoeg. */
.paneel > h2,
.paneel > summary{
  margin:0; padding:9px 14px; display:flex; gap:9px; font-weight:600;
  background:var(--vlak); color:var(--inkt); border-bottom:1px solid var(--lijn);
  font-size:13px; align-items:center;
}
.paneel > h2 .telling-klein,
.paneel > summary .telling-klein{margin-left:0; opacity:1; color:var(--inkt-3);}

/* De balk als open- en dichtknop. Rudy: *"misschien open schuif/klikbare
   tabellen? met een pijltje in de balk?"* en *"dus pijltje vooruit en terug
   inklappen (gedraaid) en dat vraagteken samen bovenin"*.

   `<details>` en geen eigen knop: dan werkt het met het toetsenbord, zonder
   javascript, en de browser regelt het openklappen zelf. Het eigen driehoekje
   van de browser gaat weg; het pijltje hieronder komt ervoor in de plaats,
   omdat dat er in elk thema hetzelfde uitziet. */
.paneel > summary{cursor:pointer; list-style:none;}
.paneel > summary::-webkit-details-marker{display:none;}
.paneel > summary:hover{background:var(--band);}
.paneel > summary:focus-visible{outline:2px solid var(--inkt); outline-offset:-2px;}
.paneel > summary .pijl{
  flex:none; width:9px; height:9px; margin-right:1px;
  border-right:2px solid var(--inkt-3); border-bottom:2px solid var(--inkt-3);
  transform:rotate(-45deg); transition:transform .15s ease;
}
.paneel[open] > summary .pijl{transform:rotate(45deg);}
.paneel > summary > b{font-weight:600;}
/* Wat er in staat, zonder open te klappen: de projectnaam, het begin van de
   notitie. Zo is een dichte balk nog steeds een regel informatie. */
.paneel > summary .samenvatting{
  color:var(--inkt-3); font-weight:400; font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.paneel > summary .hulpknop{margin-left:auto;}
/* Zonder vraagteken hoort de samenvatting de ruimte te nemen. */
.paneel > summary .samenvatting:last-child{margin-right:auto;}

/* De projectvelden en de notitie staan in een sectie en niet in een los
   formulier; ze krijgen dezelfde maten als elk ander formulier in Ordo. */
.paneelinhoud{padding:12px 14px 2px;}
.paneelinhoud .veld{margin-bottom:12px;}
.paneelinhoud .veld > label{
  display:block; font:500 10.5px/1 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-2); margin-bottom:5px;
}
.paneelinhoud .veld input[type="text"],
.paneelinhoud .veld input[type="password"],
.paneelinhoud .veld input[type="date"],
.paneelinhoud .veld input[type="number"],
.paneelinhoud .veld select,
.paneelinhoud .veld textarea{
  width:100%; font:14px/1.4 inherit; padding:7px 9px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt);
}
.paneelinhoud .veld.aankruis{display:flex; align-items:center; gap:8px;}
.paneelinhoud .veld.aankruis > label{
  margin:0; text-transform:none; letter-spacing:0; font-size:14px;
  font-weight:400; color:var(--inkt);
}
.paneelinhoud .veld .uitleg{padding:0; margin-top:4px;}

/* De vijf kolomnamen naast hun vertaling. Ze stonden als tien losse velden
   onder elkaar, en dan zie je niet dat het paren zijn. */
table.kolomnamen{width:100%; border-collapse:collapse; font-size:14px;}
table.kolomnamen th{
  text-align:left; padding:0 12px 7px 0; border-bottom:1px solid var(--lijn);
  font:500 10.5px/1.4 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-3); white-space:nowrap;
}
table.kolomnamen td{padding:6px 12px 6px 0; border-bottom:1px solid var(--band);}
table.kolomnamen tbody th{
  border-bottom:1px solid var(--band); padding-right:14px; width:22%;
  color:var(--inkt-2); vertical-align:middle;
}
table.kolomnamen input{
  width:100%; font:14px/1.4 inherit; padding:6px 9px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt);
}
table.kolomnamen input:focus{outline:0; border-color:var(--balk);}
.paneel > .tabelrol{padding:10px 14px 4px;}
/* Op een telefoon is drie kolommen naast elkaar geen tabel meer maar drie
   snippers: de rijkop eet de breedte op en er blijft twee centimeter over om in
   te typen. Daar wordt elke rij een blokje met de kolomnaam erboven en de twee
   talen eronder, met hun eigen kopje uit `data-taal`. */
@media (max-width:640px){
  table.kolomnamen thead{position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path:inset(50%);}
  table.kolomnamen tr{display:block; padding:8px 0;
    border-bottom:1px solid var(--band);}
  table.kolomnamen tbody th{display:block; width:auto; border:0;
    padding:0 0 6px; color:var(--inkt);}
  table.kolomnamen td{display:block; border:0; padding:0 0 7px;}
  table.kolomnamen td::before{
    content:attr(data-taal); display:block; margin-bottom:3px;
    font:500 10px/1 var(--cijfers); letter-spacing:.13em;
    text-transform:uppercase; color:var(--inkt-3);
  }
}

/* Het vraagteken dat de uitleg openklapt. Rond en klein: het is een voetnoot,
   geen bediening. */
.hulpknop{
  margin-left:auto; width:19px; height:19px; flex:none; cursor:pointer;
  border:1px solid var(--lijn); border-radius:99px; background:var(--papier);
  color:var(--inkt-3); font:500 11px/1 inherit; padding:0;
}
.hulpknop:hover{border-color:var(--inkt-3); color:var(--inkt);}
.paneel.uitleg-open .hulpknop{background:var(--band); color:var(--inkt);}

/* De uitleg. Zolang de planning nog opgezet wordt staat hij open — dan ben je
   hem aan het lezen. Zodra er regels in staan verdwijnt hij achter het
   vraagteken, want dan kom je hier om iets te wijzigen en heb je hem al gelezen.
   Zie de toelichting bovenaan opzet.html. */
/* Eén regel voor alle schermen, en hij hangt aan het paneel zelf: staat er
   niets in, dan lees je de uitleg — dan heb je hem nodig. Staat er wél iets in,
   dan weet je waar het paneel voor is en verhuist de tekst naar het
   vraagteken. `:has(.hulpknop)` zorgt dat dit alleen gebeurt op panelen die dat
   vraagteken ook hébben; zonder die knop zou de tekst onbereikbaar zijn. */
.paneel:has(.hulpknop):not(.leegpaneel) > .uitleg{display:none;}
/* Even zwaar als de verbergregel hierboven, anders wint die en doet het
   vraagteken niets: `:has()` en `:not()` tellen mee voor het gewicht van een
   selector. */
.paneel:has(.hulpknop).uitleg-open > .uitleg{display:block;}
.paneel .opdrachtgeverregel{
  padding:10px 14px 0; margin:0; font-size:13px; color:var(--inkt-2);
}

.paneel li{padding:6px 14px;}
.paneel li .rechts{gap:5px; flex:none;}

/* Wijzigen was een potloodje: een pictogram zonder woord, in een randje dat
   zwaarder oogde dan de naam ernaast. Nu een knop waar staat wat hij doet. */
.regelknop{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:3px 9px; font-size:12px; font-weight:500; text-decoration:none;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt-2); cursor:pointer;
}
.regelknop:hover{border-color:var(--inkt-3); color:var(--inkt); background:var(--band);}
.regelknop.stil{color:var(--inkt-3); border-style:dashed;}
.regelknop.stil:hover{border-style:solid;}
/* Toegang intrekken en dat soort werk: rode letters, maar een gewone rand en
   geen vlak. Vijf van deze knoppen onder elkaar moeten geen alarmlijst worden;
   het vlak komt er pas bij als je erop staat. */
.regelknop.gevaar{color:var(--signaal); border-color:var(--lijn);}
.regelknop.gevaar:hover{
  background:var(--signaal-zacht); border-color:var(--signaal); color:var(--signaal);
}

/* De voet van een paneel: de knop die je hier nodig hebt, en daarnaast wat je
   zelden doet — als tekst, zodat het er wel is maar niet voordringt. */
.paneelvoet{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:11px 14px; border-top:1px solid var(--band); background:var(--vlak);
}
.paneelknop{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:5px 12px; font-size:13px; font-weight:500; text-decoration:none;
  border:1px solid var(--balk); border-radius:var(--radius);
  background:var(--balk); color:var(--balk-inkt);
}
.paneelknop:hover{background:#000; border-color:#000; color:#fff;}
.paneelvoet .zeldzaam{font-size:12.5px; color:var(--inkt-3);}
.paneelvoet .zeldzaam:hover{color:var(--inkt);}

/* Een leeg paneel in een planning die al draait: één regel hoog, en achteraan.
   "Vaste blokken — nog geen" hoeft geen kop, uitleg en knop van tweehonderd
   pixels als je ze niet gebruikt. Bij een planning die nog opgezet wordt is
   álles leeg en gebeurt dit dus niet.

   `leegpaneel` en niet `leeg`: die klassenaam bestaat al, met `padding:60px 0`
   voor een leeg scherm. Dat gaf precies wat hier weg moest — een vakje van
   tweehonderd pixels met één regel erin. Zelfde valkuil als `acties` bij de
   disciplinetabel. */
.opzet.ingericht .paneel.leegpaneel{order:2;}
/* De twee staartsecties helemaal onderaan: kolomnamen en de notitie zijn geen
   onderdeel van de planning maar instellingen eromheen. Rudy: *"zou de notities
   onderaan zetten"*. */
.opzet .paneel[data-sectie="kolommen"]{order:3;}
.opzet .paneel[data-sectie="notitie"]{order:4;}
.opzet.ingericht .paneel.leegpaneel > h2{
  background:transparent; border-bottom:0;
}
.opzet.ingericht .paneel.leegpaneel ul,
.opzet.ingericht .paneel.leegpaneel .leegje{display:none;}
/* Ook de uitleg, anders is "ingeklapt" nog altijd drie regels hoog. Op Beheer
   gebeurt dit niet: daar is een leeg paneel zeldzaam en zegt de uitleg juist
   waar het voor is. Het gewicht moet hier hoger liggen dan de algemene regel
   hierboven, en de openklapregel er weer boven — anders doet het vraagteken op
   een ingeklapt paneel niets. */
.opzet.ingericht .paneel.leegpaneel .uitleg{display:none;}
.opzet.ingericht .paneel.leegpaneel.uitleg-open .uitleg{display:block;}
.opzet.ingericht .paneel.leegpaneel .paneelvoet{
  border-top:0; background:transparent; padding:0 14px 11px;
}
.opzet.ingericht .paneel.leegpaneel .paneelknop{
  background:var(--papier); color:var(--inkt-2); border-color:var(--lijn);
}
.opzet.ingericht .paneel.leegpaneel .paneelknop:hover{
  background:var(--band); color:var(--inkt); border-color:var(--inkt-3);
}
/* "nog geen" staat alleen in de ingeklapte stand; uitgeklapt zegt de lijst
   eronder het al. */
.paneel .nogniets{display:none; font-weight:400; color:var(--inkt-3); font-size:12.5px;}
.opzet.ingericht .paneel.leegpaneel .nogniets{display:inline;}
.opzet.ingericht .paneel.leegpaneel .telling-klein{display:none;}

/* Weggooien: onder een streep, zonder eigen kopbalk. Het stond in een paneel
   met dezelfde zwarte kop als "Areas", en woog daarmee even zwaar als iets wat
   je elke dag gebruikt. */
.weggooivak{margin-top:30px; padding-top:16px; border-top:1px solid var(--lijn);}
.weggooivak .titel{
  margin:0 0 4px; font-size:13.5px; font-weight:600; color:var(--signaal);
}
.weggooivak p{margin:0 0 11px; font-size:13px; color:var(--inkt-3); max-width:70ch;}
.gevaarknop{border-color:var(--signaal); color:var(--signaal);}
.gevaarknop:hover{background:var(--signaal-zacht); border-color:var(--signaal);}

/* ---------- snel invoeren ---------- */
.snelrij{display:grid; gap:10px; align-items:end;
  grid-template-columns:130px 90px 90px 1fr 1fr 1.4fr 1fr 120px auto;}
.snelrij .veld{margin:0;}
@media (max-width:1100px){.snelrij{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}}
/* ---------------------------------------------------------------- vakken
   Beheer -> Disciplines: één regel per vaknaam, over alle planningen heen.
   De kolommen zijn klikbaar om te sorteren; welke actief is staat in het
   webadres, zodat je een gesorteerd overzicht kunt doorsturen.

   De kleurmatrix en het wijzigblokje zitten in een <details>. Veertig stalen
   maal veertig vakken zou de pagina onwerkbaar maken; zo bouwt de browser ze
   pas op als je er een opent. */
table.vakken{width:100%; border-collapse:collapse; font-size:14px; margin:18px 0 8px;}
table.vakken th{
  text-align:left; padding:0 12px 7px 0; border-bottom:1px solid var(--lijn);
  font:500 10.5px/1.4 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-3); white-space:nowrap;
}
table.vakken th a{color:inherit; text-decoration:none;}
table.vakken th a:hover{color:var(--inkt);}
table.vakken th.gesorteerd a{color:var(--inkt);}
table.vakken td{
  padding:6px 12px 6px 0; border-bottom:1px solid var(--band); vertical-align:top;
}
table.vakken td.getal{
  text-align:right; font-variant-numeric:tabular-nums; color:var(--inkt-2);
  white-space:nowrap; padding-right:18px;
}
table.vakken th.rechts{text-align:right; padding-right:18px;}
table.vakken td.engels{color:var(--inkt-2);}
table.vakken .variant{
  display:block; font-size:12px; color:var(--inkt-3);
}
table.vakken .kleurkop,table.vakken td.kleurcel{width:1%; padding-right:14px;}
table.vakken td.kleurcel .stip{
  display:inline-block; width:16px; height:16px; border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); vertical-align:middle;
}
table.vakken summary{cursor:pointer; list-style:none;}
table.vakken summary::-webkit-details-marker{display:none;}
/* `vakacties` en niet `acties`: die klassenaam bestaat al in de planningtabel
   en staat daar op display:none tot de bewerkstand aangaat (zie boven). Deze
   tabel erfde dat, en dan is de knop er wel maar zie je hem niet — precies de
   valkuil die verderop in dit bestand al een keer opgeschreven staat.

   Geen width:1% hier: dan knijpt de browser de kolom tot nul zodra de namen
   ernaast lang zijn. */
table.vakken td.vakacties{width:88px; white-space:nowrap;}
/* De uitklapvensters hangen aan hun eigen cel; zonder dit hangen ze aan de
   pagina en staan ze bij de eerste rij die je opent op de verkeerde plek. */
table.vakken details{position:relative;}
table.vakken td.vakacties summary{font-size:13px; color:var(--inkt-2);}
table.vakken td.vakacties summary:hover{color:var(--inkt);}
.kleurvenster,.regelvenster{
  position:absolute; z-index:20; margin-top:6px;
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--radius); padding:12px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.14);
}
.kleurvenster{width:max-content; left:0;}
.kleurvenster .kleurmatrix{
  display:grid; grid-template-columns:repeat(8, 26px); gap:4px; margin-top:8px;
}
.kleurvenster .kleurstaal{
  height:26px; padding:0; border:0; cursor:pointer;
  border-radius:var(--radius); background:var(--staal);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.kleurvenster .kleurstaal .naam{position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%);}
.kleurvenster .kleurstaal:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px var(--lijn);}
.kleurvenster .kleurstaal.nu{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),
             0 0 0 2px var(--papier), 0 0 0 4px var(--staal);
}
.regelvenster{width:min(320px, 80vw); right:0; white-space:normal;}
.regelvenster label{display:block; margin:0 0 8px;
  font:500 10.5px/1.6 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-2);}
.regelvenster input,.regelvenster select{
  display:block; width:100%; margin-top:3px; font:14px/1.4 inherit; padding:6px 8px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--invoer); color:var(--inkt); text-transform:none; letter-spacing:0;
}
.regelvenster .uitleg{font-size:12px; color:var(--inkt-3); margin:6px 0 0;}
.regelvenster form + form{margin-top:14px; padding-top:14px; border-top:1px solid var(--band);}

/* De hele tabel is één formulier: elk vakje is een invoerveld en onderaan
   staat één knop. Ze mogen niet als invoervelden schreeuwen — dan is de tabel
   niet meer te lezen — dus ze krijgen pas een rand als je erin gaat staan of
   er met de muis overheen komt. */
/* De twee naamkolommen krijgen de ruimte; de tellingen ernaast zijn smal en
   de namen zijn lang. Zonder dit staat er "Decor, scenografie en grote-doek
   stretchconstru" in een vakje van tweehonderd pixels. */
table.vakken.bewerkbaar td.naamcel,
table.vakken.bewerkbaar th:nth-child(2),
table.vakken.bewerkbaar th:nth-child(3){width:33%;}
table.vakken.bewerkbaar td.naamcel{padding-right:10px;}
table.vakken.bewerkbaar td.naamcel input{
  width:100%; min-width:110px; font:14px/1.4 inherit; padding:4px 6px;
  border:1px solid transparent; border-radius:var(--radius);
  background:transparent; color:var(--inkt);
}
table.vakken.bewerkbaar td.naamcel input:hover{border-color:var(--band);}
table.vakken.bewerkbaar td.naamcel input:focus{
  outline:0; border-color:var(--balk); background:var(--invoer);
}
table.vakken.bewerkbaar td.engels input{color:var(--inkt-2);}
/* De radiovakjes zelf zijn onzichtbaar; het gekleurde vlak eromheen is de
   knop. Zo reist de keuze mee met het grote formulier, ook zonder javascript. */
.kleurvenster .kleurstaal{display:block; position:relative;}
.kleurvenster .kleurstaal input{
  position:absolute; width:100%; height:100%; inset:0; margin:0;
  opacity:0; cursor:pointer;
}
.kleurvenster .kleurstaal:has(input:checked){
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),
             0 0 0 2px var(--papier), 0 0 0 4px var(--staal);
}
.kleurvenster .kleurstaal:focus-within{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px var(--balk);
}
.opslaanbalk{
  position:sticky; bottom:0; z-index:15; display:flex; gap:14px;
  align-items:center; flex-wrap:wrap; margin-top:2px; padding:14px 0 16px;
  background:var(--papier); border-top:1px solid var(--lijn);
}
/* De balk plakt onderaan; zonder deze ruimte staat hij over de laatste regel
   van de tabel heen en kun je die niet meer bewerken. */
table.vakken.bewerkbaar{margin-bottom:0;}
table.vakken.bewerkbaar tbody tr:last-child td{padding-bottom:14px;}
.opslaanbalk .uitleg{font-size:12.5px; color:var(--inkt-3);}
.verborgenform{display:none;}

@media (max-width:700px){
  .kleurvenster,.regelvenster{position:static; box-shadow:none;}
  table.vakken td.getal{padding-right:8px;}
  table.vakken.bewerkbaar td.naamcel input{border-color:var(--band);}
}

table.recent{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:24px;}
table.recent td{padding:5px 9px; border-bottom:1px solid var(--band);}
table.recent td.tijd{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--inkt-2);}

/* =====================================================================
   Aanmelden
   ===================================================================== */

.aanmeldscherm{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--vlak);
}
.aanmeldkaart{
  width:100%; max-width:352px; background:var(--papier);
  border:1px solid var(--lijn); padding:34px 30px 30px;
}
/* Het volledige logo, mét payoff. Het bronbestand is zwarte inkt op
   transparant — goed op de lichte kaart, onzichtbaar op de donkere. Alleen in
   het donkere thema keren we hem om; dat is dezelfde truc als in de kopbalk en
   bewust geen tweede bestand.

   Nadrukkelijk niet in het grijze thema: dat heet wel grijs, maar het is een
   lícht thema (--papier is #E6E4DF met donkere inkt). Daar omgekeerd stond het
   logo wit op lichtgrijs en was het onleesbaar. De regel hoort bij de kleur van
   de ondergrond, niet bij de naam van het thema. */
.aanmeldlogo{width:176px; height:auto; display:block; margin-bottom:24px;}
:root[data-thema="donker"] .aanmeldlogo{filter:invert(1); opacity:.92;}
.aanmeldkaart h1{
  margin:0; font-size:34px; font-weight:700; line-height:1.05;
  letter-spacing:.02em; text-transform:uppercase;
}
.aanmeldkaart h1 .o{color:var(--ordo-rood);}
/* Iets meer lucht dan de 2px van eerder: ORDO is nu een stuk groter en de
   regel eronder plakte ertegenaan. */
.aanmeldkaart .onder{margin:7px 0 24px; color:var(--inkt-3); font-size:13.5px;}
.aanmeldkaart .veld input{width:100%;}
.bewerkstand .tl-ruit{cursor:grab;}
/* Shift + slepen trekt een ruit uit tot een blok. Zolang je sleept groeit deze
   schaduw mee vanaf de ruit; de echte balk tekent de server erna. Geen
   muisgebeurtenissen: je sleept de ruit, niet dit vlak. */
.tl-rekschaduw{
  position:absolute; top:7px; height:12px; border-radius:2px;
  background:var(--inkt); opacity:.28; pointer-events:none;
}
.bewerkstand .tl-ruit.sleept{cursor:grabbing; box-shadow:0 0 0 2px var(--papier),0 0 0 3px var(--balk);}

/* ---------- lege invoerregel onderaan een dag ---------- */
tr.nieuwregel{display:none;}
.bewerkstand tr.nieuwregel{display:table-row;}
tr.nieuwregel td{background:var(--vlak); border-bottom:1px solid var(--lijn);}
.nieuwknop{
  border:1px dashed var(--lijn); background:transparent; cursor:pointer;
  font:inherit; font-size:13px; color:var(--inkt-3);
  padding:4px 12px; border-radius:var(--radius); width:100%; text-align:left;
}
.nieuwknop:hover{border-color:var(--inkt-3); color:var(--inkt); background:var(--papier);}
tr.nieuwregel.open td{padding:4px 6px; background:var(--invoer);}
tr.nieuwregel.open input{
  width:100%; font:14px/1.3 inherit; padding:5px 7px;
  border:1px solid var(--lijn); border-radius:var(--radius); background:var(--papier);
}
tr.nieuwregel.open input:focus{outline:0; border-color:var(--balk); background:var(--invoer);}
/* De start- en eindtijd staan in smalle kolommen (58 px). Met het celwit én de
   standaard invoerpadding erbij bleef er te weinig over voor "08:00" en werd de
   laatste "0" afgeknepen tot "08:0". Voor déze twee cellen dus minder wit en
   minder padding, zodat de hele tijd past. */
tr.nieuwregel.open td.tijd{padding-left:2px; padding-right:2px;}
tr.nieuwregel.open td.tijd input{padding-left:3px; padding-right:2px;}
/* En de hint zelf een maatje kleiner. "8 of 830" is langer dan "08:00" en werd
   afgekapt tot "8 of 83" — een tijd die niet bestaat, en dus een hint die je
   laat twijfelen in plaats van helpt. De getypte tijd houdt zijn eigen grootte. */
tr.nieuwregel.open td.tijd input::placeholder{font-size:11.5px;}
tr.nieuwregel.bezig{opacity:.5;}

/* kopiëren met Alt ingedrukt */
tr.sleept.kopieert{opacity:.6; outline:1px dashed var(--gereed);}
/* Op de tijdlijn: een balk die als kopie versleept wordt krijgt een stippellijn
   en een plusje, zodat je vóór het loslaten ziet dat het origineel blijft staan. */
/* De greep vooraan een regel op de tijdlijn, en de lege strook als pakplek.
   Alleen in de bewerkstand. Zie bewerken.js (pointerdown op de tijdlijn). */
.tl-greep-rij{display:none;}
body.bewerkstand .tl-greep-rij{
  display:inline-block; width:14px; margin-right:4px; text-align:center;
  color:var(--inkt-3); cursor:grab; user-select:none; touch-action:none;
}
body.bewerkstand .tl-rij:hover .tl-greep-rij{color:var(--inkt);}
body.bewerkstand .tl-rij[data-regel] .tl-spoor{cursor:grab;}
body.bewerkstand .tl-rij[data-regel] .tl-spoor:active{cursor:grabbing;}

/* Engels en opmerking achter de omschrijving in een balk: lichter, zodat de
   omschrijving voorop blijft. */
.tl-bij{font-weight:400; opacity:.78;}
.tl-bij.tl-vertaling{font-style:italic;}
.tl-balk.kopieert{outline:2px dashed var(--inkt); outline-offset:1px;}
.tl-balk.kopieert::before{
  content:"+"; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  font:700 13px/1 var(--cijfers); color:var(--inkt);
}

/* =====================================================================
   Toetsenbord: cursor, selectie, menu en overlays
   ===================================================================== */

/* De cursorregel is waar het toetsenbord staat; de selectie is waar een
   handeling op werkt. Twee dingen, dus twee tekens: een streep links en een
   lichte achtergrond. */
.bewerkstand tr[data-regel].cursor > td{box-shadow:inset 0 -1px 0 var(--inkt-3);}
.bewerkstand tr[data-regel].cursor > td:first-child{
  box-shadow:inset 3px 0 0 var(--inkt), inset 0 -1px 0 var(--inkt-3);
}
.bewerkstand tr[data-regel].gekozen > td{background:#EDEFF4;}
.bewerkstand tr[data-regel].gekozen.cursor > td{background:#E4E8F0;}

/* Dezelfde aanwijzing op de tijdlijn. Die ontbrak volledig, en dat is waarom
   Rudy meldde dat de cursortoetsen daar "helemaal niet werken": ze wérkten wel
   — pijltjes, Shift+pijl, Ctrl+A, Ctrl+klik, ik heb ze stuk voor stuk gemeten —
   maar er veranderde niets op het scherm. Een selectie die je niet ziet is geen
   selectie.

   Op een rij in plaats van op de cellen, want een `.tl-rij` is een grid en geen
   tabelrij. Het streepje links is breder dan in de lijst: daar staat de cursor
   naast een kolom met tekst, hier naast een naam die vaak kort is. */
.bewerkstand .tl-rij[data-regel].gekozen{background:#EDEFF4;}
.bewerkstand .tl-rij[data-regel].gekozen.cursor{background:#E4E8F0;}
.bewerkstand .tl-rij[data-regel].cursor{
  box-shadow:inset 3px 0 0 var(--balk), inset 0 -1px 0 var(--inkt-3);
}
:root[data-thema="donker"] .bewerkstand .tl-rij[data-regel].gekozen{background:#232C3A;}
:root[data-thema="donker"] .bewerkstand .tl-rij[data-regel].gekozen.cursor{background:#2A3548;}
:root[data-thema="donker"] .bewerkstand .tl-rij[data-regel].cursor{
  box-shadow:inset 3px 0 0 #fff, inset 0 -1px 0 var(--inkt-3);
}

/* Geknipte regels. Knippen doet meteen niets — het origineel verdwijnt pas
   als je plakt — en zonder dit zie je dus niet wat er op het klembord staat,
   of dat er iets op staat. Half doorzichtig en een streep erdoor: de regel is
   er nog, maar hij staat op vertrekken. Alleen kleur zou te weinig zijn op een
   regel die al een markering heeft. */
.bewerkstand tr[data-regel].geknipt > td,
.bewerkstand .tl-rij[data-regel].geknipt{opacity:.5;}
.bewerkstand tr[data-regel].geknipt td[data-veld] ,
.bewerkstand .tl-rij[data-regel].geknipt .tl-naam{text-decoration:line-through;}
.bewerkstand .tl-rij[data-regel].geknipt .tl-balk,
.bewerkstand .tl-rij[data-regel].geknipt .tl-ruit{
  outline:1px dashed var(--inkt-3); outline-offset:1px;
}

/* De naamkolom links blijft bij een brede tijdlijn staan en heeft daarvoor een
   eigen achtergrond. Die schilderde over de selectiekleur van de rij heen — je
   zag het spoor wel oplichten en de namen niet — en verborg ook het streepje
   van de cursor, want een `inset` schaduw van de rij ligt onder de
   achtergronden van zijn kinderen. Dus krijgt de naamkolom dezelfde kleur, en
   staat het streepje op de kolom zelf. */
.bewerkstand .tl-rij[data-regel].gekozen .tl-naam{background:#EDEFF4;}
.bewerkstand .tl-rij[data-regel].gekozen.cursor .tl-naam{background:#E4E8F0;}
.bewerkstand .tl-rij[data-regel].cursor .tl-naam{
  box-shadow:inset 3px 0 0 var(--balk);
}
:root[data-thema="donker"] .bewerkstand .tl-rij[data-regel].gekozen .tl-naam{background:#232C3A;}
:root[data-thema="donker"] .bewerkstand .tl-rij[data-regel].gekozen.cursor .tl-naam{background:#2A3548;}
:root[data-thema="donker"] .bewerkstand .tl-rij[data-regel].cursor .tl-naam{
  box-shadow:inset 3px 0 0 #fff;
}

/* ---------- rechtermuismenu ---------- */
.ordo-menu{
  position:fixed; z-index:80; min-width:190px; padding:4px;
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  display:flex; flex-direction:column;
}
.ordo-menu button{
  font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
  background:transparent; border:0; padding:6px 10px; border-radius:var(--radius);
  color:var(--inkt);
}
.ordo-menu button:hover{background:var(--vlak);}
.ordo-menu button.gevaar{color:var(--signaal);}
.ordo-menu button.gevaar:hover{background:var(--signaal-zacht);}

/* ---------- overlays: bevestigen en sneltoetsen ---------- */
.ordo-overlaag{
  position:fixed; inset:0; z-index:90; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(20,19,15,.42);
}
.ordo-doos{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.3); padding:20px 22px; max-width:420px; width:100%;
}
.ordo-doos.breed{max-width:560px;}
.ordo-doos h2{margin:0 0 12px; font-size:16px; letter-spacing:.02em;}
.ordo-doos .vraag{margin:0 0 6px; font-size:15px;}
.ordo-doos .waarschuwing{margin:0 0 16px; font-size:13px; color:var(--signaal);}
.ordo-doos .waarschuwing:empty{display:none;}
.ordo-doos .knoppen{display:flex; gap:8px; justify-content:flex-end; margin-top:14px;}
.ordo-doos .klein{font-size:12.5px; color:var(--inkt-3); margin:14px 0 0;}
table.toetsen{width:100%; border-collapse:collapse;}
table.toetsen td{padding:4px 6px; font-size:13.5px; vertical-align:top;}
table.toetsen td:first-child{width:190px; white-space:nowrap;}
kbd{
  display:inline-block; font:12.5px var(--cijfers); background:var(--vlak);
  border:1px solid var(--lijn); border-bottom-width:2px; border-radius:3px;
  padding:1px 6px; color:var(--inkt-2);
}

/* =====================================================================
   Opmaak per regel
   =====================================================================
   Drie lagen, en die mogen elkaar niet in de weg zitten:
     1. het type  — wát de regel is (mijlpaal, kritiek, informatief)
     2. vet       — de planner zet hem dik omdat het er vandaag toe doet
     3. markering — een kleurstreep links, los van de betekenis
   De markering kleurt daarom alleen de rand en een zweem achtergrond, zodat
   een gemarkeerde mijlpaal nog steeds een mijlpaal blijft.
   ------------------------------------------------------------------- */

tr.vet td{font-weight:700;}
tr.cursief td{font-style:italic;}
table.planning tr[class*="mark-"] > td:first-child{position:relative;}
table.planning tr[class*="mark-"] > td:first-child::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--merk-kleur);
}
tr[class*="mark-"] > td{background:var(--merk-tint) !important;}

/* Negen kleuren, één per cijfertoets. Elke kleur bestaat twee keer: een volle
   kleur voor de streep en de tekst, en een lichte tint voor het regelvlak. */
tr.mark-geel,.tl-rij.mark-geel,.tl-balk.mark-geel,.tl-ruit.mark-geel{--merk-kleur:#C9A227; --merk-tint:#FBF3D8;}
tr.mark-oranje,.tl-rij.mark-oranje,.tl-balk.mark-oranje,.tl-ruit.mark-oranje{--merk-kleur:#C2701C; --merk-tint:#FBEBDA;}
tr.mark-rood,.tl-rij.mark-rood,.tl-balk.mark-rood,.tl-ruit.mark-rood{--merk-kleur:#B7302A; --merk-tint:#F8E1DF;}
tr.mark-roze,.tl-rij.mark-roze,.tl-balk.mark-roze,.tl-ruit.mark-roze{--merk-kleur:#9A2F6B; --merk-tint:#F7E1EE;}
tr.mark-paars,.tl-rij.mark-paars,.tl-balk.mark-paars,.tl-ruit.mark-paars{--merk-kleur:#6B4E9B; --merk-tint:#EAE4F6;}
tr.mark-blauw,.tl-rij.mark-blauw,.tl-balk.mark-blauw,.tl-ruit.mark-blauw{--merk-kleur:#1F5FA8; --merk-tint:#E1EAF6;}
tr.mark-turkoois,.tl-rij.mark-turkoois,.tl-balk.mark-turkoois,.tl-ruit.mark-turkoois{--merk-kleur:#0F8A7E; --merk-tint:#DDF0EE;}
tr.mark-groen,.tl-rij.mark-groen,.tl-balk.mark-groen,.tl-ruit.mark-groen{--merk-kleur:#4A7C59; --merk-tint:#E4F0E6;}
tr.mark-grijs,.tl-rij.mark-grijs,.tl-balk.mark-grijs,.tl-ruit.mark-grijs{--merk-kleur:#6B6250; --merk-tint:#ECEAE4;}

/* De tekstkleur staat los van de regelmarkering: een gele regel mag rode tekst
   hebben. De hele regel kleurt mee — tijd, area, discipline, bedrijf en tekst —
   want een halfgekleurde regel leest als een fout. Alleen het statuslabel houdt
   zijn eigen kleur, dat is een signaal en geen opmaak. */
tr[class*="tekst-"] > td{color:var(--tekst-kleur) !important;}
tr[class*="tekst-"] .status{color:var(--inkt-3) !important;}
tr[class*="tekst-"] .status[class*="st-"]{color:var(--st-kleur) !important;}
tr.tekst-geel,.tl-rij.tekst-geel{--tekst-kleur:#9A7A12;}
tr.tekst-oranje,.tl-rij.tekst-oranje{--tekst-kleur:#C2701C;}
tr.tekst-rood,.tl-rij.tekst-rood{--tekst-kleur:#B7302A;}
tr.tekst-roze,.tl-rij.tekst-roze{--tekst-kleur:#9A2F6B;}
tr.tekst-paars,.tl-rij.tekst-paars{--tekst-kleur:#6B4E9B;}
tr.tekst-blauw,.tl-rij.tekst-blauw{--tekst-kleur:#1F5FA8;}
tr.tekst-turkoois,.tl-rij.tekst-turkoois{--tekst-kleur:#0F8A7E;}
tr.tekst-groen,.tl-rij.tekst-groen{--tekst-kleur:#3C6B49;}
tr.tekst-grijs,.tl-rij.tekst-grijs{--tekst-kleur:#6B6250;}

/* In de tijdlijn krijgt een gemarkeerde balk een randje in dezelfde kleur;
   de vulling blijft van de discipline, anders klopt de legenda niet meer. */
.tl-balk[class*="mark-"],.tl-ruit[class*="mark-"]{
  outline:2px solid var(--merk-kleur); outline-offset:1px;
}

/* En de hele regel kleurt mee, precies als in de lijst. Dat deed hij niet: een
   markering gaf alleen een randje om de balk en een tekstkleur deed op de
   tijdlijn helemaal niets — je drukte op Shift+3 en er gebeurde zichtbaar
   niets. Rudy: "moeten die kleuren in tijdlijn niet gewoon hetzelfde doen als
   in de lijst, dus de hele regel kleuren en de gehele tekst kleuren?" Ja.

   De tint moet ook op de naamkolom staan: die is bij een brede tijdlijn
   `sticky` met een eigen achtergrond en schildert anders over de regel heen.
   Hetzelfde geldt voor de streep links — dezelfde vier pixels als in de lijst,
   maar als `::before` en niet als `box-shadow`, want die plek is op de
   naamkolom al bezet door de cursor en het voorstelmerk.

   En `!important`, om dezelfde reden als in de lijst: anders wint de
   selectiekleur van de markering, en dan kleur je een regel die je net hebt
   aangewezen en zie je er niets van tot je ergens anders klikt. Precies de
   vergissing waarvan je denkt dat de toets stuk is. De cursor blijft wél te
   zien: die is een streep en geen vlak. */
.tl-rij[class*="mark-"],
.tl-rij[class*="mark-"] .tl-naam{background:var(--merk-tint) !important;}
/* Hier stond `position:relative` op de naamkolom, om de streep hieronder een
   houvast te geven. Dat was precies één woord te veel: bij een brede tijdlijn
   is diezelfde kolom `position:sticky`, en relative won. Gevolg: schoof je opzij,
   dan bleef de naamkolom van een gemarkeerde regel niet staan maar schoof hij
   mee naar links het beeld uit, en kwamen de balken van die regel over de
   namen van de regels erboven te liggen.
   `sticky` is zelf een gepositioneerd element, dus de `::before` hieronder heeft
   aan de sticky-regel genoeg — er hoeft hier niets te staan. */
.tl-rij[class*="mark-"] .tl-naam::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--merk-kleur);
}

/* De tekstkleur pakt alles wat op de regel staat: de discipline en het bedrijf
   links, en de losse tekst naast een ruit.

   Het opschrift ín een balk krijgt hem niet, en dat is een bewuste
   uitzondering. Een balk heeft een eigen vulling — de kleur van de discipline —
   en de letterkleur daarop is berekend zodat hij leesbaar blijft (wit op
   donker, zwart op licht). Zet je daar de tekstkleur overheen, dan staat er
   blauw op blauw: ik heb het gebouwd, en op de tijdlijn was de tekst op de
   balk daarna niet meer te lezen. In de lijst speelt dat niet, want daar ligt
   de tekst op een lichte tint en niet op een volvlak. */
.tl-rij[class*="tekst-"] .tl-naam,
.tl-rij[class*="tekst-"] .tl-naam small,
.tl-rij[class*="tekst-"] .tl-losse-tekst{color:var(--tekst-kleur);}
.tl-balk.vet{font-weight:700;}
.tl-balk.cursief,.tl-losse-tekst.cursief{font-style:italic;}

/* het kleurenrijtje in het rechtermuismenu */
.ordo-menu .kleuren{display:flex; gap:3px; padding:4px 10px; align-items:center;}
.ordo-menu .kleurlabel{
  font:500 9.5px/1 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-3); width:34px; flex:none;
}
.ordo-menu .kleuren button{
  width:19px; height:19px; padding:0; border:1px solid var(--lijn); border-radius:3px;
  flex:none;
}
.ordo-menu .kleuren button.leeg{background:var(--papier); color:var(--inkt-3); font-size:13px;}
.ordo-menu .scheiding{height:1px; background:var(--lijn); margin:4px 6px;}

/* ---------- de statuskiezer ----------
   Toets S, of "Status kiezen" in het rechtermuismenu. Eén regel per status van
   dit project, met de stip in dezelfde kleur als het statuslabel in de lijst en
   het cijfer waarmee je hem pakt. De aangewezen regel is waar de pijltjes staan;
   `actief` is wat er nú op de regel staat. */
.statuskiezer{min-width:212px;}
.statuskiezer .kleurlabel{width:auto; padding:5px 10px 4px;}
.statuskiezer .statuskeuze{display:flex; align-items:center; gap:8px;}
.statuskiezer .stip{
  width:10px; height:10px; border-radius:2px; flex:none;
  border:1px solid rgba(0,0,0,.12); background:var(--inkt-3);
}
.statuskiezer .statuskeuze .naam{flex:1 1 auto;}
.statuskiezer .statuskeuze kbd{font-size:10.5px; padding:0 4px; opacity:.65;}
.statuskiezer .statuskeuze.actief .naam{font-weight:600;}
.statuskiezer .statuskeuze.aangewezen{
  background:var(--vlak); box-shadow:inset 2px 0 0 var(--balk);
}

/* De kleurstip van een vast blok of een status in het opzetscherm. Alle negen,
   zodat de stip klopt met de kleur die in de planning te zien is. */
.paneel li .stip.mark-geel,.statuskiezer .stip.mark-geel{background:#C9A227;}
.paneel li .stip.mark-oranje,.statuskiezer .stip.mark-oranje{background:#C2701C;}
.paneel li .stip.mark-rood,.statuskiezer .stip.mark-rood{background:#B7302A;}
.paneel li .stip.mark-roze,.statuskiezer .stip.mark-roze{background:#9A2F6B;}
.paneel li .stip.mark-paars,.statuskiezer .stip.mark-paars{background:#6B4E9B;}
.paneel li .stip.mark-blauw,.statuskiezer .stip.mark-blauw{background:#1F5FA8;}
.paneel li .stip.mark-turkoois,.statuskiezer .stip.mark-turkoois{background:#0F8A7E;}
.paneel li .stip.mark-groen,.statuskiezer .stip.mark-groen{background:#4A7C59;}
.paneel li .stip.mark-grijs,.statuskiezer .stip.mark-grijs{background:#6B6250;}
.paneel li .stip.geen-kleur,.statuskiezer .stip.geen-kleur{border:1px dashed var(--lijn); background:transparent;}

/* ---------- voorzetjes onder een tekstveld ---------- */
.voorzetjes{
  position:fixed; z-index:85; max-width:560px;
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(0,0,0,.18); padding:3px;
  display:flex; flex-direction:column; max-height:240px; overflow:auto;
}
.voorzetjes button{
  display:flex; gap:10px; align-items:baseline; text-align:left;
  font:inherit; font-size:13.5px; background:transparent; border:0; cursor:pointer;
  padding:5px 8px; border-radius:var(--radius); color:var(--inkt);
}
.voorzetjes button .tekst{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.voorzetjes button .teller{font:500 10.5px/1 var(--cijfers); color:var(--inkt-3);}
.voorzetjes button:hover,.voorzetjes button.aan{background:var(--vlak);}

/* ---------- beheer ---------- */
.paneel li.uit{opacity:.5;}
ul.bibliotheek li.kopje{
  font:500 10.5px/1 var(--cijfers); letter-spacing:.13em; text-transform:uppercase;
  color:var(--inkt-3); background:var(--vlak); padding:7px 14px;
}
/* Een zin uit de bibliotheek staat op één regel met een beletselteken erachter.
   `min-width:0` hoort erbij: zonder dat krimpt een flex-item nooit onder zijn
   eigen tekstbreedte, en dan duwde één lange werkzaamheid de hele beheerpagina
   op een telefoon achttien pixels naar rechts. De harde 340px is nu een
   bovengrens, niet ook een ondergrens. */
ul.bibliotheek li .zin{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  /* Neem de ruimte die overblijft naast de teller, en niet meer. Eerder stond
     hier een harde 340px; op een telefoon is dat breder dan het paneel en dan
     duwde één lange werkzaamheid de hele beheerpagina naar rechts. `min-width:0`
     hoort erbij: zonder dat krimpt een flex-item nooit onder zijn eigen
     tekstbreedte, hoe smal het scherm ook is. */
  flex:1 1 auto; min-width:0; max-width:340px;
}

/* Engelse kolom: staat naast het Nederlands, niet in plaats daarvan. Iets
   lichter, zodat de NL-tekst de hoofdtekst blijft. */
td.werk.engels{color:var(--inkt-2);}
td.werk.engels:empty::after{content:"—"; color:var(--lijn);}

/* een rijtje aankruisvakjes in een formulier (welke vaste blokken) */
.veld ul{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px;}
.veld ul li label{display:flex; align-items:center; gap:8px; font-weight:400; font-size:14px;
  text-transform:none; letter-spacing:0; color:var(--inkt);}
.veld ul li input{width:auto;}

/* ---------- tijdveld: typ 8, krijg 08:00 ---------- */
input.tijdvak{
  font:500 13.5px/1.4 var(--cijfers) !important;
  font-variant-numeric:tabular-nums; text-align:left;
}
input.tijdvak.fout{
  box-shadow:inset 0 0 0 2px var(--signaal) !important; background:var(--signaal-zacht) !important;
}

/* ---------- selectie bewerken ---------- */
.ordo-doos .veld{margin-bottom:12px;}
.ordo-doos .veld label{
  display:block; font:500 10.5px/1 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-2); margin-bottom:5px;
}
.ordo-doos .veld input,
.ordo-doos .veld select{
  width:100%; font:14px/1.3 inherit; padding:7px 9px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt);
}
.ordo-doos .veld input:focus,
.ordo-doos .veld select:focus{outline:0; border-color:var(--balk);}

/* Acht velden onder elkaar, elk met een vinkje ervoor: alleen wat aanstaat
   gaat mee. Een raster van drie kolommen (vinkje, etiket, invoer) houdt de
   invoervakken op één lijn ongeacht hoe lang het woord ervoor is. De hint
   staat in de derde kolom en verschijnt pas als de regel aanstaat — acht
   hints tegelijk maakt er een lap tekst van. */
.ordo-doos .bulklijst{
  display:grid; grid-template-columns:auto minmax(80px,120px) 1fr;
  gap:4px 10px; align-items:center; margin-top:4px;
  max-height:min(56vh, 460px); overflow-y:auto;
}
.ordo-doos .bulkregel{display:contents;}
.ordo-doos .bulkregel input[type="checkbox"]{
  width:15px; height:15px; margin:0; accent-color:var(--balk); cursor:pointer;
}
.ordo-doos .bulketiket{
  font:500 10.5px/1.2 var(--cijfers); letter-spacing:.11em;
  text-transform:uppercase; color:var(--inkt-3); cursor:pointer;
  padding:8px 0; margin:0;
}
.ordo-doos .bulkregel.is-aan .bulketiket{color:var(--inkt);}
.ordo-doos .bulkinvoer{padding:3px 0;}
.ordo-doos .bulkinvoer input,
.ordo-doos .bulkinvoer select{
  width:100%; font:14px/1.3 inherit; padding:6px 9px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt); opacity:.62;
  transition:opacity .12s, border-color .12s;
}
.ordo-doos .bulkregel.is-aan .bulkinvoer input,
.ordo-doos .bulkregel.is-aan .bulkinvoer select{opacity:1; border-color:var(--inkt-3);}
.ordo-doos .bulkinvoer input:focus,
.ordo-doos .bulkinvoer select:focus{outline:0; opacity:1; border-color:var(--balk);}
.ordo-doos .bulkregel .hint{
  display:none; grid-column:3; margin:0 0 6px; font-size:11.5px;
}
.ordo-doos .bulkregel.is-aan .hint{display:block;}
@media (max-width:560px){
  .ordo-doos .bulklijst{grid-template-columns:auto 1fr;}
  .ordo-doos .bulkinvoer,
  .ordo-doos .bulkregel .hint{grid-column:1 / -1;}
}

/* =====================================================================
   Thema's: licht, grijs en donker
   =====================================================================
   Alle kleuren komen uit de variabelen bovenaan dit bestand. Een thema
   herdefinieert die variabelen, meer niet — zo hoeft er geen enkele regel
   verderop dubbel te bestaan. Wat hier wél apart staat, zijn de plekken waar
   een vaste kleur onvermijdelijk was: de markeertinten en het "bewaard"-groen.

   Grijs is bewust geen halfslachtig donker maar een rustiger licht thema: op
   een felle hal-monitor is puur wit vermoeiend, en op papier lijkt het meer op
   de uitdraai.
   ------------------------------------------------------------------- */

:root[data-thema="grijs"]{
  --papier:#E6E4DF;
  --vlak:#DBD8D2;
  --band:#CFCCC5;
  --lijn:#BBB7AF;
  --inkt:#17160F;
  --inkt-2:#43413A;
  --inkt-3:#6E6B63;
  --balk:#232219;
  --balk-inkt:#F0EEE9;
  --invoer:#FFFFFF;
  --gereed-zacht:#DDE8DE;
  --eigen:#6B4396;
  --eigen-zacht:#E4DDEC;
  --chiprand:#807D74;
  --chipvlak:#FFFFFF;
  color-scheme:light;
}

:root[data-thema="donker"]{
  --papier:#17181A;
  --vlak:#1F2124;
  --band:#282A2E;
  --lijn:#393C41;
  --inkt:#E8E6E1;
  --inkt-2:#BEBBB4;
  --inkt-3:#8B8880;
  --balk:#0D0E10;
  --balk-inkt:#E8E6E1;
  --signaal:#E06B63;
  --signaal-zacht:#3A2320;
  --mijlpaal:#6FA8E8;
  --mijlpaal-zacht:#1C2836;
  --gereed:#7BB98C;
  --invoer:#22242A;
  --gereed-zacht:#1E3327;
  --eigen:#B08CE0;
  --eigen-zacht:#2A2138;
  --chiprand:#6E737B;
  --chipvlak:#232629;
  color-scheme:dark;
}

/* Hier stond een lijst uitzonderingen: "plekken waar wit hard in de code
   stond". Dat was het symptoom bestrijden. Een invoerveld met `background:#fff`
   in de gewone opmaak is in het donkere thema onleesbaar — lichte letters op
   wit — en elke nieuwe witte plek moest dan opnieuw met de hand aan die lijst
   worden toegevoegd. Precies dat ging mis bij het formulier voor een nieuw
   project: notitie en de kolomnaamvelden waren over het hoofd gezien.

   Nu staat de kleur in `--invoer` en `--gereed-zacht`, en kiest elk thema zijn
   eigen waarde. De uitzonderingenlijst is daarmee overbodig. */
/* Hier stond `filter:none` voor het donkere thema. Dat was fout: de kopbalk is
   in álle drie de thema's donker (--balk is #15140F, #232219 of #0D0E10), en het
   bronbestand is zwarte inkt op transparant. Zonder de omkering stond het logo
   dus zwart op bijna-zwart en was het onzichtbaar. De omkering blijft nu overal
   staan; komt er ooit een licht thema met een lichte balk, dan hoort de regel
   bij díé balk en niet bij een themanaam. */

/* De markeringen in het donker: dezelfde negen kleuren, maar als donkere tint
   met een lichtere streep, anders is de tekst niet meer te lezen. */
:root[data-thema="donker"] tr.mark-geel,:root[data-thema="donker"] .tl-rij.mark-geel,:root[data-thema="donker"] .tl-balk.mark-geel,:root[data-thema="donker"] .tl-ruit.mark-geel{--merk-kleur:#D9B23C; --merk-tint:#332C13;}
:root[data-thema="donker"] tr.mark-oranje,:root[data-thema="donker"] .tl-rij.mark-oranje,:root[data-thema="donker"] .tl-balk.mark-oranje,:root[data-thema="donker"] .tl-ruit.mark-oranje{--merk-kleur:#D8862F; --merk-tint:#332312;}
:root[data-thema="donker"] tr.mark-rood,:root[data-thema="donker"] .tl-rij.mark-rood,:root[data-thema="donker"] .tl-balk.mark-rood,:root[data-thema="donker"] .tl-ruit.mark-rood{--merk-kleur:#D9564E; --merk-tint:#341C1A;}
:root[data-thema="donker"] tr.mark-roze,:root[data-thema="donker"] .tl-rij.mark-roze,:root[data-thema="donker"] .tl-balk.mark-roze,:root[data-thema="donker"] .tl-ruit.mark-roze{--merk-kleur:#C25592; --merk-tint:#301A26;}
:root[data-thema="donker"] tr.mark-paars,:root[data-thema="donker"] .tl-rij.mark-paars,:root[data-thema="donker"] .tl-balk.mark-paars,:root[data-thema="donker"] .tl-ruit.mark-paars{--merk-kleur:#9276C7; --merk-tint:#241E33;}
:root[data-thema="donker"] tr.mark-blauw,:root[data-thema="donker"] .tl-rij.mark-blauw,:root[data-thema="donker"] .tl-balk.mark-blauw,:root[data-thema="donker"] .tl-ruit.mark-blauw{--merk-kleur:#5B94D8; --merk-tint:#182533;}
:root[data-thema="donker"] tr.mark-turkoois,:root[data-thema="donker"] .tl-rij.mark-turkoois,:root[data-thema="donker"] .tl-balk.mark-turkoois,:root[data-thema="donker"] .tl-ruit.mark-turkoois{--merk-kleur:#3BB3A5; --merk-tint:#12302C;}
:root[data-thema="donker"] tr.mark-groen,:root[data-thema="donker"] .tl-rij.mark-groen,:root[data-thema="donker"] .tl-balk.mark-groen,:root[data-thema="donker"] .tl-ruit.mark-groen{--merk-kleur:#6FAD80; --merk-tint:#182A1D;}
:root[data-thema="donker"] tr.mark-grijs,:root[data-thema="donker"] .tl-rij.mark-grijs,:root[data-thema="donker"] .tl-balk.mark-grijs,:root[data-thema="donker"] .tl-ruit.mark-grijs{--merk-kleur:#9A958A; --merk-tint:#26262A;}

:root[data-thema="donker"] tr.tekst-geel,:root[data-thema="donker"] .tl-rij.tekst-geel{--tekst-kleur:#E0BB4A;}
:root[data-thema="donker"] tr.tekst-oranje,:root[data-thema="donker"] .tl-rij.tekst-oranje{--tekst-kleur:#E39144;}
:root[data-thema="donker"] tr.tekst-rood,:root[data-thema="donker"] .tl-rij.tekst-rood{--tekst-kleur:#E5776F;}
:root[data-thema="donker"] tr.tekst-roze,:root[data-thema="donker"] .tl-rij.tekst-roze{--tekst-kleur:#D678AB;}
:root[data-thema="donker"] tr.tekst-paars,:root[data-thema="donker"] .tl-rij.tekst-paars{--tekst-kleur:#A98FDA;}
:root[data-thema="donker"] tr.tekst-blauw,:root[data-thema="donker"] .tl-rij.tekst-blauw{--tekst-kleur:#7FB0E8;}
:root[data-thema="donker"] tr.tekst-turkoois,:root[data-thema="donker"] .tl-rij.tekst-turkoois{--tekst-kleur:#4FC7B8;}
:root[data-thema="donker"] tr.tekst-groen,:root[data-thema="donker"] .tl-rij.tekst-groen{--tekst-kleur:#89C79A;}
:root[data-thema="donker"] tr.tekst-grijs,:root[data-thema="donker"] .tl-rij.tekst-grijs{--tekst-kleur:#A8A399;}

/* Dezelfde negen kleuren, opgehelderd voor de donkere achtergrond. */
:root[data-thema="donker"] .status.st-geel    {--st-kleur:#E0BB4A;}
:root[data-thema="donker"] .status.st-oranje  {--st-kleur:#E39144;}
:root[data-thema="donker"] .status.st-rood    {--st-kleur:#E5776F;}
:root[data-thema="donker"] .status.st-roze    {--st-kleur:#D678AB;}
:root[data-thema="donker"] .status.st-paars   {--st-kleur:#A98FDA;}
:root[data-thema="donker"] .status.st-blauw   {--st-kleur:#7FB0E8;}
:root[data-thema="donker"] .status.st-turkoois{--st-kleur:#4FC7B8;}
:root[data-thema="donker"] .status.st-groen   {--st-kleur:#89C79A;}
:root[data-thema="donker"] .status.st-grijs   {--st-kleur:#A8A399;}

:root[data-thema="donker"] .bewerkstand tr[data-regel].gekozen > td{background:#232C3A;}
:root[data-thema="donker"] .bewerkstand tr[data-regel].gekozen.cursor > td{background:#2A3548;}
:root[data-thema="donker"] .ordo-overlaag{background:rgba(0,0,0,.6);}

/* het knopje in de kop */
.themaknop{min-width:56px; text-align:center;}

/* NL | EN — twee knopjes tegen elkaar aan, als één schakelaar */
.taalknop{display:flex; margin:0;}
.taalknop .knop{
  /* Geen `font:`-verkorting meer: die zette ook de regelhoogte en het lettertype
     opnieuw, en trok deze twee knopjes daarmee vier pixels lager dan de rest. */
  min-width:34px; padding:0 8px;
  font-family:var(--cijfers); font-weight:500; letter-spacing:.06em;
  cursor:pointer; background:transparent;
}
.taalknop .knop:first-of-type{border-right:0; border-radius:var(--radius) 0 0 var(--radius);}
.taalknop .knop:last-of-type{border-radius:0 var(--radius) var(--radius) 0;}
.taalknop .knop.actief{
  background:var(--balk-inkt); color:var(--balk); border-color:var(--balk-inkt);
  opacity:1; cursor:default;
}

/* =====================================================================
   Tablet en telefoon
   =====================================================================
   Ordo is gemaakt voor een breed scherm — een productieplanning ís breed. Op
   een tablet in de hal en op een telefoon onderweg moet je hem wél kunnen
   lezen. Daarom in twee stappen:

   Onder 1100px (tablet): de tabel mag horizontaal schuiven in plaats van zich
   plat te drukken, en de bedieningsbalk breekt netjes af.

   Onder 700px (telefoon): de tabel wordt een lijst van kaartjes. Elke regel is
   een blokje met de tijd groot bovenaan en de kolomnamen ervoor. Dat leest
   veel beter dan acht kolommen van twee centimeter.
   ------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .kop{flex-wrap:wrap; gap:10px 14px; padding:9px 14px;}
  /* Op een smal scherm mag de naam juist wél over de volle breedte en over
     twee regels: daar staat hij onder de knoppen en duwt hij niets weg. */
  .kop .project{width:100%; order:3; white-space:normal; overflow:visible;}
  .inhoud{padding:0 14px 60px; overflow-x:auto;}
  .balk{padding:8px 14px;}
  table.planning{min-width:860px;}
  td.werk{width:auto; min-width:260px;}
  /* 200 en niet 150: de naamkolom mag hier niet meer afbreken, dus wat er niet
     in past valt weg, en de bedrijfsnaam is juist waarop je een regel zoekt. De
     tijdlijn schuift op dit formaat toch al binnen zijn eigen kader, dus die
     paar pixels gaan niet ten koste van de pagina. */
  .tl-kop,.tl-rij{grid-template-columns:200px 1fr;}
  .tijdlijn.met-area .tl-kop,.tijdlijn.met-area .tl-rij{grid-template-columns:300px 1fr;}
  .tijdlijn{--naamkolom:200px;} .tijdlijn.met-area{--naamkolom:300px;}
  .tl-area{width:110px;}
  /* De tijdlijn schuift binnen zijn eigen kader in plaats van de pagina breder
     te maken. Een gantt ís breed; dat mag, maar niet ten koste van de rest van
     het scherm. */
  .tijdlijn{overflow-x:auto;}
}

@media (max-width: 700px) {
  body{font-size:14.5px;}
  /* Op een telefoon plakt de kopbalk niet: hij is daar twee regels hoog en zou
     een vijfde van het scherm kosten. Wat je onderweg nodig hebt staat toch al
     vooraan; de rest zit achter de menuknop. Daarom hier ook geen offset voor
     wat eronder plakt. */
  :root{--kophoogte:0px; --kopeigen:0px;}
  .kop{padding:8px 12px; position:relative;}
  .kijkstand{position:relative;}
  /* Op een telefoon mag de knoppenrij wél krimpen en over twee regels breken.
     Op een breed scherm staat er `flex:none` op — daar mag een lange
     projectnaam de knoppen niet wegduwen — maar hier zou dat betekenen dat de
     rij zo breed blijft als hij van nature is en dus rechts uit beeld loopt:
     op de tijdlijn viel "Voorstellen" er half af. Krimpen mag hier, wrappen
     doet de rest. */
  .kop .rechts{
    gap:4px; flex-wrap:wrap; justify-content:flex-end;
    flex:1 1 auto; min-width:0;
  }
  .knop,.schakel a{padding:7px 11px;}   /* aantikbaar met een duim */

  /* Wat je onderweg nodig hebt blijft staan — lijst, tijdlijn, PDF, melden of
     bewerken, en het aantal openstaande voorstellen. De rest (opzet, beheer,
     taal, thema, afmelden) doe je aan een bureau en gaat achter één knop. Dat
     scheelt op deze breedte een rij of twee knoppen, en op een telefoon is dat
     het verschil tussen wel of geen planning boven de vouw. */
  /* Alle knoppen in de kop even hoog. Zonder dit verschilt de hoogte per knop:
     de menuknop heeft een grotere letter (de drie puntjes moeten leesbaar
     blijven) en de schakelaar Lijst/Tijdlijn heeft zijn rand om twee links
     heen in plaats van om één. Een vaste hoogte met de inhoud gecentreerd
     maakt het gelijk, wat er ook in staat. */
  .kop .rechts .knop,
  .kop .rechts .schakel{
    min-height:34px; box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .kop .rechts .schakel a{display:flex; align-items:center;}
  .kop .menuknop{
    min-width:38px; font-size:17px; line-height:1; letter-spacing:2px;
  }
  /* Het poppetje is ook hier een eigen knop, vierkant en even groot als de
     knop "Meer" ernaast. Het venstertje eronder hangt aan de rechterrand van
     de balk in plaats van aan de knop, zodat het op een smal scherm niet half
     buiten beeld valt. */
  .kop .profielknop{width:38px;}
  .kop .profielmenu{right:0; min-width:190px;}
  .kop .verderop{
    display:none; position:absolute; top:100%; right:12px; z-index:70;
    background:var(--balk); border:1px solid rgba(255,255,255,.28);
    border-radius:var(--radius); box-shadow:0 10px 28px rgba(0,0,0,.4);
    padding:8px; margin-top:-2px;
    flex-direction:column; align-items:stretch; gap:6px; min-width:170px;
  }
  .kop.menu-open .verderop{display:flex;}
  /* In het menu is elke regel even breed; de taalknop en het afmeldformulier
     zijn losse formulieren en zouden anders half zo breed worden. */
  .kop .verderop .knop,
  .kop .verderop .taalknop,
  .kop .verderop .afmelden{width:100%;}
  .kop .verderop .taalknop{display:flex; gap:6px;}
  .kop .verderop .taalknop .knop{flex:1;}
  .kop .verderop .afmelden .knop{width:100%;}
}

/* Onder 480 past de rij knoppen er net niet op, en dan valt de menuknop in zijn
   eentje op een tweede regel — 37 pixels voor één knop. Iets minder ruimte
   links en rechts in de knoppen lost dat op; de hoogte blijft gelijk, dus je
   raakt ze nog steeds met een duim. */
@media (max-width: 480px) {
  .kop .rechts{gap:3px;}
  .knop,.schakel a{padding:7px 9px; font-size:12.5px;}
  /* Onder de 400 past de rij niet meer: hij vraagt 362 pixels en krijgt er op
     een toestel van 360 maar 336. Dan viel het poppetje weer naar een tweede
     regel, in zijn eentje rechts. Drie pixels van de zijkanten van elke knop en
     eentje van de tussenruimte scheelt precies genoeg — en dat is de knoppen
     smaller maken, niet de rij opbreken. Een knop uit de rij halen zou tegen
     de afspraak in gaan dat lijst, tijdlijn, PDF en bewerken staan wat je
     onderweg nodig hebt. */
  @media (max-width: 400px) {
    .kop .rechts{gap:2px;}
    .kop .rechts .knop,
    .kop .rechts .schakel a{padding-left:6px; padding-right:6px;}
  }
  /* De twee icoonknoppen aan het eind — "Meer" en het poppetje — even groot
     en vierkant. Ze stonden op 45 en 38 pixels, en met die elf pixels erbij
     paste de rij net niet meer: het poppetje viel naar een tweede regel, in
     zijn eentje rechts. Twee gelijke vierkantjes naast elkaar zien er ook uit
     als wat ze zijn: twee menu's. */
  .kop .menuknop,
  .kop .profielknop{width:34px; min-width:34px; padding:0;}
  /* En op de allersmalste toestellen — 320 pixels, de oude iPhone SE — kwam hij
     nog twee pixels tekort. Deze regel moet ná die hierboven staan: even
     specifiek, dus de laatste wint. Stond hij ervoor, en dan bleven ze 34. */
  @media (max-width: 340px) {
    .kop .menuknop,
    .kop .profielknop{width:32px; min-width:32px;}
  }
  .kop .verderop .knop{padding:8px 12px; font-size:13.5px;}
  .inhoud{padding:0 10px 70px; overflow-x:visible;}
  .balk{padding:8px 10px;}
  /* De dagenbalk schuift hier horizontaal, en `overflow-x:auto` knipt ook
     verticaal — de browser zet de andere as dan mee op auto. Het rode randje
     van de gekozen dag ligt 2 pixels buiten de knop en viel daardoor bovenaan
     en aan de zijkanten weg. Ruimte binnen de scroller in plaats van erbuiten:
     dan heeft de ring plek en blijft de balk even hoog. De eerste dag begint
     nog steeds links, want de padding hoort bij de scrollinhoud. */
  .dagen{
    overflow-x:auto; flex-wrap:nowrap;
    padding:3px 3px 6px; margin:-3px -3px -3px 0;
  }
  .dag{min-width:44px;}

  /* De tabel als kaartjes. */
  table.planning{min-width:0; display:block;}
  table.planning thead{display:none;}
  table.planning tbody{display:block;}
  table.planning tr{
    display:grid; grid-template-columns:auto 1fr; gap:2px 10px;
    padding:9px 11px; margin-bottom:7px;
    border:1px solid var(--lijn); border-radius:var(--radius);
    background:var(--papier);
  }
  table.planning tbody tr:nth-child(even) td{background:transparent;}
  table.planning td{
    display:block; border:0; padding:1px 0; grid-column:2;
  }
  table.planning td:empty{display:none;}
  /* De kolomnaam ervoor, zodat je weet waar je naar kijkt. */
  table.planning td[data-veld]::before{
    content:attr(data-kop) " ";
    font:500 9.5px/1 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
    color:var(--inkt-3); display:inline-block; min-width:74px;
  }
  table.planning td.tijd{
    grid-column:1; grid-row:1; font-size:17px; font-weight:600; align-self:start;
  }
  table.planning td.tijd::before{content:none;}
  table.planning td.tijd.eind{grid-row:2; font-size:13px; color:var(--inkt-3);}
  table.planning td.werk{grid-column:1 / -1; margin-top:4px; font-size:15px;}
  table.planning td.werk::before{content:none;}
  table.planning td.greep,
  table.planning tr.nieuwregel td.greep{display:none;}
  /* De actieknopjes staan alleen bij de regel die je hebt aangetikt. Ze bij
     elke regel tonen kostte ongeveer vijftig pixels per regel — op een dag met
     dertig regels anderhalf scherm aan knoppen die je niet gebruikt. Tikken op
     een regel zet hem open; nog eens tikken of ergens anders tikken sluit hem.
     Op een breed scherm staat de kolom er gewoon, zoals altijd. */
  table.planning td.acties{display:none;}
  table.planning tr.open-acties td.acties{
    grid-column:1 / -1; display:flex; gap:8px; margin-top:6px;
    border-top:1px dashed var(--lijn); padding-top:6px;
  }
  table.planning td.acties .mini{padding:6px 12px;}
  /* Een streepje aan de zijkant laat zien welke regel openstaat. */
  .bewerkstand table.planning tr.open-acties{box-shadow:inset 3px 0 0 var(--balk);}

  /* De meldkolom van een leverancier krijgt dezelfde behandeling als de
     actiekolom: over de volle breedte, met knoppen die je met een duim raakt.
     Op de bouwvloer wordt dit op een telefoon gebruikt, met handschoenen aan. */
  table.planning td.meldcel{
    grid-column:1 / -1; display:flex; align-items:center; gap:8px; margin-top:6px;
    border-top:1px dashed var(--lijn); padding-top:6px; width:auto;
  }
  table.planning td.meldcel::before{content:none;}
  .meldacties{gap:8px;}
  .meldacties .mini{padding:8px 16px; font-size:15px;}
  .meldvenster{width:calc(100vw - 24px); max-width:340px;}
  .meldvenster .chip{padding:8px 14px; font-size:14px;}

  /* Een voorstel onder een regel: de knoppen onder elkaar in plaats van
     rechts, anders vallen ze van het scherm af. */
  .voorstel-inhoud{flex-direction:column; align-items:flex-start; gap:8px;}
  .voorstel-knoppen{margin-left:0; width:100%;}
  .voorstel-knoppen .chip{flex:1; justify-content:center; padding:8px 10px;}
  .kijkstand{padding:8px 14px; font-size:12.5px;}
  .kijkstand .chip{margin-left:0;}
  .uitnodiglink{flex-direction:column; align-items:stretch;}
  .uitnodiglink .chip{justify-content:center;}
  tr[class*="mark-"] > td:first-child::before{width:100%; height:3px; bottom:auto;}
  /* De invoerregel is óók op een telefoon alleen zichtbaar in de bewerkstand.
     Dit stond hier eerst als `table.planning tr.nieuwregel{display:block}`, en
     dat weegt zwaarder dan de twee regels die hem hierboven verbergen — dus met
     bewerken uit stond de knop "+ regel toevoegen" er op een telefoon gewoon.
     De klasse moet dus ook hier mee, anders wint de smalle-schermregel. */
  table.planning tr.nieuwregel{display:none;}
  .bewerkstand table.planning tr.nieuwregel{display:block; padding:0; border:0;}
  table.planning tr.nieuwregel td{grid-column:1 / -1;}

  .werkbalk .hint{display:none;}   /* sneltoetsen zijn geen telefoonwerk */
  .ordo-menu{min-width:220px;}
  .ordo-doos{padding:16px;}
  /* Op een smal scherm past er in de naamkolom één naam, niet twee. Er stond
     "Licht / Rig… …" — een beletselteken waar het bedrijf hoort te staan, en
     dat zegt niets. Rudy: *"bedrijfsnaam nodig."*

     Dus houdt de discipline hier alleen haar kleurblokje over en gaat alle
     ruimte naar de bedrijfsnaam. Welke discipline dat blokje is staat in de
     filterbalk erboven, en de naam blijft in de tooltip staan. 150 pixels:
     genoeg voor "Pixelscreen" of "Led Visions" naast het blokje en de
     paperclip. Het spoor houdt er ruim over en schuift toch al. */
  .tl-kop,.tl-rij{grid-template-columns:150px 1fr;}
  .tijdlijn.met-area .tl-kop,.tijdlijn.met-area .tl-rij{grid-template-columns:220px 1fr;}
  .tijdlijn{--naamkolom:150px;} .tijdlijn.met-area{--naamkolom:220px;}
  .tl-area{width:80px;}
  .tl-naam{font-size:11px; flex-wrap:wrap; height:auto; padding-top:5px; padding-bottom:5px; line-height:normal;}
  .tl-naam .disc{display:inline-flex; line-height:normal;}
  .tl-naam .meldacties{margin-left:0; width:100%;}
  .tl-naam .meldacties .mini{padding:5px 9px;}
  .blad{padding:16px 12px;}
  /* `1fr` is kort voor `minmax(auto, 1fr)`, en die `auto` betekent: nooit
     smaller dan de inhoud. Eén lange werkzaamheid in de bibliotheek maakte de
     kolom daardoor breder dan het scherm, en dan schuift de hele pagina opzij.
     `minmax(0, 1fr)` zegt: krimp gerust, de inhoud kort zichzelf wel af. */
  .opzet{grid-template-columns:minmax(0, 1fr);}
}

/* Vingerbediening: geen zweefstand, wel een duidelijke aanraking. */
@media (hover: none) {
  .bewerkstand table.planning td[data-veld]:hover{box-shadow:none; background:transparent;}
  td.greep{font-size:19px;}
}

/* de uitklapknop van de balk bestaat alleen op smalle schermen */
.balkknop{display:none;}
@media (max-width: 700px) {
  .balkknop{display:inline-flex; margin-left:auto;}
  .balk .telling{display:none;}
  .balk .balk-rij:not(.eerste){display:none;}
  .balk.open .balk-rij:not(.eerste){display:flex;}
}

/* ---------- leverancier wisselen ---------- */
.voorbeeldvak{
  margin:20px 0 6px; padding:16px 0 0; border-top:1px solid var(--lijn);
}
.voorbeeldvak h2{font-size:16px; margin:0 0 10px;}
.samenvatting{margin:0 0 14px; line-height:1.7;}
.samenvatting .cijfer{
  font:600 15px/1 var(--cijfers); font-variant-numeric:tabular-nums;
}
table.planning.klein{font-size:13px; margin-bottom:10px;}
table.planning.klein td{padding:4px 8px;}
.waarschuwing-vak{
  margin:12px 0 0; padding:9px 12px; font-size:13.5px;
  color:var(--signaal); background:var(--signaal-zacht); border-radius:var(--radius);
}

/* een afwijkende variant van een vast blok, ingesprongen onder het blok zelf */
.paneel li.afwijking{padding-left:26px; background:var(--vlak);}
.paneel li.afwijking .stip.geen-kleur{border:1px dashed var(--lijn); background:transparent;}
.paneel li.afwijking form{margin:0;}
.paneel li .dik{font-weight:700;}

/* de opmerkingenkolom: lichter dan de werkzaamheden, want het is bijzaak */
td.opmerking{color:var(--inkt-2); font-size:13.5px;}
td.opmerking:empty::after{content:"—"; color:var(--lijn);}

/* =====================================================================
   Zoeken in de planning
   ===================================================================== */
.zoekbalk{
  position:fixed; top:0; right:18px; z-index:70; display:none;
  align-items:center; gap:8px; padding:8px 10px;
  background:var(--papier); border:1px solid var(--lijn); border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.zoekbalk.open{display:flex;}
.zoekbalk input[type=search]{min-width:260px;}
.zoekbalk .telling-zoek{
  font:500 11px/1 var(--cijfers); color:var(--inkt-3); min-width:96px;
  font-variant-numeric:tabular-nums;
}
.zoekbalk .alleen{
  display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--inkt-2);
  white-space:nowrap;
}
.zoekbalk .mini{padding:4px 8px;}

mark.zoekmark{
  background:#FFE27A; color:inherit; padding:0 1px; border-radius:2px;
}
:root[data-thema="donker"] mark.zoekmark{background:#7A6320; color:#fff;}
tr.zoekhuidig > td{box-shadow:inset 0 0 0 2px var(--balk);}
tr.zoekhuidig mark.zoekmark{background:#FFC53D;}
tr.zoekverborgen{display:none;}

@media (max-width: 700px) {
  .zoekbalk{left:8px; right:8px; flex-wrap:wrap;}
  .zoekbalk input[type=search]{min-width:0; flex:1;}
  .zoekbalk .alleen{order:3;}
}

/* ---------- spelling ----------
   Een stippellijn onder een woord is een vraag, geen fout: de controle weet
   niet zeker of het mis is. Daarom geen rode golf zoals een tekstverwerker —
   die leest als een oordeel en dan gaat iemand hem wegklikken. */
u.twijfel{
  text-decoration:underline dotted var(--twijfel);
  text-underline-offset:3px; text-decoration-thickness:2px;
  cursor:help;
}
u.twijfel:hover, u.twijfel:focus{
  background:var(--twijfel-tint); outline:none; border-radius:2px;
}
:root{--twijfel:#C2701C; --twijfel-tint:#FBEBDA;}
:root[data-thema="donker"]{--twijfel:#D8862F; --twijfel-tint:#332312;}

.spellingballon{
  position:fixed; z-index:95; min-width:170px; max-width:280px;
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--radius); box-shadow:0 6px 22px rgba(0,0,0,.16);
  padding:6px; display:flex; flex-direction:column; gap:2px;
}
.spellingballon .woordkop{
  font:500 10px/1 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-3); padding:3px 6px 5px;
}
.spellingballon button{
  text-align:left; font:14px/1.3 inherit; padding:5px 8px; cursor:pointer;
  border:0; border-radius:var(--radius); background:transparent; color:var(--inkt);
}
.spellingballon button:hover{background:var(--vlak);}
.spellingballon .voorstel{font-weight:500;}
.spellingballon .bijzetten{
  margin-top:3px; border-top:1px solid var(--lijn); border-radius:0;
  color:var(--inkt-3); font-size:13px;
}

/* ---------- kijkstand "Bekijk als" ----------
   Bewust opvallend. Wie niet doorheeft dat hij met andermans ogen kijkt, denkt
   dat de halve planning weg is en gaat hem opnieuw invoeren. */
/* Plakt onder de kopbalk. `--kopeigen` is de hoogte van de kopbalk alleen;
   `--kophoogte` telt deze balk er al bij op, want alles wat lager op de pagina
   plakt moet onder allebei blijven hangen. Twee variabelen dus, en niet één.
   Op een telefoon plakt de kopbalk niet en deze ook niet — zie de media-regel
   onderaan. */
.kijkstand{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--mijlpaal); color:#fff; padding:8px 22px;
  font-size:13px;
  position:sticky; top:var(--kopeigen, 0px); z-index:5;
}
.kijkstand b{font-weight:600;}
.kijkstand span{opacity:.85;}
.kijkstand .chip{
  margin-left:auto; background:transparent; color:#fff;
  border-color:rgba(255,255,255,.5); text-decoration:none;
}
.kijkstand .chip:hover{background:rgba(255,255,255,.15);}

/* ---------- beheer: bedrijf en gebruiker in detail ---------- */
.blad .kruimel{margin:0 0 6px; font-size:13px; color:var(--inkt-3);}
/* Betekende iets toen het raster meerdere kolommen had; met één kolom is elk
   paneel al zo breed. Blijft staan zodat de klasse in de sjablonen niets
   raars doet. */
.paneel.breed-paneel{grid-column:1 / -1;}
.paneel h3.tussenkop{
  margin:14px 12px 4px; font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-3);
}
.paneel li.vervallen-regel{opacity:.5;}
.paneel li.vervallen-regel a{text-decoration:line-through;}
.paneel form.inzet{padding:12px; border-top:1px solid var(--lijn); background:var(--vlak);}
.paneel form.inzet h3{
  margin:0 0 10px; font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-3);
}
.paneel form.inzet .veld{margin-bottom:9px;}
@media (max-width:900px){ .paneel.breed-paneel{grid-column:span 1;} }

/* ---------- woordenboek in beheer ----------
   Eigen klassenamen: `.zoekbalk` en `.acties` bestaan al in de planning en
   doen daar iets anders (vastgezet in beeld, en verborgen buiten de
   bewerkstand). Dezelfde naam hergebruiken kost hier een onvindbare fout. */
/* Wikkelen en een rekbaar zoekveld: op een telefoon duwde het veld (de
   standaardbreedte van een zoekveld is ~220px) samen met de knop de hele
   pagina 99 pixels opzij. Gemeten op 20-09-2026 bij 390 pixels breed. */
.woordzoek{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 14px;}
.woordzoek input[type=search]{flex:1 1 150px; min-width:0;}
table.woordtabel{margin-top:0;}
table.woordtabel td.woordacties{width:110px; text-align:right; white-space:nowrap;}
table.woordtabel td.woordacties form{display:flex; gap:4px; justify-content:flex-end; margin:0;}

/* ---------- voorstellen van buiten ----------
   Eén eigen kleur die nergens anders voorkomt. Niet een van de negen
   markeringen (dat is de opmaak van de planner) en niet rood of groen (dat is
   status), want dan ga je een voorstel aanzien voor iets anders. */
:root{--voorstel:#5B3FA8; --voorstel-tint:#EFEBF9;}
:root[data-thema="donker"]{--voorstel:#A98FDA; --voorstel-tint:#241E33;}

/* Het telletje aan het eind van de regel. Klein en stil: in de normale stand
   mag het je niet uit je werk halen. */
.merk-voorstel{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; margin-left:6px;
  border-radius:9px; background:var(--voorstel); color:#fff;
  font:600 10.5px/1 var(--cijfers); text-decoration:none; vertical-align:middle;
}
.merk-voorstel:hover{filter:brightness(1.15);}
/* Sinds 7 september een link naar de opmerking zelf, dus hij mag er ook als
   een link uitzien zodra je erop staat. */
.merk-opmerking{
  margin-left:5px; color:var(--inkt-3); font-size:12px;
  vertical-align:middle; text-decoration:none;
}
a.merk-opmerking:hover{color:var(--inkt);}

.chip.voorstelknop{border-color:var(--voorstel); color:var(--voorstel); font-weight:500;}
.chip.voorstelknop.actief{background:var(--voorstel); border-color:var(--voorstel); color:#fff;}

/* De regel waar een voorstel op ligt, in de voorstellenstand. Een streep in de
   linkermarge en verder niets: de regel zelf blijft leesbaar zoals hij is. */
table.planning tr.heeft-voorstel > td:first-child{
  box-shadow:inset 3px 0 0 var(--voorstel);
}

tr.voorstelregel > td{background:var(--voorstel-tint) !important; border-bottom:1px solid var(--lijn);}
:root[data-thema="donker"] tr.voorstelregel > td{background:var(--voorstel-tint) !important;}
.voorstel-inhoud{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:2px 0;}
.voorstel-wie{
  font:500 11px/1.4 var(--cijfers); letter-spacing:.04em;
  color:var(--voorstel); white-space:nowrap;
}
.voorstel-wie .bij{color:var(--inkt-3); font-weight:400; letter-spacing:0;}
.voorstel-wat{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; flex:1;}
.wijziging{display:inline-flex; align-items:baseline; gap:6px; font-size:13.5px;}
.wijziging .veld{
  font:500 10px/1 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-3);
}
.wijziging .was{color:var(--inkt-3); text-decoration:line-through;}
.wijziging .pijl{color:var(--inkt-3);}
.wijziging .wordt{color:var(--voorstel); font-weight:600;}
.voorstel-wat .vervalt{color:var(--signaal);}
.voorstel-toelichting{font-size:13px; color:var(--inkt-2); font-style:italic;}
.voorstel-knoppen{display:flex; gap:6px; margin:0; margin-left:auto;}
.voorstel-knoppen .chip{cursor:pointer; font-size:12.5px;}
/* De motivatie die de indiener in zijn bericht terugziet (21-09-2026). Rekbaar,
   zodat hij op een smal scherm boven de knoppen komt in plaats van ze weg te duwen. */
.voorstel-knoppen{flex-wrap:wrap; align-items:center;}
.voorstel-knoppen .voorstel-reactie{flex:1 1 180px; min-width:0; font-size:13px; padding:4px 8px;}
.voorstel-knoppen .chip.goed{border-color:var(--gereed); color:var(--gereed); font-weight:500;}
.voorstel-knoppen .chip.goed:hover{background:var(--gereed); color:#fff;}
.voorstel-knoppen .chip.af{border-color:var(--lijn); color:var(--inkt-3);}
.voorstel-knoppen .chip.af:hover{border-color:var(--signaal); color:var(--signaal);}

/* ---------- meedenken: de leverancierskant ----------
   Dezelfde vormtaal als het bewerken bij Axiom, maar met de voorstelkleur —
   zodat het onmiskenbaar iets anders is dan rechtstreeks wijzigen. */
/* Alleen wat je echt kunt aanklikken ziet er aanklikbaar uit: rijen waar je aan
   mag werken, en de statuscel alleen op je eigen regels (21-09-2026). */
body.meldstand table.planning tr[data-werk] td[data-veld]{cursor:pointer;}
body.meldstand table.planning tr[data-werk] td[data-veld]:hover{box-shadow:inset 0 0 0 1px var(--voorstel);}
body.meldstand table.planning tr[data-werk]:not([data-melden]) td[data-veld="status"]{cursor:default;}
body.meldstand table.planning tr[data-werk]:not([data-melden]) td[data-veld="status"]:hover{box-shadow:none;}
.meldacties{display:inline-flex; gap:4px; margin-left:8px;}
.merk-gemeld{
  display:inline-block; margin-left:8px; padding:2px 6px; border-radius:2px;
  background:var(--voorstel); color:#fff;
  font:600 9.5px/1.4 var(--cijfers); letter-spacing:.08em; text-transform:uppercase;
}
tr.gemeld > td:first-child{box-shadow:inset 3px 0 0 var(--voorstel);}

.meldvenster{
  position:fixed; z-index:95; width:300px; max-width:calc(100vw - 24px);
  background:var(--papier); border:1px solid var(--lijn); border-top:3px solid var(--voorstel);
  border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:12px; display:flex; flex-direction:column; gap:8px;
}
.meldvenster .meldkop{
  font:600 13px/1.3 inherit; color:var(--inkt);
}
.meldvenster .meldnu{
  margin:0; font:500 11.5px/1.3 var(--cijfers); color:var(--inkt-3);
}
.meldvenster .meldinvoer,
.meldvenster .meldtoelichting{
  width:100%; font:14px/1.4 inherit; padding:6px 8px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt); resize:vertical;
}
.meldvenster .meldinvoer:focus,
.meldvenster .meldtoelichting:focus{outline:2px solid var(--voorstel); outline-offset:-1px;}
.meldvenster .melduitleg{
  margin:0; font-size:12px; line-height:1.45; color:var(--inkt-3);
}
.meldvenster .meldknoppen{display:flex; gap:6px; justify-content:flex-end; margin-top:2px;}
.meldvenster .chip{cursor:pointer;}
.meldvenster .chip.hoofd{
  background:var(--voorstel); border-color:var(--voorstel); color:#fff; font-weight:500;
}
.meldvenster .chip.hoofd:disabled{opacity:.5; cursor:default;}

/* de teller in de kop */
.knop.meldknop{display:inline-flex; align-items:center; gap:7px;}
.knop.meldknop .teller{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--voorstel); color:#fff; font:600 11px/1 var(--cijfers);
}
table.voorsteltabel td{vertical-align:middle;}
table.voorsteltabel .voorstel-knoppen{justify-content:flex-end;}
table.voorsteltabel .wijziging{margin-right:14px;}
table.voorsteltabel .vervalt{color:var(--signaal);}

/* De meldkolom van een leverancier: dezelfde plek en breedte als de actiekolom
   bij Axiom, zodat de tabel er niet anders uitziet als je van rol wisselt. */
th.kol-melden,td.meldcel{width:152px; white-space:nowrap; text-align:right;}
td.meldcel .meldacties{margin-left:0;}
td.meldcel .merk-gemeld{margin-left:0;}

/* ---------- uitnodigingslink ----------
   Hij staat er één keer; de kopieerknop hoort dus dik in beeld te staan. */
.uitnodiglink{display:flex; gap:8px; align-items:center; margin:6px 0 14px;}
.uitnodiglink input{
  flex:1; font:13px/1.4 var(--cijfers); padding:9px 11px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--vlak); color:var(--inkt);
}
.uitnodiglink .chip{cursor:pointer; padding:8px 14px; font-weight:500;}
.waarschuwing{
  margin:0 0 18px; padding:10px 12px; font-size:13px; line-height:1.5;
  color:var(--inkt-2); background:var(--vlak);
  border-left:3px solid var(--signaal);
}

/* Signaallijst in het opzetscherm: wie er nog niet bij kan. */
.paneel .signaal{
  margin:8px 12px 4px; padding:10px 12px; font-size:13px; line-height:1.5;
  background:var(--vlak); border-left:3px solid var(--voorstel);
}
.paneel .signaal b{display:block; color:var(--inkt);}
.paneel .signaal span{color:var(--inkt-3);}
.paneel .signaal ul{list-style:none; margin:8px 0 0; padding:0; border:0;}
.paneel .signaal li{
  display:flex; align-items:center; gap:8px; padding:3px 0; border:0; background:none;
}
.paneel .signaal .chip{margin-left:auto; font-size:12px; text-decoration:none;}

/* Een voorstel dat inmiddels al waar is: geen "07:30 → 07:30" dat als fout
   leest, maar gewoon zeggen dat er niets meer door te voeren valt. */
.wijziging.gelijk .wordt{color:var(--inkt-3); font-weight:400;}
.wijziging.gelijk .pijl{opacity:.4;}
.achterhaald{
  font:500 11px/1.4 var(--cijfers); letter-spacing:.04em;
  color:var(--inkt-3); font-style:normal;
}

/* Voorstellen en meldknoppen in de tijdlijn. Daar is een regel een balk en geen
   cel, dus de merkjes hangen naast de naam in plaats van in een kolom. */
.tl-naam{display:flex; align-items:center; gap:4px; min-width:0;}
.tl-rij.heeft-voorstel .tl-naam{box-shadow:inset 3px 0 0 var(--voorstel); padding-left:8px;}
.tl-naam .meldacties{margin-left:auto;}
.tl-naam .merk-voorstel{margin-left:4px;}

/* Elke tijdlijnregel precies even hoog.

   Dat was hij niet: er stonden drie hoogtes door elkaar (27, 30 en 45 pixels)
   en dat is meteen te zien, want de regels liggen tegen elkaar aan. De oorzaak
   zat in `.disc`, de discipline met zijn kleurblokje: dat is een inline-flex
   die mág afbreken, dus "Licht / Rigging" ging over twee regels en die ene
   regel werd anderhalf keer zo hoog als zijn buren. Met het statusmerkje erbij
   overkwam dat een derde van de planning.

   Nu breekt er niets meer af en staat de hoogte vast op de naamkolom zelf. Wat
   niet past wordt afgekapt met een beletselteken; de volledige tekst staat in
   de tooltip. De kolom is daarvoor van 260 naar 300 pixels gegaan — het
   statusmerkje kost er zo'n vijftig, en die moesten ergens vandaan komen. */
.tl-naam{flex-wrap:nowrap; height:27px; padding-top:0; padding-bottom:0; line-height:1;}
.tl-naam .disc{
  display:block; flex:0 1 auto; min-width:0; line-height:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tl-naam .disc i{vertical-align:middle; margin-right:5px; position:relative; top:-1px;}
/* De bedrijfsnaam krimpt zes keer zo hard als de discipline. Zonder dat kortten
   ze allebei even hard in en stond er "Rig… L&…" — twee halve woorden zeggen
   minder dan één heel woord. De discipline is waarop je de regel herkent; welk
   bedrijf het is lees je in de tooltip of in de lijst. */
.tl-naam small{
  flex:0 6 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tl-naam .gedeeld-merk,
.tl-naam .bijlageknop,
.tl-naam .merk-voorstel,
.tl-naam .merk-opmerking{flex:none;}

/* De tijdlijn op een telefoon. Dit staat hier en niet bij de andere
   telefoonregels hierboven, want het overschrijft de regels die je hierboven
   ziet staan — en bij gelijke gewichten wint in CSS de laatste. Stond het
   eerder in het bestand, dan deed het niets. Diezelfde val kostte eerder al een
   ronde bij de dagknoppen. */
@media (max-width: 700px) {
  /* Wat er in honderdvijftig pixels sneuvelt: eerst de paperclip, en pas
     daarna een naam. Rudy: *"ik offer liever de paperclip op daar."* Terecht —
     de discipline en het bedrijf zijn waarop je een regel zoekt, en de
     bijlagen van een regel open je in de lijst. Eerder hield de discipline
     alleen haar kleurblokje over; die twintig pixels van de knop geven haar
     haar naam terug. */
  .tl-naam .bijlageknop{display:none;}

  /* En krapper. Op een telefoon kijk je door een raampje van een paar honderd
     pixels naar een planning van tientallen regels, dus elke pixel per regel is
     een stukje planning erbij. Achtentwintig naar drieëntwintig scheelt een
     vijfde: bij vijftien regels in beeld worden het er achttien. De balk zelf
     blijft even hoog — die moet leesbaar blijven — het is de lucht eromheen die
     eruit gaat. */
  .tl-spoor{height:22px;}
  .tl-naam{height:23px;}
  .tl-balk{top:3px;}
  .tl-ruit,.tl-rekschaduw{top:5px;}
}
/* ---------- bijlagen ----------
   Een paperclip per regel. Stil als er niets hangt: een knop die altijd staat
   te roepen leidt af van de planning zelf. */
.bijlageknop{
  border:0; background:transparent; cursor:pointer; padding:0 2px;
  font-size:13px; line-height:1; color:var(--inkt-3); vertical-align:middle;
  margin-left:4px; opacity:.45;
}
.bijlageknop:hover{opacity:1;}
.bijlageknop.heeft{opacity:1; color:var(--inkt-2);}
.bijlageknop .telling{
  font:600 10px/1 var(--cijfers); margin-left:2px; color:var(--inkt-2);
}

.bijlagevenster{
  position:fixed; z-index:96; width:320px; max-width:calc(100vw - 24px);
  max-height:70vh; overflow:auto;
  background:var(--papier); border:1px solid var(--lijn);
  border-top:3px solid var(--inkt-2);
  border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.18); padding:12px;
}
.bijlagekop{font:600 13px/1.3 inherit; margin-bottom:8px;}
.bijlageleeg{margin:0; font-size:13px; color:var(--inkt-3);}
.bijlage-item{display:flex; align-items:center; gap:8px; padding:5px 0;}
.bijlage-item + .bijlage-item{border-top:1px solid var(--lijn);}
.bijlage-link{
  display:flex; align-items:center; gap:9px; flex:1; min-width:0;
  text-decoration:none; color:inherit;
}
.bijlage-link img{
  width:42px; height:42px; object-fit:cover; border-radius:2px;
  border:1px solid var(--lijn); flex:none; background:var(--vlak);
}
.bijlage-pdf{
  width:42px; height:42px; flex:none; display:flex;
  align-items:center; justify-content:center; border-radius:2px;
  border:1px solid var(--lijn); background:var(--vlak);
  font:600 10px/1 var(--cijfers); letter-spacing:.06em; color:var(--signaal);
}
.bijlage-naam{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bijlage-naam small{font-size:11.5px; color:var(--inkt-3);}
.bijlage-toevoegen{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--lijn);
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.bijlage-toevoegen .chip{
  cursor:pointer; background:var(--balk); border-color:var(--balk);
  color:var(--balk-inkt); font-weight:500;
}
.bijlage-toevoegen .chip:disabled{opacity:.55; cursor:default;}
.bijlage-uitleg{margin:0; font-size:11.5px; color:var(--inkt-3);}

/* =====================================================================
   Hulp — de handleiding in Ordo zelf
   =====================================================================
   Leesbreedte gaat hier voor dichtheid: dit is het enige scherm waar je
   zinnen leest in plaats van regels scant. Vandaar een ruimere regelhoogte
   dan de rest van Ordo, en een maximum aan de tekstbreedte.
   ------------------------------------------------------------------- */
.blad.hulp{max-width:820px; line-height:1.6;}
.blad.hulp p{max-width:64ch; margin:0 0 12px;}
.blad.hulp ul{max-width:64ch; margin:0 0 12px; padding-left:20px;}
.blad.hulp li{margin:0 0 5px;}

.hulp-taal{
  border:1px solid var(--lijn); background:var(--vlak);
  padding:9px 13px; font-size:13.5px; color:var(--inkt-2);
  margin:0 0 20px !important; max-width:none !important;
}

/* De index blijft bovenaan plakken tijdens het lezen: een handleiding waarin je
   moet terugscrollen om verder te springen, lees je niet uit. */
.hulp-springers{
  /* Onder de kopbalk, niet erachter. Met top:0 plakte deze rij tegen de
     bovenkant van het venster, en dat is precies waar de vaste kopbalk staat:
     de eerste rij chips schoof eronder en was weg. --kophoogte is de gemeten
     hoogte van die balk; thema.js zet hem. */
  position:sticky; top:var(--kophoogte, 0px); z-index:5;
  display:flex; flex-wrap:wrap; gap:5px;
  margin:0 0 8px; padding:10px 0 14px; background:var(--papier);
  border-bottom:1px solid var(--lijn);
}
.hulp-springers a{
  border:1px solid var(--lijn); border-radius:999px; background:var(--papier);
  padding:3px 10px; font-size:12.5px; text-decoration:none; color:var(--inkt-2);
}
.hulp-springers a:hover{border-color:var(--inkt-3); color:var(--inkt);}
.hulp-springers a.hier{
  border-color:var(--signaal); color:var(--signaal); font-weight:600;
}

/* Zoeken in de handleiding. Het veld staat in dezelfde rij als de springers,
   dus het schuift mee en is er altijd. */
.hulp-zoek{margin-left:auto;}
/* Het opschrift bij het zoekveld staat er voor de schermlezer; op het scherm
   zegt de tekst in het veld zelf al genoeg. */
.hulp-zoek .verborgen{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.hulp-zoek input{
  border:1px solid var(--lijn); border-radius:999px; background:var(--papier);
  padding:3px 11px; font-size:12.5px; color:var(--inkt); width:150px;
}
.hulp-zoek input:focus{border-color:var(--inkt-3); outline:none;}
.hulp-treffers{font-size:12px; color:var(--inkt-3); align-self:center;}
/* Een hoofdstuk zonder treffer gaat weg in plaats van dat het grijs wordt:
   halve resultaten laten staan maakt de lijst langer in plaats van korter. */
.hulp-vak.geenzoektreffer{display:none;}
.hulp-springers a.geenzoektreffer{opacity:.35;}
mark.hulp-treffer{
  background:var(--signaal); color:#fff; border-radius:3px; padding:0 2px;
}

/* Het label bij een hoofdstuk waar deze ronde iets aan veranderd is. */
.nieuwvlag{
  display:inline-block; vertical-align:middle;
  border-radius:999px; background:var(--signaal); color:#fff;
  padding:1px 7px; font-size:10.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase;
}
.hulp-nieuw .hulp-ronde{margin:0 0 14px;}
.hulp-nieuw .hulp-ronde h3{
  font-size:14px; font-weight:600; margin:0 0 6px; color:var(--inkt-2);
}
.hulp-nieuw .hulp-ronde ul{margin:0; padding-left:20px;}
/* Een stipje op de Hulp-knop zolang je de nieuwste ronde nog niet gelezen hebt. */
.knop.iets-nieuws{position:relative;}
.knop.iets-nieuws::after{
  content:""; position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%; background:var(--signaal);
}

/* Springen naar een hoofdstuk moet je bóven dat hoofdstuk zetten.

   Alex, 14 september, over de chips in de inhoud: *"als je hier op klikt spring
   je te ver het hoofdstuk in. Dit geldt voor alle cellen."* Dat klopte. De
   browser zet bij een anker de bovenrand van het hoofdstuk op nul — en daar
   staan twee plakkende balken overheen: de zwarte kopbalk en deze chipsrij
   eronder. De titel en de eerste alinea verdwenen er samen onder, en wat je
   overhield begon midden in het hoofdstuk.

   Allebei de balken worden gemeten: --kophoogte komt uit thema.js, --hulpbalk
   uit hulp.js. Een vast getal zou hier niet werken — deze chipsrij breekt af
   over twee of drie regels zodra het venster smaller wordt of er een hoofdstuk
   bijkomt, en dan klopt het bij precies één vensterbreedte. Op een telefoon
   plakt de kopbalk niet en is --kophoogte nul, maar de chipsrij wél; ook dan
   komt er het goede uit. De 10 px eronder is lucht, zodat de titel niet tegen
   de balk aan plakt. */
.hulp-vak{padding-top:26px; margin-top:22px; border-top:1px solid var(--band);
  scroll-margin-top:calc(var(--kophoogte, 0px) + var(--hulpbalk, 58px) + 10px);}
.hulp-vak:first-of-type{border-top:0;}
.hulp-vak > h2{
  font-size:18px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px;
}
.hulp-vak > h2:target,.hulp-vak:target > h2{color:var(--signaal);}

.hulp-tabel{width:100%; border-collapse:collapse; margin:0 0 12px;}
.hulp-tabel td{
  padding:7px 14px 7px 0; vertical-align:top; font-size:14px;
  border-bottom:1px solid var(--band);
}
.hulp-tabel td:first-child{width:200px; padding-right:20px;}
.hulp-tabel tr:last-child td{border-bottom:0;}
.hulp-tabel.toetsen td:first-child{width:210px; white-space:nowrap;}

.hulp-stappen{margin:0 0 12px; padding-left:20px; max-width:64ch;}
.hulp-stappen li{margin:0 0 7px;}

.hulp-let-op{
  border-left:3px solid var(--signaal); background:var(--signaal-zacht);
  padding:10px 14px; margin:0 0 14px !important;
}
.hulp-klein{font-size:13px; color:var(--inkt-3);}
.hulp-klein a{color:inherit;}

@media (max-width:700px){
  .hulp-tabel td:first-child,.hulp-tabel.toetsen td:first-child{
    width:auto; display:block; padding:7px 0 0; border-bottom:0;
  }
  .hulp-tabel td:last-child{display:block; padding:0 0 8px;}
}

/* De dag- en datumkolom, alleen zichtbaar als er niet op dag gegroepeerd is.
   Gedempt van kleur: het is context, geen inhoud. Je leest de tijd, en de dag
   ernaast vertelt je alleen wanneer je van dag wisselt. */
table.planning td.dagnaam{
  color:var(--inkt-3); font-size:12.5px; white-space:nowrap;
}
table.planning td.datumcel{
  color:var(--inkt-2); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* Je eigen regels in een planning die van iedereen is.
   Een leverancier ziet sinds deze ronde het hele project. In een lijst die
   daarmee drie keer zo lang wordt is "waar sta ik" de vraag die het scherm moet
   beantwoorden. Een streep links en de bedrijfsnaam wat steviger; geen kleurvlak,
   want de markeringen en de statuskleuren hebben die ruimte al nodig. */
/* Alex, na de zesde ronde: "eigen regels duidelijker gemarkeerd". De streep
   alleen viel weg tussen de markeerkleuren. Nu een eigen tint over de hele rij
   (paars, want die kleur wordt nergens anders voor gebruikt), een dikkere
   streep in dezelfde kleur, en het woord "jij" achter de bedrijfsnaam. Drie
   dingen die alle drie hetzelfde zeggen, zodat er altijd één opvalt — op een
   telefoon zie je de streep niet, maar het woord wel. */
table.planning tr.eigen-regel td{background:var(--eigen-zacht);}
table.planning tbody tr.eigen-regel:nth-child(even) td{background:var(--eigen-zacht);}
table.planning tr.eigen-regel > td:first-child{
  box-shadow:inset 4px 0 0 var(--eigen);
}
table.planning tr.eigen-regel td[data-veld="organisatie"]{
  font-weight:600; color:var(--inkt);
}
table.planning tr.eigen-regel td[data-veld="organisatie"]::after{
  content:"jij"; display:inline-block; margin-left:7px; padding:1px 6px;
  border-radius:9px; background:var(--eigen); color:#fff;
  font:600 9.5px/1.5 var(--cijfers); letter-spacing:.08em; text-transform:uppercase;
  vertical-align:middle;
}

/* Het venstertje dat vraagt of de vaste blokken mee moeten op de uitdraai.
   Een <dialog>, dus de browser regelt zelf het grijze scherm erachter, de
   Escape-toets en het vasthouden van de focus. */
.pdfkeuze{
  border:1px solid var(--lijn); border-radius:6px; padding:18px 20px;
  background:var(--papier); color:var(--inkt); max-width:420px;
  font:400 14px/1.5 var(--tekst);
}
.pdfkeuze::backdrop{background:rgba(0,0,0,.45);}
.pdfkeuze h2{margin:0 0 6px; font:700 16px/1.3 var(--tekst);}
.pdfkeuze p{margin:0 0 12px; color:var(--inkt-2);}
.pdfkeuze label{display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.pdfkeuze .pk-vorm{margin:2px 0 14px; padding:10px 12px; border:1px solid var(--lijn);
                   border-radius:var(--radius); background:var(--vlak);}
.pdfkeuze .pk-vorm label{margin-bottom:0;}
.pdfkeuze .pk-vorm label + label{margin-top:8px;}
/* De areas: een lijst om aan te vinken onder "Alleen deze areas". Bij veel
   areas scrolt de lijst in zichzelf in plaats van het venster op te rekken. */
.pdfkeuze .pk-arealijst{margin:8px 0 0 24px; max-height:190px; overflow:auto;}
.pdfkeuze .pk-arealijst label{margin:0; font-size:13px;}
.pdfkeuze .pk-arealijst label + label{margin-top:4px;}
.pdfkeuze .pk-arealijst.uit{opacity:.45;}
.pdfkeuze .pk-uitleg{margin:8px 0 0; font-size:12.5px;}
.pdfkeuze .pk-uitleg:empty{display:none;}
.pdfkeuze .pk-hoofd:disabled{opacity:.4; cursor:not-allowed;}
.pdfkeuze .knoppen{display:flex; justify-content:flex-end; gap:8px;
                   margin-top:0; padding-top:0; border-top:0;}
/* Eigen knoppen, en niet .knop. Die klasse is gemaakt voor de zwarte kopbalk:
   witte letters op een doorzichtige achtergrond. Op een licht venster zijn ze
   dan onleesbaar — precies wat er hier gebeurde. */
.pdfkeuze .pk-knop{
  font:500 13px/1 inherit; padding:8px 14px; cursor:pointer;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--vlak); color:var(--inkt);
}
.pdfkeuze .pk-knop:hover{border-color:var(--inkt-3);}
.pdfkeuze .pk-hoofd{background:var(--inkt); color:var(--papier); border-color:var(--inkt);}
.pdfkeuze .pk-hoofd:hover{opacity:.88; border-color:var(--inkt);}
.pdfkeuze .pk-knop:focus-visible{outline:2px solid var(--inkt-3); outline-offset:2px;}

/* ---------- beheer: alle bedrijven op een rij ---------- */
/* Eén regel per bedrijf, elk veld meteen invulbaar. Breder dan een gewoon blad:
   er staan negen kolommen naast elkaar en die willen ruimte. Past het niet, dan
   schuift de tabel zelf — de pagina schuift nooit. */
.blad.bedrijvenblad{max-width:1500px;}
.bedrijvenzoek{display:flex; gap:8px; align-items:center; margin:0 0 14px;}
.bedrijvenzoek input[type="search"]{
  flex:1 1 340px; max-width:420px; padding:7px 10px; font:inherit; font-size:14px;
  border:1px solid var(--lijn); border-radius:4px;
  background:var(--papier); color:var(--inkt);
}
.bedrijventabel-omhulsel{overflow-x:auto; border:1px solid var(--lijn); border-radius:5px;}
/* Een eigen tabel. Géén plakkende kop: deze staat in een schuifbare omhulling,
   en dan plakt de kop aan die doos in plaats van aan het scherm — hij zakte tot
   midden in de lijst. En een automatische indeling, zodat een telefoonnummer
   niet evenveel ruimte krijgt als een bedrijfsnaam. */
table.bedrijventabel{
  width:100%; min-width:1120px; border-collapse:collapse; font-size:14px;
  table-layout:auto;
}
table.bedrijventabel thead th{
  position:static; background:var(--vlak); text-align:left;
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-2);
  padding:7px 8px; border-bottom:1px solid var(--lijn); white-space:nowrap;
}
table.bedrijventabel tbody tr:nth-child(even) td{background:var(--vlak);}
table.bedrijventabel tbody td{border-bottom:1px solid var(--lijn);}
/* De verdeling: de naam is het anker en krijgt de meeste ruimte, contactgegevens
   delen de rest, en alles wat één teken breed is krimpt tot de inhoud. */
table.bedrijventabel th.kol-naam, table.bedrijventabel td.veld-naam{width:24%;}
table.bedrijventabel td.veld-soort{width:10em;}
table.bedrijventabel td.veld-telefoon{width:11em;}
/* "Doet mee als": geen veld maar een optelling, dus geen invoervak-hoogte en
   zo smal als de inhoud toelaat. De rollen staan onder elkaar zodra er meer
   dan één is — naast elkaar zou de kolom bij een bedrijf dat overal aan
   meedoet de hele tabel uit elkaar trekken. */
table.bedrijventabel th.vastekop + th.vastekop,
table.bedrijventabel td.rollen{width:1%; white-space:nowrap;}
table.bedrijventabel td.rollen{padding:6px 8px; vertical-align:middle;}
table.bedrijventabel td.rollen .rol{
  display:block; font-size:11.5px; line-height:1.5; color:var(--inkt-2);
}
table.bedrijventabel td.rollen .rol b{color:var(--inkt); font-weight:600;}
table.bedrijventabel th.sorteerkop{padding:0;}
table.bedrijventabel th.sorteerkop a{
  display:block; padding:7px 8px; text-decoration:none; color:inherit; white-space:nowrap;
}
table.bedrijventabel th.sorteerkop a:hover{color:var(--inkt); background:var(--band);}
table.bedrijventabel th.sorteerkop.actief a{color:var(--inkt);}
table.bedrijventabel th.sorteerkop .pijl{
  display:inline-block; width:10px; margin-left:3px; color:var(--signaal);
}
table.bedrijventabel th.smalkop,
table.bedrijventabel td.tel,
table.bedrijventabel td.aanvink{width:1%; text-align:center; white-space:nowrap;}
table.bedrijventabel td.tel{
  font:400 13px/1 var(--cijfers); color:var(--inkt-3);
}
table.bedrijventabel td{padding:3px 5px; vertical-align:middle;}
/* De invoervelden vullen hun cel: zo leest de rij als een regel en niet als een
   rij losse hokjes. De rand komt pas op als je erin staat. */
table.bedrijventabel td.veld input,
table.bedrijventabel td.veld select{
  width:100%; box-sizing:border-box; font:inherit; font-size:13.5px;
  padding:5px 6px; border:1px solid transparent; border-radius:3px;
  background:transparent; color:var(--inkt);
}
table.bedrijventabel td.veld input:hover,
table.bedrijventabel td.veld select:hover{border-color:var(--lijn);}
table.bedrijventabel td.veld input:focus,
table.bedrijventabel td.veld select:focus{
  outline:none; border-color:var(--signaal); background:var(--papier);
}
table.bedrijventabel td.veld-naam input{font-weight:600;}
table.bedrijventabel tr.uit td.veld input{color:var(--inkt-3);}
table.bedrijventabel tr.nieuwe-regel{background:var(--vlak);}
table.bedrijventabel td.aanvink input{margin:0;}
table.bedrijventabel td.leegje{
  padding:16px; color:var(--inkt-3); font-style:italic; text-align:center;
}
table.bedrijventabel .nogniks{font-size:12px; color:var(--inkt-3); font-style:italic;}
table.bedrijventabel th.vastekop{white-space:nowrap;}
.veldfout{display:block; font-size:11.5px; color:var(--signaal); padding:2px 6px 0;}
ul.fouten{
  margin:0 0 12px; padding:10px 14px 10px 30px; border-radius:4px;
  border:1px solid var(--signaal); color:var(--signaal); background:var(--signaal-zacht);
}
.bedrijvenvoet{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0 0;
}
.bedrijvenvoet .uitleg{margin:0; color:var(--inkt-3); font-size:13px;}

@media (max-width: 760px){
  .bedrijvenzoek input[type="search"]{flex:1 1 auto;}
}

/* ---------- versies: inzien en herstellen ---------- */
/* Kaartjes en geen tabel: per versie staat er meer dan een regel — wie, wanneer,
   wat er veranderde en wat je ermee kunt. In rijen wordt dat een muur. */
.versielijst{display:flex; flex-direction:column; gap:10px; margin:0 0 22px;}
.versiekaart{
  border:1px solid var(--lijn); border-radius:5px; padding:12px 14px;
  background:var(--papier);
}
.versiekaart.nieuwste{border-color:var(--inkt-3); background:var(--vlak);}
.versiekop{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.versiemerk-groot{
  font:600 15px/1 var(--cijfers); letter-spacing:.03em; color:var(--inkt);
}
.versiedatum{
  font:500 13px/1 var(--cijfers); font-variant-numeric:tabular-nums;
  color:var(--inkt-2);
}
.nu-geldig{
  font:500 10px/1 var(--cijfers); letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--lijn); border-radius:2px; padding:3px 6px;
  color:var(--inkt-3); margin-left:auto;
}
.versiebij{margin:5px 0 0; font-size:13px; color:var(--inkt-3);}
.versienotitie{margin:7px 0 0; font-size:14px; color:var(--inkt);}
/* Wat er ten opzichte van de vorige versie veranderde: erbij, eraf, anders. */
.versieverschil{display:flex; gap:8px; margin:8px 0 0; font-size:13px;}
.versieverschil span{
  font:500 12px/1 var(--cijfers); border:1px solid var(--lijn);
  border-radius:3px; padding:3px 6px; color:var(--inkt-2);
}
.versieverschil .erbij{color:#3E6E3A; border-color:#3E6E3A;}
.versieverschil .eraf{color:var(--signaal); border-color:var(--signaal);}
.versieknoppen{display:flex; gap:8px; margin:11px 0 0; flex-wrap:wrap;}
.geen-foto{font-size:13px; color:var(--inkt-3); font-style:italic;}
/* De leesweergave van een versie. Bewust anders dan de gewone lijst: hier valt
   niets te klikken, en dat hoor je te zien voordat je het probeert. */
.versieband{
  margin:0 0 14px; padding:10px 22px; font-size:13.5px; color:var(--inkt-2);
  background:var(--vlak); border-bottom:1px solid var(--lijn);
}
table.versiefoto td{font-size:13.5px; vertical-align:top;}
table.versiefoto td.werk{font-size:14px;}
table.versiefoto tbody tr:hover td{background:inherit;}

/* De knop die de handeling echt uitvoert. Op het herstelscherm staat hij naast
   twee uitwegen; dan hoor je in één blik te zien welke van de drie de daad is. */
.chip.hoofdknop{
  background:var(--balk); border-color:var(--balk); color:#fff;
  font-weight:500; padding:6px 14px; font-size:13px; cursor:pointer;
  font-family:inherit;
}
.chip.hoofdknop:hover{opacity:.9;}

/* ---------------------------------------------------------------------------
   Mijn bedrijf — wat een leverancier zelf regelt

   Twee tabellen die smaller zijn dan de planning: hier staan namen en één
   keuze, en `table.planning` verdeelt zijn kolommen even breed. Vandaar de
   eigen breedtes; de rest van de opmaak erft gewoon mee.
   --------------------------------------------------------------------------- */
/* Eén maat voor de hele pagina. Er stonden vier verschillende breedtes onder
   elkaar — de uitleg 532, de rollentabel 640, de collegatabel 820 en de
   invoervelden 956 — en dan leest een rustige pagina als een rommelige. */
.bedrijfsblad h1,
.bedrijfsblad h2,
.bedrijfsblad .toelichting,
.bedrijfsblad table,
.bedrijfsblad form,
.bedrijfsblad p{max-width:760px;}
/* De uitleg mag hier zo breed als de rest: hij hoort bij de tabel eronder en
   niet bij een lopend verhaal. */
.bedrijfsblad .toelichting{max-width:760px;}
/* Een naam, een adres en een telefoonnummer hebben geen 760 pixels nodig, en
   een veld dat veel breder is dan zijn inhoud leest als een fout. */
.bedrijfsblad input[type="text"],
.bedrijfsblad input[type="email"],
.bedrijfsblad input[type="url"]{max-width:420px;}

table.collegatabel{table-layout:auto; width:100%;}
/* De knopkolom zo smal als zijn knop: bij één collega — jijzelf, zonder knop —
   rekte de lege kolom de kop anders uit. */
table.collegatabel th:last-child,
table.collegatabel td:last-child{width:1%; white-space:nowrap;}
table.collegatabel td.rechts, table.rollentabel td.rechts{text-align:right;}
table.collegatabel form, table.rollentabel form{display:inline-flex; gap:6px; align-items:center; margin:0;}

/* Een ingetrokken account blijft staan — de geschiedenis moet kloppen — maar
   moet niet meelezen als een gewone regel. */
table.collegatabel tr.ingetrokken td{opacity:.55;}

.planningrollen{margin:18px 0 26px;}
.planningrollen h3{margin:0 0 2px; font-size:15px;}
.planningrollen .toelichting{margin:0 0 8px;}
table.rollentabel{table-layout:auto; width:100%;}
table.rollentabel select{font-family:inherit; font-size:13px; padding:4px 6px;}

/* Intrekken is onomkeerbaar genoeg om er anders uit te zien dan opslaan. */
.chip.gevaar{border-color:var(--ordo-rood); color:var(--ordo-rood);}
.chip.gevaar:hover{background:var(--ordo-rood); color:#fff;}

/* Het sneltoetsenvenster op de tijdlijn: de toetsen die daar niets doen staan
   apart onder een eigen kopje, gedempt. Ze weglaten zou verbergen dat ze
   bestaan; ze gewoon meetellen zou een toets beloven die niets doet. */
.ordo-doos h3.elders{margin:18px 0 2px; font-size:14px;}
.ordo-doos .elders-uitleg{margin:0 0 8px; opacity:.75;}
.ordo-doos table.toetsen.flauw{opacity:.6;}

/* ---------- Logboek ----------

   De tabel leent de opmaak van de bedrijvenpagina (`.bedrijventabel`) omdat
   het dezelfde soort lijst is: veel regels, weinig sier. Wat hier bijkomt gaat
   over lezen en scannen, niet over invullen — dit is het enige beheerscherm
   waar je niets kunt veranderen.

   De klassenamen beginnen allemaal met `log`. Dat is geen stijl maar een
   voorzorg: `.leeg`, `.acties` en `.knop` waren eerder al bezet toen ze hier
   opnieuw werden bedacht, en in een stylesheet van vijfduizend regels is een
   algemene naam altijd al van iemand anders. */
.logfilter{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:14px 0 6px;
}
.logfilter label{display:flex; flex-direction:column; gap:3px;}
.logfilter label span{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--inkt-3);
}
.logfilter select{
  font:inherit; font-size:13.5px; padding:5px 7px; max-width:15em;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--invoer); color:var(--inkt);
}
.logmelding{
  margin:10px 0 0; padding:9px 12px; font-size:13px;
  border:1px solid var(--lijn); border-radius:4px; background:var(--vlak); color:var(--inkt-2);
}
.logleeg{margin:22px 0; color:var(--inkt-3); font-style:italic;}
.logdag{
  display:flex; align-items:baseline; gap:10px;
  margin:26px 0 8px; font-size:15px; font-weight:600; text-transform:capitalize;
}
.logdag .bij{
  font-size:12.5px; font-weight:400; color:var(--inkt-3); text-transform:none;
}
table.logboektabel td{padding:5px 7px; vertical-align:baseline;}
table.logboektabel td.kol-tijd{
  width:1%; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--inkt-3);
}
table.logboektabel th.kol-wie, table.logboektabel td.kol-wie{width:16%;}
table.logboektabel td.kol-wie{font-weight:600;}
table.logboektabel th.kol-waar, table.logboektabel td.kol-waar{width:18%;}
table.logboektabel td.kol-waar{color:var(--inkt-2);}
table.logboektabel th.kol-ip, table.logboektabel td.kol-ip{
  width:1%; white-space:nowrap; font-size:12px; color:var(--inkt-3);
  font-variant-numeric:tabular-nums;
}
/* De details staan achter de zin en niet eronder: één regel per handeling
   houdt een dag met tweehonderd wijzigingen leesbaar. */
.logdetail{
  display:inline-block; margin-left:9px; font-size:12.5px; color:var(--inkt-3);
}
.logdetail b{font-weight:500; color:var(--inkt-3); opacity:.75;}
/* Een streepje voor de groep, links in de rij. Genoeg om te zien dat er drie
   soorten door elkaar staan, te weinig om een kleurenlijst te worden. */
table.logboektabel tr td:first-child{border-left:3px solid transparent;}
table.logboektabel tr.log-inloggen td:first-child{border-left-color:var(--inkt-3);}
table.logboektabel tr.log-beheer td:first-child{border-left-color:var(--lijn);}
table.logboektabel tr.opvalt td:first-child{border-left-color:var(--signaal);}
table.logboektabel tr.opvalt .wat{color:var(--signaal); font-weight:600;}

/* ---------- knoppenbalk op een aanraakscherm ----------

   Een telefoon heeft geen Ctrl en geen rechtermuisknop, en het menu op lang
   indrukken werkt op een iPhone niet: iOS pakt die lange druk zelf af voor de
   tekstselectie. Alex: *"Dit is niet werkbaar."* Dus staat er nu gewoon een
   balk onderin zodra je een regel hebt aangetikt.

   Onder de veilige zone door (`env(safe-area-inset-bottom)`), want op een
   iPhone zonder thuisknop loopt het scherm door achter de streep. */
.aanraakbalk{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  background:var(--balk); color:var(--balk-inkt);
  box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.aanraakbalk .teller{
  font:500 11px/1 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
  opacity:.7; margin-right:2px;
}
.aanraakbalk button{
  /* Vierenveertig punten hoog: de maat waarop een duim betrouwbaar raakt. */
  min-height:38px; padding:6px 13px; font:inherit; font-size:13.5px;
  border:1px solid rgba(255,255,255,.3); border-radius:var(--radius);
  background:transparent; color:var(--balk-inkt); cursor:pointer;
}
.aanraakbalk button:active{background:rgba(255,255,255,.18);}
.aanraakbalk button.gevaar{border-color:rgba(255,120,100,.6); color:#ffb3a7;}
.aanraakbalk button.stil{margin-left:auto; opacity:.75;}
/* De regels zelf: op een aanraakscherm in de bewerkstand geen tekstselectie,
   anders vecht de tik om een regel te kiezen met het selecteren van een woord —
   en op iOS wint dat laatste. Buiten de bewerkstand blijft tekst gewoon te
   selecteren, want dan wil je hem juist kunnen kopiëren. */
@media (pointer: coarse){
  .bewerkstand tr[data-regel], .bewerkstand .tl-rij[data-regel]{
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  /* Ruimte onder de lijst, zodat de balk de laatste regel niet afdekt. */
  .bewerkstand .inhoud{padding-bottom:96px;}
}

/* ---------- ingehuurd ---------- */
/* Ingehuurden staan onder de collega's van een bedrijf, maar met een streep
   ertussen: ze horen niet bij het bedrijf, ze draaien mee in één planning.
   Zie planning/inhuren.py. */
.inhuurblok{margin-top:14px; padding-top:12px; border-top:1px dashed var(--lijn);}
.inhuurblok .labeltje{
  margin:0 0 8px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--inkt-3);
}
.inhuurformulier{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 6px;
}
.inhuurformulier input[type="email"]{flex:2 1 220px; min-width:0;}
.inhuurformulier input[type="text"]{flex:1 1 160px; min-width:0;}
.inhuurformulier select{flex:1 1 160px; min-width:0;}
.inhuurformulier input[type="date"]{flex:0 1 150px;}

/* ---------- inhuren vanaf Opzet ---------- */
/* Hangt onder het bedrijf in de lijst "Bedrijven en mensen". De li daar is een
   flexrij met de naam links en de knoppen rechts; dit blok hoort daaronder over
   de volle breedte, dus mag die ene rij afbreken. Alleen die rij: `.paneel li`
   staat overal op dit scherm en een algemene wrap zou de andere panelen
   verspringen. Een eigen klasse en geen `:has()` — dat scheelt een stille
   verspringing op een browser die dat niet kent. */
.paneel li.metinhuur{flex-wrap:wrap;}
.inhuurbij{
  flex:0 0 100%; margin:6px 0 2px; padding:8px 0 0;
  border-top:1px dashed var(--lijn);
}
.inhuurbij > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  font:500 11px/1.6 var(--cijfers, inherit); letter-spacing:.12em;
  text-transform:uppercase; color:var(--inkt-3);
}
.inhuurbij > summary::-webkit-details-marker{display:none;}
.inhuurbij > summary::before{
  content:"▸"; font-size:10px; color:var(--inkt-3); transition:transform .12s ease;
}
.inhuurbij[open] > summary::before{transform:rotate(90deg);}
.inhuurbij > summary:hover{color:var(--inkt-2);}
.inhuurbij .nogniets{color:var(--inkt-3); text-transform:none; letter-spacing:0;}
.ingehuurdlijst{list-style:none; margin:6px 0 0; padding:0;}
.ingehuurdlijst li{
  display:flex; align-items:center; gap:9px;
  padding:5px 0; border-top:1px solid var(--band); font-size:13.5px;
}
.ingehuurdlijst li:first-child{border-top:0;}
.ingehuurdlijst .rechts{margin-left:auto;}
.inhuurbij .toelichting{margin:2px 0 4px; font-size:12.5px; color:var(--inkt-3);}

/* ---------- wie ben ik ---------- */
/* Bovenin het profielmenu: naam, adres, bedrijf. Zie de uitleg in
   templates/planning/_kop.html. Geen knop maar tekst, dus geen hoverkleur en
   geen aanwijzer — anders lijkt het iets wat je aan kunt klikken. */
.profielwie{
  display:block; padding:6px 10px 8px; max-width:230px;
  font-size:13px; line-height:1.35; color:#fff;
}
.profielwie b{
  display:block; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.profielwie .profielregel{
  display:block; font-size:12px; color:rgba(255,255,255,.62);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- delen ---------- */
/* De schakelaar op het projectenoverzicht en het scherm dat erachter zit. Zie
   planning/delen.py voor het waarom; hier staat alleen hoe het eruitziet.

   Het is een link en geen `input[type=checkbox]`, en dat is met opzet: een
   vinkje dat onder je vinger een planning met twaalf bedrijven deelt, is precies
   de knop die je per ongeluk aanraakt. Hij ziet eruit als een schakelaar omdat
   dat leest als een stand, en hij gedraagt zich als een link omdat er eerst een
   scherm komt. `role="switch"` met `aria-checked` zorgt dat een schermlezer
   hetzelfde hoort als wat je ziet. */
table.projectenlijst th.kol-gedeeld,
table.projectenlijst td.kol-gedeeld{width:1%; white-space:nowrap;}
/* a.schakel en niet .schakel alleen: die klassenaam heeft ook de
   Lijst/Tijdlijn-schakelaar in de zwarte kop (bovenaan dit bestand), met een
   licht randje. Dat randje kwam hier mee en was in het donkere thema te zien
   als een kader om elke schakelaar (Rudy, 20 september: "wil dat overal
   uniform, dus zonder"). */
a.schakel{border:0; border-radius:0; overflow:visible;}
.schakel{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; color:var(--inkt-3);
  font:500 11px/1 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
}
.schakel .knopje{
  width:28px; height:16px; border-radius:8px; flex:none; position:relative;
  background:var(--band); border:1px solid var(--lijn);
  transition:background .12s ease, border-color .12s ease;
}
.schakel .knopje::after{
  content:""; position:absolute; top:1px; left:1px;
  width:12px; height:12px; border-radius:50%; background:var(--papier);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .12s ease;
}
.schakel.aan{color:var(--gereed);}
.schakel.aan .knopje{background:var(--gereed); border-color:var(--gereed);}
.schakel.aan .knopje::after{transform:translateX(12px);}
.schakel:hover{color:var(--inkt);}
.schakel:hover .knopje{border-color:var(--inkt-3);}
.schakel:focus-visible{outline:2px solid var(--inkt); outline-offset:3px; border-radius:var(--radius);}

/* Het deelscherm zelf: drie blokken onder elkaar, elk met een kop die een
   vraag is. Geen panelen met randen eromheen — dit is één verhaal dat je van
   boven naar beneden leest, en drie kadertjes zouden er drie losse keuzes van
   maken. Het staat op `.blad.breed` en niet over de volle breedte: dit is een
   scherm dat je leest voordat je een knop indrukt, en een regel van veertienhonderd
   pixels lees je niet. */
.delenblad .deelblok{margin:26px 0 0;}
.delenblad .deelblok h2{
  font:500 11px/1 var(--cijfers); letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-3); margin:0 0 10px; padding-bottom:7px;
  border-bottom:1px solid var(--lijn);
}
.delenblad .bijschrift{margin:10px 0 0; font-size:13px;}
table.deeltabel{border-collapse:collapse; width:100%;}
table.deeltabel th{
  text-align:left; font:500 12.5px/1.5 inherit; color:var(--inkt-3);
  padding:6px 14px 6px 0; width:1%; white-space:nowrap; vertical-align:top;
}
table.deeltabel td{padding:6px 0; font-size:14px; color:var(--inkt);}
table.deeltabel .stille-waarde{color:var(--inkt-3); font-style:italic;}

.delenblad .letop{list-style:none; margin:0; padding:0;}
.delenblad .letop li{
  padding:9px 12px; margin-bottom:6px; font-size:13.5px; line-height:1.5;
  background:var(--vlak); border-left:3px solid var(--lijn); color:var(--inkt-2);
}
.deelpartijen{list-style:none; margin:0; padding:0;}
.deelpartijen > li{padding:12px 0; border-top:1px solid var(--band);}
.deelpartijen > li:first-child{border-top:0;}
.deelpartijen .partijkop{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.deelpartijen .partijkop .bij,
.deelmensen .bij{color:var(--inkt-3); font-size:12.5px;}
.deelmensen{list-style:none; margin:7px 0 0; padding:0;}
.deelmensen li{display:flex; align-items:center; gap:9px; padding:3px 0; font-size:14px;}
.deelmensen label{display:flex; align-items:baseline; gap:8px; cursor:pointer;}
.delenblad .leegje{color:var(--inkt-3); font-size:13.5px; font-style:italic;}
.delenblad .knoppenrij{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--lijn);
}
/* Niet meer delen is geen alledaagse knop. Rood vlak en niet alleen rode
   letters: dit zet met één klik twaalf bedrijven buiten. */
.paneelknop.gevaarknop{background:var(--signaal); border-color:var(--signaal); color:#fff;}
.paneelknop.gevaarknop:hover{background:#8F241F; border-color:#8F241F;}

/* Invullen op het deelscherm zelf. Rudy, 19 september: *"bedrijven, personen en
   dergelijke waarvan iets mist, dat daar ook direct ingevuld en verwerkt kan
   worden."* De velden staan tussen de tekst en niet in een apart formulier: dit
   is één lijst die je van boven naar beneden naloopt, en wat er mist vul je aan
   op de regel waar het opvalt. */
.delenblad .deelveld{
  font:14px/1.4 inherit; color:var(--inkt);
  padding:5px 8px; border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--invoer); min-width:0; width:100%; max-width:340px;
}
.delenblad .deelveld.smal{max-width:170px;}
.delenblad .deelveld:focus{outline:2px solid var(--inkt); outline-offset:-1px; border-color:var(--inkt);}
.delenblad .deelveld::placeholder{color:var(--inkt-3); font-style:italic;}
.delenblad .veldhint{display:block; margin-top:3px; font-size:12px; color:var(--inkt-3);}
.delenblad .veldfout{
  display:block; margin-top:4px; font-size:12.5px; font-weight:500; color:var(--signaal);
}
table.deeltabel td{padding:7px 0;}

/* Een rij velden naast elkaar, die op een telefoon onder elkaar valt. */
.delenblad .veldenrij{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.delenblad .veldenrij label{
  display:flex; flex-direction:column; gap:3px; flex:1 1 180px;
  font:500 11px/1 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-3);
}

/* Iemand met toegang maar zonder mailadres. Hij staat op dezelfde hoogte als
   zijn collega's die er wél een hebben — hij hoort erbij, er mist alleen iets. */
.deelmensen li.ontbreekt{align-items:center; gap:10px; flex-wrap:wrap;}
.deelmensen li.ontbreekt .naamvak{min-width:160px;}

/* Het vak om een bedrijf uit te nodigen waar nog niemand kan inloggen. */
.delenblad .uitnodigvak{margin-top:6px;}
.delenblad .uitnodigvak .leegje{margin:0 0 6px;}

/* De gegevens van een bedrijf: dichtgeklapt als ze er staan, open als het
   mailadres ontbreekt. Zo zie je bij het langslopen meteen waar iets mist,
   zonder dat vijf bedrijven die compleet zijn het scherm vol zetten. */
.delenblad .bedrijfsvak{margin-top:8px; border-top:1px dashed var(--lijn); padding-top:8px;}
.delenblad .bedrijfsvak > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:7px;
  font:500 11px/1.6 var(--cijfers); letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-3);
}
.delenblad .bedrijfsvak > summary::-webkit-details-marker{display:none;}
.delenblad .bedrijfsvak > summary::before{
  content:"▸"; font-size:10px; transition:transform .12s ease;
}
.delenblad .bedrijfsvak[open] > summary::before{transform:rotate(90deg);}
.delenblad .bedrijfsvak > summary:hover{color:var(--inkt-2);}
.delenblad .bedrijfsvak > summary b{color:var(--signaal); font-weight:600;}
.delenblad .bedrijfsvak .veldenrij{margin-top:8px;}

/* Het projectenoverzicht op een telefoon: de tabel schuift binnen zijn eigen
   kader, niet de hele pagina.

   **Alleen op een telefoon, en dan plakt de kop niet.** Op 19-09-2026 stond deze
   regel een paar uur zonder mediaquery, en toen schoof op een gewoon scherm de
   kop van de tabel over de eerste twee regels heen. De reden: de kop plakt
   (`position:sticky`, zie table.projectenlijst thead th), en een plakkende kop
   rekent vanaf het dichtstbijzijnde kader dat kan scrollen. Met `overflow-x`
   op dit kader wordt dát het kader — en omdat een browser de andere as dan ook
   op auto zet, plakt de kop 81 pixels omlaag binnen de tabel in plaats van
   onder de zwarte balk. Die regel ontbrak dus niet per ongeluk.

   Op een gewoon scherm blijft het zoals het was: de kop plakt, en past de tabel
   niet, dan schuift de pagina. Op een telefoon is het omgekeerd belangrijker:
   daar schoof anders het hele scherm opzij, zoekbalk en knoppen incluis, en
   dat weegt zwaarder dan een kop die blijft staan. */
@media (max-width: 700px){
  .projectenlijst-omhulsel{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .projectenlijst-omhulsel table.projectenlijst thead th{position:static;}
}

/* ---------- vegen tussen dagen ---------- */
/* De pijltjes ‹ › naast de dagenbalk, alleen in de lijst en alleen op een
   telefoon. Op een groot scherm staan alle dagen al naast elkaar en zijn ze
   overbodig. Ze zijn er om twee redenen: je kunt ermee tikken, en ze vertellen
   dat vegen kan — een gebaar waar niemand van weet, bestaat niet. Zie veeg.js. */
.dagpijl{display:none;}
@media (max-width: 700px){
  .balk-rij.eerste:has(.dagpijl){flex-wrap:nowrap;}
  .dagpijl{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:34px; height:42px; margin-top:-2px;
    font:500 24px/1 inherit; color:var(--inkt-2); text-decoration:none;
    border:1px solid var(--lijn); border-radius:var(--radius);
    background:var(--papier);
  }
  .dagpijl:active{background:var(--band);}
  .dagpijl:focus-visible{outline:2px solid var(--inkt); outline-offset:2px;}
  /* Geen vorige of volgende dag: de plek blijft, zodat de balk niet verspringt
     als je bij de eerste of laatste dag aankomt. */
  .dagpijl.uit{color:var(--lijn); border-style:dashed; background:transparent;}
  /* Het etiket "Dag" mag hier weg: de pijltjes zeggen al waar je bent. */
  .balk-rij.eerste:has(.dagpijl) > .etiket{display:none;}
  .balk-rij.eerste:has(.dagpijl) .dagen{flex:1 1 auto; min-width:0;}
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference){
  .dagpijl.geveegd{transform:scale(.92); transition:transform .08s ease;}
}

/* ---------- de balk inklappen en vastzetten ---------- */
/* Rudy, 19 september: *"kunnen we dit deel niet inklapbaar en vastzetbaar maken
   middels 2 knopjes?"* De stand staat als attribuut op <html> (zie base.html en
   thema.js). Alleen op een gewoon scherm: op een telefoon doet "Meer" het
   inklappen al, en plakt er onder de kop niets.

   Vastzetten werkt via dezelfde maat als de zwarte kop en de meekijkbalk:
   thema.js telt de balk mee in --kopgemeten zodra hij vastzit, en de dagkop,
   de kolomkop en de kop van de tijdlijn rekenen al met die maat. Zo gaan ze
   vanzelf ónder de balk plakken in plaats van erachter te verdwijnen. */
.balkstand{display:none;}
@media (min-width: 701px){
  .balkstand{display:inline-flex; gap:4px; margin-left:auto;}
  /* De telling "68 van 68 regels" stond tegen de rechterkant; de knopjes
     komen daar nu achter, dus de telling hoeft niet meer zelf te duwen. */
  .balkstand ~ .balkknop{margin-left:0;}
  .balk-rij.eerste .telling + .balkstand{margin-left:12px;}
  .balkstandknop{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:26px; padding:0; cursor:pointer;
    color:var(--inkt-3); background:var(--papier);
    border:1px solid var(--lijn); border-radius:var(--radius);
  }
  .balkstandknop:hover{color:var(--inkt); border-color:var(--inkt-3);}
  .balkstandknop:focus-visible{outline:2px solid var(--inkt); outline-offset:2px;}
  .balkstandknop[aria-pressed="true"]{
    color:var(--balk-inkt); background:var(--balk); border-color:var(--balk);
  }
  .balkstandknop svg{transition:transform .15s ease;}
  /* Het pijltje wijst de kant op waar de balk heen gaat als je klikt. */
  #balk-inklappen[aria-pressed="true"] svg{transform:rotate(180deg);}
  .filterteller{
    position:absolute; top:-6px; right:-6px; min-width:15px; height:15px;
    padding:0 4px; border-radius:8px;
    font:600 10px/15px var(--cijfers); text-align:center;
    color:#fff; background:var(--signaal);
  }

  /* Ingeklapt: alleen de rij met de dagen. De regel "Bewerken staat aan" staat
     niet in de balk maar direct eronder; die hoort er wel bij en gaat mee. */
  html[data-balk-ingeklapt] .balk .balk-rij:not(.eerste){display:none;}
  html[data-balk-ingeklapt] .werkbalk{display:none !important;}

  /* Vastgezet: onder de zwarte kop en de meekijkbalk. z-index 4: boven de
     dagkop (3) die eronder schuift, onder de meekijkbalk (5) en de kop (6). */
  html[data-balk-vast] .balk{
    position:sticky; top:var(--kopbovenbalk, var(--kopeigen, 0px)); z-index:4;
  }
}
@media (prefers-reduced-motion: reduce){
  .balkstandknop svg{transition:none;}
}

/* Het oogje in het wachtwoordveld (aanmelden). De knop ligt ín het veld, rechts;
   het veld krijgt daar ruimte voor zodat de laatste tekens er niet onder
   verdwijnen. Welk oog er staat volgt aria-pressed, niet een losse klasse: dan
   kan wat je ziet niet uit de pas lopen met wat een schermlezer hoort. */
.wachtwoordveld{position:relative;}
/* !important: de veldregels (.veld input[type=password], .paneelinhoud …) zetten
   de hele padding en zijn specifieker; zonder dit schuift de tekst onder het oog. */
.wachtwoordveld input{width:100%; padding-right:40px !important;}
.oogje{
  position:absolute; top:50%; right:4px; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  border:0; border-radius:var(--radius); background:transparent;
  color:var(--inkt-3); cursor:pointer; padding:0;
}
.oogje[hidden]{display:none;}
.oogje:hover{color:var(--inkt);}
.oogje:focus-visible{outline:2px solid var(--balk); outline-offset:1px;}
.oogje .oog-dicht{display:none;}
.oogje[aria-pressed="true"] .oog-open{display:none;}
.oogje[aria-pressed="true"] .oog-dicht{display:block;}

/* ---------- Mijn bedrijf (20 september, opnieuw ingedeeld) ----------
   Drie delen: de bedrijfskaart, het raster collega × planning, de freelancers.
   Het raster is het hart: in één oogopslag wie waar wat mag. Zie mijn_bedrijf.html. */
.mb{display:flex; flex-direction:column; gap:28px;}
.mb-kop{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:12px 24px; padding-bottom:16px; border-bottom:1px solid var(--lijn);
}
.mb-kop h1{margin:0 0 4px;}
.mb-contact{display:flex; flex-wrap:wrap; gap:4px 0; margin:0; color:var(--inkt-2); font-size:14px;}
.mb-contact span + span::before{content:"·"; margin:0 8px; color:var(--inkt-3);}
.mb-gegevens > summary{
  list-style:none; cursor:pointer; padding:7px 14px; border:1px solid var(--lijn);
  border-radius:var(--radius); background:var(--papier); color:var(--inkt); font-size:14px;
}
.mb-gegevens > summary:hover{border-color:var(--inkt-3);}
.mb-gegevens > summary::-webkit-details-marker{display:none;}
.mb-gegevens[open]{flex-basis:100%;}
.mb-gegevens[open] > summary{margin-bottom:12px;}
.mb-gegevensform{max-width:900px;}

.mb-vak{display:flex; flex-direction:column; gap:10px;}
.mb-vakkop{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mb-vakkop h2{margin:0;}
.mb-telling{
  display:inline-block; min-width:22px; padding:2px 7px; margin-left:6px;
  border-radius:11px; background:var(--band); color:var(--inkt-2);
  font:500 12px/1.3 var(--cijfers); text-align:center; vertical-align:middle;
}
.mb .toelichting{margin:0; max-width:80ch;}
.mb-klein{font-size:13px; color:var(--inkt-3);}

/* Het raster schuift binnen zijn eigen kader als er veel planningen zijn; de
   namen blijven links staan. */
.mb-raster-houder{overflow-x:auto; border:1px solid var(--lijn); border-radius:var(--radius);}
.mb-raster{border-collapse:separate; border-spacing:0; width:100%; font-size:14px;}
.mb-raster th, .mb-raster td{padding:8px 12px; border-bottom:1px solid var(--lijn); text-align:left; vertical-align:middle;}
.mb-raster tbody tr:last-child > *{border-bottom:0;}
.mb-raster thead th{background:var(--vlak); font-weight:600; vertical-align:bottom;}
.mb-raster .mb-mens{
  position:sticky; left:0; z-index:1; background:var(--papier);
  min-width:210px; border-right:1px solid var(--lijn);
}
.mb-raster thead .mb-mens{background:var(--vlak); font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-2);}
.mb-naamregel{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-weight:600;}
.mb-raster .bij, .mb-lijst .bij{display:block; font-size:12px; font-weight:400; color:var(--inkt-3);}
.mb-planning{min-width:150px;}
.mb-planning a{color:var(--inkt); text-decoration:none;}
.mb-planning a:hover{text-decoration:underline;}
.mb-plafond{
  display:inline-block; margin-top:4px; padding:1px 6px; border:1px solid var(--lijn);
  border-radius:3px; font:500 11px/1.4 var(--cijfers); color:var(--inkt-2); font-weight:500;
}
.mb-cel select{
  font:14px/1.3 inherit; padding:4px 6px; border:1px solid var(--lijn);
  border-radius:var(--radius); background:var(--invoer); color:var(--inkt); min-width:110px;
}
/* Smaller gezet dan het bedrijf: een stip, zodat je de uitzonderingen ziet. */
.mb-cel{position:relative;}
.mb-cel.afwijkend::after{
  content:""; position:absolute; top:10px; right:6px; width:7px; height:7px;
  border-radius:50%; background:var(--signaal);
}
.mb-cel.bezig select{opacity:.5;}
.mb-cel.bewaard select{border-color:var(--gereed, #4A7C59); box-shadow:0 0 0 2px rgba(74,124,89,.25);}
/* Toegang intrekken staat onder de naam: het hoort bij de persoon, niet bij
   een planning, en zo schuift hij niet buiten beeld bij veel planningen. */
.mb-intrekken{margin-top:4px;}
.mb-intrekken .linkknop{
  background:none; border:0; padding:0; font:400 12px/1.3 inherit; color:var(--inkt-3);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.mb-intrekken .linkknop:hover{color:var(--signaal);}

.mb-ingetrokken summary{cursor:pointer; color:var(--inkt-2); font-size:14px;}
.mb-ingetrokken ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.mb-ingetrokken li{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 10px; background:var(--vlak); border-radius:var(--radius); color:var(--inkt-2);}

/* Eén inhuurformulier: velden naast elkaar, op een telefoon onder elkaar. */
.mb-inhuur{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px 12px;
  align-items:end; padding:12px; background:var(--vlak); border-radius:var(--radius);
}
.mb-inhuur label{display:flex; flex-direction:column; gap:4px;
  font:500 10.5px/1.2 var(--cijfers); letter-spacing:.1em; text-transform:uppercase; color:var(--inkt-2);}
.mb-inhuur label .bij{text-transform:none; letter-spacing:0; font-weight:400; color:var(--inkt-3);}
.mb-inhuur input, .mb-inhuur select{
  font:14px/1.3 inherit; text-transform:none; letter-spacing:0; padding:6px 8px;
  border:1px solid var(--lijn); border-radius:var(--radius); background:var(--invoer); color:var(--inkt);
}
.mb-lijst{width:100%; border-collapse:collapse; font-size:14px;}
.mb-lijst th{font:500 10.5px/1 var(--cijfers); letter-spacing:.13em; text-transform:uppercase;
  color:var(--inkt-2); text-align:left; padding:8px 10px; border-bottom:1px solid var(--lijn);}
.mb-lijst td{padding:8px 10px; border-bottom:1px solid var(--lijn); vertical-align:middle;}
.mb-lijst td.rechts{text-align:right;}
.mb-lijst tr.vervallen-regel td{color:var(--inkt-3);}
@media (max-width:700px){
  .mb-raster .mb-mens{min-width:150px;}
  .mb-lijst thead{display:none;}
  .mb-lijst tr{display:grid; grid-template-columns:1fr auto; padding:6px 0; border-bottom:1px solid var(--lijn);}
  .mb-lijst td{border:0; padding:2px 4px;}
}

/* ---------- woordenlijst en vertaalspel (planning/vertaalspel.py) ---------- */
.vertalingen .vt-stand{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0 18px;}
.vertalingen .vt-stand p{margin:0;}
.vt-meter{width:180px; height:8px; border-radius:4px; background:var(--vlak); border:1px solid var(--lijn); overflow:hidden;}
.vt-meter span{display:block; height:100%; background:var(--gereed);}
.vt-tabel input[type=text]{width:100%; box-sizing:border-box;}
.vt-tabel .vt-voorbeeld span{display:block;}
.vt-tabel .vt-voorbeeld .bij{margin-top:2px;}
.vertaalspel .vs-voortgang{display:flex; gap:6px; margin:6px 0 16px;}
.vertaalspel .vs-voortgang span{flex:1; height:6px; border-radius:3px; background:var(--vlak); border:1px solid var(--lijn);}
.vertaalspel .vs-voortgang span.nu{background:var(--inkt-3);}
.vertaalspel .vs-voortgang span.gedaan{background:var(--gereed); border-color:var(--gereed);}
.vs-kaart{border:1px solid var(--lijn); border-radius:var(--radius); padding:18px 20px; background:var(--papier);}
.vs-kaart .vs-teller{margin:0; font:500 10.5px/1 var(--cijfers); letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-3);}
.vs-kaart .vs-woord{margin:8px 0 2px; font-size:26px; font-weight:700;}
.vs-kaart .vs-gebruik{margin:0 0 14px;}
.vs-kaart .vs-zin{background:var(--vlak); border-radius:var(--radius); padding:10px 12px; margin-bottom:14px;}
.vs-kaart .vs-zin p{margin:0;} .vs-kaart .vs-zin p + p{margin-top:6px;}
.vs-kaart .vs-zin .bij{display:inline-block; width:22px;}
.vs-kaart .vs-invoer{display:flex; flex-direction:column; gap:4px; margin-bottom:14px;}
.vs-kaart .vs-invoer input{font-size:16px; padding:8px 10px;}
.vs-klaar .vs-planningen{list-style:none; padding:0; margin:0 0 12px;}
.vs-klaar .vs-planningen li{padding:5px 0; border-bottom:1px solid var(--lijn);}
.vs-uitnodiging{margin:18px 0 0; padding:12px 14px; border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--vlak); display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.vs-uitnodiging p{margin:0; flex:1 1 320px;}
.vs-uitnodiging .knoppen{margin:0;}

/* Wat er met je eigen voorstel is gebeurd, bij de regel zelf (21-09-2026).
   Paars zolang Axiom nog kijkt, groen als het is doorgevoerd, rood als het is
   afgewezen. Staat er een potloodje bij, dan heeft Axiom een motivatie
   gegeven — die lees je in de tooltip en in de mail. */
.meldcel .uitslag{display:inline-block; font:500 10px/1 var(--cijfers); letter-spacing:.08em;
  text-transform:uppercase; padding:3px 6px; border-radius:3px; margin-right:6px; white-space:nowrap;}
.meldcel .uitslag.open{background:var(--voorstel); color:#fff;}
.meldcel .uitslag.goedgekeurd{background:var(--gereed); color:#fff;}
.meldcel .uitslag.afgewezen{background:var(--signaal); color:#fff;}
.meldcel .uitslag[title]{cursor:help;}

/* "niemand" achter Ingehuurd. De algemene regel `.paneel .nogniets` verbergt dat
   woord in de panelen van Opzet (daar hoort het alleen bij een leeg paneel), en
   nam dit kopje per ongeluk mee. Alex, 22 september (A01): "Ik zie geen niemand
   staan." */
.paneel .inhuurbij summary .nogniets{display:inline; margin-left:6px;}

/* Waarschuwing bovenaan Beheer › Mensen: adressen met meer dan één account. */
.let-op-vak{border-left:3px solid var(--signaal); background:var(--vlak); padding:10px 14px; margin:10px 0 16px; font-size:14px;}
.let-op-vak p{margin:4px 0 6px;}
.let-op-vak ul{margin:0; padding-left:18px;}