/* =========================================================
   Rám aplikace: boční menu vlevo (návrh A · Klid).
   Menu má vlastní měřítko 1:1 (ruší zoom --z celé stránky),
   rozměry v px tu jsou skutečné pixely obrazovky.
   ========================================================= */
:root {
  --nav-bg: #FFFFFF; --nav-line: #ECE8F6; --nav-text: #4A4760; --nav-strong: #1C1B2E; --nav-muted: #8A86A0;
  --nav-on-bg: #5B3FE0; --nav-on-text: #FFFFFF; --nav-hover: #F3F0FA; --nav-badge: #E5484D;
  --nav-font: "Plus Jakarta Sans", "Geist", "IBM Plex Sans", "Segoe UI", sans-serif;
  --nav-w: 232px;
}
/* menu je pevně u levého okraje okna (sticky uvnitř stránky se zoomem nefunguje), obsah se odsouvá */
body { display: block; padding: 0; }
#view { min-width: 0; padding: 20px 24px 24px; margin-left: calc((var(--nav-w) + 20px) / var(--z)); }
.lx-big #view { margin-left: calc((var(--nav-w) + 20px) / (var(--z) * var(--lx-zoom))); }

.nav-side { zoom: calc(1 / var(--z)); position: fixed; left: 20px; top: 20px; z-index: 40; width: var(--nav-w); height: calc((100vh - 40px) / var(--app-scale)); box-sizing: border-box;
  display: flex; flex-direction: column; padding: 18px 12px 14px; overflow: hidden;
  background: var(--nav-bg); border: 0; border-radius: 26px; box-shadow: 0 10px 30px rgba(60, 40, 140, .07);
  font-family: var(--nav-font); color: var(--nav-text); }
.nav-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; }
.nav-logo { width: 36px; height: 36px; flex: none; border-radius: 14px; background: var(--nav-strong); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.nav-side .station { display: flex; flex-direction: column; line-height: 1.2; padding: 0; min-width: 0; }
.nav-side .station-name { font-size: 15px; font-weight: 600; color: var(--nav-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-side .station-kind { font: 400 12px var(--nav-font); letter-spacing: 0; text-transform: none; color: var(--nav-muted); }

.nav-side .plant-pick { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 4px; font: 600 11px var(--nav-font); letter-spacing: .08em; text-transform: uppercase; color: var(--nav-muted); }
.nav-side .plant-pick select { min-height: 36px; font: 500 14px var(--nav-font); color: var(--nav-strong); background: var(--nav-bg);
  border: 0; background: #F3F0FA; border-radius: 14px; padding: 4px 8px; }
.nav-side .plant-pick select:focus-visible { outline: 2px solid var(--nav-on-text); outline-offset: 1px; }

/* jen záložky scrollují; patička (uživatel) zůstává fixní dole */
.nav-side .tabs { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-items: stretch; }
.nav-foot { flex: none; }
.nav-grp { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-muted); padding: 18px 12px 6px; }
.nav-side .tabs a { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; margin: 0; border: 0; border-radius: 14px;
  text-decoration: none; font-size: 14px; font-weight: 600; color: var(--nav-text); }
.nav-side .tabs a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--nav-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-side .tabs a:hover { background: var(--nav-hover); color: var(--nav-strong); }
.nav-side .tabs a.on { background: var(--nav-on-bg); color: var(--nav-on-text); font-weight: 600; box-shadow: 0 6px 16px rgba(91, 63, 224, .28); }
.nav-side .tabs a.on svg { stroke: var(--nav-on-text); }
.nav-side .tabs a:focus-visible { outline: 2px solid var(--nav-on-text); outline-offset: -2px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--nav-badge); color: #fff;
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.nav-badge[hidden] { display: none; }

.nav-foot { margin-top: auto; border-top: 1px solid var(--nav-line); padding: 14px 6px 0; display: flex; flex-direction: column; gap: 6px; }
.nav-side .clock { font: 600 20px var(--nav-font); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--nav-strong); }
.nav-side .who { font: 500 13px var(--nav-font); letter-spacing: 0; padding: 0; border: 0; color: var(--nav-text); }
.nav-side .who.srv { font-size: 12px; }
.nav-side .who.srv.ok { color: #15803D; } .nav-side .who.srv.bad { color: #B91C1C; }

/* vzhled menu je stejný na všech obrazovkách (plovoucí bílý panel, fialová vybraná položka) */

/* patička menu: avatar a jméno uživatele */
.nav-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #ECEEF3; color: var(--nav-strong, #374151); font: 700 14px var(--nav-font); letter-spacing: .02em; }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-user-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-name { font: 700 14px var(--nav-font); color: var(--nav-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-user-t .who { font-size: 12px !important; color: var(--nav-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-side .plant-pick[hidden] { display: none; }
.nav-side { padding-top: 22px; }

/* volič projektu nad položkami menu */
.nav-proj { display: flex; flex-direction: column; gap: 5px; padding: 0 6px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--nav-line); }
.nav-proj > span { font: 700 11px var(--nav-font); letter-spacing: .08em; text-transform: uppercase; color: var(--nav-muted); }
.nav-proj select { width: 100%; min-height: 40px; border: 0; border-radius: 14px; background: var(--nav-hover); color: var(--nav-strong);
  font: 600 14px var(--nav-font); padding: 4px 10px; }
.nav-proj select:focus-visible { outline: 2px solid var(--nav-on-bg); outline-offset: 1px; }

/* ===== Mobil (do 760 px): menu jako vysouvací panel za tlačítkem ☰, obsah přes celou šířku ===== */
.nav-burger, .nav-scrim { display: none; }
@media (max-width: 760px) {
  :root { --app-scale: 1; }
  .nav-burger { display: grid; place-items: center; position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; z-index: 46;
    zoom: calc(1 / var(--z)); width: 46px; height: 46px; border: 0; border-radius: 15px; background: #fff; color: var(--nav-strong);
    box-shadow: 0 6px 18px rgba(60, 40, 140, .14); cursor: pointer; }
  .nav-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .nav-burger:focus-visible { outline: 2px solid var(--nav-on-bg); outline-offset: 2px; }
  .nav-side { left: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); height: calc(100dvh - 20px); width: min(280px, 82vw);
    transform: translateX(calc(-100% - 24px)); transition: transform .2s ease-out; z-index: 47; box-shadow: 0 18px 50px rgba(28, 27, 46, .25); }
  html.nav-open .nav-side { transform: none; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(28, 27, 46, .35); }
  .nav-scrim[hidden] { display: none; }
  #view, .lx-big #view { margin-left: 0; padding: calc(68px / var(--z)) 12px 20px; }
  html body.lx-big #view { padding: 68px 12px 20px; }
  /* Dohled a jiné řádky se širokými sloupci: zalomit místo oříznutí */
  body.lx-big #view .lx-al { flex-wrap: wrap; }
  body.lx-big #view .lx-al-b { flex: 1 1 calc(100% - 60px); }
  body.lx-big #view .lx-al-t { width: auto; align-items: flex-start; margin-left: 56px; }
  body.lx-big #view .lx-al-a { width: auto; }
  body.lx-big #view .lx-stats, body.lx-big #view .lx-mstats { grid-template-columns: 1fr; }
  body.lx-big #view .screen-head { flex-wrap: wrap; row-gap: 8px; }
  #view table { max-width: 100%; }
  #view .hscroll, #view .lx-tblwrap { overflow-x: auto; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .nav-side { transition: none; } }

/* jediný projekt firmy: výběr projektu skrytý už od prvního vykreslení (index.html přidá třídu) */
html.lx-single .nav-proj { display: none; }