/* Afwijsberichten (5 oktober 2026): het tabblad waarin finance de berichten aan
   leveranciers per bericht beoordeelt. Eigen bestand naast stijl.css, met de
   kleuren en maten uit de huisstijl daar (CLAUDE.md §9). Alle namen beginnen
   met ab-, zodat er niets botst met de bestaande dialoog voor het afwijzen
   van een factuur (afwijs-overlay). */

/* Het tabblad blijft verborgen tot er berichten zijn en de gebruiker finance is. */
.tab[hidden]{display:none}
body.geen-finance #tab-afwijsberichten{display:none}

.ab-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}
.ab-uitleg p+p{margin-top:6px}
.ab-uitleg .ab-let-op{color:var(--blauw);font-weight:600}

/* ---------- Filterknoppen met de aantallen per stand ---------- */
.ab-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ab-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}
.ab-filter:hover{border-color:var(--blauw)}
.ab-filter.actief{background:var(--blauw);border-color:var(--blauw);color:#fff}
.ab-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}
.ab-filter.actief .ab-aantal{background:#fff;color:var(--blauw)}
.ab-filter[data-ab-filter="te_beoordelen"] .ab-aantal{background:var(--oranje);color:#fff}
.ab-filter[data-ab-filter="te_beoordelen"].actief .ab-aantal{background:#fff;color:var(--oranje-donker)}
@media (prefers-reduced-motion:reduce){.ab-filter{transition:none}}

/* Alleen voor schermlezers: wat er net is vastgelegd. */
.ab-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Eén bericht ---------- */
.ab-kaart{background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--oranje);border-radius:14px;margin-bottom:14px;box-shadow:var(--kaartschaduw);overflow:hidden;max-width:1240px}
.ab-kaart:focus{outline:none}
.ab-kaart:focus-visible{box-shadow:var(--focusring)}
.ab-kaart.ab-groep-akkoord{border-left-color:var(--groen)}
.ab-kaart.ab-groep-niet_versturen{border-left-color:var(--rood)}
.ab-kaart.ab-groep-aanpassen{border-left-color:var(--geel)}
.ab-kaart.ab-groep-verstuurd{border-left-color:var(--grijs)}
/* De tabbladbalk bovenaan blijft staan als je rolt (.tabs in stijl.css). Wat met het toetsenbord of door de
   app in beeld komt (een knop, een tekstvak, de kaart zelf), komt daaronder vandaan. afwijsberichten.js meet
   de balk; op een smal scherm rolt hij mee en is er weinig ruimte nodig. */
#paneel-afwijsberichten .ab-kaart,#paneel-afwijsberichten .ab-kaart button,#paneel-afwijsberichten .ab-kaart textarea,#paneel-afwijsberichten .ab-filter{scroll-margin-top:var(--ab-kopruimte,120px)}

.ab-kaartkop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px 10px}
.ab-kaartkop h3{font-weight:800;font-size:17px;color:var(--blauw);letter-spacing:-.2px;line-height:1.3;overflow-wrap:anywhere}
.ab-nr{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
.ab-chip{flex:none;font-size:12px;font-weight:800;border-radius:999px;padding:4px 11px;white-space:nowrap;border:1px solid transparent}
.ab-chip-te_beoordelen{background:var(--oranje-bg);color:var(--oranje-donker);border-color:#f7d3b8}
.ab-chip-akkoord{background:var(--groen-bg);color:var(--groen-tekst);border-color:var(--groen-rand)}
.ab-chip-niet_versturen{background:var(--rood-bg);color:var(--rood);border-color:var(--rood-rand)}
.ab-chip-aanpassen{background:var(--geel-bg);color:var(--geel-tekst);border-color:var(--geel-rand)}
.ab-chip-verstuurd{background:var(--hairline);color:var(--blauw);border-color:var(--blauw-soft)}

/* Links de factuur en de afwijsreden, rechts het bericht zoals het verstuurd wordt. */
.ab-inhoud{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:18px;padding:0 18px 14px}
.ab-facturen{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px;min-width:0}
.ab-factuur{display:flex;flex-direction:column;gap:4px;min-width:0}
.ab-factuurnr{font-size:15px;overflow-wrap:anywhere}
.ab-factuurregel{overflow-wrap:anywhere}
.ab-bedrag{font-size:17px;font-weight:800;color:var(--blauw-black);font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-waarom{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Een lang label zonder spatie breekt af binnen de kolom in plaats van eruit te steken. */
.ab-reden{display:inline-block;max-width:100%;overflow-wrap:anywhere;background:var(--rood-bg);color:var(--rood);border:1px solid var(--rood-rand);border-radius:8px;padding:2px 9px;font-size:12.5px;font-weight:700}
.ab-kort{color:var(--blauw-black);overflow-wrap:anywhere;white-space:pre-wrap}
.ab-label{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
.ab-zacht{color:var(--grijs);font-weight:400}
.ab-klein{font-size:12.5px}

.ab-bericht{min-width:0}
.ab-adressen{display:grid;gap:4px;font-size:14px;margin-bottom:10px}
.ab-adressen>div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;align-items:baseline}
.ab-adressen dt{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
.ab-adressen dd{overflow-wrap:anywhere;font-weight:600;color:var(--blauw-black)}
/* De tekst zoals de leverancier hem krijgt: regeleinden blijven staan, een lang
   woord of adres breekt af in plaats van het scherm breder te maken. */
.ab-tekst{background:var(--blauw-hairline);border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--blauw-black);max-width:75ch}
.ab-bericht>.ab-klein{margin-top:6px}

.ab-voet{border-top:1px solid var(--hairline);padding:12px 18px 16px;display:flex;flex-direction:column;gap:10px;background:#fcfdff}
.ab-melding{font-size:13.5px;line-height:1.5;border-radius:10px;padding:8px 12px;overflow-wrap:anywhere}
.ab-melding-rood{background:var(--rood-bg);border:1px solid var(--rood-rand);color:var(--rood)}
.ab-melding-geel{background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst)}
.ab-melding-groen{background:var(--groen-bg);border:1px solid var(--groen-rand);color:var(--groen-tekst)}
.ab-melding-grijs{background:var(--blauw-hairline);border:1px solid var(--hairline);color:var(--blauw-black)}
.ab-toelichting{display:block;margin-top:2px}
/* Het besluit met de knop Wijzigen ernaast; de drie knoppen of het invulvak staan er alleen. */
.ab-uitkomst{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.ab-uitkomst>.ab-formulier{flex:1 1 100%}
.ab-besluit{font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;min-width:0}
.ab-besluit b{font-weight:800}
.ab-besluit-akkoord b{color:var(--groen-tekst)}
.ab-besluit-niet_versturen b{color:var(--rood)}
.ab-besluit-aanpassen b{color:var(--geel-tekst)}
.ab-besluitreden{margin-top:2px}

/* Toetsenbord: een duidelijke blauwe rand om de knop met de aandacht, ook op de
   oranje knop (de zachte oranje gloed van stijl.css valt daar bijna weg). */
.ab-kaart .btn:focus-visible,.ab-filter:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}

.ab-knoppen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ab-knoppen .btn{min-height:40px}
.ab-knoppen .btn:disabled{opacity:.55;cursor:default}
.ab-knoppen-rechts{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}

.ab-formulier{display:flex;flex-direction:column;gap:6px}
.ab-formulier label{font-size:13px;font-weight:700;color:var(--blauw)}
.ab-formulier textarea{width:100%;max-width:75ch;font-family:'Exo',Arial,sans-serif;font-size:15px;line-height:1.5;border:1px solid var(--grijs-thin);border-radius:10px;padding:9px 11px;background:#fff;color:var(--blauw-black);resize:vertical;min-height:76px}
.ab-formulier textarea:focus{outline:none;border-color:var(--oranje);box-shadow:var(--focusring)}
.ab-formulier textarea[aria-invalid="true"]{border-color:var(--rood)}
.ab-formvoet{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;max-width:75ch}
.ab-teller{color:var(--grijs);font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-fout{color:var(--rood);font-size:13.5px;font-weight:700}
.ab-fout:empty{display:none}
.ab-formulier .ab-knoppen{margin-top:4px}

.ab-laadfout p{margin-bottom:12px}

/* ---------- Smal: tablet en telefoon ---------- */
@media (max-width:860px){
  .ab-inhoud{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ab-uitleg{padding:12px 14px;font-size:13.5px}
  .ab-filter{padding:9px 12px}
  .ab-kaartkop{padding:12px 14px 8px}
  .ab-inhoud{padding:0 14px 12px;gap:14px}
  .ab-adressen>div{grid-template-columns:1fr;gap:0}
  .ab-tekst{padding:12px 13px;font-size:15px}
  .ab-voet{padding:12px 14px 14px}
  /* Knoppen onder elkaar over de hele breedte: goed te raken met een duim. */
  .ab-uitkomst{flex-direction:column;align-items:stretch}
  .ab-knoppen{flex-direction:column;align-items:stretch}
  .ab-knoppen .btn{width:100%;min-height:46px;font-size:14px}
  .ab-knoppen-rechts{margin-left:0;flex-direction:column}
  .ab-formvoet{flex-direction:column;gap:2px}
}