/* =============================================================================
   GMC+ Cloud — Kingspan-huisstijl op een licht Apple-canvas: blauw (#004288)
   als actiekleur, goud (#c0995d) als secundair accent, Mukta-typografie.
   Rood is gereserveerd voor alarm/storing; functionele statuskleuren blijven
   onderscheidend. Tekstkleuren gebruiken de *-ink-varianten (AA-contrast).
   ============================================================================= */
:root {
  --brand: #004288;        /* Kingspan-blauw — gevulde acties */
  --brand-ink: #00305f;    /* donkerblauw — links/outline/hover */
  --gold: #c0995d;         /* Kingspan-goud — secundair accent */
  --tint: #e7eef6;         /* zachte blauwe wash (actieve nav / focus) */

  --ink: #1d1d1f;          /* koppen + primaire tekst (Apple near-black) */
  --graphite: #1d1d1f;     /* bodytekst */
  --slate: #6e6e73;        /* muted (Apple secondary) */
  --mist: #a1a1a6;         /* alleen als lijn/vulkleur — NOOIT als tekst (2,6:1) */
  --line: #e8e8ed;         /* zachte scheidingslijn (Apple separator) */
  --stone: #f5f5f7;        /* canvas / lichte vlakken (Apple grouped bg) */
  --white: #ffffff;

  /* Zachte schaduwen — het geheim van de rustige, 'zwevende' Apple-kaart */
  --sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --sh-md: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sh-lg: 0 12px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);

  /* Functionele statuskleuren — vlakken/LED's/randen (fel, herkenbaar) */
  --alarm: #ff2a1a;        /* fel alarm-rood, bewust fel voor directe opvallendheid */
  --warn: #d98f00;
  --orange: #ff6a00;
  --ok: #248a3d;
  --offline: #86868b;
  /* …en hun tekst-varianten (AA-contrast op wit) — gebruik déze voor color: */
  --alarm-ink: #d70015;    /* 5,4:1 */
  --warn-ink: #8a5e00;     /* 5,3:1 */
  --orange-ink: #b34700;   /* 5,0:1 */

  /* Semantisch */
  --bg: var(--stone);
  --panel: var(--white);
  --text: var(--ink);
  --muted: var(--slate);

  --r-card: 16px;
  --r-pill: 980px;
  --r-sm: 10px;
  --topbar-h: 62px;        /* sticky-offsets (tabbar) rekenen hiermee */
  --gutter: 1.6rem;        /* zijmarge van de views — mobiel kleiner */

  font-family: 'Mukta', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--alarm-ink); min-height: 1.2em; margin: .4rem 0 0; font-size: .85rem; }
code { background: var(--stone); color: var(--brand-ink); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }
h1, h2, h3 { color: var(--ink); letter-spacing: 0; font-weight: 700; }

/* Knoppen — Kingspan-blauw gevuld; .ghost = secundair, .mini/.mini-btn = compact */
button {
  background: var(--brand); color: #fff; border: 0; border-radius: 12px;
  padding: .62rem 1.25rem; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  letter-spacing: 0; box-shadow: var(--sh-sm);
  transition: background .18s, transform .12s, box-shadow .18s, opacity .18s;
}
button:hover { background: var(--brand-ink); box-shadow: var(--sh-md); }
button:active { transform: scale(.97); opacity: .9; }
button.ghost { background: var(--stone); border: 0; color: var(--brand-ink); box-shadow: none; }
button.ghost:hover { background: #ececf0; }
button.mini { padding: .38rem .85rem; font-size: .8rem; margin-left: .6rem; vertical-align: middle; border-radius: 10px; }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* Focus zichtbaar voor toetsenbord/VoiceOver — overal (WCAG 2.4.7) */
:where(button, .mini-btn, .tab, .range-btn, .act, .nav a, summary, select, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }

/* Login / setup */
.login { position: fixed; inset: 0; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--stone) 55%, #ececf0 100%); }
.login-card {
  background: var(--white); border: 0;
  border-radius: 22px; box-shadow: var(--sh-lg);
  padding: 2.6rem 2.4rem; width: min(380px, 92vw); display: flex; flex-direction: column; gap: .9rem;
  text-align: center;
}
.login-card input { text-align: left; }
.login-card .ks-logo { height: 46px; width: auto; align-self: center; margin-bottom: .2rem; }
.login-card h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.login-card h1 b, .brand-red { color: var(--brand); }
.login-card .muted { font-size: .95rem; }
.login-card input {
  background: var(--stone); border: 1px solid transparent; border-radius: 12px;
  color: var(--ink); padding: .85rem .95rem; font-size: 1rem;
}
.login-card button { margin-top: .3rem; padding: .85rem; font-size: 1rem; border-radius: 12px; }
.login-card input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }

/* Invoerveld met icoon links (en optioneel een oog-knop rechts) */
.field { position: relative; display: flex; align-items: center; }
.field input { width: 100%; padding-left: 2.7rem !important; }
.field .fi { position: absolute; left: .95rem; display: inline-flex; color: var(--slate); pointer-events: none; }
.field .fi-eye { position: absolute; right: .55rem; margin: 0; padding: .35rem; background: none; border: 0;
  box-shadow: none; color: var(--slate); display: inline-flex; border-radius: 8px; cursor: pointer; }
.field .fi-eye:hover { background: var(--stone); color: var(--ink); }
.field:focus-within .fi { color: var(--brand); }
.field + .field { margin-top: -.1rem; }
/* Tekstlink-knop (Wachtwoord vergeten?) */
.linkbtn { background: none; border: 0; box-shadow: none; color: var(--brand-ink); font-size: .85rem;
  font-weight: 600; padding: .3rem; margin: 0; cursor: pointer; }
.linkbtn:hover { background: none; text-decoration: underline; color: var(--brand); box-shadow: none; }

/* Topbar — licht & frosted (Apple-navbalk) met fijne scheidingslijn */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.6rem;
  min-height: var(--topbar-h);
  /* Safe-area: op de iPhone (notch/statusbalk) de kop eronderuit laten komen. */
  padding-top: calc(.7rem + env(safe-area-inset-top));
  padding-left: calc(1.6rem + env(safe-area-inset-left));
  padding-right: calc(1.6rem + env(safe-area-inset-right));
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.brand b { color: var(--brand); font-weight: 700; }
/* Kingspan-logo subtiel linksboven — op de lichte header leest het direct (geen chip) */
.brand .ks-logo-sm { height: 18px; width: auto; vertical-align: middle; margin-right: .3rem; }
.spacer { flex: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mist);
  margin-right: .5rem; vertical-align: middle; }
.dot.live { background: var(--ok); box-shadow: 0 0 0 3px rgba(36,138,61,.16); }
/* Navigatie als iOS segmented control: grijze track, actieve segment = witte pil */
.nav { display: flex; gap: .15rem; background: var(--stone); padding: .2rem; border-radius: 11px; }
.nav a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--slate);
  font-weight: 600; font-size: .82rem; letter-spacing: 0; padding: .34rem .9rem; border-radius: 8px;
  transition: background .18s, color .18s, box-shadow .18s; }
.nav a .ic { flex: none; }
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--brand); background: var(--white); box-shadow: var(--sh-sm); }

/* Telefoon: navigatie als native tabbar onderin → header krijgt lucht */
@media (max-width: 720px) {
  .topbar { gap: .6rem;
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right)); }
  #add-location, #logout, .topbar button.mini { padding: .48rem .8rem; font-size: .82rem; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line); border-radius: 0; gap: 0; padding: .35rem .5rem;
    padding-bottom: calc(.35rem + env(safe-area-inset-bottom)); justify-content: space-around; }
  /* Native-achtige tabbar: icoon bóven het label */
  .nav a { flex: 1; flex-direction: column; gap: .15rem; text-align: center; padding: .45rem .3rem;
    border-radius: 10px; font-size: .66rem; font-weight: 600; }
  .nav a.active { background: transparent; color: var(--brand); box-shadow: none; }
  .nav a.active .ic { transform: translateY(-1px); }
  /* ruimte onder de content zodat de tabbar niks afdekt */
  #app { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* Detailpagina: knoppenbalk mag wrappen i.p.v. knoppen eraf te laten vallen */
  .tabbar { flex-wrap: wrap; gap: .5rem .6rem; }
  .tabbar .spacer2 { display: none; }
  .tabbar .tabs { flex: 1 1 100%; }
  .tabbar .mini { margin-left: 0; }
  /* Detail-kop: naam + pauzeknop netjes onder elkaar i.p.v. afkappen */
  .detail-head .dh-top { gap: .6rem; }
  .detail-head .dh-top .mini { margin-left: 0; }
  .detail-head h1 { font-size: 1.45rem; }
}

/* Statusbalk */
.statusbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  padding: 1.4rem 1.6rem; background: transparent; }
/* KPI-tegel: icoon + chevron boven, groot cijfer, label. Klikbaar → filtert. */
.stat { --c: var(--slate); display: flex; flex-direction: column; align-items: stretch; gap: .35rem;
  padding: 1rem 1.1rem 1.05rem; border-radius: var(--r-card); background: var(--white);
  border: 1px solid transparent; box-shadow: var(--sh-sm); position: relative; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: box-shadow .25s, transform .12s, border-color .25s; }
.stat:hover { box-shadow: var(--sh-md); background: var(--white); transform: translateY(-1px); }
.stat:active { transform: scale(.985); }
.stat.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint), var(--sh-sm); }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--c); }
.stat-top .ic { flex: none; }
.stat-go { color: var(--mist); display: inline-flex; }
.stat:hover .stat-go { color: var(--brand); }
.stat-num { font-size: 2.1rem; font-weight: 800; line-height: 1.05; color: var(--c);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-label { font-size: .78rem; letter-spacing: -0.01em; color: var(--slate); font-weight: 600; }
.stat[data-kind=total]   { --c: var(--ink); }
.stat[data-kind=alarm]   { --c: var(--alarm); }
.stat[data-kind=storing] { --c: var(--warn); }
.stat[data-kind=test]    { --c: var(--warn); }
.stat[data-kind=uit]     { --c: var(--orange); }
/* Proefstand is een onderhoudsstaat, geen noodgeval → wel kleuren, niet knipperen */
.stat[data-kind=test].flash { animation: none; }
.stat[data-kind=online]  { --c: var(--ok); }
.stat.zero .stat-num { color: var(--mist); }
@keyframes flashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); border-color: var(--line); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); border-color: var(--c); }
}
.stat.flash { animation: flashPulse 1.2s ease-in-out infinite; }
.stat.flash .stat-num { color: var(--c); }
/* Telefoon: compact — anders vullen 6 grote tegels het hele eerste scherm en
   ziet de monteur geen enkele locatiekaart zonder te scrollen. */
@media (max-width: 720px) {
  .statusbar  { grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .8rem 1rem; }
  .stat       { padding: .6rem .55rem .65rem; gap: .1rem; border-radius: 12px; }
  .stat-num   { font-size: 1.55rem; }
  .stat-label { font-size: .64rem; }
  .stat-top .ic { width: 18px; height: 18px; }
  .stat-go { display: none; }        /* de hele tegel is al aanraakbaar */
}

/* Layout */
main { padding: .8rem var(--gutter) 2rem; }
@media (max-width: 720px) { :root { --gutter: 1rem; } }
.ov-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.ov-filters input { flex: 1 1 260px; }
.ov-filters input, .ov-filters select { border: 1px solid transparent; border-radius: 12px;
  padding: .65rem .9rem; font: inherit; font-size: .92rem; color: var(--ink); background: var(--white); box-shadow: var(--sh-sm); }
.ov-filters input:focus, .ov-filters select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 1rem; align-content: start; }

/* Locatiekaart */
.card { background: var(--white); border: 0; border-left: 4px solid var(--mist);
  border-radius: var(--r-card); padding: 1.05rem 1.15rem; cursor: pointer; box-shadow: var(--sh-sm);
  transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.card.state-normal, .card.state-ok { border-left-color: var(--ok); }
.card.state-alarm { border-left-color: var(--alarm); }
.card.state-fault, .card.state-storing, .card.state-test { border-left-color: var(--warn); }
.card.state-out_of_service { border-left-color: var(--orange); }
.card.state-offline, .card.state-unknown { border-left-color: var(--mist); }
/* Kaartkop: naam + adres links, status-pill en chevron rechts */
.card-main { display: flex; align-items: center; gap: .7rem; }
.card-txt { flex: 1; min-width: 0; }
.card .name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.card-sub { font-size: .78rem; color: var(--slate); margin-top: .1rem; overflow-wrap: anywhere; }
.card-go { color: var(--mist); display: inline-flex; flex: none; }
.card:hover .card-go { color: var(--brand); }
/* Status-pill (zelfde kleurcodes als .badge, iets steviger voor de kaart) */
.pill { font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--stone); color: var(--slate); white-space: nowrap; flex: none; }
.pill.ok, .pill.normal { background: rgba(36,138,61,.12); color: var(--ok); }
.pill.fault, .pill.storing, .pill.test { background: rgba(217,143,0,.16); color: var(--warn-ink); }
.pill.out_of_service { background: rgba(255,106,0,.16); color: var(--orange-ink); }
.pill.offline, .pill.unknown { background: var(--stone); color: var(--slate); }
.pill.alarm { background: rgba(255,42,26,.14); color: var(--alarm-ink);
  animation: pillFlash 1.05s steps(1, end) infinite; }
@keyframes pillFlash { 50% { background: var(--alarm); color: #fff; } }
.badge { font-size: .68rem; letter-spacing: -0.01em; font-weight: 600;
  padding: .2rem .6rem; border-radius: var(--r-pill); background: var(--stone); color: var(--slate); white-space: nowrap; }
.badge.alarm { background: var(--alarm); color: #fff; animation: alarmFlash 1.05s steps(1, end) infinite; }
@keyframes alarmFlash { 50% { background: #fff; color: var(--alarm-ink); box-shadow: inset 0 0 0 1.5px var(--alarm); } }
.badge.ok, .badge.normal { background: rgba(36,138,61,.12); color: var(--ok); }
.badge.fault, .badge.storing, .badge.test { background: rgba(217,143,0,.14); color: var(--warn-ink); }
.badge.out_of_service { background: rgba(255,106,0,.14); color: var(--orange-ink); }
.badge.offline, .badge.unknown { background: var(--stone); color: var(--slate); }
.card .lcd { margin-top: .8rem; font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; font-size: .76rem;
  color: var(--slate); white-space: pre-wrap; min-height: 1em; background: var(--stone); border-radius: var(--r-sm); padding: .55rem .65rem; }
.card-melding { margin-top: .5rem; font-size: .8rem; font-weight: 500; color: var(--slate); }
.card.state-alarm .card-melding { color: var(--alarm-ink); }
.card.state-fault .card-melding, .card.state-storing .card-melding, .card.state-test .card-melding { color: var(--warn-ink); }
.card.state-out_of_service .card-melding { color: var(--orange-ink); }
.card .meta { margin-top: .6rem; font-size: .74rem; color: var(--slate); display: flex; gap: .8rem; flex-wrap: wrap; }
.card .actions { margin-top: .7rem; display: flex; gap: .5rem; }
/* Echte knoppen (focusbaar, groter raakvlak) maar met een tekstlink-uiterlijk */
.act { background: none; border: 0; box-shadow: none; font: inherit; font-size: .74rem; font-weight: 500;
  color: var(--brand-ink); cursor: pointer; padding: .45rem .55rem; border-radius: 8px; }
.act:hover { background: var(--stone); color: var(--brand-ink); box-shadow: none; text-decoration: underline; }
.act.del { color: var(--slate); }
.act.del:hover { background: rgba(255,42,26,.08); color: var(--alarm-ink); }

/* Logboek zijpaneel */
.feed { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.1rem 1.3rem;
  max-height: calc(100vh - 9rem); overflow: auto; position: sticky; top: 6rem; }
.feed h2 { margin: .2rem 0 .7rem; font-size: 1rem; }
.feed ul { list-style: none; margin: 0; padding: 0; }
.feed li { border-top: 1px solid var(--line); padding: .55rem 0; font-size: .8rem; color: var(--graphite); }
.feed li:first-child { border-top: 0; }
.feed li .when { color: var(--slate); font-size: .72rem; }
.feed li.sev-alarm { color: var(--alarm-ink); }
.feed li.sev-error, .feed li.sev-warn { color: var(--warn-ink); }

/* Modaal formulier */
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 40; background: rgba(0,0,0,.4); }
.modal-card { background: var(--white); border-radius: 18px; box-shadow: rgba(0,0,0,.22) 0 10px 40px -8px;
  padding: 1.9rem; width: min(430px, 92vw); display: flex; flex-direction: column; gap: .85rem; }
.modal-card h2 { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 600; }
.modal-card label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--slate); font-weight: 500; }
.modal-card input:not([type=checkbox]) { width: 100%; box-sizing: border-box; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink); padding: .65rem .8rem; font-size: .95rem; font-weight: 400; }
.modal-card input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.modal-card .row { display: flex; gap: .8rem; }
.modal-card .row label { flex: 1; min-width: 0; }
.modal-card label.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--ink); font-size: .9rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }

/* Dataverbruik-tabel */
.traffic-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.traffic-table th, .traffic-table td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--line); }
.traffic-table th { font-weight: 600; color: var(--slate); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.traffic-table td.num, .traffic-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.traffic-table tfoot td { font-weight: 600; border-bottom: none; border-top: 2px solid var(--line); }
.traffic-table.kv td:first-child { color: var(--slate); width: 45%; }
.traffic-table.kv td.num { text-align: right; color: var(--ink); }

/* Pauze/hervat-knop op de detailpagina */
.mini.pause { border-color: var(--orange); color: var(--orange-ink); }
.mini.resume { border-color: var(--ok); color: var(--ok); }
.badge.paused { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }

/* Configuratie-explorer */
.config-block > summary { cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; font-size: 1rem; color: var(--ink);
  list-style: none; display: flex; align-items: center; gap: .5rem; }
.config-block > summary::-webkit-details-marker { display: none; }
.config-block > summary .cfg-naslag { font-size: .72rem; font-weight: 500; color: var(--slate);
  background: var(--stone); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .1rem .6rem; }
.config-block > summary::before { content: '▸'; color: var(--slate); transition: transform .15s; }
.config-block[open] > summary::before { transform: rotate(90deg); }
.config-inner { padding: 0 1.4rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.config-sub { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.config-sub > summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; font-size: .92rem; color: var(--ink);
  list-style: none; background: var(--tint); }
.config-sub > summary::-webkit-details-marker { display: none; }
.config-sub > summary::before { content: '▸ '; color: var(--slate); }
.config-sub[open] > summary::before { content: '▾ '; }
.config-sub-body { padding: .8rem .9rem; }
.participant { margin-bottom: 1rem; }
.participant h4 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 600; }
.raw-json { font-size: .78rem; line-height: 1.4; overflow-x: auto; background: var(--tint); padding: .8rem; border-radius: var(--r-sm);
  max-height: 420px; overflow-y: auto; color: var(--ink); }

/* ConfiGMC-stijl configuratie */
.cfg-dialog { display: flex; flex-direction: column; gap: .7rem; }
.cfg-dialog fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .8rem .7rem; margin: 0; }
.cfg-dialog legend { font-size: .72rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: .03em; padding: 0 .35rem; }
.cfg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .9rem; }
@media (max-width: 720px) { .cfg-2col { grid-template-columns: 1fr; } }
.cfg-val { display: flex; justify-content: space-between; gap: .8rem; font-size: .86rem; padding: .16rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.cfg-val > span { color: var(--slate); }
.cfg-val > b { color: var(--ink); font-weight: 600; text-align: right; }
.cfg-check { font-size: .84rem; padding: .12rem 0; color: var(--ink); }
.cfg-box { color: var(--brand); font-size: .95rem; }
.cfg-comment { font-size: .82rem; white-space: pre-wrap; background: var(--tint); padding: .5rem .6rem; border-radius: var(--r-sm); margin: 0; }
.cfg-sublabel { font-size: .78rem; font-weight: 600; color: var(--slate); margin: 0 0 .3rem; }
.participant-details { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: .5rem; overflow: hidden; }
.participant-details > summary { cursor: pointer; padding: .6rem .8rem; font-weight: 600; font-size: .9rem; list-style: none; background: var(--tint); }
.participant-details > summary::-webkit-details-marker { display: none; }
.participant-details > summary::before { content: '▸ '; color: var(--slate); }
.participant-details[open] > summary::before { content: '▾ '; }
.pd-body { padding: .7rem .8rem; }
.pd-body h5 { margin: 1rem 0 .4rem; font-size: .85rem; font-weight: 700; color: var(--brand); }
.pd-body h5:first-child { margin-top: 0; }
.hw-details { margin-top: .5rem; }
.hw-details > summary { cursor: pointer; font-size: .82rem; color: var(--slate); }

/* Detailweergave */
#detail-view, #analyse-view, #beheer-view { padding: 1.4rem var(--gutter) 2rem; }
.detail-head .dh-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.detail-head h1 { margin: 0; font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; gap: .7rem; letter-spacing: -0.01em; }
.detail-head .dh-top .mini { margin-left: auto; }
.detail-head .meta { color: var(--slate); font-size: .88rem; margin-top: .35rem; }

/* Locatie-samenvatting: compacte KPI-strip bovenaan de detailpagina */
.loc-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.1rem; }
@media (max-width: 720px) { .loc-summary { grid-template-columns: repeat(2, 1fr); } }
.loc-kpi { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1.1rem;
  background: var(--white); border: 0; box-shadow: var(--sh-sm); border-radius: var(--r-card); }
.loc-kpi .lk-num { font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.loc-kpi .lk-label { font-size: .72rem; font-weight: 500; color: var(--slate); }
.loc-kpi.ok .lk-num { color: var(--ok); }
.loc-kpi.bad .lk-num { color: var(--alarm-ink); }
.loc-kpi.warn .lk-num { color: var(--orange-ink); }
.loc-kpi.muted .lk-num { color: var(--mist); }

/* Statusgestuurd accent op de kop */
.detail-head { border-radius: var(--r-card); }

/* Live status-balk onder het display (vervangt de LED-tegels) */
.statusbalk { display: flex; margin-top: .9rem; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.statusbalk .seg { flex: 1; text-align: center; padding: .55rem .2rem; font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; color: var(--slate); background: var(--white); border-right: 1px solid var(--line); }
.statusbalk .seg:last-child { border-right: 0; }
.statusbalk .seg.on-ok { background: rgba(36,138,61,.12); color: var(--ok); }
.statusbalk .seg.on-al { background: var(--alarm); color: #fff; animation: segFlash 1.1s steps(1, end) infinite; }
.statusbalk .seg.on-fa { background: rgba(217,143,0,.2); color: #8a5e00; }
.statusbalk .seg.on-or { background: rgba(255,106,0,.16); color: var(--orange-ink); }
@keyframes segFlash { 50% { background: var(--white); color: var(--alarm-ink); box-shadow: inset 0 0 0 1.5px var(--alarm); } }

/* Rustige statregel (vervangt de KPI-tegels) */
.loc-statline { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 1rem 0 .2rem; font-size: .82rem; color: var(--slate); }
.loc-statline b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.loc-statline .ok b { color: var(--ok); } .loc-statline .bad b { color: var(--alarm-ink); } .loc-statline .warn b { color: var(--warn-ink); }

/* Actieve meldingen als alarm-box-regels: LED · type · tekst · groep en adres */
.mel { display: flex; flex-direction: column; gap: .5rem; }
.alrow { display: flex; align-items: center; gap: .7rem; background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--mist); border-radius: var(--r-sm); padding: .6rem .85rem; }
.alrow.al { border-left-color: var(--alarm); }
.alrow.fa, .alrow.te { border-left-color: var(--warn); }
.alrow.or { border-left-color: var(--orange); }
.alrow .ld { width: 13px; height: 13px; border-radius: 50%; flex: none; background: #c5c8cc; }
.alrow.al .ld { background: var(--alarm); box-shadow: 0 0 7px var(--alarm); }
.alrow.fa .ld, .alrow.te .ld { background: #f5b301; box-shadow: 0 0 6px #f5b301; }
.alrow.or .ld { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.alrow .mid { flex: 1; min-width: 0; }
.alrow .tp { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.alrow.al .tp { color: var(--alarm-ink); }
.alrow.fa .tp, .alrow.te .tp { color: #8a5e00; }
.alrow.or .tp { color: var(--orange-ink); }
.alrow .tx { font-size: .9rem; font-weight: 700; color: var(--ink); margin-top: .05rem; overflow-wrap: anywhere; }
.alrow .rf { font-size: .72rem; color: var(--slate); font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap; line-height: 1.35; }

/* Tabbladen — sticky onder de topbar; content scrolt eronder weg.
   Offset rekent met de échte topbar-hoogte + notch, anders schuift de balk op
   de iPhone volledig onder de header. */
.tabbar { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 15;
  display: flex; align-items: center; gap: 1rem;
  margin: 1.4rem calc(-1 * var(--gutter)) 0; padding: .5rem var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--line); }
.tabbar .tabs { display: flex; gap: .2rem; flex-wrap: wrap; }
.tabbar .spacer2 { flex: 1; }
.tabbar .tab { background: transparent; color: var(--slate); border: 0; border-radius: var(--r-pill);
  padding: .42rem .95rem; font-weight: 500; font-size: .9rem; }
.tabbar .tab:hover { background: var(--stone); color: var(--ink); }
.tabbar .tab.active { background: var(--tint); color: var(--brand-ink); }
.tab-badge { display: inline-block; margin-left: .4rem; min-width: 1.1rem; text-align: center;
  background: var(--alarm); color: #fff; font-size: .66rem; font-weight: 700; padding: .05rem .4rem;
  border-radius: var(--r-pill); vertical-align: middle; }
.tab-badge.u { background: var(--orange); }
.tab.active .tab-badge { }
/* Mini-kop: compacte naam+status die pas verschijnt als de grote kop wegscrolt */
.tabbar .tabbar-loc { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem;
  color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .2s; white-space: nowrap; }
.tabbar.scrolled .tabbar-loc { opacity: 1; visibility: visible; }
.tab-panel { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.4rem; }
@media (max-width: 720px) { .tabbar .tabbar-loc { display: none; } }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4rem; }
.paneel-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .paneel-split { grid-template-columns: 1fr; } }
/* Logboek — minder prominent, ingeklapt onderaan */
details.logboek { padding: 0; overflow: hidden; }
details.logboek > summary { cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; font-size: 1rem;
  color: var(--ink); list-style: none; display: flex; align-items: center; gap: .5rem; }
details.logboek > summary::-webkit-details-marker { display: none; }
details.logboek > summary::before { content: '▸'; color: var(--slate); transition: transform .15s; }
details.logboek[open] > summary::before { transform: rotate(90deg); }
details.logboek > *:not(summary) { margin: 0 1.4rem 1.2rem; }
.detail-grid .wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }
.panel { background: var(--white); border: 0; box-shadow: var(--sh-sm); border-radius: var(--r-card); padding: 1.4rem; }
.panel h2 { margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 700; }
.panel h3 { margin: .8rem 0 .3rem; font-size: .78rem; color: var(--slate); letter-spacing: -0.01em; }
.lcd-big { font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; font-size: .85rem; background: var(--stone);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .9rem; margin: 0; white-space: pre-wrap; color: var(--graphite); }

/* Realistisch paneel-display: groene fosfor-LCD + status-LED's */
.lcd-frame { background: #050a05; padding: 6px; border-radius: 10px; margin-bottom: 1rem;
  border: 1px solid #131b13; box-shadow: 0 2px 10px rgba(0,0,0,.15), 0 0 30px rgba(16,185,129,.10); }
.lcd { background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0px, rgba(0,0,0,.09) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% 30%, #2c6b2c, #173d17 75%);
  color: #c9ff66; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 19px;
  padding: .85rem 1.05rem; border-radius: 6px; letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(201,255,102,.55), 0 0 2px rgba(201,255,102,.4);
  border: 1px solid rgba(0,0,0,.6); line-height: 1.5; }
.lcd-row { white-space: pre; min-height: 1.5em; overflow: hidden; }
.led-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.led-card { display: flex; align-items: center; gap: .5rem; background: var(--stone);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .65rem; min-height: 46px; transition: all .2s; }
.led { width: 12px; height: 12px; border-radius: 50%; background: #c5c8cc; border: 1px solid #a9adb2;
  box-shadow: inset 0 0 3px rgba(0,0,0,.3); flex: none; }
.led-label { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--slate); line-height: 1.12; overflow-wrap: anywhere; }
.led-card.on-green { background: rgba(36,138,61,.10); border-color: rgba(36,138,61,.4); }
.led-card.on-green .led { background: radial-gradient(circle at 30% 30%, #6ee7b7, #248a3d 60%, #0f5c2a); box-shadow: 0 0 10px #34c759; border-color: #0f5c2a; }
.led-card.on-green .led-label { color: #1f7a37; }
.led-card.on-red { background: rgba(255,59,48,.10); border-color: rgba(255,59,48,.45); animation: led-pulse 1.4s infinite; }
.led-card.on-red .led { background: radial-gradient(circle at 30% 30%, #ffb3ae, #ff3b30 60%, #b3160e); box-shadow: 0 0 14px #ff3b30; border-color: #b3160e; }
.led-card.on-red .led-label { color: #d70015; font-weight: 700; }
.led-card.on-yellow { background: rgba(217,143,0,.12); border-color: rgba(217,143,0,.4); }
.led-card.on-yellow .led { background: radial-gradient(circle at 30% 30%, #ffe08a, #d98f00 60%, #a06800); box-shadow: 0 0 10px #f5b301; border-color: #a06800; animation: led-blink 1.6s ease-in-out infinite; }
.led-card.on-yellow .led-label { color: #9a6a00; }
@keyframes led-pulse { 50% { box-shadow: 0 0 0 5px rgba(255,59,48,.08); } }
@keyframes led-blink { 50% { opacity: .45; } }
.alerts ul { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .82rem; }
.attention { background: rgba(217,143,0,.08); border: 1px solid rgba(217,143,0,.35); border-radius: var(--r-sm);
  padding: .8rem 1rem; margin: 0 0 .9rem; font-size: .84rem; color: var(--warn-ink); }
.attention ul { margin: .45rem 0 0; padding-left: 1.2rem; color: var(--graphite); max-height: 200px; overflow: auto; }
.attention li { margin: .1rem 0; }
/* Systeem-overzicht: filters + inklapbare lussen */
.sys-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.sys-filters input, .sys-filters select { border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .5rem .7rem; font: inherit; font-size: .85rem; color: var(--ink); background: var(--white); }
.sys-filters input { flex: 1 1 200px; }
.sys-filters input:focus, .sys-filters select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.centrale { margin: 1rem 0 .5rem; font-size: .95rem; color: var(--ink); }
details.loop { border: 1px solid var(--line); border-radius: var(--r-sm); margin: .5rem 0; overflow: hidden; }
details.loop > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; font-size: .88rem;
  background: var(--stone); user-select: none; display: flex; align-items: center; gap: .5rem; list-style: none; }
details.loop > summary::-webkit-details-marker { display: none; }
details.loop > summary::before { content: '▸'; color: var(--slate); transition: transform .15s; }
details.loop[open] > summary::before { transform: rotate(90deg); }
.loop-mark { margin-left: auto; display: inline-flex; align-items: center; }
details.loop > summary:hover { background: #eef0f3; }
details.loop[open] > summary { border-bottom: 1px solid var(--line); }
details.loop .enc-table { border: 0; border-radius: 0; margin: 0; max-height: 360px; }

.enc-table { max-height: 420px; overflow: auto; margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.enc-table table { border-collapse: collapse; width: 100%; font-size: .78rem; }
.enc-table th, .enc-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.enc-table thead th { position: sticky; top: 0; background: var(--stone); color: var(--ink); font-weight: 600; }
.feed-list { list-style: none; margin: 0; padding: 0; max-height: 480px; overflow: auto; }
.feed-list li { border-top: 1px solid var(--line); padding: .55rem 0; font-size: .82rem; }
.feed-list li:first-child { border-top: 0; }
.feed-list li .when { color: var(--slate); font-size: .72rem; }
.feed-list li.sev-alarm { color: var(--alarm-ink); }
.feed-list li.sev-error, .feed-list li.sev-warn { color: var(--warn-ink); }

/* Analyse-dashboard */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 1.4rem; }
@media (max-width: 720px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi-row.kpi-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .kpi-row.kpi-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .kpi-row.kpi-5 { grid-template-columns: repeat(2, 1fr); } }

/* Analyse — datumfilter (segmented) + aangepaste reeks */
.analyse-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: 0 0 1rem; }
.range-presets { display: inline-flex; gap: .15rem; background: var(--stone); padding: .2rem; border-radius: 11px; }
.range-btn { background: transparent; color: var(--slate); box-shadow: none; border-radius: 8px; padding: .34rem .9rem;
  font-size: .82rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.range-btn:hover { background: transparent; color: var(--ink); }
.range-btn.active { background: var(--white); color: var(--ink); box-shadow: var(--sh-sm); }
.range-custom { display: inline-flex; align-items: center; gap: .8rem; }
.range-custom.hidden { display: none; }
.range-custom label { font-size: .8rem; color: var(--slate); display: inline-flex; align-items: center; gap: .35rem; }
.range-custom input[type=date] { background: var(--stone); border: 1px solid transparent; border-radius: 9px;
  padding: .4rem .6rem; font: inherit; font-size: .85rem; color: var(--ink); }
.range-custom input[type=date]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }

/* Analyse — legenda onder de gestapelde grafiek */
.cat-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .6rem; font-size: .78rem; color: var(--slate); }
.cat-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cat-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Analyse — donut (verdeling naar type) */
.donut-wrap { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.donut circle { stroke-linecap: butt; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; min-width: 190px; flex: 1; }
.donut-legend li { display: grid; grid-template-columns: 14px 1fr auto 38px; align-items: center; gap: .7rem; font-size: .92rem; }
.donut-legend i { width: 12px; height: 12px; border-radius: 3px; }
.donut-legend .dl-label { color: var(--ink); }
.donut-legend b { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.donut-legend .dl-pct { color: var(--slate); font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; }
.kpi { background: var(--white); border: 0; box-shadow: var(--sh-sm); border-radius: var(--r-card); padding: 1.3rem 1.4rem; }
.kpi .k-num { font-size: 2rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.kpi .k-label { font-size: .74rem; color: var(--slate); font-weight: 500; margin-top: .25rem; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 860px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-grid .wide { grid-column: 1 / -1; }
.chart svg { width: 100%; height: auto; display: block; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: .6rem; margin: .4rem 0; font-size: .8rem; }
.bar-row .track { background: var(--stone); border-radius: var(--r-pill); height: 10px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: var(--r-pill); }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--slate); }

/* =============================================================================
   Digitaal BMP (mimic-paneel)
   ============================================================================= */
/* Paneel-blok: links het display (LCD + tegels + meldingen), rechts het BMP. */
.paneel-bmp { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 980px) { .paneel-bmp { grid-template-columns: 1fr; } }
.mimic-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.mimic-title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.mimic-foot { margin-top: .8rem; }
.mimic-count { font-size: .72rem; font-weight: 500; color: var(--slate); margin-left: .5rem; }
.mimic-stage { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: #fff; line-height: 0; }
.mimic-stage img { display: block; width: 100%; height: auto; }
.mimic-led { position: absolute; width: 2.6%; aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 2; }
/* Automatische melder (renvooi): rode cirkel met zwarte rand. */
.mimic-led .core { position: absolute; inset: 6%; border-radius: 50%; background: #bcbfc4;
  border: 2px solid #080808; box-sizing: border-box; box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  transition: background .15s, box-shadow .15s; }
/* Handbrandmelder (renvooi): zwart afgerond vierkant met rode cirkel erin. */
.mimic-led.sq::before { content: ''; position: absolute; inset: 0; background: #080808; border-radius: 20%; }
.mimic-led.sq .core { inset: 24%; border: none; box-shadow: none; }
.mimic-led.on .core { background: var(--c); box-shadow: 0 0 5px 1px var(--c); }
.mimic-led.sq.on .core { box-shadow: 0 0 4px 1px var(--c); }
.mimic-led.on.blink .core { animation: mimic-blink .6s steps(1) infinite; }
@keyframes mimic-blink { 50% { background: #6b6b6b; box-shadow: none; } }

/* Editor -------------------------------------------------------------------- */
.mimic-modal { position: fixed; inset: 0; background: rgba(20,22,28,.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 2rem; }
.mimic-dialog { background: var(--white); border-radius: var(--r-card); width: min(1100px, 96vw);
  height: min(760px, 92vh); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mimic-dialog header { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--line); font-size: .95rem; }
.mimic-dialog header .grow { flex: 1; }
.mimic-editor { flex: 1; display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
.mimic-canvas { position: relative; background: var(--stone); overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; }
/* Wrapper past strak om de afbeelding → LED-punten (in %) vallen exact goed. */
.mimic-imgwrap { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.mimic-imgwrap img { display: block; max-width: none; height: auto; }
.mimic-imgwrap.cropping .mimic-led { pointer-events: none; opacity: .5; }
/* Raster (alleen in de editor) om LED's uit te lijnen. */
.mimic-imgwrap.grid::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(0,113,227,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,113,227,.35) 1px, transparent 1px);
  background-size: 5% 5%; }
/* Pannen (sleep de achtergrond). */
.mimic-canvas { cursor: grab; }
.mimic-canvas.panning { cursor: grabbing; }
.mimic-canvas .mimic-led { cursor: grab; }
.mini-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Zoom-slider in de toolbar */
.mimic-zoomctl { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--slate); }
.mimic-zoomctl input { width: 110px; }

/* Bijsnijden: verplaatsbaar/vergrootbaar kader + donkere omgeving */
.mimic-crop { position: absolute; border: 2px solid var(--brand); box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
  cursor: move; z-index: 5; box-sizing: border-box; }
.mimic-crop .h { position: absolute; width: 14px; height: 14px; background: var(--white);
  border: 2px solid var(--brand); border-radius: 50%; box-sizing: border-box; }
.mimic-crop .h.nw { left: -8px; top: -8px; cursor: nwse-resize; }
.mimic-crop .h.ne { right: -8px; top: -8px; cursor: nesw-resize; }
.mimic-crop .h.sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.mimic-crop .h.se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.mimic-cropbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: .5rem; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .35rem .5rem .35rem .8rem; font-size: .78rem; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.mimic-hint { position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); max-width: 420px;
  text-align: center; color: var(--slate); font-size: .85rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem; }
.mimic-canvas .mimic-led { pointer-events: auto; cursor: grab; z-index: 3; }
.mimic-canvas .mimic-led .core { background: #7a7f86; }
.mimic-canvas .mimic-led.linked .core { background: var(--brand); }
.mimic-canvas .mimic-led.sel { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 50%; }
.mimic-led .tag { position: absolute; left: 120%; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.85);
  padding: 0 3px; border-radius: 3px; white-space: nowrap; }
.mimic-side { border-left: 1px solid var(--line); overflow: auto; padding: .7rem; }
.mimic-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .6rem; margin-bottom: .5rem; cursor: pointer; }
.mimic-row.sel { border-color: var(--brand); background: var(--tint); }
.mimic-row-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.mimic-row-head b { flex: 1; font-size: .8rem; }
.mimic-row-map { display: flex; flex-direction: column; gap: .35rem; }
.mimic-row select { font-size: .78rem; padding: .25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.mimic-idlab { font-size: .8rem; font-weight: 700; flex: 1; display: flex; align-items: center; gap: .3rem; }
.mimic-id { width: 3.2rem; font-size: .8rem; font-weight: 700; padding: .2rem .35rem; border: 1px solid var(--line); border-radius: 6px; }
.mimic-dialog footer { padding: .5rem 1rem; border-top: 1px solid var(--line); font-size: .8rem; min-height: 2rem; }
.mini-btn { font-size: .78rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink); cursor: pointer; box-shadow: none; }
/* Zonder eigen hover wint de gevulde basisknop-hover → donkerblauw vlak met
   donkere tekst (onleesbaar). Daarom expliciet per variant: */
.mini-btn:hover { background: var(--stone); border-color: var(--mist); color: var(--ink); box-shadow: none; }
.mini-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.mini-btn.primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.mini-btn.del { border: none; background: transparent; color: var(--alarm-ink); padding: .1rem .3rem; }
.mini-btn.del:hover { background: rgba(255,42,26,.10); color: var(--alarm-ink); }
.mini-btn.danger { color: var(--alarm-ink); border-color: color-mix(in srgb, var(--alarm) 40%, var(--line)); }
.mini-btn.danger:hover { background: rgba(255,42,26,.10); border-color: var(--alarm); color: var(--alarm-ink); }
@media (max-width: 720px) { .mimic-editor { grid-template-columns: 1fr; } .mimic-side { border-left: none; border-top: 1px solid var(--line); } }

/* Vergroten (schermvullend) ------------------------------------------------- */
.mimic-zoombox { background: var(--white); border-radius: var(--r-card); padding: .6rem;
  width: min(96vw, 1500px); max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mimic-zoombar { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem .6rem; }
.mimic-zoombar .grow { flex: 1; }
.mimic-zoomstage { overflow: auto; }
.mimic-zoomstage .mimic-stage { border: none; }
.mimic-zoomstage .mimic-stage img { width: 100%; height: auto; }

/* =============================================================================
   Lus-elementenlijst (ConfiGMC-stijl) + Encoder-dialoog
   ============================================================================= */
.enc-table.lup td, .enc-table.lup th { white-space: nowrap; }
.enc-table.lup td.ell { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.enc-table.lup .enc-text { font-weight: 500; }
.enc-table.lup .c-led { width: 22px; text-align: center; padding-left: .7rem; padding-right: .3rem; }
.enc-table.lup .c-chk { text-align: center; }
.enc-table.lup .c-ord { text-align: center; color: var(--mist); }
.enc-row { cursor: pointer; }
.enc-row:hover { background: var(--tint); }
.enc-row.sel, .enc-row.sel:hover { background: #d6e6ff; }
.enc-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.enc-led { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--c, #248a3d);
  border: 1px solid rgba(0,0,0,.35); vertical-align: middle; }

/* Encoder-dialoog — bewust nagebouwd naar de leverancier-software (klassiek grijs venster) */
.enc-modal { z-index: 1100; }
.enc-dlg { background: #f0f0f0; color: #111; border-radius: 6px; width: min(780px, 96vw);
  font-family: 'Segoe UI', -apple-system, system-ui, sans-serif; font-size: .82rem; letter-spacing: 0;
  box-shadow: 0 24px 64px rgba(0,0,0,.45); overflow: hidden; }
.enc-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .35rem .5rem .8rem;
  background: linear-gradient(#fbfbfb, #e9e9e9); border-bottom: 1px solid #cfcfcf; }
.enc-bar b { flex: 1; font-weight: 600; font-size: .86rem; color: #1d1d1f; }
.enc-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.1rem; padding: 1rem 1.1rem; }
@media (max-width: 640px) { .enc-body { grid-template-columns: 1fr; } }
.enc-col { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.enc-f { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: .5rem; margin: 0; }
.enc-f > span { color: #333; font-size: .8rem; }
.enc-f input, .enc-f textarea { border: 1px solid #b6b6b6; background: #fff; border-radius: 2px;
  padding: .3rem .45rem; font: inherit; color: #111; width: 100%; box-sizing: border-box; resize: none; }
.enc-f input:focus, .enc-f textarea:focus { outline: none; }
.enc-inline { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.enc-encnr { grid-template-columns: auto 66px; }
.enc-chk { display: flex; align-items: center; gap: .4rem; color: #111; font-size: .82rem; margin: 0; }
.enc-comment { grid-template-columns: 96px 1fr; align-items: start; }
.enc-fsrow { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .1rem; }
@media (max-width: 640px) { .enc-fsrow { grid-template-columns: 1fr; } }
.enc-fs { border: 1px solid #c4c4c4; border-radius: 3px; margin: 0; padding: .1rem .55rem .5rem; }
.enc-fs legend { font-size: .72rem; color: #444; padding: 0 .3rem; }
.enc-fs-body { min-height: 2.6rem; font-size: .8rem; color: #222; }
.enc-out { color: #555; padding: .05rem 0; }
.enc-note { font-size: .76rem; margin: -.15rem 0 .1rem; }
.enc-status .enc-fs-body { display: flex; align-items: center; gap: .45rem; min-height: 1.4rem; }
.enc-foot { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem;
  background: #e9e9e9; border-top: 1px solid #cfcfcf; }
.enc-nav { display: flex; gap: .3rem; }
.enc-pos { font-size: .76rem; }
.enc-dlg .grow { flex: 1; }
.enc-dlg button { background: linear-gradient(#fdfdfd, #e4e4e4); border: 1px solid #adadad; color: #111;
  border-radius: 3px; padding: .32rem .95rem; font: inherit; font-size: .82rem; font-weight: 400;
  cursor: pointer; min-width: 34px; transition: background .12s, border-color .12s; }
.enc-dlg button:hover:not(:disabled) { background: linear-gradient(#fff, #e8f0fb); border-color: #7eb4ea; }
.enc-dlg button:active:not(:disabled) { background: #d6e6ff; }
.enc-dlg button:disabled { color: #9a9a9a; background: #f0f0f0; cursor: default; }
.enc-dlg .enc-ok { min-width: 72px; }
.enc-dlg .enc-x { border: none; background: transparent; font-size: .9rem; min-width: auto; padding: .1rem .4rem; color: #555; }
.enc-dlg .enc-x:hover { background: #ff3b30; color: #fff; }
.enc-dlg .enc-prev, .enc-dlg .enc-next { min-width: 30px; font-weight: 700; }

/* =============================================================================
   BMI-prestatie (systeembeschikbaarheid + prestatie-eis) + logboek
   ============================================================================= */
.bmi-block { }
.bmi-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.bmi-head h2 { margin: 0; }
.bmi-head .muted { font-size: .78rem; font-weight: 500; }
.bmi-head button { margin-left: auto; }
.bmi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 720px) { .bmi-grid { grid-template-columns: 1fr; } }
.bmi-grid h3 { margin: 0 0 .4rem; font-size: .82rem; color: var(--slate); }

/* Systeembeschikbaarheid-hero */
.sb-hero { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  border-radius: var(--r-card); padding: 1rem 1.2rem; margin: .2rem 0 .6rem; border: 1px solid var(--line); }
.sb-hero.ok { background: rgba(36,138,61,.08); border-color: rgba(36,138,61,.35); }
.sb-hero.nok { background: rgba(255,59,48,.08); border-color: rgba(255,59,48,.4); }
.sb-pct { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sb-hero.ok .sb-pct { color: var(--ok); } .sb-hero.nok .sb-pct { color: var(--alarm-ink); }
.sb-eis { font-size: .9rem; font-weight: 600; } .sb-hero.ok .sb-eis { color: var(--ok); } .sb-hero.nok .sb-eis { color: var(--alarm-ink); }
.sb-formule { font-size: .78rem; margin: 0 0 .8rem; font-variant-numeric: tabular-nums; }
.num.sb-over { color: var(--alarm-ink); font-weight: 700; }

/* Logboek (leverancier-stijl) */
.lb-wrap { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.lb-table { width: 100%; border-collapse: collapse; font-size: .8rem;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; }
.lb-table thead th { position: sticky; top: 0; z-index: 1; background: #ececef; color: var(--ink);
  text-align: left; font-weight: 600; padding: .4rem .6rem; border-bottom: 1px solid var(--line); font-family: -apple-system, system-ui, sans-serif; }
.lb-table td { padding: .3rem .6rem; border-bottom: 1px solid #edeef0; vertical-align: top; white-space: nowrap; }
.lb-table td.lb-text { white-space: normal; }
.lb-table .lb-mark { width: 18px; padding: .3rem 0 .3rem .5rem; }
.lb-sq { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid rgba(0,0,0,.28);
  vertical-align: middle; box-shadow: inset 0 1px 1px rgba(255,255,255,.35); }
.lb-time { color: var(--slate); }
.lb-event { font-weight: 600; }
.lb-ref { color: var(--brand-ink); }
.lb-table tr.lb-alarm { background: #ffe1de; } .lb-table tr.lb-alarm .lb-event { color: #c00; }
.lb-table tr.lb-fault { background: #fff4d6; } .lb-table tr.lb-fault .lb-event { color: #9a6a00; }
.lb-table tr.lb-warn  { background: #fdecdc; } .lb-table tr.lb-warn .lb-event { color: var(--orange-ink); }
.lb-table tr.lb-ok    { background: #e3f5e6; } .lb-table tr.lb-ok .lb-event { color: var(--ok); }
/* Classificatie-knoppen in de logboekregel */
.lb-cls { display: inline-flex; gap: .3rem; margin-left: .6rem; vertical-align: middle; }
.lb-cbtn { font-size: .68rem; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(255,255,255,.7); color: var(--slate); cursor: pointer; font-family: -apple-system, system-ui, sans-serif; }
.lb-cbtn:hover { border-color: var(--mist); }
.lb-cbtn.on.echt { background: var(--ok); border-color: var(--ok); color: #fff; }
.lb-cbtn.on.ongewenst { background: var(--orange); border-color: var(--orange); color: #fff; }
.lb-cbtn.on.onecht { background: var(--alarm); border-color: var(--alarm); color: #fff; }

/* BMI-editors (modaal) */
.bmi-modal { z-index: 1100; }
.bmi-dialog { background: var(--white); border-radius: var(--r-card); width: min(760px, 96vw);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.bmi-dialog header, .bmi-dialog footer { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; }
.bmi-dialog header { border-bottom: 1px solid var(--line); } .bmi-dialog footer { border-top: 1px solid var(--line); }
.bmi-dialog header .grow, .bmi-dialog footer .grow { flex: 1; }
.bmi-editor { padding: 1rem; overflow: auto; display: flex; flex-direction: column; gap: .8rem; }
.bmi-f { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--slate); }
.bmi-f input, .bmi-f textarea, .bmi-f select, .bmi-editor select, .bmi-editor input { border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .45rem .55rem; font: inherit; font-size: .88rem; color: var(--ink); background: var(--white); }
.bmi-row { display: flex; gap: 1rem; } .bmi-row .bmi-f { flex: 1; }
.bmi-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink); }
.bmi-editor .traffic-table td { padding: .35rem .4rem; }
.bmi-editor .traffic-table select, .bmi-editor .traffic-table input { padding: .3rem .4rem; width: 100%; }

/* --- Beheer-scherm (organisaties / gebruikers / koppeling) ---------------- */
.beheer { max-width: 860px; margin: 0 auto; padding: 1rem 0 3rem; }
.beheer-title { font-size: 1.5rem; margin: .2rem 0 1rem; }
.beheer-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.beheer-card h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.beheer-form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; align-items: end; margin: .8rem 0 .3rem; }
.beheer-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--muted); }
.beheer-form input, .beheer-form select { padding: .5rem .55rem; border: 1px solid var(--line);
  border-radius: 9px; background: var(--white); font: inherit; color: var(--ink); }
.beheer-form button { grid-column: 1 / -1; justify-self: start; padding: .55rem 1.1rem;
  background: var(--brand); color: #fff; border: 0; border-radius: 9px; font-weight: 600; cursor: pointer; }
.beheer-form button:hover { background: var(--brand-ink); }
.beheer-msg { grid-column: 1 / -1; margin: 0; font-size: .85rem; min-height: 1em; }
.beheer-msg.ok { color: var(--ok); }
.beheer-msg.err { color: var(--alarm-ink); }
.beheer-table-wrap { overflow-x: auto; margin-top: .6rem; }
.beheer-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.beheer-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.beheer-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.beheer-table select { padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); font: inherit; }
@media (max-width: 620px) { .beheer-form { grid-template-columns: 1fr; } }

/* --- Beheer: wizard "Nieuwe klant" --------------------------------------- */
.beheer-wizard { border-color: var(--brand); }
.beheer-wizard h2 { color: var(--brand-ink); }
.wiz-locs { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .8rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.wiz-locs legend { font-size: .78rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; padding: 0 .3rem; }
.wiz-loccheck { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink);
  flex-direction: row; }
.wiz-loccheck input { width: auto; }

/* --- Ingelogde gebruiker + organisatie in de topbar ---------------------- */
.whoami { display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  line-height: 1.15; margin-right: .6rem; text-align: right; }
.whoami-name { font-weight: 600; font-size: .86rem; color: var(--ink); }
.whoami-org { font-size: .74rem; color: var(--muted); }
@media (max-width: 640px) { .whoami { display: none; } }

/* =============================================================================
   Toegankelijkheid, aanraakbediening en printen
   ============================================================================= */

/* Bewegingsgevoeligheid (WCAG 2.2.2): knipperende meldingen zijn niet uit te
   zetten, dus respecteren we de systeeminstelling. De status blijft maximaal
   onderscheidend — alleen statisch in plaats van pulserend. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .stat.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); }
  .badge.alarm { background: var(--alarm); color: #fff; }
  .statusbalk .seg.on-al { background: var(--alarm); color: #fff; box-shadow: inset 0 0 0 2px #7a0d06; }
  .pill.alarm { background: var(--alarm); color: #fff; }
  .mimic-led.on.blink .core { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent); }
}

/* Aanraakbediening: Apple/WCAG houden 44px aan als minimum raakvlak.
   Alleen op touch-apparaten, zodat de desktop compact blijft. */
@media (pointer: coarse) {
  .nav a, .tabbar .tab, .mini-btn, button.mini, .lb-cbtn, .act, .range-btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .tabbar .tab, .mini-btn, button.mini { padding-left: 1rem; padding-right: 1rem; }
}

/* Brede tabellen: horizontaal scrollen met een zichtbare schaduw-hint */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, var(--white) 30%, rgba(255,255,255,0)) left/28px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), var(--white) 70%) right/28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent) left/12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right/12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll; }
.traffic-table tbody tr:nth-child(even), .beheer-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--stone) 55%, transparent); }
.traffic-table tbody tr:hover, .beheer-table tbody tr:hover { background: var(--tint); }

/* Vriendelijke lege staat: "alles in orde" moet als geruststelling lezen,
   niet als "er is niets geladen". */
.empty-ok { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem;
  background: rgba(36,138,61,.06); border: 1px solid rgba(36,138,61,.28); border-radius: var(--r-sm); }
.empty-ok b { display: block; font-size: .95rem; color: var(--ink); }
.empty-ok span { font-size: .84rem; color: var(--slate); }

/* Printen — klanten nemen de detailpagina mee in het BMI-logboek */
@media print {
  @page { margin: 14mm; }
  .topbar, .nav, .statusbar, .tabbar, .ov-filters, #back-btn, .modal,
  .act, .mini, .mini-btn, .mimic-foot, .bmi-head button { display: none !important; }
  #detail-view, #analyse-view, #beheer-view { padding: 0; }
  .tab-panel, .tab-panel.hidden { display: block !important; break-inside: avoid; }
  .panel, .alrow, .loc-kpi, .sb-hero { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .lcd-frame { background: #fff; border: 1px solid #333; box-shadow: none; }
  .lcd { background: #fff; color: #000; text-shadow: none; border: 0; }
  .lb-wrap, .enc-table, .feed-list { max-height: none; overflow: visible; }
  details > *:not(summary) { display: block !important; }
  *, *::before, *::after { animation: none !important; }
}