/* Huisstijl ICB-platform volgens de officiele huisstijlgids (Huisstijl V0.3, Drive > 10. Techniek
   en ICT > Logo en huisstijl) en de website icbarendrecht.nl: petrol #045461 en teal #00A4A2,
   letter Poppins. Van de website overgenomen: geel #E9C937 voor de belangrijkste knop en het
   lichte vlak #E5EEEF. Alle kleuren staan hier; modules gebruiken alleen deze variabelen. */
:root{
  --petrol:#045461; --petrol-donker:#033E48; --teal:#00A4A2; --teal-licht:#E0F4F3;
  --geel:#E9C937; --geel-licht:#F6D55C; --vlak:#E5EEEF; --achtergrond:#F3F7F8;
  --wit:#FFFFFF; --inkt:#1E3236; --grijs:#5B6E73; --lijn:#DCE6E8; --rood:#B23A2E;
  --radius:8px; --radius-kaart:12px; --schaduw:0 1px 3px rgba(4,84,97,.06), 0 8px 24px rgba(4,84,97,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--achtergrond);color:var(--inkt);font-size:14.5px;line-height:1.55}
h1,h2,h3,.display{font-family:'Poppins',system-ui,sans-serif;font-weight:600;color:var(--petrol)}
a{color:var(--petrol)}

header{background:var(--wit);color:var(--petrol);border-bottom:1px solid var(--lijn);box-shadow:0 2px 12px rgba(4,84,97,.05)}
.header-inner{max-width:1100px;margin:0 auto;padding:14px 24px 0}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:46px;width:auto;display:block}
.brand .app-naam{font-weight:600;font-size:15px;color:var(--petrol);padding-left:14px;border-left:1.5px solid var(--lijn);line-height:1.2}
.wie{font-size:13px;color:var(--grijs);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
nav{display:flex;gap:4px;margin-top:10px;flex-wrap:wrap;min-height:6px}
nav a{color:var(--grijs);text-decoration:none;font-weight:500;padding:10px 14px;border-bottom:3px solid transparent}
nav a:hover{color:var(--petrol)}
nav a.actief{color:var(--petrol);font-weight:600;border-bottom-color:var(--teal)}

main{max-width:1100px;margin:0 auto;padding:28px 24px 80px}
.paneel-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.paneel-kop h2{font-size:24px;color:var(--petrol)}
.uitleg{color:var(--grijs);font-size:13.5px}

.btn{appearance:none;font:inherit;font-weight:600;font-size:14px;border-radius:var(--radius);padding:9px 18px;cursor:pointer;border:1.5px solid transparent;transition:background .15s,border-color .15s}
.btn-primair{background:var(--geel);color:var(--petrol);border-color:var(--geel)}
.btn-primair:hover{background:var(--geel-licht);border-color:var(--geel-licht)}
.btn-stil{background:var(--wit);color:var(--petrol);border-color:var(--lijn)}
.btn-stil:hover{border-color:var(--teal)}
.btn-omlijnd{background:transparent;color:var(--petrol);border-color:var(--lijn);padding:5px 12px;font-size:13px}
.btn-omlijnd:hover{border-color:var(--teal)}
.btn-gevaar{background:transparent;color:var(--rood);border:0;padding:4px 8px;font-weight:500}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius-kaart);box-shadow:var(--schaduw);margin-bottom:18px}
.kaart-body{padding:16px 18px}
.tabel-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--grijs);font-weight:600;text-align:left;padding:11px 14px;border-bottom:1px solid var(--lijn);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--lijn);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.leeg{padding:32px 20px;text-align:center;color:var(--grijs)}
.klein-grijs{font-size:12.5px;color:var(--grijs)}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--vlak);color:var(--grijs);border:1px solid var(--lijn)}
.chip-groen{background:var(--teal-licht);color:var(--petrol);border-color:#A9DDDB}
.chip-goud{background:#FBF3CF;color:#6B5A0E;border-color:#EBD67A}

.veld{margin-bottom:12px}
.veld label{display:block;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--grijs);margin-bottom:5px}
.veld input,.veld textarea,select{width:100%;font:inherit;padding:8px 10px;border:1.5px solid var(--lijn);border-radius:var(--radius);background:var(--wit);color:var(--inkt)}
td select{width:auto;padding:5px 8px;font-size:13px}
.check{display:inline-flex;gap:6px;align-items:center;font-size:13.5px;cursor:pointer}

#scherm{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
#scherm .kaart{padding:32px 36px;max-width:440px}
#scherm h2{color:var(--petrol);font-size:26px;margin-bottom:8px}
#scherm p{color:var(--grijs);margin-bottom:18px}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--petrol-donker);color:var(--vlak);padding:10px 18px;border-radius:var(--radius);font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:200;max-width:90vw}
#toast.zichtbaar{opacity:1}
.proeflabel{background:var(--rood);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;padding:2px 8px;border-radius:4px}

@media(max-width:640px){
  .header-inner{padding:18px 16px 0} main{padding:20px 16px 60px} .brand h1{font-size:23px} nav a{padding:9px 12px}
}

/* ===== Gedeelde onderdelen voor modules ===== */
.btn-klein{padding:6px 10px;font-size:13px;font-weight:500}
.btn-gevaar.btn-klein{padding:6px 8px}
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--lijn)}
.subnav button{appearance:none;font:inherit;font-weight:500;font-size:14.5px;background:none;border:0;border-bottom:2.5px solid transparent;color:var(--grijs);padding:8px 12px;cursor:pointer}
.subnav button:hover{color:var(--petrol)}
.subnav button.actief{color:var(--petrol);border-bottom-color:var(--teal);font-weight:600}
.filterbalk{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filterbalk input[type=search]{font:inherit;padding:8px 12px;border:1.5px solid var(--lijn);border-radius:var(--radius);min-width:220px;background:var(--wit)}
.filterchips{display:flex;gap:6px;flex-wrap:wrap}
.filterchips button{font:inherit;font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;border:1.5px solid var(--lijn);background:var(--wit);color:var(--grijs);cursor:pointer}
.filterchips button.actief{background:var(--petrol);border-color:var(--petrol);color:var(--vlak);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
th.sorteer{cursor:pointer;user-select:none}
th.sorteer:hover{color:var(--petrol)}
th.sorteer .pijl{opacity:.35;margin-left:3px;font-size:10px}
th.sorteer.actief{color:var(--petrol)}
th.sorteer.actief .pijl{opacity:1;color:var(--teal)}

dialog{border:0;border-radius:var(--radius-kaart);overflow:hidden;box-shadow:0 24px 64px rgba(4,84,97,.3);padding:0;width:min(560px,92vw);background:var(--wit);margin:auto}
dialog::backdrop{background:rgba(3,62,72,.45)}
.modal-kop{background:var(--petrol);color:var(--vlak);padding:16px 22px;display:flex;justify-content:space-between;align-items:center}
.modal-kop h3{font-size:18px;color:var(--wit)}
.modal-kop button{background:none;border:0;color:var(--vlak);font-size:22px;cursor:pointer;line-height:1;padding:2px 6px}
.modal-body{padding:22px}
.modal-voet{padding:0 22px 22px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.modal-voet .links{margin-right:auto}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.veld-rij{grid-template-columns:1fr}}
.veld select{width:100%}
.veld .hint{font-size:12.5px;color:var(--grijs);margin-top:4px}
.fout{color:var(--rood);font-size:13px;margin-bottom:10px;display:none}
.fout.zichtbaar{display:block}
.chip-rood{background:#FBECEA;color:var(--rood);border-color:#EDC3BE}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius-kaart);padding:16px 18px;box-shadow:var(--schaduw)}
.stat .label{font-size:11.5px;text-transform:uppercase;letter-spacing:1.5px;color:var(--grijs);font-weight:600}
.stat .waarde{font-family:'Poppins',sans-serif;font-weight:700;font-size:30px;color:var(--petrol);margin-top:4px;font-variant-numeric:tabular-nums}
.stat.alarm .waarde{color:var(--rood)}
.sectiekop{font-size:18px;color:var(--petrol);margin:22px 0 10px}
.melding{background:#FBF6DD;border:1px solid #EBD67A;border-left:4px solid var(--geel);border-radius:var(--radius);padding:11px 15px;margin-bottom:10px;font-size:14px}
.melding.rood{background:#FBECEA;border-color:#EDC3BE;border-left-color:var(--rood)}
.lijstje{list-style:none}

/* ===== Afdrukken (ui.afdrukken): alleen #printgebied komt op papier ===== */
#printgebied{display:none}
@media print{
  body>header,#scherm,#module,#toast,dialog{display:none!important}
  body{background:#fff}
  #printgebied{display:block;font-family:'Poppins',sans-serif;color:#1E3236;padding:10mm 6mm}
  .pf-kop{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--petrol);padding-bottom:12px;margin-bottom:20px}
  .pf-kop h1{font-family:'Poppins',sans-serif;font-size:22pt;color:var(--petrol);font-weight:600}
  .pf-kop .pf-sub{letter-spacing:2px;text-transform:uppercase;font-size:9pt;color:var(--teal);margin-top:2px}
  .pf-meta{text-align:right;font-size:10pt}
  .pf-sectie{font-family:'Poppins',sans-serif;font-weight:600;font-size:12pt;color:var(--petrol);border-bottom:1px solid var(--lijn);margin:18px 0 8px;padding-bottom:3px}
  .pf-tabel{width:100%;border-collapse:collapse;font-size:10.5pt}
  .pf-tabel td{padding:6px 8px;border:1px solid #C9D6D9;vertical-align:top}
  .pf-tabel td:first-child{width:34%;font-weight:600;background:#EEF4F5}
  .pf-voorwaarden{font-size:10pt;padding-left:18px;margin-top:4px}
  .pf-voorwaarden li{margin-bottom:5px}
  .pf-lijst{width:100%;border-collapse:collapse;font-size:10.5pt}
  .pf-lijst th{background:#EEF4F5;border:1px solid #C9D6D9;padding:6px 8px;text-align:left;font-size:9pt;text-transform:uppercase;letter-spacing:.6px}
  .pf-lijst td{border:1px solid #C9D6D9;padding:6px 8px}
  .pf-verklaring{font-size:10.5pt;margin-top:10px;line-height:1.5}
  .pf-onder{display:flex;gap:24px;margin-top:26px}
  .pf-onder>div{flex:1;border:1px solid #C9D6D9;padding:12px;min-height:110px;font-size:10pt}
  .pf-onder .kop{font-weight:700;margin-bottom:8px}
  .pf-lijn{border-bottom:1px solid #999;height:26px;margin-bottom:6px}
}