/* Rekeningwijzigingen (13 oktober 2026, bouwplan V1, PR 1): het tabblad waarin
   finance aanvragen voor een nieuw rekeningnummer van een leverancier vastlegt
   en volgt. Eigen bestand naast stijl.css, met de kleuren en maten uit de
   huisstijl daar (CLAUDE.md §9). Alle namen beginnen met rw-. Op een laptop
   een tabel, op een smal scherm een kaart per aanvraag, zonder zijwaarts
   schuiven. */

/* Het tabblad blijft verborgen tot de server zegt dat de module er is en de gebruiker finance is. */
.tab[hidden]{display:none}
body.geen-finance #tab-rekeningwijzigingen{display:none}
#badge-rekeningwijzigingen[hidden]{display:none}

#paneel-rekeningwijzigingen .paneelkop .btn[hidden]{display:none}

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

/* Alleen voor schermlezers. */
.rw-verborgen,.rw-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.rw-melding{font-size:14px;line-height:1.5;border-radius:10px;padding:10px 14px;margin-bottom:12px;overflow-wrap:anywhere;max-width:1240px}
.rw-melding-rood{background:var(--rood-bg);border:1px solid var(--rood-rand);color:var(--rood)}
.rw-melding-geel{background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst)}

/* ---------- Filters en zoeken ---------- */
.rw-balk{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:14px}
.rw-balk[hidden]{display:none}
.rw-filters{display:flex;flex-wrap:wrap;gap:8px}
.rw-filter{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--kaartrand);background:#fff;color:var(--blauw);font-family:'Exo',Arial,sans-serif;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,background-color .15s,color .15s}
.rw-filter:hover{border-color:var(--blauw)}
.rw-filter.actief{background:var(--blauw);border-color:var(--blauw);color:#fff}
.rw-aantal{display:inline-block;min-width:22px;text-align:center;background:var(--hairline);color:var(--blauw);border-radius:999px;font-size:11.5px;font-weight:800;padding:2px 7px;font-variant-numeric:tabular-nums}
.rw-filter.actief .rw-aantal{background:#fff;color:var(--blauw)}
.rw-zoek{position:relative;display:flex;align-items:center}
.rw-zoek input{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;min-width:260px;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,box-shadow .15s}
.rw-zoek input::placeholder{color:var(--grijs);font-weight:500}
.rw-zoek input:focus{outline:none;border-color:var(--oranje);box-shadow:var(--focusring)}
@media (prefers-reduced-motion:reduce){.rw-filter,.rw-zoek input{transition:none}}

/* ---------- De werkvoorraad: een tabel op de laptop ---------- */
.rw-tabelvak{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;box-shadow:var(--kaartschaduw);overflow:hidden}
.rw-tabel{width:100%;border-collapse:collapse;font-size:14px}
.rw-tabel th{text-align:left;font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;padding:11px 12px;border-bottom:1px solid var(--hairline);background:#fcfdff;white-space:nowrap}
.rw-tabel td{padding:11px 12px;border-bottom:1px solid var(--hairline);vertical-align:top}
.rw-rij{cursor:pointer}
.rw-rij:hover td{background:var(--blauw-hairline)}
.rw-rij.open td{background:#f3f7fc;border-bottom-color:transparent}
.rw-c-id{white-space:nowrap}
.rw-c-leverancier{min-width:180px}
.rw-c-herkomst{min-width:140px}
.rw-open{font-family:'Exo',Arial,sans-serif;font-weight:800;font-size:14px;color:var(--blauw);background:none;border:none;padding:2px 0;cursor:pointer;white-space:nowrap;text-decoration:underline dotted;text-underline-offset:4px;text-decoration-color:var(--blauw-soft)}
.rw-open:hover{text-decoration-color:var(--oranje)}
.rw-naam{font-weight:700;color:var(--blauw-black);overflow-wrap:anywhere}
.rw-zacht{color:var(--grijs);font-weight:400}
.rw-klein{font-size:12.5px}
.rw-nummer{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.03em;white-space:nowrap;color:var(--blauw-black)}
.rw-punten{color:var(--grijs);letter-spacing:.1em}

/* Labels voor de stand en de kleur van een toets. */
.rw-chip{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap;border:1px solid transparent;line-height:1.4}
.rw-chip-blauw{background:var(--hairline);color:var(--blauw);border-color:var(--blauw-soft)}
.rw-chip-oranje{background:var(--oranje-bg);color:var(--oranje-donker);border-color:#f7d3b8}
.rw-chip-groen{background:var(--groen-bg);color:var(--groen-tekst);border-color:var(--groen-rand)}
.rw-chip-geel{background:var(--geel-bg);color:var(--geel-tekst);border-color:var(--geel-rand)}
.rw-chip-rood{background:var(--rood-bg);color:var(--rood);border-color:var(--rood-rand)}
.rw-chip-grijs{background:#f1f3f6;color:#4b5263;border-color:var(--grijs-thin)}

.rw-uitslag{display:inline-flex;gap:8px;flex-wrap:wrap}
.rw-u{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-variant-numeric:tabular-nums}
.rw-stip{display:inline-block;width:10px;height:10px;border-radius:50%}
.rw-u-groen .rw-stip{background:var(--groen)}
.rw-u-oranje .rw-stip{background:var(--oranje)}
.rw-u-rood .rw-stip{background:var(--rood)}
.rw-signalen{display:inline-flex;gap:6px;flex-wrap:wrap}
.rw-signaal{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst);font-weight:800;font-size:13px;cursor:help}
.rw-signaallijst{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px;margin-bottom:4px}
.rw-signaallijst li{overflow-wrap:anywhere;line-height:1.5;padding-left:16px;position:relative}
.rw-signaallijst li::before{content:"!";position:absolute;left:0;font-weight:800;color:var(--geel-tekst)}
.rw-blok+.rw-blok{margin-top:12px}

/* ---------- De kop van één aanvraag, direct onder zijn rij ---------- */
.rw-koprij td{padding:0;background:#f3f7fc;border-bottom:1px solid var(--hairline)}
.rw-kop{margin:0 12px 12px;padding:16px 18px;background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--oranje);border-radius:12px;box-shadow:var(--kaartschaduw);cursor:auto}
.rw-kopkop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.rw-kopkop h3{font-weight:800;font-size:17px;color:var(--blauw);letter-spacing:-.2px;line-height:1.3;overflow-wrap:anywhere}
.rw-feiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 24px;font-size:14px;margin-bottom:12px}
.rw-feiten dt{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.rw-feiten dd{overflow-wrap:anywhere;color:var(--blauw-black);line-height:1.5}
.rw-vol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rw-volnummer{font-size:17px;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--blauw-black);background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:8px;padding:4px 10px;overflow-wrap:anywhere}
.rw-aftellen{font-size:12.5px;font-weight:700;color:var(--geel-tekst);font-variant-numeric:tabular-nums}
.rw-blok h4{font-size:12px;font-weight:800;color:var(--blauw);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.rw-toetsen{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.rw-toetsen li{overflow-wrap:anywhere;line-height:1.5}
.rw-toetsuitleg{color:var(--blauw-black)}
.rw-verwijzing{margin-top:10px;font-size:14px;font-weight:600;color:var(--blauw)}
.rw-droog{margin-top:12px;font-size:13px;color:var(--blauw);font-weight:600}

/* Tabbladbalk blijft bovenaan staan als je rolt: wat de aandacht krijgt, komt eronder vandaan. */
#paneel-rekeningwijzigingen .rw-rij,#paneel-rekeningwijzigingen .rw-kop,#paneel-rekeningwijzigingen button,#paneel-rekeningwijzigingen input,#paneel-rekeningwijzigingen select{scroll-margin-top:var(--rw-kopruimte,120px)}
/* Bij een veld in het formulier ook het label erboven in beeld. */
#paneel-rekeningwijzigingen .rw-veld input,#paneel-rekeningwijzigingen .rw-veld select{scroll-margin-top:calc(var(--rw-kopruimte,120px) + 28px)}

/* Toetsenbord: een duidelijke blauwe rand om wat de aandacht heeft. */
#paneel-rekeningwijzigingen .btn:focus-visible,.rw-filter:focus-visible,.rw-open:focus-visible,.rw-signaal:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}

.rw-knoppen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.rw-knoppen .btn{min-height:40px}
.rw-knoppen .btn:disabled,#rw-nieuw:disabled{opacity:.55;cursor:default}
.rw-knoppen-klein{margin-top:8px}
.rw-knoppen-klein .btn{min-height:36px;font-size:12.5px;padding:7px 13px}

/* ---------- Het formulier Nieuwe aanvraag ---------- */
.rw-formulier{background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--oranje);border-radius:14px;padding:16px 18px 18px;box-shadow:var(--kaartschaduw);margin-bottom:16px;max-width:1240px}
.rw-formulier h3{font-weight:800;font-size:17px;color:var(--blauw);margin-bottom:2px}
.rw-groep{border:none;margin-top:14px;min-width:0}
.rw-groep legend{font-size:12px;font-weight:800;color:var(--blauw);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;padding:0}
.rw-formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.rw-veld[hidden]{display:none}
.rw-veld label,.rw-labeltekst{display:block;font-size:13px;font-weight:700;color:var(--blauw);margin-bottom:4px}
.rw-veld input[type=text],.rw-veld input[type=datetime-local],.rw-veld select{width:100%;font-family:'Exo',Arial,sans-serif;font-size:15px;border:1px solid var(--grijs-thin);border-radius:10px;padding:9px 11px;background:#fff;color:var(--blauw-black);transition:border-color .15s,box-shadow .15s;min-height:42px}
.rw-veld input:hover,.rw-veld select:hover{border-color:var(--blauw-soft)}
.rw-veld input:focus,.rw-veld select:focus{outline:none;border-color:var(--oranje);box-shadow:var(--focusring)}
.rw-veld input[aria-invalid="true"],.rw-veld select[aria-invalid="true"]{border-color:var(--rood)}
.rw-ibanveld{font-variant-numeric:tabular-nums;letter-spacing:.06em;text-transform:uppercase}
#rw-f-land,#rw-f-bic{text-transform:uppercase}
.rw-keuzes{display:flex;flex-wrap:wrap;gap:8px 18px;min-height:42px;align-items:center}
.rw-veld .rw-keuze{display:inline-flex;align-items:center;gap:7px;margin-bottom:0;font-size:15px;font-weight:600;color:var(--blauw-black);cursor:pointer}
.rw-keuze input{accent-color:var(--oranje);width:17px;height:17px}
.rw-hulp{font-size:12.5px;color:var(--grijs);margin-top:4px}
.rw-hulp .rw-goed,.rw-hulp.rw-goed,.rw-goed{color:var(--groen-tekst);font-weight:700}
.rw-veldfout{color:var(--rood);font-size:13px;font-weight:700;margin-top:4px}
.rw-veldfout:empty{display:none}
.rw-algemeen{color:var(--rood);font-size:14px;font-weight:700;margin-top:12px}
.rw-algemeen:empty{display:none}
.rw-vervang{background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst);border-radius:10px;padding:12px 14px;margin-top:14px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.rw-vervang p+p{margin-top:4px}
.rw-vervang .rw-knoppen{margin-top:10px}

.rw-laadfout p{margin-bottom:12px}
.rw-leeg{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;box-shadow:var(--kaartschaduw);padding:40px 20px}

/* ---------- Smaller dan een laptop: een kaart per aanvraag ---------- */
@media (max-width:1180px){
  .rw-tabelvak{background:none;border:none;box-shadow:none;border-radius:0;overflow:visible}
  .rw-tabel,.rw-tabel tbody{display:block;width:100%}
  .rw-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rw-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--blauw-soft);border-radius:14px;box-shadow:var(--kaartschaduw);margin-bottom:12px;padding:12px 14px}
  .rw-rij.open{border-left-color:var(--oranje);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
  .rw-rij td,.rw-rij:hover td,.rw-rij.open td{display:block;border:none;padding:0;background:none;min-width:0}
  .rw-rij td::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px}
  .rw-rij .rw-c-id,.rw-rij .rw-c-leverancier{grid-column:1/-1}
  .rw-rij .rw-c-id::before{content:none}
  .rw-rij .rw-c-leverancier::before{content:none}
  .rw-open{font-size:15px}
  .rw-koprij{display:block;margin-bottom:12px}
  .rw-koprij td{display:block;background:none;border:none}
  .rw-kop{margin:0;border-top-left-radius:0;border-top-right-radius:0;border-top:none}
  .rw-nummer{white-space:normal}
}
@media (max-width:640px){
  .rw-uitleg{padding:12px 14px;font-size:13.5px}
  .rw-balk{flex-direction:column;align-items:stretch}
  .rw-filter{padding:9px 12px}
  .rw-zoek input{width:100%;min-width:0;font-size:16px;padding:10px 14px}
  /* Zestien pixels: kleiner laat een iPhone inzoomen zodra je in het veld tikt. */
  .rw-veld input[type=text],.rw-veld input[type=datetime-local],.rw-veld select{font-size:16px;min-height:46px}
  .rw-veld .rw-keuze{font-size:16px;min-height:44px}
  .rw-formulier{padding:14px}
  .rw-formgrid{grid-template-columns:minmax(0,1fr)}
  .rw-feiten{grid-template-columns:minmax(0,1fr)}
  .rw-kop{padding:14px}
  .rw-kopkop{flex-direction:column;gap:6px}
  /* Knoppen onder elkaar over de hele breedte: goed te raken met een duim. */
  .rw-knoppen{flex-direction:column;align-items:stretch}
  .rw-knoppen .btn{width:100%;min-height:46px;font-size:14px}
  .rw-knoppen-klein .btn{min-height:44px}
  #paneel-rekeningwijzigingen .paneelkop .btn{width:100%;min-height:46px;margin-left:0}
}