:root {
  --blou: #081F30; --blou2: #0E2C44; --blou3: #16405F;
  --oranje: #F4511E; --groen: #22C55E; --rooi: #EF4444; --geel: #EAB308; --lugblou: #0EA5E9;
  --teks: #0F1C26; --sag: #5B6B78; --lyn: #DCE3E8; --agter: #F4F6F8; --kaart: #FFFFFF;
  --kop: 56px; --radius: 10px;
  --onder: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--agter); color: var(--teks);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* kopstrook */
#kop { position: fixed; inset: 0 0 auto 0; height: calc(var(--kop) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 6px 0 6px; background: var(--blou); color: #fff;
  display: flex; align-items: center; gap: 6px; z-index: 50; }
#kop h1 { font-size: 18px; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#logo { width: 26px; height: 26px; margin-left: 6px; }
#terugKnop + #logo { }
.vul { flex: 1; }
.ikoonknop { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ikoonknop:hover { background: rgba(255,255,255,.08); }
#terugKnop { width: auto; padding: 0 10px 0 4px; gap: 2px; }

/* kaart */
#hoof { position: fixed; inset: calc(var(--kop) + env(safe-area-inset-top, 0px)) 0 0 0; }
#kaart { position: absolute; inset: 0; background: #dde3e8; z-index: 0; }  /* eie stapel: Leaflet se 400-panele bly onder die knoppies */
.leaflet-bottom.leaflet-right { bottom: calc(78px + var(--onder)); }
#kaartKnoppe { position: absolute; right: 10px; top: 10px; z-index: 20; display: flex; flex-direction: column; gap: 8px; }
.kaartknop { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--lyn); background: #fff; color: var(--blou);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kaartknop.aan { background: var(--blou); color: #fff; border-color: var(--blou); }
#banier { position: absolute; left: 10px; right: 64px; top: 10px; z-index: 20; background: var(--geel); color: var(--blou);
  border-radius: var(--radius); padding: 10px 12px; font-weight: 500; cursor: pointer; }
#banier.rooi { background: var(--rooi); color: #fff; }

/* mense-strook onderaan */
#mense { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 10px calc(10px + var(--onder)); scrollbar-width: none; }
#mense::-webkit-scrollbar { display: none; }
.mens { flex: none; min-width: 150px; max-width: 220px; min-height: 56px; background: #fff; border: 1px solid var(--lyn); border-radius: var(--radius);
  padding: 8px 10px; display: flex; gap: 10px; align-items: center; cursor: pointer; text-align: left; }
.mens.gekies { border-color: var(--blou); box-shadow: inset 0 0 0 1px var(--blou); }
.mens .kol { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.mens b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mens small { display: block; color: var(--sag); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mens.oud small { color: var(--rooi); }

/* kaartmerkers */
.speld { display: flex; flex-direction: column; align-items: center; }
.speld .bol { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.speld .bol.oud { opacity: .55; }
.speld span { margin-top: 2px; background: rgba(8,31,48,.88); color: #fff; font-size: 12px; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.stopmerk { background: #fff; border: 2px solid var(--blou); color: var(--blou); border-radius: 6px; font-size: 11px; font-weight: 600;
  padding: 0 4px; white-space: nowrap; text-align: center; line-height: 16px; }

/* paneel: een op 'n slag, onder die kopstrook, oor die kaart se onderste deel */
#paneel { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--kop) + env(safe-area-inset-top, 0px));
  z-index: 40; background: var(--agter); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(24px + var(--onder)); }
#paneel.half { top: auto; height: min(62vh, 560px); border-top: 1px solid var(--lyn); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 16px rgba(8,31,48,.12); }
@media (min-width: 900px) {
  #paneel, #paneel.half { top: calc(var(--kop) + env(safe-area-inset-top, 0px)); left: auto; width: 420px; height: auto;
    border-left: 1px solid var(--lyn); border-radius: 0; box-shadow: none; }
  #hoof.met-paneel { right: 420px; }
}
#paneelLyf { max-width: 640px; margin: 0 auto; }
h2 { font-size: 19px; margin: 2px 0 12px; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 15px; margin: 18px 0 8px; color: var(--sag); font-weight: 600; text-transform: none; }
.blok { background: var(--kaart); border: 1px solid var(--lyn); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.ry { display: flex; gap: 10px; align-items: center; }
.ry > .vul { flex: 1; min-width: 0; }
.sag { color: var(--sag); font-size: 13px; }
a.knop { text-decoration: none; }
.knop { min-height: 44px; border-radius: var(--radius); border: 1px solid var(--lyn); background: #fff; color: var(--blou);
  padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 500; }
.knop.vol { width: 100%; justify-content: flex-start; margin-bottom: 8px; }
.knop.hoof { background: var(--blou); color: #fff; border-color: var(--blou); }
.knop.oranje { background: var(--oranje); color: #fff; border-color: var(--oranje); }
.knop.rooi { background: var(--rooi); color: #fff; border-color: var(--rooi); }
.knop.groen { background: var(--groen); color: #fff; border-color: var(--groen); }
.knop[disabled] { opacity: .5; cursor: default; }
.knoppe { display: flex; gap: 8px; flex-wrap: wrap; }
.knoppe .knop { flex: 1 1 140px; }
label.veld { display: block; margin: 10px 0; }
label.veld > span { display: block; font-size: 13px; color: var(--sag); margin-bottom: 4px; }
input[type=text], input[type=number], input[type=tel], input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 44px; border: 1px solid var(--lyn); border-radius: 8px; padding: 8px 10px; background: #fff; }
textarea { min-height: 80px; resize: vertical; }
.skakelaar { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.skakelaar input { width: 22px; height: 22px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chip { min-height: 40px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--lyn); background: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip.aan { background: var(--blou); border-color: var(--blou); color: #fff; }

/* syfers */
.syfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.syfer { background: #fff; border: 1px solid var(--lyn); border-radius: var(--radius); padding: 8px 10px; }
.syfer b { display: block; font-size: 19px; font-weight: 650; }
.syfer small { color: var(--sag); font-size: 12px; }
.groot-spoed { font-size: 40px; font-weight: 700; line-height: 1; }

/* lyste */
.lys { list-style: none; margin: 0; padding: 0; }
.lys li { background: #fff; border: 1px solid var(--lyn); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.lys li.klik { cursor: pointer; }
.lys li.gekies { border-color: var(--oranje); box-shadow: inset 0 0 0 1px var(--oranje); }
.lys .kop { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.merk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--agter); color: var(--sag); }
.merk.rooi { background: #FDECEC; color: #B42318; }
.merk.groen { background: #E8F7EE; color: #157F3B; }
canvas.grafiek { width: 100%; height: 140px; display: block; background: #fff; border: 1px solid var(--lyn); border-radius: var(--radius); }
.foto { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; margin-top: 8px; background: var(--agter); }
.tabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--lyn); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
.tabel th, .tabel td { padding: 8px; border-bottom: 1px solid var(--lyn); text-align: right; }
.tabel th:first-child, .tabel td:first-child { text-align: left; }
.tabel tr.som td { font-weight: 650; }
.toets { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--lyn); }
.toets:last-child { border-bottom: 0; }
.toets .vul { flex: 1; }
.toets .ok { color: var(--groen); } .toets .nie { color: var(--rooi); }

/* modaal (net een oorleg op 'n slag) */
#modaal { position: fixed; inset: 0; z-index: 60; background: rgba(8,31,48,.55); display: flex; align-items: flex-end; justify-content: center; }
#modaalLyf { background: #fff; width: 100%; max-width: 480px; border-radius: 14px 14px 0 0; padding: 16px 16px calc(18px + var(--onder)); max-height: 90vh; overflow-y: auto; }
@media (min-width: 600px) { #modaal { align-items: center; } #modaalLyf { border-radius: 14px; } }
#modaalLyf.alarm { border-top: 6px solid var(--rooi); }
#kennis { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + var(--onder)); z-index: 70; background: var(--blou); color: #fff;
  padding: 10px 16px; border-radius: 10px; max-width: calc(100% - 32px); }
.leaflet-control-attribution { font-size: 10px; }
.modaal-terug { width: auto; padding: 0 10px 0 2px; gap: 2px; color: var(--blou); margin: -6px 0 4px -6px; }