/* ELITOP dispečink – tmavý technický vzhled (ladí se zařízeními ELITOP) */
:root{
  --bg:#0b0f14; --surface:#131a22; --surface2:#1a232e; --raised:#1f2a36;
  --border:#24303c; --border2:#2e3d4c;
  --accent:#3a9fd5; --accent2:#58a6ff;
  --ok:#3fb950; --warn:#d9a520; --danger:#f85149; --cool:#39d0d8;
  --tx:#e6edf3; --sub:#8b97a5; --mut:#5c6b7a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rad:12px; --rad-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100vw;overflow-x:hidden}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none}

/* ── Header ── */
.top{display:flex;align-items:center;gap:14px;padding:14px 22px;
  border-bottom:1px solid var(--border);background:linear-gradient(180deg,#101823,#0b0f14);
  position:sticky;top:0;z-index:50}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);
  display:grid;place-items:center;flex:none}
.logo svg{width:20px;height:20px;fill:#fff}
.brand{font-weight:700;letter-spacing:.02em}
.brand small{display:block;font-size:.62rem;letter-spacing:.28em;color:var(--accent2);font-weight:600}
.top .spacer{flex:1}
.pill{font-family:var(--mono);font-size:.72rem;color:var(--sub);
  border:1px solid var(--border);border-radius:999px;padding:5px 11px}
.btn{font-family:var(--sans);font-size:.85rem;font-weight:600;cursor:pointer;
  border:1px solid var(--border2);background:var(--surface2);color:var(--tx);
  border-radius:var(--rad-sm);padding:8px 14px;transition:.15s}
.btn:hover{border-color:var(--accent);background:var(--raised)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04121c}
.btn.primary:hover{background:var(--accent2);border-color:var(--accent2)}
.btn.danger{border-color:#5a2a2a;color:#f8a49e}
.btn.danger:hover{background:#2a1414;border-color:var(--danger)}
.btn.sm{padding:5px 10px;font-size:.78rem}

/* ── Odznak „kde jsem" – protejsek stejneho odznaku na webu jednotky ── */
.locb{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:.68rem;color:var(--sub);background:var(--surface2);
  border:1px solid var(--border);border-radius:999px;padding:4px 11px;white-space:nowrap}
.locb b{color:var(--accent);font-weight:600;letter-spacing:.08em}
.locb .d{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;flex:none}
@media(max-width:760px){.locb{display:none}}

/* ── Layout ── */
.wrap{max-width:1180px;margin:0 auto;padding:24px 22px 80px}
.pagehead{display:flex;align-items:center;justify-content:space-between;margin:6px 0 18px}
.pagehead h1{font-size:1.15rem;font-weight:700}
.count{color:var(--sub);font-family:var(--mono);font-size:.8rem;margin-left:8px}

/* ── Grid zařízení ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);
  padding:16px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.card:hover{border-color:var(--border2);transform:translateY(-1px)}
.card .row1{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card .nm{font-weight:700;font-size:1rem}
.card .sn{font-family:var(--mono);font-size:.72rem;color:var(--sub)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
.dot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(63,185,80,.6);animation:pulse 2s infinite}
.dot.off{background:var(--mut)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,185,80,.5)}70%{box-shadow:0 0 0 7px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.big{font-family:var(--mono);font-size:2.1rem;font-weight:600;margin:12px 0 2px;letter-spacing:-.02em}
.big span{font-size:1rem;color:var(--sub);font-weight:400}
.metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.metric{background:var(--surface2);border-radius:var(--rad-sm);padding:8px 9px}
.metric .k{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.metric .v{font-family:var(--mono);font-size:.9rem;margin-top:2px}
.statebar{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.78rem;color:var(--sub)}
.tag{font-size:.68rem;font-weight:600;padding:3px 8px;border-radius:6px;font-family:var(--mono)}
.tag.ok{background:rgba(63,185,80,.14);color:var(--ok)}
.tag.warn{background:rgba(217,165,32,.14);color:var(--warn)}
.tag.alarm{background:rgba(248,81,73,.16);color:var(--danger)}
.tag.idle{background:var(--surface2);color:var(--sub)}

.empty{text-align:center;padding:60px 20px;color:var(--sub)}
.empty h2{color:var(--tx);font-weight:600;margin-bottom:8px}

/* ── Login ── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-box{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rad);padding:28px 24px}
.login-box .logo{margin:0 auto 16px}
.login-box h1{text-align:center;font-size:1.1rem;margin-bottom:2px}
.login-box p{text-align:center;color:var(--sub);font-size:.8rem;margin-bottom:20px}
input,select{width:100%;background:var(--surface2);border:1px solid var(--border2);
  color:var(--tx);border-radius:var(--rad-sm);padding:11px 12px;font-family:var(--sans);
  font-size:.92rem;margin-bottom:12px}
input:focus,select:focus{outline:none;border-color:var(--accent)}
input.mono{font-family:var(--mono);font-size:.82rem}
label{display:block;font-size:.72rem;color:var(--sub);margin-bottom:5px;letter-spacing:.03em}
.msg{font-size:.82rem;margin-top:8px;min-height:1.2em}
.msg.err{color:var(--danger)} .msg.ok{color:var(--ok)}

/* ── Detail panel (drawer) ── */
.overlay{position:fixed;inset:0;background:rgba(4,8,12,.65);backdrop-filter:blur(2px);
  z-index:100;opacity:0;pointer-events:none;transition:.2s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:var(--bg);
  border-left:1px solid var(--border);z-index:101;transform:translateX(100%);
  transition:transform .22s ease;overflow-y:auto}
.drawer.show{transform:translateX(0)}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:var(--bg);z-index:2}
.dhead h2{font-size:1.05rem}
.dhead .sn{font-family:var(--mono);font-size:.72rem;color:var(--sub)}
.close{cursor:pointer;color:var(--sub);font-size:1.4rem;line-height:1;padding:4px 8px}
.close:hover{color:var(--tx)}
.dbody{padding:18px 20px}
.sect{margin-bottom:22px}
.sect h3{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);
  margin-bottom:10px;display:flex;align-items:center;gap:8px}
.sect h3::after{content:"";flex:1;height:1px;background:var(--border)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.tcell{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-sm);padding:9px 11px}
.tcell .k{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sub)}
.tcell .v{font-family:var(--mono);font-size:1.05rem;margin-top:3px}
.chartbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-sm);
  padding:12px;height:220px;position:relative}
.cmdrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tokenbox{display:flex;gap:8px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rad-sm);padding:10px 12px}
.tokenbox code{font-family:var(--mono);font-size:.8rem;color:var(--cool);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snippet{background:#0a0e13;border:1px solid var(--border);border-radius:var(--rad-sm);
  padding:12px;font-family:var(--mono);font-size:.74rem;color:#c9d4e0;white-space:pre-wrap;
  line-height:1.6;overflow-x:auto}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.kv:last-child{border:none}
.kv .k{color:var(--sub)} .kv .v{font-family:var(--mono)}
.cmdlog{font-family:var(--mono);font-size:.74rem;color:var(--sub);max-height:140px;overflow:auto}
.cmdlog div{padding:3px 0;border-bottom:1px solid var(--border)}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--raised);border:1px solid var(--border2);color:var(--tx);
  padding:11px 18px;border-radius:10px;font-size:.85rem;opacity:0;transition:.25s;
  pointer-events:none;z-index:200;max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* modal (nové zařízení) */
.modal-bg{position:fixed;inset:0;background:rgba(4,8,12,.65);display:grid;place-items:center;
  z-index:150;opacity:0;pointer-events:none;transition:.18s;padding:20px}
.modal-bg.show{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:min(720px,94vw);min-width:300px;max-height:88vh;overflow:auto;resize:both;background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--rad);padding:22px}
.modal h3{margin-bottom:16px;font-size:1rem}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}

@media(max-width:640px){
  .wrap{padding:18px 14px 80px}
  .metrics{grid-template-columns:1fr 1fr}
}

/* ── SaaS rozšíření: role, alarmy, taby ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px}
.tab{padding:10px 16px;cursor:pointer;color:var(--sub);font-weight:600;font-size:.9rem;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--tx)}
.tab.active{color:var(--accent2);border-bottom-color:var(--accent)}
.tab .badge{background:var(--danger);color:#fff;border-radius:999px;font-size:.62rem;
  padding:1px 6px;margin-left:6px;font-family:var(--mono)}
.roletag{font-size:.62rem;font-weight:600;padding:3px 8px;border-radius:6px;font-family:var(--mono);
  background:var(--surface2);color:var(--sub);text-transform:uppercase;letter-spacing:.05em}
.roletag.admin{background:rgba(88,166,255,.16);color:var(--accent2)}
.roletag.service{background:rgba(217,165,32,.14);color:var(--warn)}

/* alarm badge na kartě */
.abadge{position:absolute;top:12px;right:34px;background:var(--danger);color:#fff;
  font-size:.6rem;font-family:var(--mono);border-radius:999px;padding:2px 7px;font-weight:700}

/* tabulky událostí */
.evtable{width:100%;border-collapse:collapse;font-size:.82rem}
.evtable th{text-align:left;color:var(--sub);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;
  padding:8px 10px;border-bottom:1px solid var(--border)}
.evtable td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.evtable tr:hover td{background:var(--surface)}
.sev{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}
.sev.critical{background:var(--danger)} .sev.warning{background:var(--warn)} .sev.info{background:var(--accent2)}
.st-active{color:var(--danger);font-weight:600} .st-cleared{color:var(--sub)}
.st-acked{color:var(--warn)}
.userrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.userrow .em{font-family:var(--mono);font-size:.82rem}
.userrow .spacer{flex:1}

/* ═══ RESPONZIVITA – mobil/tablet (servis u jednotky) ═══ */
@media(max-width:760px){
  /* drawer přes celou obrazovku */
  .drawer{width:100%!important}
  .dbody{padding:14px 14px 60px}
  .dhead{padding:14px}
  .dhead h2{font-size:1rem}
  /* ovládací řádky se zalamují, ne mačkají */
  .cmdrow{flex-wrap:wrap;gap:8px}
  .cmdrow label{width:auto!important}
  /* větší dotykové cíle */
  .btn.sm{padding:9px 13px;font-size:.85rem}
  input,select{padding:12px}
  input.mono{font-size:.9rem}
  /* mřížka měření/relé – 2 sloupce na mobilu */
  .tgrid{grid-template-columns:1fr 1fr!important}
  .tcell .v{font-size:1rem}
  /* tabulky (plán, alarmy, firmware) ať jdou odscrollovat vodorovně */
  .evtable{display:block;overflow-x:auto;white-space:nowrap}
  /* karty přehledu na celou šířku */
  .grid{grid-template-columns:1fr!important}
  /* taby se vejdou */
  .tabs{overflow-x:auto}
  .tab{padding:10px 12px;font-size:.85rem;white-space:nowrap}
  /* graf o něco vyšší, ať je čitelný */
  .chartbox{height:200px}
  /* topbar a řádky se zalamují, ať nic nepřetéká */
  .top{flex-wrap:wrap;row-gap:8px}
  .top .spacer{display:none}
  .top .brand{font-size:.95rem}
  #whoName{max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .userrow{flex-wrap:wrap}
  .userrow .spacer{flex-basis:100%;height:0}
  .pagehead{flex-wrap:wrap;gap:10px}
  /* modal přes celou šířku, bez roztahování na mobilu */
  .modal{resize:none!important;max-width:96vw!important;min-width:0!important;width:96vw!important}
  /* graf lze klepnout pro maximalizaci */
  .chartbox{cursor:pointer;position:relative}
  .chartbox::after{content:'⛶';position:absolute;top:6px;right:8px;font-size:.9rem;color:var(--sub);opacity:.6;pointer-events:none}
}
@media(max-width:420px){
  .tgrid{grid-template-columns:1fr 1fr!important}
  .big{font-size:1.8rem}
  .top{padding:12px 14px;gap:10px}
  .brand small{display:none}
}
/* dotyková zařízení: karta se nezvedá při hoveru (zbytečný jitter) */
@media(hover:none){ .card:hover{transform:none} }

/* ── Oprava zobrazení číselných políček v tabulce plánu ── */
.evtable input[type=number]{ min-width:44px; text-align:center; padding:6px 4px; -moz-appearance:textfield; }
.evtable input{ box-sizing:border-box; }
/* skryj spinner šipky, ať je víc místa pro číslici */
.evtable input[type=number]::-webkit-outer-spin-button,
.evtable input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* časová dvojice h:m ať drží pohromadě a je čitelná */
.evtable td{ vertical-align:middle; }
.evtable td input[id^="sh"], .evtable td input[id^="sm"],
.evtable td input[id^="casH"], .evtable td input[id^="casM"]{ width:42px!important; min-width:42px; text-align:center; }
#casH,#casM{ width:46px!important; text-align:center; padding:8px 4px; }
/* na mobilu tabulku plánu nechceme mačkat – povolíme vodorovný scroll a širší buňky */
@media(max-width:760px){
  .evtable input[type=number]{ min-width:40px; font-size:.82rem; }
  .evtable td{ padding:7px 6px; }
}

/* ── Bulletproof: tabulka časových plánů ── */
.planTable td{ white-space:nowrap; padding:8px 6px; vertical-align:middle; }
.planTable input{ padding:7px 4px!important; box-sizing:border-box; margin:0!important; }
.planTable input[type=number]{ width:48px!important; min-width:48px!important; text-align:center; }
.planTable input[id^="sn"]{ width:90px!important; text-align:left; }
.planTable input[type=checkbox]{ width:auto!important; min-width:0!important; padding:0!important; transform:scale(1.2); }
.planTable td:nth-child(2){ font-family:var(--mono); }

/* ═══ Vizuální plán: 24h časová osa + karty slotů ═══ */
.planTimeline{position:relative;height:54px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:4px;overflow:hidden}
.tlseg{position:absolute;top:0;bottom:15px;border-right:1px solid var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 6px;overflow:hidden;color:#0d1117}
.tlseg b{font-size:.68rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlseg span{font-size:.58rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlhours{position:absolute;left:0;right:0;bottom:0;height:15px;display:flex;justify-content:space-between;padding:0 3px;font-size:.58rem;color:var(--sub);font-family:var(--mono);border-top:1px solid var(--border);align-items:center}
.slotList{display:flex;flex-direction:column;gap:8px}
.slotCard{border:1px solid var(--border);border-radius:8px;padding:10px;background:var(--surface);opacity:.5;transition:opacity .15s,border-color .15s}
.slotCard.on{opacity:1;border-color:var(--accent)}
.slotHead{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.slotSw{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.8rem;white-space:nowrap;cursor:pointer}
.slotSw input{width:auto!important;min-width:0!important;transform:scale(1.2);margin:0!important}
.slotName{flex:1;margin:0!important;padding:7px 10px!important;box-sizing:border-box}
.slotFields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.slotFields .ff{display:flex;flex-direction:column;gap:3px}
.slotFields .ff label{font-size:.6rem;color:var(--sub);text-transform:uppercase;letter-spacing:.03em}
.slotFields .ff input[type=number]{width:62px;margin:0!important;padding:7px 6px!important;text-align:center;box-sizing:border-box}
.slotFields .ff.chk{align-items:center}
.slotFields .ff.chk input[type=checkbox]{width:auto!important;min-width:0!important;transform:scale(1.3);margin-top:6px!important}
.tinp{display:inline-flex;align-items:center;gap:2px}
.tinp input{width:46px!important;margin:0!important;padding:7px 4px!important;text-align:center;box-sizing:border-box}
.slotSave{margin-left:auto;align-self:flex-end}
@media(max-width:760px){ .slotSave{margin-left:0;width:100%;margin-top:4px} .slotFields{gap:12px} .planTimeline{height:58px} }

/* ═══ Roztažené okno detailu (PC) – lepší čitelnost grafů ═══ */
.drawer.wide{ width:min(1180px,96vw)!important; max-width:96vw!important; }
.drawer.wide .chartbox{ height:360px; }
.drawer.wide .tgrid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.drawer.wide .dbody{ padding-bottom:60px; }
#wideBtn{ font-size:1.1rem; }
@media(max-width:760px){ #wideBtn{ display:none; } } /* na mobilu je detail už celoobrazovkový */

/* ═══ Skupiny karet + drag-and-drop ═══ */
#grid{display:flex;flex-direction:column;gap:20px}
.devGroup{border-radius:12px;transition:background .12s}
.grpHead{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);font-weight:600}
.grpHead>span:first-child{font-size:1rem}
.grpActions{margin-left:auto;display:flex;gap:6px}
.card[draggable=true]{cursor:grab}
.card[draggable=true]:active{cursor:grabbing}
.card.dragging{opacity:.4}
.card.dropTo{outline:2px dashed var(--accent,#58a6ff);outline-offset:3px}
.dropHint{border:2px dashed var(--border);border-radius:12px;padding:22px;text-align:center;color:var(--sub);font-size:.85rem;grid-column:1/-1}

/* ── Kombinované RS485 karty (teplota + vlhkost) ── */
.sensCell .v span{font-size:.7rem;color:var(--sub)}
.sensCell .rh{font-size:.78rem;color:var(--accent2,#39d0d8);margin-top:2px;font-weight:600}

/* ═══ Maximalizovaný graf (klik na graf) ═══ */
#chartFull{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column}
#chartFull .cfhead{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
#chartFull .cfbody{flex:1;position:relative;padding:8px;touch-action:none}
#chartFull canvas{width:100%!important;height:100%!important}

/* ═══ Karta Požadované hodnoty (cíl teplota/vlhkost) ═══ */
.spgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spitem{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px}
.spitem .k{font-size:.7rem;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.sprow{display:flex;align-items:center;gap:6px}
.sprow input{width:80px;margin:0!important;padding:9px 8px!important;font-size:1.1rem;text-align:center}
.sprow .u{color:var(--sub);font-size:.9rem}
.sprow .btn{margin-left:auto}
.spnow{font-size:.72rem;color:var(--sub);margin-top:8px}
@media(max-width:760px){ .spgrid{grid-template-columns:1fr} .sprow input{width:70px} }

/* popisek velké sklepní teploty na kartě */
.biglbl{font-size:.62rem;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:-2px}

/* online tečka u uživatele */
.udot{width:9px;height:9px;border-radius:50%;flex:none}
.udot.on{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.udot.off{background:#3a4553}

/* online uživatelé na dlaždici zařízení */
.onlineusers{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.onlineusers .ou{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;color:var(--ok);background:rgba(63,185,80,.10);border:1px solid rgba(63,185,80,.25);border-radius:20px;padding:2px 8px}

/* obrázek skupiny v hlavičce */
.grpHead .grpimg{object-fit:contain;border-radius:6px;margin-right:10px;vertical-align:middle;background:transparent}
.grpHead{display:flex;align-items:center;gap:2px}

/* přetahování skupin */
.grpHead[draggable=true]{cursor:grab}
.grpHead .grpdrag{color:var(--sub);font-size:.8rem;margin-right:2px;letter-spacing:-2px;cursor:grab}
.grpHead.grpover{outline:2px dashed var(--accent);outline-offset:3px;border-radius:6px}

/* filtr nástěnky */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.filterbar input,.filterbar select{background:var(--surface);border:1px solid var(--border);color:var(--txt);border-radius:8px;padding:8px 10px;font-size:.85rem}

/* vyskakovací alarm */
#alarmPopup{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-start;justify-content:center;z-index:9999;padding-top:80px}
#alarmPopup .apbox{background:var(--card,#161b22);border:2px solid var(--danger);border-radius:14px;max-width:440px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;animation:appop .2s ease}
@keyframes appop{from{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}
#alarmPopup .aphead{background:var(--danger);color:#fff;font-weight:700;font-size:1.05rem;padding:12px 16px}
#alarmPopup .apbody{padding:14px 16px;max-height:40vh;overflow:auto}
#alarmPopup .apitem{padding:6px 0;border-bottom:1px solid var(--border)}
#alarmPopup .apact{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}

/* indikátor aktivního filtru */
.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-left:4px;vertical-align:middle}
.filterbar{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px}

/* ═══════════════ NEXE24 VIS – vizuální vrstva v44 ═══════════════
   Sladěno s FormFactory dispečinkem: tmavé sklo, pilulky, zaoblení,
   nový teal akcent. Přepisuje výchozí proměnné a klíčové prvky.   */
:root{
  --accent:#19b6c9; --accent2:#4dd7e8; --cool:#4dd7e8;
  --rad:16px; --rad-sm:10px;
  --glass:rgba(19,26,34,.72); --glass2:rgba(26,35,46,.6);
}
body{background:
  radial-gradient(1200px 500px at 80% -10%, rgba(25,182,201,.09), transparent 60%),
  radial-gradient(900px 420px at -10% 110%, rgba(77,215,232,.05), transparent 55%),
  var(--bg)}
/* Header – sklo */
.top{background:rgba(11,15,20,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(77,215,232,.14)}
.logo{background:linear-gradient(145deg,#19b6c9,#0e7490);border-radius:11px;
  box-shadow:0 2px 10px rgba(25,182,201,.35)}
.brand{background:linear-gradient(90deg,#e6edf3,#9be8f2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand small{color:var(--accent2);-webkit-text-fill-color:var(--accent2);letter-spacing:.3em}
/* Záložky – segmentové pilulky */
.tabs{gap:6px;border-bottom:none;margin-bottom:14px;background:var(--glass2);
  border:1px solid var(--border);border-radius:999px;padding:5px;width:max-content;max-width:100%;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tab{border-bottom:none!important;border-radius:999px;padding:8px 16px}
.tab.active{background:linear-gradient(145deg,rgba(25,182,201,.25),rgba(25,182,201,.1));
  color:var(--accent2);box-shadow:inset 0 0 0 1px rgba(77,215,232,.35)}
/* Karty – sklo, hlubší zaoblení, jemný glow */
.card{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--rad);border-color:rgba(46,61,76,.8)}
.card:hover{transform:translateY(-2px);border-color:rgba(77,215,232,.4);
  box-shadow:0 8px 26px rgba(0,0,0,.35),0 0 0 1px rgba(77,215,232,.12)}
.card .big{background:linear-gradient(180deg,#fff,#bfeaf1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.card .metric{border-radius:12px}
.abadge{border-radius:999px;box-shadow:0 0 14px rgba(248,81,73,.45)}
/* Tlačítka a pilulky */
.btn{border-radius:999px}
.btn.primary{background:linear-gradient(145deg,#19b6c9,#0e94a6);border-color:transparent;color:#02171b;
  box-shadow:0 2px 12px rgba(25,182,201,.3)}
.btn.primary:hover{background:linear-gradient(145deg,#2dd0e3,#19b6c9);border-color:transparent}
.pill,.roletag{border-radius:999px}
.roletag{background:rgba(25,182,201,.12);border:1px solid rgba(77,215,232,.3);color:var(--accent2)}
/* Drawer + modaly – sklo */
.drawer,.modal{background:rgba(15,21,28,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:var(--rad) 0 0 var(--rad)}
.modal{border-radius:var(--rad);border:1px solid rgba(77,215,232,.15)}
.sect{border-radius:14px;background:var(--glass2)}
input,select,textarea{border-radius:10px!important}
/* Stavové prvky */
.dot.on{background:var(--accent2);animation:pulseT 2s infinite}
@keyframes pulseT{0%{box-shadow:0 0 0 0 rgba(77,215,232,.55)}70%{box-shadow:0 0 0 7px rgba(77,215,232,0)}100%{box-shadow:0 0 0 0 rgba(77,215,232,0)}}
.statebar{border-radius:10px}
/* Tabulky, timeline */
.evtable th{color:var(--accent2)}
.tlseg{border-radius:8px}

/* ── IKEA centrála: karty čidel a zásuvek (v45) ── */
.hubGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.hubCard{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-sm);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.hubCard.off{opacity:.6}
.hubHead{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.hubMain{font-family:var(--mono);font-size:1.25rem}
.hubMain span{font-size:.75rem;color:var(--sub)}
.hubSub{font-size:.72rem;color:var(--sub);min-height:1em}
.hubAuto{font-size:.7rem;color:var(--accent2,var(--sub))}
.hubAuto:empty{display:none}
.hubBtns{flex-wrap:wrap;gap:4px;margin-top:4px}
.acRow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;margin-bottom:6px;border:1px solid var(--border);border-radius:var(--rad-sm);font-size:.8rem}
.acRow input,.acRow select{margin:0}
.acRow .btn{margin-left:auto}
.acDays{display:flex;gap:4px;flex-wrap:wrap}
.acDays label{display:flex;align-items:center;gap:2px;font-size:.72rem;margin:0}
.acDays input{width:auto}
.hubNote{font-size:.72rem;color:var(--sub);line-height:1.45}
.acRow input,.acRow select{width:auto;padding:6px 8px}

/* ════════════════════════════════════════════════════════════════════
   SCADA obrazovka rekuperace + panel AURA
   ════════════════════════════════════════════════════════════════════ */
.scada{background:linear-gradient(160deg,#101a24,#0d141c);border:1px solid var(--border2);
  border-radius:var(--rad);padding:16px;margin-bottom:12px}
.scada svg{width:100%;height:auto;display:block}
.scada .flow{stroke-dasharray:5 7;animation:scadaFlow 1.6s linear infinite}
@keyframes scadaFlow{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){.scada .flow{animation:none}}

/* velké živé hodnoty */
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.gauge{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-sm);padding:12px 14px}
.gauge .g-k{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--sub)}
.gauge .g-v{font-family:var(--mono);font-size:1.9rem;line-height:1.15;margin-top:4px}
.gauge .g-u{font-size:.9rem;color:var(--sub);margin-left:2px}
.gauge .g-s{font-size:.72rem;color:var(--sub);margin-top:2px}
.gauge.ok{border-color:#1f4d2a}.gauge.warn{border-color:#5a4a15}.gauge.bad{border-color:#5a2a2a}
.gauge .bar{height:4px;border-radius:2px;background:var(--border);margin-top:8px;overflow:hidden}
.gauge .bar i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* rozvržení: řídí se šířkou panelu, ne okna – zásuvka bývá užší než obrazovka */
.scadawrap{container-type:inline-size}
.hero{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
/* Schéma je hlavní obrázek – dostane celou šířku karty, ciferníky jsou pod ním.
   Strop drží kresbu v čitelné velikosti i na širokém monitoru. */
.hero .scada{max-width:840px;margin:0 auto;width:100%}
.hint{font-size:.68rem;color:var(--sub);margin-top:10px;line-height:1.5}

/* kruhový ciferník */
/* Ciferník má smysl do velikosti, kde se dá pohodlně táhnout – dál už jen
   roztahuje stránku. Proto má strop a řada se zarovná na střed. */
.dials{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.dial{flex:1 1 150px;max-width:220px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);
  padding:10px 8px 12px;transition:border-color .15s}
.dial.dirty{border-color:var(--accent)}
.dial svg{width:100%;height:auto;display:block;touch-action:none;cursor:pointer;outline:none}
.dial svg:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.dial .tk{stroke:#243040}
.dial .tk.on{stroke:var(--accent)}
.dial.dirty .tk.on{stroke:var(--cool)}
.dial .hnd{fill:var(--accent);stroke:var(--bg);stroke-width:3}
.dial.dirty .hnd{fill:var(--cool)}
.dial .mer{fill:var(--ok)}
.dial .dl{fill:var(--sub);font-size:9px;font-family:var(--sans);letter-spacing:.09em;text-anchor:middle}
.dial .dv{fill:var(--tx);font-size:38px;font-family:var(--mono);text-anchor:middle}
.dial .du{fill:var(--sub);font-size:15px}
.dial .dn{fill:var(--mut);font-size:11px;font-family:var(--mono);text-anchor:middle}
.drow{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:6px;min-height:30px}
.drow .btn{padding:5px 11px}
.dial .d-send{display:none}
.dial.dirty .d-send{display:inline-block}

/* dlaždice stavu */
.stiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}
.stile{display:flex;gap:10px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rad-sm);padding:10px 12px}
.stile.ok{border-color:#1f4d2a}.stile.warn{border-color:#5a4a15}.stile.bad{border-color:#5a2a2a}
.stile .t-i{font-size:1.1rem;line-height:1.2;flex:none}
.stile .t-k{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sub)}
.stile .t-v{font-family:var(--mono);font-size:1.1rem;margin-top:2px}
.stile .t-s{font-size:.66rem;color:var(--mut);margin-top:1px}

/* dlaždice provozního režimu */
/* Dlaždice režimu mají taky strop – na širokém monitoru by z nich jinak byly
   půlmetrové plochy. */
.mtiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.mtile{flex:1 1 88px;max-width:180px;
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-sm);
  padding:11px 6px;color:var(--sub);font-family:var(--sans);font-size:.72rem;font-weight:600;transition:.15s}
.mtile:hover{border-color:var(--accent);color:var(--tx)}
.mtile.on{background:var(--accent);border-color:var(--accent);color:#04121c}
.mtile .m-i{font-size:1.2rem;line-height:1}

/* trend s přechodovou výplní */
.trendc{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);
  padding:12px 12px 8px;margin-top:12px}
.tr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tr-t{font-size:.72rem;color:var(--sub);flex:1}
.tr-btn{display:flex;gap:0;border:1px solid var(--border2);border-radius:999px;overflow:hidden}
.tr-btn button{border:0;background:transparent;color:var(--sub);font-family:var(--sans);
  font-size:.7rem;font-weight:600;padding:5px 12px;cursor:pointer;transition:.15s}
.tr-btn button:hover:not(.on){background:var(--surface2);color:var(--tx)}
.tr-btn button.on{background:var(--accent);color:#04121c}
.tr-body{min-height:150px;font-size:.72rem;color:var(--mut)}

/* AURA */
.aura{border:1px solid var(--border2);border-radius:var(--rad);overflow:hidden;margin-bottom:22px}
.aura .a-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(90deg,rgba(57,208,216,.12),transparent)}
.aura .a-logo{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,#19b6c9,#0e94a6);color:#02171b;font-weight:700;font-size:.72rem}
.aura .a-name{font-weight:700;letter-spacing:.04em}
.aura .a-sub{font-size:.66rem;color:var(--sub)}
.aura .a-body{padding:0 14px 14px}
.modes{display:flex;gap:0;border:1px solid var(--border2);border-radius:999px;overflow:hidden;margin-bottom:10px}
.modes button{flex:1;border:0;background:transparent;color:var(--sub);font-family:var(--sans);
  font-size:.76rem;font-weight:600;padding:9px 6px;cursor:pointer;transition:.15s}
.modes button:hover:not(.on){background:var(--surface2);color:var(--tx)}
.modes button.on{background:var(--accent);color:#04121c}
.modes button[disabled]{cursor:not-allowed;opacity:.55}
.a-note{font-size:.7rem;color:var(--sub);line-height:1.45}
.prop{border:1px solid var(--border2);border-left:3px solid var(--accent);border-radius:var(--rad-sm);
  padding:12px 14px;margin-top:10px;background:var(--surface)}
.prop.warn{border-left-color:var(--warn)}
.prop.critical{border-left-color:var(--danger)}
.prop .p-t{font-weight:600;margin-bottom:5px}
.prop .p-r{font-size:.78rem;color:var(--sub);line-height:1.5}
.prop .p-b{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.a-hist{margin-top:12px;font-size:.72rem}
.a-hist .h-row{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-top:1px solid var(--border)}
.a-hist .h-t{color:var(--mut);font-family:var(--mono);font-size:.66rem;flex:none}
.a-hist .h-x{flex:1;color:var(--sub)}
.a-lim{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:10px 0}
.a-lim label{font-size:.64rem;color:var(--sub);display:block;margin-bottom:3px}
.a-lim input{width:100%;background:var(--surface2);border:1px solid var(--border2);color:var(--tx);
  border-radius:var(--rad-sm);padding:7px 9px;font-family:var(--mono);font-size:.85rem}

/* ════════════════════════════════════════════════════════════════════
   Záložky v detailu zařízení
   ════════════════════════════════════════════════════════════════════ */
.tabs{display:flex;gap:4px;position:sticky;top:0;z-index:5;margin:-4px -2px 16px;padding:8px 2px;
  background:var(--bg);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:1px solid transparent;background:transparent;color:var(--sub);
  font-family:var(--sans);font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:999px;
  cursor:pointer;transition:.15s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab:hover:not(.on){background:var(--surface2);color:var(--tx)}
.tab.on{background:var(--accent);border-color:var(--accent);color:#04121c}
.tab .tb{font-style:normal;font-size:.68rem;font-weight:700;min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:var(--danger);color:#fff;display:grid;place-items:center}
.tab.on .tb{background:#04121c;color:var(--accent)}
.tabp{display:none}
.tabp.on{display:block;animation:tabIn .18s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabp.on{animation:none}}

/* kompaktní stav místo dlouhého seznamu */
.stav{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px}
.si{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-sm);padding:9px 11px}
.si .k{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sub)}
.si .v{display:block;font-family:var(--mono);font-size:.92rem;margin-top:3px}

/* sbalené „všechny hodnoty“ */
.vsehodnot{margin-bottom:22px;border:1px solid var(--border);border-radius:var(--rad-sm);
  background:var(--surface);padding:10px 12px}
.vsehodnot summary{cursor:pointer;font-size:.72rem;color:var(--sub);list-style:none;
  display:flex;align-items:center;gap:6px}
.vsehodnot summary::-webkit-details-marker{display:none}
.vsehodnot summary::before{content:"▸";transition:.15s;color:var(--mut)}
.vsehodnot[open] summary::before{transform:rotate(90deg)}
.vsehodnot summary:hover{color:var(--tx)}
.si .s{display:block;font-size:.64rem;color:var(--mut);margin-top:2px;font-family:var(--mono)}
/* rotující vrtule ventilátoru – respektuj volbu omezeného pohybu */
@media (prefers-reduced-motion:reduce){.scada animateTransform{display:none}}

/* cedulka: stav, který vypadá jako porucha, ale je to nastavení */
.cedule{border:1px solid #5a4a15;border-left:3px solid var(--warn);border-radius:var(--rad-sm);
  background:rgba(217,165,32,.06);padding:11px 13px;margin-bottom:12px}
.cedule .c-t{font-weight:600;font-size:.85rem;color:var(--warn)}
.cedule .c-d{font-size:.76rem;color:var(--sub);line-height:1.5;margin-top:4px}
.cedule .c-a{margin-top:9px}

/* dimenzování jednotky na objem prostoru */
.dimg{display:flex;flex-wrap:wrap;gap:10px}
.dimf{flex:1 1 190px;display:flex;flex-direction:column;gap:4px;margin:0}
.dimf .d-l{font-size:.72rem;color:var(--sub)}
.dimf .d-l b{color:var(--mut);font-family:var(--mono);font-weight:400}
.dimf input{font-family:var(--mono);font-size:.95rem;background:var(--bg);color:var(--tx);
  border:1px solid var(--border2);border-radius:var(--rad-sm);padding:8px 10px;width:100%}
.dimf input:focus{outline:none;border-color:var(--accent)}
.dimv{margin-top:12px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--rad-sm);
  background:var(--surface);font-size:.84rem;color:var(--tx)}
.dimv b{color:var(--cool);font-family:var(--mono)}
.dimv .d-x{display:block;margin-top:5px;font-size:.72rem;color:var(--sub);line-height:1.5}
.dimg + .d-nad, .dimv + .d-nad{margin-top:16px}
.d-nad{font-size:.7rem;letter-spacing:.14em;color:var(--sub);text-transform:uppercase;margin:16px 0 6px}
.dimch{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--sub);
  margin:0 0 12px;cursor:pointer}
.dimch input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}

/* ── záznam linky Gree a konzole modulu klima jednotek (v64zt) ── */
.snifflog{height:280px;overflow:auto;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--rad-sm);padding:6px 8px;font-family:var(--mono);font-size:.72rem;line-height:1.55}
.snifflog:empty::before{content:'zatím žádný rámec';color:var(--mut)}
.sniffr{display:grid;grid-template-columns:70px 44px max-content max-content;gap:12px;white-space:nowrap;width:max-content;min-width:100%}
.sniffr:hover{background:var(--raised)}
.sniffr .sc{color:var(--mut)}
.sniffr .sp{color:var(--accent2)}
.sniffr .sh{color:var(--tx)}
.sniffr .sh.chyba{color:var(--warn)}
.sniffr .sh .zm{color:var(--bg);background:var(--accent2);border-radius:2px;padding:0 2px;font-weight:600}
.sniffr .sa{color:var(--sub)}
.konzlog{max-height:300px;overflow:auto;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--rad-sm);padding:6px 8px}
.konzlog:empty::before{content:'zatím žádný výstup';color:var(--mut);font-size:.74rem}
.konzb{border-bottom:1px solid var(--border);padding:4px 0}
.konzb:last-child{border-bottom:0}
.konzc{font-size:.7rem;color:var(--sub)}
.konzlog pre{margin:4px 0 0;font-family:var(--mono);font-size:.72rem;line-height:1.5;
  color:var(--tx);white-space:pre-wrap;word-break:break-word}
@media(max-width:700px){.sniffr{gap:8px}.sniffr .sa{display:none}}

/* ═══════════════════════════════════════════════════════════════════════
   v82 – vzhled nástěnky: detail přes celé okno, dlaždice, táhla,
   přepínače a segmentové volby. Přidáno na konec, nic se nepřepisuje.
   Barvy jsou zvlášť pro tmavý a světlý motiv – tvary a rozměry společné.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --rad:18px; --rad-sm:12px;
  --v82stin:0 1px 0 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.42);
  --v82lem:rgba(46,61,76,.7);
  --v82plocha:rgba(28,37,48,.72);
  --v82bunka:rgba(255,255,255,.035);
  --v82swoff:#2b3947;
}
:root[data-theme=light]{
  --v82stin:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  --v82lem:rgba(16,24,40,.12);
  --v82plocha:#fff;
  --v82bunka:rgba(16,24,40,.03);
  --v82swoff:#c7d0da;
}

/* ── 1. Detail zařízení přes celé okno (tlačítko ⤢) ─────────────────── */
.drawer.wide{ width:100%!important; max-width:100%!important;
  border-left:none; border-radius:0!important; }
.drawer.wide .dhead{ padding:16px max(24px,calc((100vw - 1560px)/2)); }
.drawer.wide .dbody{ max-width:1560px; margin:0 auto; padding:20px 24px 80px; }
/* na širokém okně dvousloupcová nástěnka; co je široké, zabere celý řádek */
@media(min-width:1180px){
  .drawer.wide .tabp.on{ display:grid; gap:18px; align-items:start;
    grid-template-columns:repeat(2,minmax(0,1fr)); }
  .drawer.wide .tabp.on > .sect{ margin:0; min-width:0; }
  .drawer.wide .tabp.on > .sect:has(.chartbox),
  .drawer.wide .tabp.on > .sect:has(canvas),
  .drawer.wide .tabp.on > .sect:has(svg),
  .drawer.wide .tabp.on > .sect:has(table),
  .drawer.wide .tabp.on > .sect:has(.scada),
  .drawer.wide .tabp.on > .sect:has(pre){ grid-column:1 / -1; }
}

/* ── 2. Sekce jako dlaždice ─────────────────────────────────────────── */
.dbody .sect{ background:var(--v82plocha); border:1px solid var(--v82lem);
  border-radius:var(--rad); padding:16px 18px; margin-bottom:18px;
  box-shadow:var(--v82stin); }
.dbody .sect h3{ margin:0 0 12px; font-size:.66rem; letter-spacing:.13em;
  color:var(--accent2); }
.dbody .sect h3::after{ background:linear-gradient(90deg,var(--v82lem),transparent); }
.card{ box-shadow:var(--v82stin); }
.tcell,.stav .si,.metric{ border-radius:var(--rad-sm);
  background:var(--v82bunka); border-color:var(--v82lem); }

/* ── 3. Táhla ───────────────────────────────────────────────────────── */
input[type=range]{ -webkit-appearance:none; appearance:none; cursor:pointer;
  width:100%; height:26px; padding:0; margin:4px 0 14px;
  border:none!important; background:transparent!important; box-shadow:none!important; }
input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)) 0/var(--pct,0%) 100% no-repeat,
             var(--surface2);
  box-shadow:inset 0 0 0 1px var(--border2); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-7px; border-radius:50%;
  background:#fff; border:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .12s ease, box-shadow .12s ease; }
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.1); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18);
  box-shadow:0 0 0 8px rgba(77,215,232,.16); }
input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 5px rgba(77,215,232,.32); }
input[type=range]::-moz-range-track{ height:8px; border-radius:999px; background:var(--surface2);
  box-shadow:inset 0 0 0 1px var(--border2); }
input[type=range]::-moz-range-progress{ height:8px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.5); }

/* ── 4. Přepínač zapnuto / vypnuto ──────────────────────────────────── */
.sw{ position:relative; display:inline-flex; width:54px; height:30px; flex:none;
  cursor:pointer; vertical-align:middle; }
.sw input{ position:absolute; inset:0; opacity:0; cursor:pointer;
  width:100%!important; height:100%; margin:0!important; min-width:0!important; }
.sw i{ position:absolute; inset:0; border-radius:999px; background:var(--v82swoff);
  border:1px solid var(--border2); transition:background .18s, box-shadow .18s; }
.sw i::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:transform .18s ease; }
.sw input:checked + i{ background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent; box-shadow:0 0 16px rgba(77,215,232,.4); }
.sw input:checked + i::after{ transform:translateX(24px); }
.sw input:focus-visible + i{ box-shadow:0 0 0 4px rgba(77,215,232,.3); }
.sw input:disabled + i{ opacity:.4; cursor:not-allowed; }

/* ── 5. Segmentová volba (jedna z několika možností) ────────────────── */
.seg{ display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px;
  background:var(--surface2); border:1px solid var(--border2); border-radius:999px; }
.seg .btn{ border:none!important; background:transparent!important; color:var(--sub);
  box-shadow:none!important; border-radius:999px; }
.seg .btn:hover:not(.primary){ background:rgba(127,160,190,.14)!important; color:var(--tx); }
.seg .btn.primary{ color:#02171b;
  background:linear-gradient(135deg,var(--accent),var(--accent2))!important;
  box-shadow:0 2px 10px rgba(25,182,201,.35)!important; }
.seg .btn[disabled]{ opacity:.4; }

/* ── 6. Tlačítka a pole ─────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:34px; line-height:1.15;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .08s; }
.btn.sm{ min-height:28px; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(77,215,232,.35); }
.btn[disabled],.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; }
.btn.danger:hover{ box-shadow:0 2px 12px rgba(248,81,73,.22); }
input,select,textarea{ transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 3px rgba(77,215,232,.22); }
input[type=checkbox],input[type=radio],progress{ accent-color:var(--accent); }

/* ── 7. Záložky jako pilulky ────────────────────────────────────────── */
.tabs{ gap:4px; }
.tabs .tab{ border-radius:999px; }
.tabs .tab.on{ background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#02171b; border-color:transparent; box-shadow:0 2px 12px rgba(25,182,201,.3); }

/* ═══════════════════════════════════════════════════════════════════════
   8. Nástěnka – tmavý motiv ve stylu velkoplošného panelu
   Černé pozadí, dlaždice se svítícím rámem, velká modrá čísla.
   Barva rámu i záře se bere z vlastní barvy zařízení (--cb), u alarmu
   je červená. Platí jen pro tmavý motiv; světlý zůstává bílý a klidný.
   ═══════════════════════════════════════════════════════════════════════ */
:root:not([data-theme=light]){
  --zar1:#2bb3e8; --zar2:#5fd6ff;
  --lemB:rgba(43,179,232,.55);
}
:root:not([data-theme=light]) body{
  background:#04070b;
  background-image:radial-gradient(1200px 700px at 50% -10%, rgba(25,120,180,.22), transparent 70%);
  background-attachment:fixed;
}
:root:not([data-theme=light]) .top{
  background:rgba(4,7,11,.9); border-bottom:1px solid rgba(43,179,232,.25);
}
/* plocha na celou šířku, ať se dlaždic vejde víc */
.wrap{ max-width:min(2200px, 97vw)!important; }
.grid{ grid-template-columns:repeat(auto-fill,minmax(214px,1fr))!important; gap:12px!important; }
.card{ padding:12px 13px!important; }
.card .nm{ font-size:.92rem!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .sn{ font-size:.63rem; opacity:.72; }
/* v86: odznak alarmu zpatky vedle tecky, ne na ni. Puvodni misto je
   right:34px prave proto, aby se tecka "na prijmu" vesla vedle nej.
   Misto na prvnim radku se rezervuje jen tam, kde odznak opravdu je. */
.abadge{ position:absolute; top:12px; right:34px; z-index:2; }
.card:has(.abadge) .row1 > div:first-child{ padding-right:76px; }
.metric{ padding:6px 7px!important; }
.metric .k{ font-size:.54rem!important; }
.metric .v{ font-size:.82rem!important; }

/* Pozor: průhlednost karet se nastavuje za běhu vlastním <style> s
   !important (posuvník Vzhled aplikace), takže se musí přebít taky. */
/* v86: levy lem je 5px pruh se stavem jednotky (barvu mu dava puvodni
   CSS: zelena bezi, cervena porucha, …). v82 ho prepsala tim, ze nastavila
   cely border najednou. Proto se tady nastavuji jen tri strany a sirka
   leveho pruhu – jeho BARVA zustava te puvodni. */
:root:not([data-theme=light]) .card{
  background:linear-gradient(165deg, rgba(14,34,56,.92), rgba(5,11,19,.95))!important;
  border-top:1px solid var(--lemB)!important;
  border-right:1px solid var(--lemB)!important;
  border-bottom:1px solid var(--lemB)!important;
  border-left-style:solid!important; border-left-width:5px!important;
  border-radius:14px;
  box-shadow:0 0 14px rgba(43,179,232,.20), inset 0 0 26px rgba(43,179,232,.05);
  backdrop-filter:none;
}
:root:not([data-theme=light]) .card[style*="--cb"]{
  border-top-color:color-mix(in srgb, var(--cb) 62%, transparent)!important;
  border-right-color:color-mix(in srgb, var(--cb) 62%, transparent)!important;
  border-bottom-color:color-mix(in srgb, var(--cb) 62%, transparent)!important;
  box-shadow:0 0 16px color-mix(in srgb, var(--cb) 32%, transparent),
             inset 0 0 26px color-mix(in srgb, var(--cb) 8%, transparent);
}
:root:not([data-theme=light]) .card:hover{
  border-top-color:var(--zar2)!important;
  border-right-color:var(--zar2)!important;
  border-bottom-color:var(--zar2)!important;
  box-shadow:0 0 26px rgba(95,214,255,.45), inset 0 0 30px rgba(43,179,232,.10)!important;
  transform:translateY(-2px);
}
/* velké číslo modře a se září (přebíjí gradientní výplň textu z v62) */
:root:not([data-theme=light]) .card .big{
  background:none!important; -webkit-text-fill-color:initial!important;
  color:var(--zar2)!important; text-shadow:0 0 20px rgba(95,214,255,.45);
  font-weight:600; font-size:2.1rem; line-height:1.05; letter-spacing:-.01em;
}
:root:not([data-theme=light]) .card .big span{
  color:#7f93a6!important; -webkit-text-fill-color:initial!important;
}
:root:not([data-theme=light]) .card .nm{ color:#dbe9f5; }
:root:not([data-theme=light]) .metric{
  background:rgba(43,179,232,.05); border:1px solid rgba(43,179,232,.16); border-radius:9px;
}
:root:not([data-theme=light]) .metric .k{ color:#6c8095; letter-spacing:.06em; }
:root:not([data-theme=light]) .metric .v{ color:var(--zar2); font-weight:600; }

/* detail zařízení ve stejném duchu */
:root:not([data-theme=light]) .drawer{ background:#04070b!important; }
:root:not([data-theme=light]) .dbody .sect{
  background:linear-gradient(165deg, rgba(13,32,52,.9), rgba(5,11,19,.93));
  border:1px solid var(--lemB);
  box-shadow:0 0 14px rgba(43,179,232,.18), inset 0 0 26px rgba(43,179,232,.05);
}
:root:not([data-theme=light]) .dbody .sect h3{ color:var(--zar2); }
:root:not([data-theme=light]) .stav .si,
:root:not([data-theme=light]) .tcell{
  background:rgba(43,179,232,.05); border:1px solid rgba(43,179,232,.16);
}
:root:not([data-theme=light]) .stav .si .v,
:root:not([data-theme=light]) .tcell b{ color:var(--zar2); }

/* ═══════════════════════════════════════════════════════════════════════
   v83 – skládačka, bannery, typografie, nápověda po najetí myší
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Detail využije celou šířku a sekce se poskládají ──────────────
   Grid s auto-fit sám určí počet sloupců podle šířky okna. Výšku řádků
   dopočítá JS (v83Skladacka) přes grid-row span, takže pod nižší sekcí
   nezůstane díra – mřížka se chová jako skládačka, ne jako tabulka. */
.drawer.wide .dbody{ max-width:min(2200px,97vw)!important; padding:18px 20px 80px!important; }
.drawer.wide .dhead{ padding:14px max(20px,calc((100vw - min(2200px,97vw))/2))!important; }
@media(min-width:1000px){
  .drawer.wide .tabp.on{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;
    grid-auto-rows:4px!important;
    column-gap:18px!important; row-gap:0!important;
    align-items:start!important;
  }
  .drawer.wide .tabp.on > .sect{ margin:0!important; min-width:0; }
  .drawer.wide .tabp.on > .sect.sirsi{ grid-column:span 2; }
  .drawer.wide .tabp.on > .sect.nejsirsi{ grid-column:1/-1; }
}

/* ── 2. Typografie ───────────────────────────────────────────────────
   Tabulkové číslice: hodnoty neposkakují do stran, když se mění.     */
body{ -webkit-font-smoothing:antialiased; letter-spacing:.005em; }
.mono,.big,.metric .v,.tcell b,.stav .si .v,input.mono{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ── 3. Nadpis sekce jako banner ─────────────────────────────────── */
.dbody .sect{ padding:0!important; overflow:hidden; }
.dbody .sect > h3{
  margin:0!important; padding:11px 16px 10px 14px;
  font-size:.66rem; letter-spacing:.14em; font-weight:700;
  background:linear-gradient(90deg, rgba(43,179,232,.14), rgba(43,179,232,.02) 60%, transparent);
  border-bottom:1px solid rgba(43,179,232,.22);
  border-left:3px solid var(--zar1,#2bb3e8);
}
.dbody .sect > h3::after{ display:none; }
.dbody .sect > *:not(h3){ margin-left:16px; margin-right:16px; }
.dbody .sect > *:nth-child(2){ margin-top:14px; }
.dbody .sect > *:last-child{ margin-bottom:14px; }

/* ── 4. Nápověda ─────────────────────────────────────────────────── */
.napochip{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; margin-left:auto; flex:none;
  border-radius:50%; border:1px solid rgba(43,179,232,.5); color:var(--zar2,#5fd6ff);
  font-size:.62rem; font-weight:700; letter-spacing:0; cursor:help;
  background:rgba(43,179,232,.08);
}
.napochip:hover{ background:var(--zar1,#2bb3e8); color:#02171b; border-color:var(--zar1,#2bb3e8); }
.napobub{
  position:fixed; z-index:9999; max-width:460px; pointer-events:none;
  padding:11px 13px; border-radius:12px; font-size:.78rem; line-height:1.55;
  opacity:0; transform:translateY(4px);
  transition:opacity .13s ease, transform .13s ease;
  background:rgba(8,16,26,.97); color:#d8e6f2;
  border:1px solid rgba(43,179,232,.45);
  box-shadow:0 10px 34px rgba(0,0,0,.6), 0 0 18px rgba(43,179,232,.18);
}
:root[data-theme=light] .napobub{
  background:rgba(255,255,255,.98); color:#1d2a36;
  border-color:rgba(16,24,40,.18); box-shadow:0 10px 34px rgba(16,24,40,.18);
}
.napobub.vidno{ opacity:1; transform:translateY(0); }
.napobub b{ color:var(--zar2,#5fd6ff); }
:root[data-theme=light] .napobub b{ color:#0b6b8a; }
html[data-napoveda="0"] .napochip{ display:none; }
#napoVyp{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem;
  color:var(--sub); cursor:pointer; margin-right:10px; white-space:nowrap; }
#napoVyp .sw{ width:40px; height:23px; }
#napoVyp .sw i::after{ width:17px; height:17px; }
#napoVyp .sw input:checked + i::after{ transform:translateX(17px); }

/* ═══════════════════════════════════════════════════════════════════════
   v84 – hlavička s logem NEXE24 a třetí, střední motiv
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Značka v hlavičce ─────────────────────────────────────────────
   Hlavní je NEXE24 DISPEČINK, pod ním menší ELITOP KLIMA. Dvě varianty
   obrázku (w = světlé písmo na tmavý podklad, d = tmavé na světlý) se
   přepínají stejně jako u loga ELITOP.                                */
.znacka{ display:flex; flex-direction:column; align-items:flex-start;
  gap:3px; flex:none; line-height:1; }
.znacka .n24{ height:36px; width:auto; display:block; }
.znacka .podznacka{ display:flex; align-items:center; gap:9px; padding-left:2px; }
/* v85: logo ELITOP KLIMA z hlavicky pryc, zustava jen popisek */
.znacka .podznacka small{ font-size:.56rem; letter-spacing:.22em; font-weight:600;
  color:var(--accent2); text-transform:uppercase; }
:root[data-theme=light] .n24-w{ display:none; }
:root:not([data-theme=light]) .n24-d{ display:none; }
@media(max-width:760px){
  .znacka .n24{ height:28px; }
  .znacka .podznacka small{ display:none; }
}

/* ── 2. Výběr motivu ─────────────────────────────────────────────── */
#motivVyb{ display:inline-flex; align-items:center; gap:8px; margin-right:10px; }
#motivVyb > span{ font-size:.72rem; color:var(--sub); white-space:nowrap; }
#motivVyb .btn{ padding:4px 11px; font-size:.74rem; min-height:26px; }
#hmiThBtn{ display:none; }
@media(max-width:900px){ #motivVyb > span{ display:none; } }

/* ── 3. Střední motiv ────────────────────────────────────────────────
   Mezi černou nástěnkou a bílou kanceláří: tmavý, ale ne černý. Je to
   „ne-světlý" motiv, takže všechna tmavá pravidla platí a tady se jen
   zvedají plochy.                                                     */
:root[data-theme=stredni]{
  --bg:#171e26; --surface:#1e2731; --surface2:#26313d; --raised:#2d3a47;
  --border:#33414f; --border2:#415263;
  --tx:#e8eff6; --sub:#9aa9b8; --mut:#6d7d8d;
  --glass:rgba(30,39,49,.78); --glass2:rgba(38,49,61,.66);
  --v82plocha:rgba(36,47,59,.92); --v82lem:rgba(80,100,120,.5);
  --v82bunka:rgba(255,255,255,.05); --v82swoff:#3c4a59;
  --lemB:rgba(70,140,185,.5);
}
:root[data-theme=stredni] body{
  background:#171e26;
  background-image:radial-gradient(1200px 700px at 50% -10%, rgba(35,130,190,.16), transparent 70%);
}
:root[data-theme=stredni] .top{ background:rgba(23,30,38,.93); border-bottom:1px solid rgba(70,140,185,.22); }
:root[data-theme=stredni] .card{
  background:linear-gradient(165deg, rgba(37,49,63,.95), rgba(26,34,44,.96))!important;
  box-shadow:0 0 10px rgba(70,140,185,.12), inset 0 0 26px rgba(70,140,185,.04);
}
:root[data-theme=stredni] .dbody .sect{
  background:linear-gradient(165deg, rgba(37,49,63,.93), rgba(26,34,44,.95));
  box-shadow:0 0 10px rgba(70,140,185,.12), inset 0 0 26px rgba(70,140,185,.04);
}
:root[data-theme=stredni] .drawer{ background:#171e26!important; }
:root[data-theme=stredni] .stav .si,
:root[data-theme=stredni] .tcell,
:root[data-theme=stredni] .metric{
  background:rgba(255,255,255,.045); border-color:rgba(90,115,140,.3);
}

/* ZNACKA-V87 */
/* ═══════════════════════════════════════════════════════════════════════
   v87 – karta zařízení: silnější stavový pruh a rozvržení, ve kterém se
   nemůže nic překrýt
   ═══════════════════════════════════════════════════════════════════════ */

/* Levý pruh nese stav jednotky. Barvu mu dává původní CSS, tady se jen
   zesiluje z 5 na 8 px, aby byl vidět i koutkem oka. Platí v obou motivech. */
.card{ border-left-style:solid!important; border-left-width:8px!important; }

/* Odznak alarmu byl position:absolute, tedy plaval nad obsahem – dřív nebo
   později se s delším názvem nebo na užší kartě musel s něčím potkat.
   Karta je proto mřížka o dvou sloupcích a odznak dostal vlastní sloupec
   v prvním řádku. Tím přestal být překryv možný, ne jen nepravděpodobný:
   odznak a text spolu sdílí řádek a navzájem si místo ukrajují.
   Ostatní obsah karty (velká hodnota, buňky, stavová lišta) jde přes
   oba sloupce, jako dřív.                                               */
.card{ display:grid!important; grid-template-columns:minmax(0,1fr) auto;
  align-content:start; }
.card > .abadge{ position:static!important; grid-column:2; grid-row:1;
  align-self:start; justify-self:end; margin:0 0 0 8px; }
.card > .row1{ grid-column:1; grid-row:1; min-width:0; }
.card > *:not(.abadge):not(.row1){ grid-column:1 / -1; min-width:0; }

/* Zkracování funguje jen tam, kde se pružná položka smí zmenšit.
   Bez min-width:0 se flexová položka roztáhne podle obsahu a text
   vyteče z karty ven. */
.card .row1 > div{ min-width:0; }
.card .row1 > div:first-child{ flex:1 1 auto; min-width:0; overflow:hidden; }
.card .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .sn{ overflow:hidden; text-overflow:ellipsis; }
.card .biglbl,.card .big{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* ZNACKA-V88 */
/* ═══════════════════════════════════════════════════════════════════════
   v88 – moderní vrchní lišta
   ═══════════════════════════════════════════════════════════════════════ */


/* ── OPRAVA v87: mřížka na kartě stlačila název ──────────────────────
   v87 udělala z karty grid, aby měl odznak alarmu vlastní sloupec.
   Jenže položky, které jdou přes oba sloupce (velká hodnota, buňky,
   stavová lišta), ovlivňují šířku sloupců – a název se smrskl na 41 px,
   tedy na „❄️ …". Změřeno: 17 z 19 karet mělo useknutý název.
   Karta se proto vrací na běžný blok a odznak zase plave nad obsahem,
   ale na svém PŮVODNÍM místě (right:34px, vedle tečky „na příjmu"),
   a na prvním řádku se mu rezervuje místo. Překryv je tím ošetřený
   stejně spolehlivě a nic se nemačká.
   Ověřeno měřením: 0 překryvů, 0 přetečení a 0 smrsklých názvů
   při šířkách 2200 / 1400 / 900 / 600 a 380 px.                      */
.card{ display:block!important; }
.card > .abadge{ position:absolute!important; top:12px; right:34px; margin:0; }
.card:has(.abadge) .row1 > div:first-child{ padding-right:78px; }
.card .row1 > div{ min-width:0; }
.card .row1 > div:first-child{ flex:1 1 auto; min-width:0; }
.card .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .sn{ overflow:hidden; text-overflow:ellipsis; }

/* Logo v kolečku (profilový obrázek) pryč – široké logo vmáčknuté do
   30px kruhu nevypadalo dobře a v liště nic nepřidávalo. */
#whoAvatar{ display:none!important; }

/* Lišta zůstává nahoře i při rolování, s rozostřeným podkladem. */
.top{ position:sticky; top:0; z-index:200;
  gap:8px!important; padding:10px 20px!important; min-height:60px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  flex-wrap:wrap; align-items:center; }
:root:not([data-theme=light]) .top{
  background:rgba(6,11,18,.82)!important;
  border-bottom:1px solid rgba(43,179,232,.18)!important;
  box-shadow:0 6px 24px rgba(0,0,0,.45); }
:root[data-theme=light] .top{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(16,24,40,.1)!important;
  box-shadow:0 4px 18px rgba(16,24,40,.07); }

/* Jedna výška a jedno zaoblení pro všechno, co se dá zmáčknout. */
.top .btn,.top select,.top .pill,.top .roletag,.top .locb{
  height:32px; min-height:32px; border-radius:10px;
  display:inline-flex; align-items:center; }
.top .btn{ padding:0 13px; }
.top select{ padding:0 8px; }

/* Údaje, které se nedají zmáčknout (hodiny, verze, role), jsou tišší –
   ať je na první pohled poznat, co je ovládání a co jen informace. */
.top #hmiClock{ font-family:var(--mono); font-size:.86rem; font-weight:600;
  opacity:.75; letter-spacing:.02em; padding:0 2px; }
.top #verzeInfo,.top #whoRole{
  background:transparent!important; border:1px solid currentColor!important;
  opacity:.55; font-size:.64rem; letter-spacing:.06em; padding:0 8px;
  height:22px; min-height:22px; }
.top #whoName{ font-size:.76rem; opacity:.7; }
.top .locb{ padding:0 11px; font-size:.7rem; gap:7px;
  border:1px solid currentColor; background:transparent!important; opacity:.75; }

/* Svislý oddělovač před akčními tlačítky. */
.top #bellBtn{ position:relative; margin-left:6px; }
.top #bellBtn::before{ content:""; position:absolute; left:-10px; top:6px; bottom:6px;
  width:1px; background:currentColor; opacity:.18; }

#motivVyb > span,#napoVyp > span{ font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; opacity:.6; }
#motivVyb{ margin-right:4px; }

/* Na užším okně se lišta nemačká, jen z ní vypadne to nejméně potřebné. */
@media(max-width:1100px){ .top #hmiClock,.top #whoName{ display:none; } }
@media(max-width:760px){ .top{ padding:8px 12px!important; } .top .locb{ display:none; } }

/* ZNACKA-V90 */
/* ═══════════════════════════════════════════════════════════════════════
   v90 – okno zařízení se schovávalo pod horní lištu + cesta zpět
   ═══════════════════════════════════════════════════════════════════════ */

/* v88 dala liště z-index 200, aby zůstala nahoře při rolování. Jenže
   okno zařízení má 101, takže se mu lišta položila na záhlaví – název
   a sériové číslo zmizely pod logem. Lišta se vrací na 50; okno
   zařízení je překryv přes celou stránku a patří nad ni. */
.top{ z-index:50!important; }

/* Cesta zpět na seznam. Dosud byl jen křížek vpravo nahoře, který se
   navíc schoval pod lištu. */
.dhead{ gap:12px; }
.dhead .zpet{ flex:none; align-self:center; gap:6px; font-weight:600; }
.dhead .zpet:hover{ border-color:var(--accent); }
.dhead > div:nth-child(2){ flex:1; min-width:0; }
.dhead h2{ overflow:hidden; text-overflow:ellipsis; }
@media(max-width:600px){ .dhead .zpet span{ display:none; } }

/* ZNACKA-V94 */
/* ═══════════════════════════════════════════════════════════════════════
   v94 – vrchní lišta: větší logo, odstup, výběr motivu až po kliknutí
   ═══════════════════════════════════════════════════════════════════════ */

/* Logo je větší a klikací – vede na seznam zařízení. Nápis VIS · CLOUD
   pod ním zrušen, logo ho obsahuje samo (DISPEČINK). */
.znacka{ cursor:pointer; gap:0; margin-right:10px; }
.znacka .n24{ height:48px; }
.znacka:hover{ opacity:.85; }
.znacka:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
@media(max-width:760px){ .znacka .n24{ height:36px; } }

/* Odznak CLOUD se lepil na logo. */
.top .locb{ margin-left:6px; }

/* ── Výběr motivu: jedno tlačítko, nabídka až po kliknutí ───────────── */
#motivVyb{ position:relative; display:inline-flex; margin-right:4px; }
#motivBtn{ gap:8px; }
#motivBtn::after{ content:"▾"; font-size:.7rem; opacity:.6; }
.motivmenu{ position:absolute; top:calc(100% + 6px); right:0; z-index:300;
  min-width:150px; padding:5px; border-radius:12px;
  display:flex; flex-direction:column; gap:2px; }
:root:not([data-theme=light]) .motivmenu{
  background:rgba(10,18,28,.97); border:1px solid rgba(43,179,232,.35);
  box-shadow:0 12px 34px rgba(0,0,0,.6); }
:root[data-theme=light] .motivmenu{
  background:#fff; border:1px solid rgba(16,24,40,.14);
  box-shadow:0 12px 34px rgba(16,24,40,.16); }
.motivmenu[hidden]{ display:none; }
.motivmenu button{ all:unset; cursor:pointer; padding:8px 11px; border-radius:9px;
  font-family:var(--sans); font-size:.8rem; color:var(--tx);
  display:flex; align-items:center; gap:9px; }
.motivmenu button:hover{ background:rgba(127,160,190,.16); }
.motivmenu button[aria-checked="true"]{
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#02171b; font-weight:600; }
.motivmenu button i{ font-style:normal; width:14px; text-align:center; opacity:.8; }

/* Pojistka: globální pravidlo input,select{width:100%} se v liště nehodí –
   výběr jazyka se podle obsahu roztahoval a lámal řádek. */
.top select{ width:auto!important; flex:none; min-width:74px; }

/* ZNACKA-V95 */
/* ═══════════════════════════════════════════════════════════════════════
   v95 – střední motiv je konečně střední
   Jas pozadí (relativní luminance): tmavý 0,002 · střední BYL 0,013 ·
   světlý 0,827. Střední se od tmavého lišil o nic. Nově 0,033, tedy
   zhruba 2,5× světlejší, břidlicová šeď.
   Stavové barvy jsou na tom podkladu o kus jasnější, aby zůstaly čitelné
   – ověřený kontrast proti kartě #333c46: text 11,5:1, popisky 7,4:1,
   zelená 6,4:1, oranžová 7,6:1, červená 5,0:1.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme=stredni]{
  --bg:#2a333d; --surface:#39434e; --surface2:#414c58; --raised:#4b5765;
  --border:#4e5a67; --border2:#5e6b79;
  --tx:#eff5fa; --sub:#bcc8d4; --mut:#8d9aa7;
  --ok:#52d16a; --warn:#f5c249; --danger:#ff8a82;
  --glass:rgba(57,67,78,.82); --glass2:rgba(65,76,88,.72);
  --v82plocha:rgba(51,60,70,.95); --v82lem:rgba(94,107,121,.65);
  --v82bunka:rgba(255,255,255,.055); --v82swoff:#5a6775;
  --lemB:rgba(125,165,200,.55); --zar1:#5bc6e8; --zar2:#8fe0f5;
}
:root[data-theme=stredni] body{
  background:#2a333d;
  background-image:radial-gradient(1200px 700px at 50% -10%, rgba(70,150,205,.14), transparent 70%);
}
:root[data-theme=stredni] .top{
  background:rgba(38,47,57,.94)!important;
  border-bottom:1px solid rgba(125,165,200,.25)!important;
}
:root[data-theme=stredni] .drawer{ background:#2a333d!important; }
:root[data-theme=stredni] .card{
  background:linear-gradient(165deg, #3a4450, #2f3741)!important;
  box-shadow:0 0 10px rgba(90,140,180,.10), inset 0 0 26px rgba(125,165,200,.04);
}
:root[data-theme=stredni] .dbody .sect{
  background:linear-gradient(165deg, #333c46, #2d3640);
  box-shadow:0 0 10px rgba(90,140,180,.10), inset 0 0 26px rgba(125,165,200,.04);
}
:root[data-theme=stredni] .stav .si,
:root[data-theme=stredni] .tcell,
:root[data-theme=stredni] .metric{
  background:rgba(255,255,255,.06); border-color:rgba(110,125,140,.45);
}
:root[data-theme=stredni] .card .big{ color:var(--zar2)!important; text-shadow:none; }
:root[data-theme=stredni] .metric .v{ color:var(--zar2); }
:root[data-theme=stredni] .motivmenu{
  background:#333c46; border:1px solid rgba(125,165,200,.4);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}
:root[data-theme=stredni] .napobub{
  background:#333c46; color:#eff5fa; border-color:rgba(125,165,200,.45);
}

/* ZNACKA-V96 */
/* ═══════════════════════════════════════════════════════════════════════
   v96 – název zařízení se nikdy nezkracuje
   Dosud se název vešel jen na jeden řádek a zbytek ukrojily tři tečky:
   „HYUN…", „Klima …", „Žabka …". Místo mu ubíral odznak alarmu, kterému
   se na prvním řádku rezervovalo 78 px.
   Odznak si proto bere vlastní řádek nad názvem (vpravo) a název dostane
   celou šířku karty; když se nevejde, zalomí se na druhý řádek místo
   zkracování. Jeden řádek navíc má jen karta, která odznak opravdu má.
   ═══════════════════════════════════════════════════════════════════════ */
.card > .abadge{ position:static!important; display:block; width:fit-content;
  margin:0 0 6px auto!important; }
.card:has(.abadge) .row1 > div:first-child{ padding-right:0!important; }
.card .nm{ white-space:normal!important; overflow:visible!important;
  text-overflow:clip!important; line-height:1.25; word-break:break-word; }
.card .sn{ white-space:normal!important; overflow:visible!important;
  text-overflow:clip!important; }

/* ═══ ZNACKA-V97 — spodek karty je u všech karet ve stejné výšce ═══ */
/* Karta je sloupec: hlavička (odznak, název, SN) nahoře, blok od popisku
   teploty dolů (popisek, velká hodnota, dlaždice, stavová lišta) přilepený
   ke spodnímu okraji. Dlaždice mají pevnou minimální výšku, takže se blok
   neposune, když se hodnota vejde na jeden řádek místo dvou.             */
.card{ display:flex!important; flex-direction:column!important; }
.card > *{ flex:0 0 auto; }
.card .row1{ min-width:0; }
.card .biglbl{ margin-top:auto!important; }
.card:not(:has(.biglbl)) .big{ margin-top:auto!important; }
.card .metrics{ min-height:69px; }

/* ═══ ZNACKA-V98 — značka NEXE24 v hlavičce zařízení i na přihlášení ═══ */
/* Hlavička otevřeného zařízení: za tlačítkem Zpět je logo NEXE24,
   popis zařízení (název + SN) se odsune do pravého rohu k ovládacím
   ikonám. V úzkém panelu je logo menší, na telefonu se schová.        */
.dhead::before{
  content:''; flex:0 0 auto; align-self:center;
  width:176px; height:38px; margin-right:6px;
  background-image:url(/static/lista-nexe24-w.png);
  background-repeat:no-repeat; background-position:left center; background-size:contain;
}
:root[data-theme="light"] .dhead::before{ background-image:url(/static/lista-nexe24-d.png); }
.drawer:not(.wide) .dhead::before{ width:118px; height:26px; margin-right:4px; }
@media (max-width:620px){ .dhead::before{ display:none; } }
.dhead > .zpet{ order:-1; }
.dhead > div:has(> h2){ text-align:right; min-width:0; }
.dhead > div:has(> h2) h2{ overflow-wrap:anywhere; }

/* Přihlašovací stránka: značka NEXE24 místo loga ELITOP; nadpis
   „NEXE24 VIS" pod logem je tím pádem zbytečný.                        */
.login-logo{
  height:56px!important;
  background-image:url(/static/lista-nexe24-w.png)!important;
  background-repeat:no-repeat!important; background-position:center center!important;
  background-size:contain!important;
}
:root[data-theme="light"] .login-logo{ background-image:url(/static/lista-nexe24-d.png)!important; }
.login-logo img{ display:none!important; }
.login-box > h1{ display:none!important; }

/* ═══ ZNACKA-V99 — hlavička zařízení: logo vlevo (odkaz zpět),
       větší název, SN s odstupem, tlačítko Zpět úplně vpravo ═══ */
/* Logo je teď skutečný prvek (.dznacka), ne dekorace přes ::before,
   takže se na něj dá kliknout – stejně jako Zpět vrátí na seznam.   */
.dhead .dznacka{
  order:-1; flex:0 0 auto!important; align-self:center; cursor:pointer;
  width:176px; height:38px; margin-right:6px;
  background-image:url(/static/lista-nexe24-w.png);
  background-repeat:no-repeat; background-position:left center; background-size:contain;
}
:root[data-theme="light"] .dhead .dznacka{ background-image:url(/static/lista-nexe24-d.png); }
.drawer:not(.wide) .dhead .dznacka{ width:118px; height:26px; margin-right:4px; }
.dhead .dznacka:hover{ opacity:.82; }
@media (max-width:620px){ .dhead .dznacka{ display:none; } }

/* v98 kreslila logo přes ::before – to už není potřeba */
.dhead::before{ display:none!important; content:none!important; }

/* tlačítko Zpět putuje na pravý konec lišty */
.dhead > .zpet{ order:9; margin-left:4px; }

/* blok s názvem drží volné místo (dřív to dělalo pravidlo na druhého
   potomka, které vložením loga přestalo platit), název je větší
   a mezi textem a ikonami ⤢ ✕ zůstává 34 px volno                   */
.dhead > div:has(> h2){ flex:1 1 0%; padding-right:22px; min-width:0; text-align:right; }
.dhead h2{ font-size:24px; line-height:1.22; margin:0; }
.dhead .sn{ font-size:12.5px; margin-top:3px; }

/* ═══ ZNACKA-V100 — logo stejně vysoké jako na úvodní stránce ═══ */
/* Horní lišta má logo 240 × 48 px. Hlavička zařízení ho měla 176 × 38
   (a v úzkém panelu dokonce 118 × 26), přihlášení 56 px. Všude je teď
   stejných 48 px na výšku.
   V úzkém panelu by se vedle plného loga název nevešel, proto se tam
   hlavička zalomí: první řádek logo + ikony + Zpět, druhý řádek název
   a SN. Bez toho by hlavička narostla na 271 px.                      */
.dhead{ flex-wrap:wrap; }
.dhead .dznacka{ width:240px; height:48px; }
.drawer:not(.wide) .dhead .dznacka{ width:240px; height:48px; margin-right:6px; }
.drawer:not(.wide) .dhead > div:has(> h2){ flex:1 0 100%; order:10; padding-right:0; }
.login-logo{ height:48px!important; }

/* ═══ ZNACKA-V101 — křížek v hlavičce zařízení je zbytečný ═══ */
/* Zavřít detail jde teď třemi způsoby: tlačítkem Zpět, kliknutím na
   logo a klávesou Esc – křížek vedle Zpět nic nepřidával.
   Skrývá se jen tam, kde tlačítko Zpět opravdu je. V chybových
   hlavičkách zásuvky (nepodařilo se načíst zařízení) Zpět není,
   takže tam křížek zůstává jako jediné tlačítko na zavření.
   Prvek sám v app.js zůstává, jen se v hlavičce zařízení nekreslí.  */
.dhead:has(> .zpet) .close:not(#wideBtn){ display:none; }

/* ZNACKA-V102 - trend: osy podle jednotky (zmena je v app.js) */

/* ZNACKA-V103 - procentni osa v trendu (zmena je v app.js) */

/* ZNACKA-V104 - OTA udalosti nejsou alarmy (zmena je v server.js, app.js, index.html) */

/* ZNACKA-V105 - kvalita linky podle pomeru (zmena je v app.js) */

/* ZNACKA-V106 - rada AHU: typy a aplikacni profil (zmena je v app.js) */

/* ═══ ZNACKA-V107 — katalog parametrů AHU v záložce Nastavení ═══ */
.ahuSkup{ margin:0 0 14px; }
.ahuSkupNadpis{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sub); font-weight:700; margin:0 0 2px; }
.ahuSkupPopis{ font-size:.75rem; color:var(--mut); margin:0 0 6px; }
.ahuTab{ width:100%; }
.ahuTab td, .ahuTab th{ vertical-align:top; }
.ahuTab td.mono, .ahuTab th:first-child{ white-space:nowrap; }
@media (max-width:760px){
  .ahuTab th:nth-child(3), .ahuTab td:nth-child(3){ display:none; }
}

/* ZNACKA-V108 - protokol o uvedeni do provozu (zmena je v app.js) */

/* ZNACKA-V109 - firmware: nazvy verzi a pocty zarizeni (zmena je v server.js, app.js, index.html) */

/* ZNACKA-V110 - nastaveni modulu AHU z dispecinku (applyConfig) */
.ahuCfgTab td{vertical-align:middle}
.ahuCfgTab input.ahuCfgIn{width:84px;padding:4px 7px;font-size:.78rem;
  font-family:var(--mono);margin-bottom:0}
.ahuCfgTab input.ahuCfgIn::placeholder{opacity:.45}
.ahuCfgTab td:last-child{white-space:nowrap}
.ahuCfgTab td:last-child .btn{margin-left:5px;padding:4px 9px}

/* ZNACKA-V111 - rada AHU je tepelne cerpadlo vzduch-vzduch (zmena je v app.js a server.js) */

/* ZNACKA-V112 - rucni rezim je videt, detail se obnovuje sam */
.kjRucniPruh{display:flex;gap:12px;align-items:center;margin:0 0 12px;padding:11px 14px;
  border-radius:var(--rad-sm);background:color-mix(in srgb,var(--warn) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 55%,transparent)}
.kjRucniZn{font-size:1.25rem;line-height:1;color:var(--warn);flex:none}
.kjRucniNad{font-size:.86rem;font-weight:700;color:var(--warn);letter-spacing:.01em}
.kjRucniTxt{font-size:.74rem;color:var(--sub);line-height:1.5;margin-top:2px}
@media (max-width:620px){.kjRucniPruh{flex-wrap:wrap}.kjRucniPruh .btn{width:100%}}

/* ZNACKA-V113 - zive sekce zpatky jako prime deti mrizky Prehledu */
.kjRucniPruh{grid-column:1 / -1}

/* ZNACKA-V114 - lista zalozek pod hlavickou, Prehled srovnany */
/* Hlavicka ma prednost pred listou a lista parkuje pod ni. */
.drawer .dhead{z-index:6}
.drawer .tabs{top:var(--dheadH,83px)}

/* Pevne poradi sekci Prehledu u rady KJ/HCU. Bez neho mrizka sklada
   sekce tak, jak je vyrobi kod, a diry mezi ruzne vysokymi sekcemi
   zustanou prazdne. */
.drawer.kjui #kjSekPruh{order:1}
.drawer.kjui .tabp.on > #sekStavSpojeni{order:2}
.drawer.kjui .tabp.on > #kjSekHlava{order:3}
.drawer.kjui .tabp.on > #kjSekRidi{order:4}
.drawer.kjui .tabp.on > #kjSekRezim{order:5}
.drawer.kjui .tabp.on > #kjSekJednotka{order:6}
.drawer.kjui .tabp.on > #kjSekOvladani{order:7}
.drawer.kjui .tabp.on > #kjSekRucni{order:8}
.drawer.kjui .tabp.on > #kjSekSpojeni{order:9}

/* ZNACKA-V115 - oprava poradi z v114 a konec prosvitani pod detailem */

/* V114 jsem poradi sekci Prehledu dal jen na .sect. „Vsechny namerene
   hodnoty“ je ale <details class="vsehodnot">, ne .sect – pravidlo ho
   minulo, zustalo mu poradi 0, skocilo na zacatek a prekrylo se
   s „Navrhy na vylepseni“ (zmereno 391 x 36 px). Catch-all proto miri
   na KAZDE prime dite; devet pojmenovanych sekci ho prebije (selektor
   pres id je silnejsi). */
.drawer.kjui .tabp.on > *{order:50}

/* Detail pres celou sirku prekryva celou stranku, takze sklenena
   pruhlednost uz nema co ukazovat – jen nechava prosvitat dlazdice pod
   nim a plete oci. V uzkem okne (detail jako panel u kraje) sklo zustava. */

/* ZNACKA-V116 - skladacka meri vsechny prvky mrizky */
/* Pruh rucniho rezimu je bezny prvek mrizky pres celou sirku, aby mu
   skladacka zmerila vysku. Prazdny zmizi, at nedela diru. */
#kjSekPruh{grid-column:1 / -1}
#kjSekPruh:empty{display:none}

/* ZNACKA-V117 - zivy tik detailu meni jen zmenene sekce (app.js kjZiveVymen) */