/* LUMIG Cloud – frontend. Barvy jako tokeny. Výchozí je světlý vzhled, tmavý jen volbou
   (atribut data-theme="dark" na <html>; u uživatele uložený v účtu, na přihlášení v prohlížeči). */
:root {
  color-scheme: light;
  --bg: #f4f4f2;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --border: #dddcd7;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #76756f;
  --accent: #256abf;
  --accent-text: #ffffff;
  --series-1: #2a78d6;
  --grid: #e6e5e0;
  /* stavové barvy – vždy s popiskem, nikdy samotné */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --unknown: #9a9993;
  --danger-text: #b42323;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  --radius: 8px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211;
  --surface: #1a1a19;
  --surface-2: #242422;
  --border: #383835;
  --text: #ffffff;
  --text-2: #c3c2b7;
  --muted: #9a998f;
  --accent: #3987e5;
  --series-1: #3987e5;
  --grid: #2c2c2a;
  --unknown: #7b7a74;
  --danger-text: #f08a8a;
  --shadow: none;
}
/* Mapové dlaždice OSM jsou jen světlé – v tmavém vzhledu je ztlumit */
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.75) contrast(1.1) saturate(0.85); }

/* přepínač vzhledu */
.btn.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; }
.btn.theme-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

* { box-sizing: border-box; }
/* Atribut hidden musí vyhrát nad display: grid/flex z pravidel níže */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.pad { padding: 16px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* hlavička */
.top {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); white-space: nowrap; }
.crumbs { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.crumbs a { color: var(--text-2); }
.user { display: flex; align-items: center; gap: 10px; color: var(--text-2); white-space: nowrap; }
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* tlačítka a formuláře */
.btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.small { padding: 2px 8px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: default; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=time], select {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 7px 10px; min-width: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* přihlášení */
.login {
  margin: 10vh auto 0; width: min(360px, calc(100% - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); display: grid; gap: 12px;
}
.login h1 { margin: 0 0 4px; font-size: 20px; }
.login label { display: grid; gap: 4px; color: var(--text-2); font-size: 14px; }
.error { color: var(--danger-text); font-size: 14px; }

/* seznam zakázek */
.sites { padding: 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; text-decoration: none; color: var(--text); box-shadow: var(--shadow);
}
.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 4px; font-size: 16px; }

/* zakázka */
.site-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.site-head h1 { margin: 0; font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--text-2);
  background: var(--surface);
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--unknown); }
.dot.good { background: var(--good); }
.dot.warning { background: var(--warning); }
.dot.serious { background: var(--serious); }
.dot.critical { background: var(--critical); }
.tabs { display: flex; gap: 2px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a {
  padding: 9px 12px; text-decoration: none; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.badge { background: var(--critical); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 12px; margin-left: 4px; }

/* mapa */
.map-wrap { flex: 1; min-height: 360px; display: flex; position: relative; }
#map { flex: 1; min-height: 360px; }
.side {
  width: 340px; flex: none; overflow: auto; background: var(--surface); border-left: 1px solid var(--border); padding: 12px;
}
.side h3 { margin: 0 0 8px; font-size: 14px; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.side li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.legend { display: grid; gap: 4px; margin-bottom: 16px; font-size: 13px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.placing-bar {
  position: absolute; z-index: 1000; left: 50%; top: 10px; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 12px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); display: flex; gap: 10px; align-items: center; max-width: calc(100% - 32px);
}
.map-wrap.placing #map { cursor: crosshair; }
.leaflet-container { background: var(--surface-2); font: inherit; }
.popup h4 { margin: 0 0 4px; font-size: 14px; }
.popup dl { display: grid; grid-template-columns: auto auto; gap: 0 12px; margin: 0 0 6px; font-size: 13px; }
.popup dt { color: var(--text-2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-2); }
.popup dd { margin: 0; }

/* tabulky */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; }
.toolbar .grow { flex: 1; }
.toolbar input[type=search] { flex: 0 1 360px; }
.table-wrap { overflow: auto; padding: 0 16px 16px; }
table { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; }
th { color: var(--text-2); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover, tbody tr.selected { background: var(--surface-2); }
.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* detail svítidla */
.detail {
  margin: 0 16px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
}
.detail-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.detail h2 { margin: 0; font-size: 17px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 12px 0; }
.facts div { display: grid; }
.facts span { color: var(--text-2); font-size: 13px; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

/* graf */
.chart { position: relative; }
.chart h3 { margin: 0 0 4px; font-size: 14px; }
.chart svg { display: block; width: 100%; height: 180px; overflow: visible; }
.chart .axis text { fill: var(--muted); font-size: 11px; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .grid line.vgrid { stroke-dasharray: 2 3; }
.chart .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .cross { stroke: var(--muted); stroke-width: 1; }
.chart .hover-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.tip {
  position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; font-size: 12px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.15); white-space: nowrap;
}
.tip b { color: var(--text); }
details.data { margin-top: 6px; font-size: 13px; }
details.data table { margin-top: 6px; }

.empty { padding: 24px 16px; color: var(--muted); }
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2000;
  background: var(--text); color: var(--bg); border-radius: 6px; padding: 8px 14px; max-width: calc(100% - 32px);
}
.toast.err { background: var(--critical); color: #fff; }

@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: 6px 12px; }
  .crumbs { order: 3; flex-basis: 100%; }
  .map-wrap { flex-direction: column; }
  .side { width: auto; border-left: 0; border-top: 1px solid var(--border); max-height: 40vh; }
  #map { min-height: 55vh; }
  .user .name { display: none; }
}

/* značky svítidel v mapě (Leaflet circleMarker) – barva stavu, obrys v barvě povrchu */
path.lum { stroke: #ffffff; stroke-width: 2; fill: var(--unknown); fill-opacity: 1; }
path.lum.good { fill: var(--good); }
path.lum.warning { fill: var(--warning); }
path.lum.serious { fill: var(--serious); }
path.lum.critical { fill: var(--critical); }

/* správa uživatelů */
.main.scroll { overflow: auto; }
.page-title { margin: 0; font-size: 18px; }
.user-form { display: grid; gap: 10px; }
.user-form h3 { margin: 8px 0 0; font-size: 15px; }
.user-form p { margin: 0; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 16px; }
.form-grid label { display: grid; gap: 4px; color: var(--text-2); font-size: 14px; }
.form-grid input, .form-grid select { color: var(--text); }
.inline { display: flex; gap: 6px; }
.inline input { flex: 1; min-width: 0; }
.checks { display: grid; gap: 6px; align-content: end; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.scope-rows { display: grid; gap: 6px; }
.scope-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scope-row select { max-width: 100%; }
.login small { font-size: 12px; }
.user a { color: var(--text-2); }

/* zakázka v záhlaví přihlášení */
.site-pin { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.pin { width: 16px; height: 16px; fill: var(--accent); flex: none; }

/* body a nody */
.section-title { margin: 8px 16px 8px; font-size: 15px; }
.btns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* obsah stránky se posouvá celý, tabulky se nesmí smrsknout do vlastního posuvníku */
.main.scroll > * { flex: none; }
#points-panel .detail { margin-top: 0; }
/* responzivní tabulka: na mobilu řádky jako karty s popisky */
@media (max-width: 720px) {
  table.resp thead { display: none; }
  table.resp, table.resp tbody, table.resp tr, table.resp td { display: block; width: 100%; }
  table.resp tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
  table.resp td { border: 0; display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; text-align: right; }
  table.resp td::before { content: attr(data-label); color: var(--text-2); text-align: left; }
  table.resp td.actions { display: block; }
  table.resp td.actions .btns { justify-content: flex-start; }
  table.resp td.actions::before { content: none; }
}

/* zařízení a skupiny */
.inline-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.checks .check { font-size: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid > label { align-content: start; }
.warn-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--warning); border-radius: 6px; background: var(--surface-2); }

/* brány */
.gw-marker { display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; border-radius: 4px;
  background: var(--unknown); color: #ffffff; font: 600 11px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.gw-marker.good { background: var(--good); }
.gw-marker.critical { background: var(--critical); }
.gw-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 8px; }
.gw-item { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.gw-item-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gw-item dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.gw-item dt { color: var(--muted); }
.gw-item dd { margin: 0; }

/* svítidla a nody: řazené tabulky, pohledy */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sorted-asc::after { content: ' ▲'; font-size: 10px; }
th.sorted-desc::after { content: ' ▼'; font-size: 10px; }
.data-table td { white-space: nowrap; }
.data-table td.num, .data-table th.num { text-align: right; }
label.inline { display: inline-flex; gap: 6px; align-items: center; }
.btn.tiny { padding: 0 6px; font-size: 12px; line-height: 18px; }
.view-editor { margin: 0 16px 12px; }
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.editor-grid h3 { margin: 8px 0 4px; }
.editor-grid .checks { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-content: start; margin: 4px 0 10px; }
.scroll-list { max-height: 180px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.col-order { margin: 0 0 10px; padding-left: 22px; }
.col-order li { display: flex; gap: 6px; align-items: center; padding: 1px 0; }
.col-order li span { flex: 1; }
.col-avail > div { margin-bottom: 6px; }
@media (max-width: 720px) {
  .data-table td { white-space: normal; }
}

.has-tip { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.legend.pad-x { padding: 0 16px 8px; flex-wrap: wrap; }
.main.scroll > p.muted { padding: 0 16px; }

/* elektroměry */
.table-wrap.flush { padding: 0 0 8px; }
.meter-admin { margin: 6px 0 10px; }
.meter-admin summary { cursor: pointer; color: var(--text-2); }
.meter-admin form { margin: 6px 0; }

/* skupiny: stav a ruční ovládání */
.grp-state { margin: 2px 0 6px; }
.manual { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; }
.manual input[type=number] { width: 64px; }

/* vstupy a výstupy */
.io-edit summary { cursor: pointer; color: var(--text-2); display: inline-block; }
.io-edit[open] { display: block; width: 100%; padding: 6px 0; }

/* ikony svítidel v mapě */
.lum-icon { background: none; border: none; display: inline-flex; }
.lum-icon svg { display: block; overflow: visible; }
.lum-icon .lf-ring { fill: #4b5563; stroke: #ffffff; stroke-width: 2; }
.lum-icon .lf-on { fill: #ffd21f; }
.lum-icon.lk-on .lf-ring { fill: #3a3f47; stroke: #ffd21f; }
.lum-icon.lk-on svg { filter: drop-shadow(0 0 3px rgba(255, 210, 31, .85)); }
.lum-icon.lk-off .lf-ring { fill: #4b5563; stroke: #ffffff; }
.lum-icon.lk-fault .lf-ring { fill: var(--critical); stroke: #ffffff; }
.lum-icon .lf-mark { fill: #ffffff; font: 700 12px/1 system-ui, sans-serif; }
.lum-icon.lk-offline .lf-ring { fill: #c9c8c3; stroke: var(--critical); stroke-width: 2.5; }
.lum-icon .lf-x { stroke: var(--critical); stroke-width: 2.5; stroke-linecap: round; }
.lum-icon.lk-disabled .lf-ring { fill: transparent; stroke: #8f8e88; stroke-dasharray: 3 2; }
.lum-icon.lk-nodata .lf-ring { fill: #c9c8c3; stroke: #ffffff; }
.lum-legend > span { gap: 8px; }

/* detail svítidla v panelu mapy */
.map-detail { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
.map-detail .detail-head { display: flex; justify-content: space-between; align-items: center; }
.map-detail .detail-head h3 { margin: 0; }
.map-detail dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 12px; font-size: 13px; }
.map-detail dl.kv dt { color: var(--text-2); }
.map-detail dl.kv dd { margin: 0; }
.map-detail .charts { display: grid; gap: 8px; }
.popup-menu .btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lum-icon.lk-sel svg { filter: drop-shadow(0 0 0 #2f6fed) drop-shadow(0 0 4px #2f6fed); }

/* provisioning: dialog registrů */
.reg-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; }
.reg-dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.reg-dialog .reg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.reg-dialog .reg-head h2 { margin: 0; font-size: 17px; }
.reg-dialog #reg-ee, .reg-dialog .reg-status { padding: 0 16px; }
.reg-dialog .reg-status { margin: 8px 0; }
.reg-dialog .reg-body { padding: 0 16px 8px; }
.reg-dialog details { margin: 8px 0; }
.reg-dialog summary { font-weight: 600; cursor: pointer; padding: 4px 0; }
.reg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reg-table td, .reg-table th { padding: 3px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.reg-table td:first-child { width: 36%; }
.reg-table td:last-child { font-size: 12px; }
.reg-table input[type=number], .reg-table input[type=text], .reg-table select { max-width: 240px; }
.reg-table .changed { outline: 2px solid var(--warning); }
.tag-ee, .tag-cloud { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10px; line-height: 16px; border: 1px solid var(--border); color: var(--muted); }
.tag-ee { border-color: var(--warning); }
.reg-dialog .reg-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); }
.ee-warn { border-width: 2px; }
.ee-pulse { animation: ee-pulse 1.4s ease-in-out infinite; }
@keyframes ee-pulse { 50% { box-shadow: 0 0 0 4px rgb(230 160 0 / 0.45); } }
@media (prefers-reduced-motion: reduce) { .ee-pulse { animation: none; } }
@media (max-width: 640px) { .reg-table td:last-child { display: none; } .reg-table td:first-child { width: 50%; } }

/* tabulka nodů: pohledy, výběr sloupců, zalamované záhlaví, akce vždy vidět */
.col-picker { position: relative; }
.col-picker > summary { list-style: none; }
.col-picker > summary::-webkit-details-marker { display: none; }
.col-picker-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: grid; gap: 4px; min-width: 260px; max-height: 60vh; overflow: auto;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); }
.col-picker-list label { white-space: nowrap; }
.nodes-help { padding: 0 16px 8px; }
.nodes-help summary { cursor: pointer; }
.nodes-table th { white-space: normal; max-width: 120px; vertical-align: bottom; }
.nodes-table td.actions { position: sticky; right: 0; background: var(--surface); box-shadow: -6px 0 6px -6px rgb(0 0 0 / 0.2); }
.nodes-table td.actions .btn { margin-left: 4px; }
@media (max-width: 720px) { .nodes-table td.actions { position: static; box-shadow: none; } .nodes-table th { max-width: none; } }

/* tabulky svítidel a nodů jen tak široké, jak potřebují; přetahování záhlaví */
.data-table { width: auto; }
th.sortable[draggable=true] { cursor: grab; }
th.drop-target { box-shadow: inset 3px 0 0 var(--series-1, #2f6fed); }

/* Svítidla: seznam a detail na jedné obrazovce – široká obrazovka vedle sebe, jinak detail dole (asi 40 % výšky) */
.main.scroll > .lights-split { flex: 1 0 360px; min-height: 360px; display: flex; flex-direction: column; gap: 0; }
.lights-split > .table-wrap { flex: 1 1 0; min-height: 120px; overflow: auto; }
.lights-split > #lum-detail { flex: 0 0 42%; min-height: 0; overflow: auto; border-top: 2px solid var(--border); padding-top: 12px; }
.lights-split > #lum-detail:empty { display: none; }
.lights-split > #lum-detail .detail { margin-top: 0; }
@media (min-width: 1500px) {
  .lights-split { flex-direction: row !important; }
  .lights-split > .table-wrap { flex: 0 1 auto; max-width: 58%; }
  .lights-split > #lum-detail { flex: 1 1 42%; border-top: none; border-left: 2px solid var(--border); padding-top: 0; padding-left: 0; }
  .lights-split:has(> #lum-detail:empty) > .table-wrap { max-width: none; }
}
@media (max-width: 720px) {
  .lights-split > #lum-detail { flex-basis: 55%; }
}
.lum-state { gap: 6px; } .lum-state .lum-icon { flex: none; }
.log-summary { display: flex; flex-wrap: wrap; gap: 6px; } .toolbar:has(> .log-summary:empty) { display: none; }

/* pásy v grafech: PLC offline, svítidlo nekomunikovalo, porucha */
:root { --band-offline: rgb(120 120 130 / 0.22); --band-nocomm: rgb(214 140 0 / 0.20); --band-fault: rgb(210 40 40 / 0.16); }
.chart .band-offline, .band-sw.band-offline { fill: var(--band-offline); background: var(--band-offline); }
.chart .band-nocomm, .band-sw.band-nocomm { fill: var(--band-nocomm); background: var(--band-nocomm); }
.chart .band-fault, .band-sw.band-fault { fill: var(--band-fault); background: var(--band-fault); }
.band-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin: 2px 0 4px; }
.band-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.band-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--border); }

/* dialog registrů: překryv „pracuji“ s průběhem */
.reg-dialog { position: relative; }
.reg-busy { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 0.45); }
.reg-busy[hidden] { display: none; }
.reg-busy-card { width: min(440px, calc(100vw - 48px)); padding: 20px 22px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.3); display: grid; gap: 8px; justify-items: center; text-align: center; }
.reg-busy-title { font-weight: 600; font-size: 15px; }
.reg-busy-detail { color: var(--muted); font-size: 13px; min-height: 1.3em; }
.reg-busy-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.reg-busy-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; position: relative; }
.reg-busy-fill { height: 100%; width: 0; background: var(--series-1, #2f6fed); transition: width .3s ease; }
.reg-busy-bar.indeterminate .reg-busy-fill { width: 35% !important; position: absolute; animation: reg-ind 1.2s ease-in-out infinite; }
@keyframes reg-ind { from { left: -35%; } to { left: 100%; } }
.reg-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--series-1, #2f6fed); animation: reg-spin .8s linear infinite; }
@keyframes reg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reg-spinner, .reg-busy-bar.indeterminate .reg-busy-fill { animation: none; } }
.reg-status.error { color: var(--critical); }

/* provoz PLC <-> cloud */
.traffic-box > summary { cursor: pointer; margin-top: 12px; }
.traffic-box h3.inline-h { display: inline; }
.traffic h4 { margin: 12px 0 4px; }

/* topologie sítě nad mapou */
.topo-toggle { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font-weight: 600; }
.topo-line { stroke-linecap: round; stroke-opacity: .9; fill: none; }
.topo-good { stroke: #2e9d4a; }
.topo-warn { stroke: #e08a00; }
.topo-bad { stroke: #d33030; }
.topo-unknown { stroke: #6b7aa1; }
.topo-routed { stroke-dasharray: 8 6; }
.topo-stale { stroke: #8f8e88; stroke-dasharray: 2 6; stroke-opacity: .7; }
.topo-legend { margin-bottom: 10px; }
.topo-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.topo-sw { display: inline-block; width: 24px; height: 0; border-top: 3px solid; }
.topo-sw-good { border-color: #2e9d4a; }
.topo-sw-warn { border-color: #e08a00; }
.topo-sw-bad { border-color: #d33030; }
.topo-sw-routed { border-top-style: dashed; border-color: #6b7aa1; }
.topo-sw-stale { border-top-style: dotted; border-color: #8f8e88; }

/* shluky v mapě a mapa zakázek */
.cluster-pin { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #3a3f47; color: #fff;
  font: 600 13px/1 system-ui, sans-serif; border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .4); cursor: pointer; }
.cluster-pin.lk-on { border-color: #ffd21f; }
.cluster-pin.lk-off { border-color: #ffffff; }
.cluster-pin.lk-fault, .cluster-pin.lk-offline, .cluster-pin.sev-critical { border-color: var(--critical); }
.cluster-pin.lk-nodata, .cluster-pin.sev-unknown { border-color: #c9c8c3; }
.cluster-pin.sev-good { border-color: #2e9d4a; }
.cluster-pin.sev-warning { border-color: #e08a00; }
.sites-page { flex: 1; min-height: 0; display: flex; }
.sites-page > .sites-list { flex: 0 0 360px; overflow: auto; grid-template-columns: 1fr; align-content: start; border-right: 1px solid var(--border); }
.sites-page > #sites-map { flex: 1; min-width: 0; min-height: 360px; }
.sites-page:not(:has(#sites-map)) > .sites-list { flex: 1; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-right: none; }
@media (max-width: 720px) {
  .sites-page { flex-direction: column; overflow: auto; }
  .sites-page > #sites-map { order: -1; flex: 0 0 45vh; }
  .sites-page > .sites-list { flex: none; overflow: visible; border-right: none; }
}
.site-pin { width: auto !important; height: auto !important; }
.site-pin > div { display: inline-flex; flex-direction: column; gap: 1px; padding: 4px 8px 4px 22px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 1px 4px rgb(0 0 0 / .3); white-space: nowrap; font-size: 12px; position: relative; cursor: pointer; }
.site-pin > div::before { content: ''; position: absolute; left: 7px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #c9c8c3; }
.site-pin.sev-good > div::before { background: #2e9d4a; }
.site-pin.sev-warning > div::before { background: #e08a00; }
.site-pin.sev-critical > div::before { background: var(--critical); }
.site-pin span { color: var(--muted); }

.chip-warn { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.small { font-size: 12px; font-weight: normal; }

/* záložka Zařízení: karty, ikony vstupů a výstupů, nabídky a dialogy */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; padding: 0 16px 16px; align-items: start; }
.dev-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.dev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dev-title h2 { margin: 0; font-size: 17px; }
.dev-head-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dev-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; font-size: 14px; }
.dev-label { color: var(--muted); font-size: 13px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.gw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.gw-chip:hover { background: var(--surface-2); }
.gw-chip.critical { border-color: var(--critical); }
.badge-warn { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: var(--warning); color: #000; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; }
.io-row { display: flex; flex-wrap: wrap; gap: 5px; }
.io-ico { width: 32px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }
.io-ico.on { background: color-mix(in srgb, #2e9d4a 22%, var(--surface)); border-color: #2e9d4a; color: var(--text); }
.io-ico.ovr { outline: 2px dashed var(--warning); outline-offset: 1px; }
.io-ico.missing { opacity: .45; border-style: dashed; }
.popover { position: fixed; z-index: 1000; min-width: 220px; max-width: min(380px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .25); padding: 10px 12px; }
.popover.sheet { left: 0; right: 0; bottom: 0; top: auto; max-width: none; border-radius: 14px 14px 0 0; padding-bottom: 18px; }
.pop-title { margin: 0 0 6px; font-size: 15px; }
.pop-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 8px; font-size: 13px; }
.pop-facts dt { color: var(--muted); }
.pop-facts dd { margin: 0; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-list hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
.menu-item { text-align: left; padding: 8px 10px; border: none; border-radius: 6px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.menu-item:hover:not(:disabled) { background: var(--surface-2); }
.menu-item:disabled { color: var(--muted); cursor: default; }
.menu-item.danger { color: var(--critical); }
.modal { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; }
.modal.wide { width: min(1100px, calc(100vw - 24px)); }
.modal::backdrop { background: rgb(0 0 0 / .45); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 12px 16px 16px; }
.modal-body .detail { margin: 0; border: none; padding: 0; }
.mini-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.mini-tab { padding: 6px 12px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.mini-tab.active { color: var(--text); border-bottom-color: var(--accent); }
@media (max-width: 720px) {
  .dev-grid { grid-template-columns: 1fr; padding: 0 8px 12px; }
  .modal, .modal.wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .mini-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .mini-tab { white-space: nowrap; }
}

/* Zařízení v2: souhrn zakázky, karty přes celou šířku s dlaždicemi */
.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 16px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.site-bar-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.dev-grid { grid-template-columns: 1fr; }
.dev-head { flex-wrap: nowrap; }
.dev-title { min-width: 0; }
.dev-title h2 { display: flex; align-items: center; gap: 8px; }
.dev-head-btns { flex-wrap: nowrap; flex: none; }
.dev-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.dev-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); min-width: 0; }
.dev-tile .dev-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.io-row { gap: 4px; }
.io-ico { width: auto; min-width: 30px; height: 30px; padding: 0 6px; display: inline-flex; align-items: center; gap: 5px; background: var(--surface); }
.io-ico.used { border-color: var(--text-2); color: var(--text); }
.io-ico.on { background: color-mix(in srgb, #2e9d4a 22%, var(--surface)); border-color: #2e9d4a; color: var(--text); }
.io-no { font-weight: 700; }
.io-name { font-weight: 400; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .site-bar { margin: 8px; }
  .dev-tiles { grid-template-columns: 1fr; }
  .io-name { max-width: 80px; }
}