:root{--bg:#0b1a2b;--card:#12263d;--card2:#17304c;--fg:#e8eef5;--muted:#8fa3b8;--ok:#2fbf71;--stale:#f0a030;--alarm:#ff4d4f;--nodata:#6b7c8f;--accent:#4aa3ff;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button{font:inherit;color:inherit;background:var(--accent);border:0;border-radius:8px;padding:.5em .9em;cursor:pointer}
button.ghost{background:transparent;border:1px solid #2c4866}
input{font:inherit;color:var(--fg);background:#0d2034;border:1px solid #2c4866;border-radius:8px;padding:.45em .6em}
.muted{color:var(--muted)} .center{text-align:center} .err{color:var(--alarm)}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:.6em .8em;padding-top:max(.6em,env(safe-area-inset-top));background:#0f2a44;border-bottom:1px solid #1f3b5a}
.brand{display:flex;align-items:center;gap:.5em;font-weight:700;font-size:1.1em}.brand small{color:var(--muted);font-weight:400;font-size:.7em}
.brand img{border-radius:6px}
.actions{display:flex;gap:.4em;align-items:center;position:relative}.actions form{margin:0}
.actions button{padding:.4em .7em;font-size:.9em}
#btn-refresh.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.menu{position:absolute;top:110%;right:0;background:var(--card2);border:1px solid #2c4866;border-radius:10px;padding:.3em;display:flex;flex-direction:column;gap:.2em;min-width:12em;z-index:10}
.menu button{background:transparent;text-align:left}
.menu button:hover{background:#21405f}
.toolbar{display:flex;flex-wrap:wrap;gap:.5em;padding:.7em .8em;align-items:center}
.toolbar input[type=search]{flex:1 1 220px}
.chips{display:flex;gap:.3em;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid #2c4866;padding:.3em .7em;border-radius:999px;font-size:.88em}
.chip.on{background:var(--accent);border-color:var(--accent);color:#04121f}
.toggle{display:flex;gap:.35em;align-items:center;font-size:.9em;color:var(--muted)}
.summary{padding:0 .9em .6em;font-size:.9em}
.ok-t{color:var(--ok)}.stale-t{color:var(--stale)}.alarm-t{color:var(--alarm)}
main#list{padding:0 .6em 3em;max-width:1100px;margin:0 auto}
details.dash{background:var(--card);border-radius:12px;margin:.5em 0;overflow:hidden;border:1px solid #1d3a58}
details.dash>summary{list-style:none;cursor:pointer;padding:.7em .9em;display:flex;justify-content:space-between;gap:.5em;align-items:center;flex-wrap:wrap}
details.dash>summary::-webkit-details-marker{display:none}
details.dash>summary::before{content:"▸";color:var(--muted);margin-right:.2em}
details.dash[open]>summary::before{content:"▾"}
.dash-title{font-weight:600;flex:1 1 auto}
.badges{display:flex;gap:.3em;flex-wrap:wrap}
.b,.tag{font-size:.75em;padding:.15em .55em;border-radius:999px;background:#21405f}
.b.alarm{background:var(--alarm);color:#fff}.b.stale{background:var(--stale);color:#1b1200}.b.nodata{background:var(--nodata)}.b.count{background:transparent;color:var(--muted)}
.tag{background:#2a4f75}
.rows{padding:0 .5em .6em}
.panel-title{font-size:.78em;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.7em .4em .25em}
.sensor{display:grid;grid-template-columns:1fr auto auto auto auto;gap:.6em;align-items:center;padding:.5em .5em;border-radius:8px;background:var(--card2);margin:.2em 0;border-left:4px solid var(--ok)}
.sensor.stale{border-left-color:var(--stale)}.sensor.alarm{border-left-color:var(--alarm);background:#3a1f28}.sensor.nodata,.sensor.error{border-left-color:var(--nodata);opacity:.75}.sensor.warn{border-left-color:#8fbf2f}
.sensor .name{word-break:break-word;font-size:.92em}
.sensor .tech{display:block;color:var(--muted);font-size:.75em}
.sensor .reason{display:block;color:var(--alarm);font-size:.8em}
.sensor.stale .reason{color:var(--stale)}
.sensor .val{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sensor .time{text-align:right;font-size:.82em;white-space:nowrap}.sensor .time small{display:block;color:var(--muted)}
.st{font-size:.72em;padding:.15em .5em;border-radius:6px;background:var(--ok);color:#04210f;white-space:nowrap}
.st.stale{background:var(--stale);color:#1b1200}.st.alarm{background:var(--alarm);color:#fff}.st.nodata,.st.error{background:var(--nodata);color:#fff}.st.warn{background:#8fbf2f;color:#1b2400}
.bell{background:transparent;padding:.2em .3em;font-size:1.05em;opacity:.55}.bell.on{opacity:1}

@media (max-width:640px){
  .sensor{grid-template-columns:1fr auto auto;grid-template-areas:"name val bell" "time time st"}
  .sensor .name{grid-area:name}.sensor .val{grid-area:val}.sensor .bell{grid-area:bell}
  .sensor .time{grid-area:time;text-align:left;display:flex;gap:.5em}.sensor .time small{display:inline}
  .sensor .st{grid-area:st;justify-self:end}
  #btn-push{font-size:.8em}
}
dialog{background:var(--card2);color:var(--fg);border:1px solid #2c4866;border-radius:14px;max-width:min(520px,94vw);width:100%}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{margin:.1em 0 .2em;font-size:1.05em;word-break:break-word}
fieldset{border:1px solid #2c4866;border-radius:10px;margin:.6em 0}
label.row{display:flex;flex-wrap:wrap;align-items:center;gap:.45em;margin:.55em 0}
label.row input:not([type=checkbox]){width:7em}
input[type=checkbox]{width:1.2em;height:1.2em;accent-color:var(--accent)}
.dlg-actions{display:flex;justify-content:flex-end;gap:.5em}
.toast{position:fixed;left:50%;bottom:max(1.2em,env(safe-area-inset-bottom));transform:translateX(-50%);background:#21405f;padding:.7em 1em;border-radius:10px;z-index:20;max-width:92vw;box-shadow:0 6px 20px rgba(0,0,0,.4)}
body.login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1em}
.login-box{background:var(--card);padding:1.6em;border-radius:16px;width:100%;max-width:360px;text-align:center}
.login-box.wide{max-width:760px;text-align:left}
.login-box img{border-radius:14px}
.login-box form{display:flex;flex-direction:column;gap:.8em;text-align:left;margin-top:1em}
.login-box label{display:flex;flex-direction:column;gap:.3em;font-size:.9em;color:var(--muted)}
pre.code{background:#0d2034;padding:.8em;border-radius:8px;overflow:auto;font-size:.8em;white-space:pre-wrap;word-break:break-all}
a{color:var(--accent)}
@media (max-width:480px){.brand small{display:none}.actions button{padding:.35em .5em;font-size:.8em}}
/* v1b */
a.btn{display:inline-block;text-decoration:none;color:var(--fg);border:1px solid #2c4866;border-radius:8px;padding:.4em .7em;font-size:.9em;white-space:nowrap}
a.brand{color:var(--fg);text-decoration:none}
button.danger{background:#7a1f25;border:1px solid var(--alarm)}
button.small{padding:.25em .6em;font-size:.82em}
button:disabled{opacity:.5;cursor:default}
main.page{max-width:900px;margin:0 auto;padding:.8em}
main.page h1{font-size:1.3em}
.card{background:var(--card);border:1px solid #1d3a58;border-radius:12px;padding:.9em 1em;margin:.8em 0}
.card h2{font-size:1.05em;margin:.1em 0 .6em}
.card.hl{border-color:var(--accent)}
form.inline{display:flex;gap:.5em;flex-wrap:wrap}form.inline input{flex:1 1 220px}
form.stack{display:flex;flex-direction:column;gap:.7em;max-width:380px}
form.stack label{display:flex;flex-direction:column;gap:.3em;font-size:.9em;color:var(--muted)}
.copyrow{display:flex;gap:.5em}.copyrow input{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:.85em}
.tbl{width:100%;border-collapse:collapse;font-size:.9em}
.tbl th,.tbl td{text-align:left;padding:.45em .4em;border-bottom:1px solid #1f3b5a;vertical-align:top}
.tbl th{color:var(--muted);font-weight:500}
.tbl td.acts{display:flex;gap:.3em;flex-wrap:wrap;justify-content:flex-end}.tbl form{margin:0}
.flash-msg{background:#173d2a;border:1px solid var(--ok);padding:.6em .8em;border-radius:8px}
@media (max-width:640px){.tbl th:nth-child(2),.tbl td:nth-child(2){display:none}.uname{display:none}}
/* v1c */
#btn-push.on{border-color:var(--ok)}
.kvs{display:flex;flex-direction:column;gap:.3em;margin:.4em 0 .8em}
.kv{display:flex;justify-content:space-between;gap:1em;border-bottom:1px solid #1f3b5a;padding:.3em 0;font-size:.92em}
.kv span:last-child{text-align:right}
.dlg-actions.wrap{flex-wrap:wrap;justify-content:flex-start}
.push-result{margin-top:.8em;font-size:.92em;white-space:pre-wrap}
ul.res{margin:.4em 0;padding-left:1.2em;font-size:.88em}
.small-text{font-size:.85em}.small-text h3{font-size:.95em;margin:.8em 0 .2em}
@media (max-width:480px){#btn-push .lbl{display:none}}
/* v1d */
.sum-link{background:none;border:0;padding:.15em .1em;margin:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;border-radius:4px}
.sum-link.alarm-t{color:var(--alarm);font-weight:700}.sum-link.stale-t{color:var(--stale)}.sum-link.muted{color:var(--muted)}
.sum-link .pos{text-decoration:none;font-weight:400}
.sum-link:focus-visible,.badge-btn:focus-visible,.sensor:focus-visible,.sensor:focus{outline:2px solid var(--accent);outline-offset:2px}
.badge-btn{border:0;cursor:pointer;font:inherit;font-size:.75em;padding:.2em .6em;line-height:1.3}
.badge-btn.alarm{background:var(--alarm);color:#fff}.badge-btn.stale{background:var(--stale);color:#1b1200}.badge-btn.nodata{background:var(--nodata);color:#fff}
.badge-btn:hover{filter:brightness(1.15)}
.summary{line-height:1.9}
.navbar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(.8em,env(safe-area-inset-bottom));z-index:15;display:flex;gap:.4em;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--card2);border:1px solid var(--accent);border-radius:12px;padding:.45em .6em;box-shadow:0 6px 20px rgba(0,0,0,.5);max-width:96vw}
.navbar[hidden]{display:none}
.navbar .nav-txt{font-size:.9em;font-weight:600;padding:0 .3em}
body.has-nav main#list{padding-bottom:6em}
body.has-nav .toast{bottom:5.5em}
@keyframes flashrow{0%,40%{box-shadow:0 0 0 3px var(--accent);background:#24507a}100%{box-shadow:0 0 0 0 transparent}}
.sensor.flash{animation:flashrow 2.4s ease-out}
@media (prefers-reduced-motion:reduce){.sensor.flash{animation:none;box-shadow:0 0 0 3px var(--accent)}}

/* v1e: avvikelse */
:root{--anomaly:#a66bff}
.anomaly-t{color:var(--anomaly)}
.sum-link.anomaly-t{color:var(--anomaly);font-weight:700}
.b.anomaly{background:var(--anomaly);color:#fff}
.sensor.anomaly{border-left-color:var(--anomaly);background:#2c2240}
.sensor.anomaly .reason{color:#cdb1ff}
.st.anomaly{background:var(--anomaly);color:#fff}
.spark{margin:.3em 0 .4em}
.spark-svg{width:100%;height:64px;display:block;background:#0f1d2c;border-radius:6px}
.spark-band{fill:#a66bff;fill-opacity:.16}
.spark-line{fill:none;stroke:#6fc3ff;stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark-dot{fill:#fff}
.bulk{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.5em;border-top:1px solid #2c4866;padding-top:.5em}
.bulk[hidden]{display:none}
.bulk p{flex-basis:100%;margin:0}
.small-t{font-size:.85em}
select{font:inherit;background:#0f1d2c;color:inherit;border:1px solid #2c4866;border-radius:6px;padding:.25em .4em}
label.row.nowrap{flex-wrap:nowrap;align-items:flex-start}
label.row.nowrap input{margin-top:.2em}
#dlg-spark-cap[hidden]{display:none}

/* ---------- v1f: historik, import, larmlogg ---------- */
.hist{margin:.4em 0 .6em}
.chips.ranges{margin:.2em 0 .3em}
.chips.ranges .chip{padding:.2em .65em;font-size:.82em}
.spark-minmax{fill:var(--accent);opacity:.18;stroke:none}
main.page.wide{max-width:1200px}
.filters{display:flex;flex-wrap:wrap;gap:.5em .8em;align-items:flex-end}
.filters label{display:flex;flex-direction:column;gap:.2em;font-size:.8em;color:var(--muted)}
.filters label.grow{flex:1 1 12em}
.filters select,.filters input{font:inherit;font-size:.95rem;color:var(--fg);background:#0d2034;border:1px solid #2c4866;border-radius:8px;padding:.4em .5em;max-width:16em}
.filters input[type=search]{max-width:none;width:100%}
.filter-btns{display:flex;gap:.4em;align-items:center}
.log-sum{font-size:.9em;color:var(--muted)}
.log-tbl tr[data-href]{cursor:pointer}
.log-tbl tr[data-href]:hover td,.log-tbl tr[data-href]:focus td{background:#17304c}
.log-tbl tr.ongoing td:first-child{border-left:3px solid var(--alarm)}
.nowrap{white-space:nowrap}
.ltype{display:inline-block;font-size:.78em;padding:.1em .45em;border-radius:6px;background:var(--nodata);color:#fff;white-space:nowrap}
.ltype.min,.ltype.max{background:var(--alarm)}.ltype.silent{background:var(--stale);color:#1b1200}
.ltype.anomaly,.ltype.stuck,.ltype.trend{background:var(--anomaly)}.ltype.system{background:#555}
@media (max-width:700px){.log-tbl th:nth-child(2),.log-tbl td:nth-child(2){display:table-cell}.log-tbl th:nth-child(n+6),.log-tbl td:nth-child(n+6){display:none}.top .lbl{display:none}.log-tbl{font-size:.82em}}
.map-tbl select{max-width:100%;width:100%;font:inherit;font-size:.9rem;color:var(--fg);background:#0d2034;border:1px solid #2c4866;border-radius:8px;padding:.35em .4em}
.map-tbl tr.nomatch td:first-child{color:var(--stale)}
.upload-form{display:flex;flex-wrap:wrap;gap:.6em;align-items:center}
.help summary{cursor:pointer;color:var(--accent);margin-top:.6em}
.help pre{background:#0d2034;border:1px solid #2c4866;border-radius:8px;padding:.6em;overflow:auto;font-size:.82em}
.card select{font:inherit;color:var(--fg);background:#0d2034;border:1px solid #2c4866;border-radius:8px;padding:.35em .4em}
.top{flex-wrap:wrap}.actions{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:480px){.actions a.btn{padding:.35em .5em;font-size:.8em}}
@media (max-width:640px){.imp-tbl th:nth-child(2),.imp-tbl td:nth-child(2){display:table-cell}.imp-tbl th:nth-child(3),.imp-tbl td:nth-child(3){display:none}.map-tbl th:nth-child(2),.map-tbl td:nth-child(2){display:table-cell}}