/* Bankverificatie (versie 1.50.0, docs/BANKVERIFICATIE.md): het tabblad met de
   werklijst van de leveranciers die hun bankrekening in Continia moeten laten
   verifiëren. Eigen bestand naast stijl.css, met de kleuren en maten uit de
   huisstijl daar (CLAUDE.md §9). Alle namen beginnen met bvk-, zodat er niets
   botst met de rest van de app; stijl.css blijft ongemoeid. */

/* Het tabblad blijft verborgen tot de server zegt dat de gebruiker finance is. */
body.geen-finance #tab-bankverificatie{display:none}

.bvk-uitleg{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:12px 18px;margin-bottom:12px;box-shadow:var(--kaartschaduw);font-size:14px;line-height:1.55;max-width:1240px}
.bvk-uitleg p+p{margin-top:6px}
.bvk-let-op{color:var(--grijs);font-size:13px}

.bvk-waarschuwing{background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst);border-radius:14px;padding:10px 16px;margin-bottom:12px;font-size:13px;line-height:1.5;max-width:1240px;overflow-wrap:anywhere}
.bvk-waarschuwing p+p{margin-top:4px}

/* ---------- De drie tellers ---------- */
.bvk-tellers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;max-width:1240px}
.bvk-teller{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;background:#fff;border:1px solid var(--kaartrand);border-left:5px solid var(--blauw-soft);border-radius:14px;padding:12px 14px;box-shadow:var(--kaartschaduw);font-family:'Exo',Arial,sans-serif;color:var(--blauw-black);cursor:pointer;transition:background-color .15s,border-color .15s}
.bvk-teller:hover:not(:disabled){border-color:var(--blauw)}
.bvk-teller:focus-visible{outline:none;box-shadow:var(--focusring)}
.bvk-teller:disabled{cursor:default;opacity:.85}
.bvk-teller.bvk-teller-aan{background:var(--blauw-hairline);border-color:var(--blauw);border-left-width:5px}
.bvk-teller-voor1JanuariOpen.bvk-teller-signaal{border-left-color:var(--oranje)}
.bvk-teller-nieuwSindsLivegang.bvk-teller-signaal{border-left-color:var(--oranje)}
.bvk-teller-tegengehouden.bvk-teller-signaal{border-left-color:var(--rood)}
.bvk-teller-n{font-size:26px;font-weight:800;line-height:1.1;color:var(--blauw);font-variant-numeric:tabular-nums}
.bvk-teller-signaal .bvk-teller-n{color:var(--oranje-donker)}
.bvk-teller-tegengehouden.bvk-teller-signaal .bvk-teller-n{color:var(--rood)}
.bvk-teller-naam{font-size:13.5px;font-weight:800;color:var(--blauw-black)}
.bvk-teller-uitleg{font-size:12px;line-height:1.35;color:var(--grijs);overflow-wrap:anywhere}

/* ---------- Filters ---------- */
.bvk-balk{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-bottom:12px;max-width:1240px}
.bvk-balk label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;min-width:0}
.bvk-balk select,.bvk-balk input[type=search]{font-family:'Exo',Arial,sans-serif;font-size:13px;font-weight:600;color:var(--blauw);border:1px solid var(--kaartrand);border-radius:999px;padding:8px 14px;background:#fff;box-shadow:0 1px 3px rgba(3,21,63,.06);max-width:100%;text-transform:none;letter-spacing:0;min-width:0}
.bvk-balk select{padding-right:32px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073889' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
.bvk-balk select:hover,.bvk-balk input[type=search]:hover{border-color:var(--blauw)}
.bvk-balk select:focus-visible,.bvk-balk input:focus-visible{outline:none;box-shadow:var(--focusring)}
.bvk-balk label.bvk-vink{flex-direction:row;align-items:center;gap:8px;padding:8px 0;text-transform:none;letter-spacing:0;font-size:13px;color:var(--blauw-black);cursor:pointer}
.bvk-balk label.bvk-vink input{width:16px;height:16px;accent-color:var(--blauw);cursor:pointer}
.bvk-balk label.bvk-vink input:disabled+span{color:var(--grijs)}

/* De stand onder de titel en wat er net gebeurde voor schermlezers. */
.bvk-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- De lijst ---------- */
.bvk-lijst{display:flex;flex-direction:column;background:#fff;border:1px solid var(--kaartrand);border-left:5px solid var(--blauw-soft);border-radius:14px;box-shadow:var(--kaartschaduw);overflow:hidden;max-width:1240px}
.bvk-lijst>.leeg{border:none;box-shadow:none;margin:0}
.bvk-laadfout{display:flex;flex-direction:column;align-items:center;gap:10px}
.bvk-regel{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:12px 18px;border-bottom:1px solid var(--grijs-thin);font-size:14px;color:var(--blauw-black);min-width:0}
.bvk-regel:last-child{border-bottom:none}
.bvk-regel.bvk-regel-rood{box-shadow:inset 4px 0 0 var(--rood)}
.bvk-regel.bvk-regel-open,.bvk-regel.bvk-regel-geen{box-shadow:inset 4px 0 0 var(--oranje)}
.bvk-kop{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.bvk-prio{font-size:12px;font-weight:800;color:#fff;background:var(--blauw);border-radius:999px;padding:1px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bvk-prio.bvk-prio-1{background:var(--rood)}
.bvk-prio.bvk-prio-2{background:var(--oranje-donker)}
.bvk-prio.bvk-prio-3{background:var(--blauw)}
.bvk-prio.bvk-prio-4{background:var(--grijs)}
.bvk-lev{font-weight:700;font-size:15px;overflow-wrap:anywhere;min-width:0;flex:1 1 220px}
.bvk-levnr{font-weight:600;font-size:12.5px;color:var(--grijs);font-variant-numeric:tabular-nums}
.bvk-adm{font-size:12.5px;font-weight:700;color:var(--blauw);background:var(--blauw-hairline);border-radius:999px;padding:2px 10px;overflow-wrap:anywhere;min-width:0}
.bvk-delen,.bvk-vergelijkingen,.bvk-onder{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--grijs);min-width:0}
.bvk-delen>*,.bvk-vergelijkingen>*,.bvk-onder>*{min-width:0;overflow-wrap:anywhere}
.bvk-veld b{color:var(--blauw-black);font-weight:700}
.bvk-chip{font-size:12px;font-weight:600;color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:999px;padding:2px 11px}
.bvk-chip.bvk-zacht{color:var(--grijs);background:#fff;border-color:var(--grijs-thin)}
.bvk-chip.bvk-stand-open,.bvk-chip.bvk-stand-geen{color:var(--geel-tekst);background:var(--geel-bg);border-color:var(--geel-rand);font-weight:700}
.bvk-chip.bvk-stand-geverifieerd{color:var(--groen-tekst);background:var(--groen-bg);border-color:var(--groen-bg);font-weight:700}
.bvk-chip.bvk-rood{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand);font-weight:700}
.bvk-chip.bvk-nieuw{color:var(--blauw);background:#fff;border-color:var(--blauw-soft)}
.bvk-maker{font-size:12px;font-weight:600;color:var(--blauw-black)}
.bvk-maker.bvk-niet-door{color:var(--rood);font-weight:700}
.bvk-vgl{font-size:12px;color:var(--grijs);background:var(--grijs-thin);border-radius:999px;padding:2px 10px}
.bvk-vgl b{font-weight:800;color:var(--blauw-black)}
.bvk-vgl.bvk-vgl-ja{background:var(--groen-bg)}
.bvk-vgl.bvk-vgl-ja b{color:var(--groen-tekst)}
.bvk-vgl.bvk-vgl-nee{background:var(--rood-bg)}
.bvk-vgl.bvk-vgl-nee b{color:var(--rood)}
.bvk-factuur{font-family:'Exo',Arial,sans-serif;font-size:12px;font-weight:700;color:var(--blauw);background:#fff;border:1px solid var(--blauw-soft);border-radius:999px;padding:2px 10px;cursor:pointer;overflow-wrap:anywhere;max-width:100%}
.bvk-factuur:hover{border-color:var(--blauw)}
.bvk-factuur:focus-visible{outline:none;box-shadow:var(--focusring)}
/* Versie 1.58.0: een factuur die de boekpoort tegenhoudt of zou tegenhouden. */
.bvk-factuur.bvk-factuur-tegen{border-color:var(--rood);display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.bvk-factuur.bvk-factuur-tegen .bvk-chip{padding:0 8px}
.bvk-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.bvk-knop{padding:7px 14px;font-size:12.5px}
a.bvk-knop{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.bvk-knop:focus-visible{outline:none;box-shadow:var(--focusring)}
.bvk-meer{margin-top:12px}
.bvk-meer[hidden]{display:none}

/* Op een breed scherm staan de vergelijkingen en de knoppen naast de stand. */
@media (min-width:1100px){
  .bvk-regel{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;column-gap:22px;align-items:start}
  .bvk-kop{grid-column:1/-1}
  .bvk-delen{grid-column:1/2;grid-row:2}
  .bvk-vergelijkingen{grid-column:2/3;grid-row:2/4;flex-direction:column;align-items:flex-start;gap:4px}
  .bvk-onder{grid-column:1/2;grid-row:3}
  .bvk-knoppen{grid-column:3/4;grid-row:2/4;justify-content:flex-end;flex-direction:column;align-items:stretch}
}
/* Op telefoonbreedte: één kaart per regel, niets breder dan het scherm. */
@media (max-width:720px){
  .bvk-tellers{grid-template-columns:minmax(0,1fr);gap:8px}
  .bvk-teller{padding:10px 12px;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .bvk-teller-n{font-size:22px}
  .bvk-teller-uitleg{flex:1 1 100%}
  .bvk-uitleg,.bvk-waarschuwing{padding:10px 14px}
  .bvk-balk label{flex:1 1 100%}
  .bvk-balk select,.bvk-balk input[type=search]{width:100%}
  .bvk-lijst{background:transparent;border:none;box-shadow:none;border-radius:0;gap:10px;overflow:visible}
  .bvk-regel{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;box-shadow:var(--kaartschaduw);padding:12px 14px}
  .bvk-regel:last-child{border-bottom:1px solid var(--kaartrand)}
  .bvk-lijst>.leeg{background:#fff;border:1px solid var(--kaartrand);border-radius:14px}
  .bvk-knoppen .bvk-knop{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){.bvk-teller{transition:none}}

/* ---------- Bevestigen (versie 1.53.0, T0a, docs/BEVESTIGEN.md) ----------
   Alleen in beeld als de server het blok bevestigen geeft. Anders blijven het
   filter en de uitleg verborgen en is de eerste teller die van 1.50.0. */
.bvk-teller-nogNietBevestigd.bvk-teller-signaal{border-left-color:var(--oranje)}
.bvk-teller-deel{font-size:12.5px;font-weight:700;color:var(--blauw-black);font-variant-numeric:tabular-nums}
.bvk-balk label.bvk-bev-filter[hidden],.bvk-uitleg p.bvk-bev-uitleg[hidden]{display:none}
.bvk-bevestiging{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--grijs);min-width:0;padding-top:7px;border-top:1px dashed var(--grijs-thin)}
.bvk-bevestiging>*{min-width:0;overflow-wrap:anywhere}
.bvk-bev-titel{font-size:11px;font-weight:800;color:var(--blauw-black);text-transform:uppercase;letter-spacing:.05em}
.bvk-chip.bvk-bev-stand{font-weight:700}
.bvk-chip.bvk-bev-hulp{color:var(--geel-tekst);background:var(--geel-bg);border-color:var(--geel-rand);font-weight:700}
.bvk-vgl.bvk-bev-oranje{background:var(--geel-bg)}
.bvk-vgl.bvk-bev-oranje b{color:var(--geel-tekst)}
@media (min-width:1100px){
  .bvk-bevestiging{grid-column:1/3;grid-row:4}
}
@media (max-width:720px){
  .bvk-teller-deel{flex:1 1 100%}
}

/* ---------- Bevestigen T0b (versie 1.59.0, public/bevestigen.js) ---------- */
.bvk-t0b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%;min-width:0}
.bvk-t0b>*{min-width:0;overflow-wrap:anywhere}
.bvk-taken{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:4px}
.bvk-taak{background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst);border-radius:10px;padding:5px 10px;font-weight:700;font-size:12.5px}
.bvk-taak-geblokkeerd,.bvk-taak-rood{background:#fdecec;border-color:var(--rood);color:var(--rood)}
.bvk-chip.bvk-kleur-groen{color:var(--groen-tekst,#1d6b3a);background:var(--groen-bg,#e8f5ec);font-weight:700}
.bvk-chip.bvk-kleur-oranje{color:var(--geel-tekst);background:var(--geel-bg);border-color:var(--geel-rand);font-weight:700}
.bvk-chip.bvk-kleur-rood{color:var(--rood);background:#fdecec;border-color:var(--rood);font-weight:700}
.bvk-t0b-knoppen{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.bvk-t0b-knop[disabled]{opacity:.55;cursor:not-allowed}
.bvk-t0b-fout{color:var(--rood);font-size:13px;margin-top:10px}
.bvk-t0b-fout[hidden]{display:none}
.bvk-omschrijving{font-family:monospace;font-size:20px;font-weight:700;letter-spacing:.06em;background:var(--blauw-hairline);border-radius:10px;padding:12px 14px;margin:8px 0 4px;color:var(--blauw-black);overflow-wrap:anywhere}