/* ================= Qteco Status — stylesheet =================
   Gebaseerd op het Qteco statuspagina-design (dark + light mode).
   Statusniveaus: ok (operationeel) · warn (verminderd) · down (verstoring)
   · maint (onderhoud) · unknown (bron onbereikbaar). */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --fd:'Space Grotesk',Arial,sans-serif;
  --fs:'IBM Plex Sans',Calibri,Arial,sans-serif;
  --fm:'IBM Plex Mono',Consolas,monospace;
  --red:#E11B2E; --red-bright:#FF3349; --indigo:#262262; --violet:#7C74E8;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --bg:#0A081E; --bg2:#0E0B26;
  --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.03);
  --bd:rgba(255,255,255,.13); --bd-soft:rgba(255,255,255,.08);
  --heading:#F3F2FB; --text:rgba(234,233,245,.72); --soft:rgba(234,233,245,.5); --mute:rgba(234,233,245,.36);
  --ok:#3DDC8A; --ok-soft:rgba(61,220,138,.14);
  --warn:#E8A13D; --warn-soft:rgba(232,161,61,.14);
  --down:#FF3349; --down-soft:rgba(255,51,73,.14);
  --accent:#7C74E8; --accent-soft:rgba(124,116,232,.13);
  --grid-line:rgba(255,255,255,.05);
  --nav-bg:rgba(10,8,30,.82); --shadow:none;
  --bar:rgba(255,255,255,.10);
}
html[data-theme="light"]{
  --bg:#F4F3FA; --bg2:#EDECF5;
  --card:#FFFFFF; --card2:#FAFAFD;
  --bd:#E2E1EC; --bd-soft:#ECEBF3;
  --heading:#262262; --text:#4A4860; --soft:#6E6C84; --mute:#9B99AE;
  --ok:#149A57; --ok-soft:rgba(20,154,87,.10);
  --warn:#B36F10; --warn-soft:rgba(179,111,16,.12);
  --down:#E11B2E; --down-soft:rgba(225,27,46,.10);
  --accent:#423B9E; --accent-soft:rgba(66,59,158,.10);
  --grid-line:rgba(38,34,98,.055);
  --nav-bg:rgba(244,243,250,.85); --shadow:0 4px 24px rgba(16,13,41,.08);
  --bar:rgba(38,34,98,.10);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--fs);line-height:1.6;min-height:100vh;position:relative;overflow-x:hidden;transition:background .3s,color .3s;}
::selection{background:#423B9E;color:#fff;}
a{color:var(--soft);text-decoration:none;transition:color .15s;}
a:hover{color:var(--heading);}
.gridbg{position:fixed;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 80%);pointer-events:none;z-index:0;}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;transition:opacity .3s;}
html[data-theme="dark"] .glow{background:radial-gradient(ellipse 55% 38% at 50% -6%,rgba(92,84,192,.30),transparent 70%),radial-gradient(ellipse 30% 22% at 78% 18%,rgba(61,220,138,.07),transparent 70%);}
html[data-theme="light"] .glow{background:radial-gradient(ellipse 55% 38% at 50% -6%,rgba(92,84,192,.12),transparent 70%);}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--bd-soft);}
.nav-in{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:16px;}
.brand{display:inline-flex;align-items:center;}
.brand img{height:24px;width:auto;display:block;}
html[data-theme="dark"] .logo-light{display:none;}
html[data-theme="light"] .logo-dark{display:none;}
.nav-sep{width:1px;height:20px;background:var(--bd);}
.nav-sub{font-family:var(--fm);font-size:12px;letter-spacing:.12em;color:var(--mute);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.clock{font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
.clock .tz{color:var(--mute);}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--bd);background:transparent;color:var(--heading);cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--ease);}
.theme-btn:hover{border-color:var(--heading);background:var(--card);transform:translateY(-1px);}
.theme-btn svg{width:17px;height:17px;}
html[data-theme="dark"] .icon-moon{display:none;}
html[data-theme="light"] .icon-sun{display:none;}

/* ---------- layout ---------- */
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px 80px;}
.eyebrow{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--red-bright);display:flex;align-items:center;gap:10px;}
html[data-theme="light"] .eyebrow{color:var(--red);}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--red);flex:none;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:64px 0 22px;}
.sec-head h2{font-family:var(--fd);font-weight:600;font-size:23px;letter-spacing:-.02em;color:var(--heading);}
.sec-head .hint{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}

/* ---------- hero ---------- */
.hero{padding:56px 0 0;}
.hero .eyebrow{margin-bottom:20px;}
.banner{position:relative;overflow:hidden;border:1px solid var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--shadow);padding:34px 36px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.banner::after{content:"";position:absolute;top:0;bottom:0;width:34%;background:linear-gradient(105deg,transparent,rgba(61,220,138,.06) 45%,rgba(124,116,232,.07) 55%,transparent);transform:skewX(-12deg);animation:scan 7s linear infinite;pointer-events:none;}
html[data-theme="light"] .banner::after{background:linear-gradient(105deg,transparent,rgba(20,154,87,.05) 45%,rgba(66,59,158,.05) 55%,transparent);}
@keyframes scan{from{left:-40%;}to{left:110%;}}
.pulse{position:relative;width:58px;height:58px;flex:none;border-radius:50%;background:var(--ok-soft);display:flex;align-items:center;justify-content:center;}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--ok);opacity:0;animation:ring 2.6s var(--ease) infinite;}
.pulse::after{animation-delay:1.3s;}
@keyframes ring{0%{transform:scale(.7);opacity:.7;}100%{transform:scale(1.75);opacity:0;}}
.pulse svg{width:26px;height:26px;stroke:var(--ok);}
.banner-txt{flex:1;min-width:260px;}
.banner h1{font-family:var(--fd);font-weight:600;font-size:clamp(26px,4vw,38px);letter-spacing:-.025em;line-height:1.1;color:var(--heading);}
.banner h1 .d{color:var(--ok);}
.banner p{margin-top:8px;font-size:15px;color:var(--soft);}
.banner-meta{display:flex;flex-direction:column;gap:9px;align-items:flex-end;}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--bd);border-radius:999px;padding:7px 14px;color:var(--soft);white-space:nowrap;background:var(--card2);}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blink 2.2s ease-in-out infinite;}
@keyframes blink{50%{opacity:.45;}}
.chip.upd .dot{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:none;}
.chip.flash{border-color:var(--ok);}
.chip.offline{border-color:var(--warn);color:var(--warn);}
.chip.offline .dot{background:var(--warn);box-shadow:0 0 8px var(--warn);}

/* banner-statusvarianten */
.banner[data-state="degraded"] .pulse{background:var(--warn-soft);}
.banner[data-state="degraded"] .pulse::before,.banner[data-state="degraded"] .pulse::after{border-color:var(--warn);}
.banner[data-state="degraded"] .pulse svg{stroke:var(--warn);}
.banner[data-state="degraded"] h1 .d{color:var(--warn);}
.banner[data-state="outage"] .pulse{background:var(--down-soft);}
.banner[data-state="outage"] .pulse::before,.banner[data-state="outage"] .pulse::after{border-color:var(--down);}
.banner[data-state="outage"] .pulse svg{stroke:var(--down);}
.banner[data-state="outage"] h1 .d{color:var(--down);}
.banner[data-state="maintenance"] .pulse{background:var(--accent-soft);}
.banner[data-state="maintenance"] .pulse::before,.banner[data-state="maintenance"] .pulse::after{border-color:var(--accent);}
.banner[data-state="maintenance"] .pulse svg{stroke:var(--accent);}
.banner[data-state="maintenance"] h1 .d{color:var(--accent);}
.banner[data-state="unknown"] .pulse{background:var(--card2);}
.banner[data-state="unknown"] .pulse::before,.banner[data-state="unknown"] .pulse::after{border-color:var(--mute);}
.banner[data-state="unknown"] .pulse svg{stroke:var(--mute);}
.banner[data-state="unknown"] h1 .d{color:var(--mute);}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px;}
.kpi{border:1px solid var(--bd);border-radius:14px;background:var(--card);box-shadow:var(--shadow);padding:22px 24px 20px;transition:transform .25s var(--ease),border-color .25s;}
.kpi:hover{transform:translateY(-3px);border-color:var(--accent);}
.kpi .k-label{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:8px;}
.kpi .k-label .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;}
.kpi .k-label .dot.warn{background:var(--warn);}
.kpi .k-label .dot.down{background:var(--down);}
.kpi .k-label .dot.maint{background:var(--accent);}
.kpi .k-value{font-family:var(--fd);font-weight:600;font-size:clamp(30px,3.2vw,40px);letter-spacing:-.03em;color:var(--heading);margin-top:12px;line-height:1;font-variant-numeric:tabular-nums;}
.kpi .k-value .unit{font-size:.5em;color:var(--soft);letter-spacing:0;}
.kpi .k-sub{font-size:12.5px;color:var(--soft);margin-top:9px;}

/* ---------- services ---------- */
.svc-card{border:1px solid var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--shadow);overflow:hidden;}
.svc{display:grid;grid-template-columns:minmax(230px,1.15fr) minmax(0,2fr) auto auto;gap:10px 26px;align-items:center;padding:19px 26px;border-bottom:1px solid var(--bd-soft);}
.svc:last-of-type{border-bottom:none;}
.svc-name{font-family:var(--fd);font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--heading);}
.svc-name a{color:inherit;}
.svc-name a:hover{color:var(--accent);}
.svc-name .ext{font-size:11px;color:var(--mute);margin-left:5px;}
.svc-desc{font-size:12px;color:var(--mute);margin-top:2px;}
.svc-desc.warn{color:var(--warn);}
.svc-desc.down{color:var(--down);}
.bars{display:flex;gap:2.5px;height:30px;align-items:stretch;min-width:0;}
.bars i{flex:1;border-radius:2px;background:var(--ok);opacity:.85;transform-origin:bottom;transition:opacity .15s, transform .15s;}
.bars i:hover{opacity:1;transform:scaleY(1.12);}
.bars i.w{background:var(--warn);}
.bars i.x{background:var(--down);}
.bars i.m{background:var(--accent);}
.bars i.e{background:var(--bar);}
.svc-pct{font-family:var(--fm);font-size:12.5px;color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
.status-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:6px 12px;border-radius:999px;white-space:nowrap;}
.status-tag .dot{width:6px;height:6px;border-radius:50%;}
.status-ok{background:var(--ok-soft);color:var(--ok);}
.status-ok .dot{background:var(--ok);}
.status-warn{background:var(--warn-soft);color:var(--warn);}
.status-warn .dot{background:var(--warn);}
.status-down{background:var(--down-soft);color:var(--down);}
.status-down .dot{background:var(--down);}
.status-maint{background:var(--accent-soft);color:var(--accent);}
.status-maint .dot{background:var(--accent);}
.status-unknown{background:var(--card2);color:var(--mute);border:1px solid var(--bd-soft);}
.status-unknown .dot{background:var(--mute);}
.bars-legend{display:flex;justify-content:space-between;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:12px 26px 16px;border-top:1px solid var(--bd-soft);background:var(--card2);}
.svc.skeleton .svc-name,.svc.skeleton .svc-desc{color:var(--mute);}

/* ---------- telemetry ---------- */
.tele{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.tele-card{border:1px solid var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--shadow);padding:22px 24px 16px;min-width:0;}
.tele-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;}
.tele-head .t-label{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
.tele-head .t-val{font-family:var(--fd);font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--heading);font-variant-numeric:tabular-nums;}
.tele-head .t-val .unit{font-size:13px;color:var(--soft);}
canvas.spark{width:100%;height:150px;display:block;}
.noc{grid-column:1 / -1;border:1px solid var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--shadow);overflow:hidden;}
.noc-head{display:flex;align-items:center;gap:10px;padding:16px 24px;border-bottom:1px solid var(--bd-soft);}
.noc-head .t-label{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
.noc-head .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blink 2.2s ease-in-out infinite;}
.noc-list{list-style:none;font-family:var(--fm);font-size:12.5px;}
.noc-list li{display:flex;gap:18px;padding:11px 24px;border-bottom:1px solid var(--bd-soft);animation:rowin .45s var(--ease);}
.noc-list li:last-child{border-bottom:none;}
@keyframes rowin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.noc-list .t{color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums;}
.noc-list .m{color:var(--text);}
.noc-list .ok{color:var(--ok);}
.noc-list .warn{color:var(--warn);}
.noc-list .down{color:var(--down);}

/* ---------- incidents ---------- */
.timeline{border-left:2px solid var(--bd);margin-left:7px;display:flex;flex-direction:column;gap:26px;padding:4px 0 4px 26px;}
.ev{position:relative;}
.ev::before{content:"";position:absolute;left:-33.5px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:3px solid var(--ok);}
.ev.act::before{border-color:var(--down);}
.ev.maint::before{border-color:var(--accent);}
.ev.plan::before{border-color:var(--warn);}
.ev-tag{font-family:var(--fm);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:7px;}
.ev.res .ev-tag{background:var(--ok-soft);color:var(--ok);}
.ev.act .ev-tag{background:var(--down-soft);color:var(--down);}
.ev.maint .ev-tag{background:var(--accent-soft);color:var(--accent);}
.ev.plan .ev-tag{background:var(--warn-soft);color:var(--warn);}
.ev h3{font-family:var(--fd);font-weight:600;font-size:16.5px;letter-spacing:-.01em;color:var(--heading);}
.ev h3 a{color:inherit;}
.ev h3 a:hover{color:var(--accent);}
.ev .ev-when{font-family:var(--fm);font-size:11px;letter-spacing:.08em;color:var(--mute);margin-top:3px;}
.ev p{font-size:14px;max-width:72ch;margin-top:7px;text-wrap:pretty;white-space:pre-line;}
.timeline-empty{font-size:14px;color:var(--soft);padding:8px 0 8px 26px;border-left:2px solid var(--bd);margin-left:7px;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--bd-soft);margin-top:72px;padding:30px 0 0;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.foot .l{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.foot .l a{color:var(--mute);}
.foot .l a:hover{color:var(--heading);}
.sep{margin:0 8px;color:var(--bd);}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:600;font-size:14px;border-radius:11px;padding:12px 20px;border:1.5px solid var(--bd);color:var(--heading);transition:all .2s var(--ease);}
.btn:hover{border-color:var(--heading);background:var(--card);transform:translateY(-2px);color:var(--heading);}
.note{font-size:11.5px;color:var(--mute);margin-top:14px;}

@media (max-width:960px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .tele{grid-template-columns:1fr;}
  .svc{grid-template-columns:1fr auto;grid-template-areas:"name tag" "bars bars" "pct pct";}
  .svc-info{grid-area:name;} .svc .status-tag{grid-area:tag;} .svc .bars{grid-area:bars;} .svc-pct{grid-area:pct;}
  .banner-meta{align-items:flex-start;}
  .clock .date{display:none;}
}
@media (max-width:560px){.kpis{grid-template-columns:1fr;}.nav-sub{display:none;}}
@media (prefers-reduced-motion: reduce){
  .banner::after,.pulse::before,.pulse::after,.chip .dot,.noc-head .dot{animation:none;}
  .noc-list li{animation:none;}
}