/* =====================================================================
   subsidie.css — module 4.4 · Subsidiebeheer (sub-)
   Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.sub { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.sub-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.sub-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.sub-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 76ch; }
.sub-kop__acties { display: flex; gap: 8px; }
.sub-tabs { margin-bottom: 16px; }

.sub-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px;
  background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; text-decoration: none; display: inline-block; }
.sub-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: #fff; box-shadow: var(--schaduw-knop); }
.sub-knop--primair:hover { background: var(--gradient-primair-hover); }
.sub-knop--rood { background: var(--c-rood); border-color: var(--c-rood); color: #fff; }
.sub-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }
.sub-knop--klein { padding: 5px 10px; font-size: .64rem; }

/* ---- pijplijn (kanban) ---- */
.sub-pijplijn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; margin-bottom: 18px; }
.sub-kolom { display: flex; flex-direction: column; gap: 8px; }
.sub-kolom__kop { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-pill);
  font: 700 .68rem var(--font-ui); }
.sub-kolom__kop i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sub-kolom__kop strong { margin-left: auto; }
.sub-kolom__kop--stil { background: var(--c-paneel); color: var(--c-ink-2); }
.sub-kolom__kop--amber { background: var(--c-amber-t); color: var(--c-amber); }
.sub-kolom__kop--groen-licht { background: var(--c-groen-t); color: var(--c-groen); }
.sub-kolom__kop--groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.sub-kolom__som { text-align: right; font-size: .64rem; color: var(--c-ink-3); padding-right: 4px; }
.sub-kaartje { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 11px 13px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-groen); border-radius: 12px;
  background: var(--c-creme); box-shadow: var(--schaduw-tegel); font: inherit; }
.sub-kaartje:hover { box-shadow: var(--schaduw-tegel-hover); }
.sub-kaartje__kop { display: flex; justify-content: space-between; gap: 8px; }
.sub-kaartje__kop strong { font: 700 .74rem var(--font-ui); }
.sub-kaartje__kop span { font: 700 .7rem var(--font-mono); color: var(--c-groen-d); }
.sub-kaartje__id { font-size: .6rem; color: var(--c-ink-3); }
.sub-kaartje__voet { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sub-kaartje__voet em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-2); }
.sub-termijn { font: 600 .62rem var(--font-ui); color: var(--c-amber); }
.sub-voetnoot { margin: 6px 0 18px; padding: 11px 15px; border-radius: var(--radius); background: var(--c-paneel);
  font: 500 .72rem/1.55 var(--font-ui); color: var(--c-ink-2); }
.sub-voetnoot .mono { color: var(--c-groen-d); font-weight: 700; margin-right: 6px; }

/* ---- lijst ---- */
.sub-rij { display: grid; grid-template-columns: 120px 1.3fr 1.1fr 1fr 90px auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 11px 16px; border: 0; border-bottom: var(--lijndikte) solid var(--c-lijn);
  background: none; cursor: pointer; font: 500 .72rem var(--font-ui); color: var(--c-ink); }
.sub-rij:last-child { border-bottom: 0; }
.sub-rij:hover { background: var(--c-creme); }
.sub-rij--kop { cursor: default; font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); background: var(--c-paneel); }
.sub-rij--kop:hover { background: var(--c-paneel); }
.sub-rij__id { font: 600 .66rem var(--font-mono); color: var(--c-groen-d); }
.sub-rij__wie { display: flex; flex-direction: column; }
.sub-rij__wie strong { font: 600 .76rem var(--font-ui); }
.sub-rij__wie span { font-size: .62rem; color: var(--c-ink-3); }
.sub-rij__risico { font: 600 .66rem var(--font-ui); color: var(--c-rood); }

/* ---- eligibility-poort ---- */
.sub-poortgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 14px; }
.sub-poortkaart { padding: 15px 17px; display: flex; flex-direction: column; gap: 7px; }
.sub-poortkaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.sub-poortkaart__kop strong { font: 700 .82rem var(--font-ui); display: block; }
.sub-poortkaart__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.sub-checkrij { display: flex; align-items: center; gap: 9px; padding: 5px 0; border: 0; background: none;
  font: 500 .72rem var(--font-ui); color: var(--c-ink); text-align: left; cursor: pointer; }
.sub-checkrij[disabled] { cursor: default; }
.sub-check { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 700 .66rem var(--font-mono); flex: none; }
.sub-check.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.sub-check.is-fout { background: var(--c-rood-t); color: var(--c-rood); }
.sub-check.is-open { background: var(--c-amber-t); color: var(--c-amber); }
.sub-poortkaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px;
  padding-top: 9px; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.sub-poortkaart__acties { display: flex; gap: 7px; }

/* ---- regelingen ---- */
.sub-reggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.sub-regeling { padding: 15px 17px; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--c-groen); }
.sub-regeling--amber { border-top-color: var(--c-amber); }
.sub-regeling--terra { border-top-color: var(--c-terra); }
.sub-regeling__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sub-regeling__kop strong { font: 700 .9rem var(--font-ui); display: block; }
.sub-regeling__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.sub-regeling__plafond { display: flex; justify-content: space-between; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); }
.sub-balk { height: 9px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.sub-balk i { display: block; height: 100%; border-radius: var(--radius-pill); }
.sub-balk i.is-groen { background: var(--c-groen); }
.sub-balk i.is-amber { background: var(--c-amber); }
.sub-balk i.is-rood { background: var(--c-rood); }
.sub-regeling__benut { font-size: .62rem; color: var(--c-ink-3); }
.sub-regeling__stats { font-size: .64rem; color: var(--c-ink-2); padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.sub-regeling__eisen { display: flex; flex-direction: column; gap: 3px; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }

/* ---- drawer-inhoud ---- */
.sub-drawer__chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.sub-bedrag { padding: 13px 15px; border-radius: var(--radius); background: var(--c-groen-t); margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 3px; }
.sub-bedrag span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); }
.sub-bedrag > strong { font: 700 1.4rem var(--font-mono); color: var(--c-groen-d); }
.sub-bedrag em { font: 500 .66rem var(--font-ui); font-style: normal; color: var(--c-ink-2); }
.sub-bedrag p { margin: 5px 0 0; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.sub-route { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.sub-machtiging { display: flex; align-items: center; gap: 9px; font: 500 .72rem var(--font-ui); }
.sub-zelf { padding: 11px 13px; border-radius: 12px; background: var(--c-amber-t); display: flex; flex-direction: column; gap: 6px; }
.sub-zelf strong { font: 700 .72rem var(--font-ui); color: var(--c-amber); }
.sub-zelf p { margin: 0; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.sub-pakketok { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.sub-risicobalk { padding: 9px 12px; border-radius: 10px; background: var(--c-rood-t); color: var(--c-rood);
  font: 600 .7rem var(--font-ui); margin-bottom: 12px; }
.sub-checks { display: flex; flex-direction: column; margin-bottom: 14px; }
.sub-checks .sub-checkrij { cursor: default; }
.sub-dossier { display: flex; flex-direction: column; gap: 4px; font-size: .64rem; color: var(--c-ink-2); margin-bottom: 14px; }
.sub-tijdlijn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 .64rem var(--font-ui);
  color: var(--c-ink-3); margin-bottom: 14px; }
.sub-tijdlijn i { font-style: normal; }
.sub-tijdlijn .is-klaar { color: var(--c-groen-d); }
.sub-tijdlijn .is-nu { color: var(--c-ink); font-weight: 800; }
.sub-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: .64rem; color: var(--c-ink-2); }
.sub-meta strong { color: var(--c-ink); }
.sub-poorttekst { font: 600 .68rem var(--font-ui); color: var(--c-rood); margin-right: auto; align-self: center; }

@media (max-width: 1100px) {
  .sub-pijplijn { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .sub-knop, .sub-kaartje, .fac-tab { transition: background .16s ease, box-shadow .16s ease, color .16s ease; }
}

/* RVO-doorlooptijd-tracker (D3a) */
.sub-tracker { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.sub-trkfase { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; font-size: 12.5px; align-items: baseline; }
.sub-trkfase i { font-style: normal; }
.sub-trkfase.is-klaar i { color: var(--c-groen-d); }
.sub-trkfase.is-rood { color: var(--c-terra); font-weight: 600; }
.sub-trkfase.is-amber { color: var(--c-amber); font-weight: 600; }
.sub-trksignaal { font-size: 12px; color: var(--c-terra); font-weight: 700; border-top: 1px dashed var(--c-lijn); padding-top: 8px; }
.sub-trksignaal.is-amber { color: var(--c-amber); }

/* ---------- Regelingbeheer (regelset: bewerken bumpt de versie) ---------- */
.sub-regkop { margin-bottom: 14px; }
.sub-regkop__sub { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; max-width: 62ch; }
.sub-regacties { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  border-top: 1px dashed var(--c-lijn); padding-top: 9px; }
.sub-regacties > span:last-child { display: flex; gap: 5px; flex-wrap: wrap; }
.sub-regversie { font-size: .62rem; color: var(--c-ink-3); letter-spacing: .02em; }
.sub-regarchief { margin-top: 18px; border-top: 1px solid var(--c-lijn); padding-top: 14px; display: grid; gap: 7px; }
.sub-regarchrij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: var(--radius); padding: 9px 13px; }
.sub-regarchrij strong { font: 700 .78rem var(--font-ui); display: block; color: var(--c-ink-2); }
.sub-regarchrij span { font-size: .62rem; color: var(--c-ink-3); }
.sub-reghist { display: grid; gap: 6px; }
.sub-reghistrij { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px;
  border: 1px solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; }
.sub-reghistrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.sub-reghistrij strong { font: 700 .76rem var(--font-ui); display: block; }
.sub-reghistrij > div span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }

/* ---- FT-4.5a · server-side zoek/paginering (lijst-tab) + "meer" in de
   pijplijnkolom. Alleen tokens, geen losse kleurwaarden. ---- */
.sub-zoekbalk { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.sub-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 500 .74rem var(--font-ui); }
.sub-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); }
.sub-zoekstand { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); }
.sub-pag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 0; }
.sub-pag .btn[disabled] { opacity: .4; cursor: not-allowed; }
.sub-kolom__meer { display: block; width: 100%; margin-top: 6px; padding: 7px 10px; border: var(--lijndikte) dashed var(--c-lijn-2);
  border-radius: 10px; background: transparent; color: var(--c-ink-2); font: 600 .64rem var(--font-ui); cursor: pointer; text-align: center; }
.sub-kolom__meer:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); }
.sub-kolom__meer:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* ---- SUB A5 · de beschikking en de bezwaartermijn (bouwspec §3, §5.4).
   Drie regels naast elkaar: wat de klant is voorgerekend, wat RVO heeft
   toegekend, en hoeveel tijd er nog is om er iets aan te doen. Alleen
   tokens; de klok gebruikt --let voor «krap» en --stop voor «verlopen»,
   dezelfde betekenis als overal elders. ---- */
.sub-brief { display: grid; gap: 9px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 13px; background: var(--c-paneel); }
.sub-brief__cijfers, .sub-brief__brief { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sub-brief__cijfers span, .sub-brief__brief span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.sub-brief__cijfers strong, .sub-brief__brief strong { font: 700 .78rem var(--font-mono); color: var(--c-ink); display: block; }
.sub-brief__cijfers .is-tekort strong { color: var(--c-amber-d); }
.sub-brief__brief .is-mist { color: var(--c-amber-d); align-self: center; }

.sub-briefklok { display: grid; gap: 3px; border-left: 3px solid var(--c-groen); padding: 7px 11px;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0; background: var(--c-groen-t); }
.sub-briefklok span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.sub-briefklok strong { font-weight: 700; color: var(--c-ink); }
.sub-briefklok__grond { color: var(--c-ink-3); font-size: .62rem; }
.sub-briefklok__tekort { color: var(--c-amber-d); }
.sub-briefklok--krap { border-left-color: var(--c-amber-d); background: var(--c-amber-t); }
.sub-briefklok--dicht { border-left-color: var(--c-rood); background: var(--c-rood-t); }

/* ---- SUB A7 · het fotodossier in het paneel (bouwspec §2, §3).
   Gegroepeerd per maatregel, want de vraag is niet «hoeveel foto's» maar
   «heeft élke maatregel een vóór en een ná». De stip zegt de stand. ---- */
.sub-fotos { display: grid; gap: 11px; }
.sub-fotogroep { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 11px; }
.sub-fotogroep__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sub-fotogroep__kop strong { font: 700 .74rem var(--font-ui); }
.sub-fotostrip { display: flex; flex-wrap: wrap; gap: 7px; }

.sub-foto { position: relative; width: 74px; height: 56px; display: grid; place-items: center;
  border: var(--lijndikte) solid var(--c-lijn-2); border-left-width: 3px; border-radius: var(--radius-klein);
  background: var(--c-paneel); cursor: pointer; }
.sub-foto:hover { border-color: var(--c-groen-d); }
.sub-foto:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.sub-foto__fase { font: 700 .6rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); }
.sub-foto__gps { position: absolute; top: 2px; right: 4px; font-size: .62rem; color: var(--c-amber-d); }
.sub-foto.is-mee { border-left-color: var(--c-groen); }
.sub-foto.is-later { border-left-color: var(--c-amber-d); }
.sub-foto.is-klaar { border-left-color: var(--c-lijn-2); }

.sub-fotoleeg { font: 500 .68rem var(--font-ui); color: var(--c-ink-3); padding: 4px 0; }
.sub-fotovoet { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.sub-fotovoet strong { color: var(--c-ink-2); }