/* BeTec Regie — kantooromgeving.
   Kleuren komen uit flutter_app/lib/theme/betec_theme.dart, zodat Regie en de
   veldapp dezelfde huisstijl delen. */

:root {
  --ground: #191919; --surface: #242424; --surface-high: #2e2e2e; --rail: #141414;
  --line: #363636; --line-soft: #2b2b2b;
  --ink: #ffffff; --ink-soft: #c0c0c0; --ink-muted: #868383;
  --accent: #00bbde; --accent-dim: rgba(0, 187, 222, .13);
  --good: #3fbf7f; --good-dim: rgba(63, 191, 127, .13);
  --warn: #e8a33d; --warn-dim: rgba(232, 163, 61, .13);
  --bad: #dc042b; --bad-dim: rgba(220, 4, 43, .14);
  /* ACCENT ALS TEKST IS IETS ANDERS DAN ACCENT ALS VLAK. In dit donkere thema
     zijn ze gelijk, maar op een lichte achtergrond heeft #00bbde een contrast
     van ongeveer 2,2 op 1 — onleesbaar. Er staat 34 keer accentkleurige tekst
     in dit bestand en maar 2 keer een accentvlak; die twee moeten dus los van
     elkaar kunnen wisselen. */
  --accent-tekst: #00bbde;
  /* Tekst OP een accentvlak. */
  --op-accent: #06232b;
  /* De navigatiebalk heeft eigen grijstinten; die staan los van --ink-muted
     omdat de balk in een licht thema een andere ondergrond krijgt. */
  --rail-ink: #7a7a7a; --rail-ink-dim: #5c5c5c;
  /* De menu-items zelf, en wat er onder de muis gebeurt. */
  --nav-ink: #9a9a9a; --nav-hover: rgba(255, 255, 255, .03);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---------- licht thema ---------- */
/*
   ALLEEN DE VARIABELEN WORDEN OPNIEUW GEZET, geen enkele regel eronder. Dat kan
   omdat de rest van dit bestand 329 keer een variabele gebruikt en bijna nergens
   een vaste kleur. Wordt dat ooit doorbroken, dan valt hier een kleur uit de
   toon en niet in het donkere thema — vandaar dat de vaste kleuren hierboven
   eerst variabelen zijn geworden.

   Het merkcyaan blijft --accent, want dat is het vlak op een knop en dat hoort
   BeTec te blijven. --accent-tekst is donkerder, anders is accentkleurige tekst
   op wit niet te lezen.
*/
:root[data-thema="licht"] {
  --ground: #f2f5f8; --surface: #ffffff; --surface-high: #e9eef3; --rail: #ffffff;
  --line: #d5dde5; --line-soft: #e6ebf0;
  --ink: #12263f; --ink-soft: #3d5266; --ink-muted: #6b7c8f;
  --accent: #00bbde; --accent-tekst: #067b93; --accent-dim: rgba(0, 147, 176, .10);
  --op-accent: #06232b;
  --good: #1c7a4a; --good-dim: rgba(28, 122, 74, .10);
  --warn: #9a5f12; --warn-dim: rgba(154, 95, 18, .12);
  --bad: #b3122b; --bad-dim: rgba(179, 18, 43, .10);
  --rail-ink: #5b6b7f; --rail-ink-dim: #8a99a8;
  --nav-ink: #46586b; --nav-hover: rgba(18, 38, 63, .05);
}

/* De schaduwen zijn zwart met lage dekking; op een lichte ondergrond is dat te
   hard. Alleen dáár lichter, want in het donkere thema kloppen ze. */
:root[data-thema="licht"] .panel,
:root[data-thema="licht"] .onderhoud {
  box-shadow: 0 2px 10px rgba(18, 38, 63, .12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink-soft);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* LINKS. Er stond hier niets, en dan pakt de browser zijn eigen donkerblauw —
   op deze achtergrond vrijwel onleesbaar. Dat gold voor élke link in Regie, niet
   alleen die bij een werkbon. Onderstreping pas bij aanwijzen: in een scherm vol
   gegevens is een streep onder elke verwijzing onrustig, maar zonder enige
   aanwijzing weet je niet dat er iets achter zit — vandaar de kleur als vaste
   markering en de streep als bevestiging. */
a { color: var(--accent-tekst); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
a:visited { color: var(--accent-tekst); }

/* ---------- inloggen ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.loginbox {
  width: min(360px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: 30px 28px;
}
.loginbox .mark { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.loginbox .mark em { font-style: normal; color: var(--accent-tekst); }
.loginbox .sub {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); margin: 3px 0 24px;
}

/* ---------- app-raamwerk ---------- */
.app { display: grid; grid-template-columns: 196px 1fr; min-height: 100%; }
.rail { background: var(--rail); border-right: 1px solid var(--line); padding: 18px 0; }
.brand { padding: 0 18px 22px; }
.brand .mark { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.brand .mark em { font-style: normal; color: var(--accent-tekst); }
.brand .sub {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rail-ink); margin-top: 3px;
}
.nav { display: flex; flex-direction: column; }
.nav button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 18px; color: var(--nav-ink); background: none; border: 0;
  border-left: 2px solid transparent; font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer;
}
.nav button:hover:not(:disabled) { color: var(--ink); background: var(--nav-hover); }
.nav button.on { color: var(--ink); border-left-color: var(--accent-tekst); background: rgba(0, 187, 222, .08); }
.nav button:disabled { color: var(--rail-ink-dim); cursor: default; }
.nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav .cnt { font-family: var(--mono); font-size: 10.5px; color: var(--rail-ink-dim); font-variant-numeric: tabular-nums; }
.nav button.on .cnt { color: var(--accent-tekst); }
.nav .sep {
  margin: 14px 18px 8px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rail-ink-dim);
}
.railfoot {
  margin-top: auto; padding: 16px 18px 0; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rail-ink-dim);
}
.railfoot button {
  background: none; border: 0; color: var(--rail-ink); font: inherit; cursor: pointer;
  padding: 6px 0 0; letter-spacing: .1em;
}
.railfoot button:hover { color: var(--accent-tekst); }
.offline { color: var(--warn); margin-top: 6px; letter-spacing: .1em; }
.colofon {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #2a2a2a;
  color: var(--rail-ink-dim); text-transform: none; letter-spacing: .04em;
}

.main { display: flex; flex-direction: column; min-width: 0; }
.screen { display: none; flex-direction: column; flex: 1; min-width: 0; }
.screen.on { display: flex; }

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.ttl { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.ttl small {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 400; margin-top: 2px;
}
.spacer { margin-left: auto; }

.body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }

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

/* OOK `label.btn`, en dat is geen bijzaak.
   Elke regel hier stond op `button.btn`. Een bestandskiezer is echter een
   <label> bij een verborgen <input type="file"> — dat is de enige manier om
   die er zelf uit te laten zien zoals je wilt. Zo'n label kreeg dus NIETS van
   deze opmaak mee en verscheen als kale grijze tekst tussen de kopregel: geen
   rand, geen achtergrond, geen handje.
   Dat gold ook voor 'Foto toevoegen' op de werkopname; daar stond het er al
   die tijd zo bij zonder dat het opviel, omdat de tekst zelf klopte. */
button.btn, label.btn {
  background: var(--accent); border: 1px solid var(--accent); color: var(--op-accent);
  border-radius: 3px; padding: 8px 14px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600;
  /* Een label is van zichzelf inline: zonder dit werkt de verticale padding
     niet en lijnt hij niet uit met een knop ernaast. */
  display: inline-block; line-height: normal; white-space: nowrap;
}
button.btn:hover, label.btn:hover { filter: brightness(1.08); }
button.btn:disabled { opacity: .5; cursor: default; filter: none; }
button.btn.ghost, label.btn.ghost {
  background: var(--surface-high); border-color: var(--line); color: var(--ink-soft);
  font-weight: 500;
}
button.btn.ghost:hover, label.btn.ghost:hover { color: var(--ink); border-color: var(--accent-tekst); }
button.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
button.btn.small, label.btn.small { padding: 4px 9px; font-size: 12px; }
button.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* Een <label> krijgt geen toetsenbordfocus. De verborgen input erachter wél,
   en die is onzichtbaar — dus de rand hoort om het label te verschijnen,
   anders zie je bij tabben niet waar je bent. */
input[type="file"]:focus-visible + label.btn,
label.btn:has(> input[type="file"]:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

label.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
label.f > span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}
input, select, textarea {
  background: var(--ground); border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 8px 10px; font: inherit; font-size: 13.5px; width: 100%;
}
/* EEN VINKJE IS GEEN INVOERVELD. De regel hierboven geeft élke input een breedte
   van 100% en de omlijsting van een tekstvak; op een selectievakje levert dat een
   vakje op zo breed als de hele regel, dat de tekst ernaast wegduwt.

   Dat werd tot nu toe per geval opgelost met style="width:auto" in de opmaak —
   vijf keer dezelfde pleister, en bij de zesde was hij vergeten. Zo gemeld op 29
   en 30 augustus 2026 bij het vinkje 'met voorrang': de tekst stond in een
   kolom van nul pixels tegen de rechterrand.

   appearance: auto zodat het vakje zijn eigen tekening houdt. */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; background: none; border: 0;
  appearance: auto; -webkit-appearance: auto; accent-color: var(--accent);
}
/* OP EEN TELEFOON MINSTENS 16px IN EEN INVOERVELD.
   Onder die grens zoomt Safari — en Chrome op iOS, dat dezelfde motor
   gebruikt — automatisch in zodra je een veld aanraakt. De bladspiegel
   springt dan, het vastgezette paneel schuift mee en het veld verdwijnt achter
   het toetsenbord. Voor de gebruiker leest dat als 'ik kan niet typen' of 'het
   toetsenbord komt niet op'.

   Alleen op smalle schermen: op een computer is 13,5px precies goed en zou
   16px de formulieren onnodig log maken. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
}

input:disabled { color: var(--ink-muted); }
textarea { resize: vertical; min-height: 66px; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.veldkop {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px;
}
/* Meer medewerkers op één klus. Een lijst met vinkjes en geen multiselect: die
   laatste vraagt om ctrl-klikken en verliest je keuze bij een misklik. */
.vinklijst { display: flex; flex-wrap: wrap; gap: 6px; }
.vinklijst label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 13px; cursor: pointer;
}
.vinklijst label:hover { border-color: var(--accent-tekst); }
.vinklijst input { accent-color: var(--accent-tekst); }
.vinklijst input:checked + span { color: var(--accent-tekst); }
.vinklijst .leeg { color: var(--ink-muted); font-size: 13px; }

.weekrooster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.weekrooster label { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.weekrooster span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.weekrooster input { text-align: center; padding: 7px 2px; }
.weekrooster label.vrij span { opacity: .45; }
.weekrooster label.vrij input { color: var(--ink-muted); }

/* ---------- kaarten en tabellen ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px;
}
.card > h2 {
  margin: 0 0 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.card > h2 em { font-style: normal; color: var(--ink-muted); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 11.5px; }

.tablewrap { overflow-x: auto; }
/* In een zijpaneel niet laten krimpen.
 *
 * .panel is een flex-kolom, en een vak met overflow mag daarin tot niets
 * krimpen: de automatische minimumhoogte van een scrollvak is nul. Het gevolg
 * was dat de adressen bij een klant werden afgeknipt tot een streepje — de
 * gegevens stonden er, de rijen stonden in de tabel, maar je zag ze niet en het
 * leek alsof het adres niet was opgeslagen. Contactpersonen en documenten
 * vielen niet op omdat die nog leeg waren; er viel niets af te knippen.
 *
 * Het paneel zelf scrollt al (overflow-y: auto), dus de tabel hoeft dat niet. */
.panel .tablewrap { flex-shrink: 0; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; }
thead th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); text-align: left; font-weight: 600;
  padding: 0 12px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--surface-high); }
/* Gedempte tekst in een tabel: een tijdstip, een adres, een toelichting. Deze
   klasse werd al op tientallen plekken gebruikt maar was nooit gedefinieerd, dus
   die cellen stonden even fel als de inhoud waar het om gaat. */
.dim { color: var(--ink-muted); }

td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; padding-right: 18px; }
td.name { color: var(--ink); font-weight: 600; }
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--ink); cursor: pointer; text-align: left;
}
.linkbtn:hover { color: var(--accent-tekst); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
td.acts { text-align: right; white-space: nowrap; }
td.acts button { margin-left: 6px; }

/* Icoonknop voor bewerken en verwijderen in de zijpanelen. Twee tekstknoppen
   namen daar zoveel breedte dat een adres over twee regels brak. */
.iconbtn {
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--ink-muted); cursor: pointer; padding: 4px; line-height: 0;
  margin-left: 2px;
}
.iconbtn svg {
  width: 15px; height: 15px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.iconbtn:hover { color: var(--ink); border-color: var(--line); background: var(--surface-high); }
/* Verwijderen kleurt pas rood als je er bent: rood in rust maakt van elke regel
   een waarschuwing. */
.iconbtn.gevaar:hover { color: var(--bad); border-color: var(--bad); background: transparent; }
.iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.p-aangevraagd { background: var(--warn-dim); color: var(--warn); }
.p-goedgekeurd { background: var(--good-dim); color: var(--good); }
.p-afgewezen { background: var(--bad-dim); color: var(--bad); }
.p-verlof { background: var(--accent-dim); color: var(--accent-tekst); }
.p-atv { background: var(--warn-dim); color: var(--warn); }
.p-ziek { background: var(--bad-dim); color: var(--bad); }
/* Bijzonder verlof: groen, want het gaat NERGENS vanaf. Zou het dezelfde kleur
   krijgen als verlof, dan lees je het als iets wat saldo kost. */
.p-bijzonder { background: var(--good-dim); color: var(--good); }
.p-manager { background: var(--accent-dim); color: var(--accent-tekst); }
.p-worker { background: var(--surface-high); color: var(--ink-muted); }
.p-uit { background: var(--bad-dim); color: var(--bad); }
/* Afboekingen van overuren: allebei halen ze uren van het saldo af. */
.p-opgenomen { background: var(--accent-dim); color: var(--accent-tekst); }
/* Abonnementen. */
/* Vastgelegd maar loopt nog niet - opvallend, want er hoort actie op. */
.p-te_activeren { background: var(--warn-dim); color: var(--warn); }
.p-actief { background: var(--good-dim); color: var(--good); }
.p-opgezegd { background: var(--surface-high); color: var(--ink-muted); }
.p-uitbetaald { background: var(--good-dim); color: var(--good); }

/* Onderaan dezelfde ruimte als de kop erboven laat (.card > h2 heeft 14px),
   zodat de tabel er niet tegenaan plakt. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  background: var(--surface-high); border: 1px solid var(--line); color: var(--ink-muted);
  border-radius: 3px; padding: 5px 10px; cursor: pointer; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--accent-dim); border-color: var(--accent-tekst); color: var(--accent-tekst); }

/* ---------- startpagina ---------- */
.alertbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--warn-dim); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: 4px; padding: 14px 18px;
}
.alertbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alertbody strong { color: var(--ink); font-size: 14.5px; font-weight: 650; }
.alertbody span { color: var(--ink-muted); font-size: 12.5px; }
.alertbar .btn { margin-left: auto; }

/* Cijferstrook binnen een kaart. Dezelfde gegevens als losse tellers, maar als
   één blok: een onderwerp hoort niet over vier zwevende vakken verdeeld te
   staan. De scheiding is een haarlijn in plaats van vier randen, en het cijfer
   staat naast zijn label en niet erboven — dat scheelt de helft aan hoogte. */
.statstrip { display: flex; flex-wrap: wrap; row-gap: 14px; margin-bottom: 4px; }
.statstrip .stat {
  display: flex; align-items: baseline; gap: 9px;
  padding: 0 22px; border-right: 1px solid var(--line);
}
.statstrip .stat:first-child { padding-left: 0; }
.statstrip .stat:last-child { border-right: 0; padding-right: 0; }
.statstrip b {
  font-family: var(--mono); font-size: 23px; font-weight: 600; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.statstrip b.attention { color: var(--warn); }
.statstrip .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft);
}
.statstrip .s { font-size: 12px; color: var(--ink-muted); }

/* Tussenkop in een kaart: scheidt twee delen van hetzelfde onderwerp zonder er
   een tweede kaart van te maken. */
.subhead {
  margin: 18px 0 12px; padding-top: 15px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.subhead em {
  font-style: normal; color: var(--ink-muted); text-transform: none;
  letter-spacing: 0; font-family: var(--sans); font-size: 11.5px;
}
/* Een teller die in de kop is opgegaan mag daar nog steeds de aandacht
   trekken, net als toen hij nog een los cijfer was. */
.card > h2 em.attention, .subhead em.attention { color: var(--warn); }

.empty { color: var(--ink-muted); font-size: 13px; padding: 12px 0; }
.msg { border-radius: 3px; padding: 10px 12px; font-size: 13px; }
.msg.err { background: var(--bad-dim); border-left: 2px solid var(--bad); color: var(--ink-soft); }
.msg.ok { background: var(--good-dim); border-left: 2px solid var(--good); color: var(--ink-soft); }

/* ---------- zijpaneel ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.scrim.on { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); background: var(--surface);
  border-left: 1px solid var(--line); padding: 22px 24px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .2s ease;
  display: flex; flex-direction: column; gap: 16px;
}
/* Schaduw alleen als het paneel openstaat. Een dicht paneel staat rechts buiten
   beeld, maar zijn schaduw valt naar links en dus wel op het scherm - dat gaf
   een donkere gloed langs de rechterrand terwijl er niets openstond. */
.panel.on { transform: translateX(0); box-shadow: -18px 0 40px rgba(0, 0, 0, .3); }
.panel.wide { width: min(720px, 100%); }
.histnav { display: flex; align-items: center; gap: 10px; }
.viewsec { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.viewsec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.viewsec h4 {
  margin: 0 0 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
}
.viewsec dl { display: grid; grid-template-columns: 150px 1fr; gap: 7px 16px; margin: 0; font-size: 13.5px; }
.viewsec dt { color: var(--ink-muted); }
.viewsec dd { margin: 0; color: var(--ink); }
.viewsec dd.leeg { color: var(--ink-muted); }

/* Medewerker zonder overuren: blijft in het overzicht staan, maar vraagt geen
   aandacht, zodat wie wél uren heeft er meteen uitspringt. */
tbody tr.leeg td { color: var(--ink-muted); }
.histnav #histYear {
  font-family: var(--mono); font-size: 17px; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center;
}
.histsum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px;
}
.histsum div { display: flex; flex-direction: column; gap: 1px; }
.histsum .k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.histsum .v {
  font-family: var(--mono); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .panel, .scrim { transition: none; } }
.panel h3 { margin: 0; font-size: 19px; color: var(--ink); letter-spacing: -.01em; }
.panel .close {
  position: absolute; top: 16px; right: 18px; background: none; border: 0;
  color: var(--ink-muted); font-size: 22px; cursor: pointer; line-height: 1;
}
.panel .close:hover { color: var(--ink); }
.panel .row { display: flex; gap: 10px; flex-wrap: wrap; }
.panel fieldset {
  border: 0; border-top: 1px solid var(--line); margin: 0; padding: 14px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.panel legend {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); padding: 0;
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav .sep, .railfoot { display: none; }
}

/* Scheidt de statuskeuze (een uit drie) van losse aan/uit-filters. */
.chipsplit { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }

/* ---------- weekraster planning (in aanbouw, fase 4) ---------- */
/*
 * Medewerkers op de ene as, dagen op de andere. Bewust een grid en geen tabel:
 * een cel moet straks een sleepdoel worden, en dat gaat in een tabel slecht.
 *
 * De naamkolom staat vast; de zeven dagen delen de rest. Op een smal scherm
 * scrollt het geheel horizontaal binnen zijn tablewrap in plaats van de dagen
 * onleesbaar smal te maken — plannen doe je toch op een breed scherm.
 */
.planrooster {
  display: grid;
  grid-template-columns: 150px repeat(7, minmax(118px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  min-width: 900px;
}
.planrooster > div { background: var(--surface); padding: 8px 10px; }

.plankop {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
}
.plankop b { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0; }
/* Vandaag moet je zonder zoeken kunnen vinden. */
.plankop.vandaag { background: var(--surface-high); }
.plankop.vandaag b { color: var(--accent-tekst); }

.plannaam { font-weight: 600; color: var(--ink); font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.plannaam span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--ink-muted); font-weight: 400; }

.plancel { min-height: 58px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.plancel:hover { background: var(--surface-high); }
/* Een dag waarop niet gewerkt wordt hoort er anders uit te zien dan een lege
   dag waarop wél gewerkt kan worden: dat verschil bepaalt of je erin plant. */
.plancel.vrij { background: repeating-linear-gradient(45deg,
    var(--surface), var(--surface) 6px, var(--surface-high) 6px, var(--surface-high) 12px); }
.plancel.geblokkeerd { cursor: default; }

.planblok {
  border-radius: 3px; padding: 4px 7px; font-size: 12px; line-height: 1.3;
  border-left: 3px solid var(--accent); background: var(--surface-high); color: var(--ink);
}
.planblok em { font-style: normal; display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .06em; color: var(--ink-muted); }
/* Voorlopig staat doorzichtig: je ziet in één oogopslag wat nog niet vaststaat. */
.planblok.voorlopig { opacity: .62; border-left-style: dashed; }
.planblok.afwezig { border-left-color: var(--warn); cursor: default; }
/* Een gereserveerd tijdvak ('Niet plannen'). Rood tegenover het geel van
   afwezigheid, en dat onderscheid is inhoudelijk: geel betekent dat iemand er
   niet is, rood dat hij er wél is en er tóch niets in mag. */
.planblok.blokkade { border-left-color: var(--bad); background: var(--bad-dim); }
.planblok.feest { border-left-color: var(--ink-muted); cursor: default; }

/* AFGEROND DOOR DE MEDEWERKER. Gedempt en met een groene rand: het staat er nog,
   maar het vraagt geen aandacht meer. Wat wél moet gebeuren springt daardoor
   vanzelf naar voren — en dat is waar je naar kijkt als je de planning opent.

   Niet zwart zoals gevraagd, en dat is een afweging: dit thema is al donker,
   dus een zwart blok VALT WEG tegen de achtergrond in plaats van dat het rustig
   wordt. Wat gevraagd werd is 'zie meteen dat het af is'; dat doet dit beter.
   Anders alsnog zwart maken is één regel. */
.planblok.bonaf {
  border-left-color: var(--good);
  background: var(--ground);
  color: var(--ink-muted);
}
.planblok.bonaf em { color: var(--ink-muted); opacity: .8; }
/* Het vinkje houdt zijn kleur: dat is het teken waar je op zoekt. */
.planblok.bonaf .af { color: var(--good); font-weight: 700; }
/* Doorhalen zou te ver gaan — het werk is gedaan, niet vervallen. */

/* Kijken of bewerken. Klikken op een klantnaam is kijken; bewerken zit achter
   een knop. Zo verandert er niets doordat je even wilde opzoeken waar iemand
   woont. De schakelaar is één klasse op het paneel, want anders moet elke knop
   apart worden aan- en uitgezet en wordt er een keer een vergeten. */
.panel.lezen [data-bewerk] { display: none; }
.panel:not(.lezen) [data-lezen] { display: none; }
/* Rijknoppen (bewerken, verwijderen, soort instellen) horen ook bij bewerken. */
.panel.lezen td.acts { display: none; }
.panel.lezen .soortbtn { pointer-events: none; }
/* Velden in de kijkstand: leesbaar, maar zichtbaar niet in te vullen. */
.panel.lezen input:disabled,
.panel.lezen select:disabled,
.panel.lezen textarea:disabled {
  background: transparent; border-color: transparent; color: var(--ink);
  padding-left: 0; opacity: 1;
}
/* Een leeg notitieveld liet in de kijkstand een leeg vak met een sleepgreep
   achter. Niets om te slepen als je toch niet kunt typen, en een lege notitie
   hoeft geen ruimte te vragen. */
.panel.lezen textarea:disabled { resize: none; min-height: 0; }

/* Slepen in het weekraster. De regel die je vastheeft wordt doorzichtig, de cel
   waar je boven hangt licht op — zonder die twee weet je bij het loslaten niet
   waar het terechtkomt. */
.planblok[draggable="true"] { cursor: grab; }
.planblok.sleept { opacity: .4; cursor: grabbing; }
.plancel.doelwit { background: var(--accent-dim); outline: 1px solid var(--accent); outline-offset: -1px; }


/* Een medewerker die uit dienst is maar nog in de planning staat. Doffer en met
   een streep ernaast: hij mag zichtbaar blijven — het werk dat er staat gaat niet
   vanzelf weg — maar je moet meteen zien dat je hem niet meer kunt inzetten.

   Deze twee regels stonden per ongeluk binnen het Zoë-stijlblok en zijn op
   31 augustus 2026 met dat blok mee verwijderd, terwijl regie.js de klasse nog
   gewoon zet. Gevonden bij de doorlichting van 1 september. */
.plannaam.uitdienst {
  opacity: .72;
  border-left: 2px solid var(--warn);
}
.plannaam.uitdienst span { color: var(--warn); }

/* Staat boven een scherm dat is vrijgegeven maar nog niet af. Opvallend genoeg
   om gelezen te worden, rustig genoeg om er dagelijks naar te kijken — dit
   blijft staan tot het laatste punt eruit kan. */
.inaanbouw {
  background: var(--warn-dim);
  border: 1px solid var(--warn);
  border-radius: 5px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

/* Dezelfde vorm, maar rustig: dit is UITLEG en geen waarschuwing.
   Een scherm dat af is met een oranje kader eromheen leest als 'let op, hier
   klopt iets niet' — en dan wordt het kader dat er wél toe doet (de planning)
   ook niet meer gelezen. */
.inaanbouw.uitleg {
  background: var(--surface);
  border-color: var(--line-soft);
}
.inaanbouw.uitleg > summary { color: var(--ink-soft); }
/* Inklapbaar, en standaard open. De tekst moet gelezen worden, maar hij mag het
   raster niet blijven wegdrukken — juist de indeling is wat er beoordeeld moet
   worden.

   Het moet er ook naar uitzien. Eerst stond er alleen een klein driehoekje voor
   de tekst, en dat las als een opsommingsteken: het werkte wel, maar niemand
   zag dat je erop kon klikken. Nu is de hele regel een balk met een hoverstand
   en het teken rechts, waar je het bij een uitklapper verwacht. */
.inaanbouw > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -14px -16px;
  padding: 11px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: .08em;
  list-style: none;
  transition: background .12s;
}
.inaanbouw > summary::-webkit-details-marker { display: none; }
.inaanbouw > summary:hover { background: rgba(232, 163, 61, .12); }
.inaanbouw > summary:focus-visible { outline: 2px solid var(--warn); outline-offset: -2px; }

/* Rechts, en met woorden erbij: een pijl alleen zegt niet of hij open- of
   dichtgaat. De tekst wisselt mee met de stand. */
.inaanbouw > summary::after {
  content: 'verbergen \25b4';
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-muted);
  white-space: nowrap;
}
.inaanbouw:not([open]) > summary::after { content: 'tonen \25be'; }
.inaanbouw[open] > summary { margin-bottom: 0; }
.inaanbouw[open] > summary + * { margin-top: 16px; }

.inaanbouw p { margin: 0 0 8px; }
.inaanbouw p.kop { font-weight: 600; color: var(--ink); margin-top: 12px; }
.inaanbouw ul { margin: 0; padding-left: 20px; }
.inaanbouw li { margin-bottom: 5px; }
.inaanbouw li strong { color: var(--ink); }

/* ---------- werkopnames en werkbonnen ---------- */
.panel.breed { width: min(880px, 100%); }

.wr-kop { margin-bottom: 18px; }
.wr-regel { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 5px 0; }
.wr-regel > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); padding-top: 3px;
}
.wr-intern { color: var(--warn); font-style: normal; }
/* De stand van de werkbon achter de verwijzing op een opname. Gedempt: de link
   is waar je heen wilt, de stand is er toelichting bij. */
.wr-bonstand { color: var(--ink-muted); }

#wrDetail h4 {
  margin: 20px 0 8px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
#wrDetail h4 em {
  font-style: normal; color: var(--accent-tekst); font-family: var(--mono); font-size: 11px;
}

/* ── Klant kiezen door te typen ──────────────────────────────────────────────
   Een tekstveld met een lijst eronder, in plaats van een <select>. Met 836
   klanten laat een keuzelijst je alleen naar de eerste letter springen.

   `position: relative` op het omhulsel en `absolute` op de lijst: hij hoort mee
   te schuiven als het paneel scrollt. (Bij het planningsraster is dat juist
   andersom — dat scrollt horizontaal, en daar moet het menu `fixed` zijn.) */
.combo { position: relative; }
.combo .combo-zoek { width: 100%; }
.combo-lijst {
  position: absolute;
  z-index: 40;
  left: 0; right: 0; top: calc(100% + 2px);
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.combo-rij {
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.combo-rij:last-child { border-bottom: 0; }
/* Zowel bij zweven als bij het pijltje: anders zie je bij toetsenbordgebruik
   niet waar je bent. */
.combo-rij:hover, .combo-rij.aan { background: var(--accent); color: var(--op-accent); }
.combo-rij:hover .dim, .combo-rij.aan .dim { color: var(--op-accent); opacity: .75; }
.combo-adres {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 1px;
}
/* Bij zweven en met het pijltje moet ook de adresregel meekleuren, anders valt
   hij weg tegen het accent. */
.combo-rij:hover .combo-adres, .combo-rij.aan .combo-adres { color: var(--op-accent); opacity: .8; }
.combo-rij.leeg { color: var(--ink-muted); font-style: italic; }
.combo-meer {
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
}

/* De toevoegknop in een kop. Het is een <label> bij een verborgen
   bestandskiezer, dus hij moet zich als knop gedragen: de kop is klein en in
   hoofdletters, en dat mag niet doorwerken op de knoptekst. `cursor: pointer`
   omdat een label die van zichzelf niet heeft. */
#wrDetail h4 .wr-toevoeg {
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.wr-tabel { width: 100%; border-collapse: collapse; }
.wr-tabel td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.wr-tabel td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* De begin- en eindtijd op een urenregel: smal, niet afbreken, en rustiger dan
   het aantal uren zelf — dat getal is waar het om gaat. */
.wr-tabel td.tijden {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.wr-tabel td.tijden em { font-style: normal; opacity: .75; }

/* ── FOTO'S BIJ EEN WERKBON, ALS LIJST ─────────────────────────────────────
   Was een raster van tegels met vrije hoogte; een staande foto werd dan een
   hoge tegel en de rij oogde rommelig. Nu dezelfde vorm als in de app: een
   vierkante miniatuur met de naam ernaast. */
.wr-fotos { display: flex; flex-direction: column; gap: 6px; }
.wr-foto {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
  padding: 8px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); cursor: pointer;
}
.wr-foto:hover { border-color: var(--accent-tekst); }
.wr-fotoregel { min-width: 0; flex: 1; }
.wr-fotobron { margin-top: 3px; font-size: 11.5px; color: var(--ink-muted); }

/* De miniatuur is bijgesneden en dus vierkant. Dat mag hier omdat er GEEN
   annotatielaag overheen ligt: die rekt zich over het hele blok en zou na
   bijsnijden naast het beeld komen te liggen. In de lichtbak staat hij er wel
   op, en daar bekijk je de foto. */
.wr-foto > .wr-beeld {
  position: relative; flex: none; width: 64px; height: 64px;
  line-height: 0; background: var(--rail); border-radius: 3px; overflow: hidden;
}
.wr-foto > .wr-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Het blok zelf blijft algemeen: de lichtbak hergebruikt dezelfde klasse en
   moet juist wél op ware grootte staan, met de annotatielaag eroverheen. Vandaar
   dat de maat hierboven aan `.wr-foto >` hangt en niet aan `.wr-beeld` alleen —
   anders werd de foto in de lichtbak 64 bij 64 pixels. */
.wr-beeld { position: relative; line-height: 0; }

.wr-anno { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* De stand van een werkbon. Voltooid springt eruit: dat is wat op behandeling
   wacht, en dat is de reden dat je dit scherm openslaat. */
.pill.p-aanmaken  { background: var(--surface-high); color: var(--ink-soft); }
.pill.p-actueel   { background: var(--accent-dim); color: var(--accent-tekst); }
/* Ingepland: er staat een dag voor in het weekraster, maar er is nog niemand
   begonnen. Zachter dan 'onderweg', want er is nog niets in beweging. */
.pill.p-ingepland { background: var(--surface-high); color: var(--ink-soft); }
.pill.p-uitgevoerd{ background: var(--warn-dim); color: var(--warn); }
.pill.p-gereed    { background: var(--good-dim); color: var(--good); }

/* ---------- foto groot bekijken ---------- */
/* Boven de panelen: je opent hem vanuit een geopende werkopname, dus hij moet
   daaroverheen liggen. */
.lichtbak {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .88);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 72px;
}
.licht-inhoud { margin: 0; max-width: 100%; max-height: 100%; display: flex;
  flex-direction: column; align-items: center; gap: 12px; }
/* De foto bepaalt de maat; de annotatielaag ligt er met inset:0 overheen, dus
   dit blok moet precies zo groot zijn als het beeld en niet groter. */
.licht-inhoud .wr-beeld { max-width: 100%; max-height: calc(100vh - 130px); display: inline-block; }
.licht-inhoud .wr-beeld img { max-width: 100%; max-height: calc(100vh - 130px); width: auto; }
.licht-inhoud figcaption {
  color: var(--ink-soft); font-size: 14px; text-align: center; max-width: 70ch;
}
.lichtbak button {
  position: absolute; background: none; border: 0; color: var(--ink-soft);
  cursor: pointer; line-height: 1; padding: 10px 16px;
}
/* De lichtbak toont een foto op zwart — daar is wit altijd goed,
   ongeacht het thema. */
.lichtbak button:hover { color: #fff; }
.licht-sluit { top: 14px; right: 18px; font-size: 30px; }
.licht-vorige, .licht-volgende { top: 50%; transform: translateY(-50%); font-size: 44px; }
.licht-vorige { left: 8px; }
.licht-volgende { right: 8px; }
.lichtbak button[hidden] { display: none; }
.wr-foto .wr-beeld { cursor: zoom-in; }

/* Scheiding tussen twee groepen chips die over verschillende dingen gaan. */
.chipsep {
  width: 1px; align-self: stretch; margin: 2px 6px;
  background: var(--line);
}

/* ---------- planning: zijpaneel met werkbonnen ---------- */
/* Het raster is het werkvlak, de lijst een voorraadkast ernaast. Vandaar geen
   gelijke kolommen maar een smalle rechterkant die niet meegroeit. */
.planlayout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .planlayout { grid-template-columns: minmax(0, 1fr); } }

.planzij { max-height: calc(100vh - 210px); overflow-y: auto; }
#planZijLijst { display: flex; flex-direction: column; gap: 8px; }

.planbon {
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 4px; padding: 9px 11px; background: var(--surface-high);
  cursor: grab; display: flex; flex-direction: column; gap: 3px;
}
.planbon:active { cursor: grabbing; }
.planbon.sleept { opacity: .45; }
.planbon strong { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
.planbon span { font-size: 12px; color: var(--ink-muted); }
.planbon .staat {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase;
}
/* Al eens ingepland: blijft staan, want werk kan over meer dagen lopen — maar
   het moet wel te zien zijn, anders plan je hem per ongeluk dubbel. */
.planbon.staat-ingepland { border-left-color: var(--good); }
.planbon.staat-ingepland .staat { color: var(--good); }
.planbon .staat { color: var(--accent-tekst); }

/* Een ingeplande regel die aan een werkbon hangt.
   De selector stond hier op .planitem, en die klasse bestaat nergens — de code
   zet 'uitbon' op een .planblok. Er was dus in het raster niets te zien, terwijl
   het commentaar bij de code beweerde van wel. */
.planblok.uitbon { border-left-color: var(--good); }

/* Knopje om die werkbon te openen. Zit ín het blok, rechtsboven, en verschijnt
   pas bij aanwijzen: het raster is druk genoeg en dit is geen dagelijkse
   handeling. Bij toetsenbordfocus staat hij er wél, anders is hij met de tab-
   toets onbereikbaar. */
.planblok .naarbon {
  position: absolute; top: 2px; right: 3px;
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  color: var(--good); font-size: 11px; line-height: 1; opacity: 0;
}
.planblok { position: relative; }
.planblok:hover .naarbon, .planblok .naarbon:focus-visible { opacity: 1; }
.planblok .naarbon:hover { color: var(--ink); }

/* Invulvelden in het werkbonpaneel: even breed als de leesregels ernaast. */
.wr-regel textarea {
  width: 100%; min-height: 62px; resize: vertical;
  background: var(--ground); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); font: inherit; padding: 8px 10px;
}
.wr-regel textarea:focus { outline: none; border-color: var(--accent-tekst); }
.wr-hint { display: block; margin-top: 4px; color: var(--warn); font-size: 12px; }

/* Een regel zonder prijs valt op: zonder dat lijkt het totaal compleet. */
.wr-geenprijs { color: var(--warn); font-size: 12px; }
.wr-tabel tfoot td { border-top: 1px solid var(--line); border-bottom: 0; padding-top: 8px; }
.wr-tabel thead th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); text-align: left;
  padding: 0 8px 6px; border-bottom: 1px solid var(--line);
}
.wr-tabel thead th.num { text-align: right; }

/* Invulvelden in het werkbonpaneel die geen tekstvak zijn. */
.wr-regel input[type="text"], .wr-regel select {
  width: 100%; background: var(--ground); border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink); font: inherit; padding: 7px 10px;
}
.wr-regel input:focus, .wr-regel select:focus { outline: none; border-color: var(--accent-tekst); }
/* Een getal is smal; de eenheid ernaast zegt wat er wordt gevraagd. */
.wr-getal { display: flex; align-items: center; gap: 10px; }
.wr-getal input { width: 90px; flex: none; }
.wr-getal small { color: var(--ink-muted); font-size: 12px; }
.wr-hint2 { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 12px; }

/* Een klein invoerveld midden in een leesregel — het opslagpercentage in het
   factuuroverzicht. Smal genoeg om naast de uitleg te passen. */
input.mini { width: 5.5em; display: inline-block; }
.btn.mini { padding: 3px 9px; font-size: 11px; }

/* De invulbare verkoopprijs in het factuuroverzicht. Rechts uitgelijnd zoals de
   bedragen eromheen, en smal genoeg om de tabel niet uit elkaar te trekken. */
.wr-tabel input.prijsveld {
  width: 6.5em; text-align: right; padding: 3px 6px; font-size: 13px;
  background: var(--ground); border: 1px solid var(--line-soft);
}
.wr-tabel input.prijsveld:focus { border-color: var(--accent-tekst); }

/* Offertes (fase 6). De statuspillen volgen dezelfde vorm als bij de
   abonnementen; de sleutel is de klassenaam, dus die mag geen spaties bevatten. */
.pill.p-concept { background: var(--surface-high); color: var(--ink-muted); }
.pill.p-verzonden { background: var(--accent-dim); color: var(--accent-tekst); }
.pill.p-geaccepteerd { background: var(--good-dim); color: var(--good); }
.pill.p-afgewezen { background: var(--bad-dim); color: var(--bad); }
.pill.p-vervallen { background: var(--surface-high); color: var(--ink-muted); }
/* Geannuleerd: gedempt zoals vervallen, want het is een eindstand waar niets
   meer mee gebeurt — maar met een streep erdoor, zodat het verschil met een
   offerte die alleen is verlopen te zien is zonder de tekst te lezen. */
.pill.p-geannuleerd {
  background: var(--surface-high); color: var(--ink-muted);
  text-decoration: line-through; text-decoration-thickness: 1px;
}

/* Invulvelden in de offerteregels: de omschrijving mag meegroeien, de getallen
   blijven smal zodat de tabel niet uit elkaar wordt getrokken. */
.wr-tabel input.regelveld {
  width: 100%; padding: 3px 6px; font-size: 13px;
  background: var(--ground); border: 1px solid var(--line-soft);
}
.wr-tabel input.regelveld.kort { width: 6em; text-align: right; }
.wr-tabel input.regelveld:focus { border-color: var(--accent-tekst); }

/* Een datumveld in een leesregel. NIET de klasse 'mini' gebruiken: die is 5,5em
   en dat kapt dd-mm-jjjj plus het kalendericoon af — het veld lijkt dan leeg of
   half ingevuld. */
input.datumveld { width: 11em; display: inline-block; }

/* De keuzelijsten in het offertepaneel: breed genoeg voor een bedrijfsnaam met
   klantnummer erachter, maar niet zo breed dat ze het paneel uit lopen. */
#offInhoud select { max-width: 34em; }

/* De materialenpicker in het offertepaneel. Een eigen scrollvak met een vaste
   hoogte: 719 materialen mogen het paneel niet oneindig lang maken.
   min-height: 0 hoort erbij — .panel is een flex-kolom en een scrollvak krimpt
   daarin anders tot niets, dezelfde val als eerder bij de adressen. */
#offPicker { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pickerlijst {
  max-height: 320px; min-height: 0; overflow-y: auto; margin-top: 8px;
  border: 1px solid var(--line-soft); border-radius: 3px;
}
.pickerlijst button {
  display: flex; width: 100%; gap: 10px; align-items: baseline;
  padding: 7px 10px; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.pickerlijst button:last-child { border-bottom: 0; }
.pickerlijst button:hover { background: var(--surface-high); color: var(--ink); }
.pickerlijst button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pickerlijst .naam { flex: 1; min-width: 0; }
.pickerlijst .ean { font-family: var(--mono); font-size: 10.5px; color: var(--ink-muted); }
.pickerlijst .inkoop { font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* Kopje boven een blok in de picker: je eigen catalogus, en daaronder wat je
   groothandels voeren. Twee bronnen in één lijst zijn zonder zo'n scheiding niet
   uit elkaar te houden — de bedragen betekenen namelijk iets anders. */
.pickerlijst .pickkop {
  position: sticky; top: 0; z-index: 1;
  margin: 0; padding: 5px 10px; background: var(--surface-high);
  border-bottom: 1px solid var(--line-soft);
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}

/* Een regel met een ster ernaast. De ster hoort niet ín de knop die het
   materiaal kiest: een knop in een knop is ongeldige HTML en de browser trekt ze
   uit elkaar, waarna de ster buiten de rij belandt. Vandaar een rij eromheen die
   de onderrand draagt, en de knoppen erin niet meer. */
.pickerlijst .pickrij { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.pickerlijst .pickrij:last-child { border-bottom: 0; }
.pickerlijst .pickrij > button { border-bottom: 0; }
.pickerlijst .pickhoofd { flex: 1; min-width: 0; }
.pickerlijst .ster {
  flex: 0 0 30px; width: 30px; padding: 0;
  align-items: center; justify-content: center; color: var(--ink-muted);
}
.pickerlijst .ster:hover { color: var(--ink); }
.pickerlijst .ster.aan { color: var(--accent-tekst); }

/* Wat er op voorraad ligt. Nul krijgt dezelfde plek maar gedempt: het gaat om
   het onderscheid liggen/bestellen, en dat lees je aan de tekst. */
.pickerlijst .voorraad { font-size: 10.5px; color: var(--ink-muted); white-space: nowrap; }
.pickerlijst .voorraad.geen { color: var(--warn); }

/* Jouw voorraadprijs naast wat inkopen vandaag kost. Oranje als je voorraad
   duurder is — dat is het geval waar je iets mee moet; groen als hij goedkoper
   is, want dat is gewoon goed nieuws. Zelfde kleurafspraak als bij .markt in de
   offertetabel, zodat het op beide plekken hetzelfde betekent. */
.pickerlijst .marktregel {
  margin: 0; padding: 6px 10px; font-size: 11px; line-height: 1.4;
  border-bottom: 1px solid var(--line-soft);
}
.pickerlijst .marktregel.duur { color: var(--warn); }
.pickerlijst .marktregel.goedkoop { color: var(--good); }
/* Een verschil van meer dan een factor twee: waarschijnlijk de eenheid en geen
   prijs. Gedempt en niet oranje — het is een mededeling en geen waarschuwing. */
.pickerlijst .marktregel.eenheid { color: var(--ink-muted); }

/* Toelichting bínnen de lijst is krapper dan een losse lege-staat-melding: hier
   staat het tussen regels in, en de ruime marge van .empty maakt er een gat van
   dat de lijst uit elkaar trekt. Alleen in de picker, zodat de melding elders
   blijft ademen. */
.pickerlijst .empty { padding: 7px 10px; margin: 0; }
/* Het product waar de leveranciersregels bij horen. Iets nadrukkelijker dan de
   toelichting eronder, want het is de kop van dat groepje. */
.pickerlijst .pickprod {
  margin: 0; padding: 7px 10px; color: var(--ink-soft); font-size: 12px;
}

/* De eenheid naast een aantal krijgt een vaste breedte, zodat een regel zonder
   eenheid het getal ernaast niet verschuift. Zonder dit stond het aantalveld
   van een nieuwe (lege) offerteregel niet op één lijn met de regels eronder. */
.wr-tabel .eenheid {
  display: inline-block; width: 3.4em; padding-left: 7px;
  text-align: left; color: var(--ink-muted); font-size: 12px;
}

/* Een invoerveld met een knop ernaast. align-items: flex-end lijnt de knop uit
   op de onderkant van het véld en niet op de bovenkant van het label — dat
   laatste vroeg om een leeg neplabel boven de knop, en dat is nooit precies
   even hoog. */
.veldmetknop { display: flex; gap: 12px; align-items: flex-end; }
.veldmetknop label.f { flex: 0 1 220px; }

/* BERICHTEN WIJKT HIER AF. 220px is de maat voor een veld dat tussen andere
   dingen staat, zoals een voorrijtarief. Op het berichtenscherm typ je een hele
   zin en is het veld het onderwerp van de kaart — dan hoort het de ruimte te
   krijgen die er is. Met een bovengrens, want een regel die de hele breedte van
   een breed scherm beslaat leest niet meer prettig. */
#s-berichten .veldmetknop { max-width: 760px; }
#s-berichten .veldmetknop label.f { flex: 1 1 auto; }
/* De keuzelijst juist andersom: daar staan namen in, geen zinnen. Zo breed als
   de langste naam ongeveer vraagt, en niet meer. */
#s-berichten .naarwie { max-width: 320px; }

/* De marktvergelijking onder een inkoopprijs in de offerte. Oranje als jouw
   voorraad duurder is dan de markt — dat is het geval waar je iets mee moet;
   groen als hij goedkoper is, want dat is gewoon goed nieuws. */
.wr-tabel .markt {
  display: block; font-size: 10.5px; line-height: 1.35; margin-top: 2px;
  font-family: var(--mono); letter-spacing: .02em; white-space: normal;
}
.wr-tabel .markt.duur { color: var(--warn); }
.wr-tabel .markt.goedkoop { color: var(--good); }

/* De 2BA-treffers in de materialenpicker. De regel van jouw eigen leverancier
   krijgt nadruk: die prijs betaal je werkelijk, de rest is ter vergelijking. */
.pickerlijst .lev { font-family: var(--mono); font-size: 10.5px; color: var(--ink-muted); }
.pickerlijst .netto { color: var(--good); font-variant-numeric: tabular-nums; }
.pickerlijst .advies { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pickerlijst button.onslev { border-left: 2px solid var(--good); }
.pickerlijst .pereenheid { font-size: 10.5px; color: var(--ink-muted); }

/* Waar een inkoopprijs vandaan komt: een prijsafspraak op het artikel, een
   groepskorting, of alleen de adviesprijs. Klein en grijs — het is toelichting
   bij het bedrag en geen bedrag op zich. */
.pickerlijst .bron { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); margin-left: 5px; }

/* ── Groepen op een offerte ──────────────────────────────────────────────────
   De kopregel van een groep draagt het enige bedrag dat de klant straks ziet,
   dus die mag opvallen tussen zijn regels. Een lijn erboven en niet eronder:
   zo hoort de kop zichtbaar bij wat eronder staat en niet bij de groep ervoor. */
.wr-tabel tr.off-groepkop > td {
  border-top: 1px solid var(--line);
  padding-top: 10px; background: var(--surface-high);
}
.wr-tabel tr.off-groepkop:first-child > td { border-top: 0; }
.wr-tabel tr.off-groepkop input.groepveld {
  font-weight: 600; width: 100%; max-width: 280px;
}
/* De groepskeuze onder de omschrijving. Klein en gedempt: je stelt hem één keer
   in en leest hem daarna alleen nog. */
.wr-tabel select.groepkeuze {
  margin-top: 3px; font-size: 11px; padding: 2px 4px;
  color: var(--ink-muted); background: none; border: 1px solid var(--line-soft);
}
.wr-tabel select.groepkeuze:focus { color: var(--ink); }

/* De schakelaar boven de lijst met in te plannen werkbonnen. Klein en gedempt:
   het is een uitzondering die je zelden nodig hebt, geen filter waar je elke
   keer langs moet. */
.planzij-toon {
  display: flex; align-items: center; gap: 6px; margin: 0 0 10px;
  font-size: 11.5px; color: var(--ink-muted); cursor: pointer;
}
.planzij-toon input { width: auto; margin: 0; }

/* Het werkbonnummer in de lijst: vaste breedte, zodat 2026-500 en 2027-001
   onder elkaar uitlijnen en je met je oog kunt scannen. */
.wr-tabel td.mono, #wrTabel td.mono {
  font-family: var(--mono); font-size: 12px; white-space: nowrap;
}

/* De plakbalk boven het weekraster. Opvallend, want zolang hij staat doet een
   klik op een cel iets ánders dan normaal — dat mag je niet vergeten. */
.planplak {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  padding: 8px 12px; border-radius: 4px;
  background: var(--accent-dim); border: 1px solid var(--accent);
  color: var(--ink); font-size: 13px;
}
.planplak button { margin-left: auto; }
/* Cellen tonen dat er iets te plakken valt. */
.planrooster.plakstand .plancel:not(.geblokkeerd):hover {
  outline: 2px dashed var(--accent); outline-offset: -2px; cursor: copy;
}

/* Het rechtermuisknopmenu in de planning. position: fixed en niet absolute: het
   raster scrollt horizontaal, en met absolute zou het menu meeschuiven weg van
   de plek waar je klikte. */
.planmenu {
  position: fixed; z-index: 60; min-width: 170px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.planmenu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--ink-soft); font: inherit; font-size: 13px;
  padding: 7px 10px; border-radius: 3px; cursor: pointer;
}
.planmenu button:hover { background: var(--surface-high); color: var(--ink); }
.planmenu button:disabled { color: var(--ink-muted); cursor: default; background: none; }
.planmenu .kop {
  padding: 6px 10px 4px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.planmenu .streep { height: 1px; background: var(--line-soft); margin: 4px 0; }

/* Het uitvoeringsverslag: losse vastleggingen met wie en wanneer. Elke regel een
   eigen blokje, want ze zijn los vastgelegd en horen niet als één lap tekst te
   lezen. */
.wr-notitie { margin-bottom: 10px; }
.wr-notitie:last-child { margin-bottom: 0; }
.wr-notitie span {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-muted); margin-bottom: 2px;
}
/* Wie de foto toevoegde. Kleiner en grijzer dan het bijschrift: dat laatste gaat
   over wat je ziet, dit over waar het vandaan komt. */
.wr-fotobron { font-size: 10.5px; color: var(--ink-muted); margin-top: 2px; }

/* ---------- werkinstructies ---------- */

/* Het overzicht: de omslagfoto ernaast, want een handleiding herken je aan het
   beeld en niet aan de titel. Vaste hoogte zodat de rijen uitlijnen ook als de
   ene foto staand is en de andere liggend. */
.wi-kaart {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center;
  padding: 10px; border: 1px solid var(--line-soft); border-radius: 4px;
  margin-bottom: 8px; cursor: pointer; background: var(--surface);
}
.wi-kaart:hover { border-color: var(--accent-tekst); }
.wi-omslag {
  height: 74px; display: flex; align-items: center; justify-content: center;
  background: var(--rail); border-radius: 3px; overflow: hidden;
}
.wi-omslag img { width: 100%; height: 100%; object-fit: cover; }
.wi-tekst strong { color: var(--ink); }

/* De legenda. Een kleurknop is de stand waarin je klikt; `aan` is welke kleur
   je nu zet. Zonder dat verschil weet je bij het klikken op de foto niet wat
   eruit komt. */
.wi-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.wi-kleurknop {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px; font: inherit; font-size: 13px; color: var(--ink-soft);
  background: var(--surface-high); border: 1px solid transparent;
  border-radius: 999px; cursor: pointer;
}
.wi-kleurknop.aan { border-color: var(--accent-tekst); color: var(--ink); }
.wi-kleurknop .stip {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0, 0, 0, .35);
}
.wi-kleurknop .stip.leeg { background: transparent; border: 1px dashed var(--ink-muted); }
.wi-kleurknop .weg { color: var(--ink-muted); font-size: 15px; line-height: 1; padding: 0 2px; }
.wi-kleurknop .weg:hover { color: var(--bad); }

/* De kleuren die nog vrij zijn. Kaal en klein: het is een keuze uit een palet
   en geen knoppenrij die aandacht vraagt. */
.wi-legtoe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.wi-stipknop {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .35); padding: 0;
}
.wi-stipknop:hover { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Het lege scherm. De knop staat middenin en niet als voetnoot onder een zin:
   dit is het enige wat je hier kunt doen. */
.wi-leeg {
  text-align: center; padding: 26px 20px 30px;
  border: 1px dashed var(--line); border-radius: 4px; margin-bottom: 20px;
}
.wi-leeg p { color: var(--ink-muted); margin: 0 auto 16px; max-width: 44ch; }

/* De twee knoppen op het lege scherm naast elkaar en gecentreerd. */
.wi-leegknoppen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Een stap zonder foto. Bewust geen leeg grijs vlak op fotoformaat: dat leest
   als een plaatje dat niet laadt. */
.wi-geenfoto {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px dashed var(--line); border-radius: 3px;
  max-width: 520px;
}
.wi-geenfoto > span { color: var(--ink-muted); font-size: 12.5px; }

.wi-stap { margin-bottom: 20px; }
.wi-stapkop { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.wi-stapkop strong { color: var(--ink); }
/* De foto is hier een werkvlak: je klikt erin om een kruisje te zetten. Het
   kruisje wijst mee, anders lijkt het beeld alleen ter illustratie. */
.wi-beeld { cursor: crosshair; max-width: 520px; }
.wi-staptekst {
  width: 100%; max-width: 520px; margin-top: 6px; padding: 8px 10px;
  background: var(--surface-high); color: var(--ink); border: 1px solid var(--line);
  border-radius: 3px; font: inherit; resize: vertical;
}
.wi-staptekst:focus { outline: none; border-color: var(--accent-tekst); }

#wiPanel h4 .wr-toevoeg {
  margin-left: 10px; display: inline-block; vertical-align: middle;
  text-transform: none; letter-spacing: normal; cursor: pointer;
}

/* ---------- vraagvenster ---------- */
/*
   Vervangt confirm(), prompt() en alert() van de browser. Boven .panel (60,
   naast de lichtbak): je verwijdert meestal iets vanuit een geopend paneel en
   dat paneel hoort te blijven staan.
*/
.vraagscrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.vraagvenster {
  width: min(440px, 100%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  padding: 22px 24px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
/* pre-wrap: sommige vragen hebben een tweede alinea met wat er precies gebeurt,
   en die stond met \n\n in de tekst. Zonder dit wordt dat één doorlopende zin. */
.vraagtekst {
  margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap;
}
.vraaginvoer { display: flex; flex-direction: column; gap: 5px; }
.vraaginvoer > span { font-size: 12px; color: var(--ink-muted); }
.vraaginvoer input {
  background: var(--surface-high); color: var(--ink); border: 1px solid var(--line);
  border-radius: 3px; padding: 8px 10px; font: inherit; width: 100%;
}
.vraaginvoer input:focus { outline: none; border-color: var(--accent-tekst); }
/* De bevestiging rechts, en annuleren links ervan — zelfde volgorde als in de
   panelen, zodat je hem op dezelfde plek zoekt. */
.vraagknoppen { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- voorvertoning van een werkinstructie ---------- */
/*
   Hergebruikt .vraagscrim voor de laag eromheen: dezelfde plek in de stapeling
   (70), dus boven het paneel waar je hem vanaf opent.
*/
.wi-preview {
  width: min(420px, 100%); max-height: min(760px, 90vh);
  display: flex; flex-direction: column;
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); overflow: hidden;
}
.wi-previewkop {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.wi-previewkop strong { color: var(--ink); font-size: 13px; }
/* De inhoud schuift, de kop blijft staan — net als in de app. */
.wi-previewblad { overflow-y: auto; padding: 18px 16px 28px; }
.wi-previewblad h3 {
  margin: 0 0 12px; color: var(--ink); font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase;
}
.wi-previewblad .kop {
  color: var(--accent-tekst); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; margin: 20px 0 8px;
}
.wi-previewblad .kop:first-child { margin-top: 0; }
.wi-previewblad p { color: var(--ink); line-height: 1.45; margin: 0 0 10px; white-space: pre-wrap; }
.wi-previewblad .legenda { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 4px; }
.wi-previewblad .legenda span { display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); font-size: 13px; }
.wi-previewblad .legenda i {
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .35);
}
.wi-previewblad .wr-beeld { margin-bottom: 8px; }
.wi-previewblad .leeg { color: var(--ink-muted); }

/* ---------- uitleg op een scherm ---------- */
/* Een <details>: open bij de eerste kennismaking, daarna klap je hem dicht en
   blijft hij dicht (de stand wordt onthouden). Geen apart hulpscherm — wie iets
   gaat maken zit hier en niet in een document in een ander tabblad. */
.card.uitleg { padding: 0; }
.card.uitleg > summary {
  cursor: pointer; padding: 14px 18px; list-style: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
}
.card.uitleg > summary::-webkit-details-marker { display: none; }
.card.uitleg > summary::before { content: '▸ '; color: var(--accent-tekst); }
.card.uitleg[open] > summary::before { content: '▾ '; }
.card.uitleg > summary:hover { color: var(--ink); }
.card.uitleg > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.uitleg-inhoud { padding: 0 18px 18px; max-width: 78ch; }
.uitleg-inhoud p { color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; }
.uitleg-inhoud ol { color: var(--ink-soft); line-height: 1.55; padding-left: 22px; margin: 0 0 12px; }
.uitleg-inhoud li { margin-bottom: 9px; }
.uitleg-inhoud strong { color: var(--ink); font-weight: 600; }
.uitleg-inhoud em { color: var(--accent-tekst); font-style: normal; }
.uitleg-inhoud .let-op {
  border-left: 2px solid var(--warn); padding-left: 12px; margin-bottom: 0;
}

/* Een bedrag dat afwijkt van de contractprijs. Geen rood: het mág afwijken,
   er is alleen een afspraak gemaakt die niet uit het contract volgt. */
#aboBedragBron.afwijkend { color: var(--warn); }


/* ---------- onderhoudsmelding ---------- */
/* Over de volle breedte en bovenlangs, buiten de rail om: dit hoort op te
   vallen ongeacht welk scherm er openstaat. `--warn` en niet `--bad` — er is
   niets stuk, er komt alleen iets aan. */
.onderhoud {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--warn); color: #201704;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.onderhoud .on-kop {
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(0, 0, 0, .22);
}
.onderhoud button {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: inherit; font-size: 20px; line-height: 1; padding: 0 4px;
}
.onderhoud button:hover { opacity: .65; }


/* ---------- ondertekenblokken in het abonnementsvenster ---------- */
/* Een kop boven elke rij knoppen. Zonder die kop stonden er twee knoppen met
   dezelfde tekst naast elkaar — 'Alleen een link maken' voor de machtiging en
   voor het contract — en die zijn niet uit elkaar te houden. De kop draagt het
   verschil, dus de knop zelf hoeft het niet te herhalen. */
.tekenblok {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.tekenblok .lbl {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Wat er al naar de klant is gegaan. Onder de kop en boven de knoppen: je leest
   eerst wat er is gebeurd en beslist daarna wat je doet — andersom druk je op
   'Laten tekenen' en zie je pas daarna dat het al verstuurd was. */
.tekenblok .uitnodiging {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.tekenblok .uitnodiging.verlopen { color: var(--warn); }

/* De handtekening onder een geaccepteerde offerte. Op wit, want er wordt in
   bijna-zwart getekend en dit scherm is donker; zonder deze ondergrond staat er
   een leeg vak waar een krabbel hoort. */
.akkoordkrabbel {
  display: block; margin-top: 6px;
  max-width: 260px; max-height: 90px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 4px;
}


/* De themaschakelaar in de voet van de navigatiebalk, naast Uitloggen. Zelfde
   ingetogen vorm: dit is geen handeling die je vaak doet. */
.themaknop {
  background: none; border: 0; padding: 0; margin-top: 6px;
  color: var(--rail-ink); font: inherit; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.themaknop:hover { color: var(--ink-soft); }

/* Een vinkje met een uitleg ernaast, waarbij de tekst netjes onder zichzelf
   doorloopt in plaats van onder het vinkje. */
.vinkrij {
  /* align-items: flex-start houdt het vinkje bij de eerste regel tekst en niet
     in het midden van een alinea van vier regels. */
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; cursor: pointer;
}
.vinkrij input[type="checkbox"] { flex: none; margin-top: 2px; }
/* De tekst neemt de rest van de regel. min-width:0 hoort erbij: zonder die
   regel weigert een flexvak smaller te worden dan zijn langste woord, en breekt
   lange tekst uit de kaart. */
.vinkrij > span { flex: 1; min-width: 0; }

/* ── DE GESCHIEDENIS VAN VERZONDEN BERICHTEN ──────────────────────────────── */
.berichtrij { padding: 12px 0; border-top: 1px solid var(--line); }
.berichtrij:first-child { border-top: 0; padding-top: 0; }
.berichtkop {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--ink-muted);
}
/* De telling naar rechts, zodat je bij het langslopen van de lijst één kolom
   met cijfers ziet in plaats van een getal dat met de naamlengte meeschuift. */
.berichtkop .telling { margin-left: auto; }
.berichtkop .prio {
  color: var(--op-accent); background: var(--accent);
  border-radius: 3px; padding: 1px 6px; font-size: 10px; letter-spacing: .06em;
}
.bertekst { margin: 5px 0 8px; font-size: 13.5px; color: var(--ink); }
.ontvangers { display: flex; flex-wrap: wrap; gap: 5px; }
/* KLEUR ALLEEN IS NIET GENOEG — een op de twaalf mannen ziet groen en rood niet
   uit elkaar. Vandaar dat elke stand ook een eigen randdikte en tekstkleur
   heeft, en er een titel onder de muis staat die het uitschrijft. */
.ontvanger {
  font-size: 11.5px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--ink-muted);
}
.ontvanger.gelezen {
  border-color: var(--accent-tekst); color: var(--accent-tekst); font-weight: 600;
}
.ontvanger.bezorgd { border-style: dashed; }
/* Niet bezorgd is het enige geval waar je iets mee moet, dus dat is het enige
   dat om aandacht vraagt. */
.ontvanger.niet {
  border-color: var(--bad); color: var(--bad); text-decoration: line-through;
}

/* ── MEEKIJKERS OP EEN WERKBON ─────────────────────────────────────────────
   Een externe opnemer die meekijkt op een bon die niet uit zijn eigen opname
   komt. Als naamplaatjes en niet als opsomming: het zijn er meestal nul of
   één, en dan is een lijst met opsommingstekens meer omhaal dan inhoud. */
.meekijkers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meekijker {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 2px 4px 2px 9px; border-radius: 11px;
  border: 1px solid var(--accent-tekst); color: var(--accent-tekst);
}
.meekijker-af {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 3px; opacity: .65;
}
.meekijker-af:hover { opacity: 1; }
/* De keuzelijst hoort niet de hele breedte te nemen: er staan namen in. */
.meekijkers select { width: auto; min-width: 180px; font-size: 12.5px; padding: 4px 8px; }
.wr-leeg { color: var(--ink-muted); font-size: 12.5px; }

/* Een werkbon die een medewerker zelf heeft aangemaakt.
   Die is niet vanaf kantoor ingepland, dus er moet nog iemand naar de klant en
   de prijzen kijken. Het merkje staat achter de naam van de maker: daar zoek je
   naar wie het gedaan heeft, en dan lees je meteen dat het er zo een is. */
.vanmonteur {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 9px; white-space: nowrap;
  border: 1px solid var(--accent-tekst); color: var(--accent-tekst);
}
/* Een getal op de startpagina waar iets achter zit. Onderstreept en met de
   aanwijzer erbij, want een cijfer ziet er niet uit als een knop. */
.stat b.klikbaar {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.stat b.klikbaar:hover { color: var(--accent-tekst); }

/* ── EEN WERKBON DIE TERUG IS NAAR KANTOOR ─────────────────────────────────
   De medewerker liep vast en heeft hem teruggegeven met een vraag. Oranje en niet
   rood: er is niets stuk, er ligt werk. Dezelfde kleur als de andere dingen die
   om aandacht vragen zonder alarm te zijn. */
.pill.p-retour {
  background: var(--warn-dim); color: var(--warn);
  border: 1px solid var(--warn);
}
/* In de planningslijst: een streep aan de zijkant, zodat je hem ziet zonder de
   stand te lezen. */
.planbon.staat-retour {
  border-left: 3px solid var(--warn);
  background: var(--warn-dim);
}
.planbon.staat-retour .staat { color: var(--warn); font-weight: 600; }
/* De vraag zelf eronder. Afgekapt op drie regels: de hele tekst staat in het
   werkbonvenster, hier gaat het erom dát er iets gevraagd is en wat ongeveer. */
.planbon .retour {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 4px;
  color: var(--ink-soft); font-size: 12px; line-height: 1.35;
}
/* In het werkbonvenster: de vraag met wie hem stelde eronder. */
.retourvraag {
  padding: 10px 12px; background: var(--warn-dim);
  border-left: 3px solid var(--warn); color: var(--ink); line-height: 1.45;
}
.retourvraag span {
  display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 11px; color: var(--ink-muted);
}

/* De naam van een foto, boven het bijschrift. Als kop en niet als bijschrift:
   hieraan vind je de foto terug, de notitie eronder legt uit wat je ziet. */
.wr-fototitel {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink); font-weight: 600; font-size: 13px; margin-top: 6px;
}
.wr-fototitel span { min-width: 0; overflow-wrap: anywhere; }
.fototitel-bewerk {
  flex: none; background: none; border: 0; cursor: pointer; padding: 0 2px;
  color: var(--ink-muted); font-size: 13px; line-height: 1;
}
.fototitel-bewerk:hover { color: var(--accent-tekst); }
/* De opmerking onder een foto, met hetzelfde potloodje als de naam erboven. */
.wr-fotonote { display: flex; align-items: baseline; gap: 6px; }
.wr-fotonote span { min-width: 0; overflow-wrap: anywhere; }
.wr-fotonote em { color: var(--ink-muted); font-style: italic; }
/* Het antwoord van kantoor, onder de vraag van de medewerker. Groen en niet
   oranje: de vraag stond open, dit is wat erop is gedaan. */
.retourantwoord {
  margin-top: 6px; padding: 10px 12px; background: var(--good-dim);
  border-left: 3px solid var(--good); color: var(--ink); line-height: 1.45;
}
.retourantwoord span {
  display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 11px; color: var(--ink-muted);
}

/* De tekst van het afspraakbericht, in de instellingen.
   De invulbare gegevens als knopjes: overtypen van {werkzaamheden} is vragen om
   een typefout, en een veld met een typefout blijft als tekst in de mail staan. */
.veldenlijst { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.veldenlijst .empty { padding: 0; margin-right: 6px; }
.btn.klein { padding: 3px 8px; font-size: 12px; font-family: var(--mono); }

/* Het voorbeeld met een lichte ondergrond, ook in de donkere modus: een mail
   komt op wit binnen, en de tekst beoordelen op een donkere kaart geeft een
   ander beeld dan wat de klant ziet. */
.afsproef {
  background: #ffffff;
  color: #12263f;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
.afsproef p { margin: 0 0 10px; }
.afsproef p:last-child { margin-bottom: 0; }
.afsproef .afsonderwerp {
  font-weight: 700;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #d5dde5;
}
.afsproef .afsgroet { margin-top: 16px; }