/* Statusbadge + overlay ("Alle systemen online"), gevoed door /status-json.php */
.ns-status{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px;line-height:1}
.ns-status:hover{color:#fff}
.ns-status:focus-visible{outline:2px solid #ff6b35;outline-offset:3px;border-radius:4px}
.ns-dot{width:8px;height:8px;border-radius:50%;background:#9ca3af;display:inline-block;flex:none}
.ns-dot.ok{background:#22c55e;animation:ns-pulse 2.4s ease-out infinite}
.ns-dot.degraded{background:#f59e0b}
.ns-dot.down{background:#ef4444}
.ns-dot.maintenance{background:#3b82f6}
.ns-dot.unknown{background:#9ca3af}
@keyframes ns-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* Overlay */
.ns-ov{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,41,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-family:'Archivo',Inter,system-ui,sans-serif;color:#1a2540}
.ns-ov.open{display:flex}
.ns-ov__box{background:#F5F7FB;border-radius:18px;width:100%;max-width:640px;max-height:min(90vh,820px);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(15,23,41,.45);overflow:hidden;animation:ns-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes ns-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* Header */
.ns-ov__head{position:relative;color:#fff;padding:22px 24px 20px;display:flex;align-items:center;gap:18px;overflow:hidden;background:#1a2540;transition:background .5s}
.ns-ov__head.ok{background:linear-gradient(135deg,#0f3d2e 0%,#1a2540 65%)}
.ns-ov__head.down{background:linear-gradient(135deg,#5b1414 0%,#1a2540 65%)}
.ns-ov__head.degraded{background:linear-gradient(135deg,#6b3d05 0%,#1a2540 65%)}
.ns-ov__head.maintenance{background:linear-gradient(135deg,#153a75 0%,#1a2540 65%)}
.ns-ov__dot{width:13px;height:13px;flex:none;position:relative;z-index:1}
.ns-ov__dot.ok{animation:ns-ov-pulse 1.8s ease-out infinite;box-shadow:0 0 9px rgba(34,197,94,.9)}
.ns-ov__dot.ok::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(34,197,94,.7);animation:ns-ov-ring 1.8s ease-out infinite}
@keyframes ns-ov-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,.75),0 0 9px rgba(34,197,94,.9)}50%{transform:scale(1.18)}70%{box-shadow:0 0 0 11px rgba(34,197,94,0),0 0 9px rgba(34,197,94,.9)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0),0 0 9px rgba(34,197,94,.9)}}
@keyframes ns-ov-ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.4);opacity:0}}
.ns-ov__hd{position:relative;flex:1;min-width:0}
.ns-ov__kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ns-ov__title{font-family:'Baloo 2','Archivo',system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1.15;margin:2px 0 4px}
.ns-ov__sub{color:rgba(255,255,255,.75);font-size:13px;font-variant-numeric:tabular-nums}
.ns-ov__sub em{font-style:normal;color:#fbbf24}
.ns-ring{position:relative;width:30px;height:30px;flex:none;transform:rotate(-90deg)}
.ns-ring circle{fill:none;stroke-width:3}
.ns-ring__bg{stroke:rgba(255,255,255,.15)}
.ns-ring__fg{stroke:rgba(255,255,255,.85);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s linear;stroke-linecap:round}
.ns-ov__close{position:relative;margin-left:2px;background:rgba(255,255,255,.1);border:0;color:#fff;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:22px;line-height:1;flex:none}
.ns-ov__close:hover{background:rgba(255,255,255,.22)}

/* Body */
.ns-ov__body{overflow:auto;padding:14px 16px 6px}
.ns-inc{margin:0 0 10px;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.45;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12}
.ns-inc.danger{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.ns-inc.info,.ns-inc.primary{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.ns-inc strong{display:block;margin-bottom:2px}
.ns-grp__name{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff6b35;margin:12px 4px 6px}

.ns-svc{display:flex;gap:14px;background:#fff;border:1px solid #E7ECF3;border-radius:14px;padding:14px 16px;margin-bottom:10px;position:relative;overflow:hidden;}
.ns-svc:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#9ca3af}
.ns-svc.ok:before{background:#22c55e}.ns-svc.down:before{background:#ef4444}.ns-svc.degraded:before{background:#f59e0b}.ns-svc.maintenance:before{background:#3b82f6}
.ns-svc__ico{width:40px;height:40px;border-radius:12px;background:#F2F5F9;color:#1a2540;display:flex;align-items:center;justify-content:center;flex:none}
.ns-svc__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ns-svc.ok .ns-svc__ico{background:#ecfdf5;color:#15803d}.ns-svc.down .ns-svc__ico{background:#fef2f2;color:#b91c1c}.ns-svc.degraded .ns-svc__ico{background:#fffbeb;color:#b45309}.ns-svc.maintenance .ns-svc__ico{background:#eff6ff;color:#1d4ed8}
.ns-svc__main{flex:1;min-width:0}
.ns-svc__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ns-svc__name{font-family:'Baloo 2','Archivo',system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1.2}
.ns-svc__desc{font-size:12.5px;color:#6b7280;margin-top:1px}
.ns-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;background:#F2F5F9;color:#3a4670;white-space:nowrap;flex:none}
.ns-pill.ok{background:#dcfce7;color:#166534}.ns-pill.down{background:#fee2e2;color:#991b1b}.ns-pill.degraded{background:#fef3c7;color:#92400e}.ns-pill.maintenance{background:#dbeafe;color:#1e40af}
.ns-pill .ns-dot{width:7px;height:7px}
.ns-svc__meta{display:flex;gap:14px;margin-top:6px;font-size:12px;color:#6b7280;font-variant-numeric:tabular-nums}
.ns-svc__meta b{color:#1a2540;font-weight:700}
.ns-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ns-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#1a2540;background:#F2F5F9;border:1px solid #E7ECF3;border-radius:999px;padding:3px 9px 3px 7px;white-space:nowrap}
.ns-chip .ns-dot{width:7px;height:7px}
.ns-chip.ok{background:#f0fdf4;border-color:#bbf7d0}.ns-chip.down{background:#fef2f2;border-color:#fecaca}.ns-chip.degraded{background:#fffbeb;border-color:#fde68a}
.ns-empty{padding:30px 10px;text-align:center;color:#6b7280;font-size:14px;line-height:1.5}
.ns-empty a{color:#ff6b35;font-weight:600}
.ns-ov__foot{border-top:1px solid #E7ECF3;padding:12px 22px;font-size:12px;color:#6b7280;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#fff}
.ns-ov__foot a{color:#1a2540;font-weight:600;text-decoration:none}
.ns-ov__foot a:hover{color:#ff6b35}
@media (max-width:520px){.ns-svc{padding:12px}.ns-svc__ico{display:none}.ns-svc__meta{gap:10px}.ns-ov__box{max-height:94vh;border-radius:14px}}
@media (prefers-reduced-motion:reduce){.ns-dot,.ns-ov__dot::after{animation:none!important}}
.ns-nowrap{white-space:nowrap}