/* nov dash — MHE Grunti (Budna)
   Panel reTerminal DM 1280×800 (kiosk, dotik) + telefon/PC prek VPN.
   Barve SAMO prek žetonov spodaj; komponente nikoli ne vpisujejo hex vrednosti.
   Stanje se nikoli ne kaže samo z barvo: vedno še ikona ali besedilo. */
:root{
  --bg:#0b0f15; --panel:#141a23; --panel2:#1b2330; --panel3:#232d3c; --border:#2a3443;
  --fg:#e9eef4; --fg2:#c3cedb; --muted:#8b98a9;
  --accent:#2f81f7; --accent-fg:#fff;
  --ok:#3fb950; --ok-bg:rgba(63,185,80,.14);
  --warn:#d29922; --warn-bg:rgba(210,153,34,.16);
  --trip:#f85149; --trip-bg:rgba(248,81,73,.16);
  --idle:#6e7b8c; --live:#3fb950; --dead:#3a4555;
  --hdr:64px; --gap:12px; --r:14px; --pad:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);display:flex;flex-direction:column;min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.35;
  -webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
button{font:inherit;color:inherit}
.num,.v,[data-v]{font-variant-numeric:tabular-nums}

/* Panel (kiosk): aplikacija, ne spletna stran — brez izbire besedila,
   brez drsnikov, telo zaklenjeno; drsi samo .page (core.js "DRSENJE"). */
html.kiosk body{position:fixed;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;overscroll-behavior:none}
html.kiosk, html.kiosk *{cursor:none !important}
html.kiosk *::-webkit-scrollbar{display:none}
html.kiosk *{scrollbar-width:none}
html.kiosk .page{overflow-y:auto;touch-action:none;overscroll-behavior:contain}

/* ===================== GLAVA ===================== */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:var(--hdr);
  flex:0 0 var(--hdr);padding:0 10px;background:var(--panel);border-bottom:1px solid var(--border)}
.hbtn{position:relative;flex:0 0 auto;width:58px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:var(--panel2);border:1px solid var(--border)}
.hbtn:active,.hbtn.cur{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.hbtn svg{width:28px;height:28px}
.hbtn .dot{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 2px var(--panel);display:none}
.hbtn.admin .dot{display:block}
.clock{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;height:48px;
  padding:0 10px;border-radius:12px;background:var(--panel2);border:1px solid var(--border);line-height:1.1}
.clock b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.clock span{font-size:11px;color:var(--muted);font-weight:700}
.crumb{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.crumb b{font-size:19px;font-weight:800}
.crumb span{font-size:19px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.pills{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;font-size:13px;
  font-weight:700;white-space:nowrap;background:var(--panel2);border:1px solid var(--border);color:var(--fg2)}
.pill i{font-style:normal}
.pill.ok{color:var(--ok)} .pill.warn{background:var(--warn);border-color:var(--warn);color:#111}
.pill.trip{background:var(--trip);border-color:var(--trip);color:#fff}
.pill.mock{color:var(--warn);border-style:dashed}
@media(max-width:900px){ #pill-conn{display:none} }
@media(max-width:640px){
  :root{--hdr:56px;--pad:12px;--gap:10px}
  .hbtn{width:48px;height:42px} .crumb b{display:none} .crumb span{font-size:17px;color:var(--fg)}
  #pill-safety{display:none} .pill{padding:0 10px}
  .crumb span{font-size:16px} .tabs a{padding:9px 12px;font-size:14px}
  .tile .n{font-size:24px} .big{font-size:26px}
  .hide-sm{display:none}
}

.banner{margin:0;padding:10px 14px;font-weight:700;display:flex;gap:10px;align-items:center}
.banner.trip{background:var(--trip);color:#fff} .banner.warn{background:var(--warn);color:#111}

/* ===================== VSEBINA ===================== */
.page{flex:1 1 auto;min-height:0;position:relative}
.wrap{padding:var(--pad);display:grid;gap:var(--gap);align-content:start;max-width:1600px;margin:0 auto}
.cols{display:grid;gap:var(--gap);grid-template-columns:repeat(var(--n,2),minmax(0,1fr));align-items:start}
.cols > *{min-width:0}
.stack{display:grid;gap:var(--gap);align-content:start}
@media(max-width:1000px){ .cols{grid-template-columns:repeat(min(var(--n,2),2),minmax(0,1fr))} }
@media(max-width:700px){ .cols{grid-template-columns:1fr} }

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:var(--pad);min-width:0}
.card > h2,.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;
  font-size:13px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--fg2)}
.hd small{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);font-size:12px}
.sub{font-size:12px;color:var(--muted)}
.note{font-size:13px;color:var(--muted);margin-top:8px}
.note b{color:var(--fg2)}

/* vrstice ključ — vrednost */
.kv{display:grid;grid-template-columns:1fr auto;gap:0}
.kv > *{padding:8px 0;border-bottom:1px solid var(--border)}
.kv > :nth-last-child(-n+2){border-bottom:0}
.kv .k{color:var(--muted)} .kv .v{text-align:right;font-weight:700;padding-left:12px}
.u{font-size:.78em;color:var(--muted);font-weight:600;margin-left:3px}

/* številske ploščice */
.tiles{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:0}
.tile .t{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tile .n{font-size:28px;font-weight:800;line-height:1.15;margin-top:2px;white-space:nowrap}
.tile .n .u{font-size:14px}
.tile .st.big{font-size:15px;white-space:normal}
.tile .s{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===================== STANJE ===================== */
/* znak stanja: ikona + besedilo, barva je samo dodatek */
.st{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-weight:800;
  font-size:13px;letter-spacing:.3px;white-space:nowrap;border:1px solid transparent;background:var(--panel3);color:var(--fg2)}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.st.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(63,185,80,.35)}
.st.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(210,153,34,.4)}
.st.trip{background:var(--trip-bg);color:var(--trip);border-color:rgba(248,81,73,.45)}
.st.run{background:var(--ok);color:#06210e}
.st.run::before{background:#06210e}
.st.move{background:var(--accent);color:#fff} .st.move::before{background:#fff}
.st.off{color:var(--muted)}
.st.big{font-size:17px;padding:8px 14px;border-radius:10px}

/* LED (DI/DO, stopnje, biti) */
.led{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--dead);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);flex:0 0 auto;vertical-align:middle}
.led.on{background:var(--live);box-shadow:0 0 8px rgba(63,185,80,.6)}
.led.w{background:var(--warn)} .led.t{background:var(--trip)}

/* vrstica s stolpcem (igle, loputa) */
.bar{position:relative;height:12px;border-radius:6px;background:var(--panel3);overflow:hidden}
.bar > i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--accent);transition:width .3s}
.bar.ok > i{background:var(--ok)}
.meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 0}
.meter .k{color:var(--fg2);font-weight:700;min-width:64px}
.meter .v{font-weight:800;min-width:58px;text-align:right}
.lims{display:flex;gap:10px;font-size:12px;color:var(--muted);margin:-2px 0 4px 74px}
.lims span{display:inline-flex;gap:5px;align-items:center}

/* merilo z oknom (RPM ↔ sinhro okno, tlak ↔ SP) */
.scale{position:relative;height:30px;margin:6px 0 2px}
.scale .rail{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:3px;background:var(--panel3)}
.scale .win{position:absolute;top:8px;height:14px;border-radius:4px;background:var(--ok-bg);border:1px solid rgba(63,185,80,.5)}
.scale .mk{position:absolute;top:2px;width:3px;height:26px;margin-left:-1.5px;border-radius:2px;background:var(--fg);transition:left .3s}
.scale .sp{position:absolute;top:6px;width:0;height:18px;border-left:2px dashed var(--muted)}
.scale-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

/* ===================== GUMBI ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;
  border-radius:12px;border:1px solid var(--border);background:var(--panel2);font-weight:800;font-size:16px;
  touch-action:manipulation;cursor:pointer;user-select:none}
.btn:active:not(:disabled){filter:brightness(1.25)}
.btn:disabled{opacity:.42;filter:grayscale(.85);cursor:not-allowed}
.btn.go{background:var(--ok);border-color:var(--ok);color:#06210e}
.btn.stop{background:var(--trip);border-color:var(--trip);color:#fff}
.btn.acc{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.sm{min-height:40px;padding:0 12px;font-size:14px;border-radius:10px}
.btn.held{outline:3px solid var(--warn)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btns > .btn{flex:1 1 140px}
.seg{display:flex;background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;font-weight:800;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}
.seg button:disabled{opacity:.45;cursor:not-allowed}

/* seznam razlogov (blokade, pogoji) */
.why{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.why li{display:flex;gap:8px;align-items:baseline;font-size:14px;color:var(--fg2)}
.why li::before{content:"✕";color:var(--trip);font-weight:900;width:14px;text-align:center}
.why li.okk::before{content:"✓";color:var(--ok)}
.why li.okk{color:var(--muted)}

/* zavihki (Nastavitve) */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.tabs a{flex:0 0 auto;padding:10px 16px;border-radius:10px;background:var(--panel2);border:1px solid var(--border);
  font-weight:800;color:var(--muted);white-space:nowrap}
.tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* tabele */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:6px 8px;border-bottom:1px solid var(--border)}
table.t td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t td.r,table.t th.r{text-align:right}
.tscroll{overflow-x:auto}

/* alarmi */
.al{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;
  border-radius:10px;background:var(--panel2);border:1px solid var(--border);border-left-width:5px}
.al + .al{margin-top:8px}
.al.trip{border-left-color:var(--trip)} .al.warn{border-left-color:var(--warn)}
.al.cleared{opacity:.7}
.al .ic{font-size:18px;width:22px;text-align:center}
.al .code{font-family:var(--mono);font-weight:800;color:var(--muted);min-width:30px}
.al .tx{font-weight:700;min-width:0}
.al .tx small{display:block;font-weight:600;color:var(--muted);font-size:12px}
@media(max-width:640px){ .al{grid-template-columns:auto 1fr} .al .code{display:none} .al .st{grid-column:2;justify-self:start} }
.empty{padding:22px;text-align:center;color:var(--muted)}

/* ===================== MODALI ===================== */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}
.modal .box{width:min(460px,100%);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}
.modal h3{margin:0 0 8px;font-size:20px}
.modal p{margin:0 0 16px;color:var(--fg2)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.pad button{min-height:56px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);font-size:22px;font-weight:800;cursor:pointer}
.pad button:active{background:var(--accent)}
.disp{font-family:var(--mono);font-size:30px;font-weight:800;text-align:center;padding:10px;border-radius:12px;
  background:var(--bg);border:1px solid var(--border);min-height:58px;letter-spacing:2px}
.msg{min-height:20px;font-size:14px;font-weight:700;color:var(--trip);text-align:center}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;padding:12px 18px;border-radius:12px;
  background:var(--panel3);border:1px solid var(--border);font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1} .toast.err{background:var(--trip);color:#fff} .toast.ok{background:var(--ok);color:#06210e}

/* MOCK meni (samo v statičnem načinu) */
.mockmenu{position:fixed;top:calc(var(--hdr) + 6px);right:10px;z-index:40;width:min(300px,calc(100% - 20px));
  background:var(--panel);border:1px dashed var(--warn);border-radius:14px;padding:12px;display:none;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.mockmenu.on{display:block}
.mockmenu h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--warn)}
.mockmenu .btn{width:100%;margin-top:6px;min-height:40px;font-size:14px;justify-content:flex-start}

/* namig "spodaj je še" (kiosk) */
.scroll-hint{position:fixed;left:0;right:0;bottom:0;height:40px;pointer-events:none;display:flex;align-items:flex-end;
  justify-content:center;background:linear-gradient(to bottom,transparent,var(--bg));opacity:0;transition:opacity .25s;z-index:5}
.scroll-hint.on{opacity:1}

/* ===================== ENOPOLNA SHEMA (Pregled) =====================
   Vodnik pod napetostjo = --live, brez napetosti = --dead.
   Komponenta (krog, okvir stikala) = zdravje iz alarmov + napis.
   Stikalo: nož navpičen = sklenjen, poševen = odprt (oblika, ne barva). */
.sld{--w:5px;display:grid;gap:0;justify-items:center}
.wire{background:var(--dead);transition:background .3s}
.wire.live{background:var(--live)}
.vw{width:var(--w);height:14px}
.sw{width:34px;height:50px;display:block;overflow:visible}
.sw line{stroke:var(--dead);stroke-width:5;stroke-linecap:round;transition:stroke .3s}
.sw .bl{transform-origin:19px 42px;transition:transform .35s}
.sw.open .bl{transform:rotate(-38deg)}
.sw.live line.fx1,.sw.live.closed line{stroke:var(--live)}
.swbox{display:flex;align-items:center;gap:8px;position:relative}
.swbox .lbl{position:absolute;left:46px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:13px;line-height:1.25}
.swbox .lbl b{font-size:15px;display:block}
.swbox .lbl span{color:var(--muted)}
.swbox.h-warn .sw .bl{stroke:var(--warn)} .swbox.h-trip .sw .bl{stroke:var(--trip)}
.node{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);
  border:4px solid var(--idle);cursor:pointer;position:relative;transition:border-color .3s,transform .1s}
.node:active{transform:scale(.96)}
.node svg{width:40px;height:40px;stroke:var(--fg);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.node.h-ok{border-color:var(--ok)} .node.h-warn{border-color:var(--warn)} .node.h-trip{border-color:var(--trip)}
.node.run svg{stroke:var(--ok)}
.node .hb{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;padding:2px 7px;
  border-radius:6px;background:var(--panel);border:1px solid var(--border);white-space:nowrap}
.node.h-warn .hb{color:var(--warn)} .node.h-trip .hb{color:var(--trip)} .node.h-ok .hb{color:var(--ok)}
.busbar{width:100%;height:8px;border-radius:4px;position:relative}
.busbar .bl{position:absolute;left:4px;top:-19px;font-size:12px;color:var(--muted)}
.feeders{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.feeder{display:flex;flex-direction:column;align-items:center;min-width:0}
.fpanel{width:100%;margin-top:18px;cursor:pointer}
.fpanel:active{filter:brightness(1.15)}
.fpanel .hd{margin-bottom:8px}
.big{font-size:30px;font-weight:800;line-height:1.1;white-space:nowrap}
.big .u{font-size:15px}
.mini{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;font-size:13px;margin-top:8px}
.mini .bar{height:8px}
.mini .k{color:var(--muted)} .mini .v{font-weight:700;text-align:right}
.stgs{display:flex;gap:6px;margin:6px 0 2px}
.stg{flex:1;min-width:0;padding:6px 0 5px;border-radius:8px;text-align:center;background:var(--panel3);border:1px solid var(--border);
  font-weight:800;font-size:14px;color:var(--muted)}
.stg small{display:block;font-size:10px;font-weight:600}
.stg.on{background:var(--ok);border-color:var(--ok);color:#06210e}
.stg.flt{background:var(--trip-bg);border-color:var(--trip);color:var(--trip)}
.srcrow{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--gap);align-items:center;width:100%}
.srcrow > *{min-width:0}
.srcrow > .card{justify-self:stretch}
@media(max-width:700px){
  .sld{justify-items:stretch}
  .srcrow{grid-template-columns:auto minmax(0,1fr)} .srcrow > .spacer{display:none}
  .sld .trunk{justify-self:start;margin-left:20px}
  .busbar{display:none}
  .feeders{grid-template-columns:minmax(0,1fr);gap:var(--gap);border-left:8px solid var(--dead);border-radius:4px;
    margin-left:33px;width:calc(100% - 33px)}
  .feeders.live{border-left-color:var(--live)}
  .feeder{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px}
  .feeder > .vw{width:16px;height:var(--w)}
  .feeder > .vw.b{display:none}
  .feeder .swbox .sw{transform:rotate(-90deg)}
  .feeder .swbox .lbl{left:50%;top:auto;bottom:-16px;transform:translateX(-50%);font-size:11px}
  .feeder .swbox .lbl span{display:none}
  .feeder .node{width:64px;height:64px} .feeder .node svg{width:34px;height:34px}
  .fpanel{margin-top:0;grid-column:1 / -1}
  .sld .trunk .vw{height:16px}
}

/* zagon: dokler ni prvih podatkov, pokaži STANJE, ne praznih vrednosti */
.bootveil{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;font-size:18px}
.bootveil .spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--panel3);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* zastareli podatki: vsebina zatemnjena, ukazi onemogočeni */
html.stale .page{filter:grayscale(1);opacity:.55;transition:opacity .3s}
.choices{display:grid;gap:8px}
.choices .btn{justify-content:flex-start}

/* ===================== ADMIN KONZOLA =====================
   Ločen naslov (admin/), stranski meni, oznaka ADMIN; vsebina skrita do prijave. */
.admtag{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.8px;padding:3px 7px;border-radius:6px;
  background:var(--warn);color:#111;align-self:center}
html.adm body{display:grid;grid-template-columns:210px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;min-height:100vh}
html.adm .top,html.adm .banner{grid-column:1 / -1}
html.adm .side{grid-column:1;background:var(--panel);border-right:1px solid var(--border);padding:12px 10px;display:flex;
  flex-direction:column;gap:4px;position:sticky;top:var(--hdr);align-self:start;height:calc(100vh - var(--hdr));overflow-y:auto}
html.adm .page{grid-column:2}
.side a{padding:11px 14px;border-radius:10px;font-weight:700;color:var(--fg2)}
.side a:hover{background:var(--panel2)}
.side a.on{background:var(--accent);color:#fff}
.pinlock{display:none}
html.locked .pinlock{display:flex;position:fixed;inset:var(--hdr) 0 0 0;z-index:30;background:var(--bg);align-items:center;justify-content:center;padding:16px}
html.locked .pinlock .card{width:min(380px,100%);text-align:center}
html.locked .page,html.locked .side{visibility:hidden}
@media(max-width:900px){
  html.adm body{grid-template-columns:minmax(0,1fr)}
  html.adm .side{grid-column:1;flex-direction:row;position:sticky;top:var(--hdr);z-index:15;height:auto;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--border);padding:8px}
  html.adm .page{grid-column:1}
  .side a{flex:0 0 auto;padding:9px 12px;font-size:14px}
}

/* zareze na merilu (D.scale): SP črtkano, zagon/ustavitev s puščico, trip rdeče */
.scale .tk{position:absolute;top:4px;height:22px;width:0;border-left:2px solid var(--muted)}
.scale .tk b{position:absolute;top:24px;left:0;transform:translateX(-50%);font-size:10px;font-weight:800;white-space:nowrap;color:var(--muted)}
.scale .tk.sp{border-left-style:dashed;border-color:var(--fg2)} .scale .tk.sp b{color:var(--fg2)}
.scale .tk.up{border-color:var(--ok)} .scale .tk.up b{color:var(--ok)}
.scale .tk.dn{border-color:var(--warn)} .scale .tk.dn b{color:var(--warn)}
.scale .tk.trip{border-color:var(--trip);border-left-width:3px} .scale .tk.trip b{color:var(--trip)}
.scale.lbl{margin-bottom:16px}

/* ===================== ADMIN: plošče parametrov in IO (admin.js) ===================== */
.tgl{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.tgl:last-child{border-bottom:0}
.tgl b{display:block} .tgl .sub{margin-top:2px}
.tgl .seg{min-width:200px}
.pgrp + .pgrp{margin-top:18px}
.pgrp > h3{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--fg2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pgrp > h3 small{font-weight:600;color:var(--muted);font-size:12px}
.pgrp.dim{opacity:.6}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.prow:last-child{border-bottom:0}
.prow:active{background:var(--panel2)}
.prow .lab{font-weight:700}
.prow .val{font-size:20px;font-weight:800;text-align:right;white-space:nowrap}
.prow .meta{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
.tag{font-size:11px;font-weight:800;padding:2px 6px;border-radius:5px;background:var(--panel3);color:var(--fg2)}
.tag.tbd{background:var(--warn-bg);color:var(--warn)} .tag.new{background:rgba(47,129,247,.18);color:#7fb2ff}
.tag.chg{background:var(--ok-bg);color:var(--ok)}
.ch{display:grid;grid-template-columns:22px 26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:14px}
.ch:last-child{border-bottom:0}
.ch .k{font-family:var(--mono);color:var(--muted);font-size:12px}
.ch .nm{font-family:var(--mono);font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.ch .ds{color:var(--muted);font-size:12px;grid-column:3 / -1;margin-top:-6px}
.ch .btn{min-height:34px;padding:0 10px;font-size:12px}
/* podmeni na strani (sidro) — Stanje · Parametri · IO · Alarmi */
.subnav{position:sticky;top:var(--hdr);z-index:12;display:flex;gap:6px;flex-wrap:wrap;padding:8px 0;background:var(--bg)}
.subnav a{padding:8px 14px;border-radius:18px;background:var(--panel2);border:1px solid var(--border);font-weight:700;font-size:14px;color:var(--fg2)}
.subnav a:hover{border-color:var(--fg2)}
.anchor{scroll-margin-top:calc(var(--hdr) + 60px)}
@media(max-width:900px){ .subnav{top:calc(var(--hdr) + 54px)} .anchor{scroll-margin-top:calc(var(--hdr) + 110px)} }

/* ===================== VIZUALNA DODELAVA (8. 10.) =====================
   Barva = pomen: --c-prod proizvodnja, --c-grid omrežje, --c-energy energija.
   Nič ne utripa (v7: uporabnik je pulziranje videl kot »spremenjeno barvo«). */
:root{
  --c-prod:#3fb950; --c-grid:#58a6ff; --c-energy:#e3b341; --c-q:#bc8cff;
  --card-a:#161e29; --card-b:#121821; --edge:rgba(255,255,255,.045);
}
.top{background:linear-gradient(180deg,#19212c,#141a23)}
.card{background:linear-gradient(180deg,var(--card-a),var(--card-b));box-shadow:inset 0 1px 0 var(--edge),0 8px 22px rgba(0,0,0,.22)}
.tile{position:relative;overflow:hidden;background:linear-gradient(180deg,#1c2533,#18202c);box-shadow:inset 0 1px 0 var(--edge)}
.tile[style*="--tc"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc)}
.tile[style*="--tc"] .t{color:color-mix(in srgb,var(--tc) 70%,var(--fg2))}
.tile .n{letter-spacing:-.5px}
.card > .hd,.hd{color:#aebdd0}
.bar > i{background:linear-gradient(90deg,#2f81f7,#58a6ff)}
.bar.ok > i{background:linear-gradient(90deg,#2ea043,#3fb950)}
/* enopolna shema */
.wire.live{background:var(--live);box-shadow:0 0 8px rgba(63,185,80,.45)}
.node{background:radial-gradient(circle at 50% 35%,#222c3a,#171e28)}
.node.run{box-shadow:0 0 0 6px rgba(63,185,80,.10),0 0 26px rgba(63,185,80,.35)}
.node.h-trip{box-shadow:0 0 0 6px rgba(248,81,73,.10),0 0 22px rgba(248,81,73,.35)}
.fpanel{border-top:3px solid var(--fc,var(--border))}
.fpanel .en{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:12px;color:var(--muted)}
.fpanel .en b{color:var(--c-energy);font-size:13px}
/* tabela energije */
.etab{width:100%;border-collapse:collapse}
.etab th{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.5px;text-align:right;padding:4px 6px}
.etab th:first-child,.etab td:first-child{text-align:left}
.etab td{padding:9px 6px;border-top:1px solid var(--border);text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.etab td small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.etab td.e{color:var(--c-energy)}

/* Pregled na panelu 1280×800 brez drsenja */
.sld .vw{height:12px}
.fpanel{margin-top:16px}
.fpanel .en{margin-top:6px;padding-top:6px}

/* v6.0: oznaka verzije v glavi */
.crumb .ver{font-size:10px;font-weight:800;opacity:.45;margin-left:6px;letter-spacing:.4px}
.tile .s.warn{color:var(--warn);font-weight:600}   /* v7.0 P15: izguba zob na admin › turbina */
/* v7.0 admin za inštalaterja: razširljiva pomoč pri alarmih */
.al.hashelp{cursor:pointer}
.al.hashelp .tx::after{content:" ▸";color:var(--muted);font-weight:400}
.al.hashelp.open .tx::after{content:" ▾"}
.al .ah{display:none;grid-column:1 / -1;margin:2px 0 2px 32px;padding:10px 12px;border-radius:8px;background:var(--panel2);font-size:14px;line-height:1.45;color:var(--fg2)}
.al.open .ah{display:block}
.al .ah p{margin:0 0 6px} .al .ah ul{margin:4px 0 0 18px;padding:0} .al .ah li{margin:2px 0}
.al .ah .ahn{margin-top:8px;color:var(--ok)}
/* v7.0 admin za inštalaterja: parametri */
.pbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.pbar .psearch{flex:1 1 220px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel2);color:var(--fg);font-size:15px}
.pbar .seg{flex:0 0 auto;min-width:200px}
.pbar .ptech{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
.pbar .ptech input{width:18px;height:18px}
.prow .help{grid-column:1 / -1;font-size:13px;color:var(--fg2);line-height:1.4}
.prow .pdef{min-height:28px;padding:0 8px;font-size:12px}
.phid{margin-top:10px;font-size:13px;color:var(--muted)} .phid a{color:var(--acc,#7fb2ff)}
.bh{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:1px 0 3px}
/* v7.0 admin: faze zagona */
.faze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:800px){.faze{grid-template-columns:1fr}}
.fz{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border-radius:12px;background:var(--panel2);border:1px solid var(--border);text-decoration:none;color:var(--fg)}
.fz .ic{font-size:20px;text-align:center;color:var(--muted)} .fz.ok .ic{color:var(--ok)} .fz.part .ic{color:var(--warn)}
.fz b{display:block} .fz small{display:block;font-size:12px;color:var(--muted)}

/* v7.5: telefon (lastniki prek spleta, ~390 px) — nič se ne sme odrezati */
@media(max-width:480px){
  .card.grid-card .vals{grid-template-columns:repeat(2,auto)}
  .tiles[style*="repeat(3"] .tile{padding:10px 8px}
  .tiles[style*="repeat(3"] .tile .n{font-size:20px}
  .tiles[style*="repeat(3"] .tile .n .u{font-size:11px}
  table.t.meters th,table.t.meters td{padding:6px 4px;font-size:13px}
}
/* v7.5: na ozkem zaslonu je .spacer skrit (≤ 700 px), z njim pa tudi napis
   CEVOVODA ZDRUŽENA — ko je napis aktiven, ga pokaži kot svojo vrstico */
@media(max-width:700px){
  .srcrow > .spacer:has(#pipes:not([hidden])){display:block;grid-column:1/-1}
}