/* P2000 Meldingsmonitor — ServiDesk */
:root {
  --bg: #07101a;
  --bg2: #0c1826;
  --kaart: #111f30;
  --kaart2: #162840;
  --rand: #22364f;
  --tekst: #e6eef7;
  --zacht: #8fa4bb;
  --accent: #19c39a;
  --accent2: #12a6b8;
  --rood: #e5323b;
  --oranje: #ff9f1a;
  --blauw: #33b6ff;
  --r: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.45 var(--font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------------- navigatie ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: 58px; display: flex; align-items: center; gap: 16px;
  padding: 0 16px calc(0px) 16px; padding-top: env(safe-area-inset-top);
  background: rgba(7, 16, 26, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: transform .35s ease, opacity .35s ease;
}
body.nav-weg .nav { transform: translateY(-100%); opacity: 0; }
.nav-merk { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nav-merk b { color: #fff; letter-spacing: .02em; }
.nav-merk small { display: block; font-size: 11px; color: var(--zacht); line-height: 1; margin-top: 2px; letter-spacing: .08em; text-transform: uppercase; }
.nav-logo, .start-logo { display: grid; grid-template-columns: repeat(3, 7px); gap: 3px; }
.nav-logo i, .start-logo i { width: 7px; height: 7px; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 6px #ff2a1a; }
.nav-logo i:nth-child(n+4), .start-logo i:nth-child(n+4) { background: var(--blauw); box-shadow: 0 0 6px var(--blauw); }
.nav-tabs { display: flex; gap: 4px; margin: 0 auto; background: rgba(255,255,255,.04); padding: 4px; border-radius: 12px; }
.nav-tabs button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; color: var(--zacht); font-weight: 600; font-size: 14px; }
.nav-tabs button span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; background: rgba(255,255,255,.07); margin-right: 4px; }
.nav-tabs button.actief { background: var(--kaart2); color: #fff; box-shadow: inset 0 0 0 1px var(--rand); }
.nav-rechts { display: flex; align-items: center; gap: 10px; }
.nav-ico { border: 1px solid var(--rand); background: var(--kaart); width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
.nav-stil { border: 0; background: var(--rood); color: #fff; padding: 7px 12px; border-radius: 10px; font-weight: 700; animation: puls 1s infinite; }
.bron-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--zacht); }
.bron-status i { width: 9px; height: 9px; border-radius: 50%; background: #666; }
.bron-status.ok i { background: #2fd17a; box-shadow: 0 0 8px #2fd17a; }
.bron-status.demo i { background: var(--oranje); box-shadow: 0 0 8px var(--oranje); }
.bron-status.fout i { background: var(--rood); box-shadow: 0 0 8px var(--rood); }
.bron-status em { font-style: normal; }
@keyframes puls { 50% { opacity: .65; } }

/* ---------------- schermen ---------------- */
main { position: fixed; inset: 0; }
.scherm { position: absolute; inset: 0; display: none; }
body.scherm-lichtkrant #scr-lichtkrant,
body.scherm-pager #scr-pager,
body.scherm-instellingen #scr-instellingen { display: flex; }

/* ---------------- lichtkrant ---------------- */
#scr-lichtkrant {
  flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, #1554b8 0%, #0a2c6a 38%, #061633 70%, #030812 100%);
  padding: 76px 4vw 30px;
}
.lk-podium { position: relative; width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lk-kast {
  position: relative; z-index: 2;
  width: 100%; max-height: 100%; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.lk-paneel { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lk-scherm {
  position: relative; flex: none;
  outline: 10px solid #121316; outline-offset: 0;
  box-shadow:
    0 0 0 11px #2b2e34, 0 0 0 12px #08090b,
    0 2px 0 12px #3a3e45,
    0 40px 60px 6px rgba(0,0,0,.65),
    0 0 140px 30px rgba(50,130,255,.22);
  border-radius: 1px;
}
.lk-scherm canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.lk-scherm .lk-bg { background: #060708; }
.lk-schroef { display: none; }
.lk-tafel {
  position: absolute; left: -4vw; right: -4vw; bottom: -30px; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,20,0) 0%, rgba(8,12,20,.55) 40%, rgba(5,8,14,.9) 100%);
}
.lk-onder { position: relative; z-index: 3; height: 24px; margin-top: 10px; font-size: 13px; color: rgba(230,238,247,.5); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: opacity .3s; }
body.nav-weg .lk-onder { opacity: 0; }

/* ---------------- pager podium ---------------- */
#scr-pager {
  flex-direction: column; align-items: center; justify-content: center; padding: 64px 12px 14px;
  background: radial-gradient(ellipse at 50% 40%, #1b2737 0%, #0b121c 60%, #05080d 100%);
}
.pager-podium { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
#pager { transform-origin: center center; }
.pager-hulp { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--zacht); padding-top: 6px; }
.pager-hulp kbd { display: inline-block; min-width: 20px; padding: 1px 5px; margin-right: 2px; border-radius: 4px; background: var(--kaart2); border: 1px solid var(--rand); font: 11px var(--font); text-align: center; }
body.nav-weg .pager-hulp { opacity: 0; }

/* ---------------- pager apparaat ---------------- */
.pg { position: relative; width: 320px; height: 520px; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
.pg-antenne {
  position: absolute; left: 32px; top: -30px; width: 24px; height: 50px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(90deg, #08090a 0%, #2f3237 35%, #3c4046 50%, #17181b 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.12), inset 0 -4px 6px rgba(0,0,0,.6);
}
.pg-antenne::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 22px; background: repeating-linear-gradient(180deg, rgba(0,0,0,.45) 0 2px, transparent 2px 5px); border-radius: 3px; }
.pg-body {
  position: absolute; inset: 0; border-radius: 48px 48px 52px 52px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 60% at 30% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #2b2e33 0%, #1a1c20 45%, #111215 100%);
  box-shadow:
    inset 0 0 0 1.5px #44484f, inset 0 0 0 5px #17181b, inset 0 0 0 6px #2e3137,
    inset 0 -10px 18px rgba(0,0,0,.7), inset 0 6px 12px rgba(255,255,255,.07);
}
.pg-body::before, .pg-body::after {
  content: ""; position: absolute; top: 112px; width: 7px; height: 150px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, #08090a 0 7px, #34373d 7px 10px);
  box-shadow: 0 0 0 1px #08090a;
}
.pg-body::before { left: -4px; } .pg-body::after { right: -4px; }
.pg-led { position: absolute; left: 36px; top: 16px; width: 22px; height: 8px; border-radius: 4px; background: #16301c; box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08); }
.pg-led.nieuw { background: #3ad15a; box-shadow: 0 0 12px #3ad15a, inset 0 1px 1px rgba(255,255,255,.5); animation: led 1.6s infinite; }
.pg-led.alarm { background: #ff2a2a; box-shadow: 0 0 16px #ff2a2a, inset 0 1px 1px rgba(255,255,255,.5); animation: led .35s infinite; }
@keyframes led { 50% { opacity: .25; } }
.pg-glas {
  position: absolute; left: 20px; right: 20px; top: 32px; height: 296px; border-radius: 18px 18px 16px 16px;
  background: linear-gradient(180deg, #0b0b0d, #040405); padding: 13px 12px 13px;
  box-shadow: inset 0 0 0 1.5px #000, inset 0 0 0 3px #1f2125, inset 0 3px 10px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.09);
}
.pg-glas::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 27%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%);
}
.pg-scherm {
  --pg-bg: #1d56c9;
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.06)), var(--pg-bg);
  display: flex; flex-direction: column;
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  transition: background-color .25s;
}
.pg-scherm.flits { animation: flits .9s 2; }
@keyframes flits { 0%,100% { filter: none; } 50% { filter: brightness(1.6) saturate(1.15); } }
.pg-status {
  flex: none; height: 23px; display: flex; align-items: center; gap: 6px; padding: 0 6px;
  background: linear-gradient(#fbfcfd, #d5dbe2); color: #17222e; font: 700 13px/1 Arial, sans-serif;
  border-bottom: 1px solid #9aa6b3;
}
.pg-ico { height: 12px; width: auto; fill: currentColor; color: #2b3a4b; }
.pg-accu { height: 16px; color: #2b3a4b; }
.pg-sl { display: flex; gap: 5px; align-items: center; }
.pg-datum { margin-left: auto; letter-spacing: .02em; }
.pg-tijd { margin-left: 7px; letter-spacing: .02em; }
.pg-sr { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.pg-sr small { font-size: 9px; color: #23893a; font-weight: 800; }
.pg-inhoud { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 7px 9px; }
.pg-inhoud::-webkit-scrollbar { display: none; }
.pg-kop { font-weight: 700; font-size: 15px; line-height: 1.2; display: flex; justify-content: space-between; gap: 6px; }
.pg-test { font-style: normal; background: #fff; color: #111; font-size: 10px; padding: 1px 4px; border-radius: 2px; margin-right: 5px; vertical-align: 2px; }
.pg-nr { font-size: 11px; opacity: .75; font-weight: 400; flex: none; }
.pg-meta { font-size: 12px; opacity: .8; margin: 1px 0 4px; }
.pg-tekst { font-size: 18px; font-weight: 700; line-height: 1.2; word-break: break-word; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.pg-caps { font-size: 15px; font-weight: 700; margin-top: 5px; letter-spacing: .01em; }
.pg-reactie { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 3px; background: rgba(0,0,0,.28); font-size: 13px; font-weight: 700; }
.pg-inhoud.rust { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.pg-rust-tijd { font: 700 56px/1 Arial, sans-serif; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pg-rust-sub { font-weight: 700; font-size: 16px; text-transform: capitalize; }
.pg-rust-info { font-size: 13px; opacity: .85; margin-top: 6px; }
.pg-inhoud.lijst { padding: 0; }
.pg-rij { display: grid; grid-template-columns: 42px 1fr; gap: 6px; padding: 5px 8px; font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.2); cursor: pointer; }
.pg-rij span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-rij.ong { font-weight: 700; }
.pg-rij.al span:first-child::before { content: "●"; color: #ff4b4b; margin-right: 2px; font-size: 9px; vertical-align: 2px; }
.pg-rij.sel { background: #fff; color: #10233d; }
.pg-soft {
  flex: none; height: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: linear-gradient(#46505d, #1b2129); border-top: 1px solid rgba(255,255,255,.28);
}
.sk { border: 0; background: transparent; color: #fff; font: 700 14px/1 Arial, sans-serif; padding: 0 4px; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.sk + .sk { border-left: 1px solid rgba(255,255,255,.25); }
.sk.rood { background: linear-gradient(#f0353b, #c5161c); } .sk.groen { background: linear-gradient(#3fc95c, #1f9a3a); }
.sk:empty { cursor: default; }
.pg-toast { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.9); background: rgba(0,0,0,.85); color: #fff; padding: 8px 14px; border-radius: 6px; font: 700 16px Arial, sans-serif; opacity: 0; pointer-events: none; transition: .2s; }
.pg-toast.aan { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pg-logo { position: absolute; right: 30px; top: 338px; font: 800 italic 18px/1 Arial, sans-serif; color: #e2e5ea; letter-spacing: -.02em; text-shadow: 0 1px 0 #000; }
.pg-logo::after { content: ""; display: inline-block; width: 26px; height: 12px; margin-left: 4px; vertical-align: -1px; border: 2px solid #e2e5ea; border-radius: 8px; }
.pg-knoppen { position: absolute; left: 24px; right: 24px; top: 366px; height: 96px; display: flex; align-items: center; justify-content: space-between; }
.pg-knop {
  width: 70px; height: 56px; border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #33363c, #17181b 70%);
  box-shadow: inset 0 0 0 1.5px #474b52, inset 0 3px 3px rgba(255,255,255,.08), inset 0 -4px 6px rgba(0,0,0,.5), 0 3px 0 #08090a, 0 6px 10px rgba(0,0,0,.55);
  display: grid; place-items: center;
}
.pg-knop:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px #474b52, 0 1px 0 #08090a; }
.pg-ovaal i { width: 24px; height: 10px; border-radius: 6px; background: #060607; box-shadow: inset 0 1px 2px rgba(255,255,255,.14); }
.pg-power i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #d6dae0; border-top-color: transparent; position: relative; }
.pg-power i::after { content: ""; position: absolute; left: 50%; top: -6px; width: 2.5px; height: 12px; margin-left: -1.25px; background: #d6dae0; border-radius: 2px; }
.pg-joy {
  position: relative; width: 98px; height: 98px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #34373d, #141518 72%);
  box-shadow: inset 0 0 0 1.5px #474b52, inset 0 0 0 6px #1a1b1e, inset 0 0 0 7px #2c2f34, 0 3px 0 #08090a, 0 6px 12px rgba(0,0,0,.6);
}
.pg-joy button { position: absolute; border: 0; background: transparent; }
.j-up { left: 25%; right: 25%; top: 0; height: 28%; } .j-down { left: 25%; right: 25%; bottom: 0; height: 28%; }
.j-left { top: 25%; bottom: 25%; left: 0; width: 28%; } .j-right { top: 25%; bottom: 25%; right: 0; width: 28%; }
.j-mid { left: 31%; top: 31%; width: 38%; height: 38%; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.j-mid span { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 42% 32%, #4a4e56, #121316 72%); box-shadow: 0 4px 6px rgba(0,0,0,.75), inset 0 1px 1px rgba(255,255,255,.2); }
.j-mid:active span { transform: scale(.93); }
.j-pijl { position: absolute; width: 0; height: 0; border: 5px solid transparent; pointer-events: none; }
.j-pu { left: 50%; top: 9px; margin-left: -5px; border-bottom-color: #9ba1aa; }
.j-pd { left: 50%; bottom: 9px; margin-left: -5px; border-top-color: #9ba1aa; }
.j-pl { top: 50%; left: 9px; margin-top: -5px; border-right-color: #9ba1aa; }
.j-pr { top: 50%; right: 9px; margin-top: -5px; border-left-color: #9ba1aa; }
.pg-label { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 5px 16px; border-radius: 6px; background: linear-gradient(#141518, #0a0a0c); box-shadow: inset 0 0 0 1px #34373d, 0 1px 0 rgba(255,255,255,.06); color: #d4d8de; font: 600 12px/1 Arial, sans-serif; letter-spacing: .05em; white-space: nowrap; }
.pg-label b { color: var(--blauw); }

/* ---------------- instellingen ---------------- */
#scr-instellingen { overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, #0b1724, #07101a 300px); }
.inst { width: 100%; max-width: 760px; margin: 0 auto; padding: 78px 16px 60px; }
.inst-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.inst-kop small { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.inst-kop h1 { margin: 2px 0 0; font-size: 26px; }
.pil { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 99px; background: var(--kaart); border: 1px solid var(--rand); color: var(--zacht); white-space: nowrap; }
.pil i { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.pil.ok i { background: #2fd17a; } .pil.demo i { background: var(--oranje); } .pil.fout i { background: var(--rood); }
.kaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.slot-oud { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.slot-tekst { display: flex; flex-direction: column; } .slot-tekst span { color: var(--zacht); font-size: 13px; }
.slot-form { display: flex; gap: 8px; }
.slot-form input { width: 130px; }
.melding-waarschuwing { background: #3a2a0c; border-color: #6b4b12; color: #ffd99a; font-size: 14px; }
.laatste small { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.laatste div { font-weight: 600; margin-top: 3px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset:disabled .sectie-in { opacity: .6; }
.sectie { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.sectie summary { list-style: none; cursor: pointer; padding: 15px 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.sectie summary::-webkit-details-marker { display: none; }
.sectie summary em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--zacht); margin-left: auto; text-align: right; }
.sectie summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; font-weight: 400; }
.sectie[open] summary::after { content: "–"; }
.sectie summary:not(:has(em))::after { margin-left: auto; }
.sectie-in { padding: 2px 16px 16px; border-top: 1px solid rgba(255,255,255,.05); }
.hint { color: var(--zacht); font-size: 13px; margin: 10px 0; }
.veld { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; min-width: 0; }
.veld > label { font-size: 13px; color: var(--zacht); font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.veld > label small { font-weight: 400; }
.veld output { color: var(--tekst); margin-left: auto; font-weight: 700; }
input[type=text], input[type=url], input[type=password], input[type=time], input[type=number], select {
  width: 100%; background: var(--bg2); border: 1px solid var(--rand); color: var(--tekst); border-radius: 10px; padding: 9px 11px; font: inherit; min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--accent2); outline-offset: 0; border-color: transparent; }
input[type=color] { width: 100%; height: 40px; border: 1px solid var(--rand); border-radius: 10px; background: var(--bg2); padding: 3px; cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; align-items: end; }
.raster5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 10px; }
.raster3 > input, .raster3 > .knop { margin: 10px 0; }
.sub-kop { font-weight: 700; font-size: 13px; margin: 16px 0 4px; color: var(--zacht); text-transform: uppercase; letter-spacing: .08em; }
.knop { border: 1px solid var(--rand); background: var(--kaart2); color: var(--tekst); border-radius: 10px; padding: 9px 14px; font-weight: 600; white-space: nowrap; }
.knop:hover:not(:disabled) { border-color: var(--accent2); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop.prim { background: linear-gradient(90deg, var(--accent), var(--accent2)); border: 0; color: #fff; }
.knop.rood { background: #4a1418; border-color: #7a2229; color: #ffc9cc; }
.knop.klein { padding: 6px 10px; font-size: 13px; }
.knop.groot { width: 100%; padding: 14px; font-size: 16px; border-radius: 12px; }
.knop.link { background: transparent; border: 0; color: var(--zacht); text-decoration: underline; }
.rij-knoppen { display: flex; gap: 8px; margin-bottom: 10px; }
.regio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.regio { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--rand); font-size: 13px; cursor: pointer; }
.regio:has(input:checked) { border-color: var(--accent); background: rgba(25,195,154,.1); }
.regio b { color: var(--zacht); font-size: 11px; width: 18px; }
.regio input, .disc input { accent-color: var(--accent); }
.disc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.disc { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--rand); border-left: 4px solid var(--k); cursor: pointer; font-weight: 600; }
.disc:has(input:not(:checked)) { opacity: .5; }
.seg { display: flex; flex-direction: column; gap: 6px; }
.seg label { display: flex; gap: 9px; align-items: center; padding: 9px 11px; background: var(--bg2); border: 1px solid var(--rand); border-radius: 10px; cursor: pointer; font-size: 14px; }
.seg label:has(input:checked) { border-color: var(--accent); }
.seg input { accent-color: var(--accent); }
.schakel { display: flex; align-items: center; gap: 10px; margin: 10px 0; cursor: pointer; font-size: 14px; }
.schakel input { position: absolute; opacity: 0; pointer-events: none; }
.schakel span { flex: none; width: 40px; height: 23px; border-radius: 99px; background: #2a3a4e; position: relative; transition: .2s; }
.schakel span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: .2s; }
.schakel input:checked + span { background: var(--accent); }
.schakel input:checked + span::after { left: 20px; }
.schakel input:focus-visible + span { outline: 2px solid var(--accent2); }
.met-test { display: flex; gap: 6px; }
.caps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cap { display: grid; grid-template-columns: 110px 1fr 46px 150px auto auto; gap: 6px; align-items: center; background: var(--bg2); border: 1px solid var(--rand); border-radius: 11px; padding: 8px; }
.cap input[type=color] { height: 36px; }
.cap select { padding: 8px 6px; font-size: 13px; }
.cap .alarm-tgl { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--zacht); }
.cap .alarm-tgl input { accent-color: var(--rood); width: 16px; height: 16px; }
.cap .weg { background: transparent; border: 0; color: var(--zacht); font-size: 18px; padding: 4px 6px; }
.cap .weg:hover { color: var(--rood); }
.cap-leeg { color: var(--zacht); font-size: 13px; padding: 8px 0; }
.pager-voorbeeld { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.pv { padding: 10px 12px; border-radius: 6px; font: 700 15px Arial, sans-serif; }
.upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.upload input { font-size: 13px; color: var(--zacht); }
.diag { font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; background: var(--bg2); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; margin: 10px 0; white-space: pre-wrap; color: var(--zacht); }
.acties { position: sticky; bottom: 0; padding: 14px 0 10px; background: linear-gradient(180deg, rgba(7,16,26,0), var(--bg) 30%); }
.acties-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.opslaan-status { text-align: center; font-size: 13px; color: var(--zacht); min-height: 20px; margin-top: 6px; }
.opslaan-status.ok { color: var(--accent); } .opslaan-status.fout { color: #ff7b82; }

/* ---------------- start ---------------- */
.start { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(4, 9, 16, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 20px; }
.start.weg { display: none; }
.start-kaart { max-width: 360px; text-align: center; background: var(--kaart); border: 1px solid var(--rand); border-radius: 20px; padding: 28px 24px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.start-logo { justify-content: center; margin: 0 auto 14px; width: max-content; }
.start-logo { grid-template-columns: repeat(3, 12px); gap: 6px; }
.start-logo i { width: 12px; height: 12px; }
.start h2 { margin: 0 0 6px; }
.start p { color: var(--zacht); margin: 0 0 18px; font-size: 14px; }

@media (max-width: 760px) {
  .nav { gap: 8px; padding: 0 8px; }
  .nav-merk div { display: none; }
  .nav-tabs button { padding: 7px 9px; font-size: 13px; }
  .nav-tabs button span { display: none; }
  .bron-status em { display: none; }
  .raster3, .raster2 { grid-template-columns: 1fr; }
  .raster5 { grid-template-columns: repeat(3, 1fr); }
  .cap { grid-template-columns: 1fr 1fr; }
  .cap .alarm-tgl { justify-content: flex-start; }
  #scr-lichtkrant { padding: 64px 8px 20px; }
}
@media (hover: none) { .pager-hulp { display: none; } }

/* ---------------- v2: instellingen ---------------- */
.inst { max-width: 720px; }
.inst-kop h1 { font-size: 28px; letter-spacing: -.01em; }
.kaart, .sectie { background: linear-gradient(180deg, #13243a, #0f1d2f); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.25); }
.sectie summary { padding: 16px 18px; font-size: 15px; }
.s-ico { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); font-size: 15px; flex: none; }
.laatste { border-left: 3px solid #ff2a1a; }
.test { border-color: #1f5a4d; background: linear-gradient(180deg, #11302c, #0e2226); }
.test-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.test-kop .hint { margin: 0; }
.test-doel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 2px; }
.test-doel label { cursor: pointer; }
.test-doel input { position: absolute; opacity: 0; }
.test-doel span { display: block; text-align: center; padding: 11px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--rand); font-weight: 700; }
.test-doel input:checked + span { border-color: var(--accent); background: rgba(25,195,154,.14); color: #fff; }
.test-doel input:focus-visible + span { outline: 2px solid var(--accent2); }
textarea { width: 100%; background: var(--bg2); border: 1px solid var(--rand); color: var(--tekst); border-radius: 10px; padding: 9px 11px; font: inherit; resize: vertical; }
textarea:focus { outline: 2px solid var(--accent2); border-color: transparent; }
.hint-inline { color: var(--zacht); font-size: 12px; }
.cap { grid-template-columns: 110px 1fr 46px auto auto; row-gap: 8px; }
.cap-geluid { grid-column: span 5; display: grid; grid-template-columns: 96px 1fr auto; gap: 6px; align-items: center; }
.cap-geluid span { font-size: 12px; color: var(--zacht); font-weight: 600; }
.cap-geluid + .cap-geluid { margin-top: -2px; }
.disc span { font-size: 15px; }

/* ---------------- v2: login ---------------- */
.login-body { overflow: auto; background: radial-gradient(ellipse 80% 60% at 50% 30%, #123a6e 0%, #081a33 50%, #040a14 100%); }
.login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.login-kaart { width: 100%; max-width: 340px; text-align: center; background: linear-gradient(180deg, rgba(19,36,58,.92), rgba(12,24,40,.92)); border: 1px solid var(--rand); border-radius: 26px; padding: 30px 26px 22px; box-shadow: 0 40px 90px rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.login-logo { display: grid; grid-template-columns: repeat(3, 12px); gap: 6px; width: max-content; margin: 0 auto 14px; }
.login-logo i { width: 12px; height: 12px; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 10px #ff2a1a; }
.login-logo i:nth-child(n+4) { background: var(--blauw); box-shadow: 0 0 10px var(--blauw); }
.login-kaart small { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.login-kaart h1 { font-size: 21px; margin: 4px 0 4px; }
.login-kaart p { color: var(--zacht); margin: 0 0 16px; font-size: 14px; }
.pin-punten { display: flex; justify-content: center; gap: 12px; height: 16px; margin-bottom: 6px; }
.pin-punten i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #4b6280; transition: .15s; }
.pin-punten i.aan { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(25,195,154,.6); }
.pin-punten.schud { animation: schud .4s; }
@keyframes schud { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-fout { min-height: 20px; color: #ff7b82; font-size: 13px; margin-bottom: 8px; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pinpad button { height: 62px; border-radius: 18px; border: 1px solid var(--rand); background: linear-gradient(180deg, #1a2f4a, #13243a); font-size: 24px; font-weight: 600; color: #fff; transition: transform .08s, background .15s; }
.pinpad button:active { transform: scale(.95); background: #21406a; }
.pinpad .pp-fn { font-size: 20px; color: var(--zacht); }
.pinpad .pp-ok { background: linear-gradient(90deg, var(--accent), var(--accent2)); border: 0; }
.login-onthoud { justify-content: center; margin-top: 18px; color: var(--zacht); font-size: 13px; }

@media (max-width: 760px) {
  .cap { grid-template-columns: 1fr 46px auto auto; }
  .cap input[data-f=code] { grid-column: span 4; }
  .cap-geluid { grid-column: 1 / -1; grid-template-columns: 84px 1fr auto; }
  .test-doel span { padding: 9px; }
}

/* ---------------- v4: instellingen zoals referentie ---------------- */
.vink-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 6px 0 4px; }
.vink { display: flex; align-items: center; gap: 12px; padding: 9px 2px; font-size: 15px; cursor: pointer; position: relative; }
.vink input { position: absolute; opacity: 0; pointer-events: none; }
.vink span { flex: none; width: 24px; height: 24px; border-radius: 6px; background: #fff; border: 1px solid #c9d3df; display: grid; place-items: center; transition: .15s; }
.vink input:checked + span { background: #4fc77f; border-color: #4fc77f; }
.vink input:checked + span::after { content: ""; width: 7px; height: 13px; border: solid #183424; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.vink input:focus-visible + span { outline: 2px solid var(--accent2); outline-offset: 2px; }
fieldset:disabled .vink { opacity: .6; }
.kleur-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 6px 0 8px; }
.kleur-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 15px; cursor: pointer; }
.kleur-rij input[type=color] { width: 78px; height: 46px; flex: none; padding: 6px; border-radius: 12px; }
.getal-rij { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 15px; }
.getal-rij > span { flex: 1; }
.getal-rij input[type=number] { width: 110px; flex: none; text-align: left; }
.getal-rij select { width: auto; min-width: 150px; flex: none; }
.getal-rij em { font-style: normal; color: var(--zacht); width: 72px; flex: none; }
.disc-geluid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dg { border: 1px solid var(--rand); border-radius: 13px; background: var(--bg2); overflow: hidden; }
.dg summary { list-style: none; cursor: pointer; padding: 13px 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.dg summary::-webkit-details-marker { display: none; }
.dg summary i { width: 10px; height: 10px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
.dg summary em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 12px; color: var(--zacht); }
.dg summary::after { content: "▸"; color: var(--zacht); transition: transform .2s; }
.dg[open] summary::after { transform: rotate(90deg); }
.dg-in { padding: 0 14px 14px; border-top: 1px solid rgba(255,255,255,.05); }
.dg-in .knop { margin: 12px 0 4px; }
.dg-p1 { margin-top: 8px; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,.1); }
@media (max-width: 760px) {
  .vink-grid, .kleur-grid { grid-template-columns: 1fr; }
  .getal-rij { flex-wrap: wrap; }
  .getal-rij > span { flex-basis: 100%; }
}
.sectie .dg summary::after, .sectie[open] .dg summary::after { content: "▸"; color: var(--zacht); font-size: 14px; margin-left: 0; }
.sectie .dg[open] summary::after { transform: rotate(90deg); }

/* ---------------- v5: schermvullend (tv) ---------------- */
body.lk-vol #scr-lichtkrant { background: #000; padding: 0; }
body.lk-vol #scr-lichtkrant .lk-podium { height: 100%; }
body.lk-vol #scr-lichtkrant .lk-scherm { outline: 0; box-shadow: none; -webkit-box-reflect: none; }
body.lk-vol #scr-lichtkrant .lk-tafel, body.lk-vol #scr-lichtkrant .lk-onder { display: none; }

/* ---------------- v5: multischerm ---------------- */
body.scherm-multi #scr-multi { display: flex; }
#scr-multi {
  padding: 70px 2vw 2vw;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #0f3f8f 0%, #082156 45%, #040b18 100%);
}
.multi-grid { flex: 1; min-height: 0; display: grid; gap: 18px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.multi-grid[data-n="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.multi-grid[data-n="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.multi-grid[data-n="3"] .mk:nth-child(3) { grid-column: 1 / -1; }
.mk { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mk-naam { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(230,238,247,.6); padding: 0 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-paneel { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mk .lk-scherm { outline: 6px solid #121316; box-shadow: 0 0 0 7px #2b2e34, 0 18px 40px rgba(0,0,0,.55); -webkit-box-reflect: none; }
body.lk-vol #scr-multi { background: #000; padding: 0; }
body.lk-vol .multi-grid { gap: 6px; }
body.lk-vol .mk-naam { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 2px 8px; font-size: 11px; color: rgba(255,255,255,.35); }
body.lk-vol .mk .lk-scherm { outline: 0; box-shadow: none; }
body.nav-weg #scr-multi .mk-naam { opacity: .7; }

/* ---------------- v5: instellingen ---------------- */
.seg-rij { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 10px 0; }
.seg-rij label { cursor: pointer; }
.seg-rij input { position: absolute; opacity: 0; }
.seg-rij span { display: block; text-align: center; padding: 11px 8px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--rand); font-weight: 600; font-size: 14px; }
.seg-rij input:checked + span { border-color: var(--accent); background: rgba(25,195,154,.14); color: #fff; }
.seg-rij input:focus-visible + span { outline: 2px solid var(--accent2); }
.seg-rij.vier span { font-size: 18px; padding: 9px; }
.test-doel { grid-template-columns: repeat(3, 1fr); }
.getal-rij input.breed { flex: 2; width: auto; min-width: 0; }
.getal-rij input.kleur-klein { width: 78px; height: 42px; flex: none; }
.multi-panelen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mp { background: var(--bg2); border: 1px solid var(--rand); border-radius: 13px; padding: 12px 14px; }
.mp.uit { opacity: .45; }
.mp-kop { display: flex; justify-content: space-between; align-items: baseline; }
.mp-kop em { font-style: normal; font-size: 12px; color: var(--zacht); }
.vink-5 { grid-template-columns: 1fr 1fr; gap: 0 12px; }
.vink-5 .vink { padding: 6px 2px; font-size: 14px; }
.vink-5 .vink span { width: 21px; height: 21px; }
.mp-regios { margin: 8px 0; }
.mp-regios summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--zacht); padding: 6px 0; display: flex; gap: 8px; }
.mp-regios summary em { font-style: normal; font-weight: 500; margin-left: auto; }
.regio-grid.klein { grid-template-columns: 1fr; max-height: 220px; overflow-y: auto; }
.regio-grid.klein .regio { padding: 5px 8px; font-size: 12px; }
@media (max-width: 760px) {
  .multi-panelen { grid-template-columns: 1fr; }
  .multi-grid, .multi-grid[data-n="2"] { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 1fr; }
  .multi-grid[data-n="3"] .mk:nth-child(3) { grid-column: auto; }
  .seg-rij { grid-auto-flow: row; }
  .seg-rij.vier { grid-auto-flow: column; }
}
/* multischerm: canvas mag de rastercel niet oprekken */
.multi-grid { grid-auto-rows: minmax(0, 1fr); }
.multi-grid[data-n="2"], .multi-grid[data-n="1"] { grid-template-rows: minmax(0, 1fr); }
.multi-grid[data-n="3"], .multi-grid[data-n="4"] { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.mk-paneel { position: relative; overflow: visible; }
.mk-paneel > .lk-scherm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------------- v7: gebruikers ---------------- */
.login-naam { width: 100%; margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rand); background: rgba(7,16,26,.7); color: #fff; font: 600 16px var(--font); text-align: center; }
.login-naam:focus { outline: 2px solid var(--accent2); border-color: transparent; }
.account-kaart { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 10px 0 6px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--rand); }
.account-kaart small { display: block; font-size: 11px; color: var(--zacht); text-transform: uppercase; letter-spacing: .1em; }
.account-kaart b { font-size: 16px; margin-right: 8px; }
.account-kaart span { color: var(--zacht); font-size: 13px; }

/* v7.1: geen spiegelbeeld meer (browser ververste het niet mee met de LED's); zachte lichtgloed op het tafelblad */
.lk-scherm, .mk .lk-scherm { -webkit-box-reflect: none !important; }
.lk-tafel::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 70%;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,80,50,.10), rgba(80,140,255,.06) 45%, transparent 75%);
  filter: blur(6px);
}

/* ---------------- v10: multischerm klokbalk + pager-vak ---------------- */
#scr-multi { flex-direction: column; }
.multi-klok { display: none; flex: none; align-items: baseline; justify-content: center; gap: 22px; padding: 4px 0 14px; color: #e8eef7; }
body.multi-klokbalk .multi-klok { display: flex; }
.multi-klok b { font: 700 clamp(28px, 4.2vw, 64px)/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; color: #ff3b2a; text-shadow: 0 0 18px rgba(255,59,42,.45); }
.multi-klok span { font: 600 clamp(14px, 1.6vw, 24px)/1 var(--font); color: #6ea8ff; text-transform: capitalize; }
body.lk-vol .multi-klok { padding: 10px 0 8px; }
.mk-pagerbak { position: relative; overflow: hidden; }
.mkp-host { position: absolute; left: 50%; top: 50%; transform-origin: center center; }
.mkp-host { width: 320px; height: 520px; }
.mk-paneel.mk-pagerbak { overflow: hidden; }

/* ---------------- v10.2: vaste kleuren + testmelding inklapbaar ---------------- */
.kleur-keuze { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kleur-keuze .kk { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--kk); padding: 0; cursor: pointer; box-shadow: 0 0 0 0 transparent; transition: transform .1s, box-shadow .15s; }
.kleur-keuze .kk:hover { transform: scale(1.1); }
.kleur-keuze .kk.aan { border-color: #fff; box-shadow: 0 0 0 3px var(--accent); }
.kleur-keuze input[type=color] { width: 46px !important; height: 34px !important; padding: 3px !important; flex: none; }
.veld > .kleur-keuze { margin-top: 2px; }
.kleur-rij .kleur-keuze { justify-content: flex-end; }
.cap .kleur-keuze .kk { width: 20px; height: 20px; }
.cap .kleur-keuze { gap: 4px; }
.sectie.test { border-color: #1f5a4d; background: linear-gradient(180deg, #11302c, #0e2226); }
.sectie.test .test-doel { margin-top: 12px; }
.cap { grid-template-columns: 110px 1fr auto auto auto; } @media (max-width: 760px){ .cap { grid-template-columns: 1fr auto auto; } }
#sectie-bron [disabled], #sectie-bron .schakel:has([disabled]) { opacity: .55; cursor: not-allowed; }