/* IMERON AFDD – vizuální styl podle imeron.cz (Building Automation).
   Tokeny převzaty z webu: inkoust #16202A, ocel #4C6275 / #9FB2C2, akcent #E8582A, papír #F4F3EF, tma #0B1117.
   Písma: IBM Plex Sans (text), Raleway (nadpisy), IBM Plex Mono (štítky). Ostré rohy (2 px), tenké linky. */
:root {
  --ink: #16202A; --ro: #4C6275; --ro-l: #9FB2C2; --acc: #E8582A;
  --dark: #0B1117; --dark-2: #121B24; --dark-3: #1A2632;
  --paper: #F4F3EF; --card: #FFFFFF; --muted: #59636C;
  --line: rgba(22, 32, 42, .14); --line-strong: rgba(22, 32, 42, .5);
  --on-dark: #E9EDF0; --on-dark-muted: #8E9AA5; --line-d: rgba(255, 255, 255, .12);
  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --disp: 'Raleway', 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.25, .6, .15, 1);
  /* aplikační tokeny */
  --bg: var(--paper); --panel: var(--card); --text: var(--ink);
  --accent: var(--acc);                        /* měřená hodnota v grafu, fokus */
  --ok: #3CB37A; --suspect: #D99A1E; --active: #D23A3A; --ne: var(--ro);
  --syn: #7A5AF0; --shade: rgba(232, 88, 42, .10); --sp: var(--ro);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dark); --panel: var(--dark-2); --text: var(--on-dark); --muted: var(--on-dark-muted);
    --line: var(--line-d); --line-strong: rgba(255, 255, 255, .45); --ink: #E9EDF0; --sp: var(--ro-l);
    --ok: #4CC38A; --suspect: #E8B23A; --active: #F06A6A; --ne: var(--ro-l); --syn: #A48BFA;
    --shade: rgba(232, 88, 42, .16); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--acc); }
::selection { background: var(--acc); color: #fff; }

/* ---------- hlavička (tmavá jako na webu) ---------- */
header { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px;
  padding: 0 24px; min-height: 64px; background: var(--dark); color: var(--on-dark); border-bottom: 1px solid var(--line-d); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--on-dark); }
.brand .lockup { width: 118px; height: auto; display: block; --logo-ink: #fff; --logo-ro: var(--ro-l); }
.brand .app { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted);
  padding-left: 14px; border-left: 1px solid var(--line-d); }
.lm-ink { fill: var(--logo-ink, var(--ink)); } .lm-ro { fill: var(--logo-ro, var(--ro)); } .lm-acc { fill: var(--acc); }
.lockup text { font-family: 'Raleway', sans-serif; font-weight: 500; fill: var(--logo-ink, var(--ink)); }
nav { display: flex; flex-wrap: wrap; gap: 4px 26px; font-size: 14px; }
nav a { color: var(--on-dark); text-decoration: none; opacity: .72; transition: opacity .2s; padding: 4px 0; border-bottom: 2px solid transparent; }
nav a:hover { opacity: 1; color: var(--on-dark); }
nav a.on { opacity: 1; border-bottom-color: var(--acc); }
.user { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 13.5px; }
.user a { color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.user a::before { content: ""; width: 8px; height: 8px; background: var(--acc); }
.user .muted { color: var(--on-dark-muted); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.user button { background: transparent; color: var(--on-dark); border-color: var(--line-d); }
.user button:hover { background: var(--acc); border-color: var(--acc); color: #fff; }

#synthetic-banner { background: var(--syn); color: #fff; padding: 7px 24px; text-align: center;
  font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- obsah ---------- */
main { max-width: 1320px; margin: 0 auto; padding: 32px 24px 64px; }
h1, h2, h3 { font-family: var(--disp); font-weight: 600; color: var(--text); text-wrap: balance; }
h1 { font-size: 30px; line-height: 1.1; letter-spacing: -.025em; margin: 4px 0 18px; }
h2 { font-size: 19px; letter-spacing: -.01em; margin: 22px 0 10px; }
h3 { font-size: 15.5px; margin: 14px 0 6px; }
.panel h2:first-child, .panel h3:first-child { margin-top: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 18px 20px; margin-bottom: 16px; }
.panel .panel { background: transparent; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.muted { color: var(--muted); } .small { font-size: 13px; }
.cols { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
ul, ol { margin: 4px 0; padding-left: 20px; } li { margin: 2px 0; }
pre { font: 12px/1.5 var(--mono); white-space: pre-wrap; }

/* štítek ve stylu webu: mono, velká písmena, oranžový proužek */
.kicker { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.kicker::before { content: ""; width: 22px; height: 3px; background: var(--acc); }

/* tabulky */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom-color: var(--line-strong); }
tr.click { cursor: pointer; } tr.click:hover td { background: rgba(232, 88, 42, .05); }
.tbl { overflow-x: auto; }

/* odznaky stavů: čtvereček + mono text (jako „■ Kontakt“ / „● PROVOZ“ na webu) */
.b { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1.6 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.b::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.s-ok { color: var(--ok); } .s-suspect { color: var(--suspect); } .s-active { color: var(--active); }
.s-not_evaluable { color: var(--ne); } .s-syn { color: var(--syn); } .s-late { color: var(--muted); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 5px 18px; }
.kv > div:nth-child(odd) { font: 500 10.5px/2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* grafy */
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font: 10px var(--mono); }
.chart .axis { stroke: var(--line-strong); } .chart .shade { fill: var(--shade); }
.legend { font-size: 13px; margin: 14px 0 2px; } .legend b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; }

/* formuláře a tlačítka (ostré rohy, inkoust → oranžová) */
button, select, input, textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 2px; padding: 7px 11px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(232, 88, 42, .18); }
button { cursor: pointer; background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 500;
  transition: background .2s, border-color .2s; }
button:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: 2px; font-weight: 500; font-size: 14px; text-decoration: none; transition: background .2s, border-color .2s; }
.btn:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn::after { content: "→"; }
code { font: 12px var(--mono); word-break: break-all; }
td.actions { display: table-cell; white-space: nowrap; }
td.actions button { padding: 5px 9px; font-size: 13px; }
td.actions button + button { margin-left: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
textarea { width: 100%; min-height: 60px; margin-top: 10px; }
.err { color: var(--active); font-weight: 500; }
form.panel label { display: block; margin: 10px 0 5px; font-size: 13px; font-weight: 600; }
form.panel input, form.panel select { width: 100%; }
form.panel input[type=checkbox], form.panel input[type=radio] { width: auto; margin-right: 6px; }

/* ---------- dashboard a zakázky ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 14px; }
.tile { background: var(--panel); padding: 14px 18px; }
.tile .mono { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tile .tv { font: 500 30px/1.2 var(--font); margin: 4px 0 2px; color: var(--text); }
.tile.warn { box-shadow: inset 3px 0 0 var(--acc); }
.site-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.site-h a { text-decoration: none; font-size: 16px; }
.site-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 10px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-k span { display: block; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.site-k b { font: 500 20px var(--font); }
details.panel summary { cursor: pointer; }
table.perm td, table.perm th { text-align: center; } table.perm td:first-child, table.perm th:first-child { text-align: left; }

/* ---------- živá karta (jako panel „ZÓNA · PROVOZ“ na imeron.cz – vždy tmavá) ---------- */
.live { background: var(--dark-2); color: var(--on-dark); border: 1px solid #22303d; border-radius: 2px; margin-bottom: 16px; }
.live .mono { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.lv-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line-d); }
.lv-mode { font-size: 11.5px; }
.live .s-not_evaluable { color: var(--ro-l); }
.lv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-bottom: 1px solid var(--line-d); }
.lv-kpi { padding: 16px 20px 14px; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); margin-bottom: -1px; }
.lv-val { font: 500 32px/1.15 var(--font); color: #fff; margin: 6px 0 2px; letter-spacing: -.01em; }
.lv-val small { font-size: 13px; color: var(--on-dark-muted); margin-left: 5px; font-weight: 400; }
.lv-kpi .sub { font-size: 10.5px; min-height: 1.4em; text-transform: none; letter-spacing: .03em; }
.lv-kpi.dim .lv-val, .lv-state.dim b { color: var(--on-dark-muted); }
.lv-flag { display: inline-block; margin-left: 6px; color: var(--suspect); font: 500 9.5px var(--mono); letter-spacing: .08em; }
.lv-states { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-d); }
.lv-state { padding: 12px 20px; border-right: 1px solid var(--line-d); display: flex; flex-direction: column; gap: 3px; }
.lv-state b { font: 600 14px var(--mono); letter-spacing: .06em; color: var(--on-dark); }
.lv-state b.on { color: #4CC38A; } .lv-state b.alarm { color: #F06A6A; }
.lv-trends { padding: 14px 20px 6px; position: relative; }
.lv-range { position: absolute; right: 20px; top: 10px; display: flex; gap: 4px; }
.lv-range button { background: transparent; border: 1px solid var(--line-d); color: var(--on-dark-muted); padding: 3px 9px; font: 500 10.5px var(--mono); }
.lv-range button.on, .lv-range button:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.lv-tr { margin: 6px 0 14px; } .lv-tr:first-child { margin-top: 30px; }
.lv-tr-h { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; margin-bottom: 4px; }
.lv-tr-h i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--c); vertical-align: middle; margin: 0 6px 0 12px; }
.lv-tr-h i.dash { border-top-style: dashed; }
.lv-chart text { fill: var(--on-dark-muted); font: 10px var(--mono); }
.lv-chart .gl { stroke: rgba(255, 255, 255, .07); }
.lv-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 20px; border-top: 1px solid var(--line-d); font-size: 10px !important; }
.live a { color: var(--on-dark); }

/* ---------- přihlášení (tmavá obrazovka jako na webu) ---------- */
body.auth { background: var(--dark); color: var(--on-dark); min-height: 100vh; }
body.auth header, body.auth #synthetic-banner { display: none; }
body.auth::before { content: ""; position: fixed; inset: -20%; z-index: -2;
  background: radial-gradient(40% 40% at 70% 30%, rgba(232, 88, 42, .22), transparent 70%),
              radial-gradient(45% 45% at 25% 75%, rgba(76, 98, 117, .45), transparent 70%); }
body.auth::after { content: ""; position: fixed; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 80%); }
.login { max-width: 400px; margin: 9vh auto 0; padding: 36px 32px 30px; background: rgba(18, 27, 36, .82);
  border: 1px solid var(--line-d); border-radius: 2px; color: var(--on-dark); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.login .lockup { width: 170px; --logo-ink: #fff; --logo-ro: var(--ro-l); margin-bottom: 26px; }
.login .kicker { color: var(--on-dark-muted); }
.login h1 { color: #fff; font-size: 28px; margin: 0 0 6px; }
.login p.lead { color: var(--on-dark-muted); margin: 0 0 18px; font-size: 14.5px; }
.login label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--on-dark); }
.login input { width: 100%; background: rgba(0, 0, 0, .3); color: #fff; border-color: var(--line-d); padding: 11px 13px; font-size: 15px; }
.login button { margin-top: 20px; width: 100%; height: 46px; background: var(--acc); border-color: var(--acc); color: #fff; font-size: 15px; }
.login button:hover { background: #fff; border-color: #fff; color: var(--ink); }
.login .err { color: #FFC2A0; margin: 12px 0 0; min-height: 1em; }
.login .foot { margin-top: 22px; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); text-align: center; }

@media (max-width: 720px) {
  header { padding: 10px 16px; } main { padding: 20px 16px 48px; }
  .user { margin-left: 0; width: 100%; justify-content: space-between; }
  h1 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* alarmy */
.nbadge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; font: 600 11px/18px var(--mono, monospace); text-align: center; background: var(--acc); color: #fff; }
.nbadge[hidden] { display: none; }
.nbadge.hi { background: var(--active, #C8372D); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .nbadge.hi { animation: none; } }
tr.al-active td:first-child { box-shadow: inset 3px 0 0 var(--active, #C8372D); }
tr.al-cleared { opacity: .75; }
.sev-high { color: var(--active, #C8372D); font-weight: 600; }
.sev-medium { color: var(--suspect, #D99A1E); font-weight: 600; }
.sev-low { color: var(--muted, #6b7a86); }

/* schéma VZT na živé kartě */
.lv-schema { padding: 8px 18px 4px; border-bottom: 1px solid var(--lv-line, rgba(159,178,194,.18)); }
.ahu-schema { width: 100%; height: auto; display: block; font-family: var(--mono); }
.ahu-schema .sc-duct { fill: rgba(159,178,194,.07); stroke: #4C6275; stroke-width: 1.5; }
.ahu-schema .sc-el rect, .ahu-schema .sc-el circle { fill: #0B1117; stroke: #9FB2C2; stroke-width: 1.5; }
.ahu-schema .sc-el path { fill: none; stroke: #9FB2C2; stroke-width: 1.3; }
.ahu-schema .sc-fan.on circle { stroke: var(--ok); } .ahu-schema .sc-fan.on path { stroke: var(--ok); }
.ahu-schema .sc-heat rect { stroke: #E8582A; } .ahu-schema .sc-heat path { stroke: #E8582A; }
.ahu-schema .sc-cool rect { stroke: #5AA9E6; } .ahu-schema .sc-cool path { stroke: #5AA9E6; }
.ahu-schema .sc-heat.alarm rect { stroke: var(--active); stroke-width: 3; fill: rgba(210,58,58,.15); }
.ahu-schema .sc-hru.warn rect { stroke: var(--suspect); }
.ahu-schema .sc-flow { fill: none; stroke: #4C6275; stroke-width: 2; } .ahu-schema .sc-flow.run { stroke: #9FB2C2; }
.ahu-schema .sc-lbl { fill: #9FB2C2; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ahu-schema .sc-tag rect { fill: #16202A; stroke: #4C6275; }
.ahu-schema .sc-tag .sc-val { fill: #F4F3EF; font-size: 13px; font-weight: 600; }
.ahu-schema .sc-tag.unc rect { stroke: var(--suspect); stroke-dasharray: 4 3; }
.ahu-schema .sc-tag.dim { opacity: .45; }
.ahu-schema .sc-alarm { fill: var(--active); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; color: #9FB2C2; padding: 2px 0 8px; }
.sc-legend i { display: inline-block; width: 14px; height: 9px; margin-right: 6px; border: 1px solid #4C6275; vertical-align: middle; }
.sc-legend i.unc { border: 1px dashed var(--suspect); } .sc-legend i.dim { opacity: .45; background: #9FB2C2; }
.lv-alarms { padding: 10px 18px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lv-alarms a { text-decoration: none; }
.ahu-schema .sc-io { fill: #6f8597; font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.al-filter button { background: transparent; color: var(--ink, #16202A); border: 1px solid var(--line, #c9d1d8); }
.al-filter button.on { background: var(--ink, #16202A); color: #fff; }

/* vyznačení období v grafech + kurzor */
.lv-chart .bd rect { stroke: none; }
.lv-chart .bd-off rect { fill: rgba(159,178,194,.07); }
.lv-chart .bd-gap rect { fill: rgba(217,154,30,.06); stroke: rgba(217,154,30,.35); stroke-dasharray: 3 3; }
.lv-chart .bd-sus rect { fill: rgba(217,154,30,.13); } .lv-chart .bd-sus .bd-top { fill: var(--suspect); }
.lv-chart .bd-act rect { fill: rgba(210,58,58,.15); } .lv-chart .bd-act .bd-top { fill: var(--active); }
.lv-chart .bd-alm rect { fill: rgba(210,58,58,.08); } .lv-chart .bd-alm .bd-top { fill: #ff4d4d; }
.lv-chart text.bd-lbl { fill: #F4F3EF; font: 600 10px var(--mono); letter-spacing: .04em; }
.lv-chart .xh { stroke: rgba(244,243,239,.55); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.lv-trends .xh-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 210px; background: #0B1117; border: 1px solid #4C6275;
  padding: 8px 10px; font: 500 11.5px var(--mono); color: #F4F3EF; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.xh-tip .xh-t { color: #9FB2C2; margin-bottom: 4px; letter-spacing: .06em; }
.xh-tip div { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .xh-tip b { margin-left: auto; padding-left: 14px; }
.xh-tip i { display: inline-block; width: 14px; border-top: 2px solid var(--c); } .xh-tip i.dash { border-top-style: dashed; }
.bd-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 0 10px; color: var(--on-dark-muted); font-size: 10.5px !important; }
.bd-legend i { display: inline-block; width: 16px; height: 10px; margin-right: 6px; vertical-align: middle; }
.bd-legend i.bd-off { background: rgba(159,178,194,.25); } .bd-legend i.bd-gap { border: 1px dashed rgba(217,154,30,.7); }
.bd-legend i.bd-sus { background: rgba(217,154,30,.45); border-top: 3px solid var(--suspect); }
.bd-legend i.bd-act { background: rgba(210,58,58,.45); border-top: 3px solid var(--active); }
.bd-legend i.bd-alm { background: rgba(210,58,58,.25); border-top: 3px solid #ff4d4d; }
.lv-chart a .bd { cursor: pointer; } .lv-chart a:hover .bd rect { filter: brightness(1.6); }

/* ukazatel průběhu */
.pbar { margin: 10px 0 4px; font: 500 12px var(--mono); }
.pbar-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.pbar-t { height: 8px; background: rgba(76,98,117,.18); overflow: hidden; position: relative; }
.pbar-t i { display: block; height: 100%; background: var(--acc); transition: width .3s; }
.pbar.ind .pbar-t i { position: absolute; animation: pbar-ind 1.4s ease-in-out infinite; }
@keyframes pbar-ind { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .pbar.ind .pbar-t i { animation: none; width: 100% !important; opacity: .4; } }
.pbar-i { margin-top: 4px; color: var(--muted, #6b7a86); }
.tpl-bar { display: inline-block; width: 80px; height: 7px; background: rgba(76,98,117,.2); vertical-align: middle; }
.tpl-bar i { display: block; height: 100%; background: var(--ok); }
/* jistota návrhu role */
.sg { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sg-sc { font: 600 11px var(--mono); padding: 1px 6px; border: 1px solid currentColor; }
.sg-sc.hi { color: var(--ok); } .sg-sc.mid { color: var(--suspect); } .sg-sc.lo { color: var(--active); }
button.sg-alt { font: 500 11px var(--mono); padding: 1px 6px; background: transparent; color: inherit; border: 1px dashed var(--line, #c9d1d8); }
button.sg-alt:hover { border-style: solid; }

/* ---------------------------------------------------------------- dashboard nálezů */
:root { --sev-high: #D23A3A; --sev-medium: #D99A1E; --sev-low: #2F7FC1; --heat: 47, 127, 193; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sev-high: #D23A3A; --sev-medium: #B88E1A; --sev-low: #3F8DD8; --heat: 63, 141, 216; } }
:root[data-theme="dark"] { --sev-high: #D23A3A; --sev-medium: #B88E1A; --sev-low: #3F8DD8; --heat: 63, 141, 216; }
.sev-high { fill: var(--sev-high); stroke: var(--sev-high); background: var(--sev-high); }
.sev-medium { fill: var(--sev-medium); stroke: var(--sev-medium); background: var(--sev-medium); }
.sev-low { fill: var(--sev-low); stroke: var(--sev-low); background: var(--sev-low); }
.fdd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.fdd-head h1 { margin-right: auto; }
.fdd-tabs { display: flex; border: 1px solid var(--line-strong); }
.fdd-tabs a { padding: 6px 14px; text-decoration: none; color: var(--text); font: 500 13px var(--font); }
.fdd-tabs a.on { background: var(--ink); color: var(--panel); }
.fdd-sec { position: relative; font-size: 13px; } .fdd-sec summary { cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); }
.fdd-sec[open] > label { display: block; }
.fdd-sec label { padding: 2px 10px; background: var(--panel); }
.fdd-sec[open] { background: var(--panel); border: 1px solid var(--line); padding-bottom: 6px; position: absolute; right: 24px; z-index: 6; }
.fdd-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.fdd-filters select { width: auto; max-width: 200px; font-size: 13px; padding: 5px 8px; }
.fdd-filters select.set { border-color: var(--acc); box-shadow: inset 0 -2px 0 var(--acc); }
.fdd-filters button { font-size: 13px; padding: 5px 10px; }
.fdd-row1 { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 16px; }
.fdd-row2 { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; } .fdd-row2b { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .fdd-row1, .fdd-row2, .fdd-row2b { grid-template-columns: 1fr; } }
.fdd-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; align-content: start; }
.fdd-k { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; position: relative; overflow: hidden; }
.fdd-kt { font: 500 12px var(--font); color: var(--muted); }
.fdd-kv { font: 600 26px var(--disp); display: flex; align-items: baseline; gap: 10px; } .fdd-kv small { font-size: 15px; color: var(--muted); }
.fdd-k.big .fdd-kv { font-size: 34px; }
.fdd-ks { font-size: 12px; color: var(--muted); }
.fdd-d { font: 600 12px var(--mono); color: var(--muted); } .fdd-d.up { color: var(--sev-high); } .fdd-d.down { color: var(--ok); }
.fdd-spark { display: block; width: 100%; height: 26px; margin-top: 6px; } .fdd-spark polyline { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fdd-chart { width: 100%; height: auto; display: block; overflow: visible; }
.fdd-chart .fdd-gl { stroke: var(--line); } .fdd-chart text { font: 11px var(--mono); }
.fdd-ax { fill: var(--muted); } .fdd-v { fill: var(--text); font-weight: 600 !important; } .fdd-gv { fill: var(--text); font: 600 26px var(--disp) !important; }
.fdd-chart rect[class^="sev-"], .fdd-chart path[class^="sev-"] { stroke: none; }
.fdd-chart .ln { fill: none; stroke-width: 2; } .fdd-chart circle { stroke: var(--panel); stroke-width: 2; }
.fdd-hitbox { fill: transparent; } .fdd-hit { cursor: pointer; } g.fdd-hit:hover .fdd-hitbox, .fdd-hbr:hover { background: rgba(76,98,117,.08); fill: rgba(76,98,117,.08); }
.fdd-chart path.fdd-hit:hover { opacity: .8; }
.fdd-dur { fill: var(--ro); }
.fdd-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.fdd-leg i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.fdd-leg b { color: var(--text); }
.fdd-hb { display: grid; gap: 6px; }
.fdd-hbr { display: grid; grid-template-columns: minmax(140px, 2fr) 3fr 70px; gap: 10px; align-items: center; padding: 3px 4px; }
.fdd-hbl { font-size: 13px; } .fdd-hbd { font: 12px var(--mono); color: var(--muted); text-align: right; }
.fdd-hbt { display: flex; align-items: center; gap: 2px; } .fdd-hbt i { height: 14px; display: block; border-radius: 0 3px 3px 0; } .fdd-hbt i + i { border-radius: 0 3px 3px 0; }
.fdd-hbt b { font: 600 12px var(--mono); margin-left: 6px; }
.fdd-mix .panel { margin-bottom: 16px; }
.fdd-gauge { max-width: 260px; margin: 0 auto; }
.fdd-mini > div { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 34px; gap: 8px; align-items: center; font-size: 13px; padding: 2px 4px; cursor: pointer; }
.fdd-mini > div:hover { background: rgba(76,98,117,.08); }
.fdd-mt { height: 10px; background: rgba(76,98,117,.12); } .fdd-mt i { display: block; height: 100%; background: var(--ro); border-radius: 0 3px 3px 0; }
.fdd-mini b { font: 600 12px var(--mono); text-align: right; }
.fdd-heat { display: grid; grid-template-columns: 120px repeat(var(--n), minmax(14px, 1fr)); gap: 2px; font-size: 12px; overflow-x: auto; }
.fdd-hl { color: var(--muted); align-self: center; }
.fdd-hc { height: 30px; background: rgba(var(--heat), var(--a)); border: 1px solid var(--line); display: grid; place-items: center; font: 600 11px var(--mono); color: var(--text); }
.fdd-hd { font: 10px var(--mono); color: var(--muted); text-align: center; white-space: nowrap; }
.fdd-th { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
th.sort { cursor: pointer; user-select: none; } th.sort.on { color: var(--text); }
.fdd-sev { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .fdd-sev i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fdd-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--dark); color: #F4F3EF; border: 1px solid #4C6275; padding: 8px 10px; font: 12px var(--font); line-height: 1.5; max-width: 320px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }

/* ovládání (D-45) */
.ctl.on { border-color: var(--active); box-shadow: inset 4px 0 0 var(--active); }
.ctl-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.ctl-keys > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); }
.ctl-keys b { font: 600 22px var(--disp); }
button.lv-cmd { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; margin-left: 4px;
  background: transparent; color: var(--acc); border: 1px solid var(--acc); cursor: pointer; }
button.lv-cmd:hover { background: var(--acc); color: #fff; }
dialog.cmd-dlg { border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); max-width: 460px; width: calc(100% - 32px); padding: 18px 20px; }
dialog.cmd-dlg::backdrop { background: rgba(11,17,23,.6); }
dialog.cmd-dlg h2 { margin-top: 0; }
dialog.cmd-dlg label { display: block; margin: 10px 0 4px; }
dialog.cmd-dlg input:not([type="checkbox"]), dialog.cmd-dlg select { width: 100%; }
dialog.cmd-dlg label input[type="checkbox"] { width: auto; margin-right: 6px; }
.rep-frame { width: 100%; min-height: 900px; border: 1px solid var(--line); background: #fff; }
/* energie (D-49) */
.en-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 16px; }
.en-bar { fill: var(--ro); } .en-bar.en-flag { fill: var(--suspect); } .en-dd { fill: var(--sev-low); } .en-miss { fill: var(--line-strong); opacity: .5; }
td.n, th.n { text-align: right; }

/* dokumentace + pruh vývojové verze */
#dev-banner { background: #3a2a00; color: #ffd27a; text-align: center; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; }
#dev-banner a { color: #fff; }
.dw { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .dw { grid-template-columns: 1fr; } }
.dw-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.dw-toc a { padding: 7px 10px; text-decoration: none; color: var(--text); border-left: 3px solid transparent; font-size: 14px; }
.dw-toc a.on { border-left-color: var(--acc); background: var(--panel); font-weight: 600; }
.dw-toc a:hover { background: var(--panel); }
.dw-body { background: var(--panel); border: 1px solid var(--line); padding: 26px 32px; max-width: 920px; line-height: 1.6; }
.dw-body h1 { margin-top: 0; } .dw-body h2 { margin-top: 28px; border-bottom: 2px solid var(--acc); padding-bottom: 4px; }
.dw-body .lead { font-size: 16px; color: var(--muted); }
.dw-body table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; }
.dw-body th, .dw-body td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.dw-body th { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dw-body pre { background: var(--bg); border: 1px solid var(--line); padding: 12px; overflow-x: auto; font: 12.5px/1.5 var(--mono); }
.dw-body code { font: 13px var(--mono); background: var(--bg); padding: 1px 4px; }
.dw-body pre code { background: none; padding: 0; }
.dw-body dt { font-weight: 600; margin-top: 12px; } .dw-body dd { margin: 4px 0 0 18px; color: var(--muted); }
.dw-warn { border-left: 4px solid var(--suspect); background: rgba(217,154,30,.1); padding: 12px 16px; margin: 14px 0; }
.dw-diagram { width: 100%; height: auto; margin: 10px 0 6px; }
.dw-diagram .box rect { fill: var(--bg); stroke: var(--line-strong); }
.dw-diagram .box.acc rect { stroke: var(--acc); stroke-width: 2; }
.dw-diagram text { fill: var(--text); font: 600 13px var(--font); text-anchor: middle; }
.dw-diagram text.s { font: 400 11.5px var(--font); fill: var(--muted); }
.dw-diagram line { stroke: var(--text); stroke-width: 1.5; } .dw-diagram marker path { fill: var(--text); }