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


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

.fac-tabs { display: flex; gap: 6px; }
.fac-tab { padding: 8px 14px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill);
  background: var(--c-creme); color: var(--c-ink-2); font: 600 .72rem var(--font-ui); cursor: pointer; }
.fac-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }

/* ---- Warmtefonds-strook: altijd in beeld, klikbaar naar finwf ---- */
.fac-wfbalk { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 11px 16px; border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius);
  background: var(--c-amber-t); text-decoration: none; color: inherit; box-shadow: var(--schaduw-tegel); }
.fac-wfbalk:hover { box-shadow: var(--schaduw-tegel-hover); }
.fac-wfbalk.is-hier { cursor: default; }
.fac-wfbalk__merk { display: flex; flex-direction: column; min-width: 220px; }
.fac-wfbalk__merk i { display: none; }
.fac-wfbalk__merk strong { font: 700 .8rem var(--font-ui); color: var(--c-amber); }
.fac-wfbalk__merk em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-2); }
.fac-wfbalk__cel { display: flex; flex-direction: column; }
.fac-wfbalk__cel span { font: 500 .6rem var(--font-ui); color: var(--c-ink-2); }
.fac-wfbalk__cel strong { font: 700 .78rem var(--font-mono); color: var(--c-ink); }
.fac-wfbalk__cel.is-rood strong { color: var(--c-rood); }
.fac-wfbalk__pijl { margin-left: auto; font: 600 .68rem var(--font-ui); color: var(--c-amber); }

/* ---- mijlpaal-werkvoorraad ---- */
.fac-mijlpalen { padding: 0; overflow: hidden; }
.fac-mijlpaal { display: grid; grid-template-columns: 14px 1.5fr 1fr auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fac-mijlpaal:last-child { border-bottom: 0; }
.fac-mijlpaal__dot { width: 9px; height: 9px; border-radius: 50%; }
.fac-mijlpaal__dot.is-groen { background: var(--c-groen); }
.fac-mijlpaal__dot.is-rood { background: var(--c-rood); }
.fac-mijlpaal__wat { display: flex; flex-direction: column; }
.fac-mijlpaal__wat strong { font: 600 .76rem var(--font-ui); }
.fac-mijlpaal__wat span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.fac-mijlpaal__termijn { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.fac-poortchip { font: 600 .64rem var(--font-ui); color: var(--c-rood); background: var(--c-rood-t);
  padding: 5px 10px; border-radius: var(--radius-pill); }

/* ---- filters + facturenlijst ----
   Eén filterlat: statuspills links, filter/export rechts. De acties stonden
   eerder ín de pill-groep, waardoor de pills meerekten met de knophoogte. */
.fac-flts { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.fac-flts__set { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fac-flts__acties { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fac-flts__acties .btn { display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; font-size: .72rem; }
.fac-flt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill);
  background: #fff; color: var(--c-ink-2); font: 700 .7rem var(--font-ui); cursor: pointer; }
.fac-flt strong { font: 700 .68rem var(--font-mono); color: var(--c-ink-3); }
.fac-flt:hover { background: var(--c-creme); color: var(--c-ink); }
.fac-flt.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.fac-flt.is-actief strong { color: var(--c-groen-d); }
.fac-flt--los { margin-left: 8px; }

.kaart--strak { padding: 0; overflow: hidden; }
.fac-rij { display: grid; grid-template-columns: 30px 96px 1.3fr 1.1fr 96px 150px 110px 120px; gap: 10px;
  align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.fac-rij:last-child { border-bottom: 0; }
.fac-rij:hover { background: var(--c-creme); }
.fac-rij.is-open { background: var(--c-groen-t); }
.fac-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); }
.fac-rij--kop:hover { background: var(--c-paneel); }
.fac-vink { width: 18px; height: 18px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 5px;
  background: var(--c-creme); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.fac-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); }
.fac-rij__nr { font: 600 .7rem var(--font-mono); color: var(--c-groen-d); }
.fac-rij__klant { display: flex; flex-direction: column; }
.fac-rij__klant strong { font: 600 .76rem var(--font-ui); }
.fac-rij__klant span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.fac-rij__type { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.fac-rij__tot { font-size: .78rem; }
.fac-rij__kanalen { font-size: .62rem; color: var(--c-ink-2); }
.fac-rij__st { justify-self: end; }

/* ---- editor ---- */
.fac-editor { padding: 16px 18px; }
.fac-editor__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fac-editor__kop strong.mono { font-size: .9rem; }
.fac-editor__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-artikelkeuze { display: flex; gap: 8px; margin-bottom: 12px; padding: 10px; border: var(--lijndikte) dashed var(--c-lijn-2);
  border-radius: var(--radius); background: var(--c-creme); }
.fac-artikelkeuze select { flex: 1; }
.fac-artikelkeuze input { width: 84px; }
.fac-regel { display: grid; grid-template-columns: 1fr auto 120px 30px; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fac-regel__wat { display: flex; flex-direction: column; }
.fac-regel__wat strong { font: 600 .74rem var(--font-ui); }
.fac-regel__wat span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.fac-regel__aantal { width: 76px; }
.fac-regel__weg { border: 0; background: none; color: var(--c-rood); font-size: .8rem; cursor: pointer; }
.fac-totalen { max-width: 340px; margin-left: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.fac-totalen > div { display: flex; justify-content: space-between; gap: 16px; font: 600 .74rem var(--font-ui); }
.fac-totalen > div.is-stil { font-weight: 500; color: var(--c-ink-2); }
.fac-totalen > div.is-eind { border-top: var(--lijndikte) solid var(--c-lijn-2); padding-top: 7px; font-size: .84rem; }
.fac-betaalinfo { margin-top: 16px; padding: 13px 15px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); }
.fac-betaalinfo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 9px; }
.fac-betaalinfo__grid > div { display: flex; flex-direction: column; gap: 2px; }
.fac-betaalinfo__grid strong { font: 700 .72rem var(--font-ui); }
.fac-betaalinfo__grid span { font: 500 .64rem var(--font-mono); color: var(--c-ink-2); }
.fac-betaalinfo__grid em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }
.fac-betaalinfo__grid > div.is-wf { padding: 8px 10px; border-radius: 10px; background: var(--c-amber-t); }
.fac-betaalinfo__voldaan { margin-top: 10px; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); }
.fac-verstuurinfo { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px;
  font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.fac-hint { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); margin-right: auto; }

/* ---- knoppen ---- */
.fac-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; }
.fac-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: #fff; box-shadow: var(--schaduw-knop); }
.fac-knop--primair:hover { background: var(--gradient-primair-hover); }
.fac-knop--rood { background: var(--c-rood); border-color: var(--c-rood); color: #fff; }
.fac-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }

/* ---- termijnen & poorten ---- */
.fac-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
.fac-schema { padding: 14px 18px; }
.fac-schema p { margin: 0 0 10px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.fac-termijn { display: grid; grid-template-columns: 56px 1fr 90px auto; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fac-termijn:last-of-type { border-bottom: 0; }
.fac-termijn__pct { font-size: .92rem; color: var(--c-groen-d); }
.fac-termijn div { display: flex; flex-direction: column; }
.fac-termijn div strong { font: 600 .74rem var(--font-ui); }
.fac-termijn div span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.fac-schema__som { margin-top: 10px; font-size: .66rem; color: var(--c-ink-2); }
.fac-iso { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; }
.fac-iso > strong { font-size: 1.5rem; color: var(--c-groen-d); }
.fac-iso div { display: flex; flex-direction: column; gap: 3px; }
.fac-iso div strong { font: 700 .76rem var(--font-ui); }
.fac-iso div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.fac-poortkaart { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.fac-poortkaart em { font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }
.fac-poortkaart__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-liq { padding: 14px 18px; }
.fac-liq__rij { display: grid; grid-template-columns: 48px 1.2fr 1fr 90px; gap: 10px; align-items: center;
  padding: 7px 0; font: 500 .7rem var(--font-ui); }
.fac-liq__balk { height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.fac-liq__balk i { display: block; height: 100%; border-radius: var(--radius-pill); }
.fac-liq__balk i.is-in { background: var(--c-groen); }
.fac-liq__balk i.is-uit { background: var(--c-terra); }
.fac-liq__waarschuwing { margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--c-amber-t); color: var(--c-amber); font: 600 .68rem var(--font-ui); }

/* ---- betalingen & reconciliatie ---- */
.fac-betaling { display: grid; grid-template-columns: 110px 92px 1.5fr 60px 100px auto; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); }
.fac-betaling:last-child { border-bottom: 0; }
.fac-betaling__oms { color: var(--c-ink-2); }

/* ---- warmtefonds-scherm ---- */
.fac-wfpijp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; }
.fac-wfstap { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 108px;
  padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); }
.fac-wfstap span { font: 600 .62rem var(--font-ui); color: var(--c-ink-2); text-align: center; }
.fac-wfstap strong { font: 700 .9rem var(--font-mono); }
.fac-wfstap.heeft-dossiers { border-color: var(--c-amber); background: var(--c-amber-t); }
.fac-wfstap.is-rood { border-color: var(--c-rood); background: var(--c-rood-t); }
.fac-wfstap.is-rood strong { color: var(--c-rood); }
.fac-wfstap__pijl { color: var(--c-ink-3); font-size: .8rem; }
.fac-wfgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 22px; align-items: start; }
.fac-wfrij { display: grid; grid-template-columns: 92px 1.2fr 1fr auto 1fr; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.fac-wfrij:last-child { border-bottom: 0; }
.fac-wfrij:hover { background: var(--c-creme); }
.fac-wfrij.is-open { background: var(--c-amber-t); }
.fac-wfrij__id { font: 600 .66rem var(--font-mono); color: var(--c-amber); }
.fac-wfrij div { display: flex; flex-direction: column; }
.fac-wfrij div strong { font: 600 .74rem var(--font-ui); }
.fac-wfrij div span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.fac-wfrij__bedrag span { font-family: var(--font-ui); }
.fac-wfrij__meta { font-size: .62rem; color: var(--c-ink-2); }
.fac-wfpaneel { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.fac-wfpaneel__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fac-wfpaneel__kop strong { font: 700 .9rem var(--font-ui); display: block; margin-top: 2px; }
.fac-wfpaneel p { margin: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.fac-wfpaneel__cijfers { display: flex; gap: 16px; flex-wrap: wrap; font-size: .64rem; color: var(--c-ink-2); }
.fac-wfpaneel__cijfers strong { color: var(--c-ink); }
.fac-wfpaneel__acties { display: flex; gap: 8px; flex-wrap: wrap; }

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

/* B3c · termijnplan uit de backend + schema-editor */
.fac-termijn--schema { grid-template-columns: 56px 1fr auto; }
.fac-termijn--b3c { grid-template-columns: 56px 1fr 90px auto auto; }
.fac-b3c-editor { padding: 4px 2px 10px; }
.fac-b3c-rij { display: grid; grid-template-columns: 1fr 64px 150px 150px 28px; gap: 8px; align-items: center; padding: 4px 0; }
.fac-b3c-rij input, .fac-b3c-rij select { font: 500 .7rem var(--font-ui); padding: 7px 9px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; background: var(--c-paneel); color: var(--c-ink); }
.fac-b3c-rij input.mono { font-family: var(--font-mono); }
.fac-b3c-rij--kop { padding-bottom: 2px; }
.fac-b3c-rij--kop span { font: 700 .58rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }

/* De factureerbare stapel als werkbank (FT-4.2): zoeken, filteren,
   pagineren en een selectie in één keer wegwerken. */
.fac-stapelbalk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 0; }
.fac-zoekveld { flex: 1; min-width: 210px; max-width: 420px; height: 30px; font: 400 .76rem var(--font-ui);
  color: var(--c-ink); padding: 0 12px; border-radius: var(--radius); background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); }
/* (de tweede .fac-flt-definitie is vervallen — hij overschreef de eerste
   half en gaf twee verschillende pill-maten op hetzelfde scherm) */
.fac-stapelstand { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; }
.fac-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px;
  border-radius: var(--radius); background: var(--c-groen-t); margin-bottom: 8px; font-size: .78rem; }
.fac-bulk > div { flex: 1; min-width: 200px; }
.fac-bulk strong { font-size: .95rem; }
.fac-kies { display: flex; align-items: center; }
.fac-mijlpaal.is-gekozen { background: var(--c-groen-t); }
.fac-pagineer { display: flex; gap: 8px; justify-content: center; padding: 12px 0 4px; }