/* ================= het testcertificaat — "keuringsrapport" =================
   Gekozen 19/9 uit de herontwerpronde van 10/9 (certificaat-ontwerp/herontwerp-
   2026-09-10): richting 3 als ruggengraat — genummerde secties, meettabel met
   gemeten / eis / oordeel per regel — met het gekleurde resultaatvlak bovenaan
   zodat een afkeuring van ver te zien is. Eén bestand voor de beheerapp én het
   klantportaal; de opbouw staat in cert.js.
   Alle klassen beginnen met "c-" zodat ze niet botsen met de rest van de app.
   Twee uitvoeringen met dezelfde botten: .cert.nok zet het groen om naar rood. */
:root{--c-ink:#111;--c-grijs:#555;--c-lijn:#bbb;--c-zacht:#f0f2f4;
      --c-groen:#1c7a35;--c-groen-d:#14622a;--c-rood:#b3261e;--c-rood-d:#8c1d17}
.cert{--ck:var(--c-groen);--ck-d:var(--c-groen-d);
  background:#fff;color:var(--c-ink);max-width:820px;margin:0 auto;padding:30px 34px 22px;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:12.2px;line-height:1.38;
  border:1px solid #d5dbe1;border-radius:10px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.cert.nok{--ck:var(--c-rood);--ck-d:var(--c-rood-d)}
.cert .mono{font-family:Consolas,ui-monospace,"SFMono-Regular",Menlo,monospace}

/* ---- kop: merk links, documentgegevens rechts ---- */
.cert .c-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-bottom:2.5px solid var(--c-ink);padding-bottom:10px}
.cert .c-merk{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.14em;font-size:17px}
.cert .c-merk img{height:26px;display:block}
.cert .c-sub{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-grijs);margin-top:7px}
.cert table.c-doc{border-collapse:collapse;font-size:11.2px}
.cert table.c-doc th{text-align:left;font-weight:400;color:var(--c-grijs);padding:1px 14px 1px 0;
  letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
.cert table.c-doc td{padding:1px 0;font-weight:700}

/* ---- slang-ID en het resultaatvlak ---- */
.cert .c-ident{display:flex;border-bottom:1px solid var(--c-ink);align-items:stretch;gap:14px}
.cert .c-ident .c-slang{flex:1;padding:11px 0 9px}
.cert .c-ident small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-grijs)}
.cert .c-ident .c-slang b{display:block;font-size:34px;letter-spacing:.02em;line-height:1.05;margin-top:2px}
.cert .c-ident .c-slang .c-loc{display:block;font-size:13px;font-weight:600;margin-top:2px}
.cert .c-ident .c-uitslag{flex:1.25;background:var(--ck);color:#fff;padding:10px 18px 9px;margin:6px 0}
.cert .c-ident .c-uitslag small{color:rgba(255,255,255,.82)}
.cert .c-ident .c-uitslag b{display:block;font-size:26px;letter-spacing:.08em;line-height:1.1;margin-top:2px}
.cert .c-ident .c-uitslag span{display:block;font-size:11.5px;margin-top:3px;opacity:.96}

/* ---- genummerde secties ---- */
.cert h2.c-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:13px 0 5px;
  display:flex;align-items:center;gap:8px;font-weight:700;color:var(--c-ink);border:0;padding:0}
.cert h2.c-h i{font-style:normal;display:inline-block;min-width:19px;height:19px;background:var(--c-ink);color:#fff;
  text-align:center;line-height:19px;font-size:10.5px;font-weight:700}
.cert h2.c-h.c-uit i{background:var(--ck)}
.cert .c-cellen{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--c-ink);border-left:1px solid var(--c-lijn)}
.cert .c-cellen>div{border-right:1px solid var(--c-lijn);border-bottom:1px solid var(--c-lijn);padding:4px 9px 4px;min-width:0}
.cert .c-cellen small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-grijs)}
.cert .c-cellen b{display:block;font-weight:600;margin-top:1px;overflow-wrap:anywhere}
.cert .c-cellen b small{display:inline;letter-spacing:0;text-transform:none;font-weight:400;font-size:10.5px}
.cert .c-methode{margin:0 0 7px;color:#333}
.cert .c-methode ul{margin:3px 0 0;padding-left:18px}
.cert table.c-meet{width:100%;border-collapse:collapse}
.cert table.c-meet th{text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-grijs);
  border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-ink);padding:5px 8px;font-weight:700;background:none}
.cert table.c-meet td{padding:3px 8px;border-bottom:1px solid #ccc;vertical-align:top}
.cert table.c-meet td:nth-child(2),.cert table.c-meet td:nth-child(3){white-space:nowrap}
.cert table.c-meet td.c-ja{color:#333}
.cert table.c-meet td.c-nee{color:var(--c-rood);font-weight:700}
.cert table.c-meet td.c-ja::before{content:"\2713  "}
.cert table.c-meet td.c-nee::before{content:"\2715  "}
.cert table.c-meet td.c-geen{color:#888}
.cert .c-punten{margin:3px 0 0;padding-left:21px}
.cert .c-punten li{margin:2px 0}
.cert .c-opm{margin:6px 0 0;color:#333}
.cert .c-opm.c-leeg{color:#888;font-style:italic}

/* ---- vrijgave: tijdlijn, wie, en de handtekening namens Interseal ---- */
.cert .c-tijdlijn{display:flex;border:1px solid var(--c-ink);margin-bottom:8px}
.cert .c-tijdlijn>div{flex:1;padding:5px 11px;border-right:1px solid var(--c-lijn)}
.cert .c-tijdlijn>div:last-child{border-right:0}
.cert .c-tijdlijn small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-grijs)}
.cert .c-tijdlijn b{display:block;font-size:14px;margin-top:1px}
.cert .c-tijdlijn .c-nu{background:var(--c-zacht)}
.cert .c-tijdlijn .c-weg b{color:var(--c-rood)}
.cert .c-slot{display:flex;gap:14px;align-items:stretch}
.cert .c-slot .c-cellen{flex:1;align-self:flex-start}
.cert .c-teken{flex:none;width:250px;border:1px solid var(--c-ink);padding:6px 12px 7px;display:flex;flex-direction:column}
.cert .c-teken small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-grijs)}
.cert .c-teken .c-krabbel{height:52px;display:flex;align-items:flex-end;margin:2px 0 3px;border-bottom:1px solid #888}
.cert .c-teken .c-krabbel img{max-height:50px;max-width:100%;display:block}
.cert .c-teken b{display:block;font-weight:700}
.cert .c-teken span{display:block;font-size:11px;color:#333}

/* ---- voet: voorbehoud, wettelijke vermeldingen, controleregel ---- */
.cert .c-legal{font-size:9.6px;color:#555;line-height:1.5;margin:12px 0 0}
.cert .c-bedrijf{font-size:9.6px;color:#333;line-height:1.5;margin:6px 0 0;border-top:1px solid var(--c-lijn);padding-top:5px}
.cert .c-ctrl{border-top:1px solid var(--c-ink);margin-top:7px;padding-top:4px;font-size:9px;letter-spacing:.1em;color:var(--c-grijs)}

/* smal scherm (gsm): twee kolommen, de handtekening onder de cellen */
@media (max-width:620px){
  .cert{padding:18px 14px 14px}
  .cert .c-kop{flex-direction:column}
  .cert .c-ident{flex-direction:column;gap:0}
  .cert .c-cellen{grid-template-columns:repeat(2,1fr)}
  .cert .c-slot{flex-direction:column}
  .cert .c-teken{width:auto}
  .cert table.c-meet td:nth-child(2),.cert table.c-meet td:nth-child(3){white-space:normal}
}
/* op papier: geen kader, alles op één A4 */
@media print{
  .cert{border:0;border-radius:0;max-width:none;padding:0;font-size:10.2px;line-height:1.32}
  .cert h2.c-h{margin:9px 0 4px}
  .cert .c-kop{padding-bottom:7px}
  .cert .c-ident .c-slang{padding:8px 0 6px}
  .cert .c-cellen>div{padding:3px 8px}
  .cert table.c-meet td{padding:2px 8px}
  .cert .c-teken .c-krabbel{height:44px}
  .cert .c-teken .c-krabbel img{max-height:42px}
  .cert .c-legal{margin-top:9px}
  .cert .c-ident .c-slang b{font-size:28px}
  .cert .c-ident .c-slang .c-loc{font-size:11.5px}
  .cert .c-ident .c-uitslag b{font-size:22px}
  .cert .c-cellen{grid-template-columns:repeat(3,1fr)}
  .cert .c-slot,.cert .c-kop{flex-direction:row}
  .cert .c-ident{flex-direction:row}
  .cert h2.c-h,.cert .c-tijdlijn,.cert .c-slot,.cert table.c-meet tr{break-inside:avoid}
}