/* Evonity Retrofits — gedeelde stijl (design tokens + basiscomponenten).
   Sober en zakelijk: neutraal grijs + één accentkleur (teal, spaarzaam), 1 px-randen,
   radius 4/6 px, systeemfont, 4/8 px-raster. Staalkaart: /stijl.html.
   Kleur zit alleen in kleine stippen; tekst en vlakken blijven neutraal.
   Auteur: Boutayniout I. */

:root {
  /* Merk — accent alleen voor: primaire knop, actieve navigatie-onderlijn, focusring, tekstlinks */
  --accent: #00a19a;
  --accent-donker: #00857f;
  /* Gevulde knoppen met witte tekst: het donkere accent (4,5:1 met wit, WCAG AA); hover/actief nog donkerder. */
  --accent-knop: var(--accent-donker);
  --accent-knop-donker: #006b66;
  --accent-licht: #e6f6f5;
  --inkt: #111827;
  --tekst-sterk: var(--inkt);

  /* Neutraal palet */
  --grijs-50: #f9fafb;
  --grijs-100: #f3f4f6;
  --grijs-200: #e5e7eb;
  --grijs-300: #d1d5db;
  --grijs-400: #9ca3af;
  --grijs-500: #6b7280;
  --grijs-600: #4b5563;
  --grijs-700: #374151;
  --grijs-800: #1f2937;
  --grijs-900: #111827;

  --achtergrond: #f6f7f8;
  --vlak: #ffffff;
  --rand: var(--grijs-200);
  --rand-sterk: var(--grijs-300);
  --tekst: #1f2328;
  --tekst-zacht: var(--grijs-500);

  /* Statuskleuren (SPEC §7) — zes tinten, geen paars/roze/cyaan. Alleen voor stippen. */
  --st-grijs: #6b7280;
  --st-blauw: #2563eb;
  --st-amber: #b45309;
  --st-oranje: #c2410c;
  --st-groen: #15803d;
  --st-rood: #b91c1c;
  --st-lei: #475569;

  --st-nieuw: var(--st-grijs);
  --st-gepland: var(--st-blauw);
  --st-bezig: var(--st-amber);
  --st-wacht-evonity: var(--st-lei);   /* wachten = neutraal; rood alleen voor Vertraagd/NOK */
  --st-wacht-cpo: var(--st-lei);
  --st-uitgevoerd: var(--st-groen);
  --st-nagekeken: var(--st-groen);
  --st-geannuleerd: #9ca3af;
  --st-vervangen: #4b5563;
  --st-correctie: var(--st-oranje);   /* r1-55: teruggestuurd voor correctie (eigen tint, geen wachtstatus) */
  --st-vertraagd: var(--st-rood);
  --st-backend: var(--st-lei);
  /* Stapresultaten en nakijken */
  --st-ok: var(--st-groen);
  --st-herstel: var(--st-amber);
  --st-melding: var(--st-blauw);
  --st-nok: var(--st-rood);
  --st-overgeslagen: #9ca3af;
  --st-te-nakijken: var(--st-amber);
  --st-goedgekeurd: var(--st-groen);
  --st-neutraal: var(--grijs-500);

  /* Signaal */
  --ok: var(--st-groen);
  --waarschuwing: var(--st-amber);
  --fout: var(--st-rood);
  --fout-donker: #991b1b;
  --fout-licht: #fef2f2;
  --fout-rand: #fecaca;
  --fout-tekst: #7f1d1d;
  --waarschuwing-licht: #fffbeb;
  --waarschuwing-rand: #fde68a;
  --waarschuwing-tekst: #78350f;
  --ok-licht: #f0fdf4;
  --ok-rand: #bbf7d0;
  --ok-tekst: #14532d;
  --info: var(--st-blauw);

  /* Typografie — schaal 12 / 13 / 14 / 16 / 20 / 24 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  /* Ruimte (4/8-raster) */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r5: 24px;
  --r6: 32px;

  /* Vorm */
  --radius: 4px;
  --radius-groot: 6px;
  --schaduw: none; /* vlakken hebben geen schaduw; alleen zwevende lagen */
  --schaduw-dialoog: 0 8px 24px rgba(17, 24, 39, 0.14), 0 1px 3px rgba(17, 24, 39, 0.08);

  /* Maten */
  --kopbalk-hoogte: 52px;
  --hoogte-ctl: 32px;          /* knoppen, invoer, select op desktop */
  --hoogte-ctl-klein: 28px;
  --hoogte-ctl-aanraak: 44px;  /* pointer: coarse */
  --tik: 48px;                 /* minimaal tikvlak op de tablet */
  --knop-hoogte-tablet: 56px;
  --invoer-hoogte-tablet: 48px;
  --lijst-rij: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Geen dubbeltik-zoom op knoppen en velden (knijpzoom blijft werken). */
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

/* Koppen: 20 / 16 / 14 / 13. Nooit hoofdletters of letterspatiëring. */
h1, h2, h3, h4 { margin: 0 0 var(--r2); font-weight: 600; line-height: 1.3; color: var(--inkt); text-transform: none; letter-spacing: 0; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-sm); color: var(--grijs-700); }
p { margin: 0 0 var(--r2); }
a { color: var(--accent-donker); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .zacht { color: var(--tekst-zacht); }
.klein { font-size: var(--fs-xs); }
.mono { font-family: var(--font-mono); font-size: 0.92em; } /* alleen technische sleutels (admin-sleutel, login) */
.id { font-family: var(--font); font-variant-numeric: tabular-nums; } /* ordernummers, stap-ID's, codes */
.getallen, .tabnum { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--rand); margin: var(--r4) 0; }
img { max-width: 100%; }

/* Echte overline, spaarzaam (bv. sectielabel in een zijbalk). */
.overline { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grijs-500); }

/* Ordernummer: gewone letter, vaste cijferbreedte, geen teal. */
.ordernr { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--inkt); white-space: nowrap; }
a.ordernr { color: var(--inkt); }
a.ordernr:hover { color: var(--accent-donker); text-decoration: underline; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- Kopbalk ------------------------------------------------------------- */

.kopbalk {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--r4);
  height: var(--kopbalk-hoogte);
  padding: 0 var(--r4);
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.kopbalk .merk { flex: none; display: flex; align-items: center; gap: var(--r3); color: var(--inkt); text-decoration: none; }
.kopbalk .merk:hover { text-decoration: none; }
.kopbalk .merk img { height: 24px; width: auto; display: block; }
.kopbalk .merk .app-naam {
  font-size: var(--fs-md); font-weight: 600; color: var(--inkt); white-space: nowrap; line-height: 20px;
  padding-left: var(--r3); border-left: 1px solid var(--rand-sterk);
}
.kopbalk .titel { min-width: 0; font-size: var(--fs-md); color: var(--tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Navigatie: tekst, actief = inkt + 2 px accentlijn op de onderrand van de kopbalk. */
.kopbalk nav { display: flex; align-self: stretch; gap: var(--r1); margin-left: var(--r2); min-width: 0; }
.kopbalk nav a {
  position: relative; display: flex; align-items: center;
  padding: 0 10px; color: var(--grijs-600);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.kopbalk nav a.actief, .kopbalk nav a[aria-current="page"] { color: var(--inkt); font-weight: 600; }
.kopbalk nav a.actief::after, .kopbalk nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent);
}
.kopbalk .rechts { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: var(--r3); }
.kopbalk .gebruiker { min-width: 0; font-size: var(--fs-sm); color: var(--grijs-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopbalk .gebruiker .rol { color: var(--tekst-zacht); }

@media (hover: hover) {
  .kopbalk nav a:hover { color: var(--inkt); text-decoration: none; }
}

@media (max-width: 720px) {
  .kopbalk { gap: var(--r2); padding: 0 var(--r3); }
  .kopbalk .merk .app-naam, .kopbalk .gebruiker .rol { display: none; }
}
/* Smal: navigatie op een eigen tweede rij, volle breedte, horizontaal scrollbaar. */
@media (max-width: 600px) {
  .kopbalk:has(nav) { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 0; }
  .kopbalk:has(nav) > .merk, .kopbalk:has(nav) > .rechts { height: var(--kopbalk-hoogte); }
  .kopbalk:has(nav) nav {
    order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--r3)); padding: 0 var(--r1);
    height: 44px; border-top: 1px solid var(--rand); overflow-x: auto; scrollbar-width: none;
  }
  .kopbalk:has(nav) nav a { padding: 0 12px; }
  .kopbalk:has(nav) nav a.actief::after, .kopbalk:has(nav) nav a[aria-current="page"]::after { left: 12px; right: 12px; }
  .kopbalk:has(nav) nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
  .kopbalk .gebruiker { display: none; }
  /* r1-56 gebruikerssimulatie: een kopbalk zonder navigatie (portalen) met paginatitel liep op een gsm van 390 px
     509 px breed (Uitloggen buiten beeld). De titel staat ook als kop op de pagina; Uitloggen wordt een icoon (de
     knop houdt zijn title als naam). */
  .kopbalk:not(:has(nav)) .titel { display: none; }
  .kopbalk:not(:has(nav)) [data-uitloggen] > span { display: none; }
}
/* r1-106 (integratie ronde 2): de knop 'Mijn meldingen' (A8, meldingen-ik.js) staat op elke pagina met een kopbalk. Met
   hem erbij liep de kopbalk buiten beeld: Dispatch op 390 px 39 px (die laadde geen compacte regels), het
   onderaannemersportaal op 390 px 7 px, het CPO-portaal op 640 px 6 px. De compacte regels van kantoor.css/portaal.css
   (r1-93, r1-97) gelden nu voor elke kopbalk; op een smalle telefoon zonder navigatie alleen het beeldmerk, zoals
   Management (kantoor.css). tests/test_r193_dispatch_e2e.py, test_r156_gebruikers_e2e.py, test_r191_css_e2e.py */
@media (max-width: 720px) {
  .kopbalk .rechts { gap: var(--r2); }
}
@media (max-width: 600px) {
  .kopbalk .taalkiezer .knop { min-width: 0 !important; padding: 0 6px; }
}
@media (max-width: 420px) {
  .kopbalk .taalkiezer .knop { padding: 0 4px; }
  .kopbalk:not(:has(nav)) .merk img { width: 22px; height: 24px; object-fit: cover; object-position: left center; }
}
/* Veilige zones (notch, afgeronde hoeken). Alleen actief op pagina's met viewport-fit=cover;
   elders is env() 0 en verandert er niets. */
.kopbalk {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--r4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--r4), env(safe-area-inset-right, 0px));
  height: calc(var(--kopbalk-hoogte) + env(safe-area-inset-top, 0px));
}
@media (max-width: 720px) {
  .kopbalk {
    padding-left: max(var(--r3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--r3), env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 600px) {
  .kopbalk:has(nav) { height: auto; padding-top: env(safe-area-inset-top, 0px); }
}
/* Uitloggen en andere knoppen in de kopbalk: volwaardig tikvlak. */
@media (pointer: coarse) {
  .kopbalk .knop { min-height: var(--hoogte-ctl-aanraak); }
}

/* --- Layout ---------------------------------------------------------------- */

.pagina { max-width: 1280px; margin: 0 auto; padding: var(--r5) var(--r4); }
.pagina-smal { max-width: 720px; margin: 0 auto; padding: var(--r5) var(--r4); }
.pagina, .pagina-smal {
  padding-left: max(var(--r4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--r4), env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--r5) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 600px) {
  .pagina, .pagina-smal { padding-top: var(--r4); }
}
.pagina-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); margin-bottom: var(--r4); flex-wrap: wrap; }
.pagina-kop h1 { margin: 0; }
.pagina-kop .sub { font-size: var(--fs-sm); color: var(--tekst-zacht); margin-top: 2px; }
.rij { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; }
.rij-tussen { display: flex; gap: var(--r2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.kolom { display: flex; flex-direction: column; gap: var(--r2); }
.raster { display: grid; gap: var(--r3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.groei { flex: 1 1 auto; min-width: 0; }
.verborgen, [hidden] { display: none !important; }

/* --- Vlakken --------------------------------------------------------------- */

.kaart, .paneel {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-groot);
}
.kaart { padding: var(--r4); }
.paneel > .paneel-kop {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r2);
  min-height: 44px; padding: 10px var(--r4); border-bottom: 1px solid var(--rand);
}
.paneel > .paneel-kop h2, .paneel > .paneel-kop h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.paneel-kop .teller, .paneel-kop .zacht { font-size: var(--fs-sm); font-weight: 400; color: var(--tekst-zacht); margin-left: 6px; font-variant-numeric: tabular-nums; }
.paneel > .paneel-inhoud { padding: var(--r4); }
.paneel > .tabel-wrap, .paneel > .paneel-tabel { border: 0; border-radius: 0 0 var(--radius-groot) var(--radius-groot); }

/* Plankop / sectiekop (sentence case). */
.plankop { font-size: var(--fs-sm); font-weight: 600; color: var(--grijs-700); text-transform: none; letter-spacing: 0; }

/* Veldgroep (fieldset) */
.veldgroep { border: 0; padding: 0; margin: 0 0 var(--r4); min-width: 0; }
.veldgroep legend { padding: 0; margin-bottom: var(--r2); font-size: var(--fs-sm); font-weight: 600; color: var(--grijs-700); text-transform: none; letter-spacing: 0; }

/* Kengetal: waarde + label. Niet als rij gelijke tegels gebruiken; liever inline of in een tabel. */
.kengetal { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: var(--r3) var(--r4); }
.kengetal .label { font-size: var(--fs-xs); color: var(--tekst-zacht); text-transform: none; letter-spacing: 0; }
.kengetal .waarde { font-size: var(--fs-xl); font-weight: 600; color: var(--inkt); font-variant-numeric: tabular-nums; }

/* Kengetallen als één strook met scheidingslijnen (in plaats van losse tegels). */
.kerncijfers { display: flex; flex-wrap: wrap; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot); }
.kerncijfers > * { flex: 1 1 140px; padding: var(--r3) var(--r4); border-right: 1px solid var(--rand); min-width: 0; color: inherit; text-decoration: none; }
.kerncijfers > *:last-child { border-right: 0; }
.kerncijfers .waarde { display: block; font-size: var(--fs-xl); font-weight: 600; color: var(--inkt); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kerncijfers .label { display: block; font-size: var(--fs-xs); color: var(--tekst-zacht); margin-top: 2px; }
@media (hover: hover) { .kerncijfers > a:hover { background: var(--grijs-50); text-decoration: none; } }

/* Definitielijst: label links, waarde rechts; onder 600 px onder elkaar. */
.dl { display: grid; grid-template-columns: 160px 1fr; margin: 0; }
.dl > dt, .dl > dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rand); min-height: 40px; }
.dl > dt { font-size: var(--fs-sm); color: var(--grijs-600); padding-right: var(--r3); }
.dl > dd { font-size: var(--fs-md); color: var(--inkt); min-width: 0; overflow-wrap: anywhere; }
.dl > dt:last-of-type, .dl > dd:last-of-type { border-bottom: 0; }
.dl.groot > dt { font-size: var(--fs-md); }
.dl.groot > dd { font-size: var(--fs-lg); }
@media (max-width: 600px) {
  .dl { grid-template-columns: 1fr; }
  .dl > dt { border-bottom: 0; padding-bottom: 0; min-height: 0; }
  .dl > dd { padding-top: 2px; }
}

/* Lege toestand: één korte zin, links uitgelijnd in panelen en tabellen. */
.leeg { padding: var(--r3) var(--r4); text-align: left; color: var(--tekst-zacht); font-size: var(--fs-sm); }
.leeg a, .leeg .knop-link { margin-left: 6px; }
.leeg.midden, .leeg-pagina { padding: var(--r6) var(--r4); text-align: center; }
.tabel td.leeg, .tabel .leeg-rij td { padding: var(--r3) var(--r4); text-align: left; color: var(--tekst-zacht); }

/* Laadtoestand */
.laden { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--grijs-300); border-top-color: var(--grijs-600); border-radius: 50%; animation: draai 0.7s linear infinite; vertical-align: middle; }
.laden-vlak { display: flex; align-items: center; gap: var(--r2); padding: var(--r3) var(--r4); color: var(--tekst-zacht); font-size: var(--fs-sm); }
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .laden { animation-duration: 1.6s; } }

/* --- Knoppen --------------------------------------------------------------- */
/* Vier soorten: .knop (secundair), .knop-primair, .knop-plat (stil), gevaar
   (.knop-gevaar-zacht / -plat als trigger; volle .knop-gevaar alleen als
   bevestigknop in een dialoog). Alleen klassen, zodat varianten winnen. */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: auto; min-height: var(--hoogte-ctl); padding: 0 12px;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
  color: var(--grijs-800); background: var(--vlak);
  border: 1px solid var(--rand-sterk); border-radius: var(--radius);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  /* Geen kleurovergang: een knop die aan/uit gaat, springt meteen naar zijn toestand. */
  -webkit-tap-highlight-color: transparent;
}
.knop:hover { text-decoration: none; }
.knop svg { width: 16px; height: 16px; flex: none; }

.knop-primair, .knop-ok { color: #fff; background: var(--accent-knop); border-color: var(--accent-knop); }
.knop-gevaar { color: #fff; background: var(--fout); border-color: var(--fout); }
.knop-gevaar-zacht { color: var(--fout); background: var(--vlak); border-color: var(--rand-sterk); }
.knop-plat, .knop-stil { background: transparent; border-color: transparent; color: var(--grijs-700); }
.knop-gevaar-plat { background: transparent; border-color: transparent; color: var(--fout); }
.knop-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--accent-donker); cursor: pointer; }
/* Uitgefaseerd: vroeger oranje gevuld; nu gewoon secundair. */
.knop-waarschuwing { color: var(--grijs-800); background: var(--vlak); border-color: var(--rand-sterk); }

@media (hover: hover) {
  .knop:hover { background: var(--grijs-50); border-color: var(--grijs-400); }
  .knop-primair:hover, .knop-ok:hover { background: var(--accent-knop-donker); border-color: var(--accent-knop-donker); }
  .knop-gevaar:hover { background: var(--fout-donker); border-color: var(--fout-donker); }
  .knop-gevaar-zacht:hover { background: var(--fout-licht); border-color: var(--fout-rand); }
  .knop-plat:hover, .knop-stil:hover { background: var(--grijs-100); border-color: transparent; }
  .knop-gevaar-plat:hover { background: var(--fout-licht); border-color: transparent; }
  .knop-link:hover { text-decoration: underline; background: none; }
}
/* Tikfeedback (ook met muis tijdens het klikken). */
.knop:active { background: var(--grijs-100); }
.knop-primair:active, .knop-ok:active { background: var(--accent-knop-donker); }
.knop-gevaar:active { background: var(--fout-donker); }
.knop-gevaar-zacht:active, .knop-gevaar-plat:active { background: var(--fout-licht); }
.knop-link:active { background: none; }

/* Uitgeschakeld: neutraal grijs, geen doorschijnend teal/groen. */
.knop:disabled, .knop[aria-disabled="true"],
.knop-primair:disabled, .knop-ok:disabled, .knop-gevaar:disabled, .knop-gevaar-zacht:disabled {
  background: var(--grijs-100); border-color: var(--rand); color: var(--grijs-400);
  opacity: 1; cursor: not-allowed;
}
.knop-plat:disabled, .knop-stil:disabled, .knop-gevaar-plat:disabled { background: transparent; border-color: transparent; color: var(--grijs-400); }
.knop-link:disabled { background: none; color: var(--grijs-400); }

/* Groottes */
.knop-klein { min-height: var(--hoogte-ctl-klein); padding: 0 10px; font-size: var(--fs-xs); }
.knop-groot { min-height: var(--tik); padding: 0 var(--r5); font-size: var(--fs-lg); }
.knop-tablet { min-height: var(--knop-hoogte-tablet); padding: 0 var(--r5); font-size: 17px; font-weight: 600; }
.knop-blok { display: flex; width: 100%; }
.knop-icoon { width: var(--hoogte-ctl); padding: 0; }

/* Knopgroep: aaneengesloten knoppen (bv. vorige / deze week / volgende). */
.knopgroep { display: inline-flex; vertical-align: middle; }
.knopgroep > .knop { border-radius: 0; }
.knopgroep > .knop + .knop { margin-left: -1px; }
.knopgroep > .knop:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.knopgroep > .knop:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.knopgroep > .knop:only-child { border-radius: var(--radius); }
.knopgroep > .knop:focus-visible { position: relative; z-index: 1; }

/* Segment: keuze uit een paar opties (tabs in een vak). Actief = wit vlak met rand. */
.segment { display: inline-flex; padding: 2px; gap: 2px; background: var(--grijs-100); border: 1px solid var(--rand); border-radius: var(--radius-groot); }
.segment > button, .segment > a, .segment > label {
  display: inline-flex; align-items: center; justify-content: center; margin: 0;
  min-height: calc(var(--hoogte-ctl) - 6px); padding: 0 12px;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--grijs-600);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.segment > .actief, .segment > [aria-pressed="true"], .segment > [aria-selected="true"], .segment > :has(input:checked) {
  color: var(--inkt); background: var(--vlak); border-color: var(--rand);
}
.segment input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) { .segment > :hover { color: var(--inkt); text-decoration: none; } }

/* --- Formulieren ------------------------------------------------------------ */
/* Labels boven de velden, 13 px/500, sentence case. */

label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--grijs-700); margin-bottom: var(--r1); text-transform: none; letter-spacing: 0; }
.veld { margin-bottom: var(--r3); min-width: 0; }
.veld .hulp { font-size: var(--fs-xs); color: var(--tekst-zacht); margin-top: var(--r1); }
.veld .foutmelding { font-size: var(--fs-xs); color: var(--fout); margin-top: var(--r1); }
.veld .verplicht { color: var(--grijs-500); font-weight: 400; }
.velden-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r3); }
.velden-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--r3); }
@media (max-width: 600px) { .velden-2, .velden-3 { grid-template-columns: 1fr; } }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="url"], input[type="week"], input:not([type]),
select, textarea {
  display: block; width: 100%;
  min-height: var(--hoogte-ctl); padding: 0 10px;
  font: inherit; font-size: var(--fs-md); line-height: 1.3; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: var(--radius);
}
select { padding-right: 28px; }
textarea { min-height: 72px; padding: 6px 10px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--grijs-400); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-licht); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fout); }
input:disabled, select:disabled, textarea:disabled { background: var(--grijs-100); color: var(--tekst-zacht); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); vertical-align: middle; }
.vinkje { display: inline-flex; align-items: center; gap: var(--r2); font-weight: 400; color: var(--tekst); cursor: pointer; }

/* Invoer met eenheid ("Nm", "%", "V") binnen dezelfde rand. */
.invoer-eenheid { display: flex; align-items: stretch; width: 100%; background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: var(--radius); }
.invoer-eenheid > input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: var(--radius) 0 0 var(--radius); box-shadow: none !important; }
.invoer-eenheid > .eenheid { display: flex; align-items: center; padding: 0 10px; font-size: var(--fs-sm); color: var(--grijs-500); background: var(--grijs-50); border-left: 1px solid var(--rand); border-radius: 0 var(--radius) var(--radius) 0; white-space: nowrap; }
.invoer-eenheid:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-licht); }

/* Datumveld: native kalender, maar de tekst in dezelfde notatie als de tabellen (dd-mm-jjjj). */
.datumveld { position: relative; display: block; min-width: 0; }
.datumveld > input[type="date"] { color: transparent; }
.datumveld > input[type="date"]::-webkit-datetime-edit { opacity: 0; }
.datumveld-tekst { position: absolute; top: 0; bottom: 0; left: 11px; display: flex; align-items: center; pointer-events: none;
  color: var(--tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }
.datumveld-tekst.leeg { color: var(--grijs-400); }
.datumveld > input:disabled + .datumveld-tekst { color: var(--tekst-zacht); }
.datumveld:has(> .datum-spring) { display: inline-block; }

/* Bestandskeuze: verborgen native veld + gewone knop + bestandsnaam. */
.bestandskeuze { display: flex; align-items: center; gap: var(--r2); min-width: 0; }
.bestandskeuze input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bestandskeuze .bestandsnaam { min-width: 0; font-size: var(--fs-sm); color: var(--tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bestandskeuze input[type="file"]:focus-visible + .knop { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Aanraakscherm: grotere tikvlakken, 16 px tekst in knoppen en velden (iOS zoomt anders in
   bij focus). Kleine knoppen blijven compacter, maar met minstens 40 px tikhoogte. */
@media (pointer: coarse) {
  .knop { min-height: var(--hoogte-ctl-aanraak); font-size: var(--fs-lg); }
  .knop-klein { min-height: var(--hoogte-ctl-aanraak); font-size: var(--fs-md); }
  .knop-groot { min-height: var(--tik); }
  .knop-tablet { min-height: var(--knop-hoogte-tablet); font-size: 17px; }
  .knop-icoon { width: var(--hoogte-ctl-aanraak); }
  .knop-link { min-height: 0; font-size: inherit; }
  .segment > button, .segment > a, .segment > label { min-height: 40px; font-size: var(--fs-md); }
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="time"], input[type="search"], input[type="url"], input[type="week"], input:not([type]), select {
    min-height: var(--hoogte-ctl-aanraak); font-size: var(--fs-lg);
  }
  textarea { font-size: var(--fs-lg); }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .vinkje { min-height: var(--hoogte-ctl-aanraak); }
  .menu-item { min-height: 44px; font-size: var(--fs-md); }
  .tabs button, .tabs a { display: inline-flex; align-items: center; min-height: var(--hoogte-ctl-aanraak); }
}

/* --- Tabellen ---------------------------------------------------------------- */

.tabel-wrap { overflow-x: auto; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot); }
table.tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabel th, .tabel td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tabel th {
  position: sticky; top: 0; z-index: 1;
  font-size: var(--fs-xs); font-weight: 600; color: var(--grijs-600);
  text-transform: none; letter-spacing: 0;
  background: var(--grijs-50); white-space: nowrap;
}
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr.klikbaar { cursor: pointer; }
.tabel tbody tr.geselecteerd, .tabel tbody tr.geselecteerd:hover { background: var(--accent-licht); }
.tabel td.getal, .tabel th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel td.smal, .tabel th.smal { width: 1%; white-space: nowrap; }
.tabel td.acties { width: 1%; white-space: nowrap; text-align: right; }
.tabel td.acties .knop { margin-left: var(--r1); }
.tabel .sub { display: block; font-size: var(--fs-xs); color: var(--tekst-zacht); }
.tabel.compact th, .tabel.compact td { padding: 6px 10px; }
@media (hover: hover) {
  .tabel tbody tr:hover { background: var(--grijs-50); }
}
/* Brede tabellen scrollen binnen hun kader, nooit de hele pagina. */
.tabel-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
/* r1-91: het scrollvak is de containing block van absoluut geplaatste kinderen. Een .sr-only-label in de laatste
   kolomkop (bv. 'Verwijderen') hing anders aan de pagina en maakte die tussen 721 en 1099 px tot 1100 px breed. */
.tabel-wrap { position: relative; }

/* Opt-in: .tabel.stapel toont elke rij op een smal scherm als een blok met "label  waarde"
   per regel. De labels komen uit de thead (common.js zet data-label op elke cel).
   .stapel-kop = de cel die als titel van het blok dient (geen label). */
@media (max-width: 600px) {
  .tabel.stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel.stapel, .tabel.stapel tbody, .tabel.stapel tr { display: block; width: auto; }
  .tabel.stapel tbody tr { display: flex; flex-direction: column; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--rand); }
  .tabel.stapel tbody tr > .stapel-kop { order: -1; }
  .tabel.stapel tbody tr:last-child { border-bottom: 0; }
  .tabel.stapel td, .tabel.stapel tbody th {
    display: block; position: relative; width: auto; min-width: 0;
    padding: 3px 0 3px min(40%, 144px); border: 0;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  .tabel.stapel td::before, .tabel.stapel tbody th::before {
    content: attr(data-label); position: absolute; left: 0; top: 4px; width: calc(min(40%, 144px) - 12px);
    font-size: var(--fs-xs); font-weight: 400; color: var(--tekst-zacht); line-height: 1.45; overflow-wrap: normal;
  }
  .tabel.stapel td:not([data-label])::before, .tabel.stapel td[data-label=""]::before,
  .tabel.stapel .stapel-kop::before, .tabel.stapel td.acties::before { content: none; }
  .tabel.stapel td:not([data-label]), .tabel.stapel td[data-label=""], .tabel.stapel .stapel-kop { padding-left: 0; }
  .tabel.stapel .stapel-kop { padding-bottom: var(--r1); font-size: var(--fs-md); color: var(--inkt); }
  .tabel.stapel td.getal, .tabel.stapel th.getal { text-align: left; }
  .tabel.stapel td.acties { width: auto; padding: var(--r2) 0 0; text-align: left; }
  .tabel.stapel td.acties .knop { margin-left: 0; }
  .tabel.stapel .leeg-rij td, .tabel.stapel td.leeg { padding: var(--r1) 0; }
  .tabel.stapel .leeg-rij td::before { content: none; }
  /* Lege cel: geen los label dat over de volgende regel valt (r1-56 gebruikerssimulatie, portaal op gsm). */
  .tabel.stapel td:empty { display: none; }
}
/* r1-91: management en portalen (kantoor.css verbergt de kolomkoppen van elke .stapel al tot 720 px) tonen tussen 601
   en 720 px dezelfde gestapelde rijen. Zonder dit stond de tabel daar zonder koppen en liep ze de pagina uit (OA-portaal
   orders en planning tot 963 px breed; CPO-portaal: kolom Planning afgesneden). Tabellen met een eigen .stapel-kaart
   (kantoor.css) niet; Beheer (admin.css) houdt zijn eigen grens van 600 px. */
@media (min-width: 601px) and (max-width: 720px) {
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)),
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) tbody,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) tr {
    display: block; width: auto; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) tbody tr {
    display: flex; flex-direction: column; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--rand); }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) tbody tr > .stapel-kop {
    order: -1; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) tbody tr:last-child {
    border-bottom: 0; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) tbody th {
    display: block; position: relative; width: auto; min-width: 0; padding: 3px 0 3px min(40%, 144px); border: 0;
    text-align: left; white-space: normal; overflow-wrap: anywhere; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td::before,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) tbody th::before {
    content: attr(data-label); position: absolute; left: 0; top: 4px; width: calc(min(40%, 144px) - 12px);
    font-size: var(--fs-xs); font-weight: 400; color: var(--tekst-zacht); line-height: 1.45; overflow-wrap: normal; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td:not([data-label])::before,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td[data-label=""]::before,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) .stapel-kop::before,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td.acties::before,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) .leeg-rij td::before {
    content: none; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td:not([data-label]),
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td[data-label=""],
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) .stapel-kop {
    padding-left: 0; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) .stapel-kop {
    padding-bottom: var(--r1); font-size: var(--fs-md); color: var(--inkt); }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td.getal,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) th.getal {
    text-align: left; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td.acties {
    width: auto; padding: var(--r2) 0 0; text-align: left; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td.acties .knop {
    margin-left: 0; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) .leeg-rij td,
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td.leeg {
    padding: var(--r1) 0; }
  body:has(> main:is(.kantoor, .portaal)) .tabel.stapel:not(:has(td.stapel-kaart)) td:empty {
    display: none; }
}

/* --- Badges en stippen ---------------------------------------------------------- */
/* Tekst + klein punt; kleur alleen in de stip. NOK en Vertraagd (.nadruk) ook rode tekst. */

.badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 0 6px; min-height: 20px;
  font-size: var(--fs-xs); font-weight: 500; line-height: 18px; white-space: nowrap;
  color: var(--grijs-700); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--badge-kleur, var(--grijs-500)); flex: none;
}
.badge.zonder-stip::before { display: none; }
.badge.nadruk { color: var(--badge-kleur, var(--grijs-700)); }
.badge.kaal { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
.badge.gevuld { background: var(--grijs-100); border-color: var(--grijs-100); }

.stip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--badge-kleur, var(--grijs-500)); vertical-align: middle; flex: none; }
.stip.groot { width: 8px; height: 8px; }

/* Chip: neutraal label (stap-id, soort). Nooit gevuld zwart of teal. */
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--grijs-700); background: var(--grijs-100); border: 1px solid var(--grijs-100); border-radius: var(--radius); white-space: nowrap; }
.chip.rand { background: var(--vlak); border-color: var(--rand); }

/* --- Tabbladen ---------------------------------------------------------------- */

.tabs { display: flex; gap: var(--r1); border-bottom: 1px solid var(--rand); margin-bottom: var(--r4); overflow-x: auto; }
.tabs button, .tabs a {
  padding: 10px 12px; margin-bottom: -1px;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--grijs-600);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.tabs .actief, .tabs [aria-selected="true"] { color: var(--inkt); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .teller { margin-left: 6px; font-weight: 400; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .tabs button:hover, .tabs a:hover { color: var(--inkt); text-decoration: none; } }

/* --- Menu (dropdown) ------------------------------------------------------------ */

.menu {
  position: fixed; z-index: 900; min-width: 220px; max-width: min(320px, calc(100vw - 16px));
  padding: 4px 0; margin: 0; list-style: none;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-dialoog);
}
.menu-item {
  display: flex; align-items: center; gap: var(--r2); width: 100%;
  min-height: 32px; padding: 0 12px;
  font: inherit; font-size: var(--fs-sm); color: var(--tekst); text-align: left; text-decoration: none;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.menu-item:focus { outline: none; background: var(--grijs-100); }
/* Toetsenbord: een duidelijke ring binnen het item (alleen de achtergrond viel weg tegen het hover-grijs). */
.menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--grijs-100); }
.menu-item.gevaar { color: var(--fout); }
.menu-item:disabled, .menu-item[aria-disabled="true"] { color: var(--grijs-400); cursor: not-allowed; background: none; }
.menu-scheiding { height: 1px; margin: 4px 0; background: var(--rand); border: 0; }
@media (hover: hover) { .menu-item:hover { background: var(--grijs-100); text-decoration: none; } }
@media (pointer: coarse) { .menu-item { min-height: 44px; font-size: var(--fs-md); } }

/* --- Dialogen ------------------------------------------------------------------ */

dialog.dialoog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 1px solid var(--rand); border-radius: var(--radius-groot);
  background: var(--vlak); color: var(--tekst); box-shadow: var(--schaduw-dialoog);
}
dialog.dialoog.breed { width: min(960px, calc(100vw - 32px)); }
dialog.dialoog::backdrop { background: rgba(17, 24, 39, 0.4); }
.dialoog-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); padding: var(--r3) var(--r4); border-bottom: 1px solid var(--rand); }
.dialoog-kop h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.dialoog-inhoud { padding: var(--r4); overflow-y: auto; max-height: calc(100vh - 160px); }
.dialoog-inhoud > :last-child { margin-bottom: 0; }
.dialoog-voet { display: flex; justify-content: flex-end; align-items: center; gap: var(--r2); padding: var(--r3) var(--r4); border-top: 1px solid var(--rand); background: var(--vlak); }
.dialoog-voet .links { margin-right: auto; }
.sluit-knop { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: none; border: 0; border-radius: var(--radius); color: var(--grijs-500); cursor: pointer; }
@media (hover: hover) { .sluit-knop:hover { background: var(--grijs-100); color: var(--inkt); } }
@media (pointer: coarse) { .sluit-knop { width: 44px; height: 44px; } }
/* r1-105 (UX-review 17): kop en voet blijven altijd zichtbaar, alleen de inhoud scrolt. Kop + inhoud (max. 100dvh - 160 px)
   + voet waren samen hoger dan de dialoog (max. 100dvh - 48 px); het dialoogelement zelf scrolde dan en de voet
   (bv. 'Sluiten' van Belnummers op 1280x800) viel onder de rand. */
dialog.dialoog[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog.dialoog > .dialoog-kop, dialog.dialoog > .dialoog-voet { flex: none; }
dialog.dialoog > .dialoog-inhoud { flex: 1 1 auto; min-height: 0; }
@supports (height: 100dvh) {
  dialog.dialoog { max-height: calc(100dvh - 48px); }
  .dialoog-inhoud { max-height: calc(100dvh - 160px); }
}

/* Telefoon (en liggende telefoon): dialoog als blad over de volle breedte. Met een formulier
   of .breed: volledig scherm; een korte vraag: onderaan. Inhoud scrolt, kop en voet blijven staan. */
@media (max-width: 600px), (max-height: 500px) {
  dialog.dialoog, dialog.dialoog.breed {
    width: 100%; max-width: 100%; max-height: 100%;
    margin: auto 0 0; border-width: 1px 0 0; border-radius: var(--radius-groot) var(--radius-groot) 0 0;
  }
  dialog.dialoog[open] { display: flex; flex-direction: column; }
  dialog.dialoog { box-sizing: border-box; overflow-x: hidden; }
  dialog.dialoog .dialoog-inhoud { min-width: 0; overflow-wrap: anywhere; }
  dialog.dialoog.breed, dialog.dialoog:has(form), dialog.dialoog:has(.dialoog-inhoud textarea) {
    height: 100%; margin: 0; border: 0; border-radius: 0;
  }
  dialog.dialoog > .dialoog-kop {
    flex: none;
    padding-top: max(var(--r3), env(safe-area-inset-top, 0px));
    padding-left: max(var(--r4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--r2), env(safe-area-inset-right, 0px));
  }
  dialog.dialoog > .dialoog-inhoud {
    flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain;
    padding-left: max(var(--r4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--r4), env(safe-area-inset-right, 0px));
  }
  dialog.dialoog > .dialoog-voet {
    flex: none; flex-wrap: wrap;
    padding-left: max(var(--r4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--r4), env(safe-area-inset-right, 0px));
    padding-bottom: max(var(--r3), env(safe-area-inset-bottom, 0px));
  }
}
/* Voet op smal scherm: knoppen delen de breedte; een 'links'-actie (bv. verwijderen) op een eigen rij eronder. */
@media (max-width: 600px) {
  .dialoog-voet { flex-wrap: wrap; }
  .dialoog-voet > .knop { flex: 1 1 auto; }
  .dialoog-voet > .knop.links, .dialoog-voet > .links { order: 2; flex-basis: 100%; margin-right: 0; }
}

/* --- Toasts --------------------------------------------------------------------- */
/* Donker en neutraal; bij fout/waarschuwing een stip in de signaalkleur. */

.toasts { position: fixed; right: var(--r4); bottom: var(--r4); z-index: 1000; display: flex; flex-direction: column; gap: var(--r2); max-width: min(380px, calc(100vw - 32px)); }
/* --toast-onder: een pagina met een vaste balk onderaan kan de toasts daarboven zetten. */
.toasts {
  right: max(var(--r4), env(safe-area-inset-right, 0px));
  bottom: calc(var(--toast-onder, var(--r4)) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 600px) {
  .toasts { left: var(--r3); right: var(--r3); max-width: none; align-items: stretch; }
}
.toast {
  display: flex; align-items: baseline; gap: var(--r2);
  padding: 10px 14px; font-size: var(--fs-sm); line-height: 1.4;
  color: #fff; background: var(--grijs-800);
  border: 0; border-radius: var(--radius-groot); box-shadow: var(--schaduw-dialoog);
  cursor: default; animation: toast-in 0.15s ease-out;
}
.toast.fout::before, .toast.waarschuwing::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px);
}
.toast.fout::before { background: #f87171; }
.toast.waarschuwing::before { background: #fbbf24; }
/* r1-105 (UX-review 18): een toast ving taps op die voor de knop eronder (vinkje, Volgende) bedoeld waren; de bak ligt
   rechtsonder/onderaan, boven de actiebalk. Een melding zonder bediening laat taps door (ze verdwijnt vanzelf);
   een toast met knop of link (bv. 'Ongedaan maken') blijft tikbaar. */
.toasts, .toast { pointer-events: none; }
.toast:has(button, a, input, select, textarea, [tabindex]) { pointer-events: auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* --- Meldingsbalk ------------------------------------------------------------------ */
/* Rondom 1 px rand, geen gekleurde linkerrand. Varianten met een stip vooraan. */

.melding {
  position: relative;
  padding: 10px 12px; margin-bottom: var(--r3);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--grijs-800);
  background: var(--grijs-50); border: 1px solid var(--rand); border-radius: var(--radius);
}
.melding.fout, .melding.waarschuwing, .melding.ok { padding-left: 28px; }
.melding.fout::before, .melding.waarschuwing::before, .melding.ok::before {
  content: ""; position: absolute; left: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%;
}
.melding.fout { background: var(--fout-licht); border-color: var(--fout-rand); color: var(--fout-tekst); }
.melding.fout::before { background: var(--fout); }
.melding.waarschuwing { background: var(--waarschuwing-licht); border-color: var(--waarschuwing-rand); color: var(--waarschuwing-tekst); }
.melding.waarschuwing::before { background: var(--waarschuwing); }
.melding.ok { background: var(--grijs-50); border-color: var(--rand); color: var(--grijs-800); }
.melding.ok::before { background: var(--ok); }
.melding.info { background: var(--grijs-50); border-color: var(--rand); }
.melding > :last-child { margin-bottom: 0; }

/* --- Login ------------------------------------------------------------------------ */

.login-scherm { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--r4); }
@supports (min-height: 100dvh) { .login-scherm { min-height: 100dvh; } }
.login-scherm {
  padding: max(var(--r4), env(safe-area-inset-top, 0px)) max(var(--r4), env(safe-area-inset-right, 0px))
    max(var(--r4), env(safe-area-inset-bottom, 0px)) max(var(--r4), env(safe-area-inset-left, 0px));
}
.login-vak { width: 100%; max-width: 380px; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: var(--r6) var(--r5) var(--r5); }
.login-vak .logo { display: block; height: 40px; width: auto; margin: 0 auto var(--r4); }
.login-vak .app-titel { text-align: center; font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--r1); }
.login-vak .ondertitel { text-align: center; font-size: var(--fs-sm); color: var(--tekst-zacht); margin-bottom: var(--r5); }
.login-voet { text-align: center; font-size: var(--fs-xs); color: var(--tekst-zacht); margin-top: var(--r4); }

/* Tweestapsverificatie (2FA): inschrijven, herstelcodes, tweede stap op de loginpagina. */
.tweestap p { margin: 0 0 var(--r3); }
.tweestap-stappen { margin: 0 0 var(--r4); padding-left: 1.25em; }
.tweestap-stappen > li { margin-bottom: var(--r3); }
.tweestap-gegevens { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--r4); margin: var(--r2) 0 var(--r3); }
.tweestap-gegevens dt { color: var(--tekst-zacht); font-size: var(--fs-sm); }
.tweestap-gegevens dd { margin: 0; overflow-wrap: anywhere; }
.tweestap-geheim { font-size: var(--fs-md); letter-spacing: 0.04em; }
.tweestap-code { font-family: var(--font-mono); letter-spacing: 0.2em; max-width: 12em; }
.tweestap-codes { columns: 2; column-gap: var(--r6); margin: 0 0 var(--r4); padding-left: 1.75em; }
.tweestap-codes li { margin-bottom: 4px; }
/* r1-62 F3: keuze van de methode (radioknoppen onder elkaar), QR-code met de sleutel als terugval. */
.tweestap-keuze { border: 0; margin: 0 0 var(--r3); padding: 0; min-width: 0; }
.tweestap-keuze legend { padding: 0; margin-bottom: var(--r2); font-weight: 600; font-size: var(--fs-md); }
.tweestap-optie { display: flex; gap: var(--r3); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--radius); cursor: pointer; }
.tweestap-optie + .tweestap-optie { margin-top: var(--r2); }
.tweestap-optie input { margin-top: 3px; flex: none; }
.tweestap-optie:has(input:checked) { border-color: var(--accent, var(--inkt)); }
.tweestap-optie:has(input:focus-visible) { outline: 2px solid var(--accent, var(--inkt)); outline-offset: 1px; }
.tweestap-optie.uit { cursor: default; background: var(--grijs-50); }
.tweestap-optie.uit .tweestap-optie-naam { color: var(--tekst-zacht); }
.tweestap-optie-naam { display: block; font-weight: 600; }
.tweestap-optie-uitleg { display: block; font-size: var(--fs-sm); color: var(--tekst-zacht); line-height: 1.4; margin-top: 2px; }
.tweestap-qr { display: flex; justify-content: center; align-items: center; min-height: 200px; margin: var(--r3) 0; }
.tweestap-qr svg { display: block; width: 200px; height: 200px; max-width: 100%; border: 1px solid var(--rand); border-radius: var(--radius); }
.tweestap-qr .melding { width: 100%; }
.tweestap-handmatig { margin: 0 0 var(--r2); }
.tweestap-handmatig > summary { cursor: pointer; color: var(--accent-knop); font-size: var(--fs-sm); padding: 8px 0; }
.tweestap-handmatig > summary:hover { text-decoration: underline; }
.tweestap .knop-plat.knop-klein { padding-left: 0; padding-right: 0; color: var(--accent-knop); }
.tweestap-handmatig[open] > summary { margin-bottom: var(--r2); }
.tweestap-opnieuw { margin: 0 0 var(--r1); }
.tweestap-klein { font-size: var(--fs-sm); }
[data-tf-factor] .knop-plat { margin-bottom: var(--r2); }
[data-tf-factor-code] { display: flex; gap: var(--r2); align-items: flex-end; flex-wrap: wrap; }
[data-tf-factor-code][hidden] { display: none; }
[data-tf-factor-code] .veld { margin-bottom: var(--r2); }
[data-tf-factor-code] > .knop { margin-bottom: var(--r2); }
.ww-tweestap { margin: var(--r3) 0 0; padding-top: var(--r3); border-top: 1px solid var(--rand); }
.ww-tweestap .knop { gap: var(--r2); }
.login-link { background: none; border: 0; padding: 0; color: var(--accent-donker); text-decoration: underline; cursor: pointer; font: inherit; }

@media print {
  .kopbalk, .toasts, .geen-print, .menu { display: none !important; }
  body { background: #fff; }
}

/* iOS Safari: datum- en tijdvelden krijgen anders een eigen minimale breedte en native opmaak,
   waardoor ze buiten hun vak lopen (gemeld op iPhone, 23-09-2026). */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* r1-56: beeld kiezen en bijsnijden (beeld-kiezer.js; bouwmodus in de simulatie en de editor). Grepen min. 44 px
   aanraakvlak (iPad, Android-tablet); het kader dimt wat buiten het bijgesneden deel valt. */
.bk-vlak { position: relative; display: flex; align-items: center; justify-content: center; background: var(--grijs-100);
  border-radius: var(--radius); padding: 22px; min-height: 200px; max-height: calc(100dvh - 300px); overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.bk-draai { position: relative; display: inline-block; line-height: 0; transform-origin: 50% 50%; }
.bk-beeld { display: block; max-width: 100%; max-height: calc(100dvh - 360px); width: auto; height: auto; -webkit-user-drag: none; pointer-events: none; }
.bk-kader { position: absolute; box-sizing: border-box; border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); cursor: move; touch-action: none; }
.bk-kader:focus-visible { outline: 3px solid var(--accent); }
.bk-greep { position: absolute; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none; touch-action: none; }
.bk-greep::after { content: ""; position: absolute; inset: 12px; background: #fff; border: 2px solid var(--accent); border-radius: 3px; }
.bk-greep:focus-visible::after { box-shadow: 0 0 0 3px var(--accent); }
.bk-lb { left: -22px; top: -22px; cursor: nwse-resize; }
.bk-rb { right: -22px; top: -22px; cursor: nesw-resize; }
.bk-lo { left: -22px; bottom: -22px; cursor: nesw-resize; }
.bk-ro { right: -22px; bottom: -22px; cursor: nwse-resize; }
.bk-acties { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; margin-top: var(--r3); }
.bk-acties .knop { min-height: 44px; }
.bk-uitleg { margin: 0 0 var(--r2); }
/* --- r1-84 P5b: meldingen aan onderaannemers (meldingen-oa.js; Beheer en onderaannemersportaal) ------------- */
.oameld .oameld-soorten td { vertical-align: middle; }
.oameld .oameld-soorten .sub { display: block; font-size: var(--fs-xs); color: var(--tekst-zacht); font-weight: 400; }
.oameld .oameld-soorten select { min-width: 0; max-width: 100%; }
@media (min-width: 761px) { .oameld .oameld-soorten select { min-width: 200px; } }
.oameld .oameld-velden { margin-top: var(--r4); }
.oameld .oameld-werkdagen { max-width: 320px; }
.oameld .oameld-acties { margin-top: var(--r3); gap: var(--r3); flex-wrap: wrap; }
.oameld .oameld-ontvangers { margin: 0; padding-left: 18px; }
.oameld .oameld-ontvangers li { margin: 2px 0; }
.oameld .oameld-log .sub, .oameld .oameld-historiek .sub { display: block; font-size: var(--fs-xs); color: var(--tekst-zacht); }
.oameld .oameld-fout { word-break: break-word; max-width: 420px; }
.oameld .tabel-wrap + .velden-3 { margin-top: var(--r4); }

/* --- r1-96 helptabblad (hulp.js): zoekveld, secties, vragen als uitklapbare regels; geen kaartjes ---------------- */
.hulp { max-width: 920px; }
.hulp-kop { align-items: flex-start; }
.hulp-zoek { display: flex; flex-direction: column; gap: var(--r1); margin-bottom: var(--r2); }
.hulp-zoek label { font-weight: 600; font-size: var(--fs-sm); }
.hulp-zoek input { width: 100%; max-width: 560px; }
.hulp-status { min-height: 1.2em; margin: 0 0 var(--r2); }
.hulp-sectie { margin-bottom: var(--r5); }
.hulp-sectie > h2, .hulp-sectie > h3 { font-size: var(--fs-lg); margin: 0 0 var(--r2); padding-bottom: var(--r1); border-bottom: 1px solid var(--rand); }
.hulp-item { border-bottom: 1px solid var(--rand); }
.hulp-item > summary { cursor: pointer; padding: 10px 2px; display: flex; gap: var(--r3); justify-content: space-between; align-items: baseline; list-style: none; }
.hulp-item > summary::-webkit-details-marker { display: none; }
.hulp-item > summary::before { content: '+'; flex: 0 0 auto; width: 1em; color: var(--tekst-zacht); font-weight: 600; }
.hulp-item[open] > summary::before { content: '\2212'; }
.hulp-item > summary:hover .hulp-vraag { color: var(--accent-knop); }
.hulp-vraag { flex: 1 1 auto; font-weight: 500; }
.hulp-sectie-label { flex: 0 0 auto; }
.hulp-antwoord { padding: 0 2px var(--r4) calc(1em + var(--r3)); }
.hulp-antwoord p { margin: 0 0 var(--r2); }
.hulp-antwoord h4 { margin: var(--r3) 0 var(--r1); }
.hulp-stappen { margin: 0 0 var(--r2); padding-left: 1.4em; }
.hulp-stappen li { margin-bottom: 4px; }
.hulp-oorzaken { list-style: none; margin: 0 0 var(--r2); padding: 0; }
.hulp-oorzaken li { padding: var(--r2) 0; border-top: 1px solid var(--grijs-100); }
.hulp-oorzaken li:first-child { border-top: 0; }
.hulp-oorzaak { font-weight: 500; }
.hulp-oorzaak .zacht, .hulp-oplossing .zacht { display: block; font-weight: 400; }
.hulp-oplossing { margin-top: 2px; }
.hulp-knopnaam { font-weight: 600; color: var(--inkt); white-space: nowrap; }
.hulp-link { margin: var(--r3) 0 0; }
@media (max-width: 600px) {
  .hulp-item > summary { flex-wrap: wrap; }
  .hulp-sectie-label { width: 100%; padding-left: calc(1em + var(--r3)); }
  .hulp-antwoord { padding-left: 0; }
  .hulp-knopnaam { white-space: normal; }
}

/* r1-100: OPSA-merkje (SAT-formulier) op kaart, in het stapformulier en in de simulatie */
.chip.chip-opsa { background: var(--accent-licht); border-color: var(--accent); color: var(--grijs-800); font-weight: 600; }
.chip.chip-opsa-mee { background: var(--vlak); border-color: var(--rand-sterk); color: var(--grijs-600); font-weight: 400; border-style: dashed; }
.opsa-vak:empty { display: none; }
.opsa-blok { border: 1px solid var(--rand); border-left: 3px solid var(--accent); border-radius: 4px; padding: 8px 10px; margin: 0 0 10px; background: var(--vlak); }
.opsa-kop { margin: 0 0 4px; font-size: var(--fs-sm, 13px); font-weight: 600; }
.opsa-blok .hulp { margin: 0 0 6px; }
.opsa-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs, 12px); }
.opsa-veld { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.opsa-nr { flex: none; min-width: 44px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
/* r1-101 restpunt a: notatie 'OPSA 4 · P10-EP3': veldnummer eerst, portaalcode erachter gedimd (admin-opsa.js notatieHtml). */
.opsa-notatie { white-space: nowrap; font-variant-numeric: tabular-nums; }
.opsa-notatie .opsa-code { color: var(--tekst-zacht); font-weight: 400; }
.chip.chip-opsa .opsa-notatie .opsa-code { color: var(--grijs-600); }
.opsa-vraag { flex: 1 1 200px; min-width: 0; }
.opsa-wat { color: var(--grijs-600); }
.opsa-voorw, .opsa-mee { color: var(--grijs-500); font-style: italic; }
.opsa-veld-mee { opacity: .8; }
.opsa-meer { color: var(--grijs-500); }
.melding.ed-opsa ul { margin: 4px 0 0; padding-left: 18px; }

/* --- r1-104 rolwissel voor admins (rolwissel.js) ---------------------------------------------------------- */
/* Klikbare rol in de kopbalk (alleen de echte admin); een klein driehoekje als teken dat er een menu is. */
.kopbalk .rol-knop { flex: none; gap: 6px; color: var(--tekst); font-weight: 600; }
.kopbalk .rol-knop::after {
  content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7;
}
.kopbalk .rol-knop:not([data-rol="admin"]) { color: var(--accent-knop); }
/* Smalle balk bovenaan: "Je werkt als <rol> · Terug naar Admin". Staat boven de kopbalk (eerste element van body). */
.rolwissel-balk {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: var(--r2) var(--r3); flex-wrap: wrap;
  min-height: 28px; padding: 2px var(--r4); padding-left: max(var(--r4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--r4), env(safe-area-inset-right, 0px));
  background: var(--grijs-800); color: #fff; font-size: var(--fs-sm); line-height: 1.3; text-align: center;
}
.rolwissel-balk strong { font-weight: 600; }
.rolwissel-balk .rolwissel-tekst { min-width: 0; overflow-wrap: anywhere; }
.rolwissel-balk .rolwissel-terug {
  min-height: 24px; height: 24px; padding: 0 10px; font-size: var(--fs-xs); background: var(--vlak); color: var(--inkt);
  border-color: var(--vlak);
}
.rolwissel-balk .rolwissel-terug:hover { background: var(--grijs-100); }
/* r1-105: lager op de tablet (was 36 px knop + rand); het tikvlak blijft breed genoeg. */
body.tablet .rolwissel-balk .rolwissel-terug { min-height: 30px; height: 30px; font-size: var(--fs-sm); padding: 0 14px; }
/* r1-105: in de simulator geen eigen balk: alleen de knop rechts op de simulatieregel (simulatie.js zetRolBalk). De tekst
   'Je werkt als Simulatie' blijft voor de schermlezer. */
.rolwissel-balk.rolwissel-inline { display: inline-flex; min-height: 0; padding: 0; background: none; color: inherit; flex-wrap: nowrap; }
.rolwissel-balk.rolwissel-inline .rolwissel-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rolwissel-balk.rolwissel-inline .rolwissel-terug { min-height: 32px; height: 32px; font-size: var(--fs-sm); border-color: var(--rand); }
/* Keuze op de tablet (menu 'Mijn account' > Rol wisselen): grote knoppen onder elkaar. */
.rolwissel-keuzes { display: grid; gap: var(--r2); margin-top: var(--r3); }
.rolwissel-keuzes .knop { justify-content: flex-start; min-height: 48px; }
/* Simulatie vanuit de rolkiezer: schermvullend in tabletformaat (zijpanelen weg; bewerken op het scherm, r1-103). */
/* r1-105 (review 4): de zijpanelen zijn hier laden over het toestel (knoppen Stappen en Bouwpaneel in de simulatiebalk),
   één tegelijk; het toestel houdt de volle breedte. Dicht = weg. Het bewerkpaneel (aanpassen van de stap) bestaat hier niet
   (dat gebeurt op het tabletscherm, r1-103); alleen het bouwpaneel is een lade. */
body.sim-schermvullend .sim-werk { position: relative; }
body.sim-schermvullend .sim-lijst, body.sim-schermvullend .sim-bewerk {
  position: absolute; top: 0; bottom: 0; z-index: 40; width: min(380px, calc(100vw - 44px)) !important;
  box-shadow: var(--schaduw-dialoog, 0 6px 20px rgba(17, 24, 39, .16)); }
body.sim-schermvullend .sim-lijst { left: 0; }
body.sim-schermvullend .sim-bewerk { right: 0; width: min(420px, calc(100vw - 44px)) !important; }
body.sim-schermvullend .sim-lijst.lade-dicht, body.sim-schermvullend .sim-bewerk.lade-dicht,
body.sim-schermvullend:not(.sim-bouwmodus) .sim-bewerk { display: none; }
/* Op een gsm (360 px) is de kopbalk van Beheer al vol (r1-97): de rolknop wordt daar een persoon-icoon (de rol staat
   in zijn naam, in het menu en in de balk 'Je werkt als ...'); anders vallen de hulp- en de uitlogknop buiten beeld. */
.kopbalk .rol-knop .rol-icoon { display: none; }
/* Tot 1024 px (tablet): met de rolknop van de admin erbij wordt 'Uitloggen' een icoon (title blijft) en verdwijnt de
   naam (staat in de title van de rolknop); anders loopt Beheer/Management op 640-820 px breder dan het scherm. */
@media (max-width: 1024px) {
  .kopbalk:has(.rol-knop) [data-uitloggen] > span { display: none; }
  .kopbalk:has(.rol-knop) .gebruiker { display: none; }   /* naam staat in de title van de rolknop */
}
@media (max-width: 720px) {
  .kopbalk:has(.rol-knop) .rechts { gap: var(--r1); }   /* 640 px: de laatste knop viel 5 px buiten beeld */
}
/* r1-105 (UX-review 12): op 800 px staand was de rechterkant van de kopbalk (taal, rol, hulp, rondleiding, uitloggen) nog
   35 px breder dan wat het merk + 'Retrofits' overliet; de .rechts-rij schuift niet mee, dus het uitlogicoon viel half
   buiten beeld. Tot 900 px laat de kopbalk met rolknop de appnaam vallen (het logo blijft). */
@media (max-width: 900px) {
  .kopbalk:has(.rol-knop) .merk .app-naam { display: none; }
}
/* Tot 1024 px (tablet, kleine laptop) is er in de kopbalk van Beheer/Management geen plaats voor de rolnaam. */
@media (max-width: 1024px) {
  .kopbalk .rol-knop { padding: 0 6px; gap: 2px; }
  .kopbalk .rol-knop .rol-tekst { display: none; }
  .kopbalk .rol-knop .rol-icoon { display: inline-block; }
  .kopbalk .rol-knop::after { display: none; }
}