/* Module scan: alleen wat écht module-specifiek is (uit style.css van de Bol Listing Optimizer, gescoped onder .scan);
   de rest komt uit design/ en style.css. */
.scan { display: grid; gap: var(--r-5); }
.scan .kaart.intro p { color: var(--tekst-2); max-width: 60rem; }
.scan .kaart-kop .sub { color: var(--tekst-3); font-size: var(--tekst-xs); margin-top: 2px; }

/* Formulieren */
.scan .scan-rij { display: grid; gap: var(--r-3); align-items: end; }
@media (min-width: 48rem) { .scan .scan-rij { grid-template-columns: 1fr auto; } }
.scan .veld-url input { width: 100%; }
.scan .formulier-handmatig { display: grid; gap: var(--r-4); }
.scan .twee-velden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r-2); }
.scan .formulier-acties { display: flex; gap: var(--r-3); align-items: center; flex-wrap: wrap; }

/* Kengetallen */
.scan .kpi-score strong { font-size: 2.4rem; }
.scan .kpi-score em { display: block; margin: 4px 0 0; font-family: var(--font); font-size: var(--tekst-xs); color: var(--tekst-2); }
.scan .balk { height: 4px; border-radius: 999px; background: var(--vlak-3); margin-top: 10px; overflow: hidden; }
.scan .balk i { display: block; height: 100%; width: 0; transition: width .6s ease; }
.scan .balk i.ok { background: var(--ok); } .scan .balk i.bezig { background: var(--accent); } .scan .balk i.let-op { background: var(--let-op); }

/* Werkvlak: secties links, listing rechts */
.scan .werkvlak .kolom { display: grid; gap: var(--r-5); min-width: 0; }
.scan .secties-kop { display: flex; justify-content: space-between; align-items: center; gap: var(--r-3); flex-wrap: wrap; }
.scan #secties { display: grid; gap: var(--r-4); }

/* Eerst aanpakken */
.scan .top { list-style: none; margin: 0; padding: 0; counter-reset: top; display: grid; gap: var(--r-3); }
.scan .top li { position: relative; padding: var(--r-3) var(--r-3) var(--r-3) 3rem; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); counter-increment: top; }
.scan .top li::before { content: counter(top); position: absolute; left: 14px; top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--tekst-3); width: 22px; height: 22px; border: 1px solid var(--lijn-sterk); border-radius: 50%; display: grid; place-items: center; }
.scan .top li.leeg { padding-left: var(--r-3); } .scan .top li.leeg::before { display: none; }
.scan .top-kop { display: flex; align-items: center; gap: var(--r-2); flex-wrap: wrap; margin-bottom: 4px; }
.scan .top-kop b { color: var(--tekst); font-weight: 500; }
.scan .top p { margin: 2px 0 0; color: var(--tekst-2); font-size: var(--tekst-xs); }
.scan .top p.advies, .scan .rij .advies { color: var(--tekst); }
.scan .rij .advies { display: block; margin-top: 4px; font-size: var(--tekst-xs); white-space: normal; }
.scan .rij .advies::before, .scan .top p.advies::before { content: "→ "; color: var(--accent); }

/* Controle-rijen en scorepillen */
.scan .rij.controle { grid-template-columns: 8.5rem 1fr; align-items: start; }
.scan .rij.controle .naam-blok { min-width: 0; }
.scan .rij.controle .onder { white-space: normal; }
@media (max-width: 47.99rem) { .scan .rij.controle { grid-template-columns: 1fr; gap: 4px; } }
.score-pil { font-family: var(--font-mono); font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--lijn-sterk); white-space: nowrap; }
.score-pil small { font-size: 10px; color: var(--tekst-3); }
.score-pil.ok { color: var(--ok); } .score-pil.bezig { color: var(--accent); } .score-pil.let-op { color: var(--let-op); } .score-pil.wacht { color: var(--tekst-3); }

/* Historie en startkaart */
.rij.rij-scan { grid-template-columns: 7rem 1fr auto; }
.rij.rij-scan-kort { grid-template-columns: minmax(0, 1fr) auto; }
.rij.rij-scan-kort .naam, .rij.rij-scan-kort .onder { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 47.99rem) { .rij.rij-scan { grid-template-columns: 1fr auto; } .rij.rij-scan .tijd { display: none; } }

/* Paneel met de listing */
.scan .paneel-beeld img { width: 100%; max-height: 14rem; object-fit: contain; background: #fff; border-radius: var(--radius); border: 1px solid var(--lijn); }
.scan .paneel .eig { grid-template-columns: 5.5rem 1fr; }
.scan .paneel .eig span:nth-child(even) { overflow-wrap: anywhere; }
.scan .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.scan .thumbs:empty { display: none; }
.scan .thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 4px; border: 1px solid var(--lijn); }
.scan #ai-blok { display: grid; gap: var(--r-2); }

/* Verbetervoorstel */
.scan .voorstel { gap: var(--r-4); }
.scan .voorstel-blok { border-top: 1px solid var(--lijn); padding-top: var(--r-3); }
.scan .voorstel-kop { display: flex; justify-content: space-between; align-items: center; gap: var(--r-3); margin-bottom: var(--r-2); flex-wrap: wrap; }
.scan .voorstel-titel { font-size: var(--tekst-m); color: var(--tekst); font-weight: 500; }
.scan .voorstel ul { margin: 0; padding-left: 1.2rem; color: var(--tekst-2); }
.scan .voorstel-html { color: var(--tekst-2); max-width: 46rem; }
.scan .voorstel-html h3 { font-size: var(--tekst-s); color: var(--tekst); margin: var(--r-3) 0 var(--r-1); }
.scan .voorstel-html p, .scan .voorstel-html ul { margin: 0 0 var(--r-2); }
.scan .tag { display: inline-block; padding: 2px 8px; border: 1px solid var(--lijn-sterk); border-radius: 999px; font-size: var(--tekst-xs); color: var(--tekst-2); margin: 2px 2px 2px 0; }
.scan .melding ul { margin: 6px 0 0; padding-left: 1.2rem; }

/* De regels */
.scan .regels-eig { grid-template-columns: 9rem 1fr; }
.scan .regels-lijst { margin: 0; padding-left: 1.2rem; color: var(--tekst-2); }
.scan .regels-lijst li { margin-bottom: 4px; }
.scan .regels-lijst b { color: var(--tekst); font-weight: 500; }
.scan .scan-stappen { padding-left: 1.4rem; color: var(--tekst-2); display: grid; gap: var(--r-2); margin: 0; }
.scan .scan-stappen b { color: var(--tekst); font-weight: 500; }

/* Print: alleen het rapport */
@media print {
  :root { color-scheme: light; }
  .app { grid-template-columns: 1fr; background: #fff; color: #222; }
  .app-zij, .app-mobiel, .app-balk-acties, .scan #filter, .scan #ai-blok, .scan .paneel hr, .scan .intro, .scan #laden-scan { display: none !important; }
  .app-balk { position: static; border: 0; }
  .scan .werkvlak { grid-template-columns: 1fr; }
  .scan .paneel { position: static; max-height: none; page-break-inside: avoid; }
  .scan .kaart, .scan .lijst, .scan .kpi-raster, .scan .top li, .scan .paneel { background: #fff; border-color: #ccc; color: #222; }
  .scan .rij .naam, .scan .top-kop b, .scan .kpi strong, .scan h2, .scan h3 { color: #111; }
  .scan .rij .onder, .scan .top p, .scan .kaart-kop .sub { color: #444; }
  .scan .sectie { page-break-inside: avoid; }
}