/* ============================================================
   Zoals vorige keer en vaste boekwijze (01-10). Alleen bestaande tokens;
   licht en donker (data-theme="dark") lopen via de tokens mee. Het blok
   in het detail (.vk) en het overzicht naast de regels (.bw) stapelen
   onder 640px.
   ============================================================ */

.vk { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--bg-2); }
.vk-kop { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 13px; color: var(--text); }
.vk-kop .fi-noot { margin: 0; }

.vk-vast { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); box-shadow: inset 3px 0 0 var(--brand); }
.vk-vast__t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.vk-vast__t b { font-weight: 600; font-size: 12.5px; color: var(--text); }
.vk-vast__t span { font-size: 12px; line-height: 1.45; color: var(--text-2); }

.vk-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vk-factuur { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t k" "w k"; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.vk-factuur__t { grid-area: t; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.vk-factuur__t b { font-weight: 600; color: var(--text); }
.vk-geld { font-variant-numeric: tabular-nums; }
.vk-waar { grid-area: w; font-size: 12px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.vk-factuur > .btn, .vk-factuur > .fi-noot { grid-area: k; margin: 0; }
.vk .btn--sm { padding: 5px 10px; font-size: 12px; white-space: nowrap; }

.vk-voet { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.vk-voet > .btn { display: inline-flex; align-items: center; gap: 6px; }
.vk-voorrang { flex: 1; min-width: 200px; font-size: 12px; color: var(--text-2); }
.vk-voorrang summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.vk-voorrang ol { margin: 6px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.vk-voorrang .fi-noot { margin: 4px 0 0; }

@media (max-width: 640px) {
  .vk-factuur { grid-template-columns: 1fr; grid-template-areas: "t" "w" "k"; }
  .vk-factuur > .btn { justify-self: start; }
}

/* Overzicht naast de regels: hergebruikt .fr-* van fi-regels.css. */
.bw-regel { box-shadow: inset 3px 0 0 var(--brand-soft); }
.bw-form { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.bw-form__rij { display: flex; gap: 10px; flex-wrap: wrap; }
.bw-groei { flex: 1; min-width: 200px; }
.bw-smal { width: 160px; }
.bw-form .fi-veld input, .bw-form .fi-veld select { width: 100%; box-sizing: border-box; }

/* Boekingssjabloon (17-10): de boekregels in het formulier (.bw-sj), de proefverdeling, de regels in het
   overzicht (.bw-sjabloon) en het voorstel in het factuurdetail (.sj). Alleen tokens, licht en donker lopen mee. */
.bw-form .fi-noot.bw-groei { margin: 0; align-self: center; }
.bw-regels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bw-sj { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.bw-sj.is-rest { box-shadow: inset 3px 0 0 var(--brand); }
.bw-sj__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); }
.bw-sj__kop b { font-weight: 600; }
.bw-sj__kop .fr-weg { margin-left: auto; }
.bw-rest { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.bw-restbedrag { display: block; padding: 7px 0; font-size: 13px; font-weight: 500; color: var(--text-2); }
.bw-proef { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line-strong); font-size: 12px; color: var(--text-2); }
.bw-proef b { font-weight: 600; color: var(--text); }
.bw-proef ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bw-proef li { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.bw-sjabloon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-2); }
.bw-sjabloon li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.bw-sjabloon li:last-child { border-bottom: 0; }
.bw-sjabloon b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Grootboekrekeningen (lokale lijst, komt later uit Exact Online). */
.gb-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gb-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--text-2); }
.gb-rij.is-uit { opacity: 0.7; }
.gb-rij > .bw-form { flex: 1 1 100%; }
.gb-nummer { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 56px; }
.gb-oms { flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.gb-k { margin-left: auto; }
.gb .btn--sm { padding: 5px 10px; font-size: 12px; white-space: nowrap; }

/* Het voorstel in het factuurdetail. */
.sj { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-2); box-shadow: inset 3px 0 0 var(--brand); }
.sj .fi-check { margin: 0; }
.sj-regels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sj-regel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.sj-regel.is-rest { border-style: dashed; }
.sj-regel__t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; font-size: 12px; color: var(--text-2); }
.sj-regel__t b { font-weight: 600; font-size: 12.5px; color: var(--text); }
.sj-bedrag { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-weight: 600; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.sj-bedrag em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-2); }
.sj-vast { width: 160px; }
.sj-vast input { width: 100%; box-sizing: border-box; text-align: right; }
.sj-som { display: flex; align-items: center; gap: 6px; margin: 0; }

@media (max-width: 640px) {
  .bw-smal, .sj-vast { width: 100%; }
  .gb-k { margin-left: 0; }
}