/* Afletteren (versie 1.54.0, docs/AFLETTEREN.md): per open ontvangst, betaling
   en creditnota het voorstel van de afletterstap, met een Oké of een Nee met
   reden. Eigen bestand naast stijl.css, met de rollen uit hero-tokens.css
   (var(--h-...)), dus ook in het donkere thema. Alle namen beginnen met afl-.
   Kleur zegt alleen de stand van een voorstel; de tekst zegt het altijd ook.
   Op een smal scherm staat alles in één kolom, zonder zijwaarts schuiven. */

/* Het tabblad blijft verborgen tot de server het aanzet, er een aanlevering is en de gebruiker finance is. */
.tab[hidden]{display:none}
body.geen-finance #tab-afletteren{display:none}

/* De kleur per stand: één plek, voor de tegels, de randen van de kaarten en de labels. */
#paneel-afletteren{--afl-boven:var(--h-info-stip);--afl-nodig:var(--h-waarschuwing-stip);--afl-vraag:var(--h-tekst-2);--afl-oke:var(--h-goed-stip);--afl-nee:var(--h-neutraal-stip)}

.afl-uitleg{background:var(--h-vlak);border:1px solid var(--h-rand);border-radius:14px;padding:14px 18px;margin-bottom:14px;box-shadow:var(--hero-schaduw-s);font-size:var(--h-tekst-basis);line-height:1.55;max-width:1240px;color:var(--h-tekst)}
.afl-uitleg p+p{margin-top:6px}
.afl-uitleg .afl-let-op{color:var(--h-info-tekst);font-weight:700}

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

/* ---------- De tegels: per stroom en per stand; een tegel filtert de lijst ---------- */
.afl-tegels{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.afl-tegelrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.afl-tegel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;background:var(--h-vlak);border:1px solid var(--h-rand);border-radius:14px;padding:13px 15px 11px;box-shadow:var(--hero-schaduw-s);cursor:pointer;font-family:'Exo',Arial,sans-serif;color:var(--h-tekst);overflow:hidden;transition:border-color var(--h-overgang),box-shadow var(--h-overgang)}
.afl-tegel::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--h-info-stip)}
.afl-tegel-klant::before,.afl-tegel-intercompany::before,.afl-tegel-leverancier::before{background:var(--h-rand-sterk)}
.afl-tegel-boven_drempel::before{background:var(--afl-boven)}
.afl-tegel-oke_nodig::before{background:var(--afl-nodig)}
.afl-tegel-vraag::before{background:var(--afl-vraag)}
.afl-tegel-oke::before{background:var(--afl-oke)}
.afl-tegel-nee::before{background:var(--afl-nee)}
.afl-tegel:hover{border-color:var(--h-rand-sterk)}
.afl-tegel[aria-pressed="true"]{border-color:var(--h-focus);box-shadow:inset 0 0 0 1px var(--h-focus),var(--hero-schaduw-s)}
.afl-tegel-n{font-size:var(--h-tekst-groot);line-height:var(--h-regel-groot);font-weight:800;color:var(--h-tekst);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.afl-tegel-l{font-size:13px;font-weight:700;color:var(--h-tekst-2)}
.afl-tegel-u{font-size:var(--h-tekst-meta);line-height:var(--h-regel-meta);color:var(--h-tekst-3);overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.afl-tegel{transition:none}}

/* ---------- De balk: administratie, stroom, soort, zekerheid en zoeken ---------- */
.afl-balk{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-bottom:10px}
.afl-filter{display:flex;flex-direction:column;gap:4px;min-width:0}
.afl-filter>span{font-size:11.5px;font-weight:700;color:var(--h-tekst-2);text-transform:uppercase;letter-spacing:.04em}
.afl-filter select,.afl-filter input{font-family:'Exo',Arial,sans-serif;font-size:13px;font-weight:600;color:var(--h-info-tekst);border:1px solid var(--h-rand);border-radius:999px;padding:8px 14px;background:var(--h-invoer-bg);box-shadow:0 1px 3px rgba(3,21,63,.06);max-width:280px;min-width:0}
.afl-filter 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}
.afl-filter input{color:var(--h-tekst);width:100%}
.afl-zoek{flex:1 1 220px;max-width:320px}
.afl-filter select:hover,.afl-filter input:hover{border-color:var(--h-rand-sterk)}
.afl-telling{font-size:var(--h-tekst-meta);line-height:var(--h-regel-meta);color:var(--h-tekst-2);margin:0 2px 10px}

/* ---------- De maat: historie en oordelen per stroom en soort ---------- */
.afl-maat{background:var(--h-vlak);border:1px solid var(--h-rand);border-radius:14px;padding:10px 16px;margin-bottom:14px;box-shadow:var(--hero-schaduw-s);color:var(--h-tekst);font-size:13.5px;line-height:1.5}
.afl-maat>summary{cursor:pointer;font-weight:700;color:var(--h-info-tekst);padding:4px 0}
.afl-maatblokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 20px;margin-top:8px}
.afl-maatblok{min-width:0}
.afl-maatblok h3{font-size:14px;font-weight:800;margin:4px 0}
.afl-tabelvak{overflow-x:auto;max-width:100%}
.afl-maattabel{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.afl-maattabel th,.afl-maattabel td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--p-lijn-zacht);vertical-align:top}
.afl-maattabel thead th{font-size:11px;font-weight:700;color:var(--h-tekst-2);text-transform:uppercase;letter-spacing:.03em}

/* ---------- De kaarten: één per voorstel ---------- */
#lijst-afletteren{display:flex;flex-direction:column;gap:12px}
.afl-kaart{background:var(--h-vlak);border:1px solid var(--h-rand);border-left:5px solid var(--afl-nodig);border-radius:14px;padding:12px 16px 14px;box-shadow:var(--hero-schaduw-s);color:var(--h-tekst);font-size:13.5px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.afl-kaart-boven_drempel{border-left-color:var(--afl-boven)}
.afl-kaart-oke_nodig{border-left-color:var(--afl-nodig)}
.afl-kaart-vraag{border-left-color:var(--afl-vraag)}
.afl-kaart-oke{border-left-color:var(--afl-oke)}
.afl-kaart-nee{border-left-color:var(--afl-nee)}
.afl-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:4px}
.afl-label{display:inline-block;border:1px solid var(--h-rand);border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:700;color:var(--h-tekst-2);background:var(--h-vlak)}
.afl-label-klant,.afl-label-intercompany,.afl-label-leverancier{background:var(--h-neutraal-licht)}
.afl-stand{border-color:transparent}
.afl-stand-boven_drempel{background:var(--h-info-bg);color:var(--h-info-tekst)}
.afl-stand-oke_nodig{background:var(--h-waarschuwing-bg);color:var(--h-waarschuwing-tekst)}
.afl-stand-vraag{background:var(--h-neutraal-bg);color:var(--h-tekst)}
.afl-stand-oke{background:var(--h-goed-bg);color:var(--h-goed-tekst)}
.afl-stand-nee{background:var(--h-neutraal-bg);color:var(--h-neutraal-tekst)}
.afl-zeker{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--h-tekst-2);font-variant-numeric:tabular-nums}
.afl-relatie{font-size:15px;font-weight:800;margin:2px 0 8px;color:var(--h-tekst)}
.afl-meta{font-size:12px;font-weight:600;color:var(--h-tekst-3)}
.afl-zacht{color:var(--h-tekst-3)}
.afl-romp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 22px}
.afl-links,.afl-rechts{display:flex;flex-direction:column;gap:8px;min-width:0}
.afl-post{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 12px;margin:0}
.afl-post>div{display:contents}
.afl-post dt{font-size:12px;font-weight:700;color:var(--h-tekst-2)}
.afl-post dd{margin:0;font-variant-numeric:tabular-nums}
.afl-soort{margin:0}
.afl-soort b{display:inline-block;background:var(--h-info-licht);color:var(--h-info-tekst);border-radius:6px;padding:0 6px;font-size:12px;margin-right:4px}
.afl-grenzen{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:12.5px;color:var(--h-tekst-2)}
.afl-grenzen b{color:var(--h-tekst);font-variant-numeric:tabular-nums}
.afl-vak{border:1px solid var(--h-rand);border-radius:10px;padding:8px 10px;background:var(--h-info-licht)}
.afl-vakkop{font-size:11.5px;font-weight:700;color:var(--h-tekst-2);text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
.afl-facturen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.afl-facturen li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.afl-factuur{font-weight:700}
.afl-toe{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.afl-kandreden{flex-basis:100%}
.afl-kies{padding:6px 12px;font-size:12px}
.afl-vlaggen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.afl-vlag{border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600;background:var(--h-neutraal-bg);color:var(--h-tekst)}
.afl-vlag-pwp_geen_betaling,.afl-vlag-mogelijk_dubbel,.afl-vlag-dispuut,.afl-vlag-meer_dan_restant,.afl-vlag-andere_relatie{background:var(--h-waarschuwing-bg);color:var(--h-waarschuwing-tekst)}
.afl-pwp{margin:0;padding:8px 10px;border:1px solid var(--h-waarschuwing-rand);border-left:4px solid var(--h-waarschuwing-stip);border-radius:10px;background:var(--h-waarschuwing-licht);font-weight:600}
.afl-oordeel{display:flex;flex-direction:column;gap:6px}
.afl-knoppen{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.afl-knoppen .btn{padding:8px 16px;font-size:13px}
#paneel-afletteren .btn:disabled{opacity:.55;cursor:progress}
.afl-gegeven{margin:0;font-weight:600}
.afl-gegeven-oke{color:var(--h-goed-tekst)}
.afl-gegeven-nee{color:var(--h-neutraal-tekst)}
.afl-eerder{margin-top:8px;font-size:12.5px;color:var(--h-tekst-2)}
.afl-eerder>summary{cursor:pointer;font-weight:700}
.afl-eerder ul{margin:4px 0 0 18px;padding:0}

/* ---------- Het formulier voor een Nee ---------- */
.afl-formulier{display:flex;flex-direction:column;gap:8px;border:1px solid var(--h-rand);border-radius:10px;padding:10px 12px;background:var(--h-vlak-2)}
.afl-velden{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.afl-velden legend{font-size:12.5px;font-weight:800;color:var(--h-tekst);margin-bottom:4px;padding:0}
.afl-keuze{display:flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.afl-keuze input{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--h-actie)}
.afl-toelichting{display:flex;flex-direction:column;gap:4px}
.afl-toelichting>span{font-size:12.5px;font-weight:700;color:var(--h-tekst-2)}
.afl-toelichting textarea{font-family:'Exo',Arial,sans-serif;font-size:13.5px;color:var(--h-tekst);background:var(--h-invoer-bg);border:1px solid var(--h-rand);border-radius:10px;padding:8px 10px;width:100%;box-sizing:border-box;resize:vertical}
.afl-fout{margin:0;color:var(--h-fout-tekst);font-weight:700}

.afl-meer{display:flex;justify-content:center;margin-top:4px}
.afl-laadfout{display:flex;flex-direction:column;align-items:center;gap:10px}

/* ---------- Smalle schermen ---------- */
@media (max-width:900px){
  .afl-romp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  .afl-uitleg{padding:12px 14px}
  .afl-tegelrij{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .afl-tegel{padding:11px 12px 9px}
  .afl-balk{flex-direction:column;align-items:stretch}
  .afl-filter select,.afl-filter input{max-width:none;width:100%;min-height:var(--h-tikdoel)}
  .afl-zoek{max-width:none;flex:0 0 auto}
  .afl-kaart{padding:10px 12px 12px}
  .afl-zeker{margin-left:0;flex-basis:100%}
  .afl-post{grid-template-columns:minmax(0,1fr)}
  .afl-post dt{margin-top:4px}
  .afl-knoppen .btn{flex:1 1 auto;min-height:var(--h-tikdoel)}
  .afl-kies{min-height:var(--h-tikdoel)}
  .afl-keuze{min-height:var(--h-tikdoel)}
  .afl-toe{margin-left:0}
}