/* Concept: meldkamer-papier. Een rail in donkerblauw, een bovenbalk in het blauw van het logo met oranje onderrand,
   vlakke bladen met haarlijnen in plaats van kaarten, en beelden met ingebrande tijdstempel zoals echte camerabeelden.
   Oranje is alleen voor acties; groen en rood alleen voor status. */
:root{
  --paper:#e9edf1; --sheet:#ffffff; --sheet2:#f5f7f9; --ink:#1b2b38; --ink2:#566676; --rule:#d3dce4; --rule2:#9fb0be;
  --blue:#247ec2; --bar:#247ec2; --navy:#243746; --navy-ink:#dbe6ee; --navy-line:#355068; --orange:#f8991d; --orange-ink:#2a1700;
  --ok:#1f8a55; --ok-bg:#dff2e8; --bad:#c3352b; --bad-bg:#fae2df; --warn:#9a5b00; --warn-bg:#fdecd2;
  --f-head:"Poppins","Trebuchet MS",system-ui,sans-serif; --f-body:"Lato","Segoe UI",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0d141a; --sheet:#141e27; --sheet2:#19252f; --ink:#e4ecf2; --ink2:#93a8b8; --rule:#26343f; --rule2:#43586a;
  --blue:#4ca2e4; --bar:#17496f; --navy:#090e13; --navy-ink:#c9d7e2; --navy-line:#1f2d39; --orange:#f8a437; --orange-ink:#241500;
  --ok:#43c088; --ok-bg:#12352a; --bad:#ff7d72; --bad-bg:#3b1b19; --warn:#ffc67a; --warn-bg:#392a11;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0d141a; --sheet:#141e27; --sheet2:#19252f; --ink:#e4ecf2; --ink2:#93a8b8; --rule:#26343f; --rule2:#43586a;
  --blue:#4ca2e4; --bar:#17496f; --navy:#090e13; --navy-ink:#c9d7e2; --navy-line:#1f2d39; --orange:#f8a437; --orange-ink:#241500;
  --ok:#43c088; --ok-bg:#12352a; --bad:#ff7d72; --bad-bg:#3b1b19; --warn:#ffc67a; --warn-bg:#392a11;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--f-body)}
h1,h2,h3{font-family:var(--f-head);margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:clamp(24px,3.4vw,30px);font-weight:600} h2{font-size:18px;font-weight:600} h3{font-size:15px;font-weight:600}
p{margin:0} button,select,input{font:inherit;color:inherit} button{cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.in{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* bovenbalk */
.bar{background:var(--bar);border-bottom:3px solid var(--orange);color:#fff}
.bar .in{display:flex;align-items:center;gap:22px;min-height:62px;flex-wrap:wrap}
.bar img{height:30px;display:block}
.bar .dom{font:12px var(--f-mono);opacity:.8;border-left:1px solid rgba(255,255,255,.35);padding-left:16px}
.roles{display:flex;margin-left:auto;gap:2px}
.roles button{background:transparent;border:0;color:rgba(255,255,255,.72);font:600 13px var(--f-head);letter-spacing:.05em;text-transform:uppercase;padding:20px 14px 17px;border-bottom:3px solid transparent;margin-bottom:-3px}
.roles button[aria-pressed="true"]{color:#fff;border-bottom-color:#fff}
.me{font-size:14px;display:flex;align-items:center;gap:10px}.me b{font:600 12px var(--f-head);background:#fff;color:var(--bar);width:30px;height:30px;display:grid;place-items:center;border-radius:3px}
.note{font-size:13px;color:var(--ink2);padding:10px 0}
/* frame */
.stage{background:linear-gradient(90deg,var(--navy) 0,var(--navy) calc(max(0px,(100vw - 1240px)/2) + 236px),var(--paper) 0)}
.frame{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:calc(100vh - 110px)}
.rail{background:var(--navy);color:var(--navy-ink);padding:18px 0 28px;margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-left:max(16px,env(safe-area-inset-left,0px))}
.rail .lab{font:600 11px var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:#8fa6b8;margin:0 16px 6px 0}
.rail select{width:calc(100% - 16px);background:var(--navy-line);border:1px solid #46627b;color:#fff;border-radius:3px;padding:10px;font:600 14px var(--f-body);margin-bottom:22px}
.rail select option{color:#000}
.rail nav{display:flex;flex-direction:column}
.rail nav button{display:flex;align-items:center;gap:12px;background:transparent;border:0;border-left:4px solid transparent;color:var(--navy-ink);text-align:left;padding:11px 16px 11px 12px;font:600 14px var(--f-head);position:relative}
.rail nav button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.rail nav button:hover{background:var(--navy-line)}
.rail nav button[aria-current="true"]{border-left-color:var(--orange);background:var(--navy-line);color:#fff}
.rail .cnt{margin-left:auto;font:500 12px var(--f-mono);background:var(--orange);color:var(--orange-ink);padding:0 6px;border-radius:2px}
.rail .sep{height:1px;background:var(--navy-line);margin:14px 16px 14px 0}
.main{padding:28px 0 80px 36px;min-width:0}
.view{display:none}.view.on{display:block}
.crumb{font:600 11px var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.title p{color:var(--ink2);margin-top:4px}
/* onderdelen */
.sec{margin-top:30px}.sec>.h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule2);padding-bottom:6px;margin-bottom:6px}
.sec>.h h2{font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:40px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--blue);background:transparent;color:var(--blue);border-radius:4px;padding:9px 16px;font:600 14px var(--f-head);min-height:42px}
.btn:hover{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.btn.go{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}.btn.go:hover{filter:brightness(1.05);background:var(--orange)}
.btn.s{min-height:34px;padding:5px 12px;font-size:13px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.m{color:var(--ink2)}.sm{font-size:14px}.xs{font-size:12px}.mono{font-family:var(--f-mono)}
.stamp{display:inline-block;font:600 11px var(--f-head);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1.5px solid currentColor;border-radius:2px}
.stamp.ok{color:var(--ok)}.stamp.bad{color:var(--bad)}.stamp.warn{color:var(--warn)}.stamp.blue{color:var(--blue)}.stamp.mute{color:var(--ink2)}
.strip{display:grid;grid-template-columns:auto 1fr;border:1px solid var(--rule2);background:var(--sheet)}
.strip .state{background:var(--ok);color:#fff;padding:18px 26px;display:flex;flex-direction:column;justify-content:center}
.strip .state b{font:700 22px var(--f-head);letter-spacing:.02em;text-transform:uppercase}.strip .state span{font-size:13px;opacity:.92}
.strip.bad .state{background:var(--bad)}.strip.warn .state{background:var(--orange);color:var(--orange-ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.facts div{padding:16px 22px;border-left:1px solid var(--rule)}.facts div:first-child{border-left:0}
.facts b{display:block;font:600 26px var(--f-head);line-height:1.1}.facts span{font-size:13px;color:var(--ink2)}
table{width:100%;border-collapse:collapse}
th{font:600 11px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--rule2);white-space:nowrap}
td{padding:11px 10px 11px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover td{background:var(--sheet2)}
.tw{overflow-x:auto}
.cctv{position:relative;background:#050709;overflow:hidden;aspect-ratio:16/9;border:1px solid #000}
.cctv svg{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(1) contrast(1.05) brightness(.82)}
.cctv::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);pointer-events:none}
.cctv .bt{position:absolute;left:8px;top:6px;font:500 11px var(--f-mono);color:#f1f1f1;text-shadow:0 0 3px #000,0 0 2px #000;z-index:2}
.cctv .bb{position:absolute;right:8px;bottom:6px;font:500 11px var(--f-mono);color:#f1f1f1;text-shadow:0 0 3px #000;z-index:2}
.cctv .rec{position:absolute;right:8px;top:6px;font:500 11px var(--f-mono);color:#ff5a4d;z-index:2}
.th{width:104px;flex:0 0 auto}
.cap{font-size:12px;color:var(--ink2);margin-top:4px}
.tl{position:relative;height:30px;background:var(--sheet2);border:1px solid var(--rule2);margin-top:8px}
.tl i{position:absolute;top:5px;bottom:5px;min-width:4px}
.tl .ph{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.ax{display:flex;justify-content:space-between;font:11px var(--f-mono);color:var(--ink2);margin-top:4px}
.key{display:flex;gap:16px;font-size:13px;color:var(--ink2)}.key i{display:inline-block;width:10px;height:10px;margin-right:6px}
.sw{position:relative;width:46px;height:24px;flex:0 0 auto;display:inline-block}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw span{position:absolute;inset:0;background:var(--rule2);border-radius:3px;transition:.12s}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:2px;transition:.12s}
.sw input:checked+span{background:var(--ok)}.sw input:checked+span::after{transform:translateX(22px)}
.sw input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.set{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.set .l b{display:block;font:600 15px var(--f-head)}.set .l span{font-size:14px;color:var(--ink2)}
.field{display:flex;flex-direction:column;gap:5px}.field label{font:600 12px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.field input,.field select{background:var(--sheet);border:1px solid var(--rule2);border-radius:3px;padding:9px 11px;min-height:42px;font:inherit}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--rule2);background:var(--sheet)}
.pick label{display:block;padding:16px;border-left:1px solid var(--rule2);cursor:pointer;position:relative}.pick label:first-child{border-left:0}
.pick input{position:absolute;opacity:0}
.pick label:has(input:checked){background:var(--blue);color:#fff}.pick label:has(input:checked) span{color:rgba(255,255,255,.88)}
.pick label:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:-3px}
.pick b{font:600 18px var(--f-head);display:block}.pick span{font-size:13px;color:var(--ink2)}
.bar2{height:10px;background:var(--rule);border-radius:2px;overflow:hidden}.bar2 i{display:block;height:100%;background:var(--blue)}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}.steps li{counter-increment:s;display:grid;grid-template-columns:54px 1fr;gap:6px;padding:12px 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s);font:600 34px/1 var(--f-head);color:var(--orange)}
.steps b{display:block}
.who{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule2);background:var(--sheet)}
.who>div{padding:16px 18px}.who>div+div{border-left:1px solid var(--rule2)}.who b{font:600 14px var(--f-head);display:block;margin-bottom:2px}
.matrix td,.matrix th{padding:10px 12px 10px 0}.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center}
.yes{color:var(--ok);font-weight:700}.no{color:var(--ink2)}
.code{font:500 38px var(--f-mono);letter-spacing:.2em;border:2px dashed var(--blue);padding:10px 22px;display:inline-block;color:var(--blue)}
.callout{border-left:4px solid var(--orange);background:var(--warn-bg);padding:12px 16px;font-size:14px}
.kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule2);background:var(--sheet)}
.kp div{padding:16px 20px;border-left:1px solid var(--rule)}.kp div:first-child{border-left:0}.kp b{font:600 30px var(--f-head);display:block;line-height:1.1}.kp span{font-size:13px;color:var(--ink2)}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--rule2);margin-bottom:12px}
.tabs button{background:transparent;border:0;padding:8px 0;font:600 14px var(--f-head);color:var(--ink2);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--orange)}
.lg td:first-child{white-space:nowrap;font:12px var(--f-mono);color:var(--ink2);width:150px}
details summary{cursor:pointer;font:600 14px var(--f-head);color:var(--blue);padding:10px 0}
.tagc{display:inline-block;width:3px;height:14px;vertical-align:-2px;margin-right:8px}
.stack>*+*{margin-top:16px}
.sec .tw{margin-top:4px}
@media (max-width:960px){
  .stage{background:var(--paper)}
  .frame{grid-template-columns:1fr}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;margin:0;padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);border-top:3px solid var(--orange)}
  .rail .lab,.rail select,.rail .sep{display:none}
  .rail nav{flex-direction:row;overflow-x:auto}
  .rail nav button{flex:1 0 auto;flex-direction:column;gap:2px;font-size:11px;border-left:0;border-top:4px solid transparent;padding:8px 10px;min-width:70px;text-align:center}
  .rail nav button[aria-current="true"]{border-top-color:var(--orange)}
  .rail .cnt{position:absolute;top:4px;right:8px;margin:0}
  .main{padding:20px 0 100px}
  .cols{grid-template-columns:1fr;gap:10px}
  .loc{display:block!important}
  .strip{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.facts div{border-left:0;border-top:1px solid var(--rule)}
  .set{grid-template-columns:1fr;gap:10px}.g2,.g3,.pick,.who,.kp{grid-template-columns:1fr}.kp div,.who>div+div,.pick label{border-left:0;border-top:1px solid var(--rule2)}
  .kp div:first-child,.pick label:first-child{border-top:0}
  .bar .dom{display:none}.roles button{padding-top:12px;padding-bottom:9px}
}
.loc{display:none;margin-bottom:14px}.loc select{width:100%;background:var(--sheet);border:1px solid var(--rule2);padding:10px;border-radius:3px;font:600 14px var(--f-body)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- portaal-aanvullingen op het ontwerp ---- */
a{color:var(--blue)}
.bar a.brand{display:flex;align-items:center}
.bar .me form{display:inline;margin:0}.bar .me .out{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:3px;padding:4px 10px;font:600 12px var(--f-head)}
.rail nav a{display:flex;align-items:center;gap:12px;border-left:4px solid transparent;color:var(--navy-ink);text-decoration:none;padding:11px 16px 11px 12px;font:600 14px var(--f-head)}
.rail nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.rail nav a:hover{background:var(--navy-line)}
.rail nav a[aria-current="true"]{border-left-color:var(--orange);background:var(--navy-line);color:#fff}
.rail form.sw2{margin:0}
.main h1{margin:0}
.crumb{margin-top:0}
.card{background:var(--sheet);border:1px solid var(--rule2);border-radius:0;padding:18px 20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;align-items:start}
.site{display:flex;flex-direction:column;gap:10px}.top2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.muted{color:var(--ink2);font-size:14px}
.mt{margin-top:28px}
label{display:block;margin:0 0 14px;font:600 12px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
label.chk{display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;font:14px var(--f-body)}
input,select{display:block;width:100%;margin-top:5px;background:var(--sheet);border:1px solid var(--rule2);border-radius:3px;padding:9px 11px;min-height:42px;font:16px var(--f-body);color:var(--ink);text-transform:none;letter-spacing:0}
input[type=checkbox]{width:auto;min-height:0;margin:0}
.inline{display:inline}.inline input,.inline select{display:inline-block;width:auto;margin:0}
.line{display:flex;gap:8px;margin:8px 0 16px}.line input{flex:1}
button,a.primary,a.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--blue);background:transparent;color:var(--blue);border-radius:4px;padding:9px 16px;font:600 14px var(--f-head);min-height:42px;text-decoration:none;cursor:pointer}
button:hover,a.ghost:hover{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.primary{background:var(--orange)!important;border-color:var(--orange)!important;color:var(--orange-ink)!important}
button.ghost,a.ghost{background:transparent}
button.small,a.small{min-height:34px;padding:5px 12px;font-size:13px}
.badge{display:inline-block;font:600 11px var(--f-head);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1.5px solid currentColor;border-radius:2px;white-space:nowrap}
.badge.ok{color:var(--ok)}.badge.bad{color:var(--bad)}.badge.wait{color:var(--warn)}
.flash{padding:12px 16px;margin:0 0 18px;border-left:4px solid var(--ok);background:var(--ok-bg);color:var(--ink)}
.flash.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.rowl{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--rule)}
.nw{white-space:nowrap}
.center{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--paper)}
.narrow{width:100%;max-width:420px}
.login-logo{display:block;height:34px;margin:0 0 22px;background:var(--bar);padding:14px 18px;box-sizing:content-box;border-bottom:3px solid var(--orange)}
.bigcode{font:500 38px var(--f-mono);letter-spacing:.2em;border:2px dashed var(--blue);padding:10px 22px;display:inline-block;color:var(--blue);margin:8px 0}
.codebox{margin-bottom:22px;text-align:center}
.copy{margin-top:8px;font-size:13px}
.switch{margin:0}
.rail .switch select{width:calc(100% - 16px);background:var(--navy-line);border:1px solid #46627b;color:#fff;border-radius:3px;padding:10px;font:600 14px var(--f-body);margin-bottom:22px}
.who2{color:#fff}
.title{margin-top:0}
.stage .main{min-height:70vh}
.main>h1{padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.main .row.rowl{display:flex}
@media (max-width:960px){.rail nav a{flex:1 0 auto;flex-direction:column;gap:2px;font-size:11px;border-left:0;border-top:4px solid transparent;padding:8px 10px;min-width:70px;text-align:center}.rail nav a[aria-current="true"]{border-top-color:var(--orange)}.rail .switch{display:none}}