/* =====================================================================
   fin.css — Module 4.1 · Finance cockpit + debiteuren + close.
   Tokens only. Prefix fin-. Hergebruikt wdb-chip en bs-form.
===================================================================== */

.fin { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.fin-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.fin-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 70ch; }
.fin-tabs { display: flex; gap: 6px; }
.fin-tab { padding: 8px 15px; border-radius: 9px; font: 600 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.fin-tab.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; }
.fin-groen { color: var(--c-groen-d); }
.fin-amber { color: var(--c-amber); }
.fin-rood { color: var(--c-rood); }
.fin-sub { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 12px; }
.fin-breed { width: 100%; justify-content: center; margin-top: 12px; }

/* Exact Online-balk */
.fin-exact { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 14px; }
.fin-koppeling { display: inline-flex; align-items: center; gap: 7px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.fin-koppeling i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); }
.fin-koppeling i.is-groen { background: var(--c-groen); }
.fin-koppeling i.is-amber { background: var(--c-amber); }
.fin-koppeling--link { text-decoration: none; cursor: pointer; }
.fin-koppeling--link:hover strong { color: var(--c-amber); }
.fin-koppeling strong { font-size: .72rem; color: var(--c-ink); }
.fin-koppeling.mono { margin-left: auto; font-size: .6rem; color: var(--c-ink-3); }

/* cockpit */
.fin-pnl { padding: 16px 18px; margin-bottom: 14px; }
.fin-pnl__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.fin-pnl__kop strong { font-size: .84rem; }
.fin-pnl__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.fin-entiteiten { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.fin-entiteit { flex: 1; min-width: 220px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 14px; padding: 14px 16px; }
.fin-entiteit > strong { font-size: .84rem; }
.fin-entiteit__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.fin-entiteit__dot.is-groen { background: var(--c-groen); }
.fin-entiteit__dot.is-terra { background: var(--c-terra); }
.fin-entiteit > div { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px; }
.fin-entiteit > div span { display: block; font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.fin-entiteit > div strong { font-size: .96rem; }
.fin-entiteit em { display: block; font: 500 .6rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 8px; }
.fin-entiteit--con { background: var(--c-ink); color: #fff; border: none; }
.fin-entiteit--con .kicker { color: color-mix(in srgb, #fff 62%, transparent); }
.fin-entiteit--con > div span { color: color-mix(in srgb, #fff 62%, transparent); }
.fin-entiteit--con em { color: color-mix(in srgb, #fff 70%, transparent); }
.fin-leidend { border-radius: 16px; background: var(--c-ink); color: #fff; padding: 18px 22px; margin: 14px 0; }
.fin-leidend .kicker { color: var(--c-groen); display: block; margin-bottom: 12px; }
.fin-leidend > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .fin-leidend > div { grid-template-columns: 1fr; } }
.fin-leidend > div > div { padding: 13px 15px; border-radius: 12px; background: color-mix(in srgb, #fff 7%, transparent); }
.fin-leidend strong { display: block; font-size: .8rem; margin-bottom: 3px; }
.fin-leidend span { font: 400 .72rem/1.5 var(--font-ui); color: color-mix(in srgb, #fff 72%, transparent); }
.fin-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .fin-duo { grid-template-columns: 1fr; } }
.fin-paneel { padding: 18px 20px; margin-bottom: 14px; }
.fin-paneel > strong { display: block; font-size: .84rem; margin-bottom: 10px; }
.fin-paneel > .kicker { display: block; margin: 14px 0 8px; }
.fin-paneel--blok { border-color: var(--c-amber); }
.fin-paneel--leeg { color: var(--c-ink-3); font: 500 .74rem/1.5 var(--font-ui); }
.fin-pijp { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.fin-pijp > span { width: 96px; flex: none; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); }
.fin-pijpbalk { flex: 1; height: 8px; border-radius: 6px; background: var(--c-paneel); overflow: hidden; }
.fin-pijpbalk i { display: block; height: 100%; border-radius: 6px; background: var(--c-groen); }
.fin-pijp > strong { width: 30px; text-align: right; font-size: .76rem; }
.fin-pijp > em { width: 62px; text-align: right; font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.fin-blok { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 0; border: none; border-top: var(--lijndikte) solid var(--c-amber); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.fin-blok strong { display: block; font-size: .76rem; }
.fin-blok span:not(.chip) { font: 400 .66rem var(--font-ui); color: var(--c-amber); }
.fin-blok .chip { flex: none; font-size: .56rem; }

/* debiteuren */
.fin-buckets { margin-bottom: 12px; align-items: center; }
.fin-regelknop { margin-left: auto; }
.fin-debgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 1050px) { .fin-debgrid { grid-template-columns: 1fr; } }
.fin-deblijst { padding: 6px 0; overflow: hidden; }
.fin-debrij { display: grid; grid-template-columns: 42px 1.4fr 90px 110px 120px 1fr 64px; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 11px 16px; border: none; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.fin-debrij:hover { background: var(--c-creme); }
.fin-debrij.is-actief { background: var(--c-groen-t); }
.fin-debrij--kop { cursor: default; border-top: none; padding: 10px 16px 6px; font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.fin-debrij--kop:hover { background: transparent; }
.fin-debrij strong { font-size: .76rem; }
.fin-debrij > div .mono { display: block; font-size: .6rem; color: var(--c-ink-3); }
.fin-debrij > span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.fin-debrij .chip { font-size: .56rem; }
.fin-prio { width: 34px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--c-paneel); font-size: .62rem; font-weight: 800; color: var(--c-ink-2); }
.fin-extra { display: flex; gap: 5px; flex-wrap: wrap; }
.fin-exactst { font-size: .58rem; color: var(--c-groen-d); }
.fin-debrail { position: sticky; top: 12px; }
.fin-kasweek { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.fin-kasweek > span { width: 44px; flex: none; font: 600 .64rem var(--font-mono); color: var(--c-ink-3); }
.fin-kasweek strong { width: 76px; text-align: right; font-size: .68rem; }
.fin-dossier { border-color: var(--c-groen-d); }
.fin-dossier__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fin-dossier__kop strong { display: block; font-size: .84rem; }
.fin-dossier__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.fin-dossier__cijfers { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-dossier__cijfers span { display: block; font: 600 .56rem var(--font-ui); color: var(--c-ink-3); }
.fin-dossier__cijfers strong { font-size: .8rem; }
.fin-freeze { padding: 11px 13px; border-radius: 10px; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); font: 500 .7rem/1.5 var(--font-ui); margin-bottom: 12px; }
.fin-acties { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.fin-incassoknop { background: var(--c-rood); color: #fff; }
.fin-hist { display: flex; gap: 10px; padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .68rem/1.45 var(--font-ui); color: var(--c-ink-2); }
.fin-hist .mono { flex: none; font-size: .6rem; color: var(--c-ink-3); }

/* close */
.fin-closegrid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .fin-closegrid { grid-template-columns: 1fr; } }
.fin-maand { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; margin-bottom: 8px; }
.fin-maand.is-actief { border-color: var(--c-ink); background: var(--c-paneel); }
.fin-maand strong { font-size: .78rem; }
.fin-maand .chip { font-size: .56rem; }
.fin-maand em { font-style: normal; font-size: .58rem; color: var(--c-ink-3); }
.fin-close__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fin-closebalk { height: 9px; margin: 8px 0 6px; }
.fin-taak { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; margin-bottom: 7px; }
.fin-taak i { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: #fff; border: 1.5px solid var(--c-lijn-2); }
.fin-taak.is-klaar { border-color: var(--c-groen); background: var(--c-groen-t); }
.fin-taak.is-klaar i { border-color: var(--c-groen-d); background: var(--c-groen-d); }
.fin-taak span { font: 500 .72rem/1.45 var(--font-ui); }
.fin-taak[disabled] { opacity: .65; cursor: default; }
.fin-pbc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.fin-pbc i { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: #fff; }
.fin-pbc i.is-ok { background: var(--c-groen-d); }
.fin-pbc i.is-mis { background: var(--c-rood); }
.fin-pbc > span:not(.chip) { flex: 1; font: 500 .7rem/1.4 var(--font-ui); }
.fin-pbc .chip { font-size: .54rem; flex: none; }

/* Aging + actievoorstellen + profielen (D2b, 15-07) */
.fin-aging { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin-bottom: 14px; }
.fin-agingrij { display: grid; grid-template-columns: 140px 1fr 110px; gap: 12px; align-items: center; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; padding: 4px 0; color: var(--c-ink); }
.fin-agingrij.is-actief span:first-child { font-weight: 700; }
.fin-agingbalk { display: block; height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 6%, var(--c-paneel)); overflow: hidden; }
.fin-agingbalk b { display: block; height: 100%; border-radius: 99px; }
.fin-agingbalk .is-groen { background: var(--c-groen); }
.fin-agingbalk .is-amber { background: var(--c-amber); }
.fin-agingbalk .is-terra { background: var(--c-terra); }
.fin-advies { grid-column: 1 / -1; font-size: 11.5px; display: flex; gap: 8px; align-items: center; padding-top: 3px; }
.fin-advies i { font-style: normal; font-size: 9.5px; letter-spacing: .06em; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 1px 7px; color: var(--c-ink-2); }
.fin-advies--amber { color: var(--c-amber); font-weight: 600; }
.fin-advies--rood { color: var(--c-rood); font-weight: 700; }
.fin-advies--groen { color: var(--c-groen-d); }
.fin-advies--stil { color: var(--c-ink-2); }
.fin-profkop { grid-column: 1 / -1; margin-top: 6px; }

/* Werkbon-poort in de close (D3c) */
.fin-wbpoort { border: 1px solid var(--c-amber); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.fin-wbpoort.is-ok { border-color: var(--c-groen-d); color: var(--c-groen-d); }
.fin-wbpoort a { color: inherit; font-weight: 700; }

/* ---- B3b · dagelijkse actielijst (backend) ---- */
.fin-actierij { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fin-actierij:last-child { border-bottom: 0; }
.fin-actierij__prio { font-size: .9rem; font-weight: 700; }
.fin-actierij__prio.is-rood { color: var(--c-rood); }
.fin-actierij__prio.is-amber { color: var(--c-amber); }
.fin-actierij div { display: flex; flex-direction: column; }
.fin-actierij div strong { font: 600 .76rem var(--font-ui); }
.fin-actierij div span { font-size: .62rem; color: var(--c-ink-3); }

/* B16 · declaraties uit de veld-apps */
.fin-declrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; }
.fin-declrij > div { display: flex; flex-direction: column; gap: 2px; }
.fin-declrij strong { font-size: .8rem; }
.fin-declrij span { font-size: .68rem; color: var(--c-ink-2); }
.fin-knop { font: 700 .68rem var(--font-ui); background: var(--c-paneel); border: 1px solid var(--c-lijn-2); color: var(--c-ink); border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.fin-knop:hover { border-color: var(--c-ink); }

/* Close-taken die zichzelf toetsen (FT-4.1): de stand komt uit de
   administratie, dus een openstaande regel is geen vinkje maar werk. */
.fin-taak.is-open { border-color: var(--c-amber); }
.fin-taak.is-open > i { background: var(--c-amber-t); color: var(--c-amber); }
.fin-taak__stand { display: block; font-size: .68rem; color: var(--c-ink-2); margin-top: 3px; font-style: normal; }
.fin-taak__uitleg { display: block; font-size: .64rem; color: var(--c-ink-3); margin-top: 2px; font-style: normal; line-height: 1.5; }
.fin-sub--let { color: var(--c-ink-3); font-size: .68rem; line-height: 1.55; margin-top: 10px; }
.fin-pnlreeks { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }
.fin-pnlstaaf { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fin-pnlstaaf i { width: 100%; max-width: 42px; background: var(--c-groen); border-radius: 4px 4px 0 0; }
.fin-pnlstaaf span { font-size: .62rem; color: var(--c-ink-3); }

/* Zoeken + aanmaningsronde op de debiteurenlijst (FT-4.3): met 244 rijen
   vind je een dossier niet meer door te scrollen. */
.fin-zoek { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; }
.fin-zoek input { font: 400 .78rem var(--font-ui); color: var(--c-ink); padding: 6px 11px;
  border-radius: var(--radius); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn-2); min-width: 190px; }
.fin-ronde { margin-left: auto; }
.fin-hist__door { font-style: normal; color: var(--c-ink-3); font-size: .66rem; }

/* Facturen per post (19-07-2026): batches die klaarstaan om te printen. */
.fin-postbatch { padding: 12px 0 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; }
.fin-postrij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0;
  border-top: var(--lijndikte) solid var(--c-lijn-2); }
.fin-postrij:first-of-type { border-top: 0; }
.fin-postrij > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.fin-postrij span { font-size: .7rem; color: var(--c-ink-3); }
.btn.is-gedaan { border-color: var(--c-groen); color: var(--c-groen-d); }

/* Zelf kiezen welke facturen op de post gaan (19-07-2026). */
.fin-debrij { grid-template-columns: 28px auto 1.6fr auto auto auto 1fr auto 1.1fr; }
.fin-debrij--kop { grid-template-columns: 28px auto 1.6fr auto auto auto 1fr auto; }
.fin-kies { display: flex; align-items: center; justify-content: center; }
.fin-kies input { cursor: pointer; }
.fin-debrij.is-gekozen { background: var(--c-groen-t); }
.fin-postuitleg { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; }