/* =====================================================================
   SamenVvE Beheer, huisstijl: navy, oker, creme.

   Redactionele opzet: een wit werkblad, haarlijnen in plaats van kaders,
   kleine mono-labels boven serif-koppen. Een rij is een rij, geen doosje;
   dat scheelt op elke pagina de helft van de hoogte.

   Kleuren doorgemeten op WCAG AA (22-07-2026), alle tekstcombinaties
   halen minimaal 4.5:1. Nieuwe combinaties eerst narekenen.
   ===================================================================== */
:root {
  --ink: #1c2433; --ink-soft: #51607a; --ink-muted: #606f86;
  --ochre: #c98a2b; --ochre-dark: #976417; --ochre-soft: #fdf6ea;
  --cream: #f4f2ec; --canvas: #fff; --line: #e2ded2; --line-zacht: #efece5;
  --green: #1d7a52; --green-soft: #e7f3ec;
  --amber: #956600; --amber-soft: #fbf2dd;
  --red: #b23b34; --red-soft: #fbeceb;
  --btn-primair: #1c2433; --btn-primair-hover: #2b3650;
  --btn-groen-hover: #166844; --hover-zacht: #ede9e0;
  --demo-blauw: #3a5a8c; --kaart: #faf9f5; --knop-diep-tekst: #fff;
  --r: 8px; --r-sm: 3px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-kop: "Fraunces", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--canvas); color: var(--ink); line-height: 1.55; font-size: 15px; }
h1, h2, h3 { font-family: var(--font-kop); font-weight: 600; letter-spacing: -.015em; }
a { color: var(--ochre-dark); }
.muted { color: var(--ink-muted); }
.klein { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Micro-label: het kleine hoofdletterlabel boven een getal, een groep of een
   sectie. Een klasse, want hij komt overal terug. */
.menu-label, .groep-label, .kaart-info .lbl, .wachttijd-kop, .kruimel {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- schil: zijbalk + inhoud ---------- */
.schil { display: flex; min-height: 100vh; }
.zijbalk {
  width: 218px; flex: none;
  background: var(--cream); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 20px 0 16px; gap: 0;
  position: sticky; top: 0; height: 100vh;
}
.zijbalk-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 16px 18px;
}
.zijbalk .brand {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  color: var(--ink); text-decoration: none;
}
/* Alleen de buitenste span is de merknaam; de sub-regel erbinnen houdt zijn
   eigen (veel kleinere) maat. */
.zijbalk .brand > span { display: block; font-family: var(--font-kop); font-size: 18px; font-weight: 600; line-height: 1.15; }
.zijbalk .brand b { color: var(--ochre-dark); font-weight: 700; }
/* De naam is de kop, de regel eronder het bijschrift. Ruime spatiering maakt
   een klein bijschrift optisch net zo breed als de naam erboven, dus die
   houden we hier bewust krap. */
.brand-sub { display: block; margin-top: 1px; font-family: var(--mono); font-size: 8.5px; font-weight: 500; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
/* Hamburger + toggle-checkbox: op desktop verborgen; de menugroep staat dan
   altijd open als gewone zijbalk. */
.hamburger { display: none; }
.menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: -1px; overflow: hidden; }
.menu-groep { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.brand-logo { width: 30px; height: 30px; flex: none; display: block; }
.brand-logo.groot { width: 54px; height: 54px; margin-bottom: 18px; }
.menu-label { padding: 14px 18px 6px; }
.zijbalk nav { display: flex; flex-direction: column; }
.zijbalk nav a {
  display: block; padding: 7px 18px;
  border-left: 2px solid transparent;
  color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.zijbalk nav a:hover { color: var(--ink); background: var(--hover-zacht); }
.zijbalk nav a.actief { background: var(--canvas); color: var(--ink); font-weight: 600; border-left-color: var(--ochre); }
.zijbalk .onderin { margin-top: auto; padding-top: 12px; }
.zijbalk .onderin a { color: var(--ink-muted); font-size: 13px; }

.inhoud { flex: 1; min-width: 0; padding: 30px 44px 72px; max-width: 980px; }

/* ---------- paginakop ---------- */
.kruimel { margin: 0 0 12px; }
.kruimel b { color: var(--ink-soft); font-weight: 600; }
.pagina-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.pagina-kop h1 { margin: 0; font-size: 31px; line-height: 1.15; }
.pagina-sub { margin: 6px 0 26px; color: var(--ink-soft); max-width: 60ch; font-size: 14px; }

/* Sectiekop: een klein label met een streep eronder, geen tweede grote kop. */
h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
  margin: 40px 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--ink);
}

/* ---------- statistieken ---------- */
/* Vijf kolommen sinds de teller Opgezegd erbij kwam (LCY-19); bij vier
   zakte de vijfde tegel scheef naar een tweede regel. */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 22px; border-top: 1px solid var(--ink); }
.stat { padding: 14px 22px 16px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-n { font-family: var(--font-kop); font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-n.green { color: var(--green); } .stat-n.amber { color: var(--amber); } .stat-n.red { color: var(--red); }
.stat-l { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
/* De vroegere donkere "hero"-tegel: in deze opzet gewoon het eerste getal. */
.stat-hero { background: none; }
.stat-hero .stat-n { color: var(--ink); }
.stat-hero .stat-l { color: var(--ink-muted); }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 12px 16px 14px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- rijen (voorheen kaarten) ----------
   Een rij is een lichte band met een streep links. Dat is de standaard voor
   dit ontwerp: je ziet waar een rij begint en ophoudt zonder een kader, en de
   streep vertelt in een oogopslag hoe het ervoor staat. De band loopt door in
   de kantlijn (negatieve marge plus dezelfde padding), zodat de tekst erin op
   exact dezelfde lijn begint en eindigt als de sectiekop erboven. */
.kaart, .omgeving {
  margin: 0 -15px 6px; padding: 13px 15px 13px 13px;
  border-radius: var(--r-sm); background: var(--kaart);
  border-left: 2px solid var(--line);
}
.rij-ok { border-left-color: var(--green); }
.rij-letop { border-left-color: var(--ochre); }
.rij-fout { border-left-color: var(--red); }
/* LCY-19: opgezegd is een bewuste, geen foutieve toestand: neutrale streep
   in plaats van rood, dat "geblokkeerd" (rij-fout) blijft betekenen. */
.rij-opgezegd { border-left-color: var(--ink-muted); }
.kaart-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* Sta de flex-kinderen toe te krimpen, zodat een lange domeinnaam afbreekt in
   plaats van de rij (en de pagina) breder te maken dan het scherm. */
.kaart-kop > div { min-width: 0; }
/* Zakt de actie naar de volgende regel (smal scherm), dan blijft hij rechts
   staan in plaats van links onder de tekst te belanden. */
.kaart-kop > form { margin-left: auto; }
.domein { font-weight: 600; font-size: 15.5px; margin-right: 7px; overflow-wrap: anywhere; }

/* Tekstafbreking-hardening: lange ononderbroken strings (domeinen, e-mails,
   URL's, sha256, foutmeldingen, commando's) mogen nooit horizontale overflow
   veroorzaken op smalle schermen. */
.kaart-info, .notitie, .alert, .backup-tabel td { overflow-wrap: anywhere; }
code { font-family: var(--mono); overflow-wrap: anywhere; }
.backup-lijst { overflow-x: auto; }

/* Badge: omlijnd in plaats van gevuld. Rustiger naast elkaar, en de kleur
   blijft het signaal. */
/* Nooit afbreken: een badge is een etiket, en "Proefperiode" over twee regels
   (of erger, per letter) is geen etiket meer. De langste tekst past ruim op
   390px, dus overflow is geen risico. */
.badge {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--r-sm); border: 1px solid currentColor;
  background: none; white-space: nowrap; overflow-wrap: normal;
}
.badge + .badge { margin-left: 4px; }
.badge-actief { color: var(--green); }
.badge-nieuw { color: var(--amber); }
.badge-geblokkeerd { color: var(--red); }
.badge-opgezegd { color: var(--ink-muted); }
.badge-waarschuwing { color: var(--red); }
.badge-onderhoud { color: var(--ochre-dark); }
.badge-ai { color: var(--ochre-dark); }
.badge-verouderd { color: var(--amber); }
.badge-omgeving-productie { color: var(--ink-soft); }
.badge-omgeving-test { color: var(--amber); }
.badge-omgeving-demo { color: var(--demo-blauw); }

.backup-tabel { width: 100%; border-collapse: collapse; }
.backup-tabel td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.backup-tabel tr:first-child td { border-top: 0; }
.backup-tabel td:first-child { padding-left: 0; }
.backup-tabel td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

.kaart-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; font-size: 14px; margin-bottom: 4px; }
.kaart-info .lbl { display: block; }
@media (max-width: 600px) { .kaart-info { grid-template-columns: 1fr; } }

.notitie { background: var(--cream); border-radius: var(--r-sm); padding: 9px 12px; font-size: 13.5px; margin: 12px 0 0; color: var(--ink-soft); }

.kaart-acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.kaart-acties form { margin: 0; }

.klant-form { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-zacht); }
.klant-form.open { display: block; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .veld-rij { grid-template-columns: 1fr; } }

/* LCY-27: configpagina per installatie. Elk veld op een eigen rij, label boven
   het invoerveld, hint eronder. */
.config-rij { margin-bottom: 16px; }
.config-rij:last-child { margin-bottom: 0; }
.config-rij .lbl { display: block; margin-bottom: 5px; }
.config-hint { margin: 5px 0 0; }
/* SEC-45, geheimen-sectie: het bevestigingsveld krijgt lucht boven zich zodat
   het als eigen stap leest, en een lege statusregel telt niet mee in het ritme. */
form[data-geheim] .config-hint + label { display: block; margin-top: 14px; }
form[data-geheim] [data-geheim-melding]:empty { display: none; }
/* De toonknop woont ín het veld: rechts, verticaal gecentreerd, stil tot je
   hem nodig hebt. Het veld krijgt rechts ruimte zodat de tekst er nooit
   onderdoor schuift. */
.geheim-veld { position: relative; display: block; }
.geheim-veld [data-geheim-waarde] { width: 100%; padding-right: 40px; box-sizing: border-box; }
.geheim-oog {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-muted); cursor: pointer;
}
/* Eén oog tegelijk: het hidden-attribuut expliciet afdwingen (op een
   svg-element pakt de UA-regel niet overal), en het ingebouwde toon-oogje
   van Edge uitzetten zodat er niet twee naast elkaar staan. */
.geheim-oog svg[hidden] { display: none; }
.geheim-veld input::-ms-reveal, .geheim-veld input::-ms-clear { display: none; }
.geheim-oog:hover { color: var(--ink); background: var(--line-zacht); }
.geheim-oog:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
/* Wat lucht tussen de aftel-teller en het eerste veld (alleen op de config-
   pagina; de gedeelde .wachttijd op Updates blijft ongemoeid). */
.wachttijd-config { margin-bottom: 24px; }

/* Nette bevestigingsdialoog in de huisstijl i.p.v. de kale window.confirm()
   (zelfde <dialog>-aanpak als de VvE-app, aangestuurd door interactie.js). */
dialog.confirm-dialoog {
  margin: auto;
  border: none; border-radius: var(--r-sm); padding: 22px;
  width: min(92vw, 380px); background: var(--canvas); color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
dialog.confirm-dialoog::backdrop { background: rgba(28, 36, 51, .5); }
.confirm-dialoog-tekst { font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.confirm-dialoog-knoppen { display: flex; gap: 10px; justify-content: flex-end; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
input, textarea, select {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  margin-top: 4px; background: var(--canvas); transition: border-color .15s ease;
}
/* Keten-regel (Gedeelde Werkwijze): veldtekst nooit groter dan de tekst
   eromheen. 16px op aanraakschermen (voorkomt iOS-inzoomen bij focus),
   14.5px op desktop, in lijn met labels en lopende UI-tekst. */
@media (hover: hover) and (pointer: fine) {
  input, textarea, select { font-size: 14.5px; }
  /* Compactere selects/bestandsvelden ALLEEN op desktop; op touch erven ze de
     16px-basis, zodat iOS niet inzoomt bij focus. */
  .groep-regel select, .rij-acties select { font-size: 13.5px; }
  .groep-regel input[type="file"] { font-size: 13px; }
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--ochre); outline-offset: 1px; border-color: var(--ochre); }

/* ---------- knoppen ---------- */
/* Klein en recht: een knop is hier gereedschap naast een regel tekst, geen
   uitnodiging. Radius 3px in plaats van afgeronde pillen, want dat past bij
   de rechte lijnen van de rest. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  padding: 6px 11px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--btn-primair); color: #fff; }
.btn-primary:hover { background: var(--btn-primair-hover); }
.btn-green { background: var(--green); color: var(--knop-diep-tekst); }
.btn-green:hover { background: var(--btn-groen-hover); }
/* Blokkeren is onomkeerbaar genoeg om niet als vrolijk gevuld vlak te schreeuwen:
   omlijnd, en pas bij hover echt rood. Per rij blijft er zo hooguit een gevulde
   knop over, en dat is de knop die je normaal wilt. */
.btn-red { background: transparent; border-color: var(--red); color: var(--red); }
.btn-red:hover { background: var(--red); color: var(--knop-diep-tekst); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-muted); }
.btn-ghost-rood { background: var(--canvas); border-color: var(--line); color: var(--red); }
.btn-ghost-rood:hover { border-color: var(--red); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* Verwijderen is een kruisje rechtsboven, geen knop met een woord erop: het
   staat in elke rij en zou anders net zoveel gewicht krijgen als de rij zelf. */
.btn-kruis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; padding: 0;
  font-family: var(--font); font-size: 17px; line-height: 1;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-kruis:hover { background: var(--red-soft); color: var(--red); }
.btn-kruis:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

.leeg { border: 1px dashed var(--line); border-radius: var(--r); padding: 30px; text-align: center; color: var(--ink-muted); font-size: 14px; margin-top: 16px; }

/* OBS-16 (#190): paginaknoppen onderaan een lijst. Rustige cijfers; het oker-accent
   staat alleen op de huidige pagina, niet op de hele rij. */
.paginering { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 22px 0 4px; }
.paginering a, .paginering .huidig {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-soft); text-decoration: none;
}
.paginering a:hover { border-color: var(--ink-muted); color: var(--ink); }
.paginering .huidig { border-color: var(--ochre); color: var(--ink); background: var(--ochre-soft); }

/* Uitklapper voor bijzaak (noodupload, sha256, omgeving wijzigen): staat er
   wel, maar kost geen ruimte tot je hem nodig hebt. Native <details>, dus
   geen JavaScript en geen gedoe met de CSP. */
.vouw { border-bottom: 1px solid var(--line); }
.vouw > summary {
  list-style: none; cursor: pointer; padding: 13px 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.vouw > summary::-webkit-details-marker { display: none; }
.vouw > summary::before { content: "+"; font-family: var(--mono); color: var(--ink-muted); }
.vouw[open] > summary::before { content: "\2212"; }
.vouw > summary:hover { color: var(--ink); }
.vouw-inhoud { padding: 2px 0 18px; }

/* Actiegroepen op een rij: hoofdactie boven, gereedschap in benoemde vakken. */
.kaart-acties .rechts { margin-left: auto; }

.actie-groepen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-zacht);
}
@media (max-width: 980px) { .actie-groepen { grid-template-columns: 1fr; } }
.groep-label { display: block; margin-bottom: 7px; }
.groep-regel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.groep-regel select { flex: 1; min-width: 180px; width: auto; margin-top: 0; padding: 7px 10px; }
.groep-regel input[type="file"] { flex: 1; min-width: 180px; width: auto; margin-top: 0; padding: 6px 8px; background: var(--canvas); color: var(--ink-soft); }
.groep-regel input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 5px;
  padding: 5px 12px; margin-right: 10px; cursor: pointer;
}

.alert { padding: 10px 14px; border-radius: var(--r-sm); border-left: 2px solid currentColor; margin-bottom: 18px; font-size: 14px; font-weight: 500; }
.alert.error { background: var(--red-soft); color: var(--red); }
.alert.ok { background: var(--green-soft); color: var(--green); }

/* OBS-15: dode-mansknop. Boven de hele schil (zijbalk + inhoud), dus altijd
   zichtbaar ongeacht welk consolescherm openstaat, niet iets dat verdwijnt in
   de scroll van .inhoud zoals .alert hierboven. */
.hartslag-balk { background: var(--red); color: var(--knop-diep-tekst); text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 600; }

/* ---------- omgevingsrij (updatespagina) ----------
   Alles wat je van een installatie moet weten in drie regels: wie, hoe lang
   nog, en wat je ermee doet. Eerder was dit een kaart met een blok erin,
   waardoor twee installaties het hele scherm vulden. */
/* Hier zegt de streep links niet hoe het ervoor staat, maar om wat voor soort
   omgeving het gaat. Productie is de donkere: daar denk je twee keer na. */
.omgeving--productie { border-left-color: var(--ink); }
.omgeving--test { border-left-color: var(--ochre); }
.omgeving--demo { border-left-color: var(--demo-blauw); }
.omgeving-kop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.omgeving-versie { margin-left: auto; font-family: var(--font-kop); font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.omgeving-versie .groep-label { display: inline; margin: 0 2px 0 0; }
.omgeving-meta { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
/* Feedback Ibo 06-08: geen doorschuifrij meer. Links een vaste kolom met
   Uitrollen en daaronder Omgeving, rechts (bij een demo) de verversknop. */
.rij-acties { display: flex; gap: 10px 14px; align-items: flex-start; flex-wrap: wrap; margin: 11px 0 0; }
.rij-acties form { display: flex; gap: 7px; align-items: center; margin: 0; }
.rij-acties select { width: auto; min-width: 108px; margin-top: 0; padding: 5px 8px; }
.actie-kolom { display: flex; flex-direction: column; gap: 10px; }
.actie-regel { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
/* Vaste label- en lijstbreedte in de kolom: de keuzelijsten beginnen en
   eindigen op dezelfde lijn, dus de knoppen erachter staan exact onder
   elkaar (ontwerpregel: gestapelde knoppen lijnen uit). */
.rij-acties .groep-label { margin: 0; min-width: 76px; }
.actie-kolom select { width: 180px; flex: none; }
.rij-acties .demo-vers { margin-left: auto; }

/* Controlesom van een release: 64 tekens die je zelden nodig hebt. */
.hash { margin-top: 5px; }
.hash > summary { cursor: pointer; font-size: 12px; color: var(--ink-muted); }
.hash > code { font-size: 11.5px; color: var(--ink-muted); }

/* Wachttijd tot de eerstvolgende controle: een regel, geen blok. Het getal
   is wat je zoekt, dus dat krijgt gewicht en kleur; de rest is bijschrift.
   De eenheid staat er los naast, want "12:54" naast een tijdstip als 10:28
   leest anders als een klokstand.

   De klok staat rechts, aan het einde van de regel, en niet ervoor: een
   tikkende teller die de zin ernaast elke seconde opzij duwt is niet om aan
   te zien. Klok en eenheid hebben bovendien een vaste breedte met tabelcijfers,
   dus ook binnen de teller zelf schuift er niets meer.
   In de HTML staat de teller eerst (dat is het antwoord dat je zoekt, ook als
   je voorleest); flexbox zet hem daarna op zijn plek. */
.wachttijd { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin: 7px 0 0; }
.wachttijd-tekst { order: 1; margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.wachttijd-meter { order: 2; margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.wachttijd-kop { flex: none; }
.wachttijd-klok { display: inline-block; min-width: 3.4em; text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.wachttijd-eenheid { display: inline-block; min-width: 1.9em; font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }
/* Er komt iets aan: de aandacht mag hierheen. */
.wachttijd--wacht .wachttijd-kop, .wachttijd--wacht .wachttijd-klok { color: var(--ochre-dark); }
/* Klaar om te gebeuren. */
.wachttijd--nu .wachttijd-kop, .wachttijd--nu .wachttijd-klok { color: var(--green); }

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--cream); }
.login-card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r);
  padding: 38px; width: 100%; max-width: 390px;
}
.login-card h1 { margin: 0 0 4px; font-size: 24px; }
.login-card h1 b { color: var(--ochre-dark); font-weight: 700; }
.login-card form { margin-top: 20px; }
.login-card .btn { width: 100%; margin-top: 6px; }

/* ---------- klein scherm: zijbalk wordt topbar + hamburgermenu ---------- */
@media (max-width: 820px) {
  /* De zijbalk wordt een sticky topbar met het merk links en een hamburger
     rechts. De menugroep klapt eronder open/dicht via de checkbox (geen JS). */
  .schil { flex-direction: column; }
  .zijbalk {
    width: 100%; height: auto;
    position: sticky; top: 0; z-index: 20;
    flex-direction: column; gap: 0;
    padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .zijbalk-kop { padding: 6px 0; }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; border-radius: var(--r-sm);
    color: var(--ink); cursor: pointer;
  }
  .hamburger:hover { background: var(--hover-zacht); }
  .hamburger svg { width: 24px; height: 24px; }
  /* Focus-ring op de hamburger als de (onzichtbare) checkbox toetsenbord-focus heeft. */
  .menu-toggle:focus-visible ~ .zijbalk-kop .hamburger { outline: 2px solid var(--ochre); outline-offset: 2px; }
  .menu-label { display: none; }

  /* Menugroep: standaard dicht; open zodra de checkbox is aangevinkt. */
  .menu-groep { display: none; flex: none; padding: 4px 0 8px; }
  .menu-toggle:checked ~ .menu-groep { display: flex; }
  .zijbalk nav { flex-direction: column; }
  .zijbalk nav a { padding: 11px 0 11px 12px; border-left-width: 2px; }
  .zijbalk .onderin { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }

  /* Safe-area op de inhoud (notch links/rechts, home-indicator onder). */
  .inhoud {
    padding: 22px max(16px, env(safe-area-inset-right))
             max(48px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
}

/* ---------- klein scherm: knoppen, formulieren, typografie ---------- */
@media (max-width: 640px) {
  .pagina-kop h1 { font-size: 25px; }

  /* Kaart-acties: nette volle-breedte-stapel i.p.v. een bonte wrappende rij.
     Grote, gelijke touch-targets; geen "kleuren links-rechts" meer. */
  .kaart-acties { flex-direction: column; align-items: stretch; gap: 8px; }
  .kaart-acties > form,
  .kaart-acties > .btn,
  .kaart-acties > form > .btn { width: 100%; }
  .kaart-acties .rechts { margin-left: 0; }
  .btn { padding: 11px 16px; }

  /* De grote primaire uitrol-knop vol-breed (rustiger, groter raakvlak). */
  .inhoud > form > .btn-primary { display: flex; width: 100%; }

  /* Alles binnen een formulierregel wordt een volle-breedte gestapelde control:
     geen vaste breedtes of min-widths meer (ook niet de inline-styles), dus
     nooit horizontale overflow. */
  .groep-regel { flex-direction: column; align-items: stretch; gap: 10px; }
  .groep-regel select,
  .groep-regel input,
  .groep-regel .btn { width: 100% !important; min-width: 0 !important; flex: none !important; }

  /* De omgevingsrij blijft wel naast elkaar staan: keuzelijst rekt mee, knop
     houdt zijn maat. Stapelen zou hier drie regels per installatie kosten. */
  .rij-acties > .actie-kolom, .rij-acties > form { flex: 1 1 100%; }
  .rij-acties select { flex: 1; min-width: 0; width: auto; }
  .rij-acties .demo-vers { margin-left: 0; }
  /* De draaiende versie krijgt een eigen regel: naast een badge die ook een
     versienummer noemt, staan er anders twee nummers naast elkaar. */
  .omgeving-versie { margin-left: 0; flex: 1 1 100%; }

  /* Tabellen worden regels. Drie kolommen naast elkaar passen niet op een
     telefoon: de middelste (een domeinnaam) werd dan midden in een woord
     afgebroken. Nu staan tijd en uitkomst op de eerste regel en krijgt het
     domein de volle breedte eronder. */
  .backup-tabel tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    border-top: 1px solid var(--line); padding: 8px 0;
  }
  .backup-tabel tr:first-child { border-top: 0; }
  .backup-tabel td { display: block; border: 0; padding: 0; }
  .backup-tabel td:first-child { order: 1; }
  .backup-tabel td:last-child { order: 2; margin-left: auto; }
  .backup-tabel td:nth-child(2) { order: 3; flex: 1 1 100%; }

  /* Login/setup-kaart: zij-gutter, echte zichtbare hoogte (dvh), safe-area, en
     'safe center' zodat de kaart niet aan de bovenkant afgeknipt wordt bij een
     geopend toetsenbord of in liggende stand. */
  .login-body {
    display: flex; align-items: safe center; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .login-card { padding: 28px 22px; }
}

/* Touch-targets: op echte aanraakschermen minstens ~44px, betrouwbaar te tikken. */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .groep-regel select, .groep-regel input, .groep-regel input[type="file"],
  .rij-acties select { min-height: 44px; }
  .btn-kruis { width: 44px; height: 44px; }
  .vouw > summary { padding: 15px 0; }
  .backup-tabel td:last-child a { display: inline-block; padding: 11px 0; }
}

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

/* BIZ-6: honeypot op het demo-aanmeldformulier. Voor mensen onzichtbaar en
   onbereikbaar; bots vullen hem toch in en verraden zichzelf. */
.niet-invullen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* OBS-17: uitklapbare recente fouten in het telemetrie-blok. De summary is de
   vertrouwde "laatste fout"-regel; opengeklapt staan alle regels er monospaced
   onder, nieuwste onderaan (zelfde volgorde als het logbestand). */
.fout-details summary { cursor: pointer; }
.fout-details[open] summary { font-weight: 600; }
.fout-lijst { margin: 6px 0 0; padding-left: 18px; }
.fout-lijst li {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  line-height: 1.6; word-break: break-all;
}

/* Smal scherm: de uitrol-regel per installatie stapelt netjes in plaats
   van de knop buiten beeld te duwen (feedback Ibo 25-07, iOS). Label op
   een eigen regel, de versie-select op volle breedte, de knoppen eronder. */
@media (max-width: 560px) {
  .rij-acties form { flex-wrap: wrap; width: 100%; }
  .rij-acties .groep-label { flex: 1 1 100%; margin-bottom: 0; }
  /* Label op een eigen regel; de keuzelijst en de knop delen de regel
     eronder (feedback Ibo 31-07: de knop hoort naast de lijst, niet als
     derde regel eronder). De select rekt, de knop houdt zijn maat. */
  .rij-acties select { flex: 1 1 auto; width: auto; min-width: 0; }
  .rij-acties .btn { flex: 0 0 auto; }
}

/* LCY-23: afgesloten omgevingen ingeklapt onderaan de vlootlijst. */
.afgesloten-blok { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.afgesloten-blok > summary { cursor: pointer; font-weight: 600; color: var(--ink-muted); padding: 6px 0; list-style-position: inside; }
.afgesloten-blok > summary:hover { color: var(--ink); }
.afgesloten-blok[open] > summary { margin-bottom: 12px; }

/* =====================================================================
   Herontwerp 01-08 (wens Ibo): rustige kaartacties en modulerijen.
   ===================================================================== */

/* Het beheer-uitklapmenu op de installatiekaart: native details, geen JS
   nodig. Dichte staat is een gewone ghost-knop; open staat toont een paneel
   met een regel per actie en onderaan de rode zone achter een haarlijn. */
.acties-menu { position: relative; display: inline-block; }
.acties-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.acties-menu > summary::-webkit-details-marker { display: none; }
.menu-pijl { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); }
.acties-menu[open] .menu-pijl { transform: rotate(-135deg) translateY(-2px); }
.acties-paneel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 260px; padding: 6px;
  background: var(--kaart); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(10, 14, 24, .14);
  display: flex; flex-direction: column; gap: 2px;
}
.acties-paneel form { margin: 0; display: block; }
.menu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--r-sm);
  padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink);
  transition: background .15s ease;
}
.menu-item:hover { background: var(--hover-zacht); }
.menu-item.gevaarlijk { color: var(--red); }
.menu-item.gevaarlijk:hover { background: var(--red-soft); }
.menu-scheiding { border-top: 1px solid var(--line-zacht); margin: 4px 2px; }
.menu-tekst { display: block; padding: 6px 10px; }
@media (max-width: 700px) {
  .acties-paneel { position: static; box-shadow: none; border: 0; border-top: 1px solid var(--line-zacht); border-radius: 0; padding: 6px 0 0; margin-top: 6px; min-width: 0; }
  .acties-menu { display: block; }
}

/* Modulescherm: een rij per module, label links, schakelaar rechts. */
.module-lijst { padding: 4px 0; }
.module-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line-zacht);
}
.module-rij:hover { background: var(--hover-zacht); }
.module-rij:last-child { border-bottom: 0; }
.module-rij input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ochre); flex-shrink: 0; cursor: pointer; }
.module-naam { display: flex; flex-direction: column; gap: 2px; }
.module-hint { font-size: 12.5px; color: var(--ink-muted); font-weight: 400; }
.module-sectie { margin-top: 10px; padding: 10px 14px 0; border-top: 1px solid var(--line); }
.module-sectie .menu-label { display: block; margin-bottom: 2px; }
.module-sectie .module-rij { padding-left: 0; padding-right: 0; }
.module-rij-ai > .module-naam { color: var(--ochre-dark); font-weight: 600; }
.module-opslaan { margin: 16px 0; }

/* =====================================================================
   Donkere modus, in de kleuren van Ibo's sprintdashboard. Twee wegen naar
   hetzelfde blok: het systeem (prefers-color-scheme) als er geen keuze is
   gemaakt, en de expliciete keuze via data-thema, die altijd wint.
   ===================================================================== */
:root[data-thema="donker"] {
  --ink: #eef1f6; --ink-soft: #b3bdcd; --ink-muted: #8d99ac;
  --ochre: #e0a54a; --ochre-dark: #e8b768; --ochre-soft: #2e2716;
  --cream: #10151e; --canvas: #141a25; --line: #2b3547; --line-zacht: #232c3b;
  --green: #57c093; --green-soft: #16302a;
  --amber: #d9a13f; --amber-soft: #2f2716;
  --red: #e07a72; --red-soft: #33201e;
  --btn-primair: #3b4a68; --btn-primair-hover: #46587c;
  --btn-groen-hover: #2f8f68; --hover-zacht: #232c3b;
  --kaart: #1c2432; --knop-diep-tekst: #10151e;
  --demo-blauw: #8fb4e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --ink: #eef1f6; --ink-soft: #b3bdcd; --ink-muted: #8d99ac;
    --ochre: #e0a54a; --ochre-dark: #e8b768; --ochre-soft: #2e2716;
    --cream: #10151e; --canvas: #141a25; --line: #2b3547; --line-zacht: #232c3b;
    --green: #57c093; --green-soft: #16302a;
    --amber: #d9a13f; --amber-soft: #2f2716;
    --red: #e07a72; --red-soft: #33201e;
    --btn-primair: #3b4a68; --btn-primair-hover: #46587c;
    --btn-groen-hover: #2f8f68; --hover-zacht: #232c3b;
    --kaart: #1c2432; --knop-diep-tekst: #10151e;
    --demo-blauw: #8fb4e6;
  }
}

/* De themaknop onderin de zijbalk: toont wat je KRIJGT als je klikt. */
.thema-knop {
  margin: 14px 16px; padding: 7px 12px; width: calc(100% - 32px);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer;
  transition: background .15s ease;
}
.thema-knop:hover { background: var(--hover-zacht); }
.thema-knop .als-donker { display: inline; }
.thema-knop .als-licht { display: none; }
:root[data-thema="donker"] .thema-knop .als-donker { display: none; }
:root[data-thema="donker"] .thema-knop .als-licht { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .thema-knop .als-donker { display: none; }
  :root:not([data-thema="licht"]) .thema-knop .als-licht { display: inline; }
}

/* Designpas 01-08: twee muntwerelden naast elkaar op de AI-pagina. Elke groep
   draagt zijn munt in de kop, zodat een euroteken naast een dollarteken geen
   vraag meer oproept. Onder elkaar op een smal scherm. */
.munt-groepen { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 18px; align-items: start; }
.munt-groep > .menu-label { display: block; margin-bottom: 6px; }
.munt-groep + .munt-groep { padding-left: 18px; border-left: 1px solid var(--line); }
@media (max-width: 860px) {
  .munt-groepen { grid-template-columns: 1fr; }
  .munt-groep + .munt-groep { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--line); }
}