/* Eigen aanvulling van Mesken ERP op mesken-thema.css (= thema.css van mockup 02, byte-gelijk; ADR-0006) en op
   erp-mockup-modules.css (de CSS die mockupmodules zelf in de pagina zetten). Alleen wat de herbouw nodig heeft:
   documenttabs, dichtheid, de inlogpagina, de grid-JS (groeperen, leeg), de boom, formulieren en flashmeldingen.
   Kleuren alleen via de variabelen van het thema, zodat licht en donker kloppen. */

/* ---------- schil: documenttabs boven de werkbalk (ADR-0006: documenttabs met een huisje) ---------- */
.werk.met-tabs { grid-template-rows: auto auto minmax(0, 1fr); }
.doctabs { display: flex; align-items: flex-end; gap: 2px; padding: 5px 8px 0; background: var(--m-staal-zacht); border-bottom: 1px solid var(--m-lijn); overflow-x: auto; min-height: 33px; }
.doctab { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 8px 5px 10px; font-size: 12px; color: var(--m-dim); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; white-space: nowrap; text-decoration: none; }
.doctab:hover { color: var(--m-tekst); background: var(--m-hover); text-decoration: none; }
.doctab.aan { background: var(--m-vlak); color: var(--m-tekst); border-color: var(--m-lijn); font-weight: 600; margin-bottom: -1px; }
.doctab.huis { padding: 4px 9px 5px; }
.doctab .doctab-tekst { overflow: hidden; text-overflow: ellipsis; }
.doctab .doctab-sluit { display: inline-flex; color: var(--m-dim); border-radius: 4px; padding: 1px; cursor: pointer; }
.doctab .doctab-sluit:hover { color: var(--m-merk); background: var(--m-staal-licht); }
a.wb { color: var(--m-tekst); }
.wb[disabled] { pointer-events: none; }
.kopbalk form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.kopbalk .merk { color: #fff; text-decoration: none; }
.kopknop.bel { position: relative; }
.kopknop.bel .bel-tel { position: absolute; top: -3px; right: -3px; }
@media (max-width: 900px) { .erp-verberg-smal { display: none; } }

/* ---------- dichtheid (Mijn instellingen > Weergave) ---------- */
body.dichtheid-compact { --m-rij: 24px; --m-pad: 10px; }
body.dichtheid-compact .rgrid td, body.dichtheid-compact .rgrid th { font-size: 12px; }
body.dichtheid-ruim { --m-rij: 36px; --m-pad: 18px; }
body.dichtheid-ruim .groep li a { padding-top: 6px; padding-bottom: 6px; }

/* ---------- flashmeldingen en toasts ---------- */
.erp-flash { border: 1px solid var(--m-lijn); background: var(--m-vlak); border-left: 4px solid var(--m-groen); border-radius: var(--m-radius-knop); padding: 7px 12px; margin: 0 0 10px; font-size: 13px; }
.erp-flash.fout { border-left-color: var(--m-rood); color: var(--m-rood); background: var(--m-rood-zacht); }
.erp-flash.let-op { border-left-color: var(--m-oranje); }

/* ---------- grid (static/erp-grid.js) ---------- */
.rgrid th { position: relative; user-select: none; }
.rgrid th .erp-sorteer .ti { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; }
.rgrid tr.erp-groepkop td { background: var(--m-staal-zacht); font-weight: 650; cursor: pointer; }
.rgrid tr.erp-groepkop td .dim { font-weight: 400; }
.rgrid tr.erp-leeg td { cursor: default; }
.erp-grid .grid-voet .erp-groep-info:not(:empty) { margin-left: 6px; }
.aanpas-lijst li .erp-pijl { cursor: pointer; padding: 0 4px; color: var(--m-dim); }
.aanpas-lijst li .erp-pijl:hover { color: var(--m-merk); }

/* ---------- boom (macro boom) ---------- */
.erp-boom tr td:first-child { white-space: nowrap; }
.erp-boom .erp-boom-knop { cursor: pointer; color: var(--m-dim); }
.erp-boom .erp-boom-knop:hover { color: var(--m-merk); }

/* ---------- planbord: blokken zijn links ---------- */
a.wk-blok { color: inherit; text-decoration: none; display: block; }
a.wk-blok:hover { text-decoration: none; }
a.g-balk, a.g-gate { text-decoration: none; display: block; }

/* ---------- formulieren in kaarten en vensters ---------- */
.erp-form { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; align-items: center; max-width: 760px; }
.erp-form label { font-size: 12.5px; color: var(--m-dim); }
.erp-form input[type="text"], .erp-form input[type="email"], .erp-form input[type="number"], .erp-form input[type="date"], .erp-form select, .erp-form textarea {
  font-size: 13px; padding: 4px 8px; border: 1px solid var(--m-lijn); border-radius: 6px; background: var(--m-vlak); color: var(--m-tekst); width: 100%; }
.erp-form textarea { min-height: 64px; }
.erp-form .erp-form-knoppen { grid-column: 2; display: flex; gap: 6px; margin-top: 4px; }
.erp-fout { color: var(--m-rood); font-size: 12.5px; }
input[type="color"] { width: 34px; height: 24px; padding: 0 2px; border: 1px solid var(--m-lijn); border-radius: 4px; background: var(--m-vlak); }
table.eenvoud input[type="text"] { width: 100%; min-width: 120px; }
.erp-inline { display: inline; margin: 0; }
button.knop { font-family: inherit; }

/* ---------- inrichting: rij die uit staat ---------- */
tr.erp-uit td { opacity: .45; }
tr.erp-uit td.erp-altijd { opacity: 1; }

/* ---------- pagina's die een module nog bouwt (klik-sweep telt ze als plaatshouder) ---------- */
.erp-aanbouw { border: 1px dashed var(--m-lijn); border-radius: var(--m-radius); padding: 14px 16px; background: var(--m-vlak); max-width: 760px; }
.erp-aanbouw h2 { font-size: 14px; margin: 0 0 6px; }

/* ---------- inlogpagina en pincode ---------- */
main.los { max-width: 420px; margin: 12vh auto; padding: 0 16px; display: grid; gap: 12px; }
.los-merk { font-size: 20px; color: var(--m-tekst); display: flex; align-items: baseline; gap: 8px; }
.los-merk img { height: 26px; width: auto; }
.los-merk span { color: var(--m-dim); }
.los h1 { font-size: 18px; margin: 0 0 8px; }
.los label { display: grid; gap: 4px; margin: 8px 0; font-size: 13px; }
.los input[type="email"], .los input[type="password"], .los select { font-size: 14px; padding: 6px 8px; border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); color: var(--m-tekst); }
.los button { margin-top: 6px; }
.los .scheid-tekst { color: var(--m-dim); font-size: 12px; text-align: center; margin: 12px 0 4px; }
.pin-toetsen { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; justify-content: center; margin: 10px 0; }
.pin-toetsen button { height: 52px; font-size: 18px; border-radius: 10px; border: 1px solid var(--m-lijn); background: var(--m-vlak); color: var(--m-tekst); }
.pin-toetsen button:hover { background: var(--m-hover); }
.pin-code { text-align: center; font-size: 26px; letter-spacing: 12px; min-height: 36px; }

@media print { .menu, .kopbalk, .werkbalk, .doctabs { display: none !important; } .app { display: block; height: auto; } .inhoud { overflow: visible; } }

/* ---------- uitklapper voor een klein formulier op een kaarttab ---------- */
details.erp-uitklap > summary { list-style: none; display: inline-flex; }
details.erp-uitklap > summary::-webkit-details-marker { display: none; }

/* ---------- module B: BOM-boom, vrijgave, werkplaatsketen ---------- */
.bb-boom form.erp-inline { display: inline; }
button.vg-vrij, button.bb-knop, button.bb-link { font: inherit; background: none; color: inherit; }
button.vg-vrij { display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 6px; border: 1px solid var(--m-lijn); border-radius: 6px; cursor: pointer; white-space: nowrap; }
button.vg-vrij:hover { border-color: #1f7a4d; color: #1f7a4d; }
button.bb-knop { border: 0; padding: 2px 3px; color: var(--m-dim); cursor: pointer; display: inline-flex; }
button.bb-knop:hover { color: var(--m-merk); }
button.bb-link { border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; }
.bb-boom td.bb-knoppen { white-space: nowrap; }
.bb-boom select.bb-rev { font-size: 12px; padding: 0 2px; border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); color: var(--m-tekst); }
.bb-ketenblok h3, .vg-impact h3, .vg-bevestig h3 { font-size: 13px; margin: 10px 0 4px; }
.bb-delta form.erp-inline { margin-right: 4px; }
.erp-standaardknop { position: absolute; width: 0; height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; }
.wk-sm { white-space: nowrap; }

/* ---------- module A: Home, Taken, Planning, Uren, Meldingen en notificaties ---------- */
a.tk { display: block; color: inherit; text-decoration: none; }
a.tk:hover { border-color: var(--m-staal); text-decoration: none; }
a.teller { color: var(--m-tekst); text-decoration: none; }
a.teller:hover { text-decoration: none; }
.tellers a.teller.aan { box-shadow: inset 0 0 0 2px var(--m-signaal); }
button.a-link { background: none; border: 0; padding: 0; color: var(--m-signaal); cursor: pointer; font: inherit; }
button.a-link:hover { text-decoration: underline; }
.tegels button.a-link { color: var(--m-dim); text-align: left; }
.bel-lijst { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.a-bel-form { margin: 0; }
.a-bel-form button.bel-item { display: block; width: 100%; text-align: left; background: var(--m-vlak); color: var(--m-tekst); font: inherit; }
.a-cat tr.klik td:first-child a { color: inherit; text-decoration: none; }
.a-cat tr.klik:hover td { background: var(--m-hover); }
.a-taak h3, .a-melding h3 { font-size: 13px; margin: 12px 0 4px; }
.a-knoppen form, .wp-knoppen form { margin: 0; }
td.wk-dag.a-drop { box-shadow: inset 0 0 0 2px var(--m-signaal); }
.wk-backlog { border: 1px dashed var(--m-lijn); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; background: var(--m-vlak); }
.wk-backlog-rij { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wk-backlog-rij .wk-blok { min-width: 118px; }
.plan-loc { display: inline-block; font-size: 10.5px; color: #fff; background: var(--c); border-radius: 4px; padding: 0 5px; margin-bottom: 2px; }
.g-balk.spook { opacity: .55; border: 2px dashed #c4392d; background: transparent; color: #c4392d; }
.g-balk.gevaar { outline: 2px solid #c4392d; }
a.ev { text-decoration: none; }
.plan-vinkjes .vinkrij, .tk-vinkjes { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.a-uren input[type=number] { padding: 2px 4px; border: 1px solid var(--m-lijn); border-radius: 4px; background: var(--m-vlak); color: var(--m-tekst); }
.nmatrix form { margin: 0; }
/* ======================================================================== module D
   Projecten (fasen en gates), Besturing, Service, Slimvellen, Snack, Beheer, Analytics en Inrichting-tabs. */
.d-sub { font-size: 13px; margin: 10px 0 4px; }
.d-kiezer { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.d-blokken .vlak.breed { grid-column: 1 / -1; }
.d-gate .ti { vertical-align: -2px; }
.d-gate form.erp-inline .knop { padding: 1px 7px; }
.d-gate-voet { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--m-lijn-zacht); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.erp-inline { display: inline; margin: 0; }
.d-kaarten { display: grid; gap: 10px; }
.d-vel td.velcel { padding: 2px 4px; }
.d-vel td.velcel input[type="text"], .d-vel td.velcel input[type="number"], .d-vel td.velcel input[type="date"], .d-vel td.velcel select {
  font: inherit; font-size: 12.5px; padding: 2px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--m-tekst); }
.d-vel td.velcel input:hover, .d-vel td.velcel select:hover, .d-vel td.velcel input:focus, .d-vel td.velcel select:focus { border-color: var(--m-lijn); background: var(--m-vlak); }
.d-vel td.velcel input.velinvoer { min-width: 220px; width: 100%; }
.d-vel th a { color: inherit; text-decoration: none; }
.d-vel tr.sel td { box-shadow: inset 0 0 0 9999px var(--m-hover); }
.d-kolomform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-kolomform input[type="text"], .d-rij-nieuw input[type="text"], .d-waarde-nieuw input, .d-crit-nieuw input { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); color: var(--m-tekst); }
details.d-doel > summary { list-style: none; cursor: pointer; }
details.d-doel > summary::-webkit-details-marker { display: none; }
.segment button { font: inherit; padding: 3px 10px; font-size: 12px; color: var(--m-tekst); background: transparent; border: 0; border-right: 1px solid var(--m-lijn); cursor: pointer; }
.segment form:last-child button { border-right: 0; }
.segment button.aan { background: var(--m-staal); color: #fff; }
/* Een schakelaar die in deze weergave niet geldt, blijft op zijn plek: grijs en niet te klikken (test_schakelaars). */
.segment.uit, .plan-soorten.uit, select.uit { opacity: .45; pointer-events: none; }
.segment.uit a.aan { background: var(--m-lijn); color: var(--m-tekst); }
.d-snackbeheer-kop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.d-snackbeheer-kop .duw { flex: 1 1 10px; }
.d-tellers { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
.snack-art form.erp-inline { display: inline-flex; }
a.snack-winkel, a.snack-winkel b, a.snack-winkel small { text-decoration: none; }
.d-verborgen { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.chip { display: inline-flex; align-items: center; }
.d-keuzeknoppen { display: flex; flex-wrap: wrap; gap: 4px; }
.d-keuzeknoppen input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.d-fase { border-bottom: 1px solid var(--m-lijn-zacht); padding: 7px 0; }
.d-fase.erp-uit { opacity: .55; }
.d-fase-kop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-fase-kop input[type="text"], .d-waarde input[type="text"], .d-snackwinkel input[type="text"], .d-artikelform input, .d-snacktijden input[type="time"] { font: inherit; font-size: 12.5px; padding: 2px 6px; border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); color: var(--m-tekst); }
.d-criteria { margin: 4px 0 0 22px; display: grid; gap: 3px; }
.d-criterium.erp-uit { opacity: .5; }
.d-crit-nieuw, .d-waarde-nieuw, .d-rij-nieuw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.d-waarde { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 3px; }
.d-waarde.erp-uit { opacity: .5; }
.d-lijsten .vlak.d-gekozen { box-shadow: 0 0 0 2px var(--m-merk); }
.d-artikelform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vlak.d-uit { opacity: .6; }
.d-nform { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.d-personen { display: flex; flex-wrap: wrap; gap: 4px; }
.d-functies li { display: flex; }
.d-overzet li { display: flex; gap: 8px; align-items: center; }
.staaf { font-size: 9px; fill: var(--m-dim); }
.staaf text.w { fill: var(--m-tekst); font-weight: 600; }
@media (max-width: 760px) { .d-tellers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .d-klok { display: none !important; } }

/* Dagstart (TR17 tot TR20): een rij per persoon met Vandaag, Volgende werkdag en Deze week */
.ds-bord { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); overflow: hidden; table-layout: fixed; }
.ds-bord th { position: sticky; top: 0; z-index: 2; background: var(--m-graf, #1d1d1d); color: #fff; text-align: left; font-weight: 600; padding: 8px 10px; font-size: 13px; }
.ds-bord td { vertical-align: top; padding: 8px; border-top: 1px solid var(--m-lijn-zacht); }
.ds-bord .ds-naam { width: 170px; }
.ds-rij.ik td { background: var(--m-merk-zacht); }
.ds-rij.afwezig td { opacity: .55; }
.ds-cap { margin-top: 4px; }
.ds-cap.over { color: var(--m-oranje); font-weight: 600; }
.ds-kol { min-height: 54px; }
.ds-kol.a-drop { outline: 2px dashed var(--m-merk); outline-offset: -4px; background: var(--m-merk-zacht); }
.ds-dag { margin-bottom: 4px; }
.ds-kaart { background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); padding: 6px 8px; margin: 0 0 6px; font-size: 13px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ds-kaart[draggable=true] { cursor: grab; }
.ds-kaart.sleept { opacity: .4; }
.ds-kaart.routine { border-style: dashed; }
.ds-kaart.hoog { border-color: var(--m-merk); }
.ds-kaart.klaar { opacity: .6; }
.ds-kaart.klaar .ds-titel { text-decoration: line-through; }
.ds-titel { display: block; color: var(--m-tekst); font-weight: 500; text-decoration: none; }
.ds-m { color: var(--m-dim); font-size: 12px; margin-top: 2px; }
.ds-gevaar { color: var(--m-oranje); margin-top: 3px; }
.ds-knoppen { margin-top: 4px; display: flex; gap: 4px; }
.ds-knoppen .knop { padding: 1px 8px; font-size: 12px; }
.ds-kaart.geblokkeerd { background: var(--m-rood-zacht); border-color: var(--m-rood-zacht); }
.ds-kaart.geblokkeerd .ds-titel { color: var(--m-signaal-donker); }
.ds-reden { color: var(--m-tekst); margin-top: 2px; }
.ds-snel input { width: 100%; border: 1px dashed var(--m-lijn); border-radius: var(--m-radius-knop); background: transparent; padding: 3px 6px; font-size: 12px; }
.ds-snel input:focus { border-style: solid; background: var(--m-vlak); }
.ds-voorstel, .ds-afgerond { margin-bottom: 10px; }
.ds-voorstel .ds-kol { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-voorstel .ds-kaart { width: 230px; margin: 0; }
.ds-af { display: block; padding: 2px 0; }
/* Mijn taken per week (TR21) */
.tw-snel .vlak-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tw-snel input[name=titel] { flex: 1 1 260px; }
.tw-groep { margin-bottom: 10px; }
.tw-tabel select, .tw-tabel input { font-size: 12px; }
.tw-uren { width: 70px; }
.tw-reden { color: var(--m-signaal-donker); }
.tk-fout td { color: var(--m-signaal-donker); }
/* Agenda: urenraster met beschikbaar tegenover gepland (A28) */
.ag-raster { display: grid; grid-template-columns: 52px repeat(var(--dagen), minmax(0, 1fr)); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); overflow: hidden; background: var(--m-vlak); }
.ag-raster > div { border-left: 1px solid var(--m-lijn-zacht); }
.ag-kop { padding: 6px; background: var(--m-bg); border-bottom: 1px solid var(--m-lijn); font-size: 13px; }
.ag-kop.vandaag { background: var(--m-merk-zacht); }
.ag-cap { font-size: 12px; color: var(--m-dim); }
.ag-cap.over { color: var(--m-signaal-donker); font-weight: 600; }
.ag-heledag { padding: 4px; border-bottom: 1px solid var(--m-lijn); min-height: 30px; }
.ag-heledag.a-drop, .ag-kolom.a-drop { background: var(--m-merk-zacht); }
.ag-kolom { position: relative; }
.ag-uur { height: 40px; border-bottom: 1px solid var(--m-lijn-zacht); cursor: copy; }
.ag-uurlabel { height: 40px; font-size: 11px; color: var(--m-dim); text-align: right; padding: 2px 4px 0 0; border-bottom: 1px solid var(--m-lijn-zacht); }
.ag-item { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 2px 5px; font-size: 12px; color: #fff; background: var(--c, #1b2530); overflow: hidden; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.ag-item[draggable=true] { cursor: grab; }
.ag-nieuw { margin-left: auto; }
.ag-form input[type="time"] { font-size: 13px; padding: 4px 8px; border: 1px solid var(--m-lijn); border-radius: 6px; background: var(--m-vlak); color: var(--m-tekst); }
.ag-paar { display: flex; gap: 8px; align-items: center; }
.ag-paar input { width: auto !important; }
.ag-uitleg { margin: -2px 0 2px; }
.ag-mensen { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ag-mensen label, .erp-form label.ag-vink { color: var(--m-tekst); font-size: 13px; display: inline-flex; gap: 5px; align-items: center; }
.wk-weeklos { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }

/* Regie (RG1 tot RG9) */
.rg-tabs { margin: 0 0 10px; }
.rg-project { min-width: 260px; }
.rg-tellers { margin-bottom: 10px; }
.rg-projecten td { vertical-align: top; }
.rg-doorloop { min-width: 220px; }
.rg-balk-doel { position: relative; height: 14px; background: var(--m-bg); border-radius: 7px; overflow: hidden; margin: 2px 0 3px; }
.rg-band { position: absolute; top: 0; bottom: 0; background: var(--m-groen-zacht); }
.rg-staaf { position: absolute; left: 0; top: 4px; height: 6px; border-radius: 3px; background: var(--m-groen); }
.rg-staaf.rg-oranje { background: var(--m-oranje); }
.rg-staaf.rg-rood { background: var(--m-rood); }
.rg-rood { color: var(--m-rood); }
.rg-groen-t { color: var(--m-groen); }
.rg-acties { white-space: nowrap; }
.rg-acties .knop, .rg-acties form { margin: 0 0 4px 0; }
tr.rg-rood > td:first-child { box-shadow: inset 3px 0 0 var(--m-rood); }
tr.rg-oranje > td:first-child { box-shadow: inset 3px 0 0 var(--m-oranje); }
tr.rg-groen > td:first-child { box-shadow: inset 3px 0 0 var(--m-groen); }
.rg-ganttkop-rij { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.rg-watals-uit { padding: 6px 10px; border-radius: var(--m-radius); background: var(--m-bg); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rg-watals-uit.rg-groen { background: var(--m-groen-zacht); }
.rg-watals-uit.rg-rood { background: var(--m-rood-zacht); color: var(--m-tekst); }
.rg-vertragers { margin: 6px 0; }
.rg-watals { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.rg-watals select, .rg-watals input { font-size: 12px; padding: 2px 6px; border: 1px solid var(--m-lijn); border-radius: 6px; background: var(--m-vlak); color: var(--m-tekst); }
.rg-uren { width: 70px; }
.rg-gantt-legenda { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; color: var(--m-dim); }
.rg-l { display: inline-block; width: 18px; height: 8px; border-radius: 3px; margin-left: 8px; }
.rg-l-kritiek { background: var(--m-merk); }
.rg-l-taak { background: #5b6b7c; }
.rg-l-speling { height: 2px; background: #5b6b7c; }
.rg-l-mat { width: 9px; height: 9px; transform: rotate(45deg); background: var(--m-blauw); border-radius: 1px; }
.rg-l-lijn-v { width: 2px; height: 12px; background: var(--m-merk); }
.rg-l-lijn-l { width: 2px; height: 12px; background: var(--m-tekst); }
.rg-l-lijn-d { width: 2px; height: 12px; background: var(--m-groen); }
.rg-gantt-wrap { overflow-x: auto; border: 1px solid var(--m-lijn); border-radius: var(--m-radius); background: var(--m-vlak); }
svg.rg-gantt { display: block; font-family: inherit; }
.rg-weekend { fill: var(--m-bg); }
.rg-weeklijn { stroke: var(--m-lijn-zacht); }
.rg-weektekst { font-size: 10px; fill: var(--m-dim); }
.rg-vandaag { stroke: var(--m-merk); stroke-width: 2; }
.rg-levering { stroke: var(--m-tekst); stroke-width: 2; stroke-dasharray: 6 3; }
.rg-doellijn { stroke: var(--m-groen); stroke-width: 2; stroke-dasharray: 2 3; }
.rg-gate { fill: var(--m-tekst); }
.rg-pijl { fill: none; stroke: #8c99a7; stroke-width: 1.3; }
.rg-pijl.mat { stroke: var(--m-blauw); stroke-dasharray: 3 2; }
.rg-pijl.kritiek { stroke: var(--m-merk); stroke-width: 2; stroke-dasharray: none; }
.rg-pijlpunt { fill: #8c99a7; }
.rg-pijlpunt-k { fill: var(--m-merk); }
.rg-mat { fill: var(--m-blauw); }
.rg-staart { stroke: #5b6b7c; stroke-width: 1.5; }
.rg-taak .rg-balk { fill: #5b6b7c; }
.rg-taak.kritiek .rg-balk { fill: var(--m-merk); }
.rg-taak.onbekend .rg-balk { fill: #b9b9b9; }
.rg-taak.verschoven .rg-balk { stroke: var(--m-oranje); stroke-width: 2; }
.rg-taak[data-sleep] { cursor: ew-resize; }
.rg-taak.sleept { opacity: .75; }
.rg-blokje { fill: rgba(255, 255, 255, .55); }
.rg-balktekst { font-size: 10.5px; fill: #fff; font-weight: 600; }
.rg-rijlabel { font-size: 11px; fill: var(--m-tekst); }
.rg-rijlabel.kritiek { fill: var(--m-merk); font-weight: 600; }
.rg-bel-wrap { overflow-x: auto; }
.rg-bel th.rg-wk { font-size: 11px; text-align: center; white-space: nowrap; }
.rg-bel .rg-naam { text-align: left; white-space: nowrap; font-weight: 500; }
.rg-bel .rg-groepkop th { background: var(--m-bg); font-size: 12px; text-align: left; }
.rg-cel { text-align: center; font-size: 12px; background: linear-gradient(to top, var(--m-groen-zacht) var(--pct), transparent var(--pct)); }
.rg-cel a { color: inherit; text-decoration: none; display: block; }
.rg-cel.rg-oranje { background: linear-gradient(to top, var(--m-oranje-zacht) var(--pct), transparent var(--pct)); }
.rg-cel.rg-rood { background: var(--m-rood-zacht); color: var(--m-rood); font-weight: 600; }
.rg-cel.rg-leeg { color: var(--m-dim); }
.rg-geld { text-align: right; font-size: 12px; white-space: nowrap; }
.rg-saldo th, .rg-saldo td { border-top: 2px solid var(--m-lijn); }
.rg-voorstel-kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rg-samenvatting { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.rg-verouderd { background: var(--m-oranje-zacht); padding: 6px 10px; border-radius: var(--m-radius); }
.rg-regels td { vertical-align: top; }
.rg-kp { font-size: 10.5px; color: #fff; background: var(--m-merk); border-radius: 6px; padding: 0 5px; }
tr.rg-b-geaccepteerd, tr.rg-b-aangepast { background: var(--m-groen-zacht); }
tr.rg-b-geweigerd { opacity: .6; }
.rg-besluit { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; }
.rg-aanpassen summary { list-style: none; cursor: pointer; }
.rg-aanpassen[open] { display: flex; gap: 4px; flex-wrap: wrap; }
.inr-getal { width: 70px; }
.inr-dagen label { font-size: 11px; margin-right: 3px; white-space: nowrap; }
.inr-wp-knoppen { white-space: nowrap; }
.inr-wp-nieuw { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.inr-wp-nieuw input { font-size: 12px; padding: 2px 6px; border: 1px solid var(--m-lijn); border-radius: 6px; }
.inr-vaardig-wrap { overflow-x: auto; }
.inr-vaardig-tabel th.inr-soort { font-size: 11px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; vertical-align: bottom; }
.inr-vaardig-tabel th.inr-soort.beperkt { color: var(--m-merk); }
.inr-vink { text-align: center; padding: 1px; }
.inr-vinkknop { width: 22px; height: 22px; border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); cursor: pointer; font-size: 13px; line-height: 1; color: var(--m-tekst); }
.inr-vinkknop.aan { background: var(--m-groen-zacht); border-color: var(--m-groen); }
.rg-kritiek-regel { color: var(--m-merk); }
.rg-balktekst.buiten { fill: var(--m-tekst); font-weight: 500; }

/* Projectkaart > Plan (RC1 tot RC7) */
.rc-balk { margin-bottom: 10px; }
.rc-proef h3, .rc-h { margin: 14px 0 6px; font-size: 15px; }
.rc-kies { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.rc-kies label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.rc-recept form { display: inline; }
.rc-kop { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: 10px 0; }
.rc-kop .tegel { background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); padding: 8px 12px; min-width: 170px; }
.rc-kop .groot { font-size: 20px; font-weight: 600; }
.rc-vertrager { max-width: 360px; }
.rc-knoppen { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.rc-groen { color: var(--m-groen); } .rc-oranje { color: var(--m-oranje); } .rc-rood { color: var(--m-rood); }
.rc-fasen-wrap { overflow-x: auto; }
.rc-fasen td { vertical-align: top; }
.rc-fasen .r, .rc-taken .r { text-align: right; }
.rc-fase.leeg td { color: var(--m-dim); }
.rc-tijdkop { min-width: 320px; font-weight: 400; font-size: 11px; }
.rc-tijd { position: relative; min-width: 320px; height: 22px; }
.rc-staaf { position: absolute; top: 7px; height: 9px; border-radius: 4px; background: #5b6b7c; }
.rc-staaf.kritiek { background: var(--m-merk); }
.rc-uiterlijk { position: absolute; top: 3px; width: 2px; height: 17px; background: var(--m-tekst); }
.rc-lijn { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--m-merk); opacity: .6; }
.rc-lijn.levering { border-left: 2px dashed var(--m-tekst); }
.rc-details summary { cursor: pointer; }
.rc-taken { margin: 6px 0 4px; font-size: 12px; }
.rc-schatting { background: var(--m-bg); color: var(--m-dim); font-size: 10.5px; }
.rc-bestel { background: var(--m-blauw-zacht, #e6eef7); color: var(--m-blauw); font-size: 10.5px; }
.rc-wanneer td.rg-cel { min-width: 54px; text-align: center; white-space: nowrap; }
.rc-st-te_laat, .rc-st-gepland_te_laat { background: var(--m-rood-zacht); color: var(--m-rood); }
.rc-st-deze_week { background: #fbeedd; color: var(--m-oranje); }
.rc-st-op_tijd, .rc-st-besteld { background: var(--m-groen-zacht); color: var(--m-groen); }
.rc-recept-blok { margin-bottom: 12px; }
.rc-recept-blok > summary { cursor: pointer; padding: 10px 14px; list-style: none; }
.rc-recept-blok > summary h2 { margin: 0; font-size: 16px; }
.rc-kopregel .rc-oms { min-width: 380px; }
.rc-stappen { margin: 10px 0 6px; font-size: 12.5px; }
.rc-stappen td { vertical-align: top; }
.rc-stappen td.c { text-align: center; }
.rc-stappen .rc-titel { min-width: 210px; }
.rc-stappen select.rc-na { min-width: 170px; font-size: 11.5px; }

/* Afkortingen (MU8) */
.afk .zoekveld { width: 100%; margin: 4px 0 6px; }
.afk-groep { border-top: 1px solid var(--m-lijn-zacht); padding: 4px 0; }
.afk-groep summary { cursor: pointer; padding: 4px 0; }
.afk-tabel { width: 100%; }
.afk-tabel td.afk-code { white-space: nowrap; width: 84px; }
.afk-tabel tr.afk-raak td { background: var(--m-staal-licht); }
.afk-tabel a.afk-uitleg { white-space: nowrap; font-weight: 600; }
.uitleg-codes { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.uitleg h2 { margin: 14px 0 4px; font-size: 1.05rem; }
.uitleg h2:first-child { margin-top: 0; }
.uitleg ul { margin: 4px 0 8px; padding-left: 20px; }
.uitleg li { margin: 3px 0; }

/* Beginnen op een lege database: ingerichte formulieren, locaties, pakketten en labels (0075, 2026-10-08) */
.fv-groep { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 6px; border-top: 1px solid var(--m-lijn-zacht); font-weight: 600; font-size: 13px; }
.fv-groep:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.fv-in { display: flex; flex-direction: column; gap: 2px; }
.fv-in input[type="checkbox"] { align-self: flex-start; }
.fv-nodig { color: var(--m-rood); }
.fv-hulp { line-height: 1.3; }
.erp-form .vol { grid-column: 1 / -1; }
.erp-regels { width: 100%; border-collapse: collapse; margin: 4px 0; }
.erp-regels th { text-align: left; font-size: 12px; color: var(--m-dim); font-weight: 500; padding: 2px 4px; }
.erp-regels td { padding: 2px 4px; }
.erp-regels input, .erp-regels select { width: 100%; font-size: 13px; padding: 3px 6px; border: 1px solid var(--m-lijn); border-radius: 6px; background: var(--m-vlak); color: var(--m-tekst); }
.loc-inhoud td.n { text-align: right; white-space: nowrap; }
.pak-tabel td { vertical-align: top; }
.labels { display: flex; flex-wrap: wrap; gap: 4mm; }
.label { width: 60mm; height: 30mm; border: 1px dashed var(--m-lijn); padding: 2mm; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; break-inside: avoid; background: #fff; color: #000; }
.label svg { width: 100%; height: 14mm; }
.label .label-code { font-size: 16pt; font-weight: 700; letter-spacing: .5px; }
.label .label-naam { font-size: 8pt; }
@media print { .label { border: 0; } .labels { gap: 0; } .geen-print, .paginakop { display: none !important; } }