/* =====================================================================
   opdrachten.css — Module 1.2 · Opdrachten & voorbehoud. Bouwt op
   tokens + bouwstenen.css (+ drawer-basis uit recovery.css).
===================================================================== */

/* Keten-strip */
.op-keten { padding: 16px 18px; margin-bottom: 16px; }
.op-keten__stappen { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 5px; margin-top: 12px; }
.op-stap { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--c-ink-3); }
.op-stap__num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; background: var(--c-paneel); color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn); }
.op-stap.is-klaar { color: var(--c-ink-2); }
.op-stap.is-klaar .op-stap__num { background: var(--c-groen-t); color: var(--c-groen-d); border-color: transparent; }
.op-stap.is-actief { color: var(--c-ink); font-weight: 800; }
.op-stap.is-actief .op-stap__num { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }
.op-stap__pijl { color: var(--c-lijn-2); font-size: .74rem; }
.op-keten__toel { margin: 12px 0 0; font-size: .76rem; color: var(--c-ink-2); max-width: 82ch; }

/* Lijst */
.op-lijst { padding: 0; overflow: hidden; }
.op-rij { display: grid; grid-template-columns: 96px 1.4fr 1.5fr 1.2fr .8fr; gap: 12px; align-items: center; padding: 13px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.op-rij:hover { background: var(--c-creme); }
.op-rij.is-actief { background: var(--c-groen-t); }
.op-rij--kop { padding: 11px 18px; background: var(--c-paneel); border-top: 0; cursor: default; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); }
.op-rij--kop:hover { background: var(--c-paneel); }
.op-idcel { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.op-id { font-size: .74rem; color: var(--c-ink-2); }
.op-cel { min-width: 0; }
.op-klant { font-weight: 800; font-size: .84rem; }
.op-sub { font-size: .7rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sub--intro { margin: 0 0 13px; white-space: normal; }
.op-status, .op-vbnaam { justify-self: start; }
.op-vbnaam { font-weight: 700; font-size: .76rem; display: block; margin-bottom: 3px; }
.op-marge { text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 800; }
.op-marge--ok { color: var(--c-groen-d); }
.op-marge--laag { color: var(--c-terra-d); }
.op-fiatvlag { font-size: .56rem; font-weight: 800; color: var(--c-terra-d); background: var(--c-terra-t); border-radius: 5px; padding: 1px 5px; }
.op-poorttel { color: var(--c-amber); font-weight: 800; }

/* Donker uitlegblok */
.op-uitlegdonker { margin-top: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--c-ink); color: var(--c-lijn-2); font-size: .82rem; line-height: 1.6; }
.op-uitlegdonker strong { color: var(--c-creme); }
.op-uitlegdonker__kicker { color: var(--c-lijn-2); margin-bottom: 9px; display: block; }

/* Configuratie */
.op-cfggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .op-cfggrid { grid-template-columns: 1fr; } }
.op-cfgkaart { padding: 18px 20px; }
.op-h2 { font-size: .95rem; font-weight: 800; margin: 0 0 3px; }
.op-cfgrijen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.op-cfgrij { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.op-cfgnum { font-weight: 800; font-size: .72rem; color: var(--c-groen-d); min-width: 18px; }
.op-cfglabel { flex: 1; font-weight: 700; font-size: .8rem; }
.op-cfgweg { background: transparent; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; color: var(--c-terra-d); }
.op-cfgnieuw { display: flex; gap: 8px; }
.op-cfgnieuw .off-reden { flex: 1; }

/* Drawer-blokken */
.op-blok { padding: 14px 16px; margin-bottom: 14px; }
.op-blok--vb { border-color: var(--c-amber); }
.op-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.op-kicker--amber { color: var(--c-amber); }
.op-prijs { font-size: 1.05rem; font-weight: 800; }
.op-maatregel { font-weight: 700; font-size: .8rem; margin-bottom: 4px; }
.op-blok .chip { margin-top: 6px; }
.op-wijzig { width: 100%; margin-top: 11px; padding: 9px; border-radius: 9px; border: 1px dashed var(--c-lijn-2); background: #fff; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; cursor: pointer; color: var(--c-ink-2); }
.op-wijzig:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.op-vbsub { font-size: .8rem; margin-bottom: 4px; }
.op-vbacties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.op-mini { padding: 8px 13px; font-size: .72rem; }
.op-mini--groen { color: var(--c-groen-d); }
.op-mini--terra { color: var(--c-terra-d); border-color: var(--c-terra); }

/* Poort-checklist */
.op-poort { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (max-width: 560px) { .op-poort { grid-template-columns: 1fr; } }
.op-check { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0; font-family: var(--font-ui); font-size: .78rem; font-weight: 600; color: var(--c-ink-3); }
.op-check.is-klaar { color: var(--c-ink); }
.op-check:disabled { cursor: default; }
.op-check__box { width: 20px; height: 20px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--c-lijn-2); background: #fff; color: #fff; font-weight: 800; font-size: .72rem; }
.op-check.is-klaar .op-check__box { background: var(--c-groen); border-color: var(--c-groen); }

/* Margekaart */
.op-mrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .76rem; color: var(--c-ink-2); padding: 3px 0; }
.op-mrij.is-sterk { font-weight: 800; font-size: .82rem; color: var(--c-ink); }
.op-mrij--groen .mono { color: var(--c-groen-d); }
.op-mrij--terra .mono { color: var(--c-terra-d); }
.op-fiatknop { width: 100%; margin-top: 11px; padding: 10px; border-radius: 10px; border: var(--lijndikte) solid var(--c-terra); background: var(--c-terra-t); font-family: var(--font-ui); font-size: .76rem; font-weight: 700; cursor: pointer; color: var(--c-terra-d); }

/* Drawer-voet */
.op-voetknoppen { display: flex; gap: 10px; }
.op-annuleer { flex: none; color: var(--c-terra-d); border-color: var(--c-terra); }
.op-release { flex: 1; }

/* Annuleer-dialoog */
.op-reden { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 11px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; color: var(--c-ink); text-align: left; }
.op-reden__dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 5px solid var(--c-lijn-2); background: #fff; }
.op-reden.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.op-reden.is-actief .op-reden__dot { border-color: var(--c-terra); }
.op-gevolg { display: flex; align-items: flex-start; gap: 9px; font-size: .76rem; color: var(--c-ink-2); }
.op-gevolg .mono { color: var(--c-terra-d); font-weight: 700; flex: none; }
.op-annuleer-bevestig:not(:disabled) { background: var(--c-terra); }
.op-annuleer-bevestig:not(:disabled):hover { background: var(--c-terra-d); }

/* B39 · backend-kaart: opdracht-dossiers met marge-opbouw */
/* Fix 22-07: zelfde euvel als de magazijn-kaart — de globale .kaart draagt
   geen padding, dus zonder eigen binnenmarge plakt de tekst tegen de rand. */
.op-bkkaart { padding: 16px 18px; margin-bottom: 14px; }
.op-bkkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.op-bkkop .mono { font-size: .7rem; color: var(--c-ink-3); }
.op-bkrijen { display: flex; flex-wrap: wrap; gap: 8px; }
.op-bkrij { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-family: var(--font-ui); font-size: .78rem; cursor: pointer; color: var(--c-ink); }
.op-bkrij .mono { font-size: .7rem; color: var(--c-ink-3); }
.op-bkrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.op-bkdossier { margin-top: 12px; padding: 13px 14px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); }
.op-bkdoskop { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.op-bkdoskop > div { flex: 1; display: flex; flex-direction: column; }
.op-bksectie { margin-top: 12px; padding-top: 9px; border-top: var(--lijndikte) solid var(--c-lijn-2); display: flex; flex-direction: column; gap: 5px; }
.op-bkregel { display: grid; grid-template-columns: 1.2fr 1fr auto auto; align-items: center; gap: 10px; font-size: .76rem; color: var(--c-ink-2); }
.op-bkregel .mono:last-child { text-align: right; font-weight: 700; color: var(--c-ink); }
.op-bkform { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.op-bkform select, .op-bkform input { padding: 8px 10px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); font-family: var(--font-ui); font-size: .76rem; background: #fff; color: var(--c-ink); }
.op-bkform select { flex: 1; min-width: 0; }
.op-bkform input { width: 84px; }

/* Demo op praktijkschaal (18-07): paginering + "toon meer" bij volume */
.op-paginering { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }
.op-paginering > .mono { font-size: 11.5px; color: var(--c-ink-3); }
.op-bkmeer { margin: 10px 0 0; }

/* Fase C (01-08): opdracht-modules per discipline — zelfde gezicht */
.opm-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; }
.opm-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.opm-rij { display: grid; grid-template-columns: 108px 1.3fr 138px 1fr 100px 150px 116px; gap: 12px; align-items: center;
  padding: 11px 16px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.opm-rij--kop { border-top: 0; font-size: .6rem; letter-spacing: .08em; color: var(--c-ink-3); text-transform: uppercase; }
.opm-wie { display: flex; flex-direction: column; min-width: 0; }
.opm-adres { font-size: .68rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opm-voortgang { display: flex; flex-direction: column; gap: 3px; }
.opm-baan { position: relative; height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.opm-baan i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.opm-fac { background: var(--c-sage-t); }
.opm-bet { background: var(--c-groen); }
.opm-voortgang em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.opm-bron { font-size: .66rem; color: var(--c-ink-3); }
/* Financieel (02-08): marge-kolom — rood alléén onder de norm (blokkadekleur) */
.opm-marge { font-size: .72rem; font-weight: 700; }
.opm-marge em { font-style: normal; font-weight: 500; font-size: .62rem; color: var(--c-ink-3); }
.opm-marge.is-groen { color: var(--c-groen-d); }
.opm-marge.is-amber { color: var(--c-amber); }
.opm-marge.is-rood { color: var(--c-rood); }
.opm-marge--stil { color: var(--c-ink-3); font-weight: 500; }
@media (max-width: 1000px) { .opm-rij { grid-template-columns: 1fr 1fr; } .opm-rij--kop { display: none; } }

/* Fase D (01-08): Inmeet & fabriek — stappenbalk met betaalpoorten */
.if-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 12px; }
.if-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.if-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 78ch; margin: -4px 0 2px; }
.if-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--schaduw-tegel); }
.if-kaart.is-gedempt { opacity: .78; border-color: var(--c-lijn); box-shadow: none; }
.if-kaart__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; }
.if-adres { color: var(--c-ink-3); font-size: .74rem; }
.if-stappen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.if-pijl { color: var(--c-ink-3); font-size: .62rem; }
.if-stap { border-radius: var(--radius-pill); padding: 3px 10px; font-size: .66rem; font-weight: 600;
  border: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); background: #fff; white-space: nowrap; }
.if-stap.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.if-stap.is-actief { border: 2px solid var(--c-groen); color: var(--c-ink); font-weight: 700; }
.if-stap.is-wacht { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-ink); }
.if-stap.is-dicht { }
.if-wachtlbl { font-size: .7rem; color: var(--c-ink-3); }
.if-wachtslot { font-size: .7rem; color: var(--c-ink); background: var(--c-amber-t); border-radius: var(--radius-pill); padding: 4px 12px; }

/* Opdrachtdossier (02-08): één scherm per opdracht */
.od-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; }
.od-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.od-kop__wie { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.od-kop__wie h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.od-klantlink { color: inherit; text-decoration: none; }
.od-klantlink:hover { color: var(--c-groen-d); text-decoration: underline; }
.od-nr { font-size: .72rem; color: var(--c-ink-3); }
.od-adres { font-size: .78rem; color: var(--c-ink-2); }
.od-kop__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.od-fasen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.od-fase { border-radius: var(--radius-pill); padding: 4px 12px; font-size: .68rem; font-weight: 600;
  border: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); background: #fff; white-space: nowrap; }
.od-fase.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.od-fase.is-actief { border: 2px solid var(--c-groen); color: var(--c-ink); font-weight: 700; }
.od-pijl { color: var(--c-ink-3); font-size: .62rem; }
.od-raster { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.od-links { display: flex; flex-direction: column; gap: 14px; background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); }
.od-inzien { font-style: normal; color: var(--c-ink-3); font-size: .64rem; }
.od-rechts { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.od-tegels { margin-bottom: 0; }
.od-warm { color: var(--c-amber); font-weight: 700; }
.od-termijnen { display: flex; flex-direction: column; }
.od-trij { display: grid; grid-template-columns: minmax(0, 1fr) 110px 190px auto; gap: 12px; align-items: center;
  padding: 10px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.od-trij:first-child { border-top: 0; }
.od-tactie { display: flex; justify-content: flex-end; }
.od-wacht { font-size: .66rem; color: var(--c-ink-3); }
.od-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.od-hint { font-size: .68rem; color: var(--c-ink-3); }
.od-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; }
.od-reden { font-style: normal; color: var(--c-ink-2); }
.opm-nr { color: var(--c-groen-d); text-decoration: none; font-size: .72rem; font-weight: 700; font-family: var(--font-mono); }
.opm-nr:hover { text-decoration: underline; }
/* Financieel-gebied (02-08): beoogd naast werkelijk, opbouw links/rechts */
.od-finkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.od-finkaart { background: var(--c-paneel); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; }
.od-finkaart__lbl { font-size: .66rem; color: var(--c-ink-3); }
.od-finkaart b { font-size: 1.15rem; font-weight: 800; color: var(--c-ink); }
.od-finkaart b.is-groen { color: var(--c-groen-d); }
.od-finkaart b.is-amber { color: var(--c-amber); }
.od-finkaart b.is-rood { color: var(--c-rood); }
.od-finkaart__sub { font-size: .64rem; color: var(--c-ink-3); }
.od-finnorm { margin-top: 10px; font-size: .72rem; color: var(--c-rood); font-weight: 600; }
.od-finkolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 14px; }
.od-finrij { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.od-finrij--stil { color: var(--c-ink-3); font-size: .68rem; }
@media (max-width: 980px) { .od-raster { grid-template-columns: 1fr; } }

/* ═══ IM1 · «wat er nú moet» ══════════════════════════════════════════
   De zin staat bóven de stappenbalk en niet erin: een werkvoorbereider
   met dertig lopende opdrachten leest liever één regel dan zeven
   bolletjes. Vier toestanden, want ze vragen een ander soort aandacht —
   er ligt een besluit, er is werk, we wachten op iemand anders, of het
   loopt gewoon. */
.if-nu { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn);
  background: var(--c-paneel-2); font-size: .82rem; }
.if-nu b { font-weight: 700; color: var(--c-ink); }
.if-nu.is-stop { border-color: var(--c-rood); background: #fff; }
.if-nu.is-stop b { color: var(--c-rood); }
.if-nu.is-let { border-color: var(--c-amber); background: var(--c-amber-t); }
.if-nu.is-rust { color: var(--c-ink-3); }
.if-nu.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-nu.is-goed b { color: var(--c-groen-d); }
/* Scheef is een signaal, geen blokkade: amber, met het aantal erbij. */
.if-scheef { font-size: .66rem; font-weight: 700; color: var(--c-amber);
  border: var(--lijndikte) solid var(--c-amber); background: var(--c-amber-t);
  border-radius: var(--radius-pill); padding: 2px 8px; }

/* ═══ IM5 · het dossier: drie kolommen ══════════════════════════════
   In de volgorde waarin de werkvoorbereider kijkt: wélke positie, wát er
   gemeten is, en wát hij ermee doet. De middenkolom is de breedste —
   daar staat de maatketen, en dat is waar hij zijn oordeel op baseert. */
.if-drie { display: grid; grid-template-columns: 214px minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px; align-items: start; }
@media (max-width: 1100px) { .if-drie { grid-template-columns: 1fr; } }
.if-kol { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.if-kol h3 { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }
.if-kol--maat, .if-kol--besluit { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schaduw-tegel); }

/* Links: de posities. De linkerrand draagt de stand — beoordeeld groen,
   buiten de marge amber. Zo zie je waar het geld zit zonder te lezen. */
.if-pos { text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 12px; transition: box-shadow var(--overgang), border-color var(--overgang); }
.if-pos:hover { box-shadow: var(--schaduw-tegel); }
.if-pos.is-nu { border-left-color: var(--c-groen); box-shadow: var(--schaduw-tegel); }
.if-pos.is-buiten { border-left-color: var(--c-amber); }
.if-pos__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: .82rem; }
.if-pos__sub { font-size: .7rem; color: var(--c-ink-2); }
.if-pos__geld { font-family: var(--font-mono); font-size: .7rem; color: var(--c-ink-3); }
.if-vink { color: var(--c-groen-d); font-size: .78rem; }

/* Midden: de maatketen. Elke regel een stap, bedragen en maten in mono
   zodat ze onder elkaar uitlijnen — hier wordt vergeleken, niet gelezen. */
.if-maat { display: flex; flex-direction: column; }
.if-mrij { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.if-mrij:last-child { border-bottom: 0; }
.if-mrij span { font-size: .76rem; color: var(--c-ink-2); }
.if-mrij b { font-family: var(--font-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.if-mrij b u { text-decoration: none; border-bottom: 2px solid var(--c-groen); }
.if-mrij em { grid-column: 1 / -1; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

.if-advies { display: flex; flex-direction: column; gap: 3px; margin-top: 11px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; }
.if-advies b { font-size: .8rem; }
.if-advies span { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }
.if-advies.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-advies.is-goed b { color: var(--c-groen-d); }
.if-advies.is-let { border-color: var(--c-amber); background: var(--c-amber-t); }
/* Memo-geel: een notitie van een mens, geen systeemtekst. */
.if-memo { margin-top: 11px; background: var(--c-memo); border-radius: var(--radius);
  padding: 10px 12px; font-size: .76rem; line-height: 1.55; }
.if-memo span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); margin-bottom: 3px; }

/* Rechts: het besluit. Vier keuzes met hun gevolg erbij — wie hier klikt
   moet weten wat er met het geld gebeurt, niet alleen met de status. */
.if-eerder { display: flex; flex-direction: column; gap: 2px; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 11px; background: var(--c-paneel-2); }
.if-eerder span { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.if-eerder b { font-size: .8rem; }
.if-eerder em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); line-height: 1.5; }
.if-keuzes { display: flex; flex-direction: column; gap: 7px; }
.if-keuze { display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; }
.if-keuze.is-nu { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-keuze input { margin-top: 3px; accent-color: var(--c-groen); }
.if-keuze span { display: flex; flex-direction: column; gap: 1px; }
.if-keuze b { font-size: .8rem; }
.if-keuze em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); line-height: 1.45; }
.if-bedraghint { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--c-ink-2); }
.if-som { margin: 0; font-size: .74rem; color: var(--c-ink-2); }
.if-som b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.if-wachtlbl { font-size: .7rem; color: var(--c-ink-3); }
/* Altijd-bereikbare ingang naar het dossier: een tekstknop, geen tegel —
   hij hoort niet te concurreren met de actieknop in de nu-regel. */
.if-open { border: 0; background: none; padding: 0 0 0 6px; cursor: pointer;
  font: inherit; font-size: .74rem; color: var(--c-groen-d); text-decoration: underline; }
.if-open:hover { color: var(--c-ink); }
/* Retour is geen afronding: amber en een kringetje, niet groen met een vink. */
.if-retour { color: var(--c-amber); font-size: .8rem; font-weight: 700; }
.if-pos.is-retour { border-left-color: var(--c-amber); }

/* ═══ IM6 · het handtekening-blok ═══════════════════════════════════
   Onder de drie kolommen: dit is de afsluiting van de stapel, geen
   vierde ding om tussendoor te doen. */
.if-teken { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--schaduw-tegel); }
.if-teken > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.if-teken b { font-size: .88rem; }
.if-teken em { font-style: normal; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); max-width: 86ch; }
.if-teken.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-teken.is-goed b { color: var(--c-groen-d); }
/* Rood is de blokkadekleur en blijft dat: hier staat de opdracht stil. */
.if-teken.is-stop { border-color: var(--c-rood); }
.if-teken.is-stop b { color: var(--c-rood); }
.if-teken.is-wacht { border-style: dashed; }
.if-zwak { color: var(--c-amber) !important; font-weight: 600; }
.if-tekenknoppen { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.if-rood { color: var(--c-rood); border-color: var(--c-rood); }

/* ═══ IM8 · Inmeet & fabriek · Beheer ═══════════════════════════════
   Eén gedachte draagt dit scherm: wijzigen is een nieuwe versie, geen
   overschrijving. Daarom staan de versies bovenaan met wat erop loopt —
   dat is wat je wilt weten vóór je de aftrek verhoogt. */
.ib-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }
.ib-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.ib-lead { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; max-width: 82ch; margin: -4px 0 0; }

.ib-versies { display: flex; gap: 8px; flex-wrap: wrap; }
.ib-versie { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-mono); font-size: .72rem;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 6px 11px; background: #fff; }
.ib-versie em { font-family: var(--font-ui); font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.ib-versie.is-nu { border-color: var(--c-lijn-2); }
.ib-versie.is-nieuw { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); }

.ib-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--schaduw-tegel); display: flex; flex-direction: column; gap: 2px; }
.ib-kaart__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.ib-kaart h3 { margin: 2px 0 0; font-size: .95rem; font-weight: 800; }
.ib-uitleg { font-size: .76rem; line-height: 1.6; color: var(--c-ink-2); max-width: 84ch; margin-bottom: 10px; }
.ib-kop4 { margin: 12px 0 2px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }

/* Eén regel per instelling: label, waarde, en waarom hij bestaat. */
.ib-rij { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline;
  padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ib-rij:last-child { border-bottom: 0; }
.ib-rij span { font-size: .8rem; }
.ib-rij b { font-family: var(--font-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.ib-rij em { grid-column: 1 / -1; font-style: normal; font-size: .68rem; line-height: 1.5; color: var(--c-ink-3); }

.ib-fabriek, .ib-inmeter, .ib-mfout { display: grid; align-items: center; gap: 4px 14px;
  padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ib-fabriek { grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.6fr) auto; }
.ib-inmeter { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto auto; }
.ib-mfout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto; }
.ib-fabriek:last-child, .ib-inmeter:last-child, .ib-mfout:last-child { border-bottom: 0; }
.ib-fabriek > div, .ib-inmeter > div, .ib-mfout > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ib-fabriek b, .ib-inmeter b, .ib-mfout b { font-size: .84rem; }
.ib-fabriek span, .ib-inmeter span, .ib-mfout span { font-size: .72rem; color: var(--c-ink-2); }
.ib-sub { font-size: .72rem; color: var(--c-ink-3); }
.ib-fmt { font-size: .62rem; letter-spacing: .06em; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius-pill); padding: 2px 8px; color: var(--c-ink-2); }
.ib-acties { display: flex; gap: 6px; }
/* Gearchiveerd blijft zichtbaar — gedempt, niet weg. */
.ib-inmeter.is-weg { opacity: .55; }
.ib-fout { font-size: .68rem; font-weight: 700; color: var(--c-amber); }
.ib-fout.is-stop { color: var(--c-rood); }
.ib-mfout.is-klaar { opacity: .6; }
.ib-klaar { font-size: .7rem; color: var(--c-groen-d); font-weight: 700; }
.ib-weg { color: var(--c-rood); border-color: var(--c-rood); }
/* Twee getallen naast elkaar: breedte en hoogte horen bij elkaar. */
.ib-paar { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 10px; align-items: end;
  padding: 5px 0; }
.ib-paar > span { font-size: .78rem; color: var(--c-ink-2); padding-bottom: 9px; }
@media (max-width: 800px) {
  .ib-fabriek, .ib-inmeter, .ib-mfout, .ib-paar { grid-template-columns: 1fr; }
}