[hidden] { display: none !important; }
:root {
  --bg: #f4f3f0; --panel: #ffffff; --text: #1d2125; --muted: #66707a; --line: #dfdcd6;
  --accent: #0b6e4f; --accent-text: #ffffff; --danger: #b3261e; --warn: #9a6700; --ok: #1a7f37;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --radius: 10px;
  --field-border: #b9b4ab;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  /* "ocean" bestaat niet meer: een oude bewaarde keuze valt terug op Automatisch */
  :root:not([data-theme]), :root[data-theme="auto"], :root[data-theme="ocean"] {
    --bg: #15181c; --panel: #1f2328; --text: #e6e8ea; --muted: #9aa3ab; --line: #30363d;
    --accent: #3fb68b; --accent-text: #0d1512; --danger: #f2766b; --warn: #e3b341; --ok: #56d364;
    --shadow: 0 1px 3px rgba(0,0,0,.4); --field-border: #57606a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15181c; --panel: #1f2328; --text: #e6e8ea; --muted: #9aa3ab; --line: #30363d;
  --accent: #3fb68b; --accent-text: #0d1512; --danger: #f2766b; --warn: #e3b341; --ok: #56d364;
  --shadow: 0 1px 3px rgba(0,0,0,.4); --field-border: #57606a; color-scheme: dark;
}
/* Nacht: rood op zwart, bewaart het nachtzicht (wagen, interventie 's nachts) */
:root[data-theme="night"] {
  --bg: #050303; --panel: #0d0707; --text: #ff8a7a; --muted: #c96a5e; --line: #3a1a16; --field-border: #6e3128;
  --accent: #e0483a; --accent-text: #050303; --danger: #ff5f4f; --warn: #ff9b5c; --ok: #ff8a7a;
  --shadow: none; color-scheme: dark;
}
/* Zon (key "contrast", zo blijven bewaarde voorkeuren werken): zwart op wit, dikke lijnen, voor buiten in de zon */
:root[data-theme="contrast"] {
  --bg: #ffffff; --panel: #ffffff; --text: #000000; --muted: #2b2b2b; --line: #000000; --field-border: #000000;
  --accent: #0040c0; --accent-text: #ffffff; --danger: #b00000; --warn: #7a4a00; --ok: #005a1a;
  --shadow: none; color-scheme: light;
}
:root[data-theme="contrast"] .card, :root[data-theme="contrast"] button { border-width: 2px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-size: 15px; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 12px; cursor: pointer;
}
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.danger { color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea {
  border: 1px solid var(--field-border); background: var(--bg); border-radius: 8px; padding: 7px 9px; width: 100%;
}
input[type=color] { padding: 2px; height: 36px; }
input[type=checkbox] { width: auto; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; word-break: break-all; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pill { font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pill.ok { color: var(--ok); border-color: currentColor; }
.pill.bad { color: var(--danger); border-color: currentColor; }
.pill.sos { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---- kopbalk ---- */
header.top {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--panel);
  border-bottom: 1px solid var(--line); height: 48px;
}
header.top h1 { font-size: 16px; margin: 0; letter-spacing: .02em; }
header.top nav { display: flex; gap: 14px; margin-left: 8px; }
header.top nav a { text-decoration: none; color: var(--muted); }
header.top nav a.on { color: var(--text); font-weight: 600; }
header.top .spacer { flex: 1; }

/* ---- kaartpagina ---- */
.mapwrap { display: flex; height: calc(100% - 48px); }
#side { width: 300px; flex: none; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); }
#map { flex: 1; min-width: 0; }
.trk { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.trk:hover, .trk.sel { background: var(--bg); }
.trk .name { font-weight: 600; }
.trk .meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.trk.stale .name { color: var(--muted); }
.sidehead { padding: 10px 14px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); }
.sidehead select { width: auto; }
.empty { padding: 18px 14px; color: var(--muted); }
.marker {
  width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.marker.stale { filter: grayscale(1); opacity: .6; }
.marker.sos { animation: sos 1s infinite; }
@keyframes sos { 50% { box-shadow: 0 0 0 10px rgba(179,38,30,.35); } }
.mlabel {
  position: absolute; left: 22px; top: -2px; white-space: nowrap; font-size: 12px; font-weight: 600;
  background: var(--panel); color: var(--text); padding: 1px 6px; border-radius: 6px; box-shadow: var(--shadow);
}
.maplibregl-popup-content { background: var(--panel); color: var(--text); border-radius: 8px; }
.maplibregl-popup-tip { border-top-color: var(--panel) !important; border-bottom-color: var(--panel) !important; }

/* ---- beheer ---- */
main.page { max-width: 980px; margin: 0 auto; padding: 18px 16px 60px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h2 { font-size: 16px; margin: 0 0 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.msg { margin-top: 10px; font-size: 14px; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--ok); }
pre.log {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; max-height: 260px;
  overflow: auto; font-size: 12px; margin: 10px 0 0; white-space: pre-wrap;
}

/* ---- login ---- */
.loginbox { max-width: 340px; margin: 12vh auto 0; padding: 0 16px; }
.loginbox h1 { font-size: 22px; }

@media (max-width: 720px) {
  .mapwrap { flex-direction: column-reverse; }
  #side { width: 100%; height: 38%; border-right: 0; border-top: 1px solid var(--line); }
  header.top nav { gap: 10px; }
  table .hide-sm { display: none; }
}

/* ---- tabs, zijpanelen, legenda, meldingen ---- */
.tabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.tab { flex: 1; border: 0; border-radius: 0; background: none; padding: 10px 6px; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.sideform { padding: 4px 14px 14px; border-bottom: 1px solid var(--line); }
.sideform label { margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.hint { padding: 8px 14px; margin: 0; font-size: 13px; color: var(--muted); }
.subhead { font-size: 13px; color: var(--muted); margin: 14px 14px 4px; text-transform: uppercase; letter-spacing: .04em; }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.item { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.item .row { margin-top: 6px; }
.item button { padding: 4px 9px; font-size: 13px; }
.stats { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ev { padding: 6px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.ev .in { color: var(--ok); } .ev .out { color: var(--warn); }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; max-width: calc(100% - 32px); }
.toast { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 14px; }
.toast.out { border-left-color: var(--warn); }
.marker .arrow {
  position: absolute; left: 50%; top: -11px; width: 0; height: 0; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--text);
  transform-origin: 5px 20px; display: none;
}
.marker.has-crs .arrow { display: block; }
.marker .ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.marker .ico svg { width: 18px; height: 18px; }
.marker.big { width: 30px; height: 30px; }
.drawing #map { cursor: crosshair; }
.drawing .maplibregl-canvas { cursor: crosshair; }

/* ---- filters, schakelaars, segmenten ---- */
.chips { display: flex; gap: 6px; padding: 8px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.chip { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.sidehead.small { font-size: 13px; gap: 10px; }
button.link { border: 0; background: none; padding: 2px 0; color: var(--accent); text-decoration: underline; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 6px 10px; font-size: 13px; background: var(--panel); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 36px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; flex: none; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { left: 18px; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.trk .vis { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.trk .fav { border: 0; background: none; padding: 0 2px; font-size: 18px; line-height: 1; color: var(--muted); flex: none; }
.trk .fav.on { color: #eab308; }
.trk .body { flex: 1; min-width: 0; }
.trk .name { overflow-wrap: anywhere; }   /* labels (sim, SOS, VERLOREN) lopen door naar de volgende regel */
.trk.hiddenmap .name { opacity: .55; }
.tico { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.tico svg { width: 15px; height: 15px; }
.sheet-handle { display: none; }

/* ---- iconenkiezer ---- */
.ico-picker { display: flex; flex-wrap: wrap; gap: 4px; max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; }
.ico-group { width: 100%; font-size: 12px; color: var(--muted); margin: 6px 2px 0; }
.ico-btn { padding: 3px; border-radius: 8px; border: 2px solid transparent; background: none; }
.ico-btn.on { border-color: var(--accent); }
.ico-sw { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ico-sw svg { width: 20px; height: 20px; }

/* ---- smartphone: lijst als onderpaneel ---- */
@media (max-width: 720px) {
  .mapwrap { display: block; position: relative; }
  #map { position: absolute; inset: 0; }
  #side {
    position: absolute; left: 0; right: 0; bottom: 0; height: 52%; width: auto; z-index: 3;
    border-right: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18); transition: height .2s;
  }
  .sheet-handle { display: block; width: 100%; border: 0; border-radius: 14px 14px 0 0; padding: 8px 0 4px; background: var(--panel); }
  .sheet-handle span { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto; }
  .tab { padding: 12px 6px; }
  .trk { padding: 12px 14px; }
  .item button, .chip, .seg button { min-height: 36px; }
  header.top { padding: 8px 12px; gap: 8px; }
  header.top h1 { font-size: 15px; }
  #mesh { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #toasts { bottom: auto; top: 60px; right: 12px; left: 12px; }
}
.viewopts { border-bottom: 1px solid var(--line); }
.viewopts > summary { padding: 9px 14px; font-size: 13px; }
.viewopts[open] > summary { border-bottom: 1px solid var(--line); }

/* ---- beheerpagina ---- */
.cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cardhead h2 { margin: 0; flex: 1; }
button.ghost { border-color: transparent; background: none; }
.small { font-size: 13px; }
.help { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.warn { color: var(--warn); }
.tlist { display: flex; flex-direction: column; }
.titem { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.titem:last-child { border-bottom: 0; }
.titem .body { flex: 1; min-width: 0; }
.titem .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tico.big { width: 36px; height: 36px; }
.tico.big svg { width: 22px; height: 22px; }
.switch.block { display: flex; margin: 14px 0 4px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px 14px; margin: 14px 0 0; }
legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.unit, .dur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.unit input { flex: 1; min-width: 0; }
.unit span { color: var(--muted); font-size: 13px; min-width: 34px; }
.dur input { flex: 1; min-width: 70px; }
.dur select { width: auto; }
.dur .help { width: 100%; margin-top: 0; }
.fwold label, .fwold .unit, .fwold .dur, .fwold .slowtip, .fwold .help:not(.fwhint) { opacity: .5; }
.fwold .switch { cursor: not-allowed; }
.fwhint { color: var(--warn); font-weight: 600; }
.slowtip { font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin-top: 12px; }
#s-slowcalc { margin-top: 6px; font-weight: 600; }
#s-slowcalc.warn { color: var(--warn); }
#s-slowcalc:empty { display: none; }
/* Trackmodus (0.9.0): FIFO-velden grijs in klassieke modus, slow_send grijs in FIFO-modus */
#s-fifo.off label, #s-fifo.off .unit, #s-fifo.off .dur, #s-fifo.off .help, .grid > .off > label, .grid > .off > .dur, #s-fifo.off + .slowtip { opacity: .5; }
.fifonote, .fifooff { color: var(--warn); }
.fifomore ul { margin: 6px 0 0; padding-left: 18px; }
.fifomore li { margin-top: 3px; }
#s-fifocalc { margin-top: 6px; font-weight: 600; }
#s-fifocalc.warn { color: var(--warn); }
#s-fifocalc:empty { display: none; }
.seg.wide { display: flex; margin-top: 4px; }
.seg.wide button { flex: 1; padding: 9px; font-size: 14px; }
.devinfo { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-size: 14px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--panel); padding: 10px 0; margin-top: 14px; border-top: 1px solid var(--line); }
.qrbox { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; }
summary.h2sum { font-size: 16px; font-weight: 600; color: var(--text); }
details.terminal { margin-top: 14px; }
@media (max-width: 720px) {
  main.page { padding: 12px 10px 60px; }
  .card { padding: 14px 12px; }
  .titem { flex-wrap: wrap; }
  .titem .actions { width: 100%; justify-content: flex-start; padding-left: 48px; }
  .titem .actions button { min-height: 38px; }
  input, select, textarea, button { font-size: 16px; }   /* iOS zoomt anders in bij focus */
  .grid { grid-template-columns: 1fr; }
  header.top nav a { padding: 6px 2px; }
}
.sidehead.nodes { flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
label.mini { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--text); font-size: 13px; cursor: pointer; }
label.mini i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
label.mini input { width: auto; accent-color: var(--accent); }

/* ---- inklapbare blokken en versleepbare zijbalk ---- */
details.sect { border-bottom: 1px solid var(--line); }
details.sect > summary { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
details.sect > summary::-webkit-details-marker { display: none; }
details.sect > summary::before { content: "▸"; display: inline-block; transition: transform .15s; }
details.sect[open] > summary::before { transform: rotate(90deg); }
details.sect[open] > summary { color: var(--text); }
details.sect .chips, details.sect .sidehead, details.sect .legend { border-bottom: 0; }
details.sect > :last-child { padding-bottom: 10px; }
.nodegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 10px; padding: 2px 14px 10px; }
.nodegrid .wide { grid-column: 1 / -1; }
#resizer { width: 6px; flex: none; cursor: col-resize; background: var(--line); opacity: .5; transition: opacity .15s, background .15s; touch-action: none; }
#resizer:hover, #resizer:focus-visible, .resizing #resizer { opacity: 1; background: var(--accent); outline: none; }
.resizing, .resizing * { cursor: col-resize !important; user-select: none; }
#side { min-width: 200px; }
@media (max-width: 720px) { #resizer { display: none; } #side { min-width: 0; } }

/* ---- gebruikersmenu en dialogen ---- */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; }
.usermenu > summary::-webkit-details-marker { display: none; }
.avatar { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 14px; }
.usermenu .menu { position: absolute; right: 0; top: 38px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 200px; z-index: 20; }
.usermenu .who { padding: 2px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
dialog.dlg { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); padding: 18px; max-width: 420px; width: calc(100% - 32px); }
dialog.dlg::backdrop { background: rgba(0,0,0,.45); }
dialog.dlg h2 { margin: 0 0 6px; font-size: 17px; }
/* kioskweergave: enkel de kaart */
body.kiosk header.top nav, body.kiosk #side, body.kiosk #resizer, body.kiosk .usermenu { display: none !important; }
#sharelogin { margin-left: auto; }
.followbtn { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; border-radius: 999px;
  padding: 6px 14px; background: var(--accent); color: var(--accent-text); border: 0; box-shadow: var(--shadow); font-weight: 600; }
body.kiosk .mapwrap { height: calc(100% - 48px); }
body.kiosk #map { position: absolute; inset: 48px 0 0 0; }

/* ---- gebruikers, logboek ---- */
main.page.wide { max-width: 1200px; }
.pagetabs { position: static; margin-bottom: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.subform { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; background: var(--bg); }
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
label.mini.perm { align-items: flex-start; }
label.mini.perm input { margin-top: 3px; }
.chipsline { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.sharelink { margin-top: 4px; color: var(--accent); word-break: break-all; }
.pill.warn { color: var(--warn); border-color: currentColor; }
.filters { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr) minmax(200px, 1fr); gap: 16px; }
.typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 10px; }
table.log td { vertical-align: middle; }
table.log .tico { display: inline-flex; width: 20px; height: 20px; vertical-align: middle; }
table.log .tico svg { width: 13px; height: 13px; }
.nowrap { white-space: nowrap; }
@media (max-width: 860px) { .filters { grid-template-columns: 1fr; } }

/* ---- help ---- */
main.page.help { display: grid; grid-template-columns: 220px 1fr; gap: 16px; max-width: 1100px; align-items: start; }
.toc { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.toc a { text-decoration: none; }
.doc h2 { margin-top: 26px; scroll-margin-top: 12px; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { line-height: 1.55; }
.doc code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 13px; }
@media (max-width: 860px) { main.page.help { grid-template-columns: 1fr; } .toc { position: static; } }

a.btnlink { display: inline-block; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px 9px;
  font-size: 13px; color: var(--text); text-decoration: none; }

/* ---- meldingsontvangers ---- */
.rcpts { display: flex; flex-wrap: wrap; gap: 6px; }
.pill.rcpt { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.pill.rcpt .x { border: 0; background: none; padding: 0 2px; font-size: 12px; color: var(--muted); }

/* ---- telefoon: versleepbaar onderpaneel ---- */
.sheet-show { display: none; }
@media (max-width: 720px) {
  #side { height: 45%; }
  #side.sheet-hidden { display: none; }
  .sheet-handle { touch-action: none; cursor: ns-resize; padding: 10px 0 8px; }
  .sheet-show:not([hidden]) { display: block; position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 5;
    border-radius: 999px; padding: 10px 18px; background: var(--accent); color: var(--accent-text); border: 0; box-shadow: var(--shadow); font-weight: 600; }
}

@media (max-width: 720px) {
  header.top nav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex: 1; min-width: 0; }
  header.top nav::-webkit-scrollbar { display: none; }
  header.top .spacer { display: none; }
  #mesh { display: none; }
}

.themes { display: flex; gap: 6px; flex-wrap: wrap; }
.themes button { padding: 4px 8px; font-size: 13px; }
.themes button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* ---- firmware, flashen en klaarmaken ---- */
.fwbox { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 12px 0; background: var(--bg); }
.fwhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
label.btnlike { display: inline-block; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 10px;
  font-size: 13px; cursor: pointer; margin: 0; }
.dfu { margin-top: 10px; }
.dfu ol { margin: 0 0 8px; padding-left: 22px; }
.dfu li { margin: 3px 0; color: var(--muted); }
.dfu li.busy { color: var(--text); font-weight: 600; }
.dfu li.done { color: var(--ok); }
.dfu li.done::after { content: " ✓"; }
.dfu li.err { color: var(--danger); font-weight: 600; }
.dfu .bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.dfu .bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.pill.lost, .lostbadge { color: #fff; background: var(--danger); border-color: var(--danger); }
.lostbadge { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; margin-left: 4px; }
.marker.lost { outline: 3px solid var(--danger); outline-offset: 2px; }
.doc p.note { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 8px 12px; }

/* ---- SOS op de kaart ---- */
.sosmark { width: 34px; height: 34px; border-radius: 50%; background: #dc2626; color: #fff; border: 2.5px solid #fff;
  display: flex; align-items: center; justify-content: center; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .3px;
  box-shadow: 0 0 0 2px #dc2626, 0 2px 8px rgba(0,0,0,.45); cursor: pointer; }

/* ---- effectieve rechten ---- */
#u-eff h4 { margin: 12px 0 6px; font-size: 14px; }
#u-eff .ok { color: var(--ok); font-weight: 700; }
i.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }


/* ==== UX-verbouwing 0.8 ==== */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab .badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; }

/* zijpaneel (formulieren) */
dialog.side { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(620px, 100vw); max-width: 100vw;
  border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0; background: var(--panel); color: var(--text);
  box-shadow: -8px 0 32px rgba(0,0,0,.18); }
dialog.side::backdrop { background: rgba(0,0,0,.35); }
dialog.side[open] { display: flex; flex-direction: column; }
dialog.side .dlghead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
dialog.side .dlghead h2 { margin: 0; font-size: 17px; flex: 1; }
dialog.side .dlgbody { flex: 1; overflow: auto; padding: 4px 16px 16px; }
dialog.side .dlgbody > form.subform { border: 0; background: none; padding: 0; margin: 0; }
dialog.side .sticky-actions, dialog.side form .row:last-of-type:has(button[type=submit]) {
  position: sticky; bottom: -16px; background: var(--panel); padding: 10px 0; margin-bottom: -16px; border-top: 1px solid var(--line); z-index: 3; }
@media (max-width: 720px) { dialog.side { width: 100vw; border-left: 0; } }

/* gedeelde werkbalk boven lijsten */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.toolbar input[type=search] { flex: 1; min-width: 180px; max-width: 360px; }
.toolbar .chips { margin: 0; }
.toolbar .spacer { flex: 1; }

/* compacte tabel */
.ttable { width: 100%; border-collapse: collapse; }
.ttable th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ttable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ttable tbody tr { cursor: pointer; }
.ttable tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ttable .nm { font-weight: 600; }
.ttable .sub { font-size: 12px; color: var(--muted); }
.ttable .tico { width: 28px; height: 28px; }
@media (max-width: 720px) {
  .ttable thead { display: none; }
  .ttable .col-opt { display: none; }
  .ttable td { padding: 9px 6px; }
}
.empty .cta { margin-top: 8px; }

/* gevarenzone in formulieren */
.danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: var(--radius); padding: 10px 12px; margin-top: 16px; }
.danger-zone legend { color: var(--danger); }

/* formulier-tabbladen in een paneel */
.ftabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 4px; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.ftabs button { border: 0; border-radius: 0; background: none; padding: 9px 10px; color: var(--muted); border-bottom: 2px solid transparent; }
.ftabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

/* verbindingsbalk (Toestellen) */
.connbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.connbar .devinfo { flex: 1; min-width: 220px; margin: 0; }
.advtoggle { margin: 8px 0; }
@media (min-width: 1000px) { .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .twocol > .full { grid-column: 1 / -1; } }
.presets { margin: 6px 0 2px; }

/* gsm: menuknop */
.navtoggle { display: none; border: 0; background: none; font-size: 22px; padding: 4px 8px; line-height: 1; }
@media (max-width: 720px) {
  .navtoggle { display: inline-block; }
  header.top { position: relative; }
  header.top nav { display: none; }
  header.top.navopen nav { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 6px 12px; gap: 0; overflow: visible; }
  header.top.navopen nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); min-height: 44px; }
  header.top.navopen nav a:last-child { border-bottom: 0; }
}
.toolbar .chips { border: 0; padding: 0; }
.ttable .pill { white-space: nowrap; }
.ttable .mob { display: none; }
@media (max-width: 720px) {
  header.top .usermenu { margin-left: auto; }
  .ttable .mob { display: block; font-size: 12px; color: var(--muted); }
  .toolbar .chips .chip { padding: 4px 10px; }
  .pagetabs { flex-wrap: wrap; }
  .pagetabs .tab { font-size: 14px; padding-left: 3px; padding-right: 3px; min-width: 0; }
}
.actions a.btnlink { font-size: 15px; padding: 7px 12px; }

/* rechten per kanaal (groepen): geen / kaart / sleutel */
.ctable { width: 100%; border-collapse: collapse; margin: 4px 0 10px; font-size: 14px; }
.ctable th, .ctable td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.ctable th:first-child, .ctable td:first-child { text-align: left; width: 100%; }
.ctable th { font-weight: 600; color: var(--muted); font-size: 12px; }
.ctable input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }

/* Toestellen → Simulatie (simulatie.js) */
.sim-intro { margin: 0 0 8px; font-size: 14px; }
#pane-sim > .small { margin-top: 4px; }
.sim-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 14px; margin-top: 10px; }
.sim-play { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sim-clock { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 18px; font-weight: 600; margin-left: auto; }
.sim-stripwrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); margin-top: 12px; }
.sim-stripwrap svg { display: block; width: 100%; min-width: 640px; height: auto; }
.sim-dz { fill: var(--muted); fill-opacity: .14; stroke: var(--muted); stroke-opacity: .4; stroke-dasharray: 5 4; }
.sim-dzt, .sim-km, .sim-lane { fill: var(--muted); font-size: 13px; }
.sim-lane { font-size: 11px; }
.sim-route { stroke: var(--text); stroke-opacity: .35; stroke-width: 4; stroke-linecap: round; }
.sim-mast { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linejoin: round; }
.sim-repdot { fill: var(--muted); }
.sim-wave { fill: none; stroke: var(--muted); stroke-width: 2; opacity: .5; }
.sim-rep.flash .sim-mast, .sim-rep.flash .sim-wave { stroke: var(--ok); animation: simflash .8s ease-out; }
.sim-rep.flash .sim-repdot { fill: var(--ok); }
@keyframes simflash { 0% { stroke-width: 6; opacity: 1; } 100% { stroke-width: 2.5; } }
.sim-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.sim-ringbg { fill: none; stroke: var(--line); stroke-width: 4; transition: opacity .2s; }
.sim-ring { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.sim-ring.slow { stroke: var(--warn); }
.sim-ring.fifo { stroke: var(--text); }
.sim-mark { font-size: 20px; font-weight: 700; }
.sim-mark.ok { fill: var(--ok); }
.sim-mark.bad { fill: var(--danger); }
.sim-pkt { fill: var(--accent); }
.sim-pkt.slow { fill: var(--warn); }
.sim-pkt.fifo { fill: var(--text); }
.sim-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.sim-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); min-width: 0; }
.sim-box h4, .sim-h { margin: 0 0 6px; font-size: 14px; }
.sim-h { margin-top: 16px; }
.sim-box.drop { animation: simdrop .6s ease-out; }
@keyframes simdrop { 0% { box-shadow: 0 0 0 3px var(--danger); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sim-cap { font-weight: 400; color: var(--muted); }
.sim-dots { display: flex; flex-wrap: wrap; gap: 3px; min-height: 14px; margin: 4px 0 6px; }
.sim-dots .d { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: block; }
.sim-dots.small-dots .d { width: 7px; height: 7px; }
.sim-dots .d.slow { background: var(--warn); }
.sim-dots .d.pend { outline: 2px solid var(--text); outline-offset: 1px; }
.sim-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sim-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.sim-fly { position: fixed; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); z-index: 50; pointer-events: none; box-shadow: 0 0 0 2px var(--panel); }
.sim-count dl, #sim-count { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
#sim-count dt { color: var(--muted); }
#sim-count dd { margin: 0; }
.sim-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-opacity: .6; }
.sim-prog { stroke: var(--accent); stroke-width: 3; stroke-opacity: .5; }
.tp.live { fill: var(--accent); }
.tp.late { fill: var(--accent); fill-opacity: .35; stroke: var(--accent); stroke-width: 1.2; }
.tp.lost { stroke: var(--muted); stroke-width: 1.6; fill: none; }
.tp.wait { fill: none; stroke: var(--warn); stroke-width: 1.4; }
.sim-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--muted); }
.sim-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; font-style: normal; }
.sim-legend .lg.live { background: var(--accent); }
.sim-legend .lg.late { background: color-mix(in srgb, var(--accent) 35%, transparent); border: 1.2px solid var(--accent); }
.sim-legend .lg.lost { width: auto; height: auto; color: var(--muted); font-weight: 700; line-height: 1; }
.sim-legend .lg.wait { border: 1.4px solid var(--warn); }
.sim-log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; }
.sim-log li { padding: 4px 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.sim-log li:last-child { border-bottom: 0; }
.sim-log li.bad { color: var(--danger); }
.sim-log li.ok { color: var(--muted); }
.sim-log li.info { font-weight: 600; }
@media (max-width: 720px) { .sim-clock { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sim-rep.flash .sim-mast, .sim-box.drop { animation: none; } }
.sim-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.sim-presets button { font-size: 13px; padding: 6px 10px; }
.sim-presets button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sim-dots .d.park { background: transparent; box-shadow: inset 0 0 0 2px var(--danger); }
.tp.park { fill: none; stroke: var(--danger); stroke-width: 1.6; }
.sim-legend .lg.park { border: 1.6px solid var(--danger); }
#sim-fifonote .park { color: var(--danger); font-weight: 600; }
#s-fifocalc > div + div { font-weight: 400; margin-top: 3px; }
#s-fifocalc .warn { color: var(--warn); font-weight: 600; }
.sim-uitleg { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--bg); }
.sim-uitleg > summary { font-weight: 600; color: var(--text); font-size: 14px; }
.sim-ugrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.sim-usec { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-width: 0; }
.sim-usec h5 { margin: 0 0 4px; font-size: 14px; }
.sim-usec p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.sim-show { font-size: 12.5px; padding: 4px 10px; }
.sim-v { font-weight: 600; }
.sim-hl { animation: simhl 2.6s ease-out; }
@keyframes simhl { 0%, 60% { box-shadow: 0 0 0 4px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sim-signal { margin-top: 10px; }
.okc { color: var(--ok); }
.sim-snrt { fill: var(--muted); font-size: 12px; }
.sim-pkt.ack { fill: var(--ok); }
.sim-mark.ack { fill: var(--ok); font-size: 14px; }
.sim-dots .d.pf { box-shadow: 0 0 0 2px var(--warn); }
.sim-dots .d.su { opacity: .55; }
.sim-legend .lg.dot { background: var(--accent); }
.sim-legend .lg.dot.slow { background: var(--warn); }
.sim-legend .lg.pf { background: var(--accent); box-shadow: 0 0 0 2px var(--warn); }
.sim-legend .lg.su { background: var(--accent); opacity: .55; }
.sim-legend .lg.thin { width: 6px; height: 6px; background: var(--muted); }
.tp.thin { fill: var(--muted); fill-opacity: .6; }
.sim-log li.okplus { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .sim-hl { animation: none; outline: 3px solid var(--accent); } }
.sim-listen { opacity: 0; transition: opacity .2s; }
.sim-listen-dot { fill: var(--accent); }
.sim-listen-arc { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.sim-listen-t { fill: var(--accent); font-size: 12px; font-weight: 600; }
.sim-stop { fill: var(--warn); fill-opacity: .35; }
/* kopbalk: groep met de losse apps (offline-kaart, tracker live) */
header.top nav .navapps { display: flex; align-items: center; gap: 14px; border-left: 1px solid var(--line); padding-left: 14px; }
header.top nav .navapps-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@media (max-width: 720px) {
  header.top.navopen nav .navapps { flex-direction: column; align-items: stretch; gap: 0; border-left: 0; padding-left: 0; border-top: 2px solid var(--line); margin-top: 4px; padding-top: 6px; }
  header.top.navopen nav .navapps-l { padding: 4px 4px 0; }
  header.top.navopen nav .navapps a:last-child { border-bottom: 0; }
}

/* ---- de site als app (PWA): nieuwe versie, installeren, iPhone-uitleg, kaartbron ---- */
.swupdate:not([hidden]) { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
  max-width: calc(100% - 32px); border-radius: 999px; padding: 10px 18px; background: var(--accent); color: var(--accent-text);
  border: 0; box-shadow: var(--shadow); font-weight: 600; }
.hdrinstall { padding: 4px 9px; font-size: 13px; }
.pwahint { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 59; display: flex; gap: 10px;
  align-items: flex-start; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; font-size: 14px; line-height: 1.45; max-width: 480px; margin: 0 auto; }
.pwahint span { flex: 1; }
.pwahint button { flex: none; padding: 2px 8px; }
.mapsrc { position: absolute; left: 8px; bottom: 8px; z-index: 3; pointer-events: none; font-size: 12px; padding: 2px 8px;
  border-radius: 999px; background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--muted); border: 1px solid var(--line); }
/* gsm: het onderpaneel ligt over de onderkant van de kaart */
@media (max-width: 720px) { .mapsrc { top: 8px; bottom: auto; } }
.wachtsel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wachtsel > select { width: auto; flex: 1 1 160px; }
.wachtsel > .dur { flex: 1 1 100%; }
.wachtsel > .dur[hidden] { display: none; }

/* ---- Op verzoek (toestand V): amber "ping" (stip met ring), ook zonder kleur herkenbaar ----
   Zelfde stijl op de kaart van de site, in /offline en in /tracker. */
:root { --vreq: #e0a400; }
:root[data-theme="dark"], :root[data-theme="night"] { --vreq: #ffc83d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --vreq: #ffc83d; } }
/* legende-icoon: stip met ring */
.vping { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; flex: none;
  background: radial-gradient(circle, var(--vreq) 0 3px, transparent 3.5px); box-shadow: inset 0 0 0 2px var(--vreq); }
.legend i.vping { width: 14px; height: 14px; border-radius: 50%; vertical-align: -3px; }
/* marker van een tracker waarvan het laatste bericht een antwoord op een verzoek was: amber ring rond de stip */
.marker.vreq, .omark.vreq { box-shadow: 0 0 0 2px var(--panel), 0 0 0 5px var(--vreq); }
/* korte puls als er een nieuw antwoord binnenkomt */
.vpulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--vreq);
  animation: vping 1.1s ease-out 3; pointer-events: none; opacity: 0; }
@keyframes vping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vpulse::after { animation: none; } }

/* ---- Positie vragen (site en /offline): paneel met antwoorden en keuzelijst ---- */
.askbar { flex-wrap: wrap; }
.askbar #rq-lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.askpanel { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 14px; background: var(--bg); }
.askpanel .askhead { display: flex; gap: 8px; align-items: flex-start; }
.askpanel .askhead > div { flex: 1; min-width: 0; }
.askpanel ul { list-style: none; margin: 6px 0 0; padding: 0; }
.askpanel li { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); cursor: pointer; flex-wrap: wrap; }
.askpanel li.wait { opacity: .6; cursor: default; }
.askpanel li .nm { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.askdot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; border: 1px solid rgba(0,0,0,.25); }
.askfs { border: 0; padding: 0; margin: 10px 0 0; }
.askopt { display: flex; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--line); font-weight: 400; min-height: 40px; overflow-wrap: anywhere; }
.askopt input { width: auto; margin: 0; flex: none; }
#rq-targets { max-height: 40vh; overflow: auto; }
.askwho { padding-left: 18px; margin: 6px 0; }
.marker.asked { outline: 2px dashed var(--accent); outline-offset: 6px; }
/* Op verzoek met een oude fix ("laatst gekend"): holle, gestippelde ring, duidelijk niet actueel */
.vping.old { background: none; box-shadow: none; border: 2px dashed var(--vreq); }
.legend i.vping.old { background: none; }
.marker.vold, .omark.vold { box-shadow: 0 0 0 2px var(--panel); outline: 2px dashed var(--vreq); outline-offset: 2px; }
.hwoff { opacity: .5; }
/* Toestellen: herkend toestel */
.detcard .dethead { display: flex; gap: 10px; align-items: center; }
.detcard .detico { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.detcard .detico svg { width: 22px; height: 22px; }
.detcard .detgrid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 10px 0 4px; font-size: 14px; }
.detcard .detgrid dt { color: var(--muted); }
.detcard .detgrid dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Prioritair (blauwe lichten) ----
   Zelfde stijl op de kaart van de site (.marker), in /offline (.omark) en in /tracker.
   Knipperen: ongeveer 1 Hz tussen blauw (met gloed) en de gewone kleur. Altijd een blauw sirene-badge,
   zodat het ook zonder kleur en zonder beweging herkenbaar is. Minder beweging: vaste blauwe ring + badge. */
:root { --prio: #1565ff; --prio-txt: #0b4fd6; }
:root[data-theme="dark"], :root[data-theme="night"] { --prio-txt: #7fa8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --prio-txt: #7fa8ff; } }
.marker.prio, .omark.prio { animation: prio-blink 1s steps(1, end) infinite; }
@keyframes prio-blink {
  0% { background: var(--prio); border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 10px 5px rgba(21,101,255,.75); }
  50% { box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
}
/* sirene-badge rechtsboven (koepel met voet) */
.marker.prio::before, .omark.prio::before {
  content: ""; position: absolute; top: -9px; right: -10px; width: 14px; height: 14px; border-radius: 50%; z-index: 2;
  background: var(--prio) no-repeat center / 10px 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7V5a2.5 2.5 0 015 0v2z' fill='white'/%3E%3Crect x='1.5' y='7.3' width='7' height='1.6' rx='.5' fill='white'/%3E%3C/svg%3E");
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}
.omark.prio { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .marker.prio, .omark.prio { animation: none; box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--prio); }
}
/* badge in lijsten en popups: "Prioritair, nog 4 min" */
.pill.prio { display: inline-flex; align-items: center; gap: 4px; background: var(--prio); color: #fff; border-color: var(--prio); font-weight: 600; }
.pill.prio::before { content: ""; width: 10px; height: 10px; flex: none;
  background: no-repeat center / 10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7V5a2.5 2.5 0 015 0v2z' fill='white'/%3E%3Crect x='1.5' y='7.3' width='7' height='1.6' rx='.5' fill='white'/%3E%3C/svg%3E"); }
/* legende: blauw spoorstuk */
.legend i.prio { background: var(--prio); height: 5px; }
.marker.sos.prio { animation: sos 1s infinite; }   /* SOS gaat voor */

/* ---- Prioritair: beheer (knop per simulator) en Toestellen (ingang pin 31) ---- */
.prioctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.prioctl .priobtn { padding: 4px 10px; font-size: 13px; }
.prioctl .priobtn[aria-pressed="true"] { background: var(--prio); border-color: var(--prio); color: #fff; font-weight: 600; }
.prioctl .prio-err { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.prioctl .prio-err:empty { display: none; }
#f-prio { margin: 6px 0 10px; }
@media (max-width: 720px) { .prioctl .priobtn { min-height: 44px; min-width: 44px; } }
.prio-warn { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--danger); border-left-width: 6px; border-radius: 8px;
  background: var(--bg); color: var(--text); padding: 10px 12px; margin: 2px 0 10px; font-size: 14px; }
.prio-warn svg { width: 24px; height: 24px; flex: none; color: var(--danger); }
#s-pin31box .fielderr { color: var(--danger); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
#s-pin31box input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
#s-pin31box .priostat { margin-top: 8px; font-size: 14px; }
#s-pin31box .priostat:empty { display: none; }
.priofout { display: inline-flex; gap: 5px; align-items: center; color: var(--danger); font-weight: 600; }
.priofout .ico { width: 16px; height: 16px; flex: none; }

/* tracker stuurt op Public / geen trackingkanaal */
.pubwarn { margin-top: 3px; }
.pubwarn a.lostbadge { text-decoration: none; display: inline-block; }
/* ---- Niet ondertekend (tracker zonder authsleutel, allow_unsigned) ----
   Marker: gestippelde rand + klein "!"-badge rechtsonder (rechtsboven is voor prioritair). Popup: "⚠ niet ondertekend". */
:root { --unsig: #c2410c; }
:root[data-theme="dark"], :root[data-theme="night"] { --unsig: #ff8a5c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --unsig: #ff8a5c; } }
.marker .unsig { display: none; }
.marker.unsigned .unsig {
  display: flex; align-items: center; justify-content: center; position: absolute; right: -9px; bottom: -8px; z-index: 2;
  width: 13px; height: 13px; border-radius: 50%; background: var(--unsig); color: #fff; font: 700 10px/1 system-ui, sans-serif;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); pointer-events: none;
}
.marker.unsigned:not(.lost):not(.asked):not(.vold) { outline: 2px dashed var(--unsig); outline-offset: 2px; }
.unsig-txt { color: var(--unsig); font-weight: 600; }
.detwarn { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--danger); border-left-width: 4px; color: var(--danger); font-weight: 600; background: var(--panel); }

/* ==== UX 1.5 – pagina-inhoud (tabs, kaartlijst, beheerlijsten, logboek, login, help) ====
   Eén blok onderaan; kopbalk en navigatie staan hier bewust niet in. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lbl { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }

/* tabstroken: nooit afbreken of overlappen; te breed = schuiven, met een vervaging als hint (tabs.js) */
.pagetabs, #side .tabs { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.pagetabs::-webkit-scrollbar, #side .tabs::-webkit-scrollbar { display: none; }
.pagetabs .tab { flex: 1 0 auto; white-space: nowrap; min-height: 44px; padding: 10px 14px; scroll-snap-align: center; }
.pagetabs.more-r, #side .tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.pagetabs.more-l, #side .tabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.pagetabs.more-l.more-r, #side .tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
#side .tab { min-height: 44px; white-space: nowrap; }
@media (max-width: 720px) {
  .pagetabs { flex-wrap: nowrap; }
  .pagetabs .tab { font-size: 15px; padding: 10px 14px; min-width: auto; }
}

/* kaart: trackernaam als knop (toetsenbord), details van de gekozen tracker niet onder de tabs */
.trk .trkname { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 600; color: inherit; text-align: left;
  cursor: pointer; border-radius: 4px; overflow-wrap: anywhere; }
.trk { scroll-margin-top: 52px; scroll-margin-bottom: 8px; }
@media (max-width: 720px) {
  .sheet-handle { padding: 19px 0 20px; }                        /* greep: 44 px hoog, streepje blijft klein */
  .sidehead.small { flex-wrap: wrap; row-gap: 0; }
  .sidehead .link, details.sect .row .link { min-height: 44px; min-width: 44px; padding: 0 6px; }
  .chip, .seg button, .item button { min-height: 44px; }
  .trk .fav { min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0; }
  .trk .vis { width: 24px; height: 24px; margin-top: 0; }
  details.sect > summary, .viewopts > summary { min-height: 44px; }
  label.mini { min-height: 36px; }
  .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .maplibregl-ctrl-group button .maplibregl-ctrl-icon { background-size: 30px; }
  #rq-btn { min-height: 44px; }
}

/* beheerlijsten: knoppen over de volle breedte op de gsm; verwijderen staat in het bewerkvenster */
.row .rowend { margin-left: auto; }
@media (max-width: 720px) {
  .titem .actions { padding-left: 0; gap: 8px; }
  .titem .actions button, .titem .actions a.btnlink { min-height: 44px; flex: 1 1 auto; }
  .row button, .row a.btnlink, dialog.side .dlghead button { min-height: 44px; }
  button.link { min-height: 44px; min-width: 44px; }
  .row .rowend { margin-left: 0; flex-basis: 100%; }
}

/* Prioritair (virtuele tracker): schakelaar i.p.v. knop die op een status lijkt */
.prioctl .priobtn[role="switch"] { display: inline-flex; align-items: center; gap: 8px; }
.priobtn .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.priobtn .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.priobtn[aria-checked="true"] .sw { background: #fff; }
.priobtn[aria-checked="true"] .sw::after { left: 16px; background: var(--prio); }
.prioctl .priobtn[aria-checked="true"] { background: var(--prio); border-color: var(--prio); color: #fff; font-weight: 600; }
.priobtn .prio-state { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .priobtn .sw, .priobtn .sw::after { transition: none; } }

/* logboek: inklapbare filters, vaste zoek- en knoppenbalk, kaartjes op de gsm */
details.logfilters { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); }
details.logfilters > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; min-height: 44px;
  color: var(--text); font-size: 14px; font-weight: 600; list-style: none; }
details.logfilters > summary::-webkit-details-marker { display: none; }
details.logfilters > summary::before { content: "▸"; transition: transform .15s; }
details.logfilters[open] > summary::before { transform: rotate(90deg); }
details.logfilters > summary #f-sum { font-weight: 400; }
details.logfilters > .filters { padding: 0 12px 12px; }
.logbar { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: flex-end; margin-top: 4px; }
.logbar .logsearch { flex: 1 1 220px; max-width: 420px; }
.logbar .row { margin-top: 8px; }
.logmore { justify-content: center; }
@media (max-width: 720px) {
  .typegrid label.mini { min-height: 40px; }
  table.log thead { display: none; }
  table.log, table.log tbody { display: block; }
  table.log tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  table.log td { display: block; padding: 0; border: 0; }
  table.log td.lt { grid-column: 1; grid-row: 1; color: var(--muted); }
  table.log td.ltrk { grid-column: 1; grid-row: 2; font-weight: 600; overflow-wrap: anywhere; }
  table.log td.lev { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
  table.log td.hide-sm.ldet { display: block; grid-column: 1; grid-row: 3; }   /* details ook op de gsm */
  table.log td.ldet:empty { display: none; }
  table.log td.lmap { grid-column: 2; grid-row: 3; text-align: right; }
  table.log td.lmap a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
}

/* help: inhoud als uitklapper (gsm: dicht) */
details.toc { margin: 0; }
details.toc > summary { list-style: none; cursor: pointer; color: var(--text); font-size: 15px; min-height: 32px; display: flex; align-items: center; gap: 6px; }
details.toc > summary::-webkit-details-marker { display: none; }
details.toc > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.toc[open] > summary::before { transform: rotate(90deg); }
.toclinks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
@media (max-width: 860px) {
  details.toc > summary { min-height: 44px; }
  .toclinks { gap: 0; }
  .toclinks a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--line); }
}
/* activiteitenlog: details onder de actie op de gsm (UX 1.5) */
.auditmob { display: none; }
@media (max-width: 720px) { .auditmob { display: block; margin-top: 2px; overflow-wrap: anywhere; } }

/* =====================================================================================
   Eén app: kopbalk, navigatie en offline-modus (common.js initHeader, appnav.js, start.html)
   - breed: pagina's in de kop, wat niet past in "Meer ▾" (JS, nooit horizontaal scrollen),
     schakelaar Online | Offline, gebruikersmenu;
   - gsm (≤ 720 px): tabbalk onderaan (.mnav) + Meer-venster (.msheet);
   - offline-deel: band "Offline-modus" (.modenav) met eigen accentkleur (--offc).
   ===================================================================================== */
:root { --offc: #2f5d8a; --offc-bg: #e8eff7; --mnav-h: 60px; }
:root[data-theme="dark"] { --offc: #8fb8e8; --offc-bg: #17222e; }
:root[data-theme="night"] { --offc: #ff9b8c; --offc-bg: #1d0d0b; }
:root[data-theme="contrast"] { --offc: #003a80; --offc-bg: #e6eefb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --offc: #8fb8e8; --offc-bg: #17222e; } }

a.btnlike { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 8px; padding: 6px 10px; text-decoration: none; font-size: 14px; }

/* ---- kopbalk (breed) ---- */
header.top { min-width: 0; }
header.top h1 { white-space: nowrap; flex: none; }
header.top nav { flex: none; align-items: center; }               /* krimpt niet: wat niet past, schuift in Meer (JS) */
header.top nav > a { white-space: nowrap; flex: none; }
.navmore { position: relative; flex: none; }
.navmore > summary { list-style: none; cursor: pointer; color: var(--muted); white-space: nowrap; padding: 0 2px; display: flex; align-items: center; min-height: 32px; }
.navmore > summary::-webkit-details-marker { display: none; }
.navmore > summary::after { content: ""; display: inline-block; margin-left: 5px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.navmore[open] > summary, .navmore > summary:hover { color: var(--text); }
.navmore:has(.navmore-over a.on) > summary { color: var(--text); font-weight: 600; }
.navmore .menu { position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; min-width: 210px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.navmore .menu a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.navmore .menu a:hover { background: var(--bg); }
.navmore .menu a.on { font-weight: 600; color: var(--accent); }
.navmore-over:empty { display: none; }
.navmore-over { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 4px; }
.navmore-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 10px 2px; }
.navmore-sep { border-top: 1px solid var(--line); margin: 4px 0; }
.modesw { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg); margin-left: auto; }
.modesw a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--muted); text-decoration: none; white-space: nowrap; }
.modesw a[aria-current] { background: var(--accent); color: var(--accent-text); }
.modesw a:not([aria-current]):hover { color: var(--offc); }
header.top .modesw ~ .spacer { display: none; }
header.top #mesh { flex: 0 1 auto; min-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.top .usermenu, header.top #sharelogin, header.top .hdrinstall { flex: none; }

/* ---- gsm: tabbalk onderaan + Meer-venster ---- */
.mnav { display: none; }
@media (max-width: 720px) {
  body.has-mnav header.top nav, header.top .modesw, body.has-mnav header.top .usermenu, body.has-mnav header.top .navtoggle, body.has-mnav header.top .hdrinstall { display: none !important; }
  body:not(.has-mnav) header.top nav { display: flex; }          /* openbare pagina zonder tabbalk (help): eigen links tonen */
  header.top .spacer { display: block; flex: 1; }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--panel); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  body.has-mnav .mapwrap { height: calc(100% - 48px - var(--mnav-h) - env(safe-area-inset-bottom)); }
  body.has-mnav main.page, body.has-mnav main { padding-bottom: calc(var(--mnav-h) + 24px + env(safe-area-inset-bottom)); }
  body.has-mnav .sheet-show:not([hidden]) { bottom: calc(var(--mnav-h) + 14px + env(safe-area-inset-bottom)); }
  body.has-mnav .swupdate:not([hidden]) { bottom: calc(var(--mnav-h) + 14px + env(safe-area-inset-bottom)); }
  body.has-mnav .pwahint { bottom: calc(var(--mnav-h) + 12px + env(safe-area-inset-bottom)); }
  body.kiosk .mnav { display: none; }
  body.kiosk.has-mnav .mapwrap { height: calc(100% - 48px); }
}
.mnav > a, .mnav > button, .obar > button { flex: 1 1 0; min-width: 0; min-height: var(--mnav-h); border: 0; border-radius: 0; background: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 5px; font-size: 12px;
  text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; }
.mnav svg, .obar svg { width: 22px; height: 22px; padding: 4px 16px; box-sizing: content-box; border-radius: 999px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .15s; }
.mnav span, .obar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav > .on, .obar > .on { color: var(--accent); font-weight: 700; }
.mnav > .on svg, .obar > .on svg { background: color-mix(in srgb, var(--accent) 16%, transparent); stroke-width: 2.4; }
.mnav > :focus-visible, .obar > :focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
@media (max-width: 380px) { .mnav svg, .obar svg { padding: 4px 10px; } }

dialog.msheet { margin: auto auto 0; width: 100%; max-width: 560px; max-height: 85vh; max-height: 85dvh; box-sizing: border-box; border: 1px solid var(--line);
  border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--panel); color: var(--text); padding: 0 0 env(safe-area-inset-bottom); overflow: auto; }
dialog.msheet[open] { display: flex; flex-direction: column; animation: msheet-in .18s ease-out; }
dialog.msheet::backdrop { background: rgba(0,0,0,.4); }
@keyframes msheet-in { from { transform: translateY(24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.msheet[open] { animation: none; } }
.msheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 10px auto 4px; flex: none; }
.msheet-who { display: flex; gap: 12px; align-items: center; padding: 8px 18px 12px; border-bottom: 1px solid var(--line); }
.msheet-who .avatar { width: 40px; height: 40px; font-size: 17px; flex: none; }
.msheet-h { font-size: 17px; margin: 6px 18px 8px; }
.msheet-list { display: flex; flex-direction: column; padding: 4px 8px; }
.msheet-list > a, .msheet-list > button { display: flex; align-items: center; min-height: 48px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text); text-decoration: none; font-size: 16px; text-align: left; width: 100%; }
.msheet-list > a:hover, .msheet-list > button:hover { background: var(--bg); }
.msheet-list > a.on { color: var(--accent); font-weight: 600; }
.msheet-list > a.msheet-off, .msheet-list > a.msheet-online { color: var(--offc); font-weight: 600; }
.msheet-list > a.msheet-online { color: var(--accent); }
.msheet-l { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 14px 10px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.msheet-list > .msheet-l:first-child { border-top: 0; margin-top: 0; }
.msheet-list .themes { padding: 4px 10px 8px; }
.msheet-list .themes button { min-height: 44px; }
.msheet-close { margin: 8px 16px 14px; min-height: 48px; flex: none; }
/* een gewone .avatar buiten het gebruikersmenu (Meer-venster) */
.msheet .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; }

/* ---- offline-deel: band "Offline-modus" (Offline-kaart | Tracker live | Online) ---- */
.modenav { display: flex; align-items: center; gap: 8px; flex: none; min-height: 48px; box-sizing: border-box;
  padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  background: var(--offc-bg); color: var(--offc); border-bottom: 1px solid var(--line); font-size: 14px; }
.modenav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.modenav-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.modenav-x { font-weight: 400; }
.modeseg { display: inline-flex; flex: none; border: 1px solid color-mix(in srgb, var(--offc) 45%, var(--line)); border-radius: 999px; padding: 2px; background: var(--panel); }
.modeseg a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: var(--text);
  font-weight: 600; font-size: 14px; white-space: nowrap; }
.modeseg a[aria-current] { background: var(--offc); color: var(--panel); }
.modehelp { margin-left: auto; color: var(--offc); white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.modeonline { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); background: var(--panel); text-decoration: none; font-weight: 600; white-space: nowrap; }
.modeonline svg { width: 18px; height: 18px; }
.modenav a:focus-visible { outline: 2px solid var(--offc); outline-offset: 2px; }
@media (max-width: 900px) { .modenav-x { display: none; } }
@media (max-width: 760px) {
  .modenav { gap: 6px; }
  .modenav-t, .modehelp { display: none; }
  .modenav-l { flex: none; }
  .modeseg { margin-right: auto; }
}
@media (max-width: 360px) {
  .modeseg a { padding: 0 9px; font-size: 13px; }
  .modeonline { padding: 0 9px; }
}

/* offline-kaart: tabbalk onderaan op de gsm (in de flow, onder het onderpaneel) */
.obar { display: none; }
@media (max-width: 760px) {
  .obar { display: flex; flex: none; position: relative; z-index: 4; background: var(--panel); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
}
.obadge { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }

/* oude, apart geïnstalleerde /offline- of /tracker-app: één keer uitleg over de overstap */
.migrbanner { flex: none; background: var(--panel); border-bottom: 1px solid var(--line); border-left: 4px solid var(--warn);
  padding: 10px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); font-size: 14px; line-height: 1.45; }
.migrbanner p { margin: 0 0 6px; }
.migrbanner .migrsub { color: var(--muted); font-size: 13px; }
.migrbanner .migrbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.migrbanner .migrbtns > * { min-height: 44px; }
/* Prioritair uit: gewoon een schakelaar met label (geen kader); aan: blauwe pil (UX 1.5) */
.prioctl .priobtn[role="switch"][aria-checked="false"] { border-color: transparent; background: none; padding-left: 0; }

/* ---- thema kiezen: kleine voorbeelden (common.js, appnav.js) ---- */
.themes.thpick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; flex-wrap: nowrap; }
.thpick .thsw { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 4px 2px 5px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 12px; line-height: 1.2; cursor: pointer; }
.thpick .thsw[aria-pressed="true"] { border: 2px solid var(--accent); padding: 3px 1px 4px; font-weight: 700; background: var(--panel); color: var(--text); }
.thpick .thsw-p { position: relative; display: block; width: 100%; max-width: 52px; height: 30px; border-radius: 6px; overflow: hidden;
  background: var(--sw-bg); border: 1px solid rgba(0,0,0,.25); }
.thpick .thsw-p i { position: absolute; left: 4px; right: 4px; top: 4px; height: 12px; border-radius: 3px; background: var(--sw-panel); }
.thpick .thsw-p i::after { content: ""; position: absolute; left: 3px; top: 4px; width: 60%; height: 3px; border-radius: 2px; background: var(--sw-text); }
.thpick .thsw-p b { position: absolute; left: 4px; bottom: 4px; width: 22px; height: 7px; border-radius: 4px; background: var(--sw-acc); }
.thpick .thsw-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.thsw[data-th="light"] { --sw-bg: #f4f3f0; --sw-panel: #ffffff; --sw-text: #1d2125; --sw-acc: #0b6e4f; }
.thsw[data-th="dark"] { --sw-bg: #15181c; --sw-panel: #1f2328; --sw-text: #e6e8ea; --sw-acc: #3fb68b; }
.thsw[data-th="night"] { --sw-bg: #050303; --sw-panel: #0d0707; --sw-text: #ff8a7a; --sw-acc: #e0483a; }
.thsw[data-th="contrast"] { --sw-bg: #ffffff; --sw-panel: #ffffff; --sw-text: #000000; --sw-acc: #0040c0; }
.thsw[data-th="contrast"] .thsw-p i { outline: 2px solid #000; }
.thsw[data-th="auto"] { --sw-panel: #ffffff; --sw-text: #1d2125; --sw-acc: #0b6e4f; }
.thsw[data-th="auto"] .thsw-p { background: linear-gradient(135deg, #f4f3f0 0 50%, #15181c 50% 100%); }
.usermenu .menu .thpick { min-width: 290px; }
/* Dag/Nacht in één tik (Meer-venster) */
.daynight { display: flex; align-items: center; gap: 10px; }
.daynight .dn-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.daynight[aria-pressed="true"] { color: var(--accent); font-weight: 600; }
/* Zon: alles wat een rand heeft, krijgt een duidelijke rand; focus extra dik */
:root[data-theme="contrast"] :where(button, a, input, select, textarea, summary):focus-visible { outline-width: 3px; }
:root[data-theme="contrast"] .pill, :root[data-theme="contrast"] .mnav, :root[data-theme="contrast"] .obar, :root[data-theme="contrast"] .modenav { border-color: #000; }
/* Nacht: ook de zoomknoppen van de kaart donker en rood (geen witte vlakken in het donker) */
:root[data-theme="night"] .maplibregl-ctrl-group { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="night"] .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
:root[data-theme="night"] .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) sepia(1) saturate(6) hue-rotate(-40deg) brightness(.75); }
:root[data-theme="night"] .maplibregl-ctrl-attrib, :root[data-theme="night"] .maplibregl-ctrl-scale { background: var(--panel); color: var(--muted); }

/* ---- offline-deel als één pagina (Offline-kaart + Tracker live): weergaven en verbindingschip ---- */
.appview { display: contents; }
.connchip { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 44px; min-height: 40px; max-width: 42vw;
  padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--offc) 45%, var(--line)); background: var(--panel);
  color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.connchip svg { width: 18px; height: 18px; flex: none; color: var(--offc); }
.connchip .conndot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid var(--muted); box-sizing: border-box; }
.connchip[data-state="on"] .conndot { background: var(--ok); border-color: var(--ok); }
.connchip[data-state="half"] .conndot { background: linear-gradient(90deg, var(--ok) 50%, transparent 50%); border-color: var(--ok); }
.connchip[data-state="busy"] .conndot { border-style: dotted; border-color: var(--warn); }
.connchip .conntxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connchip:focus-visible { outline: 2px solid var(--offc); outline-offset: 2px; }
.connnote { color: var(--offc); margin: 6px 0 0; }
.needconn { margin-left: 6px; min-height: 40px; }
@media (max-width: 760px) {
  /* gsm: alleen icoon + bolletje (de naam staat in aria-label en op het verbindingsscherm) */
  .connchip { padding: 0 8px; max-width: none; }
  .connchip .conntxt { display: none; }
}
@media (max-width: 380px) { .modeseg a { padding: 0 8px; font-size: 13px; } .modeonline { padding: 0 8px; } }

/* ---- Systeem: updates en back-ups (server 1.6.0) ---- */
dl.kv { display: grid; grid-template-columns: fit-content(55%) 1fr; gap: 6px 14px; margin: 6px 0 0; font-size: 14px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#u-fwdev { display: inline-flex; align-items: center; font-size: 15px; padding: 7px 12px; min-height: 38px; box-sizing: border-box; }
.upd-missing { border-left: 4px solid var(--warn); color: var(--text); }
.warnbox { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-left: 4px solid var(--warn); border-radius: 8px;
  padding: 8px 12px; margin: 12px 0; font-size: 14px; background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.warnbox.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); }
.upd-progress { margin-top: 12px; }
.upd-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 6px; }
.upd-bar span { display: block; height: 100%; width: 35%; border-radius: inherit; background: var(--accent); animation: updbar 1.4s ease-in-out infinite; }
@keyframes updbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .upd-bar span { animation: none; width: 100%; opacity: .6; } }
.upd-logwrap, .upd-noteswrap { margin-top: 12px; }
.upd-logwrap summary, .upd-noteswrap summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 32px; display: list-item; }
.upd-log { max-height: 260px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  white-space: pre-wrap; font-size: 12px; }
.upd-notes { font-size: 14px; max-height: 420px; overflow: auto; overflow-wrap: anywhere; }
.upd-notes h3, .upd-notes h4, .upd-notes h5 { margin: 12px 0 4px; font-size: 15px; }
.upd-notes h4, .upd-notes h5 { font-size: 14px; }
.upd-notes ul, .upd-notes ol { margin: 4px 0; padding-left: 22px; }
.upd-notes p { margin: 6px 0; }
.upd-notes pre { white-space: pre-wrap; background: var(--bg); padding: 6px 8px; border-radius: 6px; }
.upd-notes code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.upd-auto input[type=time] { width: auto; min-width: 110px; }
.pwmeter { height: 4px; border-radius: 999px; background: var(--line); margin-top: 6px; overflow: hidden; }
.pwmeter span { display: block; height: 100%; width: 0; background: var(--danger); transition: width .15s; }
.pwmeter span[data-lvl="3"] { background: var(--warn); }
.pwmeter span[data-lvl="4"] { background: var(--ok); }
#rs-card .rs-h { margin: 0 0 4px; font-size: 15px; }
.msg.warn { color: var(--warn); }

/* ---- firmware via Bluetooth met een app (fwapp.js): route, vensters, terugkeerpaneel ---- */
.fwroute { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 12px; }
.fwroute legend { padding: 0 4px; }
.fwopt { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
.fwopt input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.fwroute-note { margin: 4px 0 0; }
dialog.fwdlg { max-width: 460px; }
.fwpre { white-space: pre-line; line-height: 1.5; }
.fwbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.fwbtns button { min-height: 44px; }
.fwret { border-left: 4px solid var(--accent); margin-bottom: 12px; }
.fwret h2 { font-size: 17px; margin: 0 0 6px; }
.fwres { margin: 8px 0 0; font-weight: 600; }
.fwres.ok { color: var(--ok); } .fwres.err { color: var(--danger); }
.fwble { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-fwbanner:empty { display: none; }
.tk-fwbanner { margin-top: 8px; }
/* Help op de gsm: een breed schema of codeblok mag de kolom nooit breder maken dan het scherm */
@media (max-width: 860px) { main.page.help { grid-template-columns: minmax(0, 1fr); } }
.doc svg, .doc img { max-width: 100%; height: auto; }
.doc pre, .doc table { max-width: 100%; overflow-x: auto; }
.doc code { overflow-wrap: anywhere; word-break: break-word; }

/* ---- SNR-kaart (coverage.js) ---- */
.covbox { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.covbox .switch { margin: 0; }
#cov-opts { display: flex; flex-direction: column; gap: 8px; }
#cov-opts[hidden] { display: none; }
.covrow { display: flex; flex-direction: column; gap: 4px; }
.covrow .seg { display: flex; flex-wrap: wrap; }
.covrow .seg button { flex: 1 1 auto; min-height: 36px; font-size: 13px; white-space: nowrap; }
.covdirect { min-height: 36px; }
.covlegend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.covlegend span { display: inline-flex; align-items: center; gap: 5px; }
.covlegend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; }
.covlegend i.covonly { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--muted) 3px 4px); border: 1px dashed var(--muted); }
.covpop { font-size: 13px; line-height: 1.5; }
@media (max-width: 720px) { .covrow .seg button { min-height: 44px; } .covdirect { min-height: 44px; } }
#cov-reach { width: 100%; min-height: 44px; accent-color: var(--accent); }
#cov-reachrow[hidden] { display: none; }
.covcloudnote { flex-basis: 100%; color: var(--muted); }