/* App shell bovenop base.css: zijbalk + views */
:root{--side:248px}
body{overflow-x:hidden}
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:calc(18px + env(safe-area-inset-top,0px)) 14px 18px max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--stroke);background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.side .brand{padding:4px 8px}
.menu{display:grid;gap:2px}
.menu a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;color:var(--fg-2);text-decoration:none;font-size:14px;font-weight:500;transition:background .2s,color .2s;position:relative}
.menu a svg{width:18px;height:18px;flex:none;opacity:.8}
.menu a:hover{background:var(--accent-soft);color:var(--fg)}
.menu a[aria-current="page"]{background:var(--glass-2);color:var(--fg);box-shadow:var(--shadow);border:1px solid var(--stroke)}
.menu a[aria-current="page"] svg{color:var(--accent);opacity:1}
.menu .badge{margin-left:auto;font:500 11px var(--mono);padding:1px 7px;border-radius:99px;background:var(--bg2);color:var(--mute)}
.menu .badge.hot{background:var(--jij-s);color:var(--jij)}
.menu .badge.bad{background:rgba(255,80,80,.14);color:#ff5a5a}
.side .foot{margin-top:auto;display:grid;gap:10px;font-size:12px;color:var(--mute)}
.side .foot button{justify-self:start;border:0;background:none;color:var(--mute);font:inherit;cursor:pointer;padding:0}
.side .foot button:hover{color:var(--fg)}
.main{min-width:0;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));padding-bottom:80px}
.main .top{margin:0 calc(-1 * max(28px,env(safe-area-inset-right,0px)));padding-inline:max(28px,env(safe-area-inset-right,0px))}
.view{display:none}.view.on{display:block;animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.vh{padding:34px 0 22px;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.vh h1{font-size:clamp(30px,4vw,44px);margin:6px 0 0}
.vh .tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn2{border:1px solid var(--stroke-2);background:var(--glass);color:var(--fg);font:inherit;font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:11px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.btn2:hover{border-color:var(--fg-2)}
.btn2.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn2 svg{width:15px;height:15px}
.btn2.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.input{border:1px solid var(--stroke-2);background:var(--glass);color:var(--fg);font:inherit;font-size:14px;padding:8px 12px;border-radius:11px;min-width:0}

/* alerts strip */
.alerts{display:grid;gap:8px;margin-top:14px}
.al{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);background:var(--glass);font-size:14px}
.al i{width:9px;height:9px;border-radius:50%;flex:none}
.al.down{border-color:rgba(255,90,90,.35);background:rgba(255,90,90,.08)}
.al.down i{background:#ff5a5a;box-shadow:0 0 0 4px rgba(255,90,90,.18);animation:pulse 1.6s infinite}
.al.warn i{background:var(--wacht)}
.al small{margin-left:auto;font:12px var(--mono);color:var(--mute)}

/* monitoring table */
.mon{overflow-x:auto;padding:4px}
.mon table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
.mon th{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);text-align:left;padding:10px 12px;border-bottom:1px solid var(--stroke);position:sticky;top:0;background:var(--glass-2);cursor:pointer;user-select:none;white-space:nowrap}
.mon td{padding:9px 12px;border-bottom:1px solid var(--stroke);white-space:nowrap;font-variant-numeric:tabular-nums}
.mon tr:hover td{background:var(--accent-soft)}
.mon .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:1px}
.dot.up{background:var(--klaar)}.dot.down{background:#ff5a5a;box-shadow:0 0 0 4px rgba(255,90,90,.18)}.dot.unknown{background:var(--mute)}
.mon td a{color:var(--fg);text-decoration:none}.mon td a:hover{color:var(--accent)}
.mon .spark{width:120px;height:24px;display:block}
.mon .ssl.bad{color:#ff5a5a;font-weight:600}.mon .ssl.warn{color:var(--wacht);font-weight:600}
.mon .muted{color:var(--mute)}

/* uptime bar (heatstrip) */
.strip{display:flex;gap:2px;height:28px;align-items:stretch}
.strip i{flex:1;border-radius:2px;background:var(--klaar);opacity:.85}
.strip i.d{background:#ff5a5a;opacity:1}.strip i.n{background:var(--bg2)}

/* servers */
.srvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.sc{padding:20px;display:grid;gap:18px}
.sc .hd{display:flex;align-items:center;gap:10px}
.sc .hd b{font-size:18px;letter-spacing:-.02em}
.sc .hd small{margin-left:auto;font:12px var(--mono);color:var(--mute)}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gauge{display:grid;justify-items:center;gap:6px}
.gauge svg{width:88px;height:88px;transform:rotate(-90deg)}
.gauge circle.v{transition:stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1)}
.gauge .g{position:relative;width:88px;height:88px}
.gauge .g b{position:absolute;inset:0;display:grid;place-items:center;font:600 19px var(--sans);letter-spacing:-.03em}
.gauge span{font:11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.sc .facts{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.sc .facts b{color:var(--fg);font-weight:500}
.sc canvas{width:100%;height:56px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;position:relative;z-index:1;padding:24px}
.login form{width:min(380px,100%);padding:30px;display:grid;gap:14px}
.login h1{font-size:34px;margin:6px 0 4px}
.login .err{color:#ff5a5a;font-size:13.5px;min-height:1.2em;margin:0}

/* mobile: zijbalk wordt onderbalk */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;z-index:45;flex-direction:row;padding:8px max(10px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));border-right:0;border-top:1px solid var(--stroke)}
  .side .brand,.side .foot{display:none}
  .menu{display:flex;flex:1;justify-content:space-around}
  .menu a{flex-direction:column;gap:3px;font-size:10.5px;padding:6px 4px}
  .menu .badge{position:absolute;top:0;right:2px;margin:0;font-size:9.5px;padding:0 5px}
  .main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:110px}
  .main .top{margin:0 calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-inline:max(16px,env(safe-area-inset-right,0px))}
}
.kpi .s{position:relative;z-index:1;max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi canvas{width:46%;height:40px}

/* uitnodiging */
.login .lede{margin:0;color:var(--fg-2);font-size:15px;line-height:1.55}
.login .who{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--accent-soft);font:13px var(--mono);color:var(--fg-2)}
.login .who i{width:8px;height:8px;border-radius:50%;background:var(--klaar);box-shadow:0 0 0 4px color-mix(in srgb,var(--klaar) 22%,transparent)}
.login label{display:grid;gap:6px;font-size:12.5px;color:var(--mute)}
.login .pw{position:relative}.login .pw .input{width:100%;padding-right:64px}
.login .pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--mute);font:500 12px var(--mono);cursor:pointer;padding:6px 8px}
.meter{height:4px;border-radius:9px;background:var(--bg2);overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#ff5a5a,var(--wacht),var(--klaar));background-size:300% 100%;transition:width .35s cubic-bezier(.2,.8,.2,1),background-position .35s}
.login .hint{font-size:12px;color:var(--mute);margin:-6px 0 0}
.login .done{display:grid;gap:12px;justify-items:start}