/* crediteuren.css — scherm `crediteuren` (bouwspec CREDITEUREN §3).
   Vorm en kleur komen uit casa360-stijl.css; hier staat alleen wat dit
   scherm eigen is: de twee kolommen van de inbox, de betaalrijen en het
   xml-vlak. Geen kleurliteral — de vier betekeniskleuren doen het werk. */

.cred { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }

.cred-kop { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.cred-kop h1 { font-size: 22px; margin: 4px 0 0; font-weight: 800; }
.cred-sub { color: var(--ink2); font-size: 12.5px; margin: 3px 0 0; }
.cred-tabs { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
.cred-tab { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-pill);
  padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.cred-tab:hover { border-color: var(--lijn2); }
.cred-tab.is-actief { background: var(--ink); border-color: var(--ink); color: var(--kaart); }

.cred-bak { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .cred-bak { grid-template-columns: 1fr; } }

.cred-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart); overflow: hidden; }
.cred-kaart--los { margin-top: 14px; }
.cred-bakkop { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--lijn); background: var(--vlak); flex-wrap: wrap; }
.cred-bakkop b { font-size: 13px; }
.cred-bakkop span { font-size: 11px; color: var(--ink3); }
.cred-leeg { padding: 26px; text-align: center; color: var(--ink3); }
.cred-fout { padding: 12px 14px; border: 1px solid var(--stop); border-radius: var(--radius);
  background: var(--stop-t); color: var(--stop); margin-bottom: 14px; }

/* ---- inbox-lijst ---- */
.cred-rij { display: grid; grid-template-columns: 92px minmax(0, 1fr) 120px 118px; gap: 11px; align-items: center;
  padding: 9px 13px; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.cred-rij:last-child { border-bottom: 0; }
.cred-rij--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); font-weight: 700; cursor: default; }
.cred-rij:not(.cred-rij--kop):hover { background: var(--vlak); }
.cred-rij.is-gekozen { background: var(--accent-t); }
.cred-naam { font-weight: 700; }
.cred-fijn { color: var(--ink3); font-size: 11px; line-height: 1.45; }
.cred-sig { font-size: 10.5px; line-height: 1.45; margin-top: 3px; color: var(--ink3); }
.cred-sig--stop { color: var(--stop); }

.cred-pil { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px;
  border-radius: var(--radius-pill); white-space: nowrap; }
.cred-pil--goed { background: var(--goed-t); color: var(--goed); }
.cred-pil--let { background: var(--let-t); color: var(--let); }
.cred-pil--stop { background: var(--stop-t); color: var(--stop); }
.cred-pil--acc { background: var(--accent-t); color: var(--accent-d); }
.cred-pil--stil { background: var(--vlak); color: var(--ink2); }
.cred-pillen { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- dossierpaneel ---- */
.cred-paneel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart); position: sticky; top: 14px; overflow: hidden;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.cred-paneelkop { padding: 12px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.cred-paneelnaam { font-weight: 800; font-size: 15px; margin-top: 2px; }
.cred-paneellijf { padding: 12px 14px; overflow: auto; }
.cred-paneelvoet { padding: 10px 14px; border-top: 1px solid var(--lijn); background: var(--vlak);
  display: flex; gap: 6px; flex-wrap: wrap; }

.cred-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 11px; margin-bottom: 9px; }
.cred-tegel--stop { border-color: var(--stop); background: var(--stop-t); }
.cred-tegel--let { border-color: var(--let); background: var(--let-t); }
.cred-tegel--goed { border-color: var(--goed); background: var(--goed-t); }
.cred-tegel--plat { margin: 0; }
.cred-tegel h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); }
.cred-uitleg { background: var(--kaart); margin-bottom: 14px; line-height: 1.55; }
.cred-uitlegblok { padding: 11px 13px; }

.cred-paar { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12px;
  align-items: flex-start; line-height: 1.5; }
.cred-paar--streep { border-top: 1px solid var(--lijn); margin-top: 7px; padding-top: 6px; }
.cred-bedrag { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.cred-bedrag.is-stop, .is-stop { color: var(--stop); }
.cred-bedrag.is-let { color: var(--let); }
.cred-bedrag.is-goed, .is-goed { color: var(--goed); }

.cred-pdfblok { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 11px; margin-bottom: 9px; }
.cred-pdf { background: var(--ink); border-radius: var(--radius-klein); aspect-ratio: 1/1.414;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--kaart); gap: 4px; font-size: 11px; }
.cred-pdf__g { font-size: 13px; font-weight: 800; letter-spacing: .05em; }

.cred-veldrij { display: grid; grid-template-columns: 126px minmax(0, 1fr) 74px; gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--lijn); font-size: 12px; }
.cred-veldrij:last-of-type { border-bottom: 0; }
.cred-veldrij label { color: var(--ink2); }
.cred-veldrij input { width: 100%; font: inherit; font-family: var(--font-mono); border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 4px 7px; background: var(--kaart); color: var(--ink); }
.cred-veldrij input.is-laag { border-color: var(--let); background: var(--let-t); }
.cred-veldrij input.is-fout { border-color: var(--stop); background: var(--stop-t); }
.cred-knopveld { display: flex; gap: 5px; align-items: center; }
.cred-knopveld input { flex: 1; }
.cred-zeker { font-size: 10px; font-weight: 800; text-align: right; font-family: var(--font-mono); color: var(--ink3); }
.cred-zeker--goed { color: var(--goed); }
.cred-zeker--let { color: var(--let); }
.cred-zeker--stop { color: var(--stop); }

.cred-rblok { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 7px;
  margin-bottom: 6px; background: var(--vlak); }
.cred-rblok.is-mis { border-color: var(--stop); background: var(--stop-t); }
.cred-rblok.is-laag { border-color: var(--let); background: var(--let-t); }
.cred-rA { display: grid; grid-template-columns: minmax(0, 1fr) 54px 82px 26px; gap: 6px; align-items: center; margin-bottom: 5px; }
.cred-rB { display: grid; grid-template-columns: minmax(0, 1fr) 64px 110px; gap: 6px; align-items: center; }
.cred-rblok input, .cred-rblok select { width: 100%; font: inherit; font-size: 11.5px; border: 1px solid var(--lijn);
  border-radius: 4px; padding: 3px 5px; background: var(--kaart); color: var(--ink); }
.cred-rblok select.is-leeg { border-color: var(--stop); }
.cred-num { font-family: var(--font-mono); text-align: right; }
.cred-rvoet { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--ink3);
  margin-top: 4px; line-height: 1.4; }
.cred-weg { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 4px; color: var(--stop);
  font: inherit; font-weight: 800; padding: 0; height: 22px; cursor: pointer; }
.cred-regelknoppen { display: flex; gap: 6px; margin: 2px 0 4px; }

/* ---- betaallijst en de brede tabellen ---- */
.cred-rijb { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px 172px 130px 112px; gap: 10px;
  align-items: center; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; }
.cred-rijb:last-child { border-bottom: 0; }
.cred-rijb--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); font-weight: 700; }
.cred-rijb--som { background: var(--vlak); }
.cred-rijb--stil { opacity: .85; }
.cred-rijb.is-gekozen { background: var(--accent-t); }
.cred-rijb.is-verlopen .cred-verv { color: var(--stop); font-weight: 800; }
.cred-rijb.is-nu .cred-verv { color: var(--let); font-weight: 800; }
.cred-rijb input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.cred-rechts { text-align: right; }
.cred-iban { font-size: 11px; }

.cred-selbalk { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--accent-t);
  border-bottom: 1px solid var(--accent); flex-wrap: wrap; }
.cred-groep { padding: 9px 13px; background: var(--vlak); border-bottom: 1px solid var(--lijn);
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cred-groep b { font-size: 12.5px; }
.cred-groep span { font-size: 11px; color: var(--ink3); }
.cred-groepknoppen { margin-left: auto; display: flex; gap: 6px; }
.cred-weigering { padding: 9px 13px; background: var(--stop-t); border-bottom: 1px solid var(--lijn);
  font-size: 11.5px; color: var(--stop); line-height: 1.6; }
.cred-weigering .cred-fijn { color: var(--ink2); }

.cred-rijg { display: grid; grid-template-columns: 70px minmax(0, 1fr) 150px 60px 130px 150px; gap: 10px;
  align-items: center; padding: 7px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; }
.cred-rijl { display: grid; grid-template-columns: minmax(0, 1fr) 110px 180px 80px 170px 60px; gap: 10px;
  align-items: center; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; }
.cred-rijg--kop, .cred-rijl--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.cred-rijg:last-child, .cred-rijl:last-child { border-bottom: 0; }
.cred-rijl:not(.cred-rijl--kop):hover { background: var(--vlak); }

/* ---- vensters ---- */
.cred-mask { position: fixed; inset: 0; background: rgba(20, 20, 20, .45); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; }
.cred-venster { background: var(--kaart); border-radius: var(--radius); width: min(680px, 94vw); max-height: 84vh;
  display: flex; flex-direction: column; box-shadow: var(--schaduw-zwevend); overflow: hidden; }
.cred-vensterkop { padding: 12px 15px; border-bottom: 1px solid var(--lijn); background: var(--vlak);
  display: flex; align-items: center; gap: 10px; }
.cred-vensterkop b { font-size: 14px; }
.cred-x { margin-left: auto; }
.cred-vensterlijf { padding: 13px 15px; overflow: auto; }
.cred-venstervoet { padding: 10px 15px; border-top: 1px solid var(--lijn); background: var(--vlak);
  display: flex; gap: 6px; align-items: center; }
.cred-zoekbalk { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 7px 10px; background: var(--kaart); color: var(--ink); }
.cred-treffers { margin: 10px 0; }
.cred-tref { display: grid; grid-template-columns: minmax(0, 1fr) 130px 80px; gap: 10px; align-items: center;
  padding: 7px 8px; border-bottom: 1px solid var(--lijn); cursor: pointer; border-radius: var(--radius-klein); }
.cred-tref:hover, .cred-tref:focus-visible { background: var(--accent-t); }
.cred-vform { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 12px; }
.cred-vform input, .cred-vform select { font: inherit; font-size: 12px; border: 1px solid var(--lijn);
  border-radius: 4px; padding: 5px 7px; width: 100%; background: var(--kaart); color: var(--ink); }
.cred-xml { background: var(--ink); color: var(--kaart); font-family: var(--font-mono); font-size: 10.5px;
  line-height: 1.5; padding: 11px 13px; border-radius: var(--radius-klein); overflow: auto;
  max-height: 46vh; white-space: pre; }

/* ---- knoppen: eigen klassen, want het platform kent nog geen gedeelde
   knopcomponent buiten de bouwstenen om ---- */
.cred-knop { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein);
  padding: 5px 11px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: border-color var(--overgang), background var(--overgang); }
.cred-knop:hover { border-color: var(--lijn2); background: var(--grijs); }
.cred-knop--zwart { background: var(--ink); color: var(--kaart); border-color: var(--ink); }
.cred-knop--zwart:hover { background: var(--ink); border-color: var(--ink); }
.cred-knop--stop { color: var(--stop); border-color: var(--stop); }
.cred-knop--stop:hover { background: var(--stop-t); border-color: var(--stop); }
.cred-knop--klein { padding: 3px 9px; font-size: 10.5px; }
.cred-knop[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- bankmutaties (fase 5) ---- */
.cred-mutatieveld { width: 100%; font-family: var(--font-mono); font-size: 11.5px; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 8px 10px; background: var(--kaart); color: var(--ink);
  line-height: 1.6; resize: vertical; }