/* =====================================================================
   STIJLBESTAND  -  VCA** veiligheidsformulieren
   =====================================================================
   INHOUD
     0. Kleuren en lettertypes   <- hier pas je het uiterlijk aan
     1. Basis
     2. Kopbalk en menu
     3. Voorpagina
     4. Knoppen
     5. Formulieren invullen
     6. Tabellen en labels
     7. Beheer (dashboard)
     8. Popup
     9. Meldingen
    10. Voettekst
    11. Overzicht: tegels, lijsten en filters
    12. Werknemers, certificaten en gebruikers
    13. Foto's uploaden
    14. Maandverslag
    15. Responsief en afdrukken

   SNEL AANPASSEN: verander alleen de waarden in sectie 0.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. KLEUREN EN LETTERTYPES
   --------------------------------------------------------------------- */
:root {
  --ink: #16222b;                             /* donkere kleur (tekst, menubalk) */
  --steel: #2b3b47;                           /* tweede donkere kleur (menuhover) */
  --mist: #eef1f3;                            /* lichtgrijze paginaachtergrond */
  --line: #d3dae0;                            /* kleur van randjes */
  --paper: #fff;                              /* wit (blokken en kaarten) */
  --hi: #ffc400;                              /* SIGNAALKLEUR geel: knoppen, streep, bord */
  --hi-d: #d9a500;                            /* donkerder geel (knop bij hover) */
  --ok: #1f7a4d;                              /* groen (gelukt) */
  --bad: #b3261e;                             /* rood (fout, verwijderen) */
  --r: 6px;                                   /* afronding van hoeken (0 = scherp) */
  /* lettertype koppen */
  --head: 'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  /* lettertype gewone tekst */
  --body: 'Barlow',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}


/* ---------------------------------------------------------------------
   1. BASIS
   Basisinstellingen voor de hele pagina
   --------------------------------------------------------------------- */

/* Alles gebruikt dezelfde boxmodel-berekening (padding telt mee in de breedte) */
* {
  box-sizing: border-box;
}

/* Voorkomt dat de menubalk koppen afdekt bij het scrollen naar een anker */
html {
  scroll-padding-top: 80px;
}

/* Hele pagina: lettertype, grootte en achtergrondkleur */
body {
  margin: 0;
  font: 17px/1.55 var(--body);
  color: var(--ink);
  background: var(--mist);
}

/* Alle koppen: lettertype en regelafstand */
h1,
h2,
h3 {
  font-family: var(--head);
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}

/* Grote kop (titel van de pagina) */
h1 {
  font-size: clamp(2.4rem,6vw,4rem);
}

/* Middelgrote kop */
h2 {
  font-size: 2rem;
}

/* Kleine kop (kaarttitels) */
h3 {
  font-size: 1.4rem;
}

/* Links nemen de tekstkleur over */
a {
  color: inherit;
}

/* Zichtbare rand om knoppen en velden bij toetsenbordgebruik (toegankelijkheid) */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------------
   2. KOPBALK EN MENU
   Streep bovenaan, logo en navigatie
   --------------------------------------------------------------------- */

/* Gele/zwarte waarschuwingsstreep bovenaan de pagina */
.hazard {
  height: 12px;
  background: repeating-linear-gradient(-45deg,var(--hi) 0 16px,var(--ink) 16px 32px);
}

/* Donkere menubalk, blijft bovenaan staan */
header.top {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Binnenkant van de menubalk (links logo, rechts menu) */
header.top .in {
  max-width: 1100px;
  margin: auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

/* Logo met bedrijfsnaam */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--head);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Gele VCA**-badge in het logo */
.logo b {
  background: var(--hi);
  color: var(--ink);
  padding: 2px 10px;
  border-radius: var(--r);
  font-size: 1.3rem;
}

/* Menu met de twee links */
nav {
  display: flex;
  gap: 6px;
}

/* Een menulink */
nav a {
  padding: 8px 14px;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}

/* Menulink bij hover en de pagina waar je nu bent */
nav a:hover,
nav a.on {
  background: var(--steel);
}

/* Hoofdgedeelte van de pagina (maximale breedte) */
main {
  max-width: 1100px;
  margin: auto;
  padding: 28px 20px 60px;
}


/* ---------------------------------------------------------------------
   3. VOORPAGINA
   Welkomstblok, bord met dagen zonder ongeval, tip en formulierkaarten
   --------------------------------------------------------------------- */

/* Grote donkere blok bovenaan met de welkomsttekst */
.hero {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  padding: 40px clamp(20px,5vw,48px);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  border-left: 14px solid var(--hi);
}

/* Tekst in het donkere blok */
.hero p {
  max-width: 54ch;
  color: #c9d3da;
  font-size: 1.1rem;
  margin: 0;
}

/* Gele VCA**-label boven de titel */
.badge {
  display: inline-block;
  background: var(--hi);
  color: var(--ink);
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 2px 12px;
  border-radius: var(--r);
  margin-bottom: 14px;
}

/* Vak met het bord en de tip naast elkaar */
.deck {
  display: grid;
  grid-template-columns: minmax(260px,1fr) 1.4fr;
  gap: 18px;
  margin-bottom: 34px;
}

/* Geel bord 'dagen zonder ongeval' */
.sign {
  background: var(--hi);
  color: var(--ink);
  border: 6px solid var(--ink);
  border-radius: var(--r);
  padding: 22px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-shadow: inset 0 0 0 4px var(--hi),inset 0 0 0 7px var(--ink);
}

/* Het grote getal op het bord */
.sign-n {
  font: 700 clamp(4rem,10vw,6.5rem)/1 var(--head);
  font-variant-numeric: tabular-nums;
}

/* Tekst onder het getal */
.sign-t {
  font: 700 1.7rem var(--head);
}

/* Kleine tekst op het bord */
.sign .meta {
  color: var(--ink);
  opacity: .8;
}

/* Blok met de veiligheidstip van vandaag */
.tip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 8px solid var(--ink);
  border-radius: var(--r);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tekst van de tip */
.tip p {
  font-size: 1.2rem;
  margin: 0;
  max-width: 52ch;
}

/* Mijlpaal-label (elke 100 dagen) */
.milestone {
  background: var(--ink);
  color: var(--hi);
  display: inline-block;
  padding: 2px 12px;
  border-radius: 99px;
  font-weight: 600;
  font-size: .85rem;
  margin: 6px auto 0;
}

/* Raster waarin de formulierkaarten staan */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 18px;
}

/* Een formulierkaart */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 5px solid var(--hi);
}

/* Omschrijving in de kaart */
.card p {
  margin: 0;
  color: #52626e;
  flex: 1;
}


/* ---------------------------------------------------------------------
   4. KNOPPEN
   Alle knoppen op de site
   --------------------------------------------------------------------- */

/* Standaardknop (geel) */
.btn {
  display: inline-block;
  border: 2px solid var(--ink);
  background: var(--hi);
  color: var(--ink);
  font: 600 1rem var(--body);
  padding: 10px 18px;
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

/* Knop bij hover */
.btn:hover {
  background: var(--hi-d);
}

/* Knop met alleen een rand (Annuleren, Terug) */
.btn.ghost {
  background: transparent;
}

/* Randknop bij hover */
.btn.ghost:hover {
  background: var(--mist);
}

/* Rode knop voor verwijderen */
.btn.danger {
  background: var(--paper);
  color: var(--bad);
  border-color: var(--bad);
}

/* Verwijderknop bij hover */
.btn.danger:hover {
  background: #fbe9e7;
}

/* Kleine knop (in tabellen) */
.btn.sm {
  padding: 5px 11px;
  font-size: .88rem;
}


/* ---------------------------------------------------------------------
   5. FORMULIEREN INVULLEN
   Invoervelden, keuzeknoppen en blokken
   --------------------------------------------------------------------- */

/* Wit blok met rand (formulieren, inloggen) */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(18px,4vw,32px);
}

/* Tekst boven een invoerveld */
label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Rood sterretje bij verplichte velden */
.req::after {
  content: " *";
  color: var(--bad);
}

/* Alle invoervelden: tekstveld, wachtwoord, datum, keuzelijst, tekstvak */
input[type=text],input[type=password],input[type=date],select,textarea {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
}

/* Invoerveld waar je in typt */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
}

/* Groot tekstvak: minimale hoogte */
textarea {
  min-height: 100px;
  resize: vertical;
}

/* Een vraag met label en invoer */
.field {
  margin-bottom: 20px;
}

/* Rij met keuzeknoppen (Ja/Nee/N.v.t.) */
.opts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Een keuzeknop */
.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 500;
  margin: 0;
}

/* Gekozen keuze wordt geel gemarkeerd */
.opt:has(input:checked) {
  border-color: var(--ink);
  background: #fff6cc;
}

/* Het rondje of vinkje zelf */
.opt input {
  accent-color: var(--ink);
  width: 18px;
  height: 18px;
}


/* ---------------------------------------------------------------------
   6. TABELLEN EN LABELS
   Overzichten in het beheer
   --------------------------------------------------------------------- */

/* Tabel */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
}

/* Cellen van de tabel */
th,
td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

/* Kopregel van de tabel */
th {
  font-family: var(--head);
  font-size: 1.1rem;
  background: var(--mist);
}

/* Rand om de tabel, scrolt zijwaarts op kleine schermen */
.tbl {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* Klein label (Zichtbaar, Actief) */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
}

/* Groen label */
.pill.on {
  background: #d8f0e3;
  color: var(--ok);
}

/* Grijs label */
.pill.off {
  background: #e6e9ec;
  color: #5b6a75;
}


/* ---------------------------------------------------------------------
   7. BEHEER (DASHBOARD)
   Tabbladen, knoppenrijen, bouwer en inloggen
   --------------------------------------------------------------------- */

/* Rij met knoppen naast elkaar */
.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Balk met titel links en knoppen rechts */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Rij met tabbladen */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--ink);
}

/* Een tabblad */
.tabs button {
  font: 700 1.2rem var(--head);
  background: transparent;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: var(--r) var(--r) 0 0;
}

/* Tabblad dat nu open is */
.tabs button.on {
  background: var(--ink);
  color: #fff;
}

/* Een vraag in de formulierbouwer */
.frow {
  display: grid;
  grid-template-columns: 2fr 1.2fr auto auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 10px;
  background: var(--mist);
}

/* Veld dat de hele breedte van de rij gebruikt */
.frow .full {
  grid-column: 1/-1;
}

/* Kleinere labels in de bouwer */
.frow label {
  font-size: .82rem;
  margin-bottom: 3px;
}

/* Vinkje met tekst ernaast */
.chk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  margin: 0 0 10px;
  font-weight: 500;
}

/* Inlogvenster: smalle kolom in het midden */
.login {
  max-width: 420px;
  margin: 40px auto;
}


/* ---------------------------------------------------------------------
   8. POPUP
   Dialoogvensters voor bewerken en bekijken
   --------------------------------------------------------------------- */

/* Popup (dialoogvenster) */
dialog {
  border: 0;
  border-radius: var(--r);
  padding: 0;
  width: min(720px,94vw);
  max-height: 92vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* Donkere achtergrond achter de popup */
dialog::backdrop {
  background: rgba(22,34,43,.7);
}

/* Kop van de popup */
dialog .hd {
  background: var(--ink);
  color: #fff;
  padding: 16px 24px;
  border-bottom: 6px solid var(--hi);
}

/* Titel in de popup */
dialog .hd h2 {
  margin: 0;
}

/* Inhoud van de popup (scrolt bij veel tekst) */
dialog .bd {
  padding: 24px;
  overflow: auto;
  max-height: 68vh;
}

/* Onderkant met de knoppen */
dialog .ft {
  padding: 14px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--mist);
}


/* ---------------------------------------------------------------------
   9. MELDINGEN
   Mededelingen, foutmeldingen en korte berichten
   --------------------------------------------------------------------- */

/* Kleine grijze tekst */
.meta {
  font-size: .85rem;
  color: #6b7b87;
}

/* Gele mededeling */
.notice {
  padding: 14px 16px;
  border-radius: var(--r);
  margin-bottom: 20px;
  background: #fff6cc;
  border-left: 6px solid var(--hi-d);
}

/* Groene mededeling (gelukt) */
.notice.ok {
  background: #d8f0e3;
  border-color: var(--ok);
}

/* Lege toestand (geen formulieren) */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: #52626e;
}

/* Rode foutmelding */
.err {
  color: var(--bad);
  font-weight: 600;
  min-height: 1.4em;
}

/* Melding die even onderin beeld verschijnt */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--r);
  border-left: 6px solid var(--hi);
  z-index: 50;
}


/* ---------------------------------------------------------------------
   10. VOETTEKST
   Onderaan de pagina
   --------------------------------------------------------------------- */

/* Voettekst onderaan */
footer {
  text-align: center;
  padding: 24px;
  color: #6b7b87;
  font-size: .88rem;
}


/* ---------------------------------------------------------------------
   11. OVERZICHT: TEGELS, LIJSTEN EN FILTERS
   Kengetallen-tegels, twee kolommen, zoekbalk met filters
   --------------------------------------------------------------------- */

/* Rij met kengetallen-tegels */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* Een kengetal: groot getal met uitleg eronder */
.kpi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--ink);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi b {
  font: 700 2.4rem/1 var(--head);
  font-variant-numeric: tabular-nums;
}
.kpi span { color: #52626e; font-size: .92rem; }
.kpi em { font-style: normal; font-size: .82rem; color: #6b7b87; }
.kpi.warn { border-left-color: var(--hi-d); }
.kpi.bad  { border-left-color: var(--bad); }
.kpi.good { border-left-color: var(--ok); }

/* Twee blokken naast elkaar */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Eenvoudige lijst met scheidingslijntjes */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.list li:last-child { border-bottom: 0; }

/* Rij met filters boven een tabel */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}

/* Twee invoervelden naast elkaar in een formulier */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* Extra labelkleuren: oranje = binnenkort, rood = verlopen */
.pill.soon { background: #fff0c2; color: #7a5600; }
.pill.bad  { background: #fbe1de; color: var(--bad); }

/* Klein label (rechten van een gebruiker) */
.chip {
  display: inline-block;
  background: #e6e9ec;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
  margin: 2px 4px 2px 0;
}
.chip.warn { background: #fff0c2; color: #7a5600; }

/* Kentekenplaatje */
.plate {
  display: inline-block;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 1px 8px;
  font: 700 .95rem ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}

code {
  background: var(--mist);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .9em;
}
hr { border: 0; border-top: 2px solid var(--line); margin: 24px 0; }
h4 { font: 700 1.2rem var(--head); margin: 0 0 12px; }


/* ---------------------------------------------------------------------
   12. WERKNEMERS, CERTIFICATEN EN GEBRUIKERS
   --------------------------------------------------------------------- */

/* Bredere popup (formulierbouwer, werknemer, gebruiker) */
dialog.wide { width: min(900px, 96vw); }

/* Vak om een certificaat toe te voegen */
.certform {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  margin-top: 16px;
}

/* Lijst met aanvinkbare rechten */
.permlist { display: flex; flex-wrap: wrap; gap: 8px; }

/* Voorbeeld van wat iemand ziet in het beheer */
.preview {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--mist);
  border-left: 6px solid var(--hi);
  border-radius: var(--r);
}

/* Inloggegevens-kaart (eenmalig wachtwoord) */
.cred { display: grid; gap: 8px; margin: 14px 0; }
.cred div {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: #fff6cc;
}
.cred span { color: #52626e; font-size: .82rem; }
.cred b {
  font: 700 1.35rem ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  word-break: break-all;
}


/* ---------------------------------------------------------------------
   13. FOTO'S UPLOADEN
   --------------------------------------------------------------------- */

/* Knop "Foto toevoegen" met kleine voorbeelden eronder */
.upl-btn { cursor: pointer; margin-right: 10px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.thumb { position: relative; margin: 0; width: 92px; height: 92px; }
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r);
  border: 2px solid var(--line);
}
/* Rond kruisje om een foto weg te halen */
.thumb button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--bad);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
/* Grotere foto's in een bekeken formulier */
.thumbs.big img {
  width: 170px;
  height: 125px;
  object-fit: cover;
  border-radius: var(--r);
  border: 2px solid var(--line);
}


/* ---------------------------------------------------------------------
   14. MAANDVERSLAG
   De kleuren van de grafieken staan bij .report
   --------------------------------------------------------------------- */

/* Zwevend tipje bij grafieken */
#tip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--r);
  border-left: 5px solid var(--hi);
  font-size: .85rem;
}
#tip[hidden] { display: none; }

/* Knoppenbalk boven het verslag */
.rp-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 14px;
}

/* Het verslag zelf: wit vel papier */
.report {
  --c1: #2a78d6;   /* grafiekkleur 1 (blauw) */
  --c2: #eb6834;   /* grafiekkleur 2 (oranje) */
  --c3: #9aa7b1;   /* grijs voor "N.v.t." */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Voorblad-balk bovenaan het verslag */
.rp-cover {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--ink);
  color: #fff;
  padding: 28px 32px;
  border-left: 14px solid var(--hi);
}
.rp-cover h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0; }
.rp-month { font: 600 1.6rem var(--head); color: var(--hi); margin: 6px 0 0; text-transform: capitalize; }
.rp-cover dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 16px;
  margin: 0;
  font-size: .92rem;
  align-content: center;
}
.rp-cover dt { color: #9db0be; }
.rp-cover dd { margin: 0; font-weight: 600; }

/* Een onderdeel van het verslag met genummerde kop */
.rp-sec { padding: 26px 32px 8px; border-bottom: 1px solid var(--line); }
.rp-sec h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.7rem;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 16px;
}
.rp-sec h2 span {
  background: var(--hi);
  color: var(--ink);
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.rp-sec h3 { font-size: 1.15rem; margin: 18px 0 8px; color: var(--steel); }
.rp-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }

/* Lijst met bevindingen */
.rp-ins { margin: 0 0 18px; padding-left: 20px; }
.rp-ins li { margin-bottom: 6px; }

/* Grafieken (SVG) */
.rp-svg { width: 100%; height: auto; display: block; }
.rp-grid { stroke: #e3e8ec; stroke-width: 1; }
.rp-grid.base { stroke: #9aa7b1; }
.rp-ax { font: 11px var(--body); fill: #52626e; }
.rp-val { font: 600 12px var(--body); fill: var(--ink); }
.rp-bar { fill: var(--c1); }
.rp-bar.soft { fill: #a9c8f0; }
.rp-hit { fill: transparent; }
.rp-hit:hover { fill: rgba(22, 34, 43, .07); }

/* "Toon als tabel" onder een grafiek */
.rp-table summary { cursor: pointer; font-size: .85rem; color: #52626e; margin: 4px 0; }
.rp-table table { max-width: 320px; font-size: .9rem; }

/* Horizontale balken (per formulier, per soort melding) */
.hb {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
}
.hb-l { font-size: .92rem; }
.hb-t { height: 14px; background: var(--mist); border-radius: 4px; }
.hb-t i { display: block; height: 100%; background: var(--c1); border-radius: 0 4px 4px 0; }
.hb-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.hb-v small { font-weight: 400; color: #6b7b87; }

/* Ja / Nee / N.v.t. balkje */
.rp-yn td.w { width: 36%; }
.stack { display: flex; gap: 2px; height: 14px; min-width: 140px; }
.stack i { display: block; border-radius: 3px; }
.stack i.a, .rp-legend i.a { background: var(--c1); }
.stack i.b, .rp-legend i.b { background: var(--c2); }
.stack i.c, .rp-legend i.c { background: var(--c3); }
.rp-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin: 0 4px 0 12px;
  vertical-align: -1px;
}

/* Typveld voor opmerkingen en handtekeningen */
.rp-notes {
  min-height: 110px;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  white-space: pre-wrap;
}
.rp-notes:empty::before { content: attr(data-ph); color: #8896a1; }
.rp-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 28px 0 18px; }
.rp-sign span { font-weight: 600; }
.rp-sign i { display: block; height: 48px; border-bottom: 1px solid var(--ink); }
.rp-sign small { color: #6b7b87; }

.rp-small { font-size: .85rem; }
.rp-small th, .rp-small td { padding: 7px 8px; }
.rp-foot { text-align: center; padding: 16px; font-size: .82rem; color: #6b7b87; }


/* ---------------------------------------------------------------------
   15. RESPONSIEF EN AFDRUKKEN
   Aanpassingen voor telefoon, printen en beweging. Moet onderaan blijven staan
   --------------------------------------------------------------------- */

/* Telefoon: kleine schermen (tot 640 px) */
@media(max-width:640px) {
  .frow {
    grid-template-columns: 1fr 1fr;
  }
  .frow .full {
    grid-column: 1/-1;
  }
  nav a {
    padding: 8px 10px;
  }
  .logo span {
    display: none;
  }
}

/* Afdrukken: menu en voet verbergen */
@media print {
  header.top,
  .hazard,
  footer,
  .no-print,
  .tabs {
    display: none!important;
  }
  body {
    background: #fff;
  }
}

/* Zachte beweging op kaarten, alleen als de bezoeker dat toestaat */
@media(prefers-reduced-motion:no-preference) {
  .card {
    transition: transform .15s;
  }
  .card:hover {
    transform: translateY(-3px);
  }
}

/* Kleine schermen: bord en tip onder elkaar */
@media(max-width:760px) {
  .deck {
    grid-template-columns: 1fr;
  }
}

/* Telefoon: nieuwe onderdelen */
@media (max-width: 760px) {
  .two, .rp-two {
    grid-template-columns: 1fr;
  }
  .rp-sec, .rp-cover {
    padding-left: 18px;
    padding-right: 18px;
  }
  .rp-sign {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
  .hb {
    grid-template-columns: 1fr auto;
  }
  .hb-t {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Afdrukken: alleen het verslag of de geopende popup op papier */
@page {
  size: A4;
  margin: 12mm;
}
@media print {
  main {
    padding: 0;
    max-width: none;
  }
  .report {
    border: 0;
    border-radius: 0;
  }
  .rp-sec {
    border-bottom: 0;
    padding: 14px 0 4px;
  }
  .rp-cover {
    padding: 18px 20px;
  }
  .rp-sec {
    break-inside: avoid;
  }
  .rp-sec.rp-break {
    break-inside: auto;
    break-before: page;
  }
  .toast,
  #tip {
    display: none !important;
  }
  .rp-sec h2,
  .rp-sec h3 {
    break-after: avoid;
  }
  .kpis, .kpi, .rp-two > div, .rp-sign, .notice, .rp-svg, tr {
    break-inside: avoid;
  }
  .rp-notes {
    border-style: solid;
  }
  .rp-notes:empty::before {
    content: '';
  }
  .rp-hit {
    display: none;
  }
  body:has(dialog[open]) main,
  body:has(dialog[open]) header {
    display: none;
  }
  dialog[open] {
    position: static;
    box-shadow: none;
    width: auto;
    max-height: none;
  }
  dialog[open] .ft {
    display: none;
  }
  dialog[open] .bd {
    max-height: none;
    overflow: visible;
  }
}


/* ---------------------------------------------------------------------
   MELDING NIEUWE FORMULIEREN (rode teller bij Beheer en tabblad Ingevuld)
   --------------------------------------------------------------------- */
.newb {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #c62828;
  color: #fff;
  font-family: var(--body, inherit);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}
tr.isnew td { background: #fff8d6; }
@media print { .newb { display: none; } }

/* Menu-items die verborgen zijn (zonder inlog of zonder beheerrechten) */
nav a[hidden] { display: none; }

/* Het hidden-attribuut moet altijd winnen van andere display-regels */
[hidden] { display: none !important; }