/* Huisstijl Tameroord Veehouderij.
   Kleuren, letter en vormen komen uit het huisstijldocument; zie het ontwerp §3. */

@font-face {
  font-family: "Source Sans 3";
  /* Eén variabel bestand voor alle gewichten. Meegeleverd met de app en niet
     opgehaald bij Google: in de stal is er geen bereik, en dan moet de tekst er
     gewoon staan.

     Was Inter tot 19 augustus 2026. Tes koos Source Sans 3 uit een proef met
     vijf letters op zijn telefoon (/stukken/2026-08-19-design/). Hij is een slag
     warmer en rustiger dan Inter — meer het handschrift van een bedrijf dan van
     een dashboard — en even helder op klein glas. Wat hier het zwaarst telt:
     zijn cijfers staan net zo strak onder elkaar, en in deze app staan overal
     getallen in kolommen. */
  src: url("lettertype/source-sans-3.30164609c163.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --groen: #1B6B2E;
  --linde: #A8CC3A;
  --wit: #FFFFFF;
  --papier: #FFFFFF;
  --inkt: #22281F;
  --zacht: #6B7268;
  --lijn: #E4E7E1;
  /* Een vlak dat net iets terugvalt. --papier is wit en een taakkaart ook, dus
     een blok dat "ingesprongen" moet lijken heeft een eigen tint nodig. */
  --vlak: #F5F7F2;
  --amber: #D9A428;
  --rood: #C24A3B;

  /* De tinten die eerst als losse hexcode door de opmaak zwierven. Met een naam
     erop komt er nergens meer per ongeluk een tiende tint bij. */
  --groen-donker: #175A27;   /* een groene knop onder de muis */
  --groen-licht: #EEF5EA;    /* het vlak achter iets dat aanstaat */
  --amber-licht: #FDF6E3;    /* een melding om op te letten */
  --amber-inkt: #6B5310;     /* tekst op dat vlak */
  --rood-licht: #F8E9E6;
  --rood-donker: #A63C2E;
  --rust: #FBFCFA;           /* een taak die af is */
  --melk: #F7ECCF;           /* de melk in een ketel */
  --melk-rand: #E0C892;      /* de spiegel: waar de melk ophoudt */

  /* Vier maten om te lezen. Meer had de app niet nodig; er stonden er negen.
     Invulvelden staan apart op 16px: onder die maat zoomt Safari op de iPhone
     in zodra je een vakje aanraakt, en springt het scherm weg onder je duim. */
  --t-etiket: 12px;
  --t-hint: 13px;
  --t-tekst: 15px;
  --t-kop: 20px;
  --t-veld: 16px;
  /* Twee maten voor getallen die eruit moeten springen: het dagengetal op een
     tegel, en de wijzerplaat van een silo. Die stonden als 22, 26 en 30 los in
     de opmaak. */
  --t-groot: 22px;
  --t-reus: 28px;

  --rond: 6px;
  --rond-klein: 4px;
  /* Een merkje achter een naam: een pil, ongeacht hoe lang het woord is. Stond
     als 20px op vijf plekken, en dat is geen ronding maar een halve hoogte. */
  --rond-pil: 999px;
  --zij: 220px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 400 var(--t-tekst)/1.55 "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }

/* Eén kopjesstijl voor de hele app. Er waren er vier die elk net iets anders
   waren — 11 tegen 12 tegen 13 pixels, en drie verschillende letterafstanden.
   Dat is precies het soort verschil dat je niet ziet maar wel voelt. */
.etiket,
.zij-kopje,
.detail dt,
.ladingtabel th,
.staptabel th,
.tabel th {
  font-size: var(--t-etiket); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--zacht);
}

/* De tussenkop. Eén vorm voor de hele app, variant A uit de stijlronde van
   17 augustus 2026 — door Tes gekozen uit drie proefjes.

   Tes: "ik wil meer met kleuren in de titels zodat de titels er beter uitkomen,
   of de tussenlijnen om verdelingen op een pagina te maken." Dit doet allebei:
   het etiket is groen, de haarlijn eronder verdeelt de pagina in blokken.

   Hiervoor stonden er vier soorten naast elkaar — stappenkop (22×), voersoort
   (9×), ronde-kop (3×) en een kale h2 (3×) — en droeg geen enkele kleur. */
.kopje {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 28px 0 2px; padding-bottom: 6px;
  border-bottom: 1px solid var(--lijn);
  font-size: var(--t-etiket); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--groen);
}
/* De eerste op een pagina staat al onder de titel; die hoeft geen tweede gat. */
.kopje:first-of-type { margin-top: 16px; }

/* Wat er naast een kop staat: een tijd, een datum, een aantal. Klein en grijs —
   het is toelichting en geen kop, en in hoofdletters leest een datum niet. */
.bij {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: var(--t-hint); color: var(--zacht);
}
/* Naar de overkant van de regel: wie er staat, of een link om aan te passen. */
.rechts { margin-left: auto; }

/* Cijfers die onder elkaar horen te staan. Zonder tabular-nums is een 1 smaller
   dan een 8 en rafelt een kolom met bedragen. */
.getal, time, .ladingtabel td, .ladingtabel th { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- logo */

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo img { width: 34px; height: 34px; display: block; }
.logo-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.logo-tekst b {
  font-weight: 600; font-size: 14px; letter-spacing: 0.11em; color: var(--groen);
}
.logo-tekst i {
  font-style: normal; font-weight: 400; font-size: 9px;
  letter-spacing: 0.19em; color: var(--zacht);
}
/* Op het inlogscherm staat het merk gestapeld en gecentreerd: beeldmerk boven,
   naam eronder. Dat is de enige plek waar het logo groot mag — zie huisstijl. */
.logo--groot {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.logo--groot img { width: 112px; height: 112px; }
.logo--groot .logo-tekst { align-items: center; text-align: center; gap: 3px; }
.logo--groot .logo-tekst b { font-size: 22px; letter-spacing: 0.15em; }
.logo--groot .logo-tekst i { font-size: 12px; letter-spacing: 0.24em; }

/* -------------------------------------------------------- de indeling */
/* Modules bovenlangs, schermen links. Zo passen Voer, Grasland en Saldo er
   later bij zonder dat de indeling om moet. Zie ontwerp §4. */

/* Drie kolommen, de buitenste even breed. Zo staat het merk in het midden van
   het scherm en niet in het midden van wat er naast de knop overblijft — dat
   laatste laat het merk meeschuiven met de lengte van het woord ernaast. */
.bovenbalk {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 52px; padding: 0 16px;
  background: var(--wit); border-bottom: 1px solid var(--lijn);
}

.merk { grid-column: 2; justify-self: center; text-decoration: none; }

/* Expliciet in de derde kolom, want de eerste blijft leeg en grid vult anders
   van links af. Werkt ook op het startscherm, waar het merk in de balk
   ontbreekt omdat het daar groot in de pagina staat. */
.balk-rechts {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 12px;
}

/* Dezelfde vorm als de terugknop op de sub-schermen: groen op lichtgroen, ronde
   hoeken, hoog genoeg voor een duim. Eén taal voor "hier ga je heen". */
.balk-menu {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 12px;
  border-radius: var(--rond);
  background: var(--groen-licht); color: var(--groen);
  font-size: var(--t-tekst); font-weight: 500; text-decoration: none;
  white-space: nowrap;
}
.balk-menu:hover, .balk-menu:focus-visible { background: var(--groen); color: var(--wit); }

.wie {
  font-size: var(--t-hint); font-weight: 500; color: var(--zacht);
  white-space: nowrap;
}

/* De omgevingsknop: waar je nu bent, en uitklappen naar de rest. Stiller dan
   de knop Menu ernaast — een omlijning in plaats van een groen vlak. Twee
   groene knoppen naast elkaar vechten om dezelfde aandacht, en van deze twee
   is Menu de knop die je de hele dag gebruikt. */
.omgeving { position: relative; }
.omgeving-knop {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 12px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--wit); color: var(--inkt);
  font-size: var(--t-hint); font-weight: 500;
  white-space: nowrap; cursor: pointer;
  list-style: none;  /* het driehoekje van <summary> weg */
}
.omgeving-knop::-webkit-details-marker { display: none; }
.omgeving-knop:hover { border-color: var(--groen); color: var(--groen); }
.omgeving[open] .omgeving-knop { border-color: var(--groen); color: var(--groen); }
.omgeving-pijl { color: var(--zacht); font-size: var(--t-etiket); }

/* Het lijstje hangt onder de knop en duwt de balk niet uit elkaar. Rechts
   uitgelijnd, want de knop staat rechts en een lijst die naar buiten het
   scherm uitklapt is geen lijst. */
.omgeving-lijst {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  min-width: 100%; display: flex; flex-direction: column;
  padding: 4px; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  box-shadow: 0 6px 18px rgba(34, 40, 31, 0.12);
}
.omgeving-keuze {
  padding: 8px 12px; border-radius: var(--rond-klein);
  color: var(--inkt); text-decoration: none;
  font-size: var(--t-hint); white-space: nowrap;
}
.omgeving-keuze:hover, .omgeving-keuze:focus-visible { background: var(--vlak); }
/* Waar je nu bent: hetzelfde groen als het aanstaande tabblad in de zijkolom. */
.omgeving-keuze--hier { background: var(--groen-licht); color: var(--groen); font-weight: 600; }
/* De streep boven het Bedrijfsblad in het uitklapmenu: dat is geen vierde
   omgeving maar een uitdraai over de drie erboven. */
.omgeving-streep { display: block; height: 1px; background: var(--lijn); margin: 4px 0; }

/* ------------------------------------------------------------ het bedrijfsblad
   Per tak een kop met een doorklik, en daaronder dezelfde kerntegels als op het
   rapport — het is immers dezelfde vorm. `.tak` bestond al voor de takbalk,
   vandaar `.bladtak`. */
.bladtak { margin-top: 26px; }
.bladtakkop { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; }
.bladtakkop .kopje { margin-bottom: 6px; }
.bladtakkop a { font-size: var(--t-hint); color: var(--zacht); }
.kerntegel .naam { font-size: var(--t-hint); color: var(--zacht); }
.kerntegel .getal { font-size: var(--t-groot); font-weight: 600; line-height: 1.2; }
.kerntegel .onder { font-size: var(--t-hint); color: var(--zacht); }

/* Uitloggen in de balk. Staat er alleen op schermen zonder zijkolom — dus op
   het startscherm, waar het anders helemaal niet kan. */
.balk-uit {
  font-size: var(--t-hint); color: var(--zacht); text-decoration: none;
}
.balk-uit:hover, .balk-uit:focus-visible { color: var(--inkt); text-decoration: underline; }

.raamwerk { display: flex; align-items: flex-start; }

.zijkolom {
  display: flex; flex-direction: column;
  width: var(--zij); flex: none; padding: 12px 0 16px;
  border-right: 1px solid var(--lijn);
}
.zij {
  padding: 8px 14px;
  color: var(--inkt); text-decoration: none; font-size: var(--t-tekst);
  border-left: 3px solid transparent;
}
.zij:hover { background: var(--vlak); }
.zij--aan {
  background: var(--groen-licht); border-left-color: var(--groen);
  color: var(--groen); font-weight: 600;
}
.zij-streep { height: 1px; background: var(--lijn); margin: 12px 14px; }
.zij--uit { color: var(--zacht); }

/* Kopjes verdelen de lange kolom van Beheer in blokken. De haarlijn eronder
   doet het werk, niet de kleur — vier gekleurde balken in één kolom zou net zo
   onrustig zijn als geen kopjes. Het eerste kopje staat bovenaan en heeft de
   ruimte erboven niet nodig. */
/* De kop boven een groepje schermen draagt de huisstijlkleur. Tes,
   23 september 2026: "maak verkoop en aanvragen maar groen in het linker
   menu." Een grijze kop tussen grijze regels valt weg; groen zegt dat het een
   kop is en geen scherm waar je op kunt klikken. */
.zij-kopje { display: block; margin: 20px 14px 6px; color: var(--groen); }
.zij-kopje::after {
  content: ""; display: block; height: 1px; background: var(--lijn); margin-top: 5px;
}
.zij-kopje:first-child { margin-top: 2px; }

main { flex: 1; min-width: 0; padding: 20px 16px 48px; max-width: 900px; }
/* De uitgelogde schermen hebben geen kolommen om zich heen. Dan mag main de
   hele bladzijde vullen, anders past het gecentreerde kaartje er niet in. */
body > main { padding: 0; max-width: none; }
/* Het startscherm heeft wél een balk maar geen kolommen, en viel daardoor onder
   de regel hierboven: de blokken plakten tegen de linkerrand en hun groene rand
   liep het scherm af. Die regel is voor het inlogkaartje bedoeld, niet hiervoor. */
/* Gecentreerd, op verzoek van Tes. Op een breed scherm stond alles tegen de
   linkerrand met een halve bladzijde leegte ernaast; de andere schermen hebben
   hun zijkolom links en vallen daardoor vanzelf goed. */
.bovenbalk ~ main { padding: 20px 16px 48px; max-width: 900px; margin: 0 auto; }

/* Op een telefoon past die kolom niet naast de inhoud. Hij schoof er vroeger
   onder een knopje vandaan, maar dat was een tweede menu dat iets ánders liet
   zien dan de blokkenpagina: alleen de module waar je toevallig in zat. Nu is
   de blokkenpagina daar hét menu, en de knop rechtsboven brengt je erheen.
   Even veel tikken, één denkwijze minder. Zie het ontwerp van 10 augustus. */
@media (max-width: 899px) {
  .zijkolom { display: none; }
  .wie { display: none; }
}

/* De takbalk: de buren binnen dezelfde tak. Hij vervangt de kolom links op een
   telefoon, waar die kolom niet past. Tes, 17 augustus 2026: "als ik bij
   voorraad zit wil ik gemakkelijk naar bestellijst kunnen."

   Hij plakt onder de bovenbalk, zodat je hem halverwege een lange lijst nog
   hebt. Onder de bovenbalk in z-index: schuift er iets langs, dan hoort de
   bovenbalk bovenop te liggen en niet andersom. */
.takbalk {
  position: sticky; top: 52px; z-index: 20;
  display: flex; gap: 4px;
  padding: 0 12px;
  background: var(--wit); border-bottom: 1px solid var(--lijn);
  /* Onder Beheer hangen tien schermen; die passen op geen telefoon naast
     elkaar. Dan schuif je de balk opzij in plaats van de tekst te verkleinen. */
  overflow-x: auto;
  scrollbar-width: none;
}
.takbalk::-webkit-scrollbar { display: none; }

.tak {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px;
  color: var(--zacht); text-decoration: none;
  font-size: var(--t-tekst); white-space: nowrap;
  /* De streep staat er ook doorzichtig onder de andere tabbladen: anders
     verspringt de rij een paar tellen zodra je op een ander scherm komt. */
  border-bottom: 3px solid transparent;
}
.tak:hover { color: var(--inkt); }
.tak--aan { color: var(--groen); font-weight: 600; border-bottom-color: var(--groen); }

@media (min-width: 900px) {
  .zijkolom { position: sticky; top: 52px; }
  /* Op een computer doet de kolom links dit werk al. */
  .takbalk { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- inloggen */
/* Midden op het scherm, op telefoon en computer hetzelfde. */

.midden {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px 16px;
}
.midden-kaart { width: 100%; max-width: 360px; text-align: center; }
.midden-kaart form { text-align: left; margin-top: 26px; }
/* Het merk is nu de blikvanger; de naam van de app mag daaronder rustig blijven. */
.midden-kaart h1 { font-size: var(--t-tekst); font-weight: 400; color: var(--zacht); margin: 20px 0 0; }
.midden-onder { margin-top: 18px; font-size: var(--t-hint); }
.midden-onder a { color: var(--zacht); }

/* ------------------------------------------------------------- taken */

/* De kop van de dagpagina: pijl, dag, pijl. Verder niets. Er stonden er acht,
   en het woord "Vandaag" stond er drie keer — in het tabblad, in de titel en in
   de datumregel eronder. Tes, 19 augustus 2026: "heel veel op een klein stukje
   scherm." */
.dagkop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* De titel/knop rechts van de kop, zoals "Wijzigen" of "Nieuwe machine". Zonder
   deze regel had het vak geen enkele opmaak: op een telefoon duwde `.dagkop`
   hem tegen de ondertitel aan in plaats van een eigen regel te geven zodra het
   niet meer past. Zelf ook een rij: staat er meer dan één knop — op de
   klantkaart Wijzigen naast het aan/uit zetten — dan kwam het formulier eronder
   te hangen, want een formulier is een blok. */
.dagkop-rechts { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* De dag is zelf de knop. Het datumvak ligt er onzichtbaar overheen en vult de
   hele plek, zodat je met een duim de kiezer van je telefoon opent. Het moet uit
   de gewone veldopmaak gehaald worden: die geeft het een rand, een hoogte en een
   achtergrond, en dan staat er een invulvak waar een titel hoort. */
.dagkeuze { position: relative; flex: 1; min-width: 0; text-align: center; }
.dagkeuze h1 { margin: 0; }
.dagkeuze input[type="date"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: none; background: none;
  opacity: 0; cursor: pointer;
}
/* Met de toetsenbordrand eromheen moet hij wel te zien zijn. */
.dagkeuze input[type="date"]:focus-visible { opacity: 1; outline: 3px solid var(--groen); }
/* Chrome en Safari zetten hun kalendericoontje rechts in het vak; hier is het
   hele vlak de knop, dus dat mag over de volle breedte. */
.dagkeuze input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.dagkeuze .knop { margin-top: 8px; }

/* Hoeveel er nog ligt. Rustige tekst en geen groen blok: dit kijk je één keer
   aan, en het werk eronder is waar je voor komt. */
.dagteller { margin: 2px 0 12px; text-align: center; color: var(--zacht); font-size: var(--t-hint); }
h1 { font-size: var(--t-kop); margin: 0; }
/* De datum onder een titel, en de ene regel die zegt wát je op dit scherm ziet.
   Dezelfde vorm, want het is allebei een bijschrift bij de titel. */
.datum, .inleiding { margin: 2px 0 0; color: var(--zacht); font-size: var(--t-hint); }

/* De kop van een scherm: titel met de ⓘ ernaast. Zestien schermen openden met
   meer dan 25 woorden uitleg, Silo's met 58 — vier tot zes regels scrollen op
   een telefoon voordat je iets ziet staan, elke dag opnieuw, terwijl je die
   uitleg één keer nodig had. Eén regel blijft staan; de rest zit achter dezelfde
   ⓘ als de werkinstructie bij een taak. */
.paginakop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.paginakop h1 { margin: 0; }
/* De ene regel staat altijd meteen onder de titel. */
.paginakop > .inleiding { order: 1; flex-basis: 100%; }
/* Opengeklapt neemt de uitleg de hele regel, en gaat onder die ene regel staan.
   Zonder dit staat hij in een kolom naast de titel, drie centimeter breed, en
   duwt hij de regel die je altijd ziet naar onderen. Zelfde streek als bij
   .taak-acties, met een volgorde erbij. */
.paginakop > details[open] { order: 2; flex-basis: 100%; }
.dienst {
  background: var(--groen); color: var(--wit);
  padding: 4px 10px; border-radius: var(--rond-pil); font-size: var(--t-hint); white-space: nowrap;
}

/* Een blok per ronde. De naam van wie hem draait staat erboven, want dat is
   het eerste wat je 's ochtends wilt weten. De kop zelf is de gewone .kopje —
   dit was de plek waar het groene etiket met een lijn eronder vandaan komt. */
.ronde { margin-top: 26px; }
.ronde-naam {
  font-size: var(--t-etiket); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--groen);
}
/* Het merkje achter een naam: de silo bij een grondstof, het aantal personen
   bij een bekwaamheid, de tijd bij een ronde. Het heette `ronde-tijd` en werd
   87 keer gebruikt — allang niet meer alleen voor een tijd. Twee vormen: kaal
   (grijze tekst) en een pil met een kleur, voor als de stand ertoe doet. */
.merkje { font-size: var(--t-etiket); color: var(--zacht); }
.merkjes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.merkje--pil {
  padding: 3px 9px; border-radius: var(--rond-pil); font-weight: 600;
  background: var(--vlak); color: var(--zacht);
}
.merkje--groen { background: var(--groen-licht); color: var(--groen); }
.merkje--amber { background: var(--amber-licht); color: var(--amber-inkt); }
/* Een telefoonnummer in zo'n etiket is aanklikbaar: het derdenlijstje is er
   voor het belrondje op de telefoon in de stal, en dan wil je een nummer niet
   overtypen. Verder blijft het het grijze etiket dat het was — een streepje
   eronder is genoeg, een knop zou de lijst overstemmen. */
a.merkje { color: var(--zacht); text-decoration: underline; }
/* Zonder opslagplaats kan Voorraad niets tonen. Dat mag opvallen, want het is
   invoerwerk dat blijft liggen. */
.merkje--let-op { color: var(--amber-inkt); }

/* Wie de ronde draait, aan de overkant van de kop. Een naam hoort niet in
   hoofdletters: sinds de kop een etiket is erfde "Tes" de hoofdletters en stond
   er TES, alsof er geroepen werd. */
.ronde-wie {
  margin-left: auto; font-size: var(--t-hint); font-weight: 500; color: var(--inkt);
  text-transform: none; letter-spacing: 0;
}

/* Een link die naast iets anders staat en niet de hoofdzaak is: wijzigen,
   aanpassen, terug. Zonder streep en klein, want anders schreeuwt "Aanpassen"
   harder dan de dag waar hij bij hoort. Stond al in twee sjablonen zonder dat
   er iets bij hoorde. */
.klein {
  font-size: var(--t-hint); font-weight: 500; color: var(--zacht);
  text-decoration: none; white-space: nowrap;
}
.klein:hover { color: var(--groen); text-decoration: underline; }
/* In de agenda naar de rechterkant, tegenover de dag. */
.agendadag .kopje .klein { margin-left: auto; }
.ronde-wie--leeg { color: var(--amber); font-weight: 400; }

/* Eén strakke lijst met scheidingslijnen, en geen losse kaartjes meer. Tot
   1 september 2026 had elke taak een rand, een eigen achtergrond en acht punten
   lucht eromheen; met vijfendertig taken is dat vijfendertig keer een doosje
   tekenen om iets wat één regel is. De ronde van 19 augustus noemde het al als
   volgende stap, en Tes zegt "onoverzichtelijk" over precies dit patroon: alles
   even zwaar. De lijn tussen twee taken doet wat de rand deed, met een tiende
   van de inkt. */
.taken { list-style: none; padding: 0; margin: 10px 0 0; }

/* Het vinkje staat rechts, op verzoek van Tes. Je leest de naam eerst en tikt
   daarna af; met de telefoon in één hand valt de rechterrand ook het beste
   onder de duim. */
.taak {
  display: grid; grid-template-columns: 4px 1fr auto auto auto 44px;
  /* Twee rijen: de taak zelf, en daaronder de uitleg en de stappen als die er
     zijn. Zonder die tweede rij valt elk extra element in een onzichtbare rij in
     de verkeerde kolom.

     Het kruisje en het naamplaatje stonden tot 1 september 2026 op de tweede
     rij, en die was daarmee altijd aanwezig en altijd 44 punten hoog — op
     Vandaag vijfendertig keer. Ze staan nu op de regel zelf, links van het
     vinkje, en de tweede rij is er alleen nog als er uitleg of stappen zijn. */
  grid-template-areas:
    "streep naam tijd wie weg vink"
    "streep acties acties acties acties acties";
  align-items: center; gap: 6px 12px;
  border-bottom: 1px solid var(--lijn);
  padding: 8px 0;
}
.taken > .taak:last-child { border-bottom: 0; }

.streep { align-self: stretch; grid-area: streep; }

/* 44 punten, de ondergrens van Apple en Android. Dit is het knopje dat in deze
   app het vaakst wordt geraakt, vaak met één hand en met natte handen; het stond
   op 34 en dan mik je ernaast. `test_stijl.py` bewaakt de maat. */
.vink {
  width: 44px; height: 44px;
  border: 2px solid var(--lijn); border-radius: var(--rond);
  padding: 0;
  background: var(--papier); cursor: pointer;
}
.vink:focus-visible { outline: 3px solid var(--groen); outline-offset: 2px; }
.vink--uit { border-style: dashed; cursor: default; }
.vink.mislukt { border-color: var(--rood); border-style: dashed; }

/* Gedaan: lindegroen vlak met een wit vinkje. Van een afstand zie je in één
   oogopslag wat er nog staat — daar is die lijst voor. */
.vink--aan {
  display: grid; place-items: center;
  background: var(--linde); border-color: var(--linde);
}
.vink--aan svg { width: 26px; height: 26px; }
.vink--aan path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.taak--gedaan { background: var(--rust); }
.taak--gedaan .naam { color: var(--zacht); text-decoration: line-through; }

.naam { font-size: var(--t-tekst); font-weight: 500; color: inherit; text-decoration: none; }
/* Een EAN-code: dertien cijfers waarvan de eerste zes bij elke code van Tes
   hetzelfde zijn (742847). Dat begin staat lichter en er zit een spatie tussen,
   zodat je oog op de zeven valt die verschillen. Zie zuivel/templatetags/
   streepjescode.py. */
.ean { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ean-vast { color: var(--zacht); font-weight: 400; margin-right: 0.3em; }
a.naam:hover, a.naam:focus-visible { text-decoration: underline; }

/* Een link. Tot 1 september 2026 stond hier niets: er waren acht plaatselijke
   regels (.kolomnaam a, .grondstofnaam a, .postje a …) en elk scherm dat er zelf
   geen bedacht had kreeg het blauw van de browser, inclusief paars nadat je er
   een keer op getikt had. Zo stonden Bestellingen, Producten, Facturen, Kratten
   en Kratsoorten er in een kleur die verder nergens in de app voorkomt.

   Een link in een lijst is een naam: donker, geen streep, iets zwaarder — precies
   .naam hierboven. Alles wat een eigen klasse draagt (.knop, .blok, .tak, .terug)
   weegt zwaarder en houdt dus zijn eigen vorm. */
main a { color: inherit; text-decoration: none; font-weight: 500; }
main a:hover, main a:focus-visible { text-decoration: underline; }

/* Midden in een zin moet je hem juist wél zien. Daar is een streep het enige
   wat een link van gewone tekst onderscheidt — kleur alleen is te weinig. Geen
   :not() hier: dan zou de regel zwaarder wegen dan .terug a en zou de pil terug
   alsnog een streep krijgen. */
main p a, main .hint a, main figcaption a {
  font-weight: 400; text-decoration: underline;
  text-decoration-color: var(--linde); text-underline-offset: 2px;
}

.terug { margin: 0 0 8px; }

.detail { margin: 16px 0 24px; }
.detail dt { margin-top: 14px; }
.detail dd { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; }

.stip {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rood); margin-right: 6px;
}
time { color: var(--zacht); font-size: var(--t-etiket); }

.leeg { color: var(--zacht); }

/* Het verslag van een overleg. Smaller dan de rest van het scherm: een lap
   tekst over de volle breedte van een laptop leest niet, en hier komt straks
   een uitgeschreven opname in te staan — die is lang. */
.verslag { max-width: 62ch; line-height: 1.55; }
.verslag p { margin: 0 0 0.8em; }

/* ----------------------------------------------------- knoppen en velden */

/* Hoe een knop eruitziet hangt aan zijn klasse, nooit aan het feit dát hij een
   knop is. Deze regel stond tot 19 augustus 2026 ook op `button[type="submit"]`,
   en een keuze op het element (0,2,1) wint van een klasse (0,1,0): daarmee deden
   `.knop--zacht` en `.knop--gevaar` in een formulier niets. Twintig knoppen die
   wit of rood horen te zijn stonden groot en groen op het scherm — op Mensen was
   "Nieuwe code" vijf keer de grootste knop en "Nieuw account" een bleek randje,
   en "Ja, verwijderen" was net zo uitnodigend als Opslaan. Het is drie keer per
   pagina apart gelapt voordat iemand de oorzaak opzocht; `test_stijl.py` bewaakt
   het nu. Elke knop draagt dus een klasse, en het stap-vinkje op een project
   houdt vanzelf zijn eigen `.vink`. */
.knop {
  min-height: 46px; padding: 12px 20px;
  border: none; border-radius: var(--rond);
  background: var(--groen); color: var(--wit);
  font: inherit; font-weight: 600; cursor: pointer;
}
.knop:hover { background: var(--groen-donker); }
/* De tweede knop: wit met een groene rand en groene tekst. Tes, 24 augustus
   2026, over Boeken en Leeg op de voorraadtegel: "het is heel onduidelijk te
   zien dat het knoppen zijn. Qua design een groene rand eromheen?" Met alleen
   een grijs lijntje in de kleur van elke andere rand op het scherm las hij ze
   als etiket en niet als knop. De groene rand is de huisstijlkleur die verder
   alleen op knoppen zit, dus hij zegt "hier kun je op drukken" zonder de
   hoofdknop te overstemmen. */
.knop--zacht {
  background: var(--wit); color: var(--groen);
  border: 1.5px solid var(--groen); font-weight: 600;
}
.knop--zacht:hover { background: var(--groen-licht); }
/* Een knop in een tabelregel. De gewone knop is 46 px hoog en maakt van zeven
   regels zeven blokken; deze past op een regel zonder hem uit elkaar te
   trekken. Alleen voor een knop die per regel terugkomt. */
.knop--klein { min-height: 30px; padding: 5px 12px; font-size: var(--t-etiket); }
/* De enige kleur in de app die niet van ons is. Dat is de bedoeling: je moet
   in één oogopslag zien dat je de app verlaat. */
.knop--whatsapp { background: #25D366; color: #08331A; }
.knop--whatsapp:hover { background: #1EBE5A; }
a.knop { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* De derde vorm: een knop die eruitziet als een link. Voor een handeling die er
   moet zijn maar zelden nodig is — het opnieuw toestemming geven bij Google
   staat er voor als de sleutel ooit sneuvelt, en dat is één keer in een jaar.
   Als knop tussen de gewone knoppen leest hij als een verzoek: Tes gaf op 2
   september 2026 opnieuw toestemming omdat de knop erom leek te vragen, en
   dacht daarna dat zijn koppeling los had gezeten. Het vaste ritme klein, de
   uitzondering groot. */
.tekstknop {
  background: none; border: 0; padding: 0; margin-top: 6px;
  color: var(--zacht); font: inherit; font-size: var(--t-hint);
  text-decoration: underline; cursor: pointer;
}
.tekstknop:hover, .tekstknop:focus-visible { color: var(--inkt); }

/* Het kruisje achter een bestelregel. Een tekstknop zonder streep en zonder
   marge: hij staat naast een bedrag in dezelfde cel, en een onderstreept
   kruisje leest als een link. Groter raakvlak dan de letter zelf — dit wordt
   op een telefoon aangetikt. */
.wisknop {
  margin: 0 0 0 8px; text-decoration: none; padding: 2px 6px;
  font-size: var(--t-veld); line-height: 1;
}
.wisknop:hover, .wisknop:focus-visible { color: var(--amber-inkt); }

/* De stand van een koppeling, in één regel bovenaan het scherm. Zegt wat er is
   en niet wat je nog moet doen. */
.verbonden { color: var(--groen); font-weight: 600; margin: 22px 0 0; }

input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="email"], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--wit); color: var(--inkt);
  font: inherit; font-size: var(--t-veld);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--groen); outline-offset: -1px; border-color: var(--groen);
}
label { display: block; font-size: var(--t-hint); font-weight: 500; margin-bottom: 4px; }

/* Het aanvinkvakje van de app. Zonder dit tekent de browser een blauw vakje van
   dertien punten: op Nieuw account stonden er zeven onder elkaar, de kleinste
   aanraakvlakken van de hele app, in de stijl van de browser terwijl er op
   Vandaag al een eigen vinkje was. Dezelfde vorm als daar — wit met een rand,
   lindegroen met een wit vinkje zodra het aanstaat — alleen kleiner, want hier
   draagt de hele regel het aanraakvlak. */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 26px; height: 26px; min-height: 0; margin: 0; padding: 0;
  border: 2px solid var(--lijn); border-radius: var(--rond-klein);
  background: var(--wit) no-repeat center; background-size: 18px 18px;
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--linde); border-color: var(--linde);
}
/* Hetzelfde haakje als in `.vink--aan`, maar als achtergrond: een pseudo-element
   op een invoerveld tekent niet elke browser. */
input[type="checkbox"]:checked {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13l4.5 4.5L19 7" fill="none" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
input[type="radio"]:checked { background-image: radial-gradient(circle, var(--wit) 30%, transparent 32%); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 3px solid var(--groen); outline-offset: 2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: default; }

/* De regel om een vakje draagt het aanraakvlak. Het vakje mag klein blijven
   zolang je de hele regel raakt — en die regel is precies wat Django rondom
   een keuze zet. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 0;
  font-size: var(--t-tekst); font-weight: 400; cursor: pointer;
}
.helptext, .helptekst { display: block; font-weight: 400; font-size: var(--t-hint); color: var(--zacht); }
/* Eén veld met zijn label en zijn uitleg. Vervangt de <p> die Django er zelf
   omheen zette; zie web/templates/django/forms/p.html. */
.veldblok { margin: 0 0 14px; }
/* De foutmelding onder een veld. Django tekent er een <ul class="errorlist"> van
   en die stond nergens in dit bestand — dus kreeg een afgekeurd formulier de
   opsommingstekens van de browser, midden tussen de invulvakken. */
.errorlist {
  list-style: none; margin: 0 0 6px; padding: 8px 10px;
  background: var(--rood-licht); color: var(--rood-donker);
  border-radius: var(--rond); font-size: var(--t-hint);
}
form p { margin: 0 0 16px; }

/* Eén lijstregel voor de hele app. Er waren er vijf — categorieen,
   mensenlijst, bestandenlijst, routelijst en regels — die allemaal hetzelfde
   deden: een rij met een haarlijn eronder. Het enige verschil was tien of
   twaalf punten lucht, en dat is precies het soort verschil dat je voelt maar
   niet aanwijst.

   flex-wrap: wrap hoort erbij. Zonder wrap perst een rij met vier velden op een
   telefoon elk veld in een smalle kolom en breekt "Nieuw dak leggen" of een
   telefoonnummer middenin een woord af; met wrap valt zo'n veld in zijn geheel
   op een eigen regel. */
.lijst { list-style: none; padding: 0; margin: 16px 0 0; }
.lijst > li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
}
/* `display` van de browser wint het niet van `display` hierboven, dus een regel
   met `hidden` bleef gewoon staan. Zo bleef de vergaderruimte onder "Ruimte
   erbij" staan terwijl je hem net als hoofdruimte had gekozen — Tes,
   23 september 2026. */
.lijst > li[hidden] { display: none; }
/* Met een kleurstreepje ervoor: het streepje loopt van boven naar onder mee. */
.lijst--streep > li {
  display: grid; grid-template-columns: 4px 1fr; gap: 12px; align-items: stretch;
}
.lijst--kaal > li { grid-template-columns: 1fr; }
/* Met een knop rechts naast de tekst, zoals de PDF op de klantkaart van de
   verhuur. Een lege regel ("Nog geen facturen.") heeft geen knop en loopt door. */
.lijst--kaal.lijst--metknop > li { grid-template-columns: 1fr auto; align-items: center; }
.lijst--kaal.lijst--metknop > li.leeg { grid-template-columns: 1fr; }
/* Een lijst waarvan elke regel zelf een formulier is. `.lijst > li` is flex,
   maar het <form> daarbinnen is een gewoon blok: dan stapelen naam, vinkje,
   volgorde en knop onder elkaar, ook op een breed scherm. Vier categorieën
   vulden zo bijna twee telefoonschermen. Het formulier neemt hier de vorm van
   de regel over. */
.lijst--formulier > li > form {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 10px; width: 100%;
}
/* Een invulvak in zo'n regel is zo breed als wat erin komt. Zonder dit is elk
   vak 100 % en staat er alsnog één ding per regel — alleen dan met een lege
   strook ernaast. */
.lijst--formulier > li > form input[type="text"],
.lijst--formulier > li > form input[type="number"],
.lijst--formulier > li > form select { width: auto; min-width: 0; }
/* Een veld dat naast de rest van de regel hoort te staan in plaats van
   eronder. Nodig omdat `select` hierboven honderd procent breed is: op de
   codelijst duwde de keuzelijst de knop "Laat zien" naar de volgende regel en
   viel de zoekregel in drieën uiteen. Als eigen klasse en niet op `.zoekregel
   select`: vier bestaande schermen hebben daar ook een keuzelijst staan, en
   die verbouwen hoort bij een ander karwei. */
.veld--smal { width: auto; min-width: 0; }
/* De groep rechts op de regel: vinkjes en getallen naast elkaar, niet onder
   elkaar. `label` is in deze app een blok, want boven een vak hoort het label
   erboven; op een regel is dat juist wat de regel uit elkaar trekt. */
.lijst--formulier .rechts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
  margin-left: auto;
}
.lijst--formulier .rechts label { margin-bottom: 0; }
.regeltekst { display: flex; flex-direction: column; gap: 4px; }
.vlek { width: 16px; height: 16px; border-radius: var(--rond-klein); flex: none; }

/* De knoppen onder een formulier: Opslaan links, Verwijderen helemaal rechts op
   dezelfde regel. Zo gevraagd door Tes op 19 augustus 2026; daarvoor stond
   Verwijderen eronder, achter een streep. Ze staan nu aan weerszijden van het
   scherm, en achter Verwijderen zit nog altijd een scherm dat vraagt of je het
   zeker weet.

   Verwijderen krijgt `rechts` (margin-left: auto). Rood is in deze app de kleur
   van "moet vandaag", dus de knop krijgt hem pas op het bevestigingsscherm —
   hier blijft hij een rode rand om wit. */
.formulierknoppen {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px;
}
.knop--gevaar { background: var(--wit); color: var(--rood); border: 1px solid var(--rood); }
.knop--gevaar:hover { background: var(--rood); color: var(--wit); }
.bevestiging .knop--gevaar { background: var(--rood); color: var(--wit); }
.bevestiging .knop--gevaar:hover { background: var(--rood-donker); }
.bevestiging { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.waarschuwing {
  background: var(--amber-licht); color: var(--amber-inkt); padding: 14px;
  border-radius: var(--rond); border-left: 4px solid var(--amber);
}

.fout { background: var(--rood-licht); color: var(--rood); padding: 12px; border-radius: var(--rond); }
/* flex en niet block: anders staat een knop die in een melding staat (zoals
   "Verholpen" bij een open storing) onder de tekst in plaats van ernaast. */
.melding {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--groen-licht); color: var(--groen); padding: 12px; border-radius: var(--rond);
}
/* Een storing die nog niet verholpen is, moet opvallen tussen het gewone
   groene meldingsvlak. Zelfde amber als het etiket .merkje--let-op. De tekst
   en de knop mogen uit elkaar: dat is waar bij deze ene melding wél iets te
   doen valt. */
.melding--let-op { background: var(--amber-licht); color: var(--amber-inkt); justify-content: space-between; }
.code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-groot); letter-spacing: 0.16em; font-weight: 600; color: var(--groen);
}

/* De code doorgeven. Grote knop eerst, de link eronder voor wie hem plakt. */
.doorgeven { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.doorgeven-kop { margin: 0; }
.doorgeven .knop--whatsapp { align-self: flex-start; }
.doorgeven-link { display: flex; gap: 8px; margin: 0; }
.doorgeven-link input { font-size: var(--t-veld); background: var(--wit); }
.doorgeven-link .knop { flex: none; }
.doorgeven-onder { margin: 0; font-size: var(--t-hint); }
.doorgeven-onder .code { font-size: var(--t-veld); }

@media (max-width: 560px) {
  .doorgeven .knop--whatsapp { align-self: stretch; }
  .doorgeven-link { flex-direction: column; }
}

/* ------------------------------------------------------------- mensen */

.verzoeken { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.verzoek {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--rond);
  background: var(--amber-licht); border: 1px solid var(--amber);
}


.mens { display: flex; flex-direction: column; gap: 2px; flex: 1 1 12rem; min-width: 0; }
.mens small { color: var(--zacht); font-size: var(--t-hint); }

/* Wat een rol geeft. Ter informatie onder de keuze voor de rol — er valt hier
   niets te zetten, dus het staat er ook niet als vinkjes bij. */
.rolrechten { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 12px 16px; }
.rolrechten legend { font-size: var(--t-hint); font-weight: 600; color: var(--zacht); padding: 0 6px; }
.rolrechten ul { list-style: none; padding: 0; margin: 0; }
.rolrechten li { font-size: var(--t-hint); padding: 3px 0; }
.rolrechten .mag { color: var(--inkt); }
.rolrechten .mag-niet { color: var(--zacht); }

/* ------------------------------------------------------------ rooster */

.rooster-dag {
  margin: 20px 0; padding: 14px 16px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
}
.rooster-dag h2 { margin: 0 0 10px; }
.rooster-regel {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px;
  margin: 0 0 8px;
}
.rooster-regel label { margin: 0; }
@media (max-width: 560px) {
  .rooster-regel { grid-template-columns: 1fr; gap: 4px; }
}

/* Rondes aanvinken op het taakregelformulier: een rij vakjes naast elkaar in
   plaats van vier regels onder elkaar. Dit stond op `ul#id_rondes` en heeft dus
   nooit iets geraakt — Django zet er een `div` omheen en geen `ul`. De keuzes
   stonden al die tijd gewoon onder elkaar. */
#id_rondes { display: flex; flex-wrap: wrap; gap: 8px; }
#id_rondes > div { flex: none; }
#id_rondes label {
  min-height: 44px;
  padding: 6px 14px; border: 1px solid var(--lijn); border-radius: var(--rond);
  font-weight: 400; margin: 0; cursor: pointer;
}

/* --------------------------------------------------------- taakregels */

/* Zoeken op naam. Het vak mag breed zijn: het is het eerste wat je doet als je
   een bepaalde taak zoekt, en op een telefoon wil je er niet naast tikken. */
.zoekbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px; }
/* Alles aanvinken en de knop, boven de openstaande bestellingen. */
.pakbonkeuze { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.pakbonkeuze label { display: flex; align-items: center; gap: 6px; }
/* Op de Rit staat hij in de kop, naast Vorige en Volgende dag. */
.dagkop-rechts .pakbonkeuze { margin: 0; }
.zoekbalk input[type="search"] {
  flex: 1 1 220px; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--wit); color: var(--inkt); font-size: var(--t-veld);
}
.zoekwissen { font-size: var(--t-hint); color: var(--zacht); }

/* Sorteren van de taakregels. Knoppen en geen keuzelijst: met natte handen tik
   je liever één keer dan dat je een lijstje opent en aanwijst. */
.sorteerbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 12px; }
.sorteerlabel { font-size: var(--t-hint); color: var(--zacht); }
.sorteerknop {
  min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--wit); color: var(--inkt); text-decoration: none; font-size: var(--t-tekst);
}
.sorteerknop--aan { background: var(--groen); border-color: var(--groen); color: var(--wit); }

.uitzetregel { font-size: var(--t-hint); color: var(--zacht); margin: 0 0 8px; }
.regel--uit { opacity: 0.55; }

/* ------------------------------------------------------------- de levering
   Vier kolommen op het bestelscherm: wat, besteld, meegegeven, nog. De naam
   krijgt alle overgebleven ruimte, zodat de drie getallenkolommen rechts onder
   elkaar staan en je de lijst kunt aflezen zonder per regel te zoeken. */
/* De gewone tabel. Deze naam stond tot 1 september 2026 nergens in dit bestand
   — alleen `.tabel.levering` hieronder, voor één scherm. Vijf zuivelschermen
   droegen `class="tabel"` en kregen daarmee de kale tabel van de browser: geen
   ruimte in de cellen, geen lijnen, zwarte vette koppen. Tes wees erop:
   "dit staat bijvoorbeeld veel te dicht bij elkaar waardoor de info beetje door
   elkaar heen staat."

   Dezelfde maten als `.ladingtabel`, want dat is de tabel die de rest van de app
   al gebruikt. De koppen erven hun grijze kapitaaltjes bovenaan dit bestand. */
.tabel { width: 100%; border-collapse: collapse; margin: 12px 0 20px; }
.tabel th { text-align: left; padding: .45rem .7rem .45rem 0; border-bottom: 1px solid var(--lijn); }
.tabel td { padding: .45rem .7rem .45rem 0; border-bottom: 1px solid var(--lijn); }
.tabel tr:last-child td { border-bottom: 0; }
/* Een onderdeel onder een somregel: stiller en ingesprongen, twee diepten. Gold
   alleen onder .stromen, maar Kostprijs en Prijsvoorstel bouwen dezelfde
   opsomming — dus voor elke tabel. */
.tabel tr.subregel td, .ladingtabel tr.subregel td { color: var(--zacht); }
.kengetallen td.vastekolom.inspringen { padding-left: 1.5rem; }
.tabel td.inspringen { padding-left: 1.5rem; }
.tabel td.inspringen--diep { padding-left: 3rem; }
/* De regel die openklapt: een knop die eruitziet als de tekst ernaast, met een
   driehoekje dat meedraait. Een knop en geen <details>, want een <details> kan
   geen tabelregels omvatten. */
.klapknop {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 32px;
}
.klapknop::before {
  content: ""; width: 0; height: 0;
  border-left: 6px solid var(--zacht);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .15s;
}
.klapknop[aria-expanded="true"]::before { transform: rotate(90deg); }
.klapknop:hover { text-decoration: underline; }
/* De optelregel onderaan een tabel: hoeveel het samen is. Een streep erboven
   en niet eronder, want hij sluit af. */
.tabel tr.som td {
  border-bottom: 0; border-top: 1px solid var(--lijn);
  color: var(--inkt); font-weight: 600; padding-top: .6rem;
}
/* Wat er te weinig staat. De enige kleur op het vooruitzicht: een overschot is
   informatie, een tekort is werk. Tes, 5 september 2026 — het scherm gaf alles
   hetzelfde gewicht en was daardoor onleesbaar. */
.tekort { color: var(--rood); font-weight: 600; }
/* Een kolom die op een telefoon wegvalt. Op het vooruitzicht is dat Gepland:
   die is nodig min verschil, en met vijf kolommen viel de knop van het scherm.
   Alleen voor een kolom die je uit de andere kunt afleiden — nooit voor een
   getal dat nergens anders staat. */
@media (max-width: 560px) {
  .tabel th.smalweg, .tabel td.smalweg { display: none; }
}
/* Het geraden deel van een getal. Het staat er niet om mooi te zijn: bij een
   product dat voor driekwart gegokt is hoort hij twee keer te kijken voor hij
   de ketel vult. */
.verwacht { color: var(--amber-inkt); font-weight: 600; }
/* Getallen rechts en op één lijn, en de kop erboven mee. `.rechts` betekende in
   dit bestand `margin-left: auto` en deed in een cel dus niets. */
.tabel th.rechts, .tabel td.rechts,
.tabel th.getal, .tabel td.getal,
.tabel th.aantal, .tabel td.aantal {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* De laatste kolom loopt tot de rand; anders staat er rechts een lege strook. */
.tabel th:last-child, .tabel td:last-child { padding-right: 0; }
.tabel td.leeg { color: var(--zacht); }
/* Een kop midden in de tabel — de blokken van de prijslijst (Melk, Yoghurt, Vla).
   Zonder opmaak stond die regel er in dezelfde letter als de producten eronder,
   en dan is de indeling van het blad weg. */
.tabel tr.tussenkop td {
  padding-top: 1.1rem; border-bottom: 1px solid var(--lijn);
  font-size: var(--t-etiket); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--zacht);
}
.tabel tr.tussenkop:first-child td { padding-top: .45rem; }
/* Zes kolommen passen op geen telefoon. In een `.schuifbak` neemt de tabel zijn
   eigen breedte en schuift hij opzij, net als de kengetallen — anders valt de
   laatste kolom buiten beeld en is er geen manier om erbij te komen. */
.schuifbak > .tabel { min-width: max-content; }

.tabel.levering { width: 100%; border-collapse: collapse; }
.tabel.levering th {
  text-align: left; padding: 6px 0 6px 14px;
  font-size: var(--t-etiket); font-weight: 600; color: var(--zacht);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--lijn);
}
.tabel.levering td { padding: 6px 0 6px 14px; border-bottom: 1px solid var(--lijn); }
/* De naam slokt de rest op; de getallenkolommen worden zo smal als hun inhoud. */
.tabel.levering .naam { width: 100%; padding-left: 0; }
.tabel.levering th:first-child { padding-left: 0; }
.tabel.levering .rechts { text-align: right; white-space: nowrap; }
.tabel.levering .aantal { text-align: right; }
.tabel.levering .aantal input { width: 5em; text-align: right; }
/* Een getalvak moet drie cijfers kwijt kunnen, ook naast een lange naam. Tes,
   8 september 2026: "de bestellijst heeft te kleine vakjes, er kunnen geen
   tientallen ingevuld worden", en even later: "kleine vakjes zijn denk vooral op
   de telefoon."

   De oorzaak: de naamkolom staat op `width: 100%` en slokt de ruimte op, en een
   `width` op een invoerveld is voor de tabelindeling een wens en geen eis — dus
   knijpt de browser het vak dicht tot er van de 5em nog anderhalf cijfer over
   is. Een ondergrens is dat wél. Liever een naam die afbreekt dan een getal dat
   niet past.

   Op de telefoon gaat de binnenmarge er ook af: die kostte aan weerskanten
   12 px van een vak dat toch al te smal was. */
.tabel td.aantal input { min-width: 3.6em; }
@media (max-width: 560px) {
  .tabel td.aantal input { padding-left: 6px; padding-right: 6px; }
  .tabel.levering td, .tabel.levering th { padding-left: 8px; }
}

/* Het hokje "vervalt" in de kolom Nog van de levering. Een label is in deze app
   een blok — boven een invoervak hoort het label erboven — en dat duwt hier het
   merkje "nog 3" van zijn eigen regel af. */
.vervalthokje {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 0 8px; font-size: var(--t-hint); color: var(--zacht);
  white-space: nowrap; font-weight: 400;
}

/* Het telvak op Voorraad, langs dezelfde weg als de aantallen hierboven. Een
   invoerveld is standaard honderd procent breed en duwde de kolom "Nog" van
   het scherm af, ook op een breed scherm. `.veld--smal` hielp hier niet: dat is
   één klasse tegen `input[type="text"]`, en die wint. */
.tabel .telvak input { width: 4.5em; text-align: right; }

/* ------------------------------------------------------------- kolomlijst
   Een lijst met vaste kolommen: naam links, twee vaste kolommen ernaast. Waar
   een lijst uit gelijke regels bestaat is dat wat hem leesbaar maakt — je leest
   één kolom van boven naar beneden in plaats van elke regel apart te ontleden.

   Gebouwd voor de klantenlijst op 31 augustus 2026. `.grondstoflijst` hieronder
   heeft dezelfde vorm en kan hier later op; dat is nu niet gedaan omdat er
   tegelijk aan die kant van de app gewerkt werd. */
.kolomlijst { list-style: none; padding: 0; margin: 12px 0 20px; }
.kolomregel {
  display: grid; grid-template-columns: 1fr 12em 12em auto;
  align-items: baseline; gap: 2px 14px;
  padding: 9px 0; border-bottom: 1px solid var(--lijn);
}
.kolomregel--uit { opacity: 0.55; }
.kolomnaam a { color: var(--inkt); text-decoration: none; font-weight: 500; }
.kolomnaam a:hover, .kolomnaam a:focus-visible { text-decoration: underline; }
.kolomrechts { font-size: var(--t-hint); color: var(--zacht); }
/* De plaats hoort niet tegen de naam aan: "Biltse Boer de Bilt" las als één
   naam. Eigen kolom, en leeg blijft leeg — dan zie je meteen wie er geen heeft. */
.klantplaats { font-size: var(--t-hint); color: var(--zacht); }

@media (max-width: 700px) {
  .kolomregel { grid-template-columns: 1fr auto; }
  .kolomnaam { grid-column: 1 / -1; }
  .klantplaats { grid-column: 1; }
  .kolomrechts { grid-column: 2; text-align: right; }
}

/* ------------------------------------------------------- de grondstoflijst
   Tes, 31 augustus 2026: "grondstoffen ook", na Mijn week. Er stonden vijf
   even grote grijze merkjes achter elkaar op één regel. Nu drie kolommen: de
   naam links, waar het ligt in het midden, de voederwaarde rechts. Vaste
   kolommen, zodat je met één blik de lijst af kunt langs de kolom die je nodig
   hebt in plaats van elke regel apart te ontleden. */
.grondstoflijst { list-style: none; padding: 0; margin: 8px 0 20px; }
.grondstofregel {
  display: grid; grid-template-columns: 1fr 12em 12em auto;
  align-items: baseline; gap: 2px 14px;
  padding: 9px 0; border-bottom: 1px solid var(--lijn);
}
.grondstofregel--uit { opacity: 0.55; }
.grondstofnaam a { color: var(--inkt); text-decoration: none; font-weight: 500; }
.grondstofnaam a:hover, .grondstofnaam a:focus-visible { text-decoration: underline; }
/* Het importwerk: nodig als een afleverbon zijn grondstof moet vinden, maar
   nooit de reden dat je deze lijst opent. Dus onder de naam en klein. */
.grondstofbron { display: block; font-size: var(--t-etiket); color: var(--zacht); }
.grondstofplek { font-size: var(--t-hint); color: var(--inkt); }
.grondstofplek small { color: var(--zacht); }
.grondstofwaarde { font-size: var(--t-hint); color: var(--inkt); font-variant-numeric: tabular-nums; }
.grondstofwaarde b { font-weight: 600; }
.grondstofleeg { color: var(--zacht); }

/* Op een telefoon passen drie kolommen niet naast een naam als "Compensmeel
   Soja/Raapschil". Alles onder elkaar, en de twee waarden op één regel zodat
   een grondstof niet vier regels hoog wordt. */
@media (max-width: 700px) {
  .grondstofregel { grid-template-columns: 1fr auto; }
  .grondstofnaam { grid-column: 1 / -1; }
  .grondstofplek { grid-column: 1; }
  .grondstofwaarde { grid-column: 2; text-align: right; }
}


.regeltekst small { color: var(--zacht); font-size: var(--t-hint); }

/* Een merkje in zo'n regel houdt zijn eigen breedte. `.regeltekst` is een kolom,
   en zonder deze regel rekt het merkje over de volle breedte uit: "voor jou"
   werd een amberkleurige balk onder de naam in plaats van een etiketje ernaast. */
.regeltekst > .merkje { align-self: flex-start; }

/* Een vrije toelichting op een regel in een lijst, zoals de notitie bij een
   voorval op de machinekaart. Niet `.uitleg`: die klasse is al bezet door het
   opengeklapte ⓘ-paneel bovenaan een scherm, een heel ander ding. Op de volle
   breedte, net als .regeltekst, zodat de tekst niet tussen de etiketten
   verdwaalt. */
.notitie { flex: 1 1 100%; color: var(--zacht); font-size: var(--t-hint); }

/* Een regels-lijst met een kruisje erachter, zoals "Staat klaar voor later"
   onder het formulier Taak erbij. Twee dingen die anders moeten:
   een derde kolom, want zonder dat viel het kruisje op een eigen regel onder
   de naam. En het kruisje zelf: hier is het een slag groter dan het kruisje op
   een melding, want het staat aan het eind van een regel die je aantikt. */
/* "afwezig" achter de naam van wie de taak heeft. Amber is in deze app de
   kleur van let op; rood is voor wat vandaag moet, en dit moet niets — het
   zegt alleen dat je het even moet weten. */
.let-op { color: var(--amber-inkt); font-weight: 600; }

/* Het blok met streefdatums onderaan Vandaag. Een vlek in de kleur van "let
   op", en rood zodra de datum voorbij is — dezelfde taal als de stip bij een
   taak die vandaag moet. */
.streefblok .lijst > li { grid-template-columns: 16px 1fr; align-items: center; }
.streefblok .vlek { background: var(--amber); }
.streefblok .vlek--laat { background: var(--rood); }
.streefblok .naam { text-decoration: none; }

/* Een regels-lijst zonder kleurvlek ervoor. Zonder dit valt de tekst in de
   kolom van 4px die voor die vlek bedoeld is, en breekt elke naam per woord af. */

.lijst--weghalen > li { grid-template-columns: 16px 1fr auto auto; align-items: center; }
.lijst--weghalen .postjeweg {
  min-height: 0; width: 34px; height: 34px; padding: 0;
  border-radius: var(--rond); background: none;
  color: var(--zacht); font-size: var(--t-kop); font-weight: 400; line-height: 1;
}
.lijst--weghalen .postjeweg:hover { background: var(--lijn); color: var(--inkt); }


/* ---------------------------------------------------------- bestanden */

.postbus {
  margin: 20px 0 28px; padding: 16px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
}
.postbus input[type="file"] { border: none; padding: 0; }

/* De regel met naam en datum houdt de volle breedte; de knop ernaast valt op
   een telefoon eronder in plaats van in een kolom van drie centimeter. */
.lijst .regeltekst { flex: 1 1 100%; }

/* Waar een bestand bij hoort, in de postbus per regel. Een select van 100%
   breed naast een knop laat de knop op 412 px van de regel af vallen, dus de
   select krimpt mee en het geheel wikkelt. */
.koppelen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.koppelen label { margin: 0; }
/* De max-width is er voor het brede scherm: een keuzelijst van zeventig tekens
   breed voor een projectnaam van twintig ziet eruit als een fout. */
.koppelen select { flex: 1 1 10rem; width: auto; max-width: 22rem; min-width: 0; min-height: 40px; }
/* De weg terug naar het project waar dit bestand aan hangt. Rustig: koppelen
   is de hoofdhandeling van deze regel, dit is een uitstapje. Alleen te zien
   als er iets aan hangt, dus geen vaste plek nodig in het grid. */
.koppelen-link { color: var(--zacht); font-size: var(--t-hint); }
.koppelen-link:hover { color: var(--groen); }

/* ------------------------------------------------- knopjes onder een taak */

/* De vakken van het grid hierboven. Het grid zelf staat bij .taak, bij elkaar:
   stond de tweede rij hier los, dan las het als een botsing en overschreef een
   volgende bewerking hem zonder het door te hebben. */
.taak > .vink, .taak > .vink--uit { grid-area: vink; }
.taak > .naam { grid-area: naam; }
.taak > time { grid-area: tijd; }
.taak > .toewijzen { grid-area: wie; }
.taak > .hoeftniet { grid-area: weg; }
/* De open stappenlijst van de zuivel (zuivel/_taak.html en de schoonmaak op
   de afsluitlijst): onder de naam, over de volle breedte. Zonder eigen plek
   schoof hij naast de naam in de kolom van de tijd, en met twintig
   schoonmaakpunten stond "Schoonmaak" dan ergens halverwege een kolom van drie
   centimeter. Een derde rij, want de tweede is van de knopjes. */
.taak > .stappenlijst { grid-column: 2 / -1; grid-row: 3; }

/* Eén strook van 44 punten onder de naam. De knopjes zien er klein uit maar
   zijn dat niet: ze vullen de hoogte van de strook, en de ruimte ertussen is
   groter dan een duim breed is, zodat je niet het kruisje raakt waar je de
   uitleg bedoelde. */
.taak-acties {
  grid-area: acties;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  min-height: 44px;
}
.taak-acties:empty { display: none; }

/* Een opengeklapt paneel neemt de hele regel: anders staat de tekst in een
   kolom van drie centimeter naast de knopjes. */
.taak-acties > details[open] { flex-basis: 100%; }

/* De ⓘ bij een taak. Klein rondje, maar met genoeg ruimte eromheen om het met
   een handschoen aan te raken. */
.uitleg > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  font-size: var(--t-tekst); font-style: italic; font-weight: 700;
  color: var(--zacht);
  /* De ring die je ziet is kleiner dan het vlak dat je raakt: 26 punten binnen
     44. Geen rand dus, maar een ring die als achtergrond getekend wordt — een
     rand zou om het hele aanraakvlak lopen en dan staat er een kring van 44
     punten in een lijst met taken. */
  background: radial-gradient(circle at center,
    transparent 12px, var(--lijn) 12px, var(--lijn) 13px, transparent 13px);
}
.uitleg > summary:hover {
  background: radial-gradient(circle at center,
    var(--vlak) 12px, var(--lijn) 12px, var(--lijn) 13px, transparent 13px);
}
.uitleg > summary::-webkit-details-marker { display: none; }
.uitleg[open] > summary {
  background: radial-gradient(circle at center, var(--groen) 13px, transparent 13px);
  color: #fff;
}
.uitleg > p {
  margin: .5rem 0 0;
  padding: .6rem .8rem;
  background: var(--vlak);
  border-left: 3px solid var(--lijn);
  color: var(--zacht);
  font-size: var(--t-hint);
}
.uitleg-blok {
  padding: .8rem 1rem;
  background: var(--vlak);
  border-left: 3px solid var(--groen);
  margin-bottom: 1.2rem;
}

/* De stappen binnen een taak. Het telletje 2/6 is de knop die openklapt. */
.stappen > summary {
  list-style: none;
  cursor: pointer;
  padding: .2rem .5rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  font-size: var(--t-etiket);
  color: var(--zacht);
  white-space: nowrap;
}
.stappen > summary::-webkit-details-marker { display: none; }
.stappen[open] > summary { background: var(--groen); border-color: var(--groen); color: #fff; }
.stappenlijst { list-style: none; margin: .5rem 0 0; padding: 0; }
.stap {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  font-size: var(--t-tekst);
}
/* Ook het telefoonnummer, dat sinds het belrondje een link is en geen span:
   anders is het het enige dat bij een afgevinkte stap nog overeind staat, en
   springt juist het nummer eruit dat je niet meer hoeft te bellen. */
.stap--gedaan > span, .stap--gedaan > a { color: var(--zacht); text-decoration: line-through; }
/* Het vakje bij een stap in de lijst. Even groot als dat van een taak — het is
   evengoed iets wat je met een duim raakt — maar met een kleiner haakje erin, en
   wit in plaats van vol groen (zie `.stap .vink` hieronder). Dát is wat een stap
   een klein ja maakt, niet zijn maat; op 22 punten was hij niet te raken. */
.vink--klein { flex: 0 0 auto; }
.vink--klein svg { width: 20px; height: 20px; }

/* Het vakje bij een stap: wit met een groene rand en een groen vinkje. Op
   verzoek van Tes, en het klopt ook: een stap is een klein ja, een taak een
   groot. Zou een stap net zo'n vol groen vlak krijgen als de taak, dan trekt de
   binnenkant van een taak meer aandacht dan de lijst zelf.

   Geldt in de lijst (vink--klein) en op de taakpagina (het grote vakje), want
   allebei staan ze in een .stap. */
.stap .vink { background: var(--wit); border-color: var(--groen); }
.stap .vink--uit { border-color: var(--lijn); }
.stap .vink--aan { background: var(--wit); border-color: var(--groen); }
.stap .vink--aan path { stroke: var(--groen); }

/* De stappentabel bij een taakregel. Op de telefoon wordt hij breder dan het
   scherm; laat hem schuiven in plaats van de hele pagina te laten wiebelen. */
.stapblok { margin: 1.5rem 0; overflow-x: auto; border: none; padding: 0; }
.stapblok legend { font-weight: 500; padding: 0; }
.stapblok .hint { color: var(--zacht); margin: .2rem 0 .8rem; }
.staptabel { width: 100%; border-collapse: collapse; font-size: var(--t-tekst); }
.staptabel th { text-align: left; padding: .3rem .4rem; }
.staptabel td { padding: .25rem .4rem; }
.staptabel input[type="text"] { width: 100%; }
.staptabel input[type="number"] { width: 4.5rem; }

/* De keuzelijst "Voor wie" draagt sinds de derden ook bedrijfsnamen, en een
   tabel maakt zijn kolom zo breed als de langste regel erin.
   "Asbestverwijderingsbedrijf Van der Berg en Zonen" duwde de kolom Stap
   daarmee dicht. De lijst mag afkappen: je klapt hem open om te kiezen, en op
   de projectpagina staat de naam voluit.

   Alleen zolang het een tabel ís. Op een telefoon staat elke regel als blokje
   onder elkaar (hieronder) en hoort de lijst dat blokje te vullen; daar kapte
   deze regel hem juist af op 412 pixels. */
@media (min-width: 561px) {
  .staptabel--voorwie .stapwie { max-width: 14rem; }
}

/* Voor wie op een stap: hetzelfde uitklapvakje als het naamplaatje op een taak
   (.toewijzen hierboven), met de vinkjes eronder. Sinds 14 september 2026 kan
   een stap op meer namen staan; "maick en tes" mag op het vakje afbreken, want
   nowrap duwde de kolom Stap dicht. Django zet de twee kopjes — Van het bedrijf,
   Derden bij dit project — elk in een eigen blokje met een label bovenaan. */
.stapwie > summary { white-space: normal; }
.stapwie > div { margin-top: .4rem; }
.stapwie > div > div > label:first-child {
  display: block; margin-top: .4rem;
  font-size: var(--t-hint); color: var(--zacht);
}
.stapwie > div > div > div > label { display: block; padding: .3rem 0; }

/* Op een telefoon past zo'n rij niet. Vijf kolommen in 412 pixels gaf vakjes
   waar het getal niet in kon: "100" werd "10(" en 12,5 werd "12,". Tes zag het
   meteen — "te kleine vakjes voor de getallen die er in staan".

   Dus geen tabel meer maar een blokje per regel, met de kolomkop als etiket
   ervoor. Dezelfde vorm die het dienstrooster al gebruikt. De vakjes krijgen de
   ruimte die ze nodig hebben, en de aanraakvlakken blijven overeind. */
@media (max-width: 560px) {
  .staptabel, .staptabel tbody, .staptabel tr, .staptabel td { display: block; width: 100%; }
  .staptabel thead { display: none; }
  .staptabel tr {
    margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid var(--lijn); border-radius: var(--rond);
  }
  .staptabel td {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 0; border: none;
  }
  /* Het etiket komt uit data-kop op de cel, zodat de kolomkop meeverhuist
     zonder hem twee keer in het sjabloon te zetten. */
  .staptabel td::before {
    content: attr(data-kop);
    flex: 0 0 8.5rem;
    font-size: var(--t-etiket); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--zacht);
  }
  .staptabel td > * { flex: 1; min-width: 0; }
  .staptabel input[type="number"], .staptabel input[type="text"],
  .staptabel select { width: 100%; }
  /* Een vinkje hoort niet uitgerekt te worden tot de hele breedte. */
  /* Een cel zonder inhoud — "Weg" bij een regel die nog niet bestaat — hoeft
     zijn etiket niet te tonen. */
  .staptabel td:empty { display: none; }
}

/* Hoeft vandaag niet. Een kruisje zolang de taak gewoon openstaat, de woorden
   zodra hij vervallen is — dan moet je van een afstand zien waarom hij grijs is. */
/* Het kruisje vult de strook maar draagt geen doos: een rand om 44 punten leeg
   vlak leest als een grote knop voor een kleine handeling. Hij kleurt pas op als
   je hem raakt, en houdt zijn vlak als hij aanstaat. */
.hoeftniet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: none; border-radius: var(--rond);
  background: none;
  color: var(--zacht);
  font-size: var(--t-hint);
  cursor: pointer;
}
.hoeftniet:hover { background: var(--vlak); color: var(--inkt); }
.hoeftniet--aan { background: var(--lijn); color: var(--inkt); }
.taak--vervallen { opacity: .55; }
.taak--vervallen .naam { text-decoration: line-through; }

/* De reden waarom een vinkje op slot zit. De taak blijft staan: onzichtbaar
   zou betekenen dat het blijft liggen zonder dat iemand het merkt. */
.blokkade {
  margin-left: .5rem;
  padding: .15rem .45rem;
  border-radius: var(--rond-klein);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  color: var(--zacht);
  font-size: var(--t-etiket);
  white-space: nowrap;
}
.blokkade-blok {
  padding: .7rem 1rem;
  background: var(--vlak);
  border-left: 3px solid var(--amber);
  color: var(--zacht);
}

/* Aan wie de taak hangt. Het knopje toont de naam; tikken geeft de lijst. */
.toewijzen > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  border: 1px dashed var(--lijn);
  border-radius: var(--rond-klein);
  font-size: var(--t-etiket);
  color: var(--zacht);
  white-space: nowrap;
}
.toewijzen > summary::-webkit-details-marker { display: none; }
/* Jouw eigen naam is het vaste ritme en niet het nieuws: geen rand, geen vlak,
   alleen de tekst. Even groot om te tikken, alleen stiller. */
.toewijzen--ik > summary { border-color: transparent; padding: 0 4px; }
.wielijst { list-style: none; margin: .5rem 0 0; padding: 0; }
.wielijst li { padding: .1rem 0; }
.wiekeuze {
  background: none;
  border: none;
  padding: .45rem 0;
  color: var(--groen);
  font: inherit;
  cursor: pointer;
}
.wie--kan-niet { display: inline-block; padding: .45rem 0; color: var(--zacht); font-size: var(--t-hint); }

/* Een module die af is maar niet aanstaat: leesbaar, niet schreeuwend. Zonder
   deze regel zou hij er hetzelfde uitzien als een module die nog niet bestaat. */
.module--kan { color: var(--inkt); }
.module--kan:hover { background: var(--lijn); }

/* De looproute: per ronde een lijst die je aan de greep versleept. Eén regel
   per rij, want dit lees je op een telefoon terwijl je bedenkt hoe je loopt. */

.lijst--route .streep { width: 4px; align-self: stretch; border-radius: var(--rond-klein); }
.lijst--route .naam { flex: 1; min-width: 0; }
.lijst--route time { color: var(--zacht); font-size: var(--t-hint); }
/* Zonder greep staat de regel anders ingesprongen dan zijn buren; dit houdt de
   kolommen recht in het blok "Overige taken". */
.lijst--route--vast > li { padding-left: 34px; }
.lijst--route > li.sleept { background: var(--vlak); }

/* De regel om een taak naar een andere dag te zetten, op de taakpagina. Eén
   regel en geen blok: het afvinken staat eronder en dat is de hoofdzaak. */
.verschuif {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid var(--lijn);
}
.verschuif input[type="date"] { flex: 1; min-width: 150px; }

/* De plus om iets erbij te zetten: een taak op Vandaag, een bestelling op de
   bestellijst. Was een gevuld groen rondje, werd een knop met "Nieuwe taak"
   erop, en is nu een plus die niet schreeuwt. Tes, 21 augustus 2026: "een plus
   knop mag blijven, alleen dan niet zo'n harde knop."

   De rand was daarna een grijs lijntje in `--lijn`, en dat ging te ver de
   andere kant op. Tes over de plus op de bestellijst, 28 augustus 2026: "de
   plus knop valt wel een beetje weg zo, alleen een groen plus — wellicht is het
   beter om er ook een groene cirkel omheen te doen zoals bij de 'besteld'
   knop." Dat is woordelijk zijn klacht van 24 augustus over Boeken en Leeg op
   de voorraadtegel, en dus hetzelfde antwoord: de groene rand van
   `.knop--zacht`. Die zegt "hier kun je op drukken" zonder de hoofdknop te
   overstemmen — hard is alleen een gevúlde knop. */
.taakerbij {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--groen); border-radius: 50%;
  background: var(--wit); color: var(--groen);
  font-size: var(--t-kop); line-height: 1; text-decoration: none;
}
.taakerbij:hover, .taakerbij:focus-visible { background: var(--groen-licht); }
/* Gecentreerd, op verzoek van Tes: de plus staat onder de dag en boven het
   werk, en hoort dan in het midden en niet tegen de linkerrand. */
.taakerbij-regel { margin: 4px 0 12px; display: flex; justify-content: center; }

/* ---------------------------------------------------- slepen aan de greep */
/* De greep om een regel op zijn plek te slepen. Hij hoort bij geen enkele
   tabel in het bijzonder: op Voer laden staat hij vóór de naam van de
   grondstof, op het projectformulier vóór het nummer in de kolom Nr. Net als
   het slepen zelf (slepen.js) staat hij daarom maar één keer.

   Niet in een eigen kolom: op de telefoon is er geen kolom over. En naast de
   tekst en niet ervoor in de tekst — "Soja bestendig (Lignosulfonaat)" loopt
   over drie regels, en dan zwierf de greep op een regel in zijn eentje.
   touch-action: none — anders scrolt de bladzijde weg zodra je gaat slepen. */
.greepregel { display: flex; align-items: center; }
.greep {
  /* Smal maar hoog: breedte gaat op de telefoon van de naam af, hoogte niet —
     de regel is toch al zo hoog als het invulvak. Zo blijft er iets over om
     met een duim te raken. */
  flex: none; background: none; border: 0; padding: .1rem; margin-right: .15rem;
  min-height: 2rem; color: var(--zacht); font-size: var(--t-veld); line-height: 1;
  cursor: grab; touch-action: none;
}
.greep:active { cursor: grabbing; }
tr.sleept { background: var(--vlak); }

/* Het laadscherm. De invulvakken zijn breed genoeg voor vier cijfers en een
   komma, want met natte handen mik je niet op een smal vakje. */
.ladingtabel { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.ladingtabel th {
  text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--lijn);
}
.ladingtabel td { padding: .35rem .4rem; border-bottom: 1px solid var(--lijn); }
.ladingtabel td.getal { text-align: right; white-space: nowrap; }
.ladingtabel input[type="text"] { width: 6rem; text-align: right; }

/* Op een breed scherm staat de afwijking in zijn eigen kolom; het regeltje
   onder Geladen zou hem dan dubbel tonen. */
.ladingtabel .afwijking-klein { display: none; }

/* Op een telefoon is 412 pixels alles wat er is, en zes kolommen passen daar
   niet in. Het standvakje viel daardoor rechts buiten beeld: van "1250" zag je
   de helft. Tes: "de vakjes voor de kilo ingave bij het voerlaad scherm
   aanpassen zodat er minimaal 4 tekens in kunnen staan."
   Er gaat dus ruimte af bij alles waar je niet in typt, en niet bij het vakje. */
@media (max-width: 560px) {
  .ladingtabel th, .ladingtabel td { padding: .35rem .2rem; }
  /* "VERWACHT" met spatiëring is breder dan het getal eronder, en zo bepaalde
     een kopje de kolombreedte. Hier dus krap: de kopjes lees je één keer. */
  .ladingtabel th { font-size: var(--t-etiket); letter-spacing: 0; }
  /* Een naam als "Aardappelpersvezel" past niet op één regel in wat er
     overblijft. Midden in het woord afbreken mag hier: je herkent hem aan zijn
     begin, en een vakje dat je niet ziet is erger dan een naam met een streepje. */
  .ladingtabel td.grondstof { font-size: var(--t-hint); overflow-wrap: anywhere; }
  /* De afwijking verhuist naar een regeltje onder Geladen. Zo blijft hij te
     zien, maar kost hij geen eigen kolom. Alles wat in dat vakje staat gaat
     onder elkaar; naast elkaar werd de kolom breder dan het scherm. */
  .ladingtabel .kolom-afwijking { display: none; }
  .ladingtabel td .hint { display: block; }
}

.dieren label { display: block; color: var(--zacht); font-size: var(--t-hint); }
.dieren input { width: 6rem; }
.hint { color: var(--zacht); font-size: var(--t-hint); }
/* Een losse knop met zijn uitleg eronder, niet ernaast: naast de knop liep
   de zin er half achterlangs. Het laadscherm: inhalen, nog een keer laden. */
.inhalen { margin-top: 12px; }
.inhalen .hint { display: block; margin-top: 6px; }

/* De laadlijst naar de voeradviseur: adres en knop op één regel, op de
   telefoon onder elkaar. */
.versturen label { display: block; margin-bottom: 4px; }
.versturen-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.versturen-rij input { flex: 1 1 220px; min-width: 0; }
.versturen .hint { display: block; margin-top: 6px; }

/* Het blok met wat af is, onderaan de dag. Rustiger dan het werk erboven: je
   kijkt er alleen naar als je iets wilt terugzetten. */
.gedaanblok { margin-top: 34px; }
/* Grijs in plaats van groen: wat af is hoeft je aandacht niet meer te trekken. */
.gedaanblok .kopje { color: var(--zacht); }
.gedaanblok .hint { margin: 10px 0 0; }

/* Het vinkje zit hier in een formulier; dat formulier moet dus de plek in het
   raster innemen die het vinkje anders zelf had. */
.taak > .vinkvak { grid-area: vink; }

.gedaan-door {
  grid-area: tijd;
  font-size: var(--t-etiket); color: var(--zacht); white-space: nowrap;
}
.gedaan-door time { margin-left: 6px; }

/* Het ronde plusje naast de teller is weg: een taak erbij zetten is nu een
   gewone knop met een woord erop, onder de kop, zoals op elk ander scherm. */

/* De stappen op de taakpagina. Groter dan in de lijst: hier is ruimte, en hier
   sta je stil bij wat er moet gebeuren. De kop erboven is de gewone .kopje. */
.stappenlijst--groot .stap {
  gap: 12px; padding: 10px 0; font-size: var(--t-veld);
  border-bottom: 1px solid var(--lijn);
}
.stappenlijst--groot .stap:last-child { border-bottom: none; }

/* Op een telefoon past zo'n stap niet meer op één regel. Een stap die bij een
   derde ligt draagt drie vakjes mee — het bedrijf, de contactpersoon en het
   nummer — en het nummer liep half het scherm uit. Dus alles wat achter de naam
   staat eronder in plaats van ernaast, met het vinkje ernaast waar het hoorde.
   Dezelfde vorm die de staptabel hierboven al gebruikt: op een klein scherm
   wordt een regel een blokje. */
@media (max-width: 560px) {
  .stappenlijst--groot .stap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
  }
  /* Alles behalve het vinkje: op de taakpagina staat dat er als los vakje
     zodra de taak geblokkeerd is, en niet in een formuliertje zoals hier. */
  .stappenlijst--groot .stap > :not(.stapvak):not(.vink) { grid-column: 2; }
}
.stapvak { display: flex; flex: 0 0 auto; }

/* Hoeveel stappen er bij een afgevinkte taak hoorden. Zonder dit lijkt een taak
   met een lijstje op een taak zonder. */
.stappenteller { grid-area: naam; justify-self: end; font-size: var(--t-etiket); color: var(--zacht); }

/* Het terugkijkscherm. De keuzebalk staat op een regel en breekt af op een
   telefoon; de afwijking springt eruit zodra hij buiten een paar procent valt. */
.kiesbalk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 16px 0 8px;
}
.kiesbalk label { color: var(--zacht); font-size: var(--t-hint); }
.afwijking { white-space: nowrap; }
.afwijking--let-op { color: var(--amber); font-weight: 600; }

/* Het aantal dagen dat je nog vooruit kunt. Onder de week springt het eruit:
   dan is het tijd om te bestellen. */
.dagen { white-space: nowrap; }
.dagen--krap { color: var(--rood); font-weight: 600; }

/* Het recept per dier, ter vergelijking naast wat je invult. Grijs, want het is
   een gegeven en geen invulveld. */
.ladingtabel td.recept { color: var(--zacht); }
.ladingtabel input.perdier { width: 5rem; }

/* Onder de streep: wat de Voorweek al helemaal gebracht heeft. Tes, 15 augustus
   2026: "Soja moet eruit. Dit is al in de voorweek geladen (…) maar hoort wel in
   het totale rantsoen." Hij telt dus gewoon mee in de wagen; er valt alleen
   niets meer te laden. Grijs en zonder invulvak, zodat er geen stand in kan die
   de kilo's een tweede keer meetelt. */
.ladingtabel tbody.gedekt td { color: var(--zacht); }
/* Dezelfde lijn als onder de totaalregel: hier houdt de laadlijst op. Een gewone
   celrand leest als de zoveelste regelscheiding en dan valt de streep weg. */
.ladingtabel tbody.gedekt tr:first-child td {
  border-top: 2px solid var(--linde); padding-top: .7rem;
}
.ladingtabel tbody.gedekt td.reden { font-size: var(--t-hint); font-style: italic; }

/* ------------------------------------------------------- financieel */

/* De maandbalk. Staat op elk scherm van Financieel bovenaan en boven de
   kalender van de agenda — één balk voor allebei sinds de stijlronde van
   17 augustus 2026. Daarvoor stond hij hier én bij de agenda, en won de laatste
   ook op Voerkosten: pijltjes tegen de buitenranden en een maandnaam van 20 in
   plaats van 15 punt, wat niemand zo bedoeld had.

   Gecentreerd met de pijlen ernaast, en niet uit elkaar getrokken over de volle
   breedte: dan hoort de pijl zichtbaar bij de maand waar hij vanaf telt. Grote
   pijlen, want dit is het enige wat je met een vieze duim moet kunnen raken. */
.maandbalk {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 14px 0 6px;
}
.maandpijl,
.maandbalk .klein {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  color: var(--inkt); text-decoration: none; font-size: var(--t-groot); line-height: 1;
}
.maandpijl:hover,
.maandbalk .klein:hover { background: var(--lijn); text-decoration: none; }
/* Een vaste breedte, anders springen de pijlen mee met de lengte van de
   maandnaam — van "mei" naar "september" is bijna twee centimeter. */
.maandnaam {
  font-size: var(--t-kop); font-weight: 600; text-transform: capitalize;
  min-width: 9.5rem; text-align: center;
}
/* Een week draagt twee dingen: het nummer waar je op stuurt en het tijdvak
   waaraan je het herkent. Onder elkaar, want naast elkaar is het op een
   telefoon te lang en brak de regel middenin de datum. */
.weeknaam { min-width: 11rem; text-transform: none; line-height: 1.25; }
.weeknaam .tijdvak {
  display: block; font-size: var(--t-etiket); font-weight: 400; color: var(--zacht);
}

/* De vensterkiezer op Melkstromen: vier snelkeuzes, twee datumvelden en een
   knop. Op een breed scherm past dat naast elkaar; op een telefoon is dat te
   veel voor één rij en gaat elk onderdeel op zijn eigen regel. */
.venster {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 10px 14px; margin: 4px 0 16px;
}
.venster label { margin: 0; }
.venster input[type="date"] { min-width: 0; width: auto; }
/* Een keuzelijst in de vensterbalk rekt zich anders over de hele rij uit en
   duwt de knop naar de volgende regel. Gezien op Gemaakte ketels, waar het
   programmafilter naast van–tot staat. */
.venster select { width: auto; max-width: 16rem; }
/* Een tekstvak in de vensterbalk rekt zich net zo uit als een keuzelijst en
   duwt de knop een regel omlaag. Zo breed als de inhoud dus, en niet breder:
   in het percentagevakje op Prijsvoorstel staat "34,7" en niets langers. */
.venster .smal { width: auto; max-width: 5.5rem; }
/* Een vak met een teken erachter — een % of een eenheid — hoort bij elkaar te
   blijven. Als los onderdeel van de vensterbalk zakt dat teken op een telefoon
   naar de volgende regel, en dan staat er een losse % onder het invulvak. */
.venster .veldmet { display: flex; align-items: center; gap: 6px; }
.venster .eenheid { color: var(--zacht); }
/* De twee pijlen naast de periode. Ruim aantikbaar op de telefoon: de app wordt
   met natte handen bediend, dus 44 pixels zoals de rest van de knoppen. */
.blader { display: flex; align-items: center; gap: 6px; }
.blader a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  color: var(--inkt); text-decoration: none; font-size: var(--t-kop); line-height: 1;
}
.blader a:hover { background: var(--groen-licht); }
.venster .snelkeuze { display: flex; gap: 6px; width: 100%; }
/* Sinds 1 september 2026 ook buiten het venster te gebruiken: op Kratten stonden
   de drie werklijsten als knoppen, en de eerste was groen gevuld. In deze app
   betekent dat "hier moet je op drukken", terwijl het een filter is dat al
   aanstaat. Een keuze hoort er anders uit te zien dan een opdracht. */
.snelkeuze { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.snelkeuze a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  color: var(--inkt); text-decoration: none;
  font-weight: 600; font-size: var(--t-hint);
}
.snelkeuze a:hover { background: var(--lijn); }
.snelkeuze a.aan { background: var(--groen); color: var(--wit); border-color: var(--groen); }

@media (max-width: 560px) {
  .venster { flex-direction: column; align-items: stretch; }
  /* Vier gelijke vakken in plaats van een rij die op smal glas doorbreekt op
     een willekeurige plek. */
  .venster .snelkeuze { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .snelkeuze a { text-align: center; padding: 10px 4px; }
  .venster input[type="date"] { width: 100%; }
  .venster .knop { width: 100%; }
}

/* De dagtabel op Melkstromen: geen kop nodig, twee kolommen naast elkaar. */
.regeltabel { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.regeltabel td { padding: .35rem .4rem; border-bottom: 1px solid var(--lijn); }
.regeltabel td.getal { text-align: right; white-space: nowrap; }

/* Een regel die het antwoord is en niet een tussenstap. */
.ladingtabel tr.totaalregel td { font-weight: 500; border-top: 2px solid var(--linde); }

/* De controle op de melkprijs: bij de referentiegehaltes hoort de gepubliceerde
   garantieprijs eruit te komen. Zo niet, dan is er iets verkeerd overgetikt en
   moet dat opvallen. */
.klopt-niet { display: block; color: var(--rood); }

/* Naar beneden trekken om te verversen. Alleen zichtbaar als de app als
   icoontje op het beginscherm staat; in een browsertab doet de browser het al.

   Het tabje hangt boven de bovenrand en schuift mee met je duim. Groen is nog
   niet ver genoeg, lindegroen betekent: laat maar los. */
.verversen {
  position: fixed; top: -46px; left: 50%; z-index: 60;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--groen); color: var(--wit);
  font-size: var(--t-kop); line-height: 1;
  transform: translate(-50%, 0);
  pointer-events: none;
}
.verversen--klaar { background: var(--linde); color: var(--inkt); }
/* Alleen bij het terugveren een animatie. Tijdens het trekken moet hij de duim
   volgen zonder na te slepen. */
.verversen--terug { transition: transform .2s ease-out; }

/* --------------------------------------------------- dashboard en grafiek */

/* De tegel. Eén vorm voor de hele app — zie de stijlronde van 17 augustus 2026.
   Een tegel verdient zijn plek met een cijfer dat verandert: dagen tot leeg,
   kilo's, euro's. Staat er geen getal op, dan is het een lijstregel.

   De indeling stond hier én bij de voorraadtegels, met verschillende maten. De
   laatste won, dus het dashboard kreeg ongemerkt de indeling van Voorraad. Nu
   staat hij één keer: één kolom op een telefoon, meer zodra het past. */
/* Gelijke hoogtes per rij, want tegels van ongelijke hoogte geven een rafelige
   onderrand en laten de knop erin op verschillende hoogtes zweven. Tes zag dat
   op de laptop: "op sommige pagina's staan tegels, op andere kolommen met
   cijfers". `grid-auto-rows: 1fr` rekt elke tegel tot de hoogste van zijn rij;
   `.tegelvoet` met `margin-top: auto` duwt de voet naar onderen. */
.tegels {
  display: grid; gap: 10px; margin: 16px 0 18px;
  grid-template-columns: 1fr;
  /* Even hoge tegels naast elkaar. In één kolom is er niets om even hoog mee te
     zijn: dan werd elke tegel zo hoog als de langste van het scherm en stond er
     onder de korte een strook wit van honderd punten. Dat maakte Voorraad het
     langste scherm van de veehouderij. */
  grid-auto-rows: auto;
}
@media (min-width: 561px) {
  .tegels { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-auto-rows: 1fr; }
}
/* Er was een tweede woordenlijst voor een tegel — tegelnaam, tegelgetal,
   tegeluitleg, tegel--groot — uit een eerdere opzet van het dashboard. Geen
   enkel sjabloon gebruikte hem nog, terwijl hij wel meeleest als er iets aan
   tegels verandert. Weg. Er is nu één tegel. */
/* De tegelvorm zelf, zonder de kleurrand die bij Voorraad hoort. Twee namen
   op één regel en niet twee blokken: de vorm is dezelfde, en het commentaar
   hierboven bij .tegels zegt al dat er één tegel is. Wie een nieuw scherm
   maakt, pakt .tegel — de naam .voorraadtegel is er alleen nog omdat
   voorraad.html hem gebruikt. */
.tegel,
.voorraadtegel {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  /* De linkerrand draagt de kleur van de stand; zie de varianten verderop. */
  border-left: 4px solid var(--lijn);
  /* Dezelfde keuze als op de menutegels, 1 september 2026: een tegel is een
     vlak en geen lijntekening. */
  background: var(--vlak);
}

/* De grafiek. Zelf getekend, dus alle opmaak staat hier.

   De kleuren zitten in de SVG zelf en niet hier: ze horen bij de reeks, en het
   sjabloon krijgt ze mee uit financieel/grafiek.py. Wat hier staat is alles wat
   géén gegevens is — en dat hoort terug te treden. */
.grafiek { margin: 20px 0 0; padding: 0; }
.grafiek figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.grafiektitel { font-size: var(--t-tekst); font-weight: 500; }
.grafiekeenheid { font-size: var(--t-etiket); color: var(--zacht); }
.grafiek svg { width: 100%; height: auto; overflow: visible; }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0 0 6px; padding: 0; }
.legenda li { display: flex; align-items: center; gap: 6px; font-size: var(--t-hint); color: var(--zacht); }
.legendastreep { width: 16px; height: 3px; border-radius: var(--rond-klein); }

.grafiek .raster { stroke: var(--lijn); stroke-width: 1; }
.grafiek .lijn { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Een ring in de vlakkleur, zodat een punt leesbaar blijft waar twee lijnen
   elkaar kruisen. Geen randje om te versieren: het is de scheiding zelf. */
.grafiek .punt { stroke: var(--wit); stroke-width: 2; }
.grafiek .asletter { fill: var(--zacht); font-size: var(--t-etiket); }
/* De waarde bij het laatste punt draagt inkt en niet de kleur van de lijn: een
   lichte kleur leest niet als tekst. De gekleurde stip ernaast doet het werk. */
.grafiek .eindwaarde { fill: var(--inkt); font-size: var(--t-etiket); font-weight: 500; }

/* Een melding die voor jou is blijven liggen — een taak op je naam. Hij staat
   bovenaan elk scherm en blijft staan tot je hem wegtikt of de taak opent.

   Lindegroen randje links en geen rood: dit is nieuws, geen alarm. */
.postje {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--vlak);
  border-left: 3px solid var(--linde); border-radius: var(--rond);
  font-size: var(--t-tekst);
}
.postje a { color: var(--inkt); }
.postje > :first-child { flex: 1; }
.postje form { margin: 0; }
.postjeweg {
  width: 34px; height: 34px; flex: none;
  border: none; border-radius: var(--rond); background: none;
  color: var(--zacht); font-size: var(--t-kop); line-height: 1; cursor: pointer;
}
.postjeweg:hover { background: var(--lijn); color: var(--inkt); }

/* De kop van het laadscherm. De naam van het rantsoen en de datum staan in het
   midden, tussen de pijlen: zo lees je in één blik welke lading van welke dag je
   voor je hebt. Ze stonden linksboven met de pijlen eronder, en dan zijn het
   drie losse dingen waar er één bedoeld is. Op verzoek van Tes. */
.dagbalk {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 8px;
}
.dagbalk-midden { flex: 1; text-align: center; min-width: 0; }
.dagbalk-midden h1 { font-size: var(--t-kop); margin: 0; }
.dagbalk-midden .datum { margin: 2px 0 0; }
/* De plek van de pijl vooruit blijft staan als hij er niet is; anders springt
   de naam een halve knopbreedte opzij zodra je op vandaag bent. */
.maandpijl--uit { visibility: hidden; }

/* De weg terug hoort op te vallen: dit is het enige wat je met natte handen
   zoekt als je op het verkeerde scherm staat. Eén stijl voor elk scherm — hij
   stond overal in grijs en verdween daarmee in de tekst. */
.terug a {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 4px 12px 4px 8px;
  border-radius: var(--rond);
  background: var(--groen-licht); color: var(--groen);
  font-weight: 500; text-decoration: none;
}
.terug a:hover { background: var(--groen); color: var(--wit); }

.naarvandaag { margin: 0 0 10px; text-align: center; font-size: var(--t-hint); }

/* ------------------------------------------------------- het startscherm */

/* Blokken in plaats van tabjes. Zes tabjes naast elkaar zijn op een telefoon al
   te smal om met natte handen te raken; bij een zevende gaat de balk schuiven.
   Blokken lopen door naar de volgende rij, dus een thema erbij is een blok
   erbij en verder niets. */
/* Het merk boven het startscherm, in plaats van een kop. Tes, 8 augustus 2026:
   "graag de tekst Waar wil je heen? vervangen voor het logo van Tameroord
   Veehouderij, met daaronder melkveehouderij."

   Kleiner dan op het inlogscherm: daar staat het merk alleen op een lege
   bladzijde, hier heeft het de blokken eronder. */
.merkkop {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin: 6px 0 24px;
}
.merkkop .logo--groot { gap: 10px; }
.merkkop .logo--groot img { width: 76px; height: 76px; }
.merkkop .logo--groot .logo-tekst b { font-size: 18px; letter-spacing: 0.14em; }
.merkkop .logo--groot .logo-tekst i { font-size: 10px; letter-spacing: 0.22em; }
.merkkop-onder {
  font-size: var(--t-hint); font-weight: 400; letter-spacing: 0.01em;
  color: var(--zacht);
}

/* Het startscherm: een kopje per module, onder elkaar, met de schermen van die
   module eronder. Tes, 8 augustus 2026: "plak de sub onderdelen per blok er maar
   onder in dit hoofmenu" en "dan de hoofdkoppen onder elkaar". */

.thema { margin: 38px 0 0; }
.thema:first-of-type { margin-top: 20px; }

/* Tes, 8 augustus 2026: "de verdeling tussen de blokken is echt te onduidelijk,
   dus de hoofdkopjes zijn te onopvallend." Ze stonden in de stille etiketstijl
   van de rest van de app — elf pixels, grijs, kapitalen. Op een scherm dat
   verder alleen uit blokken bestaat viel dat weg.

   Nu donker, groter, en met een streep die je ziet. Plus meer lucht ertussen:
   ruimte scheidt beter dan een lijn, en twee lijnen op een rij zouden het
   drukker maken in plaats van duidelijker. */
.themakop {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 2px solid var(--lijn);
}
/* Het startscherm houdt zijn eigen, grotere modulekop. Het is de enige plek waar
   een kop géén stuk van een pagina aankondigt maar een stuk van de app; op
   11 punt in hoofdletters zou "Financieel" er kleiner staan dan de blokken
   eronder. De lijn komt van .themakop hierboven, dus de gedeelde tussenkop legt
   de zijne hier af — anders staan er twee onder elkaar. */
.themanaam {
  margin: 0; font-size: var(--t-veld); font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--groen);
  border-bottom: none; padding-bottom: 0;
}
/* Een module die er nog niet is dooft ook in het kopje: groen zou zeggen dat je
   er heen kunt. */
.thema--uit .themanaam { color: var(--zacht); }
.themauitleg { font-size: var(--t-hint); color: var(--zacht); }

/* Drie op een rij op een laptop, één op een telefoon. Auto-fill en niet
   auto-fit: dan houden de kolommen dezelfde breedte, ook onder een kopje met
   maar twee schermen, en lopen de blokken van alle modules netjes in lijn. */
.blokken {
  display: grid; gap: 10px; margin: 12px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
/* Tes, 1 september 2026: "het is iets onduidelijk dat het tegels zijn in het
   menu, is daar nog een alternatief voor, dat het iets zichtbaarder wordt maar
   niet eruit knalt". Op een wit blad met een dun grijs lijntje eromheen is een
   tegel een lijntekening; je ziet de tekst en niet het blokje.

   Variant A uit /stukken/2026-09-01-menutegels/, door Tes gekozen uit vijf: de
   tegel krijgt de tint die de app al heeft voor "een vlak dat terugvalt". Geen
   nieuw middel dus — een schaduw of een tweede grijstint waren de alternatieven
   en die vielen af. */
.blok {
  display: flex; align-items: center; gap: 13px;
  min-height: 78px; padding: 13px 15px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak); color: var(--inkt); text-decoration: none;
}

/* Het vlakje met het pictogram, links op het blok. Tes wees op een andere app
   waar elk blok er een heeft, en dat is de plek: dáár tik je op. */
.blokvlag {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--rond);
  /* Wit sinds de tegel zelf een vlak werd: lindegroen op die tint valt bijna
     weg, en dan is het pictogram een tekening zonder plek. Onder de muis draait
     het om, net als eerst. */
  background: var(--wit);
}
.pictogram {
  width: 24px; height: 24px;
  fill: none; stroke: var(--groen); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.bloktekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

a.blok:hover, a.blok:focus-visible { background: var(--groen-licht); border-color: var(--groen); }
/* Zonder dit valt het vlakje onder de muis weg tegen het blok: allebei worden
   ze dan lindegroen. Het draait dus om, en dat is meteen het antwoord op je tik. */
a.blok:hover .blokvlag, a.blok:focus-visible .blokvlag { background: var(--groen); }
a.blok:hover .pictogram, a.blok:focus-visible .pictogram { stroke: var(--wit); }

.bloknaam { font-size: var(--t-tekst); font-weight: 500; }

/* Het levende getal. Groen, want het is het enige op dit scherm dat verandert
   terwijl je ernaar kijkt — en daarmee de reden om er nog eens te kijken. Staat
   er niets, dan staat er de uitleg: nul is geen nieuws. */
.blokcijfer { font-size: var(--t-hint); color: var(--groen); }
.blokuitleg { font-size: var(--t-hint); color: var(--zacht); }

/* Een module die er nog niet is staat er wel, maar dooft. Zo zie je wat eraan
   komt zonder dat je op een leeg scherm belandt. */
.thema--uit .themauitleg { color: var(--zacht); }
.blokbinnenkort {
  font-size: var(--t-etiket); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--zacht);
}

/* Het scherm Melkstromen. De derde kolom zegt waar elk getal vandaan komt; op
   een telefoon valt hij weg, want daar telt de som en niet de verantwoording. */
.stromen td.herkomst { color: var(--zacht); font-size: var(--t-hint); }
.stromen tr.tussenregel td { border-top: 1px solid var(--lijn); font-weight: 500; }
/* De uitsplitsing onder een post: melk, de ingrediëntsoorten, verpakking. Ze
   tellen op tot de regel erboven, en dat hoort te zien te zijn zonder dat je
   de bedragen naleest. Zachter en ingesprongen, geen eigen lijn. */
.stromen tr.subregel td { color: var(--zacht); border-top: 0; }
.stromen td.inspringen { padding-left: 1.5rem; }
@media (max-width: 560px) {
  .stromen td.herkomst { display: none; }
}
/* Zeven kolommen passen niet op een telefoon. De tabel schuift dan zelf, in
   plaats van de hele pagina scheef te trekken. */
.breedtabel { overflow-x: auto; }
.breedtabel .ladingtabel th.getal { text-align: right; white-space: nowrap; }
/* Eén kop is langer dan zijn getallen: "Nog niet toegerekend" boven 4.953. Die
   mag wél afbreken, anders duwt de kop alleen al Bilts Boer op een telefoon
   buiten beeld — en dat is nu juist de kolom waar je voor komt. */
.breedtabel .ladingtabel th.getal.langekop { white-space: normal; }
/* De regel onder de som: het aandeel en het daggemiddelde. Staat buiten de
   tabel omdat de derde kolom op een telefoon wegvalt, en dit juist het getal is
   dat je uit je hoofd kunt narekenen. */
.samenvatting { margin: -.4rem 0 1rem; font-size: var(--t-tekst); color: var(--inkt); }

/* Welk rantsoen er vandaag geldt. Eén vlaggetje dat opvalt tussen de grijze:
   met een rij bladen van ABZ is dat het enige wat je echt wilt weten. */
.merkje--nu { background: var(--groen); color: var(--wit); }

/* Kengetallen: veel maanden naast elkaar. De kolommen schuiven, de namen
   blijven staan. Op een telefoon passen er hooguit drie maanden in beeld, en
   dan moet je wel kunnen zien welke rij je leest. */
.schuifbak { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kengetallen { min-width: max-content; }
.kengetallen th.getal { text-align: right; white-space: nowrap; }
.kengetallen .vastekolom {
  position: sticky;
  left: 0;
  background: var(--vlak);
  white-space: nowrap;
  padding-right: 1rem;
}
/* Zonder eigen achtergrond schuiven de getallen zichtbaar ónder de namen door. */
.kengetallen thead .vastekolom { background: var(--vlak); }

/* Het kopje boven een blok in de tabel op het dashboard: Technisch, Financieel.
   Klein en grijs, zoals de andere etiketten in de app — het is een scheiding en
   geen tweede kop. Sticky net als de vastekolom, anders schuift het kopje weg
   zodra je de kolommen op een telefoon naar links trekt. */
.kengetallen .blokkop,
.voorraadtabel .blokkop {
  position: sticky;
  left: 0;
  text-align: left;
  font-size: var(--t-hint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zacht);
  font-weight: 500;
  padding: 1.1rem 0 0.35rem;
}

/* De twee tabellen op Voorraad, voer en erfspullen, delen hun kolombreedtes.
   Eerst was elk siloblok een eigen tabel, en dan kiest elke tabel zijn eigen
   breedtes: dan staat "Stand" bij silo 1 ergens anders dan bij silo 2 en lees
   je de pagina niet meer als één lijst. Vaste breedtes, want een tabel kan niet
   naar de tabel eronder kijken. */
.voorraadtabel { table-layout: fixed; min-width: 34rem; }
.voorraadtabel td:first-child,
.voorraadtabel th:first-child { overflow-wrap: anywhere; }
/* Op een telefoon passen vijf kolommen niet: met vaste breedtes liep "nog niet
   geteld" dwars door "187 kg" heen en viel de knop buiten beeld. De tabel houdt
   nu zijn eigen breedte en schuift binnen de schuifbak, net als op Kengetallen.
   Uitlijnen en passen tegelijk kan niet in vijf kolommen op 390 pixels. */

/* De wijzerplaten op Voerkosten. Zelfde afspraak als bij de grafiek: het
   rekenwerk staat in financieel/meter.py, hier alleen hoe het eruitziet. */
.platen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .platen { grid-template-columns: 1fr; }
  /* Alleen onder elkaar lucht ertussen. */
  .plaat + .plaat { margin-top: 14px; }
}

.plaat {
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.plaat figcaption {
  font-size: var(--t-etiket);
  color: var(--zacht);
  font-weight: 600;
  /* Vaste hoogte, anders staan drie platen naast elkaar met de naald op drie
     verschillende hoogtes zodra één titel omslaat. */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plaat svg { width: 100%; max-width: 230px; height: auto; margin-inline: auto; }
.plaat .band { stroke-width: 9; fill: none; stroke-linecap: butt; }
.plaat .naald { stroke: var(--inkt); stroke-width: 2.5; stroke-linecap: round; }
.plaat .spil { fill: var(--inkt); }
.plaat .asletter { fill: var(--zacht); font-size: var(--t-etiket); }

.plaatgetal { font-size: var(--t-groot); font-variant-numeric: tabular-nums; }
.plaatijk, .plaatduiding, .plaatuitleg { font-size: var(--t-etiket); color: var(--zacht); }
.plaatafwijking { font-size: var(--t-hint); font-weight: 600; margin-top: 2px; }
.plaatuitleg { margin-top: 6px; }
.plaatleeg {
  margin: 8px 0 0;
  font-size: var(--t-hint);
  color: var(--zacht);
}
.plaatleeg .plaatgetal { display: block; color: var(--inkt); }

/* Een dag waarvan de melk, de lading of een prijs mist. Hij blijft staan met de
   reden erbij: een dag die stil wegvalt merk je niet. */
.telt-niet-mee td { color: var(--zacht); }

/* ---------------------------------------------------------------- tegels op
   Voorraad. Tes, 17 augustus 2026: "de voorraadpagina op de telefoon is echt
   niet goed, getallen staan over elkaar heen", en meteen erachteraan: "wellicht
   kunnen we overgaan op tegels per voersoort met daarbij de voorraad in
   percentage en aantal dagen tot opraken."

   Eén kolom op een telefoon, meer zodra er ruimte is. Geen vaste kolombreedtes
   meer: dat was precies wat de getallen over elkaar heen duwde.

   De indeling zelf staat bij .tegels hierboven, samen met die van het
   dashboard — het is één tegelvorm voor de hele app. */

/* Dezelfde vorm als .tegel, met een gekleurde rand links erbij. Ronding en
   randkleur komen uit de gedeelde regel: 10px tegen 6px was precies waardoor
   Voorraad en Vandaag geen familie leken. */

/* De kleur van de rand volgt de bestelgrens: rood binnen de grens, amber tot
   het dubbele, groen daarboven. Grijs is niet groen — onbekend is geen "het zit
   wel goed". */
.voorraadtegel--krap { border-left-color: var(--rood); }
.voorraadtegel--bijna { border-left-color: var(--amber); }
.voorraadtegel--ruim { border-left-color: var(--groen); }
.voorraadtegel--onbekend { border-left-color: var(--lijn); }

.tegelkop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tegeltitel { font-weight: 600; overflow-wrap: anywhere; }
/* In de slotregel staat de naam náást het bedrag in één flexrij, en dan knijpt
   hij tot niets: "Brutomarge" brak op de telefoon af als "Brutomarg e".
   Hier mag een woord dus heel blijven — de rij geeft hem de ruimte die één
   woord nodig heeft. Gezien op /bedrijfsblad/ met bin/kijk.sh, 3 oktober 2026. */
.blok > .veldkop > .tegeltitel { overflow-wrap: break-word; }
/* Het dagengetal is waar hij op stuurt, dus dat mag groot. */
.tegelgroot { font-size: var(--t-groot); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.tegelgroot--leeg { font-size: var(--t-hint); color: var(--zacht); }
.tegelregel { margin: 2px 0; font-size: var(--t-hint); color: var(--zacht); }

/* De periode tussen de twee pijlen op het dashboard. Hij neemt de ruimte die
   overblijft, zodat de pijlen aan de randen staan en op een telefoon met de
   duim te raken zijn. */
/* De periodebalk van het dashboard: twee pijlen met de periode ertussen. Geen
   `.venster`, want daar rekt een knop zich over de hele rij uit en stond elke
   pijl op een eigen regel — een halve telefoon aan niets. */
.periodebalk { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.periodekop { flex: 1 1 auto; min-width: 0; font-weight: 600; text-align: center; }
.periodekop small { display: block; font-weight: 400; color: var(--zacht); font-size: var(--t-hint); }
/* Een vierkante knop die niet meegroeit: 44 punten, de maat die met een duim
   te raken is. */
.stapknop {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--papier); color: var(--groen);
  font-size: var(--t-kop); line-height: 1; text-decoration: none;
}
.stapknop:hover { border-color: var(--groen); background: var(--groen-licht); }
.tegelvoet {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 8px; margin: 8px 0 0;
  /* Altijd onderaan de tegel, ook als de tegel erboven meer regels heeft. */
  margin-top: auto; padding-top: 8px;
}
/* Boeken en Leeg horen bij elkaar en staan naast elkaar; ze wijken samen naar
   rechts, tegenover het merkje "geteld". */
.tegelknoppen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* De lege helft van de balk was `--vlak`, en dat is sinds 1 september 2026 de
   kleur van de tegel eromheen — dan is er geen balk meer te zien, alleen een
   groen streepje dat in het niets ophoudt. Wit dus, met een randje. */
.balk {
  height: 8px; border-radius: var(--rond-klein); overflow: hidden;
  background: var(--wit); border: 1px solid var(--lijn);
}
.balk-vol { height: 100%; background: var(--groen); }
.voorraadtegel--krap .balk-vol { background: var(--rood); }
.voorraadtegel--bijna .balk-vol { background: var(--amber); }

/* Invullen op de tegel zelf. Onder elkaar op een telefoon, naast elkaar zodra
   het past — een vakje van een halve duim breed typt met natte handen niet. */
.tegelvelden { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 2px; }
.tegelvelden label { display: block; font-size: var(--t-etiket); color: var(--zacht); }
.tegelvelden input { width: 100%; }
.tegelvink { display: flex; align-items: center; gap: 6px; font-size: var(--t-hint); }

/* ---------------------------------------------------------------- de agenda
   Subtabs, het maandraster en de balkjes erin. De kleuren per soort staan
   hieronder en niet in de database: de zeven soorten liggen vast in de code
   (diensten.models.Afspraaksoort) en de waarde daar is meteen de klassenaam. */
/* De subtabs staan bínnen één scherm: niet "waar ga ik heen" maar "hoe kijk ik
   naar dit scherm". Dat is een laag onder de takbalk bovenaan, en dus moeten ze
   er ook lichter uitzien — op de agenda stonden twee rijen tabbladen vlak onder
   elkaar die even hard riepen. Kleiner, dunner streepje, en wat aanstaat wordt
   zwart in plaats van groen; het groen hoort bij de bovenste rij. */
.subtabs { display: flex; gap: 18px; border-bottom: 1px solid var(--lijn); margin: 0 0 14px; }
.subtab { padding: 8px 2px; font-size: var(--t-hint); color: var(--zacht);
          text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtab--aan { color: var(--inkt); font-weight: 600; border-bottom-color: var(--groen); }

/* ------------------------------------------------------------- mijn week
   Zeven dagen onder elkaar en niet naast elkaar: zeven kolommen op een telefoon
   is onleesbaar, dezelfde keuze als bij het dienstrooster. Per dag hoogstens een
   handvol regels — de taken uit een ronde staan er met opzet niet in.

   Tes, 31 augustus 2026: "mn weekagenda is niet overzichtelijk". Drie lagen per
   dag in plaats van één lange lijst: de kop, de rondestrook met het vaste ritme
   van de dag, en daaronder op tijd wat die dag anders maakt dan gisteren. */
.weekdag { margin: 0 0 20px; padding-left: 12px; border-left: 3px solid transparent; }
/* Het randje staat er bij elke dag, alleen doorzichtig — zo staan alle zeven
   dagen op dezelfde lijn en springt vandaag eruit zonder te verschuiven. */
.weekdag--vandaag { border-left-color: var(--groen); }
.weekdagkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
              padding-bottom: 5px; border-bottom: 1px solid var(--lijn); }

/* De rondestrook: elke dag dezelfde vier rondes, dus samen op één regel in het
   lichtgroen van "dit is van het erf". Het getal erachter is hoeveel taken erin
   zitten; nul taken laat het getal weg in plaats van een 0 te tonen. */
.rondestrook {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  margin: 8px 0 2px; padding: 8px 10px;
  background: var(--groen-licht); border-left: 3px solid var(--groen);
  border-radius: var(--rond-klein); text-decoration: none; color: var(--inkt);
}
.rondestrook:hover, .rondestrook:focus-visible { background: #E3EFDA; }
.rondestrook-kop { font-size: var(--t-etiket); font-weight: 600; color: var(--groen);
                   text-transform: uppercase; letter-spacing: 0.08em; }
.rondechips { display: flex; flex-wrap: wrap; gap: 2px 14px; flex: 1 1 auto; }
.rondechip { font-size: var(--t-hint); color: var(--inkt); white-space: nowrap; }
/* Het aantal taken als vakje en niet als los cijfer: "Ochtendronde 13" leest
   anders als de 13 op een eigen wit veldje staat — een aantal, geen tijdstip. */
.rondechip b { display: inline-block; min-width: 1.5em; margin-left: 2px; padding: 0 4px;
               background: var(--wit); border-radius: var(--rond-klein);
               color: var(--groen); font-weight: 600; text-align: center; }
.rondestrook-pijl { color: var(--groen); }

/* Wat de dag bijzonder maakt: afspraken, losse taken en overlegpunten door
   elkaar op tijd. Vier kolommen — tijd, kleurstip, naam, etiket — zodat de
   tijden onder elkaar staan en je met één blik langs de dag leest. */
.weekregels { list-style: none; padding: 0; margin: 4px 0 0; }
.weekregels > li {
  display: grid; grid-template-columns: 4.6em 10px 1fr auto;
  align-items: center; gap: 2px 10px;
  padding: 7px 0; border-bottom: 1px solid var(--lijn);
}
.weektijd { font-size: var(--t-hint); color: var(--zacht); font-variant-numeric: tabular-nums; }
.weekwat { color: var(--inkt); }
.weeketiket { font-size: var(--t-hint); color: var(--zacht); text-align: right; }

/* Op de telefoon past het etiket niet naast een naam als "Paspoort aanvragen
   Jareth gemeentehuis". Het zakt dan onder de naam, in dezelfde kolom. */
@media (max-width: 560px) {
  .weekregels > li { grid-template-columns: 4.6em 10px 1fr; }
  .weeketiket { grid-column: 3; text-align: left; }
}

/* De keuze per Google-agenda: één rondje voor heen-en-weer, één vinkje voor
   meelezen. Onder de naam en niet ernaast — op een telefoon staan twee
   keuzevakjes naast een lange agendanaam over drie regels heen. */
.agendakeuze { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px;
  font-size: var(--t-hint); color: var(--zacht); }
.agendakeuze label { display: inline-flex; align-items: center; gap: 6px; }
/* De dagkop is een link. Hij houdt de kleur van de kop — een blauwe onderstreepte
   regel tussen zeven groene koppen leest als een fout — en het pijltje erachter
   laat zien dat er iets achter zit. */
.kopje a { color: inherit; text-decoration: none; }
.kopje a:hover, .kopje a:focus-visible { text-decoration: underline; }
.weekweg { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--zacht); }
/* De stip voor een ronde: eigen werk, dus de huiskleur. */
.balkje--ronde { background: var(--groen); }

/* De maandbalk stond hier een tweede keer en overschreef die van Financieel.
   Hij staat nu één keer, hierboven bij de rest van Financieel — het is dezelfde
   balk, met dezelfde pijlen, of je nu maanden of geld doorbladert. */

.kalender { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kalender th { font-size: var(--t-etiket); color: var(--zacht); font-weight: 400; padding: 4px 0; }
.kalenderdag { border: 1px solid var(--lijn); vertical-align: top; height: 74px; padding: 2px; }
.kalenderdag--buiten { background: var(--vlak); }
.kalenderdag--buiten .kalendernummer { color: var(--zacht); }
.kalenderdag--vandaag { outline: 2px solid var(--groen); outline-offset: -2px; }
.kalendernummer { display: block; font-size: var(--t-hint); color: var(--inkt);
                  text-decoration: none; padding: 2px 4px; }
.kalendermeer { display: block; font-size: var(--t-etiket); color: var(--zacht); padding: 0 4px; }

.balkje { display: block; font-size: var(--t-etiket); color: var(--wit);
          border-radius: var(--rond-klein); padding: 1px 4px; margin: 1px 0;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balkje--dierenarts  { background: #2E7D8A; }
/* Verhuur en events. Drie standen, drie vormen — niet drie helderheden. Een
   optie die alleen lichter was las als "vaag" in plaats van "nog niet zeker",
   en op een telefoon staat er geen tekst in het hokje, alleen kleur: dan moet
   de vorm het alleen doen. Tes, 9 september 2026: "kan optie niet een apart
   randje krijgen ofzo?"

   Een aanvraag is de minst harde stand en krijgt daarom alleen een omtrek in
   de kleur van de ruimte, niet ingekleurd — de vulling komt uit het sjabloon
   (agenda.html) niet mee voor deze stand, dus valt terug op deze `background:
   none`. Een optie is wél gevuld, met een duidelijk zichtbare gestreepte rand.
   Definitief is het volle vlak van hiervoor, ongewijzigd. Klaarzetten en
   opruimen blijven smal en minder dekkend, zoals ze waren. */
.balkje--aanvraag { background: none; border: 1.5px solid; font-weight: 600; }
.balkje--optie { border: 2px dashed rgba(255, 255, 255, .85); }
.balkje--klaarzetten,
.balkje--opruimen,
.balkje--schoonmaak { font-size: .85em; opacity: .7; }
.balkje--inseminator { background: #7A5AA8; }
.balkje--loonwerker  { background: #6E8B3D; }
.balkje--monteur     { background: #4A6FA5; }
.balkje--levering    { background: #B4763A; }
.balkje--keuring     { background: #8C5A78; }
/* Antracietblauw, en niet nóg een tint uit de zeven hierboven: een overleg
   staat elke week in de kalender en moet in één oogopslag te onderscheiden zijn
   van de dierenarts. Grijs kon niet — dat is hier de kleur van wie er niet is. */
.balkje--overleg     { background: #37474F; }
/* Warm oranje voor een verhuurafspraak. Niet het blauw van de vergaderruimte of
   het groen van de tent — die twee staan al in deze kalender als bezetting, en
   een afspraak is juist het andere: er is geen ruimte geboekt. */
.balkje--verhuur     { background: #C2763B; }
.balkje--overig      { background: #6B7268; }
/* Je eigen privé-afspraak op een dag waar iets geboekt staat: een
   waarschuwing, geen regel in de lijst. Amber, zoals overal waar de app "let
   op" zegt. Zie verhuur/bezetting.py::kruist_met_eigen_afspraken. */
.kruist {
  display: block; margin-top: 2px; padding: 1px 4px;
  border-left: 3px solid var(--amber);
  background: var(--amber-licht); color: var(--amber-inkt);
  font-size: var(--t-hint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Wat van het erf komt, in de verhuuragenda. Lichter en met een randje in
   plaats van een vlak: het is geen boeking maar context — je kijkt of het
   elkaar raakt. Zie verhuur/maand.py::_dag. */
.balkje--erf {
  background: transparent; color: var(--zacht);
  border: 1px dashed var(--lijn);
}
/* Een projectstap is geen afspraak: er komt niemand langs, het is werk van
   jezelf dat die dag af hoort te zijn. Daarom niet nóg een tint naast de acht
   hierboven maar het groen van de app zelf — dezelfde kleur die "loopt" draagt
   op de projectenlijst. Donkerder dan het olijfgroen van de loonwerker, en die
   staat er zelden op dezelfde dag naast. */
.balkje--project { background: var(--groen); }

/* Privé krijgt geen van de negen kleuren hierboven maar een open ring: het is
   niet van het erf, en dat hoort je aan het merkteken te zien. Nodig sinds de
   Google-agenda meeleest — Sporten, Kring, Zwemles Jeftha en de tandarts komen
   allemaal binnen als `overig` en stonden dus in hetzelfde grijs als de
   monteur. Blauwgrijs en niet grijsgroen: grijs is de kleur van wie er niet is.

   Lichter dan alle negen hierboven, en dat is de bedoeling: op een gewone dag
   is het merendeel van de regels privé, en die horen te wijken voor het werk.
   Stond eerst als open ring — die las op het scherm als een leeg vinkvakje. */
.balkje--prive { background: #8CA0AD; }

/* Afwezigheid krijgt geen soortkleur maar strepen: iemand die er niet is mag
   nooit lijken op iets wat er wél is. */
.balkje--afwezig { background: repeating-linear-gradient(45deg,
                   #9AA096, #9AA096 4px, #ADB3A9 4px, #ADB3A9 8px); }

/* Op een telefoon zijn zeven kolommen te smal voor tekst: "10:00 drachtcontrole"
   werd "10:0…" en dat zegt niets meer. Daaronder blijven de balkjes staan als
   gekleurde streepjes — je ziet dát er iets is en wélke soort, en de dag zelf
   vertelt de rest. De grens ligt op 700 en niet op de 560 van de rest van de
   app: bij zeven kolommen loop je eerder vast dan bij één. Dit is het enige
   omslagpunt met een eigen reden; `test_stijl.py` noemt hem bij naam. */
@media (max-width: 700px) {
  /* Alleen in de kalendervakjes: elders is een balkje een stip naast een regel
     en die hoort zijn maat te houden. */
  .kalenderdag .balkje { height: 6px; padding: 0; font-size: 0; line-height: 0; }
  /* Idem voor de waarschuwing: in een vakje van drie centimeter past "09:00
     Startdienst" niet, en "09:0…" leest als een fout in plaats van als een
     merkteken. Hier is het een amber streepje; wat het is staat op de
     reserveringskaart, één tik verderop. */
  .kalenderdag .kruist {
    height: 6px; padding: 0; font-size: 0; line-height: 0;
    border-left: 0; background: var(--amber);
  }
  .kalenderdag { height: 62px; }
  .kalendermeer-woord { display: none; }
}

/* Hetzelfde balkje, maar als merkteken naast een regel: op het dagscherm, in de
   lijst en op Vandaag staat de tekst ernaast en niet erin. Zonder eigen maat
   valt een leeg balkje in een flexregel op nul breedte weg. */
.balkje--stip { flex: 0 0 auto; width: 10px; height: 10px; padding: 0;
                border-radius: var(--rond-klein); margin-right: 2px; }

.agenda-erbij { display: flex; gap: 10px; margin-top: 16px; }
.dagpijlen { display: flex; gap: 18px; margin: 0 0 12px; }
.filterbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }

/* ------------------------------------------------------------- projecten
   Tes, 17 augustus 2026: "dit staat allemaal in dezelfde kleur" en "super
   onoverzichtelijk". Drie lagen in plaats van vijf gelijke etiketten: de naam
   om op te tikken, de stand als het enige met kleur, en de rest grijs eronder. */
.projectlijst { list-style: none; padding: 0; margin: 8px 0 0; }
.projectlijst li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px 10px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
}
.projectlijst .naam {
  font-size: var(--t-veld); font-weight: 600; color: var(--inkt); text-decoration: none;
  overflow-wrap: anywhere;
}
.projectlijst .naam:hover { color: var(--groen); }
/* Over allebei de kolommen, zodat een lange regel niet onder de stand door
   loopt en daar afbreekt. */
.projectmeta { grid-column: 1 / -1; font-size: var(--t-hint); color: var(--zacht); }

/* De regel met wat er nog moet gebeuren. Draagt kleur, want hij staat er alleen
   bij de projecten die iets vragen — bij de rest is er geen tweede regel. Rood
   zodra de streefdatum voorbij is, dezelfde taal als de vlek op Vandaag. */
.aandacht { color: var(--amber-inkt); font-weight: 500; }
.aandacht--laat { color: var(--rood-donker); }

/* De stand als vlaggetje. Dit is het enige gekleurde ding in de lijst, en dat
   is precies waarom je hem kunt scannen: loopt is groen, in voorbereiding staat
   te wachten in amber, klaar treedt terug in grijs. */
.stand { justify-self: end; white-space: nowrap; }
.stand--loopt { background: var(--groen-licht); color: var(--groen); }
.stand--voorbereiding { background: var(--amber-licht); color: var(--amber-inkt); }
/* Wacht: stil maar niet af. Het grijs van klaar, met de amber-inkt van
   voorbereiding — er komt nog wat. */
.stand--wacht { background: var(--vlak); color: var(--amber-inkt); }
.stand--klaar { background: var(--vlak); color: var(--zacht); }

/* ----------------------------------------------------------- bestellijst
   De standaardlijst: haarlijnen, geen randjes, een kopje per herkomst. Regels
   zonder cijfer om op te sturen horen zo — een tegel verdien je met een getal
   dat verandert. Zie de stijlronde van 17 augustus 2026. */
.bestellijst { list-style: none; padding: 0; margin: 6px 0 0; }
.bestellijst li {
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
  overflow-wrap: anywhere;
  /* De knop naar de overkant, en op een smal scherm eronder. Sinds 18 augustus
     2026 staat er per regel een knop: besteld, of toch niet. */
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
/* Ook ná het afbreken naar de volgende regel blijft de knop rechts. Zonder
   `margin-left: auto` begint hij daar weer links, en dat gebeurt het eerst bij
   de losse bestellingen: die namen typ je zelf en zijn vaak lang. */
.bestellijst form { margin: 0 0 0 auto; }

/* Wat er al besteld is. Grijzer dan de rest: er valt niets meer voor te doen,
   het staat er alleen zodat je niet nog een keer belt. */
.bestellijst--besteld li { color: var(--zacht); }
.kopje--klein {
  border-bottom: 0; color: var(--zacht); margin: 14px 0 0; padding-bottom: 0;
}
.tegelregel--besteld { color: var(--zacht); font-style: italic; }

/* -------------------------------------------------------- de bulksilo's
   Tes, 17 augustus 2026: "kun je ook een afbeelding van bulksilo's inladen in
   het dashboard en daar dan het aantal dagen tot leeg inzetten."

   Zelf getekend in SVG; de maten staan in voer/silotekening.py. De kleur volgt
   dezelfde regel als de voorraadtegels: rood binnen de bestelgrens, amber tot
   het dubbele, groen daarboven, grijs als er niets bekend is. */
.silos {
  display: grid; gap: 12px; margin: 10px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.silo {
  margin: 0; padding: 12px 8px 10px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.silo svg { width: 100%; max-width: 96px; height: auto; display: block; }

/* De omtrek is inkt en niet de kleur van de vulling: een rode silo waar nog
   drie weken in zit zou schreeuwen om niets. De kleur zit in het voer. */
.silolijn { fill: none; stroke: var(--inkt); stroke-width: 2.5; stroke-linejoin: round; }
.silopoot { fill: none; stroke: var(--inkt); stroke-width: 2.5; stroke-linecap: round; }
.silovoer { fill: var(--lijn); }
.silo--krap .silovoer { fill: var(--rood); }
.silo--bijna .silovoer { fill: var(--amber); }
.silo--ruim .silovoer { fill: var(--groen); }

/* Het dagengetal staat ín de silo. Dat is waar je op stuurt, dus dat is het
   grootste op de tekening. */
.silogetal {
  fill: var(--inkt); font-size: var(--t-reus); font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Een wit randje onder de letter: staat het voer hoog, dan valt het getal op
     een donkergroen of rood vlak en leest inkt op inkt niet. */
  stroke: var(--wit); stroke-width: 3px; paint-order: stroke;
}
.siloeenheid {
  fill: var(--zacht); font-size: var(--t-etiket);
  stroke: var(--wit); stroke-width: 2.5px; paint-order: stroke;
}
.siloleeg { fill: var(--zacht); font-size: var(--t-reus); font-weight: 600; }

/* Zonder vulling zit de kleur nergens in: een silo met nog drie dagen zag er
   dan net zo rustig uit als een volle. Dan draagt het getal de kleur. */
.silo--zondervulling.silo--krap .silogetal { fill: var(--rood); }
.silo--zondervulling.silo--bijna .silogetal { fill: var(--amber-inkt); }
.silo--zondervulling.silo--ruim .silogetal { fill: var(--groen); }

.silo figcaption {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center;
}
.silonaam { font-size: var(--t-tekst); font-weight: 600; }
.siloregel { font-size: var(--t-etiket); color: var(--zacht); overflow-wrap: anywhere; }
.silovoernaam { color: var(--inkt); }
.siloregel--zacht { font-style: italic; }

/* ------------------------------------------------------------- de ketels
   Tes, 2 september 2026: "bij ketels wil ik voor de ketels die in gebruik zijn
   op het moment een soort afbeelding van de ketel zien ... en dan wil ik zien
   de temp in de ketel en korte omschrijving welk programma hij nu in zit en
   welke stap." En: "beetje het idee van de voersilo's."

   Zelf getekend in SVG, naar de Plevnik SK Classic 200 l; de maten staan in
   zuivel/keteltekening.py. De melk blijft neutraal — een groene of rode ketel
   melk zegt niets. De kleur zit in het getal: groen als de meting binnen de
   marge viel, rood bij een afwijking, inkt als het een streefwaarde is. */
.ketels {
  display: grid; gap: 12px; margin: 10px 0 4px;
  /* Breder dan de silo's: onder de tekening staat een hele zin ("Laten staan op
     33 °C, 17 uur"), en die brak op 9,5 rem middenin af. */
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}
.ketel {
  margin: 0; padding: 12px 8px 10px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ketel svg { width: 100%; max-width: 104px; height: auto; display: block; }
.ketellink { display: block; color: inherit; text-decoration: none; }
.ketellink:hover .ketelnaam { text-decoration: underline; }

.ketellijn { fill: none; stroke: var(--inkt); stroke-width: 2.5; stroke-linejoin: round; }
.ketelas { fill: none; stroke: var(--inkt); stroke-width: 2.5; stroke-linecap: round; }
.ketelpoot { fill: none; stroke: var(--inkt); stroke-width: 2.5; stroke-linecap: round; }
/* Melkwit en niet de grijze tint van de silo's: Tes, 2 september 2026, "vul de
   ketel eens met een andere kleur want dit ziet er vreemd uit, of een andere wit
   tint". Voer in een silo is grijs, melk niet.

   Drie lagen, want met alleen een vulling zag Tes niet of hij vol stond: een
   witte binnenkant om tegen af te steken, de melk erop, en een streep waar de
   melk ophoudt. Zonder die streep valt een volle ketel samen met de rand en is
   vol niet van halfvol te onderscheiden. */
.ketelbinnen { fill: var(--wit); }
.ketelmelk { fill: var(--melk); }
.ketelspiegel { stroke: var(--melk-rand); stroke-width: 2; stroke-linecap: round; }
/* Het schermpje van het bedieningskastje. Gevuld en niet omlijnd: op 104 pixels
   breed valt een omtrek van tien bij tien weg tegen het kastje eromheen. */
.ketelscherm { fill: var(--zacht); }

/* De temperatuur staat ín de ketel. Dat is waar Tes op kijkt, dus dat is het
   grootste op de tekening. */
.ketelgetal {
  fill: var(--inkt); font-size: var(--t-reus); font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Een wit randje onder de letter: staat de melk hoog, dan valt het getal op
     een gevuld vlak en leest inkt op inkt niet. */
  stroke: var(--wit); stroke-width: 3px; paint-order: stroke;
}
.keteleenheid {
  fill: var(--zacht); font-size: var(--t-etiket);
  stroke: var(--wit); stroke-width: 2.5px; paint-order: stroke;
}
.ketelleeg { fill: var(--zacht); font-size: var(--t-reus); font-weight: 600; }

/* De hangopzakken die staan uit te lekken: één krat per zak, gestapeld op een
   uitlekbak. Tes, 4 september 2026, "een tekeningetje van opgestapelde kratten".
   De maten staan in zuivel/krattentekening.py. De zak krijgt dezelfde melkkleur
   als de ketel, want het is dezelfde yoghurt. */
.kratzak { fill: var(--melk); }
.kratsleuf { fill: none; stroke: var(--lijn); stroke-width: 1.6; stroke-linecap: round; }
/* Alleen een meting kan groen of rood zijn; een streefwaarde is een voornemen. */
.ketel--goed .ketelgetal { fill: var(--groen); }
.ketel--afwijking .ketelgetal { fill: var(--rood); }
.ketel--afwijking { border-color: var(--rood); }

.ketel figcaption {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center;
}
.ketelnaam { font-size: var(--t-tekst); font-weight: 600; }
.ketelregel { font-size: var(--t-etiket); color: var(--zacht); overflow-wrap: anywhere; }
.ketelprogramma { color: var(--inkt); }
/* De stap waar hij nu in zit. Iets zwaarder dan de regels eromheen: dat is het
   antwoord op "waar zijn we", en dat wil je van een meter afstand kunnen zien. */
.ketelstap {
  font-size: var(--t-hint); color: var(--inkt); font-weight: 500;
  overflow-wrap: anywhere;
}
.ketelregel--zacht { font-style: italic; }

/* ------------------------------------------------- rechten per persoon
   De rol zet de standaard, een uitzondering ligt er zichtbaar bovenop. Zie
   mensen/models.py::Rechtuitzondering — onvindbaarheid was het probleem van de
   vinkjes die er op 7 augustus 2026 uit gingen, dus dit merkje mag opvallen. */
/* Een afwijkend recht: hetzelfde merkje in amber, met wat minder lucht omdat
   het achter een lange regel staat. */
.afwijkend { display: inline-block; padding: 2px 8px; }

.rechtregel {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--lijn);
}
.rechtregel:last-child { border-bottom: none; }
.rechtnaam { flex: 1 1 14rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
/* De drie standen. Op een telefoon onder elkaar: drie keuzerondjes naast
   elkaar op een halve duim breed is niet te raken met handschoenen aan. */
.rechtkeuze { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rechtkeuze label {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; font-size: var(--t-hint); color: var(--zacht); white-space: nowrap;
  min-height: 44px;
}
.rechtregel--afwijkend .rechtnaam { font-weight: 500; color: var(--inkt); }


/* ---------------------------------------------------------- overleg */

/* De actie- en besluitenlijst van het maandagoverleg. De rubrieken zijn de
   vaste agenda; ze staan verder uit elkaar dan gewone kopjes omdat je er bij
   de vergadering per stuk doorheen loopt. */

.rubriek { margin-top: 26px; }
/* Het vinkje hoort naast de regel en niet eronder: zonder deze kolom valt de
   knop op een telefoon op een eigen regel en wordt elke rubriek twee keer zo
   hoog als hij hoeft te zijn. */
.rubriek .lijst > li { grid-template-columns: 1fr auto; align-items: center; }
/* Een leeg rondje blijft staan — het is een vaste agenda — maar het hoort geen
   halve telefoon in beslag te nemen. */
.rubriek .lijst--leeg { margin: 6px 0 0; font-size: var(--t-hint); }
.leeftijd { display: block; color: var(--amber); }
.naararchief { margin-top: 28px; display: flex; gap: 20px; }
.naarproject { margin: 30px 0 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.naarproject small { color: var(--zacht); }
.naararchief a { color: var(--zacht); text-decoration: none; }
.naararchief a:hover { color: var(--inkt); }

/* Het vinkje staat rechts van de regel en heeft geen omlijsting nodig: de
   regel eromheen is de knop niet, alleen dit is het. */
.vinkweg { margin: 0; display: flex; align-items: center; }

.afhandelen { margin-top: 30px; }

/* Onder aan Vandaag, naast het blok met streefdatums. Dezelfde vorm met opzet:
   het zijn allebei dingen die eraan komen en geen werk van deze ronde. */
.overlegblok .lijst > li { grid-template-columns: 16px 1fr auto; align-items: center; }
.overlegblok .vlek { background: var(--amber); }
.overlegblok .vlek--laat { background: var(--rood); }
.overlegblok .naam { text-decoration: none; }
/* Sinds 14 september 2026 ook bovenaan Mijn week, en met verzetten per punt.
   Dat zit achter een klapje op een derde regel onder de naam: een datumvak met
   knop onder élke regel is op een telefoon meer formulier dan lijst, en
   verzetten is de uitzondering — meestal vink je af. */
.overlegblok .verzetklap { grid-column: 2 / -1; }
.overlegblok .verzetklap > summary {
  list-style: none; cursor: pointer; display: inline-block;
  color: var(--zacht); font-size: var(--t-hint); text-decoration: underline;
  padding: 4px 0; min-height: 28px;
}
.overlegblok .verzetklap > summary::-webkit-details-marker { display: none; }
.overlegblok .verzetklap[open] > summary { color: var(--inkt); }
/* Het verzetformulier van de puntpagina, maar zonder de streep en de ruimte
   erboven: hier staat hij in een lijstregel en niet onder een blok. */
.overlegblok .verschuif--kaal { margin: 4px 0 0; padding-top: 0; border-top: 0; }


/* ---------------------------------------------------------- logboek */

/* De filterbalk hergebruikt `.zoekbalk` van de postbus: het is dezelfde rij die
   op een telefoon omvalt. Alleen de velden erin staan hier onder hun eigen
   opschrift, want er zijn er drie en die moeten uit elkaar te houden zijn. */
.zoekbalk p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.zoekbalk label { font-size: var(--t-hint); color: var(--zacht); }

.logregel .naam { font-weight: 500; }


/* ---------------------------------------------------------- energie */

/* De cijfers boven de maand: afname, teruglevering, gas, bedrag. Een rij die op
   een telefoon omvalt in twee kolommen. */
.cijferrij { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0 20px; }
.cijferrij > li { display: flex; flex-direction: column; }
.cijfer { font-size: var(--t-kop); font-weight: 500; }

/* Een staafje onder de regel in plaats van ernaast: op een telefoon is er geen
   ruimte voor een kolom met grafiek, en onder de tekst valt de vorm van de
   maand alsnog op. */
.staaf {
  display: block; height: 6px; margin-top: 6px;
  background: var(--lijn); border-radius: var(--rond-klein);
}
.staafdeel {
  display: block; height: 100%;
  background: var(--groen); border-radius: var(--rond-klein);
}

.energielijst .naam { text-decoration: none; }

/* De uren van een dag: tijd, staaf, getal. De staaf krijgt de ruimte die
   overblijft, zodat de getallen rechts onder elkaar staan. */
.urenlijst > li {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 10px; align-items: center; min-height: 32px;
}
.uurnaam { color: var(--zacht); font-size: var(--t-hint); }
.uurgetal { font-variant-numeric: tabular-nums; font-size: var(--t-hint); }

.gelukt { color: var(--groen); }

/* De silo op het dashboard is een link naar Voorraad. Tes, 23 augustus 2026:
   "ik wil graag dat je bij dashboard als je de silo's aanklikt dat je bij de
   voorraad komt." Geen knopkleur en geen streepje: de tekening is al het
   aanraakvlak, en een blauwe onderstreepte silo leest als een fout. */
.silolink { display: block; color: inherit; text-decoration: none; }
.silolink:hover .silonaam { text-decoration: underline; }

/* Waar het dagengetal op rust. Klein en grijs: het is een verantwoording, geen
   mededeling — je leest hem alleen als je het getal niet vertrouwt. */
.tegelherkomst { font-size: var(--t-etiket); }

/* De maandnota, opgebouwd als de papieren nota van de leverancier: omschrijving,
   aantal, tarief, bedrag. Op een telefoon vallen aantal en tarief weg — daar
   gaat het om de bedragen, en de rest staat op de nota zelf. */
.nota { margin-top: 30px; }
.notaregels > li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 12px; padding: 5px 0; align-items: baseline;
}
.notaaantal, .notatarief { display: none; color: var(--zacht); font-size: var(--t-hint); }
.notabedrag { font-variant-numeric: tabular-nums; }
.notatotaal { border-top: 1px solid var(--lijn); font-weight: 500; }

/* ------------------------------------------- de rest van een kop, opgevouwen
   Tes, 24 augustus 2026: "dat je onder Financieel alleen dashboard en
   kengetallen kan zien en de rest moet uitklappen." De blokkenpagina was vier
   telefoonschermen lang.

   Het knopje noemt wát eronder zit; daarom mag hij over twee regels lopen en
   is hij geen strak pilletje. Wat achter een knopje zit bestaat niet voor wie
   de app twee keer per week gebruikt. */
.meerblokken { margin-top: 8px; }
.meerblokken > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 12px; min-height: 44px;
  border: 1px dashed var(--lijn); border-radius: var(--rond);
  color: var(--zacht); font-size: var(--t-hint);
}
.meerblokken > summary::-webkit-details-marker { display: none; }
/* Het pijltje zelf, want de standaardmarkering is weg. Hij draait als het
   blok openstaat — zo zie je aan de vorm of er nog iets onder zit. */
.meerblokken > summary::before {
  content: "›"; flex: none;
  font-size: var(--t-kop); line-height: 1; color: var(--groen);
  transition: transform .15s ease-out;
}
.meerblokken[open] > summary::before { transform: rotate(90deg); }
.meerblokken > summary:hover { border-color: var(--groen); color: var(--inkt); }
.meerblokken[open] > summary { margin-bottom: 8px; }
.meerknop { overflow-wrap: anywhere; }

/* Het bestelscherm staat sinds 1 oktober 2026 in drie tabellen: de bestelling,
   de dichtgeklapte vaste lijst en de slotregel. Zonder vaste kolombreedtes
   kiest elke tabel zijn eigen maat en staan de invulvakken niet onder elkaar.
   De naamkolom houdt de rest. */
.tabel.bestelling col.kol-aantal { width: 6.5em; }
.tabel.bestelling col.kol-bedrag { width: 7.5em; }
@media (max-width: 560px) {
  .tabel.bestelling col.kol-aantal { width: 5.2em; }
  .tabel.bestelling col.kol-bedrag { width: 5.5em; }
}

/* De uren van een dag: tijd, verloop, van het net, terug, prijs. Met kopjes,
   want zonder kopjes staat er een kolom getallen waarvan niemand weet wat het
   zijn — Tes, 24 augustus 2026: "wat lees ik nou per uur af?" */
.urentabel .verloop { min-width: 90px; width: 40%; }
.urentabel .uurnaam { color: var(--zacht); font-weight: 400; }
.urentabel .staaf { display: flex; gap: 1px; }
/* De twee kanten in dezelfde balk: afname naar rechts, teruglevering erachter.
   Twee kleuren en niet een, want het is geen groter of kleiner maar een andere
   richting. */
.staafdeel--terug { background: var(--amber); }
.legendavlek { display: inline-block; width: 12px; height: 12px; border-radius: var(--rond-klein); }
.legendavlek--afname { background: var(--groen); }
.legendavlek--terug { background: var(--amber); }

/* Onder de balken met meldingen: hoeveel er nog meer zijn, met één knop om ze
   allemaal weg te tikken. Zeven keer een kruisje aantikken is geen oplossing
   voor te veel balken. */
.meerpostjes {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 12px; color: var(--zacht); font-size: var(--t-hint);
}
.meerpostjes form { margin: 0; }

/* De AP-regels uit een agenda, als voorstel voordat ze op de lijst komen.
   Elk voorstel is een blokje: de agendaregel erboven als geheugensteun,
   daaronder de velden. Geen tabel met vier kolommen — op een telefoon houdt
   zo'n rij van geen enkel veld iets leesbaars over. */
.voorstellen { list-style: none; padding: 0; margin: 16px 0 0; }
.voorstel { padding: 16px 0; border-bottom: 1px solid var(--lijn); }
/* Wat er al op de lijst staat blijft zichtbaar maar treedt terug: je wilt zien
   dát hij herkend is, zonder hem opnieuw aan te vinken. */
.voorstel--staat-er-al { opacity: 0.55; }
.voorstel > p { margin: 0 0 8px; }
/* Het vinkje en de agendaregel op één regel: die regel is waar je op beslist. */
.voorstelkop { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.voorstelkop label { flex: none; }
.voorstelkop .merkje { margin: 0; }
.voorstelvelden {
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.voorstelvelden p { margin: 0 0 12px; }
.voorstelvelden .breed { grid-column: 1 / -1; }
.voorstelvelden .fout { padding: 6px 10px; font-size: var(--t-hint); margin-top: 4px; }

/* De stappen van een recept. Elke knop zit in een eigen formulier, en een
   formulier is een blok: zonder deze regel staan omhoog, omlaag en weg onder
   elkaar en is één stap een halve telefoon hoog. */
.stapknoppen { display: flex; align-items: center; gap: 4px; }
.lijst--stappen > li { gap: 4px 8px; }
.lijst--stappen .naam { flex: 1 1 auto; min-width: 0; }

/* Het potloodje achter een stap. Dicht staat het naast de pijltjes en het
   kruisje; open neemt het paneel de hele regel en staat het formulier eronder,
   anders zit het in een kolom van drie centimeter naast de knopjes. */
.stapwijzig > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
}
.stapwijzig > summary::-webkit-details-marker { display: none; }
.stapwijzig[open] { flex-basis: 100%; }
.stapwijzig[open] > summary { background: var(--lijn); color: var(--inkt); }
.stapwijzig > form { margin-top: 8px; }

/* De kleine invulvelden op het controleblad: liters per smaak en de pH. Zonder
   deze regel rekt een invoerveld tot de hele regelbreedte en valt de eenheid
   op een eigen regel — dan lijkt één getal intikken een formulier. */
input[type="text"].getalveld { width: 5.5em; min-width: 0; display: inline-block; }

/* Waarvoor de huur van de ijskar was, onder de naam van de post. Een eigen
   regel en geen tweede kolom: op een telefoon is de bestellijst al drie
   kolommen breed, en dit veld blijft bij de meeste regels gewoon leeg. */
input[type="text"].toelichting { display: block; width: 100%; margin-top: 4px; }

/* Het logo van De Biltse Boer heeft zijn woordmerk al in het plaatje zitten,
   dus geen letters ernaast en een andere maat dan het beeldmerk van Tameroord. */
/* Breedte altijd `auto`: het beeldmerk van Tameroord is vierkant en staat op
   een vaste maat, dit logo is breder dan hoog. Zonder deze regel erft hij die
   vaste breedte en wordt hij uitgerekt. De kopregel staat er expliciet bij,
   anders wint de regel van `.merkkop` verderop in dit bestand. */
.logo--zuivel img { width: auto !important; height: 2.4rem !important; }
/* Groter dan dat van Tameroord: daar staan de letters naast het plaatje, hier
   zitten het woordmerk én "verse lokale melkproducten" erin. */
.logo--zuivel.logo--groot img,
.merkkop .logo--zuivel.logo--groot img { width: auto !important; height: 8rem !important; }

/* Het reinigings- en het desinfectieplan. Eén blok per methode: bovenaan hoe en
   waarmee, daaronder de objecten die er zo bij horen. Tes noemde de eerste
   versie "zeer onoverzichtelijk" — zeventien regels van gelijk gewicht met
   rechts een nummer dat je onderaan moest opzoeken. Nu draagt het blok het
   gewicht en zijn de objecten de lichte lijst eronder. */
.methodeblok { padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.methodeblok:last-of-type { border-bottom: 0; }
.methodeblok .kopje { margin-top: 0; }
.methodewerkwijze { margin: 2px 0 0; }
.methodemiddel { margin: 4px 0 0; }

/* Eén regel per object, en hij mag niet breken: "Werkmaterialen: garde, spatel,
   emmers" viel eerst over vier regels uiteen en dan is de lijst langer dan het
   plan. Vandaar flex met een vaste rechterkolom in plaats van het raster van
   .lijst--streep, dat zijn eerste kolom aan een kleurstreepje geeft. */
.planlijst { list-style: none; padding: 0; margin: 12px 0 0; }
.planlijst > li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 16px; padding: 7px 0; border-bottom: 1px solid var(--lijn);
}
.planlijst > li:last-child { border-bottom: 0; }
.planlijst .naam { min-width: 0; }
.planlijst .hoevaak {
  flex: none; color: var(--zacht); font-size: var(--t-hint); white-space: nowrap;
}
.plansloot { margin-top: 20px; }

/* Afdrukken. Tes wil het plan kunnen laten zien of meegeven bij een controle;
   dan hoeft het menu er niet bij. Geldt voor elke pagina — een lijst die op het
   scherm klopt maar op papier de halve breedte krijgt is geen bewijsstuk. */
@media print {
  .bovenbalk, .zijkolom, .postje, .meerpostjes, .zij-streep { display: none; }
  .raamwerk { display: block; }
  main { max-width: none; padding: 0; }
  .methodeblok, .planlijst > li { break-inside: avoid; }
}

/* Het logboek van de periodieke metingen. Naam links met wat eronder hoort,
   het invulveld rechts — je loopt met de thermometer langs de koelingen en
   tikt onderweg de getallen in, dus die velden moeten onder elkaar staan. */
.meetlijst { list-style: none; padding: 0; margin: 16px 0 0; }
.meetlijst > li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--lijn);
}
.meetlijst .naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meetveld { display: flex; align-items: baseline; gap: 6px; flex: none; }
/* Over tijd is de uitzondering en die mag opvallen; de rest is het ritme. */
.meetlijst > li.over-tijd .naam .hint { color: var(--amber-inkt); }
.logdag { padding: 12px 0 0; }
.logdag h3 { margin: 0; font-size: var(--t-veld); }
/* Een waarde buiten de afgesproken grens. Alleen als er een grens ís: zonder
   norm is een getal geen afwijking. */
.buiten { color: var(--amber-inkt); font-weight: 600; }
.lijst--weghalen > li.uit .naam { color: var(--zacht); }

/* ---------------------------------------------------------------- schuifjes
   Instellingen die aan of uit staan, op de klantkaart. Er stond eerst een knop
   met de handeling erop ("Facturen samenvoegen") en de stand in een zin
   erboven. Tes, 2 september 2026: "ik zou eigenlijk nog wel een schuifsysteem
   willen zodat ik kan zien waar die op staat. met die blokken is best
   onduidelijk", en zijn vraag ernaast: "staat de instelling zoals op het blok
   genoemd of als ik hem aanklik is dat dan de instelling?" — precies de twijfel
   die een knop oproept en een schuifje niet.

   Een echt vinkje eronder, alleen anders geschilderd: dan werkt tikken, de
   spatiebalk en de schermlezer zoals het hoort. Zonder javascript staat er een
   knop Opslaan achter; schuif.js verstuurt hem vanzelf en haalt die knop weg. */
.schuifregel { display: flex; align-items: center; gap: 12px; padding: 12px 0;
               border-bottom: 1px solid var(--lijn); }
.schuifregel:last-of-type { border-bottom: 0; }
.schuif { display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 1; }
.schuif input { position: absolute; opacity: 0; width: 0; height: 0; }
.schuif-baan {
  flex: none; width: 44px; height: 26px; border-radius: var(--rond-pil); position: relative;
  background: var(--lijn); transition: background 120ms ease;
}
.schuif-baan::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--wit); box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 120ms ease;
}
.schuif input:checked + .schuif-baan { background: var(--groen); }
.schuif input:checked + .schuif-baan::after { transform: translateX(18px); }
.schuif input:focus-visible + .schuif-baan { outline: 2px solid var(--groen); outline-offset: 2px; }
.schuif-naam { font-weight: 600; }
/* Een schuifje dat achter een lijstregel hangt in plaats van op een eigen regel
   te staan: op de ingrediëntenlijst is de naam links het onderwerp en zegt het
   schuifje alleen of hij nog meedoet. Zonder `flex: none` rekt hij de hele
   regel op, en dan staat het schuifje van de vijfde regel ergens anders dan dat
   van de vierde. Het formuliertje eromheen blijft op zijn plek staan bij het
   omslaan op een telefoon. Zie zuivel/ingredientregel.html. */
.schuif--klein { flex: none; gap: 0; }
.lijst > li > .rechts > form[data-schuif] {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
  margin-left: 10px;
}
/* De stand in één woord naast het schuifje, want kleur alleen is geen antwoord
   voor wie de tinten niet uit elkaar houdt. */
.schuif-stand { color: var(--zacht); font-size: var(--t-hint); flex: none; }
.schuif-uitleg { margin: 0 0 4px; }

/* De kostprijs bovenaan de productkaart. Tes, 3 september 2026: "die prijs moet
   op de product kaart zichtbaar zijn" — en het formulier eronder is twintig
   velden lang, dus het bedrag hoort boven de vouw. Rustiger dan .melding: dit is
   geen bericht maar een getal dat er altijd staat. */
.kerncijfer {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  background: var(--groen-licht); color: var(--groen);
  padding: 10px 14px; border-radius: var(--rond); margin: 12px 0 20px;
}
.kerncijfer strong { font-size: var(--t-groot); }
.kerncijfer a { margin-left: auto; font-size: var(--t-hint); }
/* De genummerde stappen op "Erfwerk op je telefoon". Het enige genummerde
   lijstje in de app: hier zijn de nummers de uitleg zelf — je doet ze op
   volgorde, met de telefoon in je andere hand. Ruimte tussen de regels, want
   op een klein scherm loopt stap 3 anders in stap 4 over. */
.uitlegstappen { margin: 0 0 20px; padding-left: 1.5rem; }
.uitlegstappen li { margin-bottom: 10px; }

/* -------------------------------------------------------------- het rapport
   Eén blad voor de bespreking: vier kerncijfers groot, daaronder drie blokken
   klein. Tes, 4 september 2026, over het eerste voorstel: "ziet er niet echt
   fraai en overzichtelijk uit", terwijl "de opsplitsing wel oke" was. Dat is
   het patroon van 17 en 31 augustus: alles even zwaar is wat een scherm
   onleesbaar maakt, niet de hoeveelheid.

   Dus: een regel die nauwelijks beweegt blijft dun en grijs, en alleen wat
   eruit springt wordt donker. De kleur van het verschil zegt beter of slechter
   en niet omhoog of omlaag — dalende voerkosten zijn groen. */
/* Vier kerncijfers naast elkaar, en niet in het raster van `.tegels`: die is
   gemaakt voor kaarten van vijftien rem met knoppen erin, en dan staan er drie
   op een rij met de vierde alleen eronder. Hier past er een getal met twee
   regeltjes eronder in de helft van die breedte. */
.kerncijfers {
  display: grid; gap: 10px; margin: 16px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kerntegel {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak);
}
/* Zoveel kolommen als er passen, en niet drie afgedwongen: met de zijkolom
   ernaast blijft er op een laptop ruim duizend punten over, en drie kolommen
   van driehonderd knippen de kengetalnamen doormidden. Zelfde aanpak als bij
   `.tegels`, dus zonder een eigen omslagpunt.

   `min-width: 0` op de kolom zelf is wat het werkend houdt: een rastercel is
   standaard zo breed als zijn inhoud, en de tabel erin staat in een schuifbak
   die zijn eigen breedte neemt. Zonder dit liep het derde blok buiten beeld. */
.rapportblokken { display: grid; gap: 0 26px; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
.rapportlijnen { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.rapportblok { min-width: 0; }
/* De naam van een kengetal is een naam en geen kolomkop: de grijze kapitaaltjes
   van `.tabel th` maken er MELKKOEIEN van, en dan schreeuwt elke regel. */
.rapporttabel tbody th {
  text-transform: none; letter-spacing: normal; font-size: var(--t-tekst);
}
/* De periode staat er voluit, dus geen hoofdletter per woord zoals bij een
   maandnaam — dat maakt van "t/m" een "T/M". */
.rapportperiode { font-size: var(--t-kop); font-weight: 600; text-align: center; }
.rapporttabel th[scope="row"] { font-weight: 400; color: var(--zacht); }
.rapporttabel td.leeg { font-size: var(--t-hint); }
.verschil { color: var(--zacht); font-size: var(--t-hint); }
.verschil--beter { color: var(--groen); font-weight: 600; }
.verschil--slechter { color: var(--rood); font-weight: 600; }
.rapportrij--op th[scope="row"] { color: var(--inkt); font-weight: 600; }
.rapportrij--op td.getal { font-weight: 600; }
.rapportrij--in th[scope="row"] { padding-left: 14px; font-size: var(--t-hint); }
/* De ene regel die zegt wat er ontbreekt. Eén strook in plaats van een blok per
   melding: drie gele vlakken onder elkaar was precies het te-zware beeld. */
.uitzetregel--letop {
  background: var(--amber-licht); color: var(--amber-inkt);
  border-left: 3px solid var(--melk-rand);
  padding: 8px 11px; border-radius: var(--rond);
}
/* ---- Het prognoseblad -------------------------------------------------
   Tien jaarkolommen naast elkaar passen op geen enkel scherm. De tabel
   schuift daarom binnen zijn eigen kader; de pagina zelf blijft staan. De
   regelnaam schuift niet mee, want een kolom met bedragen zonder regelnaam
   ernaast zegt niets. `.breedtabel` bestaat al en doet het schuiven; hier komt
   alleen wat deze tabel extra nodig heeft. */
.prognosetabel { min-width: 60rem; }
.prognosetabel td.vastekolom, .prognosetabel th.vastekolom {
  position: sticky; left: 0; z-index: 1;
  background: var(--papier); min-width: 15rem;
}
.prognosetabel input[type="text"] { width: 5.5rem; }
.prognosetabel .toelichtingkolom input { width: 14rem; text-align: left; }

/* De grootboeknummers staan onder de regelnaam: klein, want je leest ze
   alleen als je iets wilt terugzoeken in de boekhouding. */
.prognosetabel .nummers {
  display: block; color: var(--zacht); font-size: var(--t-etiket);
  font-variant-numeric: tabular-nums;
}

/* Een blokkop is geen regel met getallen: hij zet alleen de kop erboven. */
.prognosetabel tr.blokkop td {
  padding-top: 1.1rem; border-bottom: 0;
  font-size: var(--t-etiket); letter-spacing: .08em; text-transform: uppercase;
  color: var(--zacht);
}

/* Wat de app zelf telt staat op een vlak, zodat het niet te verwarren is met
   een vakje waar je in typt. */
.prognosetabel tr.totaalregel td { background: var(--vlak); font-weight: 600; }
.prognosetabel tr.dikkeregel td {
  background: var(--vlak); font-weight: 700;
  border-top: 2px solid var(--inkt);
}

/* Het lopende jaar: al begonnen, nog niet geweest. */
.prognosetabel th.lopend { color: var(--groen); }

/* Rente en aflossing komen van het tweede blad; daar typ je hier niet in. */
.prognosetabel .uitschema { color: var(--zacht); font-style: italic; }

.prognosetabel .vrijenaam { width: 13rem !important; text-align: left; }

/* Op een telefoon nam de regelnaam 240 van de 412 pixels, en dan past er geen
   hele jaarkolom meer naast. De naam mag daar over twee regels; het getal
   ernaast is waar je naar kijkt. */
@media (max-width: 560px) {
  .prognosetabel td.vastekolom, .prognosetabel th.vastekolom { min-width: 9rem; }
  .prognosetabel input[type="text"] { width: 4.5rem; }
  .prognosetabel .toelichtingkolom input { width: 9rem; }
}

/* Het productblad van de begroting. Dertien kolommen worden onleesbaar als ze
   allemaal even zwaar zijn — dat is precies wat Tes "onoverzichtelijk" noemt.
   Dus: het cijferwerk links en rechts licht, en alleen de twee vakjes waar hij
   in typt in de gewone inktkleur, met een lijntje eromheen. */
.begrotingsblad td.jaarkolom { color: var(--zacht); }
.begrotingsblad th.jaarkolom { font-weight: 400; }
.begrotingsblad th small { display: block; font-size: var(--t-hint); color: var(--zacht); font-weight: 400; }
/* `display: block` hierboven wint het anders van het `hidden`-kenmerk, en dan
   staan de kopjes van allebei de weergaven tegelijk op het scherm. */
.begrotingsblad [hidden] { display: none; }
.begrotingsblad .hint { display: block; font-size: var(--t-hint); color: var(--zacht); }
.begrotingsblad .randlinks { border-left: 2px solid var(--lijn); }
.begrotingsblad .randrechts { border-right: 2px solid var(--lijn); }
.begrotingsblad td.invulvak { background: var(--vlak); }
.begrotingsblad th.invulkop { background: var(--vlak); }
.begrotingsblad input[type="text"] { width: 5rem; }
.begrotingsblad input[type="text"]:disabled { background: transparent; border-style: dashed; }
.knoppenbalk { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
/* Een rij knoppen. Stond 34 keer in de sjablonen en had geen enkele regel: de
   knoppen dreven naast elkaar omdat `.knop` toevallig inline-block is. Zodra
   er een <form> tussen stond — en dat is bij elke knop die iets dóét in plaats
   van ergens heen gaat — viel de rij uit elkaar. Tes, 23 september 2026, over
   het prijsopgavescherm: "wat een zooi." */
.knoppenrij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.knoppenrij > form { display: contents; }
/* Een formulier met meer dan één veld hoort wél bij elkaar te blijven; alleen
   een los knopje mag opgaan in de rij. */
.knoppenrij > form.knopvorm { display: flex; align-items: center; gap: 8px; }
.knoppenrij > form.knopvorm select { width: auto; min-width: 9rem; }
.knoppenrij > form.knopvorm label { margin: 0; }
.knoppenbalk .etiket { font-size: var(--t-etiket); color: var(--zacht); text-transform: uppercase; letter-spacing: .06em; }

/* Op een telefoon zijn 412 pixels alles wat er is. De oudere jaren gaan er dan
   af: de twee vakjes waar hij in typt horen binnen bereik te staan, en dáár
   gaat dit scherm over. Wie de hele reeks wil ziet hem op een breed scherm. */
@media (max-width: 560px) {
  .begrotingsblad .jaarkolom--oud { display: none; }
}

/* Een suggestie is geen waarde. In de invultabellen staat wat de app zelf al
   weet als grijze, schuine tekst in het vakje — het streefgetal op het
   laadscherm van het voer, de hectares uit Grasland op de prognose. Tik je hem
   over, dan telt hij; laat je hem staan, dan heb je niets ingevuld.
   Tes, 9 september 2026: "zelfde als bij voer laden (schuine suggesties doen)". */
.ladingtabel input::placeholder {
  font-style: italic;
  color: var(--zacht);
  opacity: 1; /* Firefox zet er anders nog eens doorzichtigheid overheen. */
}

/* De stappenbalk van de wizard. Geen nummers in bolletjes maar woorden: op een
   telefoon is "Wanneer" leesbaar en een 2 in een rondje niet. Wat je gehad hebt
   is klikbaar, wat nog komt niet — een stap die nog niet kan zegt niets. */
.wizardbalk { display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
              margin: 0 0 18px; padding: 0; font-size: var(--t-hint); }
.wizardbalk li { padding: 6px 12px; border-radius: var(--rond-pil); background: var(--vlak);
                 color: var(--zacht); min-height: 32px; display: flex; align-items: center; }
.wizardbalk li a { color: inherit; text-decoration: none; }
.wizardbalk li.wizardbalk--gehad { color: var(--groen); }
.wizardbalk li.wizardbalk--hier { background: var(--groen); color: var(--wit);
                                  font-weight: 600; }

/* Het kopieerveld van het rekenblad. Een tekstvak omdat de tekst regeleinden
   heeft; de knop staat eronder en niet ernaast, want naast een vak van vijf
   regels hoog zweeft hij in het niets. */
.kopieerregel textarea { width: 100%; font-family: var(--mono, monospace);
                         font-size: var(--t-hint); border: 1px solid var(--lijn);
                         border-radius: var(--rond); padding: 10px 12px;
                         background: var(--vlak); color: var(--inkt); }
.kopieerregel textarea + .knop { margin-top: 8px; }

/* De uitleg onder een label, boven het vak zelf. Django zet zijn help_text
   eronder; daar leest niemand hem, want dan heb je het vak al ingevuld. */
.veldhint { display: block; color: var(--zacht); font-size: var(--t-hint);
            margin: -4px 0 6px; }

/* Prijsopgave: drie knopjes op één regel in plaats van een keuzelijst.
   Tes, 23 september 2026: "niet met dropdown menu maar gewoon in 1 regel
   meerdere dingen." Django zet elke keuze in een eigen <div>; die mogen naast
   elkaar staan, en op een smal scherm onder elkaar vallen. */
.standen > div { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.standen label { min-height: 36px; }
.bijvakjes { display: flex; gap: 8px; }
.bijvakjes input { max-width: 8rem; }

/* Prijsopgave: de keuzes in blokjes per groep. Tes, 23 september 2026:
   "tussen die opties moet een betere scheiding komen zodat het minder lang en
   onoverzichtelijk is of lijkt." Eén lijst van zeven regels leest als zeven
   vragen; vier blokjes lezen als vier keuzes. */
.keuzeblok {
  margin: 0 0 18px; padding: 10px 12px 2px;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--rond);
}
.keuzeblok-kop {
  margin: 0 0 4px; font-size: var(--t-etiket); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--zacht);
}
.keuzeblok .lijst { margin: 0; }
.keuzeblok .lijst > li:last-child { border-bottom: 0; }

/* Een veldlabel met zijn i ernaast. Tes, 23 september 2026: "alle uitleg per
   punt onder een i zetten in plaats van uitgeschreven onder de regel." */
.veldkop { display: flex; align-items: center; gap: 4px; margin: 0; }
.veldkop > label, .veldkop > h2, .veldkop > h3 { margin: 0; }
.veldkop > .uitleg { flex-basis: 100%; order: 3; }
.veldkop > .uitleg > summary { width: 32px; height: 32px; }
.uitleg--klein { margin-left: -6px; }
.veldkop > .uitleg:not([open]) { flex-basis: auto; order: 0; }

/* Een prijsopgave in de agenda: een eigen kleur, want er is nog niets
   afgesproken. Tes, 23 september 2026: "in de agenda plaatsen als prijsopgave,
   eigen kleur in agenda meegeven." Gestippeld en in de kleur van de ruimte
   noch van een boeking — zo zie je in één oogopslag dat de dag nog vrij is. */
.balkje--prijsopgave {
  background: var(--vlak);
  border: 1px dashed var(--zacht);
  color: var(--zacht);
}

/* Een blok dat dicht begint. De mailtekst op het prijsopgaveoverzicht: hij moet
   er zijn, maar niet in beeld. Tes, 23 september 2026. */
.uitleg-vouw > summary {
  cursor: pointer; padding: 10px 0; min-height: 44px;
  display: flex; align-items: center;
  color: var(--groen); font-size: var(--t-tekst);
}

/* Een tegel met een lijntekening erboven, midden op het vlak. Voor de kern van
   een aanvraag: groepsgrootte, aankomst, vertrek. Naar het voorbeeld dat Tes op
   23 september 2026 in de postbus zette — hij wil een aanvraag in één oogopslag
   lezen en niet in een tabel zoeken.

   Een variant op `.tegel` en geen tweede tegel: de vorm is dezelfde, alleen
   staat de inhoud hier gecentreerd onder een merkje in plaats van links. */
.tegel--merk {
  align-items: center; text-align: center;
  padding: 18px 14px; border-left-width: 1px;
}
.tegelmerk {
  width: 34px; height: 34px; margin: 0 auto 8px; display: block;
  fill: none; stroke: var(--groen); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.tegel-kop {
  margin: 0; font-size: var(--t-etiket); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--zacht);
}
.tegel-waarde { margin: 4px 0 0; font-size: var(--t-kop); font-weight: 700; }
.tegel-bij { margin: 2px 0 0; font-size: var(--t-hint); color: var(--zacht); }

/* De gegevens eronder: label boven waarde, twee naast elkaar. Geen tabel —
   een tabel van twee kolommen leest op een telefoon als een knijpende rij. */
.gegevens {
  display: grid; gap: 14px 24px; margin: 0 0 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gegevens > div > dt {
  margin: 0; font-size: var(--t-etiket); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--zacht);
}
.gegevens > div > dd { margin: 2px 0 0; font-size: var(--t-tekst); }

/* Een formulier dat alleen een knop draagt, in een rij met andere knoppen.
   Zonder dit is het een blok en valt elke knop op een eigen regel. */
.knopvorm { display: flex; align-items: center; gap: 8px; margin: 0; }

/* Een knop rechtsboven naast de titel. Tes, 23 september 2026: "knop wijzigen
   moet rechts boven." De rest van de handelingen staat onderaan, na de
   gegevens — eerst lezen, dan kiezen. */
.kop-knop { margin-left: auto; }

/* Kiezen wat een aanvraag wordt: drie knoppen onder elkaar met hun uitleg
   erin. Tes, 23 september 2026 — geen keuzelijst met een knop ernaast, want
   dan kies je twee keer voor één besluit. */
.standenkeuze { display: grid; gap: 10px; margin: 16px 0; max-width: 30rem; }
.standknop {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 14px 16px; cursor: pointer;
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn); border-left: 4px solid var(--groen);
  border-radius: var(--rond); font: inherit;
}
.standknop:hover { background: var(--groen-licht); }
.standknop-naam { font-size: var(--t-tekst); font-weight: 700; }
.standknop-uitleg { font-size: var(--t-hint); color: var(--zacht); }

/* Zeven standen passen niet op een telefoon. Laat ze schuiven in plaats van
   afbreken; het tabje waar je op staat trekt de app zelf in beeld. */
.subtabs--rollend { overflow-x: auto; scrollbar-width: none; }
.subtabs--rollend .subtab { white-space: nowrap; }

/* De reserveringskaart in twee kolommen. Tes, 24 september 2026: "eventueel
   met 2 kolommen gaan werken, anders wordt het een heel lang door te scrollen
   scherm." Onder de 700 punten valt het vanzelf terug op één kolom: naast
   elkaar zetten op een telefoon maakt twee smalle kolommen van niets. */
.kaartkolommen { display: grid; gap: 0 28px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .kaartkolommen { grid-template-columns: 1fr 1fr; }
}
.kaartkolom > h2:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Het weekoverzicht van de verhuur. Tes, 25 september 2026, over wat erop moet:
   "Hoe maken we daar een werkbaar iets wat voldoende info geeft maar geen
   overkill aan info." Dat is bij hem altijd hetzelfde: niet minder gegevens
   maar meer verschil. Bestellen staat bovenaan en krijgt de ruimte — dat is
   het enige blok dat meegaat naar de winkel; de week zelf is het vaste ritme
   en staat klein. Zie verhuur/week.py.
   --------------------------------------------------------------------------- */

.weekkop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 10px 0 12px; border-bottom: 2px solid var(--inkt);
}
.weekkop-datum { font-weight: 600; }
.weekkop-cijfers { color: var(--zacht); }
.weekkop-cijfers b { color: var(--inkt); font-weight: 600; }

.weekblok { margin-top: 26px; }

/* Bestellen: het grootst, want dit is wat je overschrijft op je boodschappenbriefje. */
.inkooplijst { list-style: none; padding: 0; margin: 0; }
.inkooplijst > li { padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.inkooplijst summary { list-style: none; cursor: pointer; padding: 3px 0; }
.inkooplijst summary::-webkit-details-marker { display: none; }
.inkoopregel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.inkoopwat { font-size: var(--t-veld); font-weight: 600; }
/* Het pijltje zegt dat er iets achter zit: per keer wie en hoeveel man. */
.inkoopwat::after { content: " ›"; color: var(--zacht); font-weight: 400; }
.inkooplijst details[open] .inkoopwat::after { content: " ⌄"; }
.inkoophoeveel { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inkoophoeveel b { font-size: var(--t-veld); }
.inkoophoeveel span { color: var(--zacht); }

.uitsplitsing { list-style: none; padding: 4px 0 2px; margin: 0 0 0 4px; }
.uitsplitsing > li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0 3px 10px; border-left: 2px solid var(--lijn);
  color: var(--zacht); font-size: var(--t-hint);
}
.uitsplitsing a { color: var(--zacht); }
.uitsplitsing > li span { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* De bijzonderheden in amber: dat is waar het in de winkel op misgaat. */
.bijzonder {
  display: block; margin-top: 3px; padding: 1px 0 1px 10px;
  border-left: 3px solid var(--amber);
  color: var(--amber-inkt); font-size: var(--t-hint);
}

/* Regelen: alleen wat niet vanzelf gaat. Rood is wat misgaat als je niets
   doet, amber is een herinnering. */
.regellijst { list-style: none; padding: 0; margin: 0; }
.regellijst > li {
  display: grid; grid-template-columns: 10px 1fr; gap: 10px;
  align-items: start; padding: 8px 0; border-bottom: 1px solid var(--lijn);
}
.regelstip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  margin-top: 7px;
}
.regelstip--nu { background: var(--rood); }
.regellijst small { display: block; color: var(--zacht); font-size: var(--t-hint); }

/* De week zelf: het vaste ritme, klein. Eén regel per dag. */
.weeklijst { list-style: none; padding: 0; margin: 0; }
.weeklijst > li {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 4px 12px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--lijn);
}
.weekdatum { color: var(--zacht); font-size: var(--t-hint); }
.weekdatum b { display: block; color: var(--inkt); font-size: var(--t-tekst); font-weight: 600; }
.wkwat { min-width: 0; }
.weekboeking { display: block; }
.weekboeking + .weekboeking { margin-top: 6px; }
.weekboeking .naam { text-decoration: none; font-weight: 600; }
.weekboeking small { display: block; color: var(--zacht); font-size: var(--t-hint); }
.ruimtestip {
  display: inline-block; width: 9px; height: 9px; border-radius: var(--rond-klein); margin-right: 6px;
}
.weekklussen { flex: none; white-space: nowrap; }
/* Het merkje van het ritme, lichter dan het werk zelf — dezelfde afweging als
   bij de rondestrook op Mijn week. */
.klusje {
  display: inline-block; padding: 1px 8px; margin-left: 4px; border-radius: var(--rond-pil);
  background: var(--vlak); color: var(--zacht); font-size: var(--t-etiket);
}
/* De uitweg uit een lege week. Amber, zoals overal waar de app iets meldt
   in plaats van iets toont. */
.verderop {
  margin: 16px 0 0; padding: 10px 12px;
  background: var(--amber-licht); color: var(--amber-inkt);
  border-left: 4px solid var(--amber);
}
.weekvoet { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--lijn); }

@media (max-width: 560px) {
  /* Naam en aantal onder elkaar: in één regel wordt "Borrel arrangement 2"
     tot twee letters geperst. */
  .inkoopregel { display: block; }
  .inkoophoeveel { display: block; margin-top: 2px; }
  .weeklijst > li { grid-template-columns: 1fr; }
  .klusje { margin: 3px 4px 0 0; }
}
/* ------------------------------------------------ Balans in de zuivel
   Tes, 28 september 2026: "nu is het echt niet duidelijk". De wijzers boven,
   de afwijkingen eronder, en de vier tabellen dichtgeklapt tot één regel —
   het vaste ritme klein, de uitzondering groot. */
.plaatlink {
  display: block; color: inherit; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--rond); padding: 6px 4px;
}
.plaatlink:hover, .plaatlink:focus-visible { border-color: var(--lijn); background: var(--vlak); }
.opvallend {
  margin-top: 18px; padding: 12px 14px;
  background: var(--amber-licht); border-radius: var(--rond);
}
.opvallend .kopje { margin-top: 0; }
.opvallendlijst { list-style: none; margin: 0; padding: 0; }
.opvallendlijst li { padding: 6px 0; border-top: 1px solid var(--lijn); }
.opvallendlijst li:first-child { border-top: 0; }
/* Boven of onder het eigen normaal — geen goed of fout, dus geen groen en
   rood maar één kleur met een teken ervoor. */
.opvallendlijst .boven, .opvallendlijst .onder { font-weight: 600; color: var(--amber-inkt); }
.opvallendlijst .zacht { color: var(--zacht); font-size: var(--t-hint); }
.wijzerblad .plaat { max-width: 320px; margin-inline: auto; }
/* De i onder een zuivelwijzer: het rondje midden onder het getal, de tekst
   links uitgelijnd zodra hij openklapt. */
.wijzer .plaatlink, .wijzer .plaatkern { display: flex; flex-direction: column; align-items: center; }
.wijzer .plaatleeg { display: block; margin-top: 2px; }
.plaatinfo { margin-top: 2px; }
.plaatinfo > p { text-align: left; }

/* Een blok dat je openklikt, met zijn naam en een korte stand ernaast. Voor
   lijsten die per kop lang worden — de tarieven per ruimte. Tes, 28 september
   2026: "dan wordt die pagina een stuk korter." */
.vouwblok { border-bottom: 1px solid var(--lijn); }
.vouwblok > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  min-height: 48px; padding: 12px 0; cursor: pointer;
}
.vouwblok-naam { font-size: var(--t-tekst); font-weight: 600; }
.vouwblok-bij { font-size: var(--t-hint); color: var(--zacht); }
.vouwblok[open] > summary { border-bottom: 1px solid var(--lijn); }
.vouwblok > .lijst { margin-top: 0; }