/* TCB Smart — dezelfde huisstijl als de overige TCB-apps (IBM Plex, navy/accent). */
:root{
  --navy:#1a2236; --navy-soft:#2a3550;
  --accent:#1a6eb5; --accent-soft:#e7f0f9;
  --bg:#f2f3f5; --surface:#fff;
  --border:#e3e5ea; --border-soft:#eef0f3;
  --text:#1a2236; --text-muted:#6b7180; --text-soft:#9aa0ad;
  --red:#d63031; --red-soft:#fde8e8;
  --green:#1a8a5a; --green-soft:#e2f5d0;
  --orange:#b87a00; --orange-soft:#fef3dc;
  --shadow-sm:0 1px 2px rgba(26,34,54,.04);
  --shadow-md:0 2px 8px rgba(26,34,54,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
/* De pagina hangt aan het venster en niet aan het schuifgebied.
   `.page` centreert zich met `margin:0 auto` binnen de body. Steekt er op een
   blad iets buiten het venster -- een tabel, een balk, een kaart met een vaste
   breedte -- dan groeit het schuifgebied mee en schuift alles naar rechts: een
   brede witte strook links, de rechterkant van de tabel buiten beeld, en de
   naam rechtsboven in de balk afgekapt. Zo stond het blad Werkbonnen op
   14-09-2026 rechts uitgelijnd in plaats van in het midden.
   `clip` en niet `hidden`: allebei binden ze de breedte aan het venster, maar
   `hidden` maakt van de viewport een schuifcontainer en dat kost onnodig werk
   bij elke scroll. Wat écht breder is dan het venster schuift zelf -- de
   tabellen zitten in `.tabelrol` en het planbord in `.planbord`, allebei met
   hun eigen `overflow`. */
body{min-height:100vh;overflow-x:hidden;overflow-x:clip}
a{color:var(--accent)}

/* login */
.login{display:none;position:fixed;inset:0;z-index:9999;
  background:linear-gradient(135deg,#1a2236 0%,#2a3550 100%);
  align-items:center;justify-content:center;padding:1rem}
.login-card{background:var(--surface);border-radius:14px;padding:44px 36px;max-width:380px;width:100%;
  box-shadow:0 12px 48px rgba(0,0,0,.18);text-align:center}
.login-logo{width:48px;height:48px;margin:0 auto 16px;border-radius:12px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;letter-spacing:.04em}
.login-title{font-size:18px;font-weight:600;color:var(--navy)}
.login-sub{font-size:13px;color:var(--text-muted);margin-bottom:24px}
.login-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;font-family:inherit;outline:none;margin-bottom:10px}
.login-input:focus{border-color:var(--accent)}
.login-btn{width:100%;padding:12px;background:var(--navy);color:#fff;border:none;border-radius:8px;
  font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;margin-top:4px}
.login-btn:hover:not(:disabled){background:var(--navy-soft)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-btn.google{background:#fff;color:var(--navy);border:1.5px solid var(--border);margin-top:8px}
/* Dezelfde valkuil als bij `.knop.licht`: de hover hierboven maakt hem donker
   terwijl de tekst donker blijft, en dan is "Inloggen met Google" onleesbaar. */
.login-btn.google:hover:not(:disabled){background:var(--bg);border-color:var(--text-soft);
  color:var(--navy)}
.login-fout{color:var(--red);font-size:12.5px;margin-top:12px;min-height:18px}
.login-link{display:inline-block;margin-top:10px;font-size:12px;color:var(--text-muted);cursor:pointer}

/* balk */
.topbar{background:var(--navy);color:#fff;padding:0 1.25rem;display:flex;align-items:center;
  justify-content:space-between;height:58px;position:sticky;top:0;z-index:100}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:30px;height:30px;border-radius:7px;background:var(--accent);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:12px;letter-spacing:.04em}
.brand-name{font-size:14.5px;font-weight:600}
.brand-sub{font-size:11.5px;color:rgba(255,255,255,.55);margin-left:2px}
.brand-versie{font-size:10.5px;font-weight:400;color:rgba(255,255,255,.38);letter-spacing:.02em}
.topbar-right{display:flex;align-items:center;gap:10px;font-size:12.5px;color:rgba(255,255,255,.65)}
.knop-uit{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);
  border-radius:6px;padding:5px 10px;font-size:11.5px;cursor:pointer;font-family:inherit}
.knop-uit:hover{color:#fff;border-color:rgba(255,255,255,.4)}

.tabs{display:flex;gap:2px;background:var(--navy-soft);padding:0 1.25rem;position:sticky;top:58px;z-index:99}
.tab{background:transparent;border:none;color:rgba(255,255,255,.6);font-family:inherit;font-size:13px;
  padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent}
.tab.actief{color:#fff;border-bottom-color:var(--accent)}

.page{max-width:1180px;margin:0 auto;padding:1.25rem 1rem 3rem}
.page.smal{max-width:640px}
/* Het planbord krijgt de hele breedte. Elders houdt 1180 px een leesbare regel;
   hier kost elke honderd pixel marge een dag die niet meer past, en dan wordt
   een maand alsnog een streepjescode. */
.page.breed{max-width:none;padding-left:1.25rem;padding-right:1.25rem}

/* kaarten en tabellen */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem;
  box-shadow:var(--shadow-sm);margin-bottom:1rem}
.card-title{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:.2rem}
.card-sub{font-size:12.5px;color:var(--text-muted);margin-bottom:1rem}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--text-muted);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--border)}
td{padding:9px 10px;border-bottom:1px solid var(--border-soft);vertical-align:top}
tr.klikbaar{cursor:pointer}
/* Een kolomkop waarop gesorteerd kan worden. De actieve kolom draagt een pijl;
   zonder dat merkteken is niet te zien waaraan de volgorde ligt. */
th.sorteerbaar{cursor:pointer;user-select:none;white-space:nowrap}
th.sorteerbaar:hover{color:var(--navy)}
th.sorteerbaar.actief{color:var(--accent)}
tr.klikbaar:hover td{background:var(--accent-soft)}
.leeg{padding:2rem;text-align:center;color:var(--text-soft);font-size:13px}

/* De klantnaam naast een nummer in een paneelkop: hij hoort erbij maar mag het
   nummer niet overschreeuwen -- dat is waar je op zoekt. */
.kop-klant{font-weight:500;color:var(--text-muted);margin-left:.15rem}

/* Het dagnummer op een planbordblokje van een klus die meerdere dagen loopt.
   Zonder dit zien vijf dagen er hetzelfde uit: ze dragen hetzelfde ordernummer. */
.pb-dagnr{font-weight:400;opacity:.75;font-size:10.5px}

.badge{display:inline-block;padding:2px 8px;border-radius:11px;color:#fff;font-size:11px;font-weight:600;
  white-space:nowrap}
.nr{font-family:'IBM Plex Mono',monospace;font-size:12.5px}

/* formulier */
.veld{margin-bottom:.9rem}
.label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:5px;font-weight:500}
.input,.textarea,.select{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);outline:none}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent)}
.input[readonly]{background:var(--bg);color:var(--text-muted)}
.textarea{min-height:80px;resize:vertical}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.rij3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem}
.rij4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.7rem}

.knop{padding:10px 16px;background:var(--navy);color:#fff;border:none;border-radius:8px;font-size:13.5px;
  font-weight:600;font-family:inherit;cursor:pointer}
.knop:hover:not(:disabled){background:var(--navy-soft)}
.knop:disabled{opacity:.5;cursor:default}
.knop.licht{background:var(--surface);color:var(--navy);border:1.5px solid var(--border)}
.knop.accent{background:var(--accent)}
.knop.rood{background:var(--red)}
.knop.blauw{background:var(--accent);color:#fff}
.knop.groen{background:var(--green)}

/* Elke variant zijn eigen hover.
   De regel hierboven zette álle knoppen op navy zodra je erover ging of erop
   tikte. Bij een lichte knop bleef de tekst donkerblauw en viel hij weg tegen
   die donkere achtergrond -- op een telefoon het ergst, want daar blijft de
   hover na een tik hangen tot je ergens anders tikt. En een rode knop die
   blauw wordt zegt iets anders dan wat hij doet.

   De lichte wordt dus lichter in plaats van donkerder; de gekleurde houden hun
   kleur en worden alleen iets dieper. */
.knop.licht:hover:not(:disabled){background:var(--bg);border-color:var(--text-soft);
  color:var(--navy)}
.knop.accent:hover:not(:disabled),
.knop.blauw:hover:not(:disabled){background:var(--accent);filter:brightness(.92)}
.knop.rood:hover:not(:disabled){background:var(--red);filter:brightness(.92)}
.knop.groen:hover:not(:disabled){background:var(--green);filter:brightness(.92)}
.knop.groot{width:100%;padding:14px;font-size:15px}
.knop.klein{padding:5px 10px;font-size:12px;border-radius:6px}
/* Een knop die alleen een pijl draagt heeft geen zijruimte nodig; zonder deze
   regel is de pijlknop even breed als "Weekend" en valt de balk uit elkaar. */
.knop.klein.pijl{padding:5px 9px;line-height:1.1}
.knoppen{display:flex;gap:.5rem;flex-wrap:wrap}

/* Het blad Overzicht: de staafjes bij "openstaand per medewerker" en
   "per type werk". De KPI-blokken, de maandgrafiek, de bonnenlijst met zijn
   filterbalk en de kaart stonden hier ook; die zijn van het blad af. */
/* De correspondentie op het tabblad E-mail van een werkbon. Ontvangen en
   verstuurd staan door elkaar op tijd; het pijltje en de lichte rand links
   zeggen welke kant het op ging, want dat is waar je naar zoekt. */
.mailregel{border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:8px;margin-top:.5rem;background:var(--surface)}
.mailregel.uit{border-left-color:var(--green)}
.mailregel summary{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;
  padding:.55rem .7rem;cursor:pointer;font-size:13px}
.mailregel summary strong{flex:1 1 14rem;min-width:0}
.mailpijl{flex:none;font-size:11.5px;color:var(--text-muted);width:6.5rem}
.mailwie{flex:0 1 auto;color:var(--text-muted);font-size:12.5px}
.mailwanneer{flex:none;color:var(--text-soft);font-size:12px}
/* Waarom dit bericht in de lijst staat: het adres of het nummer dat raak was.
   Bij een zoekopdracht op nummers is dat de eerste vraag die opkomt. */
.mailwaarom{flex:none;font-size:11px;background:var(--accent-soft);color:var(--navy);
  border-radius:4px;padding:1px 6px}
.mailtekst{padding:.2rem .7rem .7rem;font-size:13px;line-height:1.45;
  white-space:pre-wrap;color:var(--text)}

.balkrij{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;font-size:13px}
.balknaam{flex:0 0 42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balk{flex:1;height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.balk i{display:block;height:100%;background:var(--accent)}
.balkgetal{flex:none;width:2.5rem;text-align:right;color:var(--text-muted)}
/* Een bedrag is breder dan een aantal: "€ 12.345,67" past niet in 2,5rem, en
   afgeklemd geld leest als een ander getal dan het is. */
.balkgetal.euro{width:6.5rem;color:var(--text)}

/* De kop en de voet van een stapscherm in de medewerker-app. De voet plakt
   onderaan: met handschoenen aan wil je Volgende op een vaste plek, niet
   ergens onder de inhoud waar hij per stap verspringt. */
/* De tekst van een leesstap: wat er te lezen valt, met de regelafbreking zoals
   kantoor hem heeft ingetypt. */
/* Een foto met een kruisje erop. Het kruisje staat in de hoek en niet eronder:
   met handschoenen aan wil je niet zoeken, en per ongeluk raken is hier erger
   dan een klik extra -- vandaar de bevestiging. */
/* Een foto met zijn omschrijving ernaast. Op een telefoon vallen ze onder
   elkaar; daar is de breedte er niet voor twee kolommen. */
/* De foto's van één stap naast elkaar. Eerder stond elke foto op een eigen
   regel met een tekstvak ernaast; bij zes foto's is dat zes schermen scrollen
   voordat je ziet wat je hebt. */
.fotoraster{display:flex;flex-wrap:wrap;gap:.6rem}
.fotoraster .fotovak img{width:104px;height:104px;object-fit:cover;border-radius:8px}

/* Het tekstvak onder de foto's. Ruim, en met de hand groter te trekken -- wie
   zes foto's beschrijft heeft meer dan twee regels nodig. */
.textarea.groot{min-height:8.5rem;resize:vertical}

.fotoregel{display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap;
  padding:.7rem 0;border-bottom:1px solid var(--border)}
.fotoregel:last-of-type{border-bottom:none}
.fotoregel .fotovak img{width:120px;height:120px;object-fit:cover;border-radius:8px}
.fototekst{flex:1 1 14rem;min-width:0}
.fototekst .textarea{min-height:auto}

/* Vaste verbruiksregels: naam links, aantal rechts. Een vak van vier cijfers
   is genoeg en houdt de naam leesbaar op een telefoon. */
.vastelijst{margin-top:.5rem}
.vasteregel{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;
  border-bottom:1px solid var(--border);font-size:14px}
.vasteregel:last-child{border-bottom:none}
.vasteregel span{flex:1;min-width:0}
.vasteregel .input{flex:none;width:6.5rem;text-align:right}

.fotovak{position:relative;display:inline-block}
.fotoweg{position:absolute;top:4px;right:4px;width:30px;height:30px;border:none;
  border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:18px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.fotoweg:hover{background:var(--red)}

.leestekst{white-space:pre-wrap;font-size:14px;line-height:1.5}
.stukken{display:flex;flex-wrap:wrap;gap:.5rem}

.stapkop{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}
.stapkoptitel{min-width:0}
.stapkoptitel strong{display:block;font-size:15px;line-height:1.25}
.stapvoet{position:sticky;bottom:0;display:flex;gap:.6rem;padding:.7rem 0;
  background:var(--bg);border-top:1px solid var(--border);margin-top:1rem}
.stapvoet .knop{flex:1;padding:14px;font-size:15px}

/* De stappenlijst in de medewerker-app. Grote rijen, want ze worden met
   handschoenen aan aangetikt; wat op slot zit is grijs en niet weggelaten --
   zien wat er nog komt is de helft van het houvast. */
.voortgang{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin:.2rem 0 .9rem}
.voortgang i{display:block;height:100%;background:var(--green);transition:width .3s}
.staptank{margin:1rem 0 .35rem;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-muted)}
.stap{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem 0;border-top:1px solid var(--border)}
.stap .stapnr{flex:none;width:26px;height:26px;border-radius:8px;background:var(--bg);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text-soft)}
.stap.af .stapnr{background:var(--green);border-color:var(--green);color:#fff}
.stap .stapnaam{flex:1;font-size:14px}
.stap .stapuitleg{font-size:12px;color:var(--text-muted);margin-top:.1rem}
.stap .stapstand{flex:none;color:var(--text-muted);font-size:14px}
.stap.slot{opacity:.45}
.stapwerk{padding:0 0 .7rem 2.1rem}
.stapwerk .fotos{margin-top:.2rem}

/* De balk boven de medewerker-app: geen bereik, of foto's die nog wachten. Vast
   bovenaan en niet als melding die na vier seconden weg is -- dit is een stand
   van zaken en geen mededeling. */
.wachtbalk{position:sticky;top:0;z-index:400;padding:9px 14px;font-size:13px;font-weight:600;
  background:var(--accent-soft);color:var(--navy);border-bottom:1px solid var(--border)}
.wachtbalk.uit{background:var(--orange-soft);color:var(--orange)}

.melding{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:1.25rem;z-index:500;
  padding:11px 18px;border-radius:8px;font-size:13px;box-shadow:var(--shadow-md);max-width:90vw;
  cursor:pointer}
.melding.info{background:var(--navy);color:#fff}
.melding.goed{background:var(--green);color:#fff}
.melding.fout{background:var(--red);color:#fff}

/* filters */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.filters .input,.filters .select{width:auto;min-width:150px;padding:8px 10px;font-size:13px}
/* "Toon [15] rijen": de keuzelijst hoort bij de woorden eromheen en niet bij
   de filters ernaast, vandaar de kleine maat en de smalle select. */
.toonrijen{display:flex;align-items:center;gap:.35rem;font-size:12.5px;
  color:var(--text-muted);white-space:nowrap}
.toonrijen .select{width:auto;min-width:0;padding:6px 26px 6px 10px;font-size:12.5px}
.telling{font-size:12.5px;color:var(--text-muted);margin-left:auto}

/* detail */
/* Een eigen vraagvenster. Een `confirm()` kent maar twee antwoorden en bevriest
   de pagina; hier past er een derde bij -- alsnog opslaan -- en blijft de app
   leven. Boven het paneel, want het gaat over het paneel. */
.dialoog{position:fixed;inset:0;background:rgba(26,34,54,.45);z-index:500;display:flex;
  align-items:center;justify-content:center;padding:1rem}
.dialoog-card{background:var(--surface);border-radius:12px;padding:1.4rem;max-width:460px;width:100%;
  box-shadow:0 18px 50px rgba(15,22,40,.35)}
.dialoog-tekst{font-size:14px;color:var(--navy);margin-bottom:1.1rem;line-height:1.5}

/* De keuzekolom van de werkbonnenlijst: smal, en het vinkje groot genoeg om
   met een muis te raken zonder de rij eronder te openen. */
/* Een gekleurde regel in de werkbonnenlijst: dezelfde twee kleuren als het blok
   op het planbord, zodat de twee schermen dezelfde bon hetzelfde noemen. De
   linkerhelft is de werkbonstatus, de rechterhelft de werksoort -- of het
   kenmerk, als de bon er een draagt: die wint, want "werken niet gereed" zegt
   meer over deze bon dan dat het schilderwerk is. Zie `bonKleuren`.

   De kleur staat op de cellen en niet op de rij: een `tr` met een achtergrond
   tekent die per cel opnieuw vanaf nul, en dan begint de overgang in elke kolom
   opnieuw in plaats van één keer over de hele regel. Vandaar de kleur op de rij
   én cellen die doorzichtig zijn. */
tr.gekleurd{background:linear-gradient(to right,
  var(--strook-links) 0, var(--strook-links) 50%,
  var(--strook-rechts) 50%, var(--strook-rechts) 100%)}
tr.gekleurd td{background:transparent;border-bottom-color:rgba(255,255,255,.35)}
/* Alles in de regel neemt de letterkleur van de regel over. Grijs op een diepe
   kleur is niet te lezen, en `--text-muted` staat op een handvol plekken in de
   cellen zelf. */
tr.gekleurd td,tr.gekleurd td *{color:inherit}
tr.klikbaar.gekleurd:hover td{background:rgba(255,255,255,.18)}

th.kies,td.kies{width:34px;padding-left:10px;padding-right:0;text-align:center}
td.kies input,th.kies input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

.paneel{position:fixed;inset:0;background:rgba(26,34,54,.45);z-index:400;display:none;
  align-items:flex-start;justify-content:center;padding:1rem;overflow:auto}
.paneel.open{display:flex}
.paneel-card{background:var(--surface);border-radius:12px;max-width:1080px;width:100%;padding:1.5rem;
  margin:2rem 0;box-shadow:0 12px 48px rgba(0,0,0,.2);position:relative}
/* Het kruisje zit op de kaart en niet in de inhoud: die wordt bij elk scherm
   opnieuw getekend, en dan zou het per scherm opnieuw moeten worden gezet --
   negen van de tien keer vergeten. Buiten de rand van de inhoud, zodat het
   nooit over een veld of een kop valt. */
.paneel-sluit{position:absolute;top:.55rem;right:.7rem;z-index:2;border:0;background:transparent;
  font-size:24px;line-height:1;color:var(--text-muted);cursor:pointer;padding:.15rem .4rem;
  border-radius:8px}
.paneel-sluit:hover{background:var(--bg);color:var(--navy)}
/* Waar het opslaan staat. Rechtsboven naast het kruisje, want dat is waar je
   kijkt voordat je wegklikt -- de vraag "is het bewaard?" hoort beantwoord te
   zijn vóór je hem stelt. */
/* De stand rechtsboven in het paneel, met de knop Ongedaan maken ernaast.
   `pointer-events` staat op none zodat de melding geen klikken opvangt van wat
   eronder ligt; de knop zet hem voor zichzelf weer aan. */
.paneel-stand{position:absolute;top:.9rem;right:2.6rem;z-index:2;font-size:12px;
  color:var(--text-muted);transition:opacity .3s;pointer-events:none;
  display:flex;align-items:center;gap:.5rem}
.paneel-stand .knop{pointer-events:auto}
.paneel-stand.bezig{color:var(--text-muted)}
.paneel-stand.goed{color:var(--green)}
.paneel-stand.fout{color:var(--red)}
.kop{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.kop h2{font-size:17px;color:var(--navy)}
/* De werkbonstatus staat rechtsboven en niet in de kantlijn: het is het eerste
   waar kantoor naar kijkt en het enige veld in de kop dat je verzet. Vast
   breed, zodat de titel ernaast niet verspringt als de status verandert. */
/* De datums van een opdracht rechtsboven: wanneer hij is ontstaan, wanneer hij
   staat en wanneer hij gereed is gemeld. Bij een opdracht die uit een order is
   gelezen is de aanmaakdatum de enige die zegt wanneer de vraag binnenkwam. */
.opdracht-datums{font-size:12px;color:var(--text-muted);text-align:right;line-height:1.6}
.opdracht-datums span:first-child{margin-right:.4rem}

.kop-status{flex:0 0 150px;max-width:150px}
.kop-status .label{text-align:right;display:block}
/* De statuskeuze draagt dezelfde kleur als waarmee de bon op het planbord
   staat, zodat je in één blik ziet waar hij staat. De kleur komt uit
   `statusKleur` en wordt inline gezet -- inclusief de letterkleur, want een
   beheerder mag ook een lichte kleur kiezen. Hier alleen wat er omheen hoort.
   Kleiner dan een gewoon veld: het is een etiket dat je soms verzet, geen veld
   dat je invult. */
.statuskeuze{font-weight:600;padding:6px 10px;font-size:12.5px}
.statuskeuze option{background:var(--surface);color:var(--text);font-weight:400}
.regel{display:flex;justify-content:space-between;gap:1rem;padding:6px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.regel span:first-child{color:var(--text-muted)}

/* De werkbon in twee kolommen: links wat over het bezoek gaat en telkens in
   beeld moet blijven, rechts de plek, de opdrachten en de tekst. Onder de
   900 px vallen ze onder elkaar -- op een telefoon is een kantlijn geen kantlijn. */
.bon-indeling{display:grid;grid-template-columns:300px 1fr;gap:1.1rem;align-items:start}
.bon-kantlijn .card{margin-bottom:0}
.bon-kantlijn .veld{margin-bottom:.7rem}
.bon-kantlijn .rij2{gap:.4rem}
@media (max-width:900px){.bon-indeling{grid-template-columns:1fr}}

/* tabbladen binnen het detailpaneel -- dezelfde indeling als het werkbonscherm
   van OutSmart, zodat kantoor niet hoeft te zoeken waar een veld nu weer staat */
.subtabs{display:flex;gap:.15rem;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:.9rem}
.subtab{background:transparent;border:none;border-bottom:2px solid transparent;padding:8px 10px;
  font-family:inherit;font-size:12.5px;color:var(--text-muted);cursor:pointer;white-space:nowrap}
.subtab:hover{color:var(--navy)}
.subtab.actief{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* De omschrijving is klantzichtbaar; dat moet je zien voor je typt, niet erna. */
.waarschuwing{background:var(--red-soft);color:var(--red);border-radius:8px;padding:.6rem .8rem;
  font-size:12.5px;margin-bottom:.7rem}
/* Wachten is geen fout. Een rood vlak bij "even geduld" leest als een probleem
   en zet iemand met handschoenen aan onnodig op scherp. */
.waarschuwing.wacht{background:var(--accent-soft);color:var(--navy)}
.vink{display:inline-flex;align-items:center;gap:.45rem;font-size:13px;color:var(--text);cursor:pointer}
.vink input{width:16px;height:16px;accent-color:var(--accent)}

/* Een vraag op een formulier krijgt een eigen regel. `.vink` is inline-flex --
   goed voor een rijtje korte keuzes, fout voor vragen waar je per stuk ja of
   nee op zegt: die schuiven dan naast elkaar en lopen in elkaar over. */
.vraagrij{display:flex;width:100%;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.6rem 0;border-bottom:1px solid var(--border);font-size:14px;line-height:1.35}
.vraagrij:last-of-type{border-bottom:none}
.vraagtekst{flex:1 1 14rem;min-width:0}
/* Ja en nee naast elkaar, met ruimte tussen de raakvlakken: met handschoenen
   aan is een knop van tien pixels geen knop. */
.janee{flex:none;display:flex;gap:1.1rem}
.janee input{width:22px;height:22px}

/* Aanvinklijsten in kolommen. Dertien keuzes onder elkaar duwen de rest van het
   scherm weg terwijl elk vinkje twee woorden is; naast elkaar is het in één
   oogopslag te overzien. `auto-fill` met een minimum vult wat er past -- op een
   telefoon blijft het vanzelf één kolom. */
.vinkjes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.15rem .9rem;margin-top:.15rem}
.vinkjes .vink{margin:.2rem 0}

/* een tabel die breder is dan het paneel scrollt zelf, en duwt de kaart niet uit elkaar */
.tabelrol{overflow-x:auto;margin:0 -.25rem}

/* het sleepvak van de order-inlezer -- slepen, klikken of plakken */
.dropzone{border:2px dashed var(--border);border-radius:10px;padding:1.1rem;text-align:center;
  cursor:pointer;background:var(--bg);transition:background .15s,border-color .15s}
.dropzone:hover,.dropzone.erover{border-color:var(--accent);background:var(--accent-soft)}
.dropzone.gevuld{border-style:solid;border-color:var(--green);background:var(--surface);cursor:default}
.dropzone strong{font-size:13px;color:var(--navy)}
.dropzone .hint{font-size:12px;color:var(--text-muted);margin-top:3px}
th.rechts,td.rechts{text-align:right}

/* De materialentabel: de invoervelden staan in de tabel zelf, zodat ze onder
   hun eigen kolomkop uitkomen. Als los grid eronder liepen ze nergens mee. */
/* Acht kolommen: code, omschrijving, objectcode, aantal, prijs, wie, normuren,
   weg. Het regeltotaal is eruit -- aantal maal prijs staat ernaast en de
   optelling staat onder de tabel. De omschrijving krijgt de vrijgekomen ruimte:
   daar staat wát er is gedaan, en afgeknipt tot "Compleet" is dat precies de
   informatie die je zocht. */
table.materialen{table-layout:fixed;min-width:1000px}
table.materialen th,table.materialen td{padding-left:7px;padding-right:7px}
table.materialen th:nth-child(1),table.materialen td:nth-child(1){width:11%}
table.materialen th:nth-child(2),table.materialen td:nth-child(2){width:36%}
table.materialen th:nth-child(3),table.materialen td:nth-child(3){width:10%}
table.materialen th:nth-child(4),table.materialen td:nth-child(4){width:7%}
table.materialen th:nth-child(5),table.materialen td:nth-child(5){width:10%}
table.materialen th:nth-child(6),table.materialen td:nth-child(6){width:14%}
table.materialen th:nth-child(7),table.materialen td:nth-child(7){width:10%}
table.materialen th:nth-child(8),table.materialen td:nth-child(8){width:38px}

/* Het normuren-veld. Een lege suggestie in grijs is de tabelwaarde; staat er
   geen norm, dan zegt de suggestie dat in oranje -- een ontbrekende norm is een
   gat en geen handeling die geen tijd kost. */
.normveld{font-family:'IBM Plex Mono',monospace;font-size:12.5px;padding:8px 8px}
.normveld::placeholder{color:var(--text-soft);opacity:1}
.normveld.geennorm::placeholder{color:var(--orange)}

/* De zoeklijst bij een artikelcode. Zweeft op `body`, want in de tabel zou hij
   tegen de rand van het schuifvak worden afgeknipt. */
.zoeklijst{position:fixed;z-index:2000;max-height:19rem;overflow:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-md);font-size:13px}
.zoekregel{display:flex;gap:.6rem;align-items:baseline;padding:6px 10px;cursor:pointer;
  border-bottom:1px solid var(--border-soft)}
.zoekregel:last-child{border-bottom:none}
.zoekregel:hover,.zoekregel.actief{background:var(--accent-soft)}
.zoekregel .nr{flex:0 0 6.5rem;color:var(--navy)}
.zoekregel span:nth-child(2){flex:1;min-width:0}
.zoekregel .zoekprijs{flex:0 0 5.5rem;text-align:right;color:var(--text-muted)}
/* De prijslijst van de opdrachtgever. Hij staat er alleen bij de artikelen die
   van die klant zijn, en die staan bovenaan -- het merkje zegt waarom. */
.zoekgroep{font-size:11px;padding:1px 6px;border-radius:9px;margin-left:.4rem;
  background:var(--accent-soft);color:var(--navy);white-space:nowrap}
tr.invoerrij td{vertical-align:middle;padding:8px 6px;background:var(--bg)}
tr.invoerrij .input{padding:7px 9px;font-size:12.5px;width:100%}
.input.rechts{text-align:right}
.knop-weg.groen{color:var(--green);font-size:19px;font-weight:600}
.knop-weg.groen:hover{color:var(--navy)}
.knop-weg{background:transparent;border:none;color:var(--text-soft);font-size:16px;line-height:1;
  cursor:pointer;padding:0 4px}
.knop-weg:hover{color:var(--red)}
.handtekening-beeld{max-width:100%;border:1px solid var(--border);border-radius:8px;background:#fff}

/* medewerker */
/* ── planbord ──────────────────────────────────────────────────────────────
   Opgezet als een strokenplanning, naar het voorbeeld van OutSmart: één blok
   per klus dat over zoveel kolommen loopt als hij dagen duurt, in banen zodat
   twee klussen op dezelfde dag naast elkaar in de hoogte staan. Vier losse
   kaartjes voor één klus van vier dagen leest als vier klussen; dit niet.

   De kleur vult het hele blok en ligt er niet als waas overheen -- op een vol
   bord zoek je op kleur, niet op tekst. Links een kwart de werkbonstatus, de
   rest het type werk of de werkstatus. */
/* Het bord scrolt in zijn eigen vak en niet met de pagina mee. Dat is wat de
   datumkop en de medewerkerkolom laat blijven staan: `sticky` werkt binnen de
   scrollende doos, en zonder eigen hoogte is die doos de hele pagina -- dan
   schuift de kop gewoon mee naar boven. */
/* Onder het planbord is marge verloren ruimte: het bord vult het venster en de
   pagina schuift niet meer, dus wat de kaart en de pagina onderaan vrijhouden
   is een witte band waar geen planning in past. Alleen op dit scherm; elders
   houdt diezelfde marge de bladspiegel juist leesbaar. */
.card:has(#pb-rol){padding-bottom:.5rem;margin-bottom:0}
.page:has(#pb-rol){padding-bottom:12px}

/* De knoppenrij van het planbord: Week, Maand, Weekend, Vandaag en de pijlen.
   Plakt onder de tabbalk (58 px balk + 40 px tabs), zodat hij in beeld blijft
   wanneer de pagina schuift. Dat gebeurt: op een venster dat niet schermvullend
   is passen de kop, de filters, de legenda en een bord van minstens 240 px niet
   samen in de hoogte, en dan verdween juist deze rij als eerste naar boven. */
.pb-balk{position:sticky;top:98px;z-index:50;display:flex;flex-wrap:wrap;gap:.35rem;
  background:var(--surface);padding:.45rem 0;margin:0 0 .5rem}

.planbord{overflow:auto;max-height:calc(100vh - 210px);
  border:1px solid var(--border);border-radius:10px;background:var(--surface)}
/* Zo breed als de dagen samen zijn, en minstens zo breed als het venster.
   Zonder `max-content` blijft de rij op de vensterbreedte staan en puilen de
   kolommen eruit in plaats van het bord te laten schuiven; zonder `min-width`
   krimpt een lege week tot een streepje. */
.planbord .pb-kop{display:flex;position:sticky;top:0;z-index:3;background:var(--surface);
  border-bottom:1px solid var(--border);width:max-content;min-width:100%}
.planbord .pb-dagen{display:grid;flex:1}
.pb-dagkop{padding:.35rem .3rem;text-align:center;font-size:11px;line-height:1.35;
  border-left:1px solid var(--border);color:var(--text-muted);white-space:nowrap}
.pb-dagkop .nr{font-size:11.5px;color:var(--navy);font-weight:600}
.pb-week{font-size:10px;color:var(--text-soft)}

.pb-rij{display:flex;border-top:1px solid var(--border);min-height:44px;
  width:max-content;min-width:100%}
.pb-naam{width:150px;min-width:150px;position:sticky;left:0;z-index:2;background:var(--surface);
  padding:.45rem .6rem;font-size:12.5px;border-right:1px solid var(--border)}
.pb-naam .nr{color:var(--text-soft);font-size:11px}
.pb-hoek{display:flex;align-items:flex-end;font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em}

/* Het werkvlak van één medewerker: de banen als rasterrijen, met de dagvakken
   eronder als losse laag -- daar wordt op losgelaten, ook onder een blok door. */
/* Alleen ruimte tússen de banen, niet tussen de dagen: een `column-gap` schuift
   elk blok een paar pixels naar rechts ten opzichte van de dagkop erboven, en
   dat loopt over een week op tot een halve kolom. De scheidingslijnen komen van
   `.pb-dagvak` in de achtergrondlaag en die heeft geen gap nodig. */
.pb-vak{position:relative;flex:1;display:grid;row-gap:2px;column-gap:0;
  padding:2px 0;align-content:start}
.pb-achtergrond{position:absolute;inset:0;display:grid;z-index:0}
.pb-dagvak{border-left:1px solid var(--border)}
.pb-dagvak.weekend{background:var(--bg)}
.pb-dagvak.vandaag{background:var(--accent-soft)}
.pb-dagvak.erover{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-3px}
.pb-dagkop.weekend{background:var(--bg)}
.pb-dagkop.vandaag{box-shadow:inset 0 2px 0 var(--accent)}

.pb-blok{position:relative;z-index:1;border-radius:4px;padding:3px 6px;overflow:hidden;
  font-size:11.5px;line-height:1.3;cursor:grab;min-width:0;
  background:linear-gradient(to right,
    var(--strook-links) 0, var(--strook-links) 25%,
    var(--strook-rechts) 25%, var(--strook-rechts) 100%)}
.pb-blok:hover{outline:2px solid var(--navy);outline-offset:-2px}
.pb-blok.sleept{opacity:.4}
.pb-bloktekst{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical}
.pb-blok strong{font-weight:700}
/* De maand past op het scherm: eenentwintig kolommen naast elkaar. Dat kan
   alleen met kleine letters en weinig lucht -- OutSmart doet het net zo. De
   medewerkerkolom krimpt mee; de naam blijft leesbaar omdat hij afbreekt. */
.planbord.maand{overflow-x:hidden;overflow-y:auto}
.planbord.maand .pb-kop,.planbord.maand .pb-rij{width:auto;min-width:0}
.planbord.maand .pb-naam{width:104px;min-width:104px;padding:.35rem .4rem;font-size:11.5px;
  line-height:1.25;overflow-wrap:anywhere}
.planbord.maand .pb-dagkop{font-size:9.5px;padding:.3rem .1rem}
.planbord.maand .pb-dagkop .nr{font-size:10px}
.planbord.maand .pb-week{font-size:8.5px}
.planbord.maand .pb-blok{font-size:9.5px;padding:1px 3px;line-height:1.2;border-radius:3px}
.planbord.maand .pb-bloktekst{-webkit-line-clamp:4}
.planbord.maand .plangreep{width:6px}
.pb-voorbeeld{display:grid;gap:3px;max-width:320px}

/* De filters linksboven op het planbord, in dezelfde maat als de kleurlabels
   eronder: het is bijschrift bij het bord, geen formulier. */
/* Het uitklapbare filterblok boven een lijst. Ingeklapt tot je het opent, of
   tot er iets aanstaat: een filter dat je niet ziet is een lijst waarvan je
   denkt dat hij leeg is. */
.meerfilters{margin-bottom:1rem;padding:1rem 1.25rem}
.meerfilters .veld{margin-bottom:.6rem}

.pb-filters{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;margin:0 0 .5rem;
  font-size:11.5px;color:var(--text-muted)}
.pb-filters label{display:inline-flex;align-items:center;gap:.3rem}
.pb-filters select{font:inherit;font-size:11.5px;color:var(--navy);background:var(--surface);
  border:1px solid var(--border);border-radius:6px;padding:2px 4px;max-width:190px}
.pb-filters input[type=search]{font:inherit;font-size:11.5px;color:var(--navy);
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:2px 6px}
.pb-filters input[type=search]:focus{outline:none;border-color:var(--accent)}
.pb-wis{font:inherit;font-size:11.5px;color:var(--accent);background:none;border:none;
  cursor:pointer;text-decoration:underline;padding:0}

/* Een formulier op de werkbon: de vragen onder elkaar, met een lijntje eromheen
   zodat twee formulieren op één bon niet in elkaar overlopen. */
.formulier{border:1px solid var(--border);border-radius:10px;padding:.9rem;margin-bottom:.8rem}
.formulier-vraag{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.4rem 0;border-bottom:1px solid var(--border);font-size:13px}
.formulier-vraag:last-child{border-bottom:none}
.janee{display:flex;gap:.9rem;flex-shrink:0}
.janee .vink{margin:0}

/* De draaiende versie, naast de titel van het planbord. Klein en grijs: het is
   een geruststelling, geen mededeling. */
.versie{font-size:11px;font-weight:400;color:var(--text-soft);margin-left:.5rem;
  font-family:'IBM Plex Mono',monospace}

.legenda{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center;margin:0 0 .9rem;
  font-size:11.5px;color:var(--text-muted)}
.legenda-kop{font-weight:600;color:var(--navy);margin-left:.4rem}
.legenda-kop:first-child{margin-left:0}
.legenda-item{display:inline-flex;align-items:center;gap:.3rem}
.legenda-item i{width:11px;height:11px;border-radius:3px;display:inline-block;
  border:1px solid rgba(0,0,0,.12)}

/* De kleurkiezers in Beheer. */
.kleurrij{display:grid;grid-template-columns:1fr 44px 70px;gap:.5rem;align-items:center;
  padding:.25rem 0;font-size:13px}
/* De werksoorten hebben één knop meer dan de vaste lijsten: die mogen weg. */
.kleurrij.metweg{grid-template-columns:1fr 44px 70px 58px}
.kleurrij.terug{grid-template-columns:1fr 104px}
.kleurrij .knop{padding:6px 8px;font-size:12px}
.kleurrij input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--border);
  border-radius:6px;background:var(--surface);cursor:pointer}

/* De grepen aan de randen: verlengen en inkorten. Smal en onopvallend tot je
   erover gaat -- een bord vol handvatten leest niet meer. */
.plangreep{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:2}
.plangreep.links{left:0}
.plangreep.rechts{right:0}
.pb-blok:hover .plangreep{background:rgba(255,255,255,.55)}

.bonkaart{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:10px;padding:1rem;margin-bottom:.75rem;box-shadow:var(--shadow-sm)}
.bonkaart h3{font-size:15px;color:var(--navy);margin-bottom:2px}
.bonkaart .plaats{font-size:13px;color:var(--text-muted);margin-bottom:.5rem}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-top:.5rem}
.fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
/* een privéfoto gaat niet mee naar de klant; dat moet je aan het beeld zien */
.fotos img.prive{border:2px solid var(--orange)}
/* Een foto met een bijschrift eronder: privé aan- of uitzetten en weggooien.
   Daar past geen tegel van 90 px onder, dus het raster wordt breder zodra er
   kaarten in staan. */
/* De kolomkeuze van een rapportage: twintig tot dertig vinkjes. Onder elkaar is
   dat een kolom van een halve meter; in een raster past het op één scherm. */
.kolomkeuze{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.15rem .8rem;margin:.4rem 0 .2rem}
.kolomkeuze .vink{margin:0;font-size:12.5px}

.fotos:has(.fotokaart){grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.fotos figure.fotokaart{margin:0}
.fotokaart figcaption{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-top:.15rem;
  font-size:11px;color:var(--text-muted)}
.fotokaart .vink{font-size:11px;margin:0}
.fotokaart .knop-weg{font-size:15px}
/* Het blok werkzaamheden in de medewerker-app: lang, en niet bij elke tank nodig. */
/* Een groep op de werklijst: de kop blijft staan, de bonnen klappen weg. Het
   pijltje zit vóór de tekst zodat op een telefoon de hele regel raakvlak is. */
details.groep>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
  margin:-.25rem 0;padding:.25rem 0;-webkit-tap-highlight-color:transparent}
details.groep>summary::-webkit-details-marker{display:none}
details.groep>summary::before{content:"\25B8";color:var(--navy);font-size:15px;line-height:1;
  width:.9rem;text-align:center;transition:transform .12s ease}
details.groep[open]>summary::before{transform:rotate(90deg)}
details.groep>summary:hover{color:var(--accent)}
details.groep>summary:hover::before{color:var(--accent)}
details.groep .groepinhoud{margin-top:.55rem}
/* Een dag zonder vrijgegeven werk: één regel, geen blok. */
.card.dagleeg{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:.75rem 1.25rem}
.card.dagleeg .card-title,.card.dagleeg .card-sub{margin:0}
.card.dagleeg .card-title{color:var(--text-soft);font-weight:500}

details.werkzaamheden{border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;
  margin:.6rem 0;background:var(--bg)}
details.werkzaamheden summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--navy);
  list-style:none;padding:.2rem 0}
details.werkzaamheden summary::-webkit-details-marker{display:none}
details.werkzaamheden summary::before{content:"▸ ";color:var(--text-muted)}
details.werkzaamheden[open] summary::before{content:"▾ "}
details.werkzaamheden[open]{background:var(--surface)}

canvas.handtekening{width:100%;height:170px;border:1.5px dashed var(--border);border-radius:8px;
  background:var(--surface);touch-action:none}

@media (max-width:700px){
  .page{padding:1rem .75rem 4rem}
  .rij2,.rij3,.rij4{grid-template-columns:1fr}
  .telling{margin-left:0;width:100%}
  th.weg,td.weg{display:none}
}

/* De beoordeling van het onderhoud: de foto's waar hij naar kijkt op een rij,
   en het oordeel als woord ernaast. Geen kleurcodes die om aandacht schreeuwen
   -- dit is een voorstel dat de medewerker nog naleest. */
.fotostrip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.fotostrip img { height: 84px; width: auto; border-radius: 6px; display: block; }
.oordeel {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-transform: capitalize;
  margin-bottom: .35rem; background: #edf2f7; color: #2d3748;
}
.oordeel.goed     { background: #e6ffed; color: #22543d; }
.oordeel.redelijk { background: #fffaf0; color: #7b341e; }
.oordeel.aandacht { background: #fff5f5; color: #9b2c2c; }

/* De beoordeling zoals kantoor hem ziet: bij de foto's waar hij over gaat. */
.beoordeling {
  background: var(--card-alt, #f7fafc); border-left: 3px solid #2b6cb0;
  padding: .5rem .7rem; margin: 0 0 .5rem; border-radius: 0 6px 6px 0;
  font-size: 13px; line-height: 1.5;
}

/* Het kopje boven een groep foto's op de bon: vooraf, achteraf, overig. */
.fotogroep {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-muted); margin: .6rem 0 .3rem;
}