/* Keuren onder 99 procent en het gesprek over een factuur (versie 1.37.0,
   docs/KEUREN.md). Eigen bestand naast stijl.css, met de kleuren en maten uit
   de huisstijl daar. Het blok heet keurblok; alle andere eigen namen beginnen
   met kb-. */

/* ---------- De plaats in het factuurdetail ----------
   Op een breed scherm staat het blok naast het document, boven de boeking:
   zo zie je wat mist of afwijkt en de pdf tegelijk. Het blok met het dossier
   en de regels van finance schuiven onder het document en de boeking. Op een
   smal scherm staat het blok bovenaan, boven het document. Kent een browser
   :has() niet, dan staat het blok over de volle breedte boven het document. */
.keurblok{grid-column:1/-1;min-width:0}
.detail:has(> .keurblok) > .keurblok,.detail:has(> .keurblok) > .kolom-factuur{order:1}
.detail:has(> .keurblok) > .kolom-boeking{order:2}
body.pdf-rechts .detail:has(> .keurblok) > .kolom-factuur{order:2}
body.pdf-rechts .detail:has(> .keurblok) > .kolom-boeking{order:1}
.detail:has(> .keurblok) > .dossierblok,.detail:has(> .keurblok) > .regelsblok{order:3}
.detail:has(> .keurblok) > .detailvoet{order:4}
.detail:has(> .keurblok) > .historie{order:5}
@media (min-width:861px){
  .detail:has(> .keurblok){grid-auto-flow:row dense}
  .detail:has(> .keurblok) > .keurblok{grid-column:2;align-self:start}
  .detail:has(> .keurblok) > .kolom-factuur{grid-column:1;grid-row:span 2}
  .detail:has(> .keurblok) > .kolom-boeking{grid-column:2}
  body.pdf-rechts .detail:has(> .keurblok) > .keurblok{grid-column:1}
  body.pdf-rechts .detail:has(> .keurblok) > .kolom-factuur{grid-column:2}
  body.pdf-rechts .detail:has(> .keurblok) > .kolom-boeking{grid-column:1}
}

/* ---------- Het blok ---------- */
.kolomtitel .tag.kb-tag-goed{color:var(--groen-tekst);background:var(--groen-bg);border-color:var(--groen-rand)}
.kb-kaart{background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--oranje);border-radius:12px;padding:10px 14px;display:grid;gap:8px;font-size:var(--h-tekst-basis);line-height:var(--h-regel-basis);color:var(--h-tekst);overflow-wrap:anywhere;box-shadow:0 1px 3px rgba(3,21,63,.05)}
.kb-bezig{opacity:.62}
.kb-bezig .kb-knop{cursor:progress}
.kb-laden{color:var(--grijs)}
.kb-fout{color:var(--rood);font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.kb-noot{font-size:12px;color:var(--grijs)}
.kb-niets{color:var(--groen-tekst);font-weight:600}
.kb-leeg{color:var(--h-tekst-2)}

/* De regel over de knop in de rij. */
.kb-knopregel{font-size:12.5px;font-weight:600;border-radius:8px;padding:5px 9px}
.kb-knopregel.kb-aan{color:var(--groen-tekst);background:var(--groen-bg)}
.kb-knopregel.kb-uit{color:var(--geel-tekst);background:var(--geel-bg)}

/* ---------- De punten ---------- */
.kb-punten{list-style:none;display:grid;gap:0}
.kb-punt{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;padding:7px 0;border-top:1px solid var(--hairline)}
.kb-punt:first-child{border-top:none;padding-top:2px}
.kb-punt > *{grid-column:1}
.kb-punt > .kb-acties{grid-column:2;grid-row:1 / span 2;align-self:start;justify-content:flex-end}
.kb-puntkop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.kb-naam{font-weight:700;color:var(--blauw-black)}
.kb-stand{font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.kb-onder .kb-stand{color:var(--geel-tekst);background:var(--geel-bg);border:1px solid var(--geel-rand)}
.kb-afwijking .kb-stand{color:var(--rood);background:var(--rood-bg);border:1px solid var(--rood-rand)}
.kb-signaal .kb-stand{color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw-soft)}
.kb-bevestigd .kb-stand{color:var(--groen-tekst);background:var(--groen-bg);border:1px solid var(--groen-rand)}
.kb-waarden{display:grid;gap:1px}
.kb-paar{display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px}
.kb-paar dt{color:var(--grijs);font-size:12px}
.kb-paar dd{font-weight:600;font-variant-numeric:tabular-nums}
.kb-bron{font-weight:400;color:var(--grijs);font-size:12px}
.kb-redenen{list-style:none;font-size:12px;color:var(--blauw-black);opacity:.85}
.kb-redenen li{padding-left:12px;position:relative}
.kb-redenen li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--grijs)}
.kb-wie{font-size:12px;color:var(--groen-tekst)}
.kb-wie.kb-verlopen{color:var(--geel-tekst)}
.kb-niet{font-size:12px;color:var(--grijs)}
.kb-acties{display:flex;flex-wrap:wrap;gap:6px}

/* The buttons: all secondary; the one blue button is the booking button of the opened invoice. */
.kb-knop{font-family:'Exo',Arial,sans-serif;font-weight:800;font-size:12.5px;line-height:1.2;border-radius:8px;padding:6px 12px;cursor:pointer;border:1px solid var(--kaartrand);background:#fff;color:var(--blauw);transition:background-color .15s,border-color .15s}
.kb-knop:hover{background:var(--blauw-hairline);border-color:var(--blauw-soft)}
.kb-knop:disabled{opacity:.5;cursor:not-allowed}
.kb-bevestig,.kb-plaats{background:#fff;border-color:var(--kaartrand);color:var(--blauw)}
.kb-bevestig:hover,.kb-plaats:hover{background:var(--blauw-hairline);border-color:var(--blauw-soft)}
@media (prefers-reduced-motion:reduce){.kb-knop{transition:none}}

/* ---------- Klopt ---------- */
.kb-klopt,.kb-gesprek{border-top:1px solid var(--grijs-thin);padding-top:7px}
.kb-klopt summary,.kb-gesprek summary{cursor:pointer;font-weight:700;color:var(--blauw);display:list-item;list-style-position:inside}
.kb-klopt summary .kb-aantal,.kb-gesprek summary .kb-aantal,.kb-gesprek summary .kb-wacht{margin-left:6px}
.kb-kloptlijst{list-style:none;margin-top:6px;display:grid;gap:3px}
.kb-kloptlijst li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:12.5px}
.kb-kloptwaarde{font-weight:600}

/* ---------- Het gesprek ---------- */
.kb-aantal{display:inline-block;min-width:20px;text-align:center;background:var(--hairline);color:var(--blauw);border-radius:999px;font-size:11px;font-weight:800;padding:1px 6px;font-variant-numeric:tabular-nums}
.kb-wacht{font-size:11.5px;font-weight:700;color:var(--oranje-donker)}
.kb-berichten{list-style:none;display:grid;gap:6px;margin-top:6px}
.kb-eerder{margin-top:6px}
.kb-eerder summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--grijs)}
/* Punt 9 van Interface (ticket 9777): een bericht en een vraag zijn neutraal, het antwoord van de agent paars (een AI-collega). */
.kb-bericht{border:1px solid var(--h-rand);border-radius:10px;padding:6px 10px;background:var(--h-vlak)}
.kb-bericht.kb-vraag{background:var(--h-vlak);border-color:var(--h-rand)}
.kb-bericht.kb-antwoord{background:var(--h-ai-bg);border-color:var(--h-ai-rand)}
.kb-bericht.kb-antwoord .kb-meta{color:var(--h-ai-tekst)}
.kb-bericht.kb-antwoord .kb-meta b{color:var(--h-ai-tekst)}
.kb-meta{font-size:11.5px;color:var(--grijs)}
.kb-meta b{color:var(--blauw-black)}
.kb-berichttekst{white-space:pre-wrap;margin-top:2px}
.kb-bericht .kb-knop{margin-top:6px}
.kb-m-goed{color:var(--groen-tekst);font-weight:700}
.kb-m-fout{color:var(--rood);font-weight:700}
.kb-m-bezig{color:var(--grijs)}
.kb-beantwoord{color:var(--groen-tekst);font-weight:700}
.kb-schrijf{display:grid;gap:5px;margin-top:8px}
/* Het label en het vak (punt 9 van Interface, ticket 9777): het label 14 px in inkt, het vak 16/24 zodat Safari op de telefoon niet inzoomt. */
.kb-lbl{font-size:var(--h-tekst-basis);line-height:var(--h-regel-basis);font-weight:var(--hero-gewicht-label);color:var(--h-tekst)}
.kb-tekst{font-family:'Exo',Arial,sans-serif;font-size:var(--h-tekst-lees);line-height:var(--h-regel-lees);color:var(--blauw-black);border:1px solid var(--kaartrand);border-radius:8px;padding:7px 9px;resize:vertical;min-height:88px;width:100%;background:#fff}
/* Drie regels hoog (3 x 24 px plus rand en binnenruimte) en de focusring van het ontwerpsysteem (toets 9777, punt 9). */
.kb-tekst:focus{outline:none;border-color:var(--h-focus);box-shadow:var(--h-focus-ring)}
.kb-schrijfrij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.kb-vraagkeuze{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.kb-vraagkeuze input{width:16px;height:16px;accent-color:var(--blauw)}
.kb-uitleg{font-size:11.5px;color:var(--grijs)}

/* ---------- Het gesprek per dossier (ticket 9667, docs/GESPREK-DOSSIER.md) ----------
   Alleen in beeld als de server het aanzet. Het antwoord van de app is
   neutraal (licht grijs), een notitie bij het dossier blauw. Bij een boeking staat
   het gesprek in een eigen paneel over de volle breedte, onder het document en
   de boeking: de indeling van het detail verandert er niet door. */
.kb-gesprekblok{grid-column:1/-1;min-width:0}
.kb-kaart-gesprek{border-left-color:var(--blauw)}
.kb-kaart-gesprek > .kb-gesprek{border-top:none;padding-top:0}
.kb-bericht.kb-app{background:var(--h-vlak-2);border-color:var(--h-rand)}
.kb-bericht.kb-notitie{background:var(--blauw-hairline);border-left:3px solid var(--blauw-soft)}
/* Een opmerking die de app als vraag las: geen oranje van een vraag aan de agent (voortoets K2). */
.kb-bericht.kb-appvraag{border-left:3px solid var(--blauw-soft)}
.kb-notities{font-size:11.5px;font-weight:700;color:var(--blauw);margin-left:6px}

/* ---------- Bovenaan het tabblad Vragen ---------- */
.kb-werklijst{background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--oranje);border-radius:14px;padding:14px 18px;margin-bottom:14px;box-shadow:var(--kaartschaduw);max-width:1240px;font-size:13.5px}
.kb-wl-titel{font-size:15px;font-weight:800;color:var(--blauw)}
.kb-wl-uitleg{font-size:13px;color:var(--grijs);margin:2px 0 8px}
.kb-wl-kop{font-size:12px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px;display:flex;align-items:center;gap:6px}
.kb-wl-lijst{list-style:none;display:grid;gap:8px}
.kb-wl-rij{border:1px solid var(--hairline);border-radius:10px;padding:8px 12px;display:grid;gap:3px;overflow-wrap:anywhere}
.kb-wl-rij .kb-knop{justify-self:start;margin-top:4px}
.kb-wl-status{font-size:11.5px;color:var(--grijs)}
.kb-wl-antwoord{background:var(--h-ai-bg);border:1px solid var(--h-ai-rand);border-radius:8px;padding:6px 10px;margin-top:2px}
.kb-wl-antwoord .kb-meta,.kb-wl-antwoord .kb-meta b{color:var(--h-ai-tekst)}

/* ---------- Smal scherm ---------- */
@media (max-width:720px){
  .kb-kaart{padding:10px 12px}
  .kb-punt{grid-template-columns:minmax(0,1fr)}
  .kb-punt > .kb-acties{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:4px}
  .kb-knop{padding:10px 14px;font-size:13px;min-height:44px}
  .kb-vraagkeuze{min-height:44px}
  .kb-vraagkeuze input{width:20px;height:20px}
  .kb-acties .kb-knop{flex:1 1 auto}
  .kb-paar{grid-template-columns:62px minmax(0,1fr)}
  .kb-werklijst{padding:12px 14px}
}