/*
  Nieuwe huisstijl (portaal). Zelfde design-tokens als de mockups in agendaplanner/Docs.
  Generieke componentklassen (.btn, .card, .chip, tabellen, ...) zijn bewust gescopet onder
  .apnew, zodat ze de bestaande Bootstrap 3 / legacy-styling van de nog niet herbouwde
  schermen (Dagrooster, Scans, Scan-apparaten, Toegang, Parameters) niet raken.
  De schil zelf (.sidebar/.topbar/...) gebruikt unieke namen en geldt overal.
*/
:root{
  --ink:#13151b; --ink-2:#4d5464; --ink-3:#767d8e;
  --canvas:#f4f5f8; --surface:#ffffff; --surface-2:#fafbfc;
  --line:#e6e8ee; --line-2:#eef0f4;
  --accent:#5b57e8; --accent-ink:#4b47cf; --accent-weak:#ecebfd;
  --side:#0f172a; --side-2:#1c2740; --side-line:#243149;
  --side-ink:#e8ecf5; --side-ink-2:#97a2ba; --side-ink-3:#697691;
  --green:#1f9d6b; --green-w:#e4f4ec;
  --amber:#c07d16; --amber-w:#f7efdd;
  --blue:#2f74d0; --blue-w:#e7f0fb;
  --violet:#7d54c9; --violet-w:#f0e9fa;
  --red:#c94f43; --red-w:#f8e8e6;
  --shadow-sm:0 1px 2px rgba(20,24,34,.06);
  --shadow:0 2px 4px rgba(20,24,34,.05), 0 12px 28px -8px rgba(20,24,34,.12);
  --radius:14px;
}
[data-theme="dark"]{
  --ink:#e9ebf1; --ink-2:#a2a9b8; --ink-3:#6f7688;
  --canvas:#0b0e14; --surface:#141821; --surface-2:#181d27;
  --line:#242a35; --line-2:#1e232d;
  --accent:#7d79f2; --accent-ink:#8f8bf5; --accent-weak:#211f3a;
  --green:#3fb984; --green-w:#12261d; --amber:#d69a3c; --amber-w:#271d10;
  --blue:#5b9bea; --blue-w:#111e2e; --violet:#a586e0; --violet-w:#1e162b;
  --red:#e07a6c; --red-w:#2a1512;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 16px 34px -10px rgba(0,0,0,.55);
}
html,body{margin:0;height:100%}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100%}

/* sidebar (globaal, ook boven de nog niet herbouwde schermen) */
.sidebar{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:18px 14px;gap:20px;border-right:1px solid var(--side-line)}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px}
.brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px}
.brand .logo img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.brand .name{font-weight:700;font-size:15.5px;letter-spacing:-.02em;font-family:"Inter",sans-serif;color:var(--side-ink)}
.brand .name small{display:block;font-weight:500;font-size:10.5px;color:var(--side-ink-3)}
.sidebar nav{display:flex;flex-direction:column;gap:16px;overflow:auto}
.navgroup>.lbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--side-ink-3);padding:0 10px 7px;font-family:"Inter",sans-serif}
.sidebar .navitem{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--side-ink-2);font-weight:500;font-size:13.5px;position:relative;margin-bottom:1px;text-decoration:none;font-family:"Inter",sans-serif}
.sidebar .navitem svg{width:17px;height:17px;flex:0 0 17px}
.sidebar .navitem:hover{background:var(--side-2);color:var(--side-ink)}
.sidebar .navitem.active{background:var(--side-2);color:#fff}
.sidebar .navitem.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:var(--side-2)}
.side-foot .pic{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#5b57e8,#8b6cf0);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:0 0 30px}
.side-foot .who{overflow:hidden}
.side-foot .who b{font-size:13px;font-weight:600;display:block;color:var(--side-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who span{font-size:11px;color:var(--side-ink-3)}
.side-foot .iconbtn{background:transparent;border-color:var(--side-line);color:var(--side-ink-3)}
.side-foot .iconbtn:hover{background:var(--side);color:var(--side-ink)}

/* main / topbar (globaal) */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:0 26px;height:60px;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 60px;font-family:"Inter",sans-serif}
.topbar h1{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--ink)}
.topbar .crumb{color:var(--ink-3);font-weight:500;font-size:13px}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;text-decoration:none}
.iconbtn:hover{background:var(--canvas);color:var(--ink)} .iconbtn svg{width:17px;height:17px}
.iconbtn .sun{display:none} .iconbtn .moon{display:block}
[data-theme="dark"] .iconbtn .sun{display:block} [data-theme="dark"] .iconbtn .moon{display:none}
.topbar .me{width:34px;height:34px;border-radius:50%;background:var(--accent-weak);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:12.5px}
.content{flex:1;overflow:auto;padding:22px 28px 40px}

.bell{position:relative}
.bell .badge{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface)}
.npanel{position:absolute;top:48px;right:0;width:320px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:40;overflow:hidden;display:none;font-family:"Inter",sans-serif}
.npanel.open{display:block}
.npanel .nh{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:13.5px;color:var(--ink)}
.npanel .nb{max-height:340px;overflow:auto}
.nrow{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:12.5px}

/* ============ alles hieronder alleen binnen nieuwe schermen ============ */
.apnew{font-family:"Inter",sans-serif;color:var(--ink)}
.apnew .num{font-variant-numeric:tabular-nums}
.apnew button{font-family:inherit;cursor:pointer}
.apnew .wrap{display:flex;flex-direction:column;gap:18px}
.apnew .btn{height:38px;padding:0 15px;border-radius:10px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none}
.apnew .btn:hover{background:var(--canvas)}
.apnew .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.apnew .btn.primary:hover{background:var(--accent-ink)} .apnew .btn svg{width:15px;height:15px}
.apnew .btn.danger{background:var(--surface);border-color:var(--line);color:var(--red)}
.apnew .btn.danger:hover{background:var(--red-w)}
.apnew .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.apnew .sectlbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:8px 2px 0}
.apnew .chip{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;display:inline-block}
.apnew .chip.on{background:var(--green-w);color:var(--green)}
.apnew .chip.off{background:var(--surface-2);color:var(--ink-3)}
.apnew table{width:100%;border-collapse:collapse}
.apnew thead th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.apnew tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
.apnew tbody tr:last-child td{border-bottom:0} .apnew tbody tr:hover{background:var(--surface-2)}
.apnew tr.rij-klikbaar{cursor:pointer}
.apnew .linkbtn{color:var(--accent);font-weight:600;font-size:12.5px;text-decoration:none;background:none;border:0;cursor:pointer}
.apnew .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.apnew .dot.g{background:var(--green)} .apnew .dot.r{background:var(--red)} .apnew .dot.e{background:var(--ink-3)}

/* kpi's + panelen (Overzicht) */
.apnew .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.apnew .kpi{padding:16px 18px} .apnew .kpi .k{font-size:12px;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:7px}
.apnew .kpi .v{font-size:29px;font-weight:700;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums} .apnew .kpi .d{font-size:12px;margin-top:7px;color:var(--ink-2)}
.apnew .grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media(max-width:1100px){.apnew .grid2{grid-template-columns:1fr}}
.apnew .panel{padding:18px} .apnew .panel .h{display:flex;align-items:center;margin-bottom:14px}
.apnew .panel .h .t{font-weight:600;font-size:14.5px} .apnew .panel .h .spacer{flex:1} .apnew .panel .h a{font-size:12.5px;color:var(--accent);font-weight:600;text-decoration:none}
.apnew .scan{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)} .apnew .scan:last-child{border-bottom:0}
.apnew .scan .tm{font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;width:52px}
.apnew .scan .av{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:700}
.apnew .scan .who{flex:1} .apnew .scan .who b{font-size:13px;font-weight:600} .apnew .scan .who span{font-size:11.5px;color:var(--ink-3);display:block}
.apnew .io{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px} .apnew .io.in{background:var(--green-w);color:var(--green)} .apnew .io.out{background:var(--blue-w);color:var(--blue)} .apnew .io.err{background:var(--red-w);color:var(--red)}
.apnew .dev{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-2)} .apnew .dev:last-child{border-bottom:0}
.apnew .dev .ic{width:34px;height:34px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)} .apnew .dev .ic svg{width:16px;height:16px}
.apnew .dev b{font-size:13px;font-weight:600;display:block} .apnew .dev span{font-size:11.5px;color:var(--ink-3)}
.apnew .dev .st{margin-left:auto;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.apnew .dev .st.on{color:var(--green)} .apnew .dev .st.off{color:var(--red)}
.apnew .barchart{display:flex;align-items:flex-end;gap:8px;height:120px} .apnew .bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.apnew .bcol .stack{width:100%;max-width:20px;border-radius:5px 5px 0 0;background:var(--accent);min-height:2px} .apnew .bcol .lab{font-size:9.5px;color:var(--ink-3);font-weight:600}
.apnew .avA{background:var(--accent-weak);color:var(--accent-ink)} .apnew .avG{background:var(--green-w);color:var(--green)}
.apnew .avB{background:var(--blue-w);color:var(--blue)} .apnew .avV{background:var(--violet-w);color:var(--violet)} .apnew .avM{background:var(--amber-w);color:var(--amber)}

/* verbindingen */
.apnew .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.apnew .vcard{padding:16px;display:flex;flex-direction:column;gap:12px}
.apnew .vcard .top{display:flex;align-items:center;gap:11px}
.apnew .vcard .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 42px} .apnew .vcard .ic svg{width:21px;height:21px}
.apnew .vcard .nm{font-weight:600;font-size:14.5px} .apnew .vcard .ty{font-size:11.5px;color:var(--ink-3)}
.apnew .vcard .st{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.apnew .vcard .st.on{background:var(--green-w);color:var(--green)} .apnew .vcard .st.on .dot{background:var(--green)}
.apnew .vcard .st.off{background:var(--surface-2);color:var(--ink-3)} .apnew .vcard .st.off .dot{background:var(--ink-3)}
.apnew .vcard .st.warn{background:var(--amber-w);color:var(--amber)} .apnew .vcard .st.warn .dot{background:var(--amber)}
.apnew .vcard .desc{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.apnew .vcard .foot{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line-2);padding-top:11px}
.apnew .vcard .foot .meta{font-size:11.5px;color:var(--ink-3)} .apnew .vcard .foot .sp{flex:1}
.apnew .kvbox{display:flex;flex-direction:column;margin:2px 0}
.apnew .kvr{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:12.5px} .apnew .kvr:last-child{border-bottom:0}
.apnew .kvr .k{color:var(--ink-3);flex:0 0 auto} .apnew .kvr .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.apnew .subhead{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:4px 0 4px;padding-top:11px;border-top:1px solid var(--line)}
.apnew .subhead .ok{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-weight:700;text-transform:none;letter-spacing:0;font-size:11.5px;margin-left:auto} .apnew .subhead .ok svg{width:13px;height:13px}
.apnew .subhead .fout{display:inline-flex;align-items:center;gap:5px;color:var(--red);font-weight:700;text-transform:none;letter-spacing:0;font-size:11.5px;margin-left:auto} .apnew .subhead .fout svg{width:13px;height:13px}

/* utility-klassen (i.p.v. inline style="", geblokkeerd door de CSP style-src van dit portaal) */
.mt6{margin-top:6px}
.muted-sm{color:var(--ink-3);font-size:13px}
.muted-xs{font-size:12.5px;color:var(--ink-3)}
.text-amber{color:var(--amber)}
.hint-panel{font-size:12.5px;color:var(--ink-2);margin:2px 2px 0}
.notice-success{padding:13px 16px;border-left:3px solid var(--green);color:var(--ink)}
.notice-error{padding:13px 16px;border-left:3px solid var(--red);color:var(--ink);border-radius:9px;background:var(--surface);margin:0}
.dev-lastseen{font-size:11px;color:var(--ink-3);margin-left:10px}
.ic-blue{background:var(--blue-w);color:var(--blue)}
.ic-violet{background:var(--violet-w);color:var(--violet)}

/* inlogscherm */
.ssolayout{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:var(--canvas);padding:24px;position:relative}
.ssotheme{position:absolute;top:20px;right:20px}
.ssobrand{display:flex;align-items:center;gap:11px}
.ssobrand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 38px}
.ssobrand .logo img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.ssobrand .name{font-weight:700;font-size:19px;letter-spacing:-.02em;font-family:"Inter",sans-serif;color:var(--ink)}
.ssobrand .name small{display:block;font-weight:500;font-size:12px;color:var(--ink-3)}
.ssocard{width:100%;max-width:380px;padding:28px 26px}
.ssocard h1{font-size:18px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.ssosub{font-size:13px;color:var(--ink-3);margin:0 0 20px}
.ssoerror{background:var(--red-w);color:var(--red);border-radius:10px;padding:10px 13px;font-size:13px;font-weight:500;margin-bottom:16px}
.ssofield{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.ssofield label{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.ssofield input{height:50px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 16px;font-size:15.5px;font-family:"Inter",sans-serif}
.ssofield input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ssocard .btn{height:50px;font-size:15.5px;border-radius:12px}
.ssosubmit{width:100%;justify-content:center;margin-top:6px}
.ssodivider{display:flex;align-items:center;gap:11px;margin:24px 0;color:var(--ink-3);font-size:13px}
.ssodivider::before,.ssodivider::after{content:"";flex:1;height:1px;background:var(--line)}
.ssomsbtn{width:100%;justify-content:center}

/* inlogscherm: hero-variant met klantbranding (agendaplanner-laravel heeft dezelfde opzet) */
.ssopage{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
@media(max-width:860px){.ssopage{grid-template-columns:1fr}}
.ssohero{position:relative;overflow:hidden;background:linear-gradient(180deg,#14294d,#0f2650);color:#fff;padding:40px 48px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:320px}
.ssohero-brand{display:flex;align-items:center;gap:16px}
.ssohero-brand img{width:56px;height:56px;display:block}
.ssohero-brand span{font-family:"Inter",sans-serif;font-size:34px;font-weight:800;letter-spacing:-.02em}
.ssohero-mid,.ssohero-bottom{position:relative;z-index:1}
.ssohero-mid h1{font-family:"Inter",sans-serif;font-size:clamp(24px,3vw,34px);line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:0}
.ssohero-logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.ssohero-logos img{height:26px;width:auto;display:block}
.ssopanel{display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(135deg,#eef1f7,#e6e9f2);position:relative}
.ssopanel>div{width:100%;display:flex;flex-direction:column;align-items:center}
.ssopanel .ssotheme{position:absolute;top:20px;right:20px}
.ssopanel-brand{display:none}
@media(max-width:860px){.ssopanel-brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}.ssopanel-brand img{width:30px;height:30px;object-fit:contain}.ssopanel-brand .name{font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink)}}
.card.ssocard{max-width:430px;padding:48px;border-radius:26px;border:0;box-shadow:0 20px 45px -12px rgba(30,58,106,.18)}
.ssocard .btn.primary{background:linear-gradient(180deg,#3f6aa3,#2f5686);border-color:#2f5686}
.ssocard .btn.primary:hover{background:#2a4d78}
.ssofooter{margin-top:22px;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:6px}
.ssofooter strong{color:var(--ink-2);font-weight:600}
.ic-green{background:var(--green-w);color:var(--green)}
.ic-amber{background:var(--amber-w);color:var(--amber)}
.logout-btn{margin-left:auto;flex:0 0 auto}
.npanel .nrow.empty{color:var(--ink-3);justify-content:center;padding:22px 16px;border-bottom:0}
.checkbox-row{display:flex;align-items:center;gap:8px;font-weight:500}
.checkbox-row input{height:auto}

/* modal (verbindingen beheren) */
.apnew .apmodal-overlay{position:fixed;inset:0;background:rgba(10,12,18,.45);display:none;align-items:center;justify-content:center;z-index:100}
.apnew .apmodal-overlay.open{display:flex}
.apnew .apmodal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;width:420px;max-width:92vw;display:flex;flex-direction:column;gap:14px}
.apnew .apmodal h2{margin:0;font-size:16px;font-weight:600}
.apnew .veld{display:flex;flex-direction:column;gap:5px}
.apnew .veld label{font-size:12px;font-weight:600;color:var(--ink-2)}
.apnew .veld input,.apnew .veld select{height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 11px;font-family:inherit;font-size:13.5px}
.apnew .veld .hulp{font-size:11.5px;color:var(--ink-3)}
.apnew .apmodal .actions{display:flex;gap:8px;justify-content:flex-end}

/* parameters (gegroepeerd, doorzoekbaar) */
.apnew .psearch{display:flex;align-items:center;gap:12px}
.apnew .psearch .sbox{flex:1;min-width:240px;max-width:420px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:11px;padding:0 13px;height:42px}
.apnew .psearch .sbox svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 16px}
.apnew .psearch .sbox input{border:0;outline:0;background:transparent;font:inherit;color:var(--ink);flex:1;height:100%}
.apnew .grp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:14px;overflow:hidden}
.apnew .grp .gh{padding:13px 18px;border-bottom:1px solid var(--line)}
.apnew .grp .gh .t{font-weight:600;font-size:14px}
.apnew .grp .gh .d{font-size:12px;color:var(--ink-3)}
.apnew .paramrow{display:flex;align-items:flex-start;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.apnew .paramrow:last-child{border-bottom:0}
.apnew .paramrow .lbl{flex:1;min-width:0;padding-top:3px}
.apnew .paramrow .lbl b{font-weight:600;font-size:13.5px;display:block}
.apnew .paramrow .lbl span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:2px}
.apnew .paramrow .lbl code{font-size:11px;color:var(--ink-3);font-family:ui-monospace,monospace}
.apnew .paramrow .pval{width:300px;flex:0 0 auto}
.apnew .paramrow .pval input,.apnew .paramrow .pval select{width:100%;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 11px;font-family:inherit;font-size:13.5px}
.apnew .savebar{position:sticky;bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:center;gap:12px;margin-top:4px}
.apnew .sp{flex:1}
.apnew .param-leeg{padding:24px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* dagrooster (toolbar, agenda-bord, tabelweergave) */
.apnew .toolbar2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-sm)}
.apnew .toolbar2 form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.apnew .datenav{display:flex;align-items:center;gap:8px}
.apnew .dnav-arrow{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;font-size:16px}
.apnew .dnav-arrow:hover{background:var(--canvas)}
.apnew .today{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 12px;font-weight:600;font-size:13px}
.apnew .today:hover{background:var(--canvas)}
.apnew .datenav .big{display:flex;flex-direction:column;line-height:1.15;margin-left:2px}
.apnew .datenav .big .d{font-weight:600;font-size:15px} .apnew .datenav .big .w{color:var(--ink-3);font-size:11.5px}
.apnew .seg{display:flex;background:var(--canvas);border:1px solid var(--line);border-radius:9px;padding:3px}
.apnew .seg button{border:0;background:transparent;color:var(--ink-2);padding:6px 13px;border-radius:7px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.apnew .seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)} .apnew .seg .ic{width:14px;height:14px}
.apnew .select2{position:relative} .apnew .select2 select{appearance:none;-webkit-appearance:none;font-size:13px;color:var(--ink);font-weight:600;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 30px 8px 12px;cursor:pointer}
.apnew .select2::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;pointer-events:none;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:translateY(-70%) rotate(45deg)}
.apnew .spacer{flex:1}
.apnew .webbadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-w);padding:6px 11px;border-radius:20px} .apnew .webbadge svg{width:14px;height:14px}
.apnew .filtermeer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;padding-top:10px;border-top:1px solid var(--line-2)}
.apnew .veldlabel{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.apnew .dateveld{height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 10px;font-family:inherit;font-size:13px;width:104px;box-sizing:content-box}

.apnew .boardwrap{overflow:auto}
.apnew .board{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:600px}
.apnew .colhead{background:var(--surface-2);padding:9px 8px;text-align:center;border-bottom:1px solid var(--line);border-left:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;gap:8px;grid-row:1}
.apnew .colhead .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700} .apnew .colhead .nm{font-weight:600;font-size:12.5px}
.apnew .headspacer{background:var(--surface-2);border-bottom:1px solid var(--line);grid-column:1;grid-row:1}
.apnew .timecell{grid-column:1;font-size:10.5px;color:var(--ink-3);text-align:right;padding-right:8px;transform:translateY(-7px);font-variant-numeric:tabular-nums}
.apnew .gl{grid-column:2/-1;border-top:1px solid var(--line-2)}
.apnew .ev{position:relative;margin:1px 4px;border-radius:8px;padding:4px 8px;overflow:hidden;font-size:11px;line-height:1.25;cursor:default;box-shadow:var(--shadow-sm)}
.apnew .ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.apnew .ev.traject{background:var(--blue-w)} .apnew .ev.traject::before{background:var(--blue)}
.apnew .ev.training{background:var(--violet-w)} .apnew .ev.training::before{background:var(--violet)}
.apnew .ev.individueel{background:var(--amber-w)} .apnew .ev.individueel::before{background:var(--amber)}
.apnew .ev.overig{background:var(--surface-2)} .apnew .ev.overig::before{background:var(--ink-3)}
.apnew .ev b{font-weight:600;font-size:11.5px;display:block;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apnew .ev span{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.apnew .legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);align-items:center}
.apnew .legend .i{display:flex;align-items:center;gap:6px} .apnew .legend .sw{width:11px;height:11px;border-radius:3px}
.apnew .legend .sw-traject{background:var(--blue)} .apnew .legend .sw-training{background:var(--violet)} .apnew .legend .sw-individueel{background:var(--amber)} .apnew .legend .sw-overig{background:var(--ink-3)}
.apnew .tblcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
.apnew .apnew-view[hidden]{display:none}

/* Tabledit (jquery.tabledit.js) gebruikte van zichzelf inline style="" voor verbergen/uitlijnen,
   wat de CSP style-src-attr-richtlijn overtreedt. Deze klassen vervangen die inline styles. */
.tabledit-hidden{display:none}
.tabledit-float-none{float:none}
.tabledit-toolbar-row{text-align:left}
.tabledit-toolbar-cell{white-space:nowrap;width:1%}
.tabledit-cursor-pointer{cursor:pointer}

/* page_index.js se opslaan-succesmelding faadde uit via jQuery .fadeOut() (inline style
   tijdens de animatie) -- nu een CSS-transition, klasse toegevoegd/verwijderd via JS. */
.next-buttons-fade-uit{opacity:0;transition:opacity .4s}

/* jQuery Popup Overlay (jquery.popupoverlay.js, gebruikt door Gebruikers/Scan-apparaten se
   "Toevoegen/bewerken"-popup) zette al zijn positionerings-/zichtbaarheidswaarden via .css() --
   nu als vaste klassen, alleen voor het "overlay"-type (het enige type dat dit portaal
   gebruikt; zie de commentaren in jquery.popupoverlay.js voor wat bewust niet is aangepast). */
.popup_background{position:fixed;inset:0;background-color:#000;opacity:0;visibility:hidden;z-index:100000}
.popup_background.popup_background_visible{visibility:visible;opacity:.5}
.popup_wrapper{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;overflow:auto;opacity:0;visibility:hidden;z-index:100001}
.popup_wrapper.popup_wrapper_visible{visibility:visible;opacity:1}
.popup_wrapper.popup_wrapper_hidden{display:none}
.popup_content{display:inline-block;text-align:left;position:relative;vertical-align:middle;outline:none;opacity:0;visibility:hidden}
.popup_content.popup_content_visible{visibility:visible;opacity:1}
.popup_content.popup_content_hidden{display:none}
.popup_align{display:inline-block;vertical-align:middle;height:100%}
body.popup_scroll_locked{overflow:hidden}

/* Melding 169: donkere modus voor de nog niet herbouwde Bootstrap-schermen
   (Toegang, Scans, Scan-apparaten, Parameters, Dagrooster-legacy).
   body{color:var(--ink);background:var(--canvas)} hierboven staat nu altijd
   als laatste geladen (zie layout.php) en wint daardoor de cascade overal --
   ook hier, waar de Bootstrap-eigen witte achtergronden van tabellen/invoer-
   velden niet meeveranderden. Dat gaf lichte tekst op een nog witte
   achtergrond (onleesbaar). Deze blok geeft die Bootstrap-elementen zelf ook
   een donkere achtergrond, zodat tekst en achtergrond weer bij elkaar passen
   en de pagina's ook daadwerkelijk donker worden i.p.v. een mix. */
[data-theme="dark"] .contentwrapper,
[data-theme="dark"] .scanactiescontent,
[data-theme="dark"] .searchtitleblock,
[data-theme="dark"] .searchgradient,
[data-theme="dark"] .popup_content{
  background:var(--surface) !important;
  color:var(--ink) !important;
}
[data-theme="dark"] .contentwrapper table,
[data-theme="dark"] .contentwrapper thead,
[data-theme="dark"] .contentwrapper tbody,
[data-theme="dark"] .contentwrapper tr,
[data-theme="dark"] .contentwrapper th,
[data-theme="dark"] .contentwrapper td,
[data-theme="dark"] .scanactiescontent table,
[data-theme="dark"] .scanactiescontent thead,
[data-theme="dark"] .scanactiescontent tbody,
[data-theme="dark"] .scanactiescontent tr,
[data-theme="dark"] .scanactiescontent th,
[data-theme="dark"] .scanactiescontent td,
[data-theme="dark"] .popup_content table,
[data-theme="dark"] .popup_content th,
[data-theme="dark"] .popup_content td{
  background:transparent !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
[data-theme="dark"] .contentwrapper input,
[data-theme="dark"] .contentwrapper select,
[data-theme="dark"] .contentwrapper textarea,
[data-theme="dark"] .scanactiescontent input,
[data-theme="dark"] .scanactiescontent select,
[data-theme="dark"] .scanactiescontent textarea,
[data-theme="dark"] .popup_content input,
[data-theme="dark"] .popup_content select,
[data-theme="dark"] .popup_content textarea{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
[data-theme="dark"] .contentwrapper a,
[data-theme="dark"] .scanactiescontent a,
[data-theme="dark"] .popup_content a{
  color:var(--accent);
}

/* Melding 169 (vervolg): .filter-table (de "Filteren"-balk die het
   jquery.filterTable-plugin automatisch vóór elke #datatable zet, op Scans,
   Scan-apparaten en Toegang) stond nog niet in de lijst hierboven en had zelf
   nog een vast lichtgrijze achtergrond (navigation-dark.css, regel 568) --
   vandaar dat juist die balk in donkere modus wit bleef terwijl de rest van
   het scherm al donker was. */
[data-theme="dark"] .filter-table{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
}