/* Steekproef (versie 1.29.0): het paneel achter de knop Steekproef op
   Overzicht. Eigen bestand naast stijl.css, met de kleuren en maten uit de
   huisstijl daar (CLAUDE.md §9). Alle namen beginnen met sp-, plus de knop
   #ov-steekproef en het paneel #paneel-steekproef, zodat er niets botst met
   de rest van de app; stijl.css en overzicht.css blijven ongemoeid. */

/* De knop blijft verborgen tot de server zegt dat de gebruiker finance is. */
#ov-steekproef[hidden]{display:none}
body.geen-finance #ov-steekproef{display:none}

#paneel-steekproef{max-width:1440px}
.sp-uitleg{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:12px 18px;margin-bottom:12px;box-shadow:var(--kaartschaduw);font-size:14px;line-height:1.55}
.sp-uitleg p{max-width:120ch}
.sp-uitleg p+p{margin-top:6px}
.sp-let-op{color:var(--grijs);font-size:13px}

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

.sp-zacht{color:var(--grijs);font-size:13px}
.sp-kop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:4px 0 12px}
.sp-kop h3{font-weight:800;font-size:17px;color:var(--blauw);letter-spacing:-.2px;outline:none;overflow-wrap:anywhere;min-width:0}
.sp-kop h3:focus-visible{box-shadow:var(--focusring);border-radius:6px}
.sp-blok,.sp-form,.sp-instellingen{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:14px 18px;margin-bottom:14px;box-shadow:var(--kaartschaduw);min-width:0}
.sp-blok h4,.sp-form h4,.sp-instellingen h4,.sp-oordeel h4,.sp-oordelen h4{font-size:12px;font-weight:800;color:var(--blauw);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}

/* ---------- Meldingen bovenaan ---------- */
.sp-terug{background:var(--rood-bg);border:1px solid var(--rood-rand);border-left:5px solid var(--rood);border-radius:14px;padding:12px 18px;margin-bottom:14px;font-size:13.5px}
.sp-terug h3{font-size:13px;font-weight:800;color:var(--rood);margin-bottom:6px}
.sp-terug ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.sp-terug li{overflow-wrap:anywhere}
.sp-terug-uitkomst{display:block;color:var(--blauw-black);font-size:12.5px}
.sp-ketting{background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:14px;padding:10px 18px;margin-bottom:14px;color:var(--geel-tekst);font-weight:700;font-size:13.5px}

/* ---------- De teller ---------- */
.sp-cijfers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:10px}
.sp-cijfer{background:var(--hairline);border-radius:12px;padding:10px 12px;min-width:0}
.sp-cijfer b{display:block;font-size:22px;font-weight:800;color:var(--blauw);font-variant-numeric:tabular-nums;line-height:1.2}
.sp-cijfer span{font-size:12px;color:var(--grijs);font-weight:700}
.sp-cijfer-klopt b{color:var(--groen-tekst)}
.sp-cijfer-niet b,.sp-cijfer-geld b{color:var(--rood)}
.sp-perveld{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;margin-bottom:6px}
.sp-label{font-weight:700;color:var(--grijs)}
.sp-perveld-item{background:var(--blauw-hairline);border:1px solid var(--kaartrand);border-radius:999px;padding:2px 10px}
.sp-perveld-geld{background:var(--rood-bg);border-color:var(--rood-rand)}
.sp-tellerlijst{list-style:none;font-size:13px;display:flex;flex-direction:column;gap:2px}

/* ---------- Formulier, instellingen en de lijst ---------- */
.sp-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px;align-items:start}
.sp-veldlabel{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;min-width:0}
.sp-form select,.sp-form input[type="date"],.sp-form input[type="number"],.sp-instellingen input[type="number"],.sp-niet textarea{font-family:'Exo',Arial,sans-serif;font-size:14px;font-weight:600;color:var(--blauw-black);border:1px solid var(--kaartrand);border-radius:10px;padding:8px 10px;background:#fff;max-width:100%;text-transform:none;letter-spacing:0}
.sp-form select{width:100%}
.sp-periode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sp-periode input{width:100%}
.sp-dagen{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 12px}
.sp-dag{font-family:'Exo',Arial,sans-serif;font-size:12.5px;font-weight:600;color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--kaartrand);border-radius:999px;padding:5px 11px;cursor:pointer}
.sp-dag:hover{border-color:var(--blauw-soft);background:#fff}
.sp-omvang{border:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:10px;font-size:14px}
.sp-omvang legend{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;width:100%}
.sp-omvang label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.sp-omvang input[type="number"]{width:96px}
.sp-omvang-keuze{display:inline-flex;align-items:center;gap:8px}
.sp-formfout{color:var(--rood);font-weight:700;font-size:13px;margin-bottom:8px}
.sp-formfout:empty{display:none}
.sp-formuitleg{margin-top:10px}
.sp-instellingen p{font-size:13.5px;margin-bottom:8px}
.sp-inst-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:8px;font-size:14px}
.sp-inst-rij label{display:inline-flex;align-items:center;gap:6px}
.sp-inst-rij input[type="number"]{width:84px}

.sp-rijen,.sp-regels{display:flex;flex-direction:column;border-top:1px solid var(--grijs-thin)}
.sp-rij,.sp-regel{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;background:#fff;border:none;border-bottom:1px solid var(--grijs-thin);padding:12px 4px;font-family:'Exo',Arial,sans-serif;font-size:14px;color:var(--blauw-black);cursor:pointer;min-width:0}
.sp-rij:hover,.sp-regel:hover{background:var(--blauw-hairline)}
.sp-rij:focus-visible,.sp-regel:focus-visible{outline:none;box-shadow:var(--focusring-binnen)}
.sp-rij-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sp-rij-titel{font-weight:700;font-size:15px;overflow-wrap:anywhere;min-width:0}
.sp-rij-delen{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--grijs);min-width:0}
.sp-rij-delen>*{min-width:0;overflow-wrap:anywhere}
.sp-rij-delen b{color:var(--blauw-black)}
.sp-label-dag{font-size:11px;font-weight:800;color:var(--blauw);background:var(--blauw-soft);border-radius:999px;padding:1px 8px;text-transform:uppercase;letter-spacing:.04em}

.sp-uitkomst{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.sp-chip{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;border:1px solid transparent;overflow-wrap:anywhere;max-width:100%}
.sp-chip-klopt{color:var(--groen-tekst);background:var(--groen-bg);border-color:var(--groen-rand)}
.sp-chip-niet{color:var(--oranje-donker);background:var(--oranje-bg);border-color:#f7d3b8}
.sp-chip-geld{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand)}
.sp-chip-open{color:var(--grijs);background:#fff;border-color:var(--grijs-thin)}

/* ---------- Eén steekproef ---------- */
.sp-omschrijving{font-size:14px;margin-bottom:4px;overflow-wrap:anywhere}
.sp-zaad{font-size:12px;color:var(--grijs);margin:8px 0 10px;overflow-wrap:anywhere}
.sp-zaad code{font-size:11.5px;color:var(--blauw-black)}
.sp-regel{flex-direction:row;align-items:center;gap:12px}
.sp-plek{flex:none;width:30px;height:30px;border-radius:50%;background:var(--hairline);color:var(--blauw);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.sp-regel-midden{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;min-width:0}
.sp-regel-kop{font-weight:700;overflow-wrap:anywhere}
.sp-regel-weg{cursor:default;opacity:.8}
.sp-regel-weg:hover{background:#fff}

/* ---------- Eén factuur ---------- */
.sp-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.sp-plekken{font-size:13px;font-weight:700;color:var(--grijs);margin-right:auto}
.sp-factuurkop p{font-size:14px;overflow-wrap:anywhere}
.sp-factuurkop p+p{margin-top:4px}
.sp-bc{font-weight:700;color:var(--blauw)}
.sp-bc-niet-gevonden,.sp-bc-fout{color:var(--rood)}
.sp-bc-geen-sleutel,.sp-bc-niet-gekoppeld{color:var(--geel-tekst)}
.sp-factuur{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sp-pdfkolom{min-width:0}
.sp-pdfkolom .kolomtitel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--blauw);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.sp-pdfvak{max-height:70vh}
.sp-veldkolom{min-width:0}

.sp-velden{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;border:1px solid var(--kaartrand);border-radius:14px;overflow:hidden;box-shadow:var(--kaartschaduw);font-size:13.5px;margin-bottom:14px}
.sp-k-veld{width:21%}.sp-k-lezing{width:25%}.sp-k-score{width:12%}.sp-k-bron{width:19%}.sp-k-bc{width:23%}
.sp-velden th,.sp-velden td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--grijs-thin);overflow-wrap:break-word}
.sp-velden thead th{font-size:11px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;background:var(--blauw-hairline)}
.sp-velden tbody th{font-weight:700;color:var(--blauw-black)}
.sp-velden tr:last-child th,.sp-velden tr:last-child td{border-bottom:none}
.sp-veld-afwijkend{background:var(--rood-bg)}
.sp-waarde{display:block;font-weight:700;font-variant-numeric:tabular-nums}
.sp-eerste,.sp-noot{display:block;font-size:12px;line-height:1.4;color:var(--grijs);margin-top:2px}
.sp-geld{font-size:10.5px;font-weight:800;color:var(--rood);background:var(--rood-bg);border-radius:999px;padding:0 6px;text-transform:uppercase;letter-spacing:.04em}
.sp-score{display:inline-block;font-weight:800;font-variant-numeric:tabular-nums;border-radius:8px;padding:1px 7px}
.sp-score-hoog{color:var(--groen-tekst);background:var(--groen-bg)}
.sp-score-midden{color:var(--geel-tekst);background:var(--geel-bg)}
.sp-score-laag{color:var(--rood);background:var(--rood-bg)}
.sp-score-geen{color:var(--grijs);font-weight:600;padding:0}
.sp-controle{display:block;font-size:11.5px;color:var(--grijs);margin-top:2px}
.sp-verschil{display:inline-block;font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px;margin-top:4px}
.sp-wijkt-af{color:#fff;background:var(--rood)}
.sp-gelijk{color:var(--groen-tekst);background:var(--groen-bg)}

/* ---------- Het oordeel ---------- */
.sp-oordeel{background:#fff;border:1px solid var(--kaartrand);border-left:5px solid var(--oranje);border-radius:14px;padding:14px 18px;margin-bottom:14px;box-shadow:var(--kaartschaduw)}
.sp-oordeel>p{font-size:13.5px;margin-bottom:10px}
.sp-niet-zelf{color:var(--geel-tekst);font-weight:700}
.sp-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.sp-klopt{background:linear-gradient(180deg,#45c954,var(--groen));color:#fff;box-shadow:0 3px 10px rgba(56,189,71,.3)}
.sp-klopt:hover{background:#2ea13b}
.sp-klopt:disabled,.sp-klopt-niet:disabled,.sp-niet button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.sp-niet{margin-top:12px;border-top:1px solid var(--grijs-thin);padding-top:12px}
.sp-niet fieldset{border:none;margin-bottom:10px}
.sp-niet legend{font-size:13px;font-weight:800;color:var(--blauw-black);margin-bottom:8px}
.sp-keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.sp-keuze{display:flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.sp-niet textarea{width:100%;resize:vertical;font-weight:500}
.sp-oordelen{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:12px 18px;box-shadow:var(--kaartschaduw)}
.sp-oordelen ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px}
.sp-oordelen li{overflow-wrap:anywhere}
.sp-oordeel-laatste{font-weight:600}
.sp-reden{display:block;color:var(--blauw-black);margin-top:2px}

/* Op een breed scherm: formulier en lijst naast elkaar, de pdf naast de velden. */
@media (min-width:1100px){
  .sp-raster{grid-template-columns:minmax(320px,400px) minmax(0,1fr)}
  .sp-factuur{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .sp-pdfvak{max-height:min(82vh,1000px)}
}
@media (max-width:720px){
  .sp-uitleg,.sp-blok,.sp-form,.sp-instellingen,.sp-oordeel,.sp-oordelen,.sp-terug{padding:10px 14px}
  .sp-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-keuzes{grid-template-columns:minmax(0,1fr)}
  /* De velden als kaarten: de naam bovenaan, dan de lezing naast Business
     Central en de score naast de bron, elke cel met haar eigen kop. */
  .sp-velden,.sp-velden tbody{display:block;width:100%}
  .sp-velden thead,.sp-velden colgroup{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sp-velden tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"veld veld" "lezing bc" "score bron";gap:4px 12px;border-bottom:1px solid var(--grijs-thin);padding:10px 12px}
  .sp-velden tbody th,.sp-velden td{display:block;border-bottom:none;padding:0;overflow-wrap:anywhere}
  .sp-velden tbody th{grid-area:veld}
  .sp-velden td:nth-of-type(1){grid-area:lezing}
  .sp-velden td:nth-of-type(2){grid-area:score}
  .sp-velden td:nth-of-type(3){grid-area:bron}
  .sp-velden td:nth-of-type(4){grid-area:bc}
  .sp-velden td[data-kop]::before{content:attr(data-kop);display:block;font-size:10.5px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
  .sp-pdfvak{max-height:60vh}
}
@media (prefers-reduced-motion:reduce){.sp-rij,.sp-regel{transition:none}}