/* Maskinvakta — felles designsystem for alle tavler */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --ink:#1B2130; --ink2:#535D6E; --ink3:#666F7E; --line:rgba(27,33,48,.08); --line2:rgba(27,33,48,.12);
  --ok:#2DB36A;  --ok-t:#13703C;  --ok-s:rgba(45,179,106,.14);
  --obs:#F2A60C; --obs-t:#875700; --obs-s:rgba(242,166,12,.18);
  --red:#EC3D34; --red-t:#B81F16; --red-s:rgba(236,61,52,.12);
  --off:#A3A9B3; --off-t:#5B6271; --off-s:rgba(120,128,142,.13);
  --glass:rgba(255,255,255,.62); --glass-b:rgba(255,255,255,.85);
  --track:rgba(27,33,48,.07);
}
body{margin:0;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
.mv{font-family:var(--font);color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.35}
.mv h1,.mv h2,.mv h3,.mv p{margin:0}
.mv button{font:inherit;color:inherit;cursor:pointer}
.mv a{color:inherit;text-decoration:none}

/* Bakgrunn: rolig gråblå, med et svakt lys i statusfargen øverst til venstre */
.bg{background-color:#ECEFF3;background-image:
  radial-gradient(900px 520px at 8% -10%,var(--amb,rgba(242,166,12,.20)),transparent 70%),
  radial-gradient(760px 620px at 100% -5%,rgba(150,172,210,.30),transparent 70%),
  radial-gradient(900px 700px at 55% 115%,rgba(196,204,222,.40),transparent 70%)}
.amb-ok{--amb:rgba(45,179,106,.17)} .amb-obs{--amb:rgba(242,166,12,.24)}
.amb-red{--amb:rgba(236,61,52,.20)} .amb-off{--amb:rgba(140,148,160,.16)}

/* Glass */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  border:1px solid var(--glass-b);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(27,33,48,.04),0 12px 32px rgba(27,33,48,.07)}
.glass-strong{background:rgba(255,255,255,.82)}

/* Skall på PC: meny + innhold */
.shell{display:flex;flex-wrap:wrap;gap:20px;padding:20px;min-height:100vh;align-items:flex-start}
.side{flex:1 1 220px;max-width:236px;padding:18px 12px;display:flex;flex-direction:column;gap:22px}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:12px;color:var(--ink2);font-size:15px}
.nav a svg{width:19px;height:19px;flex:none}
.nav a.on{background:rgba(255,255,255,.9);color:var(--ink);box-shadow:0 1px 2px rgba(27,33,48,.06),0 4px 12px rgba(27,33,48,.05)}
.nav .count{margin-left:auto;font-size:12px;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.machine{margin-top:auto;padding:12px;border-radius:14px;background:rgba(255,255,255,.5);font-size:12px;color:var(--ink3);display:flex;flex-direction:column;gap:2px}
.machine b{font-size:13px;color:var(--ink);font-weight:600}
@media (max-width:900px){.side{max-width:none;flex-basis:100%}.nav{flex-direction:row;overflow-x:auto}.machine{display:none}}

/* Topplinje i innholdet */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:4px 4px 0}
.h1{font-size:28px;font-weight:600;letter-spacing:-.025em}
.meta{font-size:13px;color:var(--ink3);display:flex;align-items:center;gap:8px}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-s)}

/* Statuslinje */
.status{display:flex;align-items:center;gap:22px;padding:22px 26px;flex-wrap:wrap}
.orb{width:52px;height:52px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75),rgba(255,255,255,0) 46%),var(--c);
  box-shadow:0 0 0 9px var(--cs),0 8px 22px var(--cs)}
.orb.ok{--c:var(--ok);--cs:var(--ok-s)} .orb.obs{--c:var(--obs);--cs:var(--obs-s)}
.orb.red{--c:var(--red);--cs:var(--red-s)} .orb.off{--c:var(--off);--cs:var(--off-s)}
.st-t{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.st-r{font-size:15px;color:var(--ink2);margin-top:4px}
.st-side{margin-left:auto;display:flex;gap:28px;flex-wrap:wrap}
.kv{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink3)}
.kv b{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}

/* Brikker */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:500;white-space:nowrap}
.chip .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.c-ok{background:var(--ok-s);color:var(--ok-t)} .c-obs{background:var(--obs-s);color:var(--obs-t)}
.c-red{background:var(--red-s);color:var(--red-t)} .c-off{background:var(--off-s);color:var(--off-t)}
.c-n{background:rgba(27,33,48,.06);color:var(--ink2)}
.t-ok{color:var(--ok-t)} .t-obs{color:var(--obs-t)} .t-red{color:var(--red-t)} .t-off{color:var(--off-t)}

/* Målere */
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:20px}
.gauge{padding:18px 20px 16px;display:flex;flex-direction:column;gap:6px}
.g-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink2)}
.ring{position:relative;width:176px;height:176px;align-self:center;margin:2px 0 -8px}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring-v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.big{font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1}
.big small{font-size:20px;font-weight:500;color:var(--ink2);letter-spacing:-.01em;margin-left:2px}
.sub{font-size:13px;color:var(--ink3)}
.spark{display:block;width:100%;height:46px;overflow:visible}
.spark-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3)}
.dim .big,.dim .kv b,.dim .rv{color:#9097A3}

/* Kort */
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 10px;flex-wrap:wrap}
.card-t{font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.row{display:grid;align-items:center;gap:14px;padding:12px 22px;border-top:1px solid var(--line)}
.rn{font-size:15px;font-weight:500;letter-spacing:-.005em}
.rs{font-size:13px;color:var(--ink3)}
.rv{font-size:15px;font-weight:500;text-align:right}
.mono{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.02em;color:#2B3342;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(225,230,238,.9));box-shadow:inset 0 0 0 1px rgba(27,33,48,.07)}
.mono.dk{background:linear-gradient(160deg,#4A5364,#232936);color:#fff;box-shadow:none}
.bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:#4B5566}
.bar.ok i{background:var(--ok)} .bar.obs i{background:var(--obs)} .bar.red i{background:var(--red)}
.slot{height:8px;border-radius:4px;flex:1}

/* Knapper og skjema */
.btn{height:40px;padding:0 15px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.85);font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-p{background:#1E2533;color:#fff;border-color:transparent}
.btn-g{background:transparent;border-color:transparent;color:var(--ink2)}
.btn-lg{height:50px;border-radius:14px;font-size:16px;padding:0 20px}
.inp{height:40px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.92);padding:0 12px;font:inherit;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.sw{width:46px;height:28px;border-radius:99px;background:#D3D8DF;position:relative;border:0;padding:0;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sw.on{background:var(--ok)} .sw.on::after{left:21px}
.dd{height:38px;padding:0 12px 0 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.88);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.dd svg{width:14px;height:14px;color:var(--ink3)}
.menu{padding:6px;border-radius:14px;min-width:190px;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(27,33,48,.18),0 2px 6px rgba(27,33,48,.06)}
.menu button{height:36px;border:0;background:transparent;border-radius:9px;text-align:left;padding:0 10px;font-size:14px;display:flex;align-items:center;justify-content:space-between}
.menu button.on{background:rgba(27,33,48,.06);font-weight:500}

/* Tabell */
.th{display:grid;align-items:center;gap:14px;padding:10px 22px;font-size:12px;color:var(--ink3);border-top:1px solid var(--line)}
.th button{border:0;background:transparent;padding:0;font-size:12px;color:var(--ink3);display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.th button.on{color:var(--ink);font-weight:600}
.grp{display:flex;align-items:center;gap:10px;padding:14px 22px 8px;font-size:13px;font-weight:600;color:var(--ink);border-top:1px solid var(--line);background:rgba(255,255,255,.35)}
.grp span{font-weight:400;color:var(--ink3)}

/* Graf */
.chart{position:relative}
.chart svg{display:block;width:100%;overflow:visible}
.axis{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);padding-top:8px}
.ylab{position:absolute;right:0;font-size:11px;font-weight:500;padding:2px 6px;border-radius:6px;transform:translateY(-50%)}
.tip{position:absolute;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,1);box-shadow:0 14px 40px rgba(27,33,48,.16);font-size:13px;display:flex;flex-direction:column;gap:6px;min-width:250px}
.stat{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink3)}
.stat b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}

/* Skuff, modal, toast */
.scrim{position:absolute;inset:0;background:rgba(27,33,48,.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer{position:absolute;top:12px;right:12px;bottom:12px;width:460px;border-radius:26px;background:rgba(250,251,253,.9);-webkit-backdrop-filter:blur(40px) saturate(170%);backdrop-filter:blur(40px) saturate(170%);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 80px rgba(27,33,48,.22);display:flex;flex-direction:column;overflow:hidden}
.modal{border-radius:26px;background:rgba(250,251,253,.92);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 80px rgba(27,33,48,.22)}
.toast{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 14px;border-radius:23px;background:rgba(30,37,51,.88);color:#fff;font-size:14px;font-weight:500;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 12px 30px rgba(27,33,48,.25)}
.toast .ic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.toast a{color:#B9C4D6;font-weight:500;margin-left:6px}

/* Skjelett */
.sk{border-radius:8px;background:linear-gradient(90deg,rgba(27,33,48,.06),rgba(27,33,48,.11),rgba(27,33,48,.06));background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* App-ikon (ren CSS) */
.appicon{--s:36px;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.26);flex:none;position:relative;
  background:linear-gradient(155deg,#4B5568 0%,#1A1F2A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.appicon::before,.appicon::after{content:"";position:absolute;inset:calc(var(--s)*.22);border-radius:50%;border:calc(var(--s)*.085) solid rgba(255,255,255,.2)}
.appicon::after{border-color:transparent;border-top-color:#fff;border-right-color:#fff;transform:rotate(-15deg)}

/* Telefon */
.phone{width:390px;position:relative;overflow:hidden}
.ph-pad{padding:62px 16px 120px;display:flex;flex-direction:column;gap:14px}
.ph-title{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tabbar{position:absolute;left:14px;right:14px;bottom:24px;height:66px;border-radius:33px;display:flex;justify-content:space-around;align-items:center;padding:0 6px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(27,33,48,.14)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:500;color:var(--ink2);width:68px;height:54px;border-radius:27px}
.tab svg{width:22px;height:22px}
.tab.on{color:var(--ink);background:rgba(27,33,48,.07)}
.sheet{position:absolute;left:0;right:0;bottom:0;border-radius:34px 34px 0 0;background:rgba(250,251,253,.94);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:0 -20px 60px rgba(27,33,48,.2);border-top:1px solid #fff}
.grab{width:38px;height:5px;border-radius:3px;background:rgba(27,33,48,.18);margin:8px auto 0}

/* Widgets på hjemskjerm (iPhone-mål i pt) */
.w{border-radius:24px;overflow:hidden;position:relative;font-family:var(--font);font-variant-numeric:tabular-nums}
.w-s{width:158px;height:158px} .w-m{width:338px;height:158px} .w-l{width:338px;height:354px}
.wl{background:linear-gradient(170deg,#FFFFFF,#F1F3F7);color:var(--ink);box-shadow:0 8px 24px rgba(27,33,48,.10)}
.wd{background:linear-gradient(170deg,#262A33,#15181E);color:#F2F4F7}
.wd .wsub{color:#A7AEBB}
.wt{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:#fff;border:1px solid rgba(255,255,255,.22)}
.wt .wsub{color:rgba(255,255,255,.72)}
.wsub{font-size:11px;color:var(--ink3);font-weight:500}
.wlab{font-size:11px;font-weight:600;letter-spacing:.01em}

/* Låst skjerm (iOS tegner disse i én farge) */
.acc{color:rgba(255,255,255,.95);font-family:var(--font);font-variant-numeric:tabular-nums}
.acc-c{width:72px;height:72px;border-radius:50%;position:relative;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.acc-r{width:172px;height:76px;border-radius:18px;padding:8px 10px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;gap:2px}

/* Push-varsler */
.ntf{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:12px 14px;border-radius:24px;font-family:var(--font);
  background:rgba(246,247,250,.78);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);color:#14181F;box-shadow:0 6px 24px rgba(0,0,0,.10)}
.ntf.dk{background:rgba(40,43,52,.72);color:#F3F4F7}
.ntf-h{display:flex;justify-content:space-between;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ntf-h span{font-weight:400;font-size:13px;opacity:.6}
.ntf-b{font-size:15px;line-height:1.3;letter-spacing:-.01em}