/* =========================================================================
   BIQ+ – vzhľad celej aplikácie
   Vychádza z DaliOil dizajnového jazyka (tmavý glass, Sora, akcent #e63946),
   doplnený o svetlú tému, tabuľky, grafy a mobilné rozloženie.

   Obsah: 1 tokeny · 2 základ · 3 layout · 4 menu · 5 horná lišta a filtre
          6 ovládacie prvky · 7 bloky zostáv · 8 tabuľka (grid) · 9 popupy
          10 grafy a KPI · 11 fronta staníc · 12 login · 13 mobil · 14 tlač
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- 1. Tokeny ---------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #0a0c12;
  --surface: #10131c;
  --surface-2: #161a26;
  --card: rgba(18, 21, 31, 0.72);
  --card-solid: #141824;
  --accent-2: #ff5c69;
  --accent-grad: linear-gradient(135deg, #ff5c69 0%, #e63946 45%, #c1121f 100%);
  --highlight: rgba(255, 255, 255, 0.10);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --hover: rgba(255, 255, 255, 0.05);
  --zebra: rgba(255, 255, 255, 0.018);
  --text: #e0e4f0;
  --text-dim: #8a8fa8;
  --text-faint: #565b73;
  --accent: #e63946;
  --accent-soft: rgba(230, 57, 70, 0.14);
  --accent-text: #ff7b85;
  --ok: #2dd4a7; --warn: #f5b342; --err: #e63946; --info: #4d9fff;
  --t-blue: #4d9fff; --t-green: #2dd4a7; --t-yellow: #f5c542; --t-orange: #ff9a4d; --t-red: #ff6b7a;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --radius: 16px; --radius-sm: 9px;
  --blur: 18px;
  --sidebar-w: 268px;
  --font: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --num: var(--font);   /* čísla v tabuľkách, pivotoch, KPI… – rovnaké písmo ako grafy (Sora), rovnako široké číslice */
  --bg-image: radial-gradient(1200px 600px at 75% -10%, rgba(230, 57, 70, 0.12), transparent 60%),
              radial-gradient(900px 500px at 5% 105%, rgba(77, 159, 255, 0.08), transparent 55%);
  --dots: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.2px);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --card: rgba(255, 255, 255, 0.92);
  --card-solid: #ffffff;
  --border: rgba(20, 24, 40, 0.09);
  --border-strong: rgba(20, 24, 40, 0.16);
  --hover: rgba(20, 24, 40, 0.04);
  --zebra: rgba(20, 24, 40, 0.022);
  --text: #1b1f2e;
  --text-dim: #5d6378;
  --text-faint: #9aa0b4;
  --accent-soft: rgba(230, 57, 70, 0.09);
  --accent-text: #c92a37;
  --t-blue: #2f74d0; --t-green: #12996f; --t-yellow: #b88a00; --t-orange: #d26a12; --t-red: #d33445;
  --shadow: 0 10px 30px rgba(20, 24, 40, 0.08);
  --bg-image: radial-gradient(1200px 600px at 75% -10%, rgba(230, 57, 70, 0.07), transparent 60%),
              radial-gradient(900px 500px at 5% 105%, rgba(77, 159, 255, 0.06), transparent 55%);
  --dots: radial-gradient(rgba(20, 24, 40, 0.06) 1px, transparent 1.2px);
  --highlight: rgba(255, 255, 255, 0.9);
}

/* ---- 2. Základ ---------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); font-size: calc(14px * var(--fs, 1)); line-height: 1.45;
  color: var(--text); background: var(--bg); min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.bg-layer { position: fixed; inset: 0; z-index: -1; background: var(--bg-image), var(--bg); }
.bg-layer::after { content: ""; position: absolute; inset: 0; background: var(--dots); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
a { color: var(--accent-text); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
[hidden] { display: none !important; }
.dim { color: var(--text-dim); }
.mono, .num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor;
       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
}
/* jemná svetelná linka na hornej hrane kariet */
.card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--highlight), transparent); }
.eyebrow { font-size: calc(11px * var(--fs, 1)); letter-spacing: 2px; text-transform: uppercase; color: var(--accent-text);
           font-weight: 600; display: flex; align-items: center; gap: 8px; }
.road-divider { height: 2px; margin: 20px 0; border: 0; opacity: .45;
  background-image: linear-gradient(90deg, var(--accent) 0 50%, transparent 50% 100%); background-size: 18px 2px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .35s ease both; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- 3. Layout ---------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; padding: 18px 26px 40px; display: flex; flex-direction: column; gap: 16px; }
.content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.only-mobile { display: none !important; }

/* ---- 4. Bočné menu ------------------------------------------------------ */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; height: 100vh; position: sticky; top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%) 0%, var(--surface) 28%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 14px; }
.mark { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 11px; color: #fff;
  background: var(--accent-grad); box-shadow: 0 8px 22px -6px rgba(230, 57, 70, .55), inset 0 1px 0 rgba(255,255,255,.25); }
.mark svg { fill: #fff; }
.mark-sm { width: 38px; height: 38px; } .mark-sm svg { width: 30px; height: 30px; }
.mark-lg { width: 64px; height: 64px; border-radius: 18px; } .mark-lg svg { width: 50px; height: 50px; }
.brand-name { font-weight: 800; font-size: calc(18px * var(--fs, 1)); letter-spacing: -.3px; }
.plus { color: var(--accent-2); margin-left: 1px; }
.brand-sub { font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { color: var(--text); }
.brand-close { position: absolute; top: 20px; right: 12px; }
.nav-home { display: flex; align-items: center; gap: 9px; padding: 9px 10px; margin-bottom: 4px; border-radius: var(--radius-sm);
  font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; color: var(--text-dim); }
.nav-home:hover { background: var(--hover); color: var(--text); }
.nav-home.active { background: var(--accent-soft); color: var(--accent-text); }
.nav-home .ico { width: 16px; height: 16px; }
.nav-search { margin: 4px 14px 10px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--hover); color: var(--text-dim); }
.nav-search input { border: 0; background: transparent; padding: 9px 0; width: 100%; color: var(--text); outline: none; font: inherit; font-size: calc(13px * var(--fs, 1)); }
.nav { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
.nav-group { margin-top: 4px; }
.nav-label { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: calc(11px * var(--fs, 1)); letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600;
  color: var(--text-dim); cursor: pointer; list-style: none; user-select: none; }
.nav-label::-webkit-details-marker { display: none; }
.nav-label:hover { color: var(--text); background: var(--hover); }
.nav-label .ico { width: 16px; height: 16px; }
.nav-label .chev { margin-left: auto; width: 16px; height: 16px; stroke-width: 2.4; transition: transform .2s; opacity: .7; }
details[open] > .nav-label .chev { transform: rotate(180deg); }
details[open] > .nav-label { color: var(--text); }
.nav-favs .nav-label { cursor: default; color: var(--warn); }
.nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px 7px 35px; margin: 1px 0; border-radius: var(--radius-sm);
  font-size: calc(13px * var(--fs, 1)); color: var(--text-dim); transition: background .12s, color .12s; }
.nav-favs .nav-item { padding-left: 12px; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item { position: relative; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item.active::before { content: ""; position: absolute; left: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.nav-favs .nav-item.active::before { display: none; }
.nav-section { margin: 14px 10px 4px; font-size: calc(10px * var(--fs, 1)); font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-faint); }
.nav-item small { font-size: calc(10px * var(--fs, 1)); color: var(--text-faint); white-space: nowrap; }
.nav-item.pending span { opacity: .55; }
.sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--border); }
.user-chip { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: calc(13px * var(--fs, 1)); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: calc(12px * var(--fs, 1)); font-weight: 700; flex-shrink: 0; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrim { display: none; }

/* ---- 5. Horná lišta a filtre -------------------------------------------- */
.topbar { display: flex; align-items: flex-start; gap: 14px; }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { font-size: calc(27px * var(--fs, 1)); font-weight: 700; letter-spacing: -.5px; margin-top: 4px; }
.subtitle { color: var(--text-dim); font-size: calc(13px * var(--fs, 1)); margin-top: 3px; }
.topbar-actions { display: flex; gap: 6px; }
.fav-btn.on { color: var(--warn); }
.fav-btn.on .ico { fill: var(--warn); }
[data-theme="light"] .when-dark, :root:not([data-theme="light"]) .when-light { display: none; }

.filterbar { padding: 12px 14px; }
.filter-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f > label { font-size: calc(10.5px * var(--fs, 1)); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.period { display: flex; align-items: center; gap: 8px; }
.presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.presets button { font: inherit; font-size: calc(11.5px * var(--fs, 1)); padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim); }
.presets button:hover { color: var(--text); border-color: var(--border-strong); }
.presets button.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.period-summary { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); margin-left: 6px; font-size: calc(12.5px * var(--fs, 1)); }
.ft-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; min-width: 0; }
.ft-text small { font-weight: 400; color: var(--text-dim); font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.f-submit { margin-left: auto; }
.filter-toggle { font: inherit; }

/* ---- 6. Ovládacie prvky ------------------------------------------------- */
input, select, textarea { font: inherit; color: var(--text); }
.filterbar input, .filterbar select, .field input, .ctl {
  height: 38px; padding: 0 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-size: calc(13.5px * var(--fs, 1)); outline: none;
  transition: border-color .15s, box-shadow .15s; min-width: 0;
}
.filterbar input:focus, .filterbar select:focus, .field input:focus, .ctl:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filterbar select { padding-right: 30px; max-width: 260px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8fa8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
input[type="datetime-local"], input[type="date"] { font-family: var(--num); font-size: calc(13px * var(--fs, 1)); }
::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
:root:not([data-theme="light"]) ::-webkit-calendar-picker-indicator { filter: invert(1); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-size: calc(13.5px * var(--fs, 1)); font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s, border-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.busy { opacity: .85; }
.btn.busy .ico { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
body.is-loading::before { content: ""; position: fixed; z-index: 200; top: 0; left: 0; height: 3px; width: 35%;
  background: linear-gradient(90deg, transparent, var(--accent), #ff8a5c); animation: navbar 1.1s ease-in-out infinite; }
@keyframes navbar { from { left: -35%; } to { left: 100%; } }
body.is-loading .content { opacity: .55; transition: opacity .2s .15s; }
.btn-primary { position: relative; overflow: hidden; background: var(--accent-grad); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(230, 57, 70, .7), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition: left .6s ease; }
.btn-primary:hover::after { left: 120%; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-ghost.on { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.btn-sm { height: 32px; padding: 0 11px; font-size: calc(12.5px * var(--fs, 1)); }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-dim); cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border); }

.multi { position: relative; }
.multi-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 170px; max-width: 280px;
  height: 38px; padding: 0 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: calc(13.5px * var(--fs, 1)); cursor: pointer; }
.multi-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-pop { display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 280px; padding: 10px;
  background: var(--card-solid); }
.multi.open .multi-pop { display: block; }

.msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: calc(13.5px * var(--fs, 1)); }
.msg-err { background: rgba(230,57,70,.12); color: var(--accent-text); border: 1px solid rgba(230,57,70,.28); }
.msg-warn { background: rgba(245,179,66,.12); color: var(--warn); border: 1px solid rgba(245,179,66,.28); }
.msg-info { background: rgba(77,159,255,.10); color: var(--info); border: 1px solid rgba(77,159,255,.25); }
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: calc(11px * var(--fs, 1)); font-weight: 600; }
.badge-ok { background: rgba(45,212,167,.14); color: var(--ok); }
.badge-warn { background: rgba(245,179,66,.15); color: var(--warn); }
.badge-err { background: rgba(230,57,70,.14); color: var(--accent-text); }
.badge-dim { background: var(--hover); color: var(--text-dim); }

/* ---- 7. Bloky zostáv ---------------------------------------------------- */
.block { min-width: 0; }
.block-title { font-size: calc(15px * var(--fs, 1)); margin: 0 0 10px 2px; display: flex; align-items: center; gap: 8px; }
.card-pad { padding: 16px 18px; }
.empty { padding: 48px 24px; text-align: center; }
.empty h2 { font-size: calc(18px * var(--fs, 1)); margin: 10px 0 6px; }
.empty-ico { width: 40px; height: 40px; color: var(--text-faint); }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--hover); border: 1px solid var(--border);
  overflow-x: auto; width: fit-content; max-width: 100%; }
.tab { font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 600; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.tab.active { background: var(--card-solid); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.2), inset 0 -2px 0 var(--accent); }
.tab-panel { display: flex; flex-direction: column; gap: 18px; }

/* ---- 8. Tabuľka (grid) -------------------------------------------------- */
.grid { display: flex; flex-direction: column; overflow: hidden; }
.grid-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--hover), transparent); border-radius: var(--radius) var(--radius) 0 0; }
.grid-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; flex: 1 1 200px; max-width: 320px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-dim); }
.grid-search input { border: 0; background: transparent; outline: none; width: 100%; color: var(--text); font-size: calc(13px * var(--fs, 1)); }
.grid-count { font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); margin-right: auto; white-space: nowrap; }
.tb-actions { display: flex; gap: 6px; }
.grid-count b { color: var(--text); font-family: var(--num); font-weight: 600; }
.grid-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; font-size: calc(12px * var(--fs, 1));
  background: var(--accent-soft); color: var(--accent-text); border: 1px solid transparent; }
.chip button { border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; padding: 1px; border-radius: 50%; }
.chip button:hover { background: rgba(255,255,255,.12); }
.chip .ico { width: 13px; height: 13px; }
.grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; padding: 14px; border-bottom: 1px solid var(--border); }
.grid-scroll { overflow: auto; max-height: calc(100vh - 230px); min-height: 120px; position: relative; }
.grid.no-max .grid-scroll { max-height: none; }
table.qg { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(13px * var(--fs, 1)); }
.qg th, .qg td { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.qg thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); font-size: calc(12.5px * var(--fs, 1)); font-weight: 600;
  color: var(--text-dim); user-select: none; vertical-align: bottom; padding-top: 11px; padding-bottom: 11px; }
.qg .th-unit { font-weight: 400; color: var(--text-faint); font-size: calc(11.5px * var(--fs, 1)); white-space: nowrap; }
.qg .th-help { display: inline-grid; place-items: center; color: var(--text-faint); cursor: help; border-radius: 50%; outline: none; }
.qg .th-help:hover, .qg .th-help:focus { color: var(--info); }
.qg .th-help .ico { width: 13px; height: 13px; }
@media (hover: hover) {
  .qg .th-filter { opacity: 0; transition: opacity .12s; }
  .qg th:hover .th-filter, .qg .th-filter.on, .qg .th-filter:focus { opacity: 1; }
}
.qg thead th .th { display: flex; align-items: center; gap: 4px; }
.qg thead th.r .th { justify-content: flex-end; }
.qg thead th .th-label { cursor: pointer; white-space: normal; min-width: 40px; line-height: 1.25; }
.qg thead th .th-label:hover { color: var(--text); }
.qg thead th.sorted { color: var(--accent-text); }
.qg .sort-ico { width: 13px; height: 13px; }
.qg .th-filter { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; padding: 3px; border-radius: 5px; display: grid; place-items: center; }
.qg .th-filter:hover { color: var(--text); background: var(--hover); }
.qg .th-filter.on { color: var(--accent-text); background: var(--accent-soft); }
.qg .th-filter .ico { width: 13px; height: 13px; }
.qg tbody tr:nth-child(even) td { background: var(--zebra); }
.qg tbody tr:hover td { background: var(--hover); }
.qg tbody tr.sel td { background: var(--accent-soft) !important; }
.qg tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.grid.scrolled-x .qg .sticky { box-shadow: 6px 0 10px -6px rgba(0,0,0,.45); }
.qg td.r, .qg th.r { text-align: right; }
.qg td.n { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: calc(12.5px * var(--fs, 1)); }
.qg td.neg { color: var(--t-red); }
.qg td .unit { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); margin-left: 3px; }
.qg td.wrap { white-space: normal; min-width: 180px; }
.qg tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface); font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: 0; }
.qg tfoot td.n { font-size: calc(12.5px * var(--fs, 1)); }
.qg .sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.qg thead th.sticky { z-index: 4; }
.qg tbody td.sticky { background: var(--card-solid); }
.qg tr.group td { background: var(--accent-soft) !important; font-weight: 600; color: var(--text); cursor: pointer; }
.qg tr.group .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; transition: transform .15s; }
.qg tr.group.closed .ico { transform: rotate(-90deg); }
.qg tr.gfoot td { font-weight: 600; color: var(--text-dim); background: transparent !important; border-bottom-color: var(--border-strong); }
.qg td.empty-row, .qg-cards .grid-loading { text-align: center; color: var(--text-dim); padding: 40px 20px; white-space: normal; }
.empty-row .empty-ico, .grid-loading .empty-ico { width: 34px; height: 34px; color: var(--text-faint); margin-bottom: 8px; }
.empty-tips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: calc(13px * var(--fs, 1)); }
/* farebné pruhy stĺpcov (náhrada za staré td-blue/td-green…) */
.qg .tone-blue   { box-shadow: inset 3px 0 0 -1px color-mix(in srgb, var(--t-blue) 55%, transparent); }
.qg .tone-green  { box-shadow: inset 3px 0 0 -1px color-mix(in srgb, var(--t-green) 55%, transparent); }
.qg .tone-yellow { box-shadow: inset 3px 0 0 -1px color-mix(in srgb, var(--t-yellow) 55%, transparent); }
.qg .tone-orange { box-shadow: inset 3px 0 0 -1px color-mix(in srgb, var(--t-orange) 55%, transparent); }
.qg .tone-red    { box-shadow: inset 3px 0 0 -1px color-mix(in srgb, var(--t-red) 55%, transparent); }
.qg thead th[class*="tone-"] { box-shadow: inset 0 -2px 0 currentColor; }
.qg thead th.tone-blue { color: var(--t-blue); } .qg thead th.tone-green { color: var(--t-green); }
.qg thead th.tone-yellow { color: var(--t-yellow); } .qg thead th.tone-orange { color: var(--t-orange); }
.qg thead th.tone-red { color: var(--t-red); }
.qg thead th[class*="tone-"] .th-label { color: var(--text-dim); }
.grid-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border); font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); }
.pager-nav { display: flex; align-items: center; gap: 4px; }
.pager-nav button { min-width: 32px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); cursor: pointer; font: inherit; font-size: calc(12.5px * var(--fs, 1)); display: grid; place-items: center; }
.pager-nav button:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.pager-nav button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-nav button:disabled { opacity: .35; cursor: default; }
.pager-nav .ico { width: 14px; height: 14px; }
.grid-pager select { height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 0 6px; }
.grid-loading { padding: 40px; text-align: center; color: var(--text-dim); }

/* karty (mobilné zobrazenie riadkov) */
.qg-cards { display: none; }
.qg-card { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.qg-card-title { font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
.qg-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: calc(12.5px * var(--fs, 1)); }
.qg-card dt { color: var(--text-dim); }
.qg-card dd { margin: 0; text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.qg-card dd.txt { font-family: var(--font); }
.qg-card.total { background: var(--accent-soft); }
.qg-card.group-head { background: var(--hover); font-weight: 600; padding: 8px 14px; font-size: calc(12.5px * var(--fs, 1)); }

/* ---- 9. Popupy (filter stĺpca, stĺpce, export) -------------------------- */
.pop { position: fixed; z-index: 100; width: 290px; max-width: calc(100vw - 20px); background: var(--card-solid);
  border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); padding: 12px;
  animation: rise .14s ease both; }
.pop h4 { margin: 0 0 8px; font-size: calc(13px * var(--fs, 1)); }
.pop input[type="search"], .pop input[type="text"], .pop input[type="number"], .pop select, .multi-pop input[type="search"] {
  width: 100%; height: 34px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font-size: calc(13px * var(--fs, 1)); outline: none; margin-bottom: 8px; }
.pop-list, .multi-list { max-height: 260px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pop-list label, .multi-list label { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: calc(13px * var(--fs, 1)); }
.pop-list label:hover, .multi-list label:hover { background: var(--hover); }
.pop-list label small { margin-left: auto; color: var(--text-faint); font-family: var(--num); font-size: calc(11px * var(--fs, 1)); }
.pop-list input, .multi-list input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex-shrink: 0; }
.pop-actions, .multi-actions { display: flex; gap: 6px; justify-content: space-between; margin-top: 10px; }
.multi-actions { margin: 0 0 6px; justify-content: flex-start; }
.multi-actions button, .pop-link { font: inherit; font-size: calc(12px * var(--fs, 1)); border: 0; background: transparent; color: var(--accent-text); cursor: pointer; padding: 2px 4px; }
.pop-actions .btn { flex: 1; }
.pop-row { display: flex; gap: 6px; }
.pop-menu { display: flex; flex-direction: column; }
.pop-menu button { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: calc(13px * var(--fs, 1)); padding: 9px 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; }
.pop-menu button:hover { background: var(--hover); }

/* ---- 10. Grafy a KPI ---------------------------------------------------- */
.chart-box { position: relative; min-height: 260px; padding: 14px 16px 10px; border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(180deg, var(--hover), transparent 60%); }
.chart-box h3 { font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); font-weight: 600; margin: 0 0 6px; }
.chart-canvas { position: relative; height: 260px; }
.chart-box.tall .chart-canvas { height: 340px; }
.chart-empty { position: absolute; inset: 40px 0 0; display: grid; place-items: center; color: var(--text-faint); font-size: calc(13px * var(--fs, 1)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.kpi { padding: 16px 18px 16px; overflow: hidden; --kc: var(--accent); }
.kpi::after { content: ""; position: absolute; width: 160px; height: 160px; right: -60px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--kc) 22%, transparent), transparent 70%); pointer-events: none; }
.kpi-c0 { --kc: #ff5c69; } .kpi-c1 { --kc: #4d9fff; } .kpi-c2 { --kc: #2dd4a7; } .kpi-c3 { --kc: #f5b342; }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); }
.kpi-ico .ico { width: 17px; height: 17px; }
.kpi-label { font-size: calc(11px * var(--fs, 1)); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.kpi-value { font-family: var(--num); font-size: calc(27px * var(--fs, 1)); font-weight: 600; margin-top: 12px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.kpi-value .unit { font-size: calc(14px * var(--fs, 1)); color: var(--text-dim); margin-left: 4px; }
.kpi-sub { font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); margin-top: 4px; }
.kpi.tone-ok .kpi-value { color: var(--ok); } .kpi.tone-warn .kpi-value { color: var(--warn); } .kpi.tone-err .kpi-value { color: var(--accent-text); }
/* nádrže – merače */
.tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 14px; }
.tank { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--hover); }
.tank-name { font-size: calc(12px * var(--fs, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tank-sub { font-size: calc(11px * var(--fs, 1)); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tank-gauge { position: relative; height: 92px; margin: 10px 0 8px; border-radius: 10px; border: 1px solid var(--border-strong); overflow: hidden; background: var(--surface-2); }
.tank-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, white 20%), var(--c)); opacity: .85; transition: height .6s ease; }
.tank-water { position: absolute; left: 0; right: 0; bottom: 0; background: #4d9fff; opacity: .9; }
.tank-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--num); font-weight: 600; font-size: calc(18px * var(--fs, 1)); color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.tank-vals { display: flex; justify-content: space-between; font-family: var(--num); font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); }

/* ---- 11. Fronta staníc -------------------------------------------------- */
.queue { padding: 14px 16px; }
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: calc(13.5px * var(--fs, 1)); }
.progress { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; border: 1px solid var(--border); }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ff8a5c); transition: width .3s ease; }
.progress-bar.has-err { background: linear-gradient(90deg, var(--accent), var(--warn)); }
.queue.done .progress-bar { background: var(--ok); }
.queue-errors { list-style: none; margin: 10px 0 0; padding: 0; font-size: calc(12.5px * var(--fs, 1)); color: var(--warn); display: flex; flex-direction: column; gap: 3px; }
.queue-errors:empty { display: none; }

/* ---- 12. Login --------------------------------------------------------- */
body.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-x: hidden;
  background: #0a0c12 var(--login-bg, none) no-repeat center / cover fixed; color: #eef0f8; color-scheme: dark; }
body.login-page::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(230,57,70,.16), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(59,130,246,.10), transparent 55%),
              linear-gradient(180deg, rgba(8,10,15,.55), rgba(8,10,15,.78)); }
.login-watermark { position: fixed; right: -40px; bottom: -50px; width: 340px; height: 340px; opacity: .05; transform: rotate(-6deg); pointer-events: none; }
.login-watermark .ico { width: 100%; height: 100%; stroke: #fff; stroke-width: 1.1; }
.login-wrap { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.login-card { position: relative; width: min(420px, 100%); min-width: 0; padding: 40px 38px 30px; border-radius: 24px; overflow: hidden;
  background: rgba(12, 14, 21, .62); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03);
  animation: cardIn .8s cubic-bezier(.21,.7,.25,1) both; }
.login-card::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); }
.login-card::after { content: ""; position: absolute; width: 320px; height: 320px; top: -130px; right: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,70,.14), transparent 65%); pointer-events: none; }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
.login-card > * { position: relative; z-index: 1; }
.login-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.login-brand { font-size: calc(40px * var(--fs, 1)); font-weight: 800; letter-spacing: -1.5px; line-height: 1; color: #fff; }
.login-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: calc(10px * var(--fs, 1)); font-weight: 600;
  letter-spacing: 2.2px; text-transform: uppercase; color: #ff5c69; margin-bottom: 8px; }
.login-eyebrow::before, .login-eyebrow::after { content: ""; width: 26px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, #e63946); }
.login-eyebrow::after { background: linear-gradient(90deg, #e63946, transparent); }
.login-title { font-size: calc(20px * var(--fs, 1)); font-weight: 700; text-align: center; color: #fff; margin: 0 0 26px; }
.login-error { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 11px 12px 11px 14px; border-radius: 11px; font-size: calc(13px * var(--fs, 1));
  background: rgba(230,57,70,.10); border: 1px solid rgba(230,57,70,.28); color: #ff8a92; animation: shake .4s cubic-bezier(.36,.07,.19,.97); }
.login-error .ico { width: 16px; height: 16px; }
.login-error b { font-weight: 500; }
.login-error button { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .7; display: grid; padding: 2px; }
.login-error button .ico { width: 14px; height: 14px; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } }
.login-field { position: relative; display: block; margin-bottom: 14px; }
.login-field .field-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #565b74; stroke-width: 1.8; transition: color .2s; pointer-events: none; }
.login-field:focus-within .field-ico { color: #ff5c69; }
.login-field input { width: 100%; height: 50px; padding: 0 46px 0 44px; border-radius: 12px; font-size: calc(14px * var(--fs, 1)); color: #eef0f8; outline: none;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); transition: border-color .2s, background .2s, box-shadow .2s; }
.login-field input::placeholder { color: #4a4f68; }
.login-field input:focus { border-color: rgba(230,57,70,.55); background: rgba(255,255,255,.085); box-shadow: 0 0 0 3px rgba(230,57,70,.13); }
.login-field input:-webkit-autofill { -webkit-text-fill-color: #eef0f8; -webkit-box-shadow: 0 0 0 40px #1a1d27 inset; caret-color: #eef0f8; }
.pw-toggle { position: absolute; right: 7px; top: 7px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #565b74; cursor: pointer; display: grid; place-items: center; }
.pw-toggle:hover { color: #9aa0b8; }
.fuel-meter { display: flex; align-items: center; gap: 9px; margin: -2px 2px 16px; font-size: calc(9px * var(--fs, 1)); font-weight: 700; letter-spacing: 1px; color: #565b74; }
.fm-track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.fm-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #e63946, #f5b342, #4ade80); background-size: 420px 100%; transition: width .25s ease; }
.fuel-meter.full .fm-f { color: #4ade80; }
.login-submit { position: relative; overflow: hidden; width: 100%; height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-size: calc(15px * var(--fs, 1)); font-weight: 600; color: #fff;
  background: var(--accent-grad); box-shadow: 0 12px 28px -10px rgba(230,57,70,.75), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s, filter .15s; }
.login-submit .ico { width: 18px; height: 18px; }
.login-submit::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: left .6s ease; }
.login-submit:hover { transform: translateY(-1px); filter: brightness(1.06); }
.login-submit:hover::after { left: 120%; }
.login-submit.fueling { cursor: progress; filter: saturate(.8); }
.login-foot { text-align: center; color: #565b74; font-size: calc(11px * var(--fs, 1)); margin: 20px 0 0; }
.login-links { position: fixed; z-index: 2; top: 18px; left: 18px; display: flex; gap: 8px; }
.login-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: calc(12.5px * var(--fs, 1)); color: #9aa0b8;
  background: rgba(12,14,21,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color .15s, border-color .15s; }
.login-links a:hover { color: #fff; border-color: rgba(230,57,70,.5); }
.login-links .ico { width: 15px; height: 15px; }
@media (max-width: 520px) {
  body.login-page { padding: 16px; align-items: flex-start; padding-top: 76px; }
  .login-card { padding: 32px 22px 24px; }
  .login-brand { font-size: calc(34px * var(--fs, 1)); }
  .login-links { left: 12px; right: 12px; justify-content: center; }
}

/* ---- 13. Mobil ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .grid-charts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .only-mobile { display: inline-flex !important; }
  .main { padding: 12px 12px 32px; padding-top: max(12px, env(safe-area-inset-top)); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: auto; transform: translateX(-102%);
    transition: transform .25s ease; box-shadow: 20px 0 60px rgba(0,0,0,.4); width: min(86vw, 320px); }
  body.menu-open .sidebar { transform: none; }
  body.menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.5); }
  .topbar { align-items: center; }
  .topbar-title h1 { font-size: calc(19px * var(--fs, 1)); }
  .topbar-title .eyebrow { font-size: calc(10px * var(--fs, 1)); }
  .filterbar { padding: 8px; }
  .filter-toggle { width: 100%; height: 40px; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text); font-weight: 600; cursor: pointer; padding: 0 6px; }
  .filter-toggle .chev { margin-left: auto; transition: transform .2s; }
  .filterbar.open .filter-toggle .chev { transform: rotate(180deg); }
  .filter-fields { display: none; padding: 8px 6px 6px; }
  .filterbar.open .filter-fields { display: flex; }
  .f, .f-period { width: 100%; }
  .period { flex-direction: column; align-items: stretch; }
  .period .dim { display: none; }
  .filterbar input, .filterbar select, .multi-btn { width: 100%; max-width: none; height: 42px; }
  .multi-pop { width: 100%; }
  .f-submit { margin: 0; }
  .f-submit .btn { width: 100%; height: 44px; }
  .grid-toolbar { padding: 10px; }
  .grid-search { max-width: none; flex-basis: 100%; order: -1; }
  .grid-charts { padding: 10px; }
  .chart-canvas { height: 230px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi-value { font-size: calc(20px * var(--fs, 1)); }
}
@media (max-width: 720px) {
  .grid.cards-on-mobile .grid-scroll { display: none; }
  .grid.cards-on-mobile .qg-cards { display: block; }
  .grid-pager { justify-content: center; }
  .pager-info { width: 100%; text-align: center; }
  .tanks { grid-template-columns: repeat(2, 1fr); padding: 10px; }
  .pop { left: 10px !important; right: 10px; width: auto; }
}

/* ---- 14. Tlač ----------------------------------------------------------- */
@media print {
  :root { --bg: #fff; --surface: #fff; --card: #fff; --card-solid: #fff; --text: #000; --text-dim: #444; --border: #ccc; --border-strong: #999; --zebra: #f6f6f6; --hover: transparent; --shadow: none; }
  .sidebar, .topbar-actions, .filterbar, .queue, .grid-toolbar, .grid-pager, .grid-chips, .only-mobile, .bg-layer, .th-filter, .tabs { display: none !important; }
  .main { padding: 0; }
  .card { box-shadow: none; backdrop-filter: none; border: 0; }
  .grid-scroll { max-height: none !important; overflow: visible !important; }
  .qg thead th, .qg tfoot td, .qg .sticky { position: static; }
  .qg th, .qg td { padding: 4px 6px; font-size: calc(10px * var(--fs, 1)); }
  .grid.cards-on-mobile .grid-scroll { display: block !important; }
  .qg-cards { display: none !important; }
  .grid-charts { break-inside: avoid; }
}

/* ---- 15. Domov ---------------------------------------------------------- */
.home { display: flex; flex-direction: column; gap: 22px; max-width: 1180px; }
.home-search { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 58px; color: var(--text-dim); }
.home-search .ico { width: 21px; height: 21px; }
.home-search input { flex: 1; border: 0; outline: none; background: transparent; color: var(--text); font-size: calc(16px * var(--fs, 1)); min-width: 0; }
.home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
kbd { font-family: var(--mono); font-size: calc(11px * var(--fs, 1)); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text-faint); }
.home-section { display: flex; flex-direction: column; }
.block-title .ico { width: 16px; height: 16px; color: var(--text-dim); }
.hint { margin: 0 2px; font-size: calc(13.5px * var(--fs, 1)); }
.hint .ico { width: 14px; height: 14px; vertical-align: -2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-text); }
.tile-ico .ico { width: 17px; height: 17px; }
.tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tile-text b { font-weight: 600; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-text small { color: var(--text-dim); font-size: calc(12px * var(--fs, 1)); }
.tile-go { color: var(--text-faint); width: 16px; height: 16px; }
.tile.pending, .group-link.pending { opacity: .55; }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.group-card { padding: 12px; }
.group-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; }
.group-head small { margin-left: auto; font-family: var(--num); }
.group-link { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--text-dim); font-size: calc(13.5px * var(--fs, 1)); }
.group-link:hover { background: var(--hover); color: var(--text); }
.group-link small { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); }

/* ---- 16. Hlásenia a vysvetlivky ----------------------------------------- */
#toasts { position: fixed; z-index: 300; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; font-size: calc(13.5px * var(--fs, 1));
  background: var(--card-solid); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 14px 40px rgba(0,0,0,.35);
  animation: rise .2s ease both; transition: opacity .35s, transform .35s; }
.toast .ico { color: var(--ok); }
.toast-err .ico { color: var(--accent-text); }
.toast.out { opacity: 0; transform: translateY(6px); }
.tip { position: fixed; z-index: 250; max-width: 280px; padding: 8px 11px; border-radius: 9px; font-size: calc(12.5px * var(--fs, 1)); line-height: 1.4;
  background: var(--text); color: var(--bg); box-shadow: 0 10px 30px rgba(0,0,0,.3); pointer-events: none; animation: rise .12s ease both; }

@media (max-width: 900px) {
  .home-search { height: 52px; }
  .home-search kbd { display: none; }
  .tiles, .groups { grid-template-columns: 1fr; }
  .period-summary { display: none; }
}
@media (max-width: 720px) {
  .grid-toolbar { gap: 8px; }
  .tb-actions { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .tb-actions .btn { flex-shrink: 0; }
  #toasts { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { justify-content: center; }
}
@media print { #toasts, .tip, body.is-loading::before { display: none !important; } }
#home-main { display: flex; flex-direction: column; gap: 28px; }
.qg thead th.r { min-width: 104px; }

/* ---- 17. Pivot (BI) ----------------------------------------------------- */
.pivot { display: flex; flex-direction: column; overflow: visible; }
.pv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--hover), transparent); border-radius: var(--radius) var(--radius) 0 0; }
.pv-info { margin-right: auto; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); }
.pv-info b { color: var(--text); font-family: var(--num); }
.pv-body { display: flex; min-height: 420px; }
.pv-fields { width: 250px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 12px; display: none; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 160px); position: sticky; top: 0; overflow-y: auto; }
.pivot.fields-open .pv-fields { display: flex; }
.pv-fields .grid-search { max-width: none; flex: none; }
.pv-fgroup h5 { margin: 8px 2px 6px; font-size: calc(10px * var(--fs, 1)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint); }
.pv-field { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; padding: 7px 9px; border-radius: 8px; cursor: grab;
  font: inherit; font-size: calc(12.5px * var(--fs, 1)); text-align: left; color: var(--text); background: var(--hover); border: 1px solid var(--border); }
.pv-field:hover { border-color: var(--border-strong); }
.pv-field .ico { width: 14px; height: 14px; color: var(--text-faint); }
.pv-field[data-kind="measure"] .ico { color: var(--t-green); }
.pv-field.used { opacity: .5; }
.pv-levels { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-levels .pv-field { width: auto; margin: 0; }
.pv-levels .pv-field .ico { display: none; }
.pv-hint { margin: auto 2px 0; font-size: calc(11.5px * var(--fs, 1)); color: var(--text-faint); }
.pv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-zones { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.pv-zone { min-height: 64px; padding: 8px; border-radius: 10px; border: 1px dashed var(--border-strong); background: var(--hover); transition: border-color .15s, background .15s; }
.pivot.dragging.drag-dim .pv-zone:not([data-zone="values"]), .pivot.dragging.drag-measure .pv-zone[data-zone="values"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pv-zone.over { border-style: solid; border-color: var(--accent) !important; background: var(--accent-soft); }
.pv-zone-title { display: flex; align-items: center; gap: 6px; font-size: calc(10.5px * var(--fs, 1)); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.pv-zone-title .ico { width: 13px; height: 13px; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pv-empty { font-size: calc(12px * var(--fs, 1)); color: var(--text-faint); padding: 3px 2px; }
.pv-chip { display: inline-flex; align-items: center; max-width: 100%; border-radius: 8px; background: var(--card-solid); border: 1px solid var(--border-strong);
  font-size: calc(12.5px * var(--fs, 1)); cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.pv-chip-main { border: 0; background: transparent; color: var(--text); font: inherit; padding: 5px 4px 5px 9px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: calc(10.5px * var(--fs, 1)); font-family: var(--num); }
.pv-val select { border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: calc(12px * var(--fs, 1)); font-weight: 600; cursor: pointer; padding: 0 2px; outline: none; }
.pv-x { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; padding: 4px 6px 4px 2px; }
.pv-x:hover { color: var(--accent-text); }
.pv-x .ico { width: 12px; height: 12px; }
.pv-view { display: flex; align-items: center; }
.pv-view > button:first-child { flex: 1; }
.pv-msg { margin: 12px 12px 0; }
.pv-chart { padding: 12px; border-bottom: 1px solid var(--border); }
.pv-scroll { position: relative; overflow: auto; max-height: calc(100vh - 200px); min-height: 160px; }
.pv-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: calc(13px * var(--fs, 1));
  color: var(--text-dim); background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(2px); z-index: 5; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; }
table.pv { border-collapse: separate; border-spacing: 0; font-size: calc(13px * var(--fs, 1)); min-width: 100%; }
.pv th, .pv td { padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pv thead { position: sticky; top: 0; z-index: 4; }
.pv thead th { background: var(--surface); font-weight: 600; font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); text-align: right; }
.pv thead th.pv-corner { position: sticky; left: 0; z-index: 5; text-align: left; vertical-align: bottom; color: var(--text); min-width: 200px; }
.pv thead th.pv-ch { text-align: center; border-left: 1px solid var(--border); color: var(--text); }
.pv-dimname { display: block; font-size: calc(10px * var(--fs, 1)); font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; }
.pv thead th.pv-mh { font-weight: 500; }
.pv .pv-total { background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.pv thead th.pv-total { color: var(--accent-text); }
.pv tbody th.pv-rh, .pv tfoot th.pv-rh { position: sticky; left: 0; z-index: 2; background: var(--card-solid); text-align: left; font-weight: 500; }
.pv td.n { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: calc(12.5px * var(--fs, 1)); }
.pv td.neg { color: var(--t-red); }
.pv tbody tr:hover td, .pv tbody tr:hover th { background-color: var(--hover); }
.pv tbody tr.has-kids { cursor: pointer; }
.pv tbody tr.has-kids th.pv-rh { font-weight: 600; }
.pv tbody tr.pv-l0.has-kids th, .pv tbody tr.pv-l0.has-kids td { border-top: 1px solid var(--border-strong); }
.pv tbody tr.pv-l0.has-kids td { font-weight: 600; }
.pv-tog { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; transition: transform .15s; color: var(--text-faint); }
tr.open .pv-tog { transform: rotate(90deg); color: var(--accent-text); }
.pv-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); margin: 0 10px 2px 4px; }
.pv tfoot td, .pv tfoot th { position: sticky; bottom: 0; z-index: 2; background: var(--surface); font-weight: 700; border-top: 1px solid var(--border-strong); border-bottom: 0; }
.pv tfoot th.pv-rh { z-index: 4; background: var(--surface); }
.pv.heat td.n { color: var(--text); }
@media (max-width: 900px) {
  .pv-body { flex-direction: column; }
  .pv-fields { width: auto; position: static; max-height: 300px; border-right: 0; border-bottom: 1px solid var(--border); }
  .pv-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-zone[data-zone="values"] { grid-column: 1 / -1; }
  .pv thead th.pv-corner { min-width: 140px; }
}

.pv-note { display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); }
.pv-note .ico { width: 15px; height: 15px; color: var(--info); }

/* ---- 18. Dashboard ------------------------------------------------------ */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-card { padding: 16px 18px 12px; min-width: 0; }
.chart-card.span-2 { grid-column: 1 / -1; }
.chart-card .chart-box { border: 0; background: none; padding: 0; min-height: 0; }
.chart-card .block-title { margin-bottom: 6px; }
.kpi-sub.trend-up { color: var(--ok); }
.kpi-sub.trend-down { color: var(--accent-text); }
.home-dash { display: flex; flex-direction: column; gap: 16px; }
.home-dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home-dash-head h2 { font-size: calc(17px * var(--fs, 1)); }
.home-dash-head a { font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
@media (max-width: 1000px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---- 19. Animácie -------------------------------------------------------
   Prechody medzi stránkami (View Transitions), postupný nábeh obsahu,
   počítadlá KPI, grafy, merače. Všetko vypne prefers-reduced-motion. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* plynulý prechod medzi stránkami (Chrome/Edge 126+, Safari 18.2+; inde sa jednoducho preskočí) */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.topbar-title { view-transition-name: page-title; }
.content { view-transition-name: page-content; }
::view-transition-old(page-content) { animation: vt-out .22s var(--ease-out) both; }
::view-transition-new(page-content) { animation: vt-in .42s var(--ease-out) both; }
::view-transition-old(page-title) { animation: vt-title-out .2s ease both; }
::view-transition-new(page-title) { animation: vt-title-in .38s var(--ease-out) both; }
::view-transition-group(sidebar) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.992); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px) scale(.992); filter: blur(3px); } }
@keyframes vt-title-out { to { opacity: 0; transform: translateX(-12px); } }
@keyframes vt-title-in { from { opacity: 0; transform: translateX(16px); } }

/* postupný nábeh obsahu – každý prvok dostane --i (poradie) v qr-app.js */
.enter { animation: enter .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes enter { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.enter-fade { animation: enter-fade .4s ease both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes enter-fade { from { opacity: 0; transform: translateY(4px); } }
.topbar-title h1 { animation: title-in .5s var(--ease-out) both; }
@keyframes title-in { from { opacity: 0; transform: translateY(6px); letter-spacing: 0; } }
.filterbar { animation: enter .45s var(--ease-out) both; }

/* karty: jemné nadvihnutie pri prejdení myšou */
.kpi, .chart-card, .tile, .group-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s; }
.kpi:hover, .chart-card:hover, .group-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -18px rgba(0,0,0,.35); }
.kpi-ico { transition: transform .35s var(--ease-spring); }
.kpi:hover .kpi-ico { transform: scale(1.12) rotate(-6deg); }
.kpi-value { transition: color .3s; }

/* menu: indikátor a posun položiek */
.nav-item, .nav-home { transition: background .15s, color .15s, padding-left .2s var(--ease-out); }
.nav-item:hover { padding-left: 39px; }
.nav-favs .nav-item:hover { padding-left: 16px; }
.nav-item.active::before { animation: dot-pop .5s var(--ease-spring) both; }
@keyframes dot-pop { from { transform: scale(0); } }
details.nav-group > .nav-item { animation: enter-fade .3s ease both; }
.mark { transition: transform .4s var(--ease-spring); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }

/* záložky s posuvným indikátorom */
.tabs { position: relative; }
.tab-ink { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 9px; background: var(--card-solid);
  box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 -2px 0 var(--accent); transition: transform .35s var(--ease-out), width .35s var(--ease-out); z-index: 0; }
.tabs.has-ink .tab.active { background: transparent; box-shadow: none; }
.tab { position: relative; z-index: 1; transition: color .2s; }
.tab-panel:not([hidden]) { animation: enter .4s var(--ease-out) both; }

/* tabuľky: riadky pribúdajú postupne, rozbalenie v pivote */
.qg tbody tr.enter-fade, .pv tbody tr.enter-fade { animation-duration: .35s; }
.pv tbody tr.pv-new { animation: row-open .3s var(--ease-out) both; }
@keyframes row-open { from { opacity: 0; transform: translateY(-6px); } }
.qg tbody tr.sel td { transition: background .2s; }
.th-filter, .pv-chip, .pv-field, .chip { transition: transform .15s var(--ease-out), background .15s, border-color .15s, opacity .15s; }
.pv-chip { animation: chip-in .3s var(--ease-spring) both; }
@keyframes chip-in { from { opacity: 0; transform: scale(.85); } }
.pv-field:active, .pv-chip:active { transform: scale(.96); }
.pv-zone.over { animation: zone-pulse .9s ease infinite; }
@keyframes zone-pulse { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
.pv.heat td.n { transition: background-color .4s ease; }

/* načítavanie: lesk namiesto prázdna */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.progress-bar { position: relative; overflow: hidden; }
.progress-bar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: shimmer 1.6s infinite; }
.queue.done .progress-bar::after { display: none; }
.queue:not([hidden]) { animation: enter .4s var(--ease-out) both; }

/* nádrže: palivo nateká zdola */
.tank-fill { animation: tank-fill 1.2s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + .15s); transform-origin: bottom; }
@keyframes tank-fill { from { transform: scaleY(0); } }
.tank { transition: transform .25s var(--ease-out); }
.tank:hover { transform: translateY(-3px); }

/* hviezdička obľúbených */
.fav-btn.bump .ico { animation: star-pop .5s var(--ease-spring); }
@keyframes star-pop { 40% { transform: scale(1.45) rotate(18deg); } }

/* domov */
.home-search { animation: enter .5s var(--ease-out) both; }
.home-search:focus-within { transform: translateY(-1px); }
.tile:hover .tile-go { transform: translateX(3px); }
.tile-go { transition: transform .2s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

.pv-selcount { margin-left: auto; font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); align-self: center; }

/* ---- 20. Nádrže a pruhy naplnenia --------------------------------------- */
.meter { position: relative; height: 8px; border-radius: 999px; background: var(--hover); border: 1px solid var(--border); overflow: hidden; flex: 1; min-width: 60px; }
.meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transition: width .8s var(--ease-out);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 70%, white 30%), var(--mc)); animation: meter-in 1s var(--ease-out) both; }
@keyframes meter-in { from { width: 0 !important; } }
.meter-ok { --mc: var(--ok); } .meter-mid { --mc: var(--warn); } .meter-low { --mc: var(--err); }
.meter-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.meter-cell b { font-weight: 500; min-width: 44px; text-align: right; }
.tanks-block { display: flex; flex-direction: column; gap: 14px; }
.tank-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.tank-filter .grid-search { flex: 0 1 240px; }
.fuel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fuel-chip { font: inherit; font-size: calc(12.5px * var(--fs, 1)); padding: 5px 11px 5px 9px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-dim); transition: all .15s; }
.fuel-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fc); opacity: .35; transition: opacity .15s; }
.fuel-chip.on { color: var(--text); background: color-mix(in srgb, var(--fc) 12%, transparent); border-color: color-mix(in srgb, var(--fc) 45%, transparent); }
.fuel-chip.on::before { opacity: 1; }
.tank-toggles { display: flex; gap: 14px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch span { width: 32px; height: 18px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-spring); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(14px); }
.tank-count { margin-left: auto; font-size: calc(12.5px * var(--fs, 1)); }
.tank-stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.station-card { padding: 14px; animation: enter .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.station-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.station-head b { display: block; font-size: calc(15px * var(--fs, 1)); }
.station-head .dim { font-size: calc(12px * var(--fs, 1)); }
.station-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.station-sum { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); }
.station-card .tanks { padding: 10px 0 0; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tank.is-low { border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.tank.is-low .tank-pct { color: var(--err); }
.tank.is-stale { opacity: .7; }
@media (max-width: 720px) { .tank-stations { grid-template-columns: 1fr; } .tank-count { margin-left: 0; } }

.qg td.lvl-ok { color: var(--ok); } .qg td.lvl-warn { color: var(--warn); font-weight: 600; } .qg td.lvl-bad { color: var(--err); font-weight: 600; }

/* detail riadku (rozkliknutie) */
.qg tr.has-detail { cursor: pointer; }
.qg .dt-tog { width: 14px; height: 14px; margin: 0 6px -2px 0; color: var(--text-faint); transition: transform .2s var(--ease-out); }
.qg tr.has-detail.open .dt-tog { transform: rotate(90deg); color: var(--accent-text); }
.qg tr.has-detail.open td { background: var(--accent-soft); }
.qg tr.detail-row > td { padding: 0 !important; background: var(--surface-2) !important; white-space: normal; }
.detail-box { padding: 12px 16px 14px 36px; animation: enter .35s var(--ease-out) both; border-left: 3px solid var(--accent); }
.detail-title { font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .8px; }
.detail-table { border-collapse: collapse; font-size: calc(12.5px * var(--fs, 1)); min-width: 520px; }
.detail-table th { text-align: left; font-weight: 600; color: var(--text-dim); padding: 5px 12px; border-bottom: 1px solid var(--border-strong); }
.detail-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); }
.detail-table .r { text-align: right; } .detail-table .n { font-family: var(--num); }
.detail-table tr.marked td { background: color-mix(in srgb, var(--err) 9%, transparent); color: var(--text); }
.detail-table tr.marked td.n { color: var(--err); font-weight: 600; }

/* ---- 21. Filtre: obdobie, výber s hľadaním ------------------------------ */
.filterbar.applying { opacity: .7; pointer-events: none; transition: opacity .2s; }
.f-period { position: relative; }
.period-ctl { display: flex; align-items: stretch; height: 42px; border-radius: 11px; border: 1px solid var(--border-strong);
  background: var(--surface-2); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.f-period.open .period-ctl, .period-ctl:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pc-arrow { width: 36px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.pc-arrow:hover { background: var(--hover); color: var(--accent-text); }
.pc-arrow .ico { width: 16px; height: 16px; }
.pc-main { display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 0 12px; border: 0; border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.pc-main:hover { background: var(--hover); }
.pc-main > .ico { color: var(--accent-text); }
.pc-main .chev { margin-left: auto; width: 14px; height: 14px; color: var(--text-faint); transition: transform .2s; }
.f-period.open .pc-main .chev { transform: rotate(180deg); }
.pc-text { display: flex; flex-direction: column; line-height: 1.15; }
.pc-text b { font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.pc-text small { font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); }
.period-pop { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; display: flex; gap: 0; padding: 0; overflow: hidden;
  background: var(--card-solid); box-shadow: 0 24px 60px -12px rgba(0,0,0,.35); animation: pop-in .22s var(--ease-out) both; transform-origin: top left; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.period-pop h5 { margin: 0 0 6px; font-size: calc(10.5px * var(--fs, 1)); letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.pp-presets { display: flex; gap: 4px; padding: 14px; }
.pp-col { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.pp-col button { white-space: nowrap; text-align: left; font: inherit; font-size: calc(13.5px * var(--fs, 1)); padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; transition: background .12s, color .12s; }
.pp-col button:hover { background: var(--hover); }
.pp-col button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.pp-custom { padding: 14px 16px; border-left: 1px solid var(--border); background: var(--hover); display: flex; flex-direction: column; gap: 10px; min-width: 250px; }
.pp-range { display: flex; flex-direction: column; gap: 8px; }
.pp-range label { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); }
.pp-range input { height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: var(--num); font-size: calc(13px * var(--fs, 1)); outline: none; }
.pp-range input:focus { border-color: var(--accent); }
.pp-time { display: none; width: 92px; }
.period-pop.with-time .pp-time { display: block; }
.pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.multi-count { margin-left: auto; font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); align-self: center; font-family: var(--num); }
.multi .pop-actions { margin-top: 8px; }
.combo { position: relative; }
.combo.open .combo-pop, .multi.open .multi-pop { display: block; animation: pop-in .18s var(--ease-out) both; }
.combo-list { max-height: 300px; }
.combo-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: calc(13px * var(--fs, 1));
  padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; }
.combo-opt:hover { background: var(--hover); }
.combo-opt.on { color: var(--accent-text); font-weight: 600; }
.combo-opt .ico { width: 14px; height: 14px; }
.filterbar .f > label { display: flex; align-items: baseline; gap: 6px; }
.filterbar select, .filterbar input[type="date"], .multi-btn { height: 42px; border-radius: 11px; }
.multi-btn:hover { border-color: var(--text-faint); }

@media (max-width: 900px) {
  .period-ctl { height: 46px; }
  .pc-main { min-width: 0; flex: 1; }
  .period-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; flex-direction: column; border-radius: 18px 18px 0 0; max-height: 85vh; overflow-y: auto;
    animation: sheet-in .28s var(--ease-out) both; padding-bottom: env(safe-area-inset-bottom); z-index: 120; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  .pp-presets { flex-wrap: wrap; }
  .pp-col { flex: 1 1 45%; min-width: 0; }
  .pp-custom { border-left: 0; border-top: 1px solid var(--border); }
  .f-period.open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 110; }
  .combo-pop, .multi-pop { width: 100%; }
}
/* lišta filtrov (a jej vyskakovacie panely) vždy nad obsahom zostavy */
.filterbar { position: relative; z-index: 40; }
.topbar { position: relative; z-index: 41; }

.station-card .tank-vals { flex-direction: column; gap: 1px; }
.station-card .tank-vals b { color: var(--text); font-weight: 600; font-size: calc(12px * var(--fs, 1)); }
.station-card .tank-vals span { font-size: calc(10.5px * var(--fs, 1)); white-space: nowrap; }

/* ---- 22. Farba aplikácie (výber používateľa, data-accent na <html>) ---- */
:root { --accent-shadow: color-mix(in srgb, var(--accent) 55%, transparent); }
[data-accent="blue"] { --accent: #3b82f6; --accent-2: #60a5fa; --accent-text: #7db2ff; --accent-soft: color-mix(in srgb, #3b82f6 15%, transparent);
  --accent-grad: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #1d4ed8 100%); }
[data-theme="light"][data-accent="blue"] { --accent-text: #1d5fd6; --accent-soft: color-mix(in srgb, #3b82f6 10%, transparent); }
[data-accent="green"] { --accent: #10b981; --accent-2: #34d399; --accent-text: #4ee0b0; --accent-soft: color-mix(in srgb, #10b981 15%, transparent);
  --accent-grad: linear-gradient(135deg, #34d399 0%, #10b981 45%, #047857 100%); }
[data-theme="light"][data-accent="green"] { --accent-text: #0b8a63; --accent-soft: color-mix(in srgb, #10b981 10%, transparent); }
[data-accent="orange"] { --accent: #f97316; --accent-2: #fb923c; --accent-text: #ffa45c; --accent-soft: color-mix(in srgb, #f97316 15%, transparent);
  --accent-grad: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #c2410c 100%); }
[data-theme="light"][data-accent="orange"] { --accent-text: #c2560c; --accent-soft: color-mix(in srgb, #f97316 10%, transparent); }
[data-accent="purple"] { --accent: #8b5cf6; --accent-2: #a78bfa; --accent-text: #b69cff; --accent-soft: color-mix(in srgb, #8b5cf6 15%, transparent);
  --accent-grad: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 45%, #6d28d9 100%); }
[data-theme="light"][data-accent="purple"] { --accent-text: #6d3ed8; --accent-soft: color-mix(in srgb, #8b5cf6 10%, transparent); }
[data-accent="teal"] { --accent: #14b8a6; --accent-2: #2dd4bf; --accent-text: #43d6c6; --accent-soft: color-mix(in srgb, #14b8a6 15%, transparent);
  --accent-grad: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 45%, #0f766e 100%); }
[data-theme="light"][data-accent="teal"] { --accent-text: #0d8276; --accent-soft: color-mix(in srgb, #14b8a6 10%, transparent); }
[data-accent="pink"] { --accent: #ec4899; --accent-2: #f472b6; --accent-text: #ff7ab9; --accent-soft: color-mix(in srgb, #ec4899 15%, transparent);
  --accent-grad: linear-gradient(135deg, #f472b6 0%, #ec4899 45%, #be185d 100%); }
[data-theme="light"][data-accent="pink"] { --accent-text: #c0266d; --accent-soft: color-mix(in srgb, #ec4899 10%, transparent); }
[data-accent="graphite"] { --accent: #64748b; --accent-2: #94a3b8; --accent-text: #b4c0d3; --accent-soft: color-mix(in srgb, #64748b 15%, transparent);
  --accent-grad: linear-gradient(135deg, #94a3b8 0%, #64748b 45%, #334155 100%); }
[data-theme="light"][data-accent="graphite"] { --accent-text: #475569; --accent-soft: color-mix(in srgb, #64748b 10%, transparent); }
/* prvky, ktoré mali farbu natvrdo, berú zvolenú farbu */
.mark { box-shadow: 0 8px 22px -6px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary { box-shadow: 0 8px 20px -8px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.2); }
.kpi-c0 { --kc: var(--accent); }
.plus { color: var(--accent-2); }
.progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.nav-item.active::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.bg-layer { background: radial-gradient(1200px 600px at 75% -10%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
  radial-gradient(900px 500px at 5% 105%, rgba(77, 159, 255, 0.07), transparent 55%), var(--bg); }
.sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%) 0%, var(--surface) 28%); }

/* panel Vzhľad */
.appear h4 { margin: 2px 0 8px; }
.seg { display: flex; padding: 3px; border-radius: 10px; background: var(--hover); border: 1px solid var(--border); margin-bottom: 14px; }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-dim); font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.seg button.on { background: var(--card-solid); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.seg .ico { width: 15px; height: 15px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-dim); font: inherit; font-size: calc(11.5px * var(--fs, 1)); cursor: pointer; transition: background .15s, border-color .15s; }
.swatch:hover { background: var(--hover); }
.swatch i { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  display: grid; place-items: center; transition: transform .2s var(--ease-spring); }
.swatch:hover i { transform: scale(1.1); }
.swatch.on { border-color: var(--border-strong); color: var(--text); font-weight: 600; }
.swatch.on i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

.nav-mine .nav-label { color: var(--accent-text); }

/* ---- 23. Preusporiadanie stĺpcov ---------------------------------------- */
.qg thead th[draggable="true"] { cursor: grab; }
.qg thead th.col-dragging { opacity: .45; }
.qg thead th.drop-before { box-shadow: inset 3px 0 0 var(--accent) !important; }
.qg thead th.drop-after { box-shadow: inset -3px 0 0 var(--accent) !important; }
.pop-hint { font-size: calc(12px * var(--fs, 1)); margin: -2px 2px 8px; }
.col-list { max-height: 340px; }
.col-row { display: flex; align-items: center; gap: 4px; padding: 2px 2px 2px 4px; border-radius: 7px; cursor: grab; }
.col-row:hover { background: var(--hover); }
.col-row.dragging { opacity: .4; }
.col-row label { flex: 1; padding: 5px 4px !important; }
.col-row label:hover { background: none !important; }
.col-row .grip { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.col-row button { border: 0; background: transparent; color: var(--text-dim); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.col-row button:hover:not(:disabled) { background: var(--hover); color: var(--accent-text); }
.col-row button:disabled { opacity: .25; cursor: default; }
.col-row button .ico { width: 14px; height: 14px; }

/* ---- 24. Prehľadnejšie menu --------------------------------------------- */
.nav { padding: 2px 12px 16px; }
.nav-search { margin: 4px 14px 12px; }
.nav-search kbd { margin-left: auto; }
.nav-search input { font-size: calc(13.5px * var(--fs, 1)); }
.nav-ico { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: var(--hover); color: var(--text-dim); transition: background .15s, color .15s; }
.nav-ico .ico { width: 15px; height: 15px; }
.nav-home { gap: 10px; padding: 6px 8px; font-size: calc(14px * var(--fs, 1)); }
.nav-home.active .nav-ico, .nav-group[open] > .nav-label .nav-ico { background: var(--accent-soft); color: var(--accent-text); }
.nav-section { margin: 18px 8px 6px; font-size: calc(11px * var(--fs, 1)); letter-spacing: 1.2px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.nav-section::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.nav-label { gap: 10px; padding: 6px 8px; margin: 1px 0; font-size: calc(14px * var(--fs, 1)); letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text); }
.nav-label-static { cursor: default; color: var(--text-dim); font-size: calc(12.5px * var(--fs, 1)); }
.nav-label-static:hover { background: none; }
.nav-gtitle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-count { font-family: var(--num); font-size: calc(11px * var(--fs, 1)); font-weight: 500; color: var(--text-faint); min-width: 18px; text-align: right; }
.nav-label .chev { margin-left: 0; }
details[open] > .nav-label { color: var(--text); }
.nav-items { position: relative; margin: 2px 0 8px 22px; padding-left: 12px; border-left: 1px solid var(--border); }
details[open] > .nav-items { animation: enter-fade .25s ease both; }
.nav-item { padding: 7px 10px; font-size: calc(13.5px * var(--fs, 1)); color: var(--text-dim); }
.nav-items .nav-item:hover { padding-left: 13px; }
.nav-favs .nav-item { padding-left: 46px; }
.nav-favs .nav-item:hover { padding-left: 49px; }
.nav-item.active { color: var(--accent-text); background: var(--accent-soft); }
.nav-items .nav-item.active::before { left: -16px; }
.nav-item small { font-size: calc(10.5px * var(--fs, 1)); }
/* pripravované zostavy skryté, kým ich používateľ nezapne */
.nav:not(.show-pending) .nav-item.pending, .nav:not(.show-pending) details.only-pending { display: none; }
.nav-item.pending small { color: var(--text-faint); font-style: italic; }
.nav-pending-toggle { margin: 16px 8px 4px; font-size: calc(12.5px * var(--fs, 1)); }
.nav-favs .nav-label .nav-ico { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.nav-mine .nav-label .nav-ico { background: var(--accent-soft); color: var(--accent-text); }

/* ---- 25. Čitateľnosť ---------------------------------------------------- */
body { font-size: calc(14.5px * var(--fs, 1)); line-height: 1.5; }
:root { --text-dim: #9ea4bc; --text-faint: #6c7290; }
[data-theme="light"] { --text: #161a28; --text-dim: #4a5068; --text-faint: #7b8197; }
.f > label, .kpi-label, .pv-zone-title, .pv-fgroup h5, .period-pop h5 { font-size: calc(11.5px * var(--fs, 1)); letter-spacing: .8px; }
.kpi-label { font-size: calc(12px * var(--fs, 1)); letter-spacing: .6px; }
.kpi-sub { font-size: calc(12.5px * var(--fs, 1)); }
.qg { font-size: calc(13.5px * var(--fs, 1)); }
.qg td.n, .qg tfoot td.n { font-size: calc(13px * var(--fs, 1)); }
.qg thead th { font-size: calc(13px * var(--fs, 1)); }
.qg th, .qg td { padding: 9px 13px; }
.grid-count, .pv-info { font-size: calc(13px * var(--fs, 1)); }
.subtitle { font-size: calc(13.5px * var(--fs, 1)); }
.block-title { font-size: calc(16px * var(--fs, 1)); }
.chart-box h3 { font-size: calc(13px * var(--fs, 1)); }
.pv { font-size: calc(13.5px * var(--fs, 1)); }
.pv td.n { font-size: calc(13px * var(--fs, 1)); }
.msg { font-size: calc(14px * var(--fs, 1)); line-height: 1.5; }
.btn { font-size: calc(14px * var(--fs, 1)); }
.btn-sm { font-size: calc(13px * var(--fs, 1)); }
:root { --sidebar-w: 292px; }

/* mobil: vysúvacie menu musí byť nad hornou lištou a filtrami */
@media (max-width: 900px) {
  .sidebar { z-index: 210; }
  body.menu-open .scrim { z-index: 200; }
}
@media (hover: none), (max-width: 900px) { .nav-search kbd { display: none; } }

/* ---- 26. Reset a potvrdzovacie okno ------------------------------------- */
.modal-wrap { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px;
  background: rgba(8, 10, 16, .45); backdrop-filter: blur(3px); animation: fade-in .18s ease both; }
.modal-wrap.out { animation: fade-out .18s ease both; }
@keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } }
.modal { width: min(440px, 100%); padding: 24px; background: var(--card-solid); text-align: center; animation: pop-in .25s var(--ease-spring) both; }
.modal-ico { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.modal-ico .ico { width: 22px; height: 22px; }
.modal h3 { font-size: calc(18px * var(--fs, 1)); margin-bottom: 8px; }
.modal p { color: var(--text-dim); font-size: calc(14px * var(--fs, 1)); margin: 0 0 20px; line-height: 1.55; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn { min-width: 130px; }
.appear-reset { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.appear-reset .btn { justify-content: flex-start; }
.btn.danger:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.tb-reset, [data-pv="reset"] { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); animation: chip-in .3s var(--ease-spring) both; }
.f-submit { display: flex; flex-direction: row; gap: 6px; }

.pp-col .pp-default { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); margin-top: 6px; }
.pp-default .ico { width: 14px; height: 14px; }
.bell-btn { position: relative; }
.bell-dot { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--err); color: #fff;
  font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); animation: dot-pop .5s var(--ease-spring) both; }

.tank-runout { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 7px; border-radius: 7px; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; }
.tank-runout .ico { width: 12px; height: 12px; }
.tank-runout.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.tank-runout.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.tank-runout.bad { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }

/* ---- 27. Upozornenia (zvonček) ------------------------------------------ */
.bell-dot.warn { background: var(--warn); color: #1b1f2e; }
.bell-btn.ring .ico { animation: ring 1.2s ease 1.5s 2; transform-origin: 50% 2px; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.alerts-pop { width: 400px; padding: 0; }
.al-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.al-head h4 { margin: 0; font-size: calc(15px * var(--fs, 1)); }
.al-head .pop-link .ico { width: 15px; height: 15px; }
.al-list { max-height: min(60vh, 460px); overflow-y: auto; padding: 0 8px; }
.al-item { display: flex; gap: 11px; padding: 10px 8px; border-radius: 10px; color: var(--text); position: relative; }
.al-item:hover { background: var(--hover); }
.al-item.new::after { content: ""; position: absolute; top: 14px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.al-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.al-ico .ico { width: 16px; height: 16px; }
.lv-err .al-ico { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.lv-warn .al-ico { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.lv-info .al-ico { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.al-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 10px; }
.al-body b { font-size: calc(13.5px * var(--fs, 1)); }
.al-body span { font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); line-height: 1.4; }
.al-item:not(.new) .al-body b { font-weight: 500; }
.al-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--text-dim); }
.al-empty .empty-ico { width: 30px; height: 30px; color: var(--ok); }
.al-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: calc(12px * var(--fs, 1)); }
@media (max-width: 720px) { .alerts-pop { width: auto; } }

/* ---- 28. Porovnanie ----------------------------------------------------- */
.f-cmp .seg-cmp { margin: 0; height: 42px; align-items: stretch; }
.seg-cmp label { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 8px; cursor: pointer;
  font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--text-dim); white-space: nowrap; transition: background .15s, color .15s; letter-spacing: 0; text-transform: none; }
.seg-cmp label.on { background: var(--card-solid); color: var(--accent-text); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.seg-cmp input { display: none; }
.qg tfoot tr.cmp-row td { font-weight: 500; color: var(--text-dim); border-top: 1px dashed var(--border); position: static; }
.delta { font-weight: 600; font-size: calc(12px * var(--fs, 1)); }
.delta.up { color: var(--ok); } .delta.down { color: var(--err); }
.kpi-delta { font-weight: 600; }
@media (max-width: 900px) { .f-cmp { width: 100%; } .seg-cmp label { padding: 0 6px; font-size: calc(12px * var(--fs, 1)); } }

/* ---- 29. Mapa staníc ---------------------------------------------------- */
.map-block { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.map-card { overflow: hidden; }
.map-canvas { height: calc(100vh - 230px); min-height: 460px; background: var(--hover); }
.map-loading { height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); padding: 20px; text-align: center; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i, .map-item i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 2px var(--card-solid); }
.map-legend b { color: var(--text); font-family: var(--num); }
.map-side { display: flex; flex-direction: column; max-height: calc(100vh - 160px); position: sticky; top: 12px; }
.map-side-head { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
.map-side-head .grid-search { max-width: none; }
.map-list { overflow-y: auto; padding: 6px; }
.map-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.map-item:hover { background: var(--hover); }
.map-item span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.map-item b { font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); }
.map-item small { font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); }
.map-item em { color: var(--text-faint); } .map-item em .ico { width: 14px; height: 14px; }
.map-geo { font-size: calc(12px * var(--fs, 1)); padding: 8px 12px; } .map-geo:empty { display: none; }
.map-pop { font-family: var(--font); font-size: calc(13px * var(--fs, 1)); min-width: 220px; }
.map-pop > b { display: block; font-size: calc(14px * var(--fs, 1)); margin-bottom: 4px; }
.map-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0; }
.map-pop dt { color: #6b7089; } .map-pop dd { margin: 0; text-align: right; font-family: var(--num); }
.map-tanks div { display: grid; grid-template-columns: 74px 1fr 40px 34px; align-items: center; gap: 6px; font-size: calc(12px * var(--fs, 1)); margin: 3px 0; }
.map-tanks .meter { min-width: 0; }
.map-tanks small { color: #6b7089; }
.leaflet-container { font-family: var(--font); background: var(--hover); }
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.75) invert(1) contrast(.9) hue-rotate(200deg) saturate(.35) brightness(.85); }
@media (max-width: 1000px) { .map-block { grid-template-columns: 1fr; } .map-side { position: static; max-height: 420px; } .map-canvas { height: 60vh; min-height: 320px; } }

/* výber obdobia: focus len pri klávesnici, aktívna voľba jasne odlíšená */
.pp-col button:focus { outline: none; }
.pp-col button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pp-col button:hover:not(.on) { background: var(--hover); color: var(--text); }
.pp-col button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }

/* ---- 30. Rýchle hľadanie (Ctrl+K) --------------------------------------- */
.cmdk-wrap { position: fixed; inset: 0; z-index: 450; background: rgba(5,7,12,.45); backdrop-filter: blur(3px); display: flex; justify-content: center;
  align-items: flex-start; padding: 12vh 16px 16px; animation: fade-in .15s ease both; }
.cmdk { width: min(640px, 100%); padding: 0; overflow: hidden; background: var(--card-solid); box-shadow: 0 30px 80px -10px rgba(0,0,0,.5);
  animation: pop-in .2s var(--ease-out) both; display: flex; flex-direction: column; max-height: 76vh; }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.cmdk-input .ico { width: 20px; height: 20px; }
.cmdk-input input { flex: 1; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: calc(16px * var(--fs, 1)); min-width: 0; }
.cmdk-list { overflow-y: auto; padding: 6px 8px 10px; }
.cmdk-group { font-size: calc(11px * var(--fs, 1)); letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); font-weight: 600; padding: 10px 8px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cmdk-item.on { background: var(--accent-soft); }
.cmdk-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--hover); color: var(--text-dim); flex-shrink: 0; }
.cmdk-item.on .cmdk-ico { background: var(--accent); color: #fff; }
.cmdk-ico .ico { width: 16px; height: 16px; }
.cmdk-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmdk-text b { font-weight: 600; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-text small { font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); }
.cmdk-text mark { background: none; color: var(--accent-text); font-weight: 800; }
.cmdk-go { width: 15px; height: 15px; color: var(--text-faint); opacity: 0; }
.cmdk-item.on .cmdk-go { opacity: 1; }
.cmdk-empty { padding: 26px; text-align: center; color: var(--text-dim); }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); }
.cmdk-foot kbd { margin: 0 2px; }
@media (max-width: 720px) { .cmdk-wrap { padding-top: 8px; } .cmdk-foot { display: none; } }

.kpi-value.kpi-text { font-family: var(--font); font-size: calc(17px * var(--fs, 1)); font-weight: 600; letter-spacing: 0; line-height: 1.3; }

.alerts-pop { width: 440px; }
.al-tabs { display: flex; gap: 4px; padding: 0 12px 10px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.al-tabs button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font: inherit; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; cursor: pointer; position: relative; }
.al-tabs button .ico { width: 13px; height: 13px; }
.al-tabs button b { font-family: var(--num); font-weight: 600; color: var(--text-faint); }
.al-tabs button.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.al-tabs button.on b { color: var(--accent-text); }
.al-tabs button.has-new::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.al-sec { padding-top: 6px; }
.al-sec-head { display: flex; align-items: center; gap: 7px; padding: 6px 8px 4px; font-size: calc(11px * var(--fs, 1)); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--text-faint); }
.al-sec-head .ico { width: 13px; height: 13px; }
.al-sec-head span { margin-left: auto; font-family: var(--num); }
.al-body em { display: inline-flex; align-items: center; gap: 2px; margin-top: 3px; font-style: normal; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--accent-text); opacity: 0; transition: opacity .15s; }
.al-body em .ico { width: 12px; height: 12px; }
.al-item:hover .al-body em { opacity: 1; }
@media (hover: none) { .al-body em { opacity: 1; } }
.al-item { padding-bottom: 10px; }
.al-body em { position: absolute; right: 10px; bottom: 8px; margin: 0; background: var(--card-solid); padding-left: 6px; }
.al-item:hover .al-body em { background: transparent; }
@media (hover: none) { .al-body em { position: static; margin-top: 3px; background: none; padding: 0; } }
.al-foot .pop-link { white-space: nowrap; }
.al-foot .dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 31. Nápoveda ------------------------------------------------------- */
.nav-help { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 14px; }
.nav-help:hover, .nav-help.active { color: var(--accent-text); }
.help { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; max-width: 1100px; }
.help-toc { position: sticky; top: 12px; display: flex; flex-direction: column; padding: 14px; gap: 2px; }
.help-toc b { font-size: calc(12px * var(--fs, 1)); letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.help-toc a { padding: 6px 8px; border-radius: 7px; color: var(--text-dim); font-size: calc(13.5px * var(--fs, 1)); }
.help-toc a:hover { background: var(--hover); color: var(--text); }
.help-body { display: flex; flex-direction: column; gap: 14px; }
.help-sec { padding: 18px 22px; scroll-margin-top: 16px; }
.help-sec h2 { display: flex; align-items: center; gap: 10px; font-size: calc(18px * var(--fs, 1)); margin-bottom: 10px; }
.help-sec h2 .ico { width: 20px; height: 20px; color: var(--accent-text); }
.help-sec p, .help-sec li { line-height: 1.65; color: var(--text); }
.help-sec ul { margin: 6px 0 0; padding-left: 20px; }
.help-sec li { margin: 4px 0; }
.kbd-ico .ico { width: 15px; height: 15px; vertical-align: -3px; color: var(--accent-text); }
@media (max-width: 900px) { .help { grid-template-columns: 1fr; } .help-toc { position: static; flex-direction: row; flex-wrap: wrap; } }

.al-head > span { display: inline-flex; gap: 4px; }
.al-empty .btn { margin-top: 10px; }
.al-empty .empty-ico.off { color: var(--text-faint); }
.al-settings { max-height: min(60vh, 460px); overflow-y: auto; padding: 0 12px 6px; }
.al-set { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 6px; border-radius: 9px; cursor: pointer; }
.al-set:hover { background: var(--hover); }
.al-set > span:first-child { display: flex; flex-direction: column; gap: 1px; }
.al-set b { font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; }
.al-set small { font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); line-height: 1.35; }
.al-set .switch { flex-shrink: 0; }

/* porovnanie v tabuľke */
.grid-cmp { padding: 12px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent); }
.cmp-periods { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-dim); margin-bottom: 10px; }
.cmp-periods span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-periods b { color: var(--text); }
.cmp-periods i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cmp-periods i.now, .cmp-bar.now { background: var(--accent); }
.cmp-periods i.was, .cmp-bar.was { background: var(--text-faint); }
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cmp-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-solid); }
.cmp-title { font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-dim); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-row { position: relative; display: flex; align-items: center; height: 22px; margin: 3px 0; font-family: var(--num); font-size: calc(12.5px * var(--fs, 1)); }
.cmp-row b, .cmp-row > span:last-child { position: relative; padding-left: 6px; }
.cmp-row small { color: var(--text-faint); font-size: calc(10.5px * var(--fs, 1)); }
.cmp-bar { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 5px; opacity: .22; transition: width .6s var(--ease-out); }
.cmp-card .delta { margin-top: 4px; font-size: calc(13px * var(--fs, 1)); }
.cell-delta { display: block; font-size: calc(10.5px * var(--fs, 1)); font-weight: 600; line-height: 1.1; margin-top: 1px; }
.cell-delta.up { color: var(--ok); } .cell-delta.down { color: var(--err); } .cell-delta.new { color: var(--info); }

.pv td.pv-cmp, .pv th.pv-cmp { color: var(--text-dim); font-size: calc(12.5px * var(--fs, 1)); }
.pv th.pv-cmp { font-weight: 500; }
.pv td.pv-delta { min-width: 74px; }
.delta.new { color: var(--info); }

/* ---- 32. Karta stanice -------------------------------------------------- */
.st-wrap { align-items: flex-start; overflow-y: auto; padding: 5vh 16px; }
.st-card { width: min(980px, 100%); position: relative; padding: 22px 24px 20px; }
.st-close { position: absolute; top: 12px; right: 12px; }
.st-load { display: flex; align-items: center; gap: 10px; padding: 30px; color: var(--text-dim); }
.st-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-right: 40px; }
.st-head h3 { font-size: calc(22px * var(--fs, 1)); margin: 0 0 2px; }
.st-head .dim { font-size: calc(13px * var(--fs, 1)); }
.st-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-grad); color: #fff; flex-shrink: 0; }
.st-ico .ico { width: 22px; height: 22px; }
.st-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.st-kpi { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--hover); display: flex; flex-direction: column; gap: 2px; }
.st-kpi-ico { color: var(--accent-text); } .st-kpi-ico .ico { width: 16px; height: 16px; }
.st-kpi small { font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.st-kpi b { font-family: var(--num); font-size: calc(19px * var(--fs, 1)); }
.st-kpi b i { font-style: normal; font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); }
.st-note { font-size: calc(12px * var(--fs, 1)); margin: 8px 2px 4px; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.st-box { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.st-box h4 { margin: 0 0 8px; font-size: calc(13px * var(--fs, 1)); color: var(--text-dim); }
.st-wide { grid-column: 1 / -1; }
.st-chart .chart-box { border: 0; padding: 0; background: none; min-height: 0; }
.st-chart .chart-canvas { height: 200px; }
.st-top { margin: 0; padding-left: 20px; }
.st-top li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: calc(13px * var(--fs, 1)); border-bottom: 1px solid var(--border); }
.st-top li b { font-family: var(--num); font-weight: 600; }
.st-tank { display: grid; grid-template-columns: 90px 1fr 42px 74px; align-items: center; gap: 8px; font-size: calc(12.5px * var(--fs, 1)); margin: 6px 0; }
.st-tank b { font-family: var(--num); text-align: right; } .st-tank small { color: var(--text-dim); }
.st-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 760px) { .st-kpis { grid-template-columns: repeat(2, 1fr); } .st-grid { grid-template-columns: 1fr; } .st-card { padding: 18px 14px; } }
.st-card { text-align: left; }
.st-kpi { align-items: flex-start; }
.st-box h4 { text-align: left; }

/* ikony zostáv v menu */
.nav-item { justify-content: flex-start; gap: 9px; }
.nav-item small { margin-left: auto; }
.nav-item-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); transition: color .15s, transform .2s var(--ease-spring); }
.nav-item:hover .nav-item-ico { color: var(--text-dim); transform: scale(1.12); }
.nav-item.active .nav-item-ico { color: var(--accent-text); }
.nav-items .nav-item { padding-left: 10px; }
.nav-items .nav-item:hover { padding-left: 13px; }
.nav-favs .nav-item { padding-left: 14px; }
.nav-favs .nav-item:hover { padding-left: 17px; }
.nav-items .nav-item.active::before { left: -16px; }
.group-link span { display: inline-flex; align-items: center; gap: 8px; }
.group-link .nav-item-ico { color: var(--text-faint); }

/* ---- 33. Login: dynamické pozadie --------------------------------------- */
body.login-page { background-color: #07090e; }
body.login-page::before { background: radial-gradient(1000px 600px at 50% 120%, rgba(7,9,14,0), rgba(7,9,14,.55)),
  linear-gradient(180deg, rgba(7,9,14,.35), rgba(7,9,14,.65)); z-index: 0; }
.login-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.aurora { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .5; mix-blend-mode: screen; will-change: transform; }
.aurora.a1 { background: radial-gradient(circle, #e63946 0%, transparent 65%); top: -25vmax; left: -15vmax; animation: drift1 34s ease-in-out infinite alternate; }
.aurora.a2 { background: radial-gradient(circle, #3b6fe6 0%, transparent 65%); bottom: -30vmax; right: -20vmax; opacity: .42; animation: drift2 41s ease-in-out infinite alternate; }
.aurora.a3 { background: radial-gradient(circle, #f5a742 0%, transparent 60%); top: 30%; left: 45%; width: 38vmax; height: 38vmax; opacity: .22; animation: drift3 29s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-22vmax, -12vmax) scale(.9); } }
@keyframes drift3 { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-80%, -20%) scale(1.3); } }
/* cesta: perspektívna mriežka, pomaly sa posúva k divákovi */
.road { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px; animation: road 6s linear infinite;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%); mask-image: linear-gradient(0deg, #000 10%, transparent 85%); }
@keyframes road { to { background-position: 0 64px; } }
/* svetlá áut: zriedka prejde tenký svetelný pás */
.streaks i { position: absolute; left: -40%; height: 2px; width: 34%; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,214,170,.55), rgba(255,255,255,.9)); filter: blur(.5px); box-shadow: 0 0 12px rgba(255,190,120,.5); }
.streaks i:nth-child(1) { top: 72%; animation: streak 9s 2s ease-in infinite; }
.streaks i:nth-child(2) { top: 80%; animation: streak 13s 6s ease-in infinite; background: linear-gradient(90deg, transparent, rgba(255,90,100,.5), rgba(255,120,120,.9)); box-shadow: 0 0 12px rgba(230,57,70,.5); }
.streaks i:nth-child(3) { top: 86%; animation: streak 11s 9.5s ease-in infinite; }
@keyframes streak { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: .9; } 30% { transform: translateX(420%); opacity: 0; } 100% { transform: translateX(420%); opacity: 0; } }
.grain { position: absolute; inset: -50%; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.login-wrap, .login-links { z-index: 2; }
.login-watermark { z-index: 1; }
/* karta: jemný svetelný okraj, ktorý pomaly obieha */
.login-card { isolation: isolate; }
.login-card .card-glow { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(230,57,70,.55) 80%, rgba(255,170,120,.6) 85%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glow-spin 8s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes glow-spin { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .aurora, .road, .streaks i, .login-card .card-glow { animation: none !important; } .streaks { display: none; } }
@media (max-width: 520px) { .aurora { filter: blur(60px); } .road { height: 40%; } }

/* ---- 34. Animácie (2. kolo) -------------------------------------------- */
/* 2) zvonček */
.bell-dot.bump { animation: bump .6s var(--ease-spring) 2; }
@keyframes bump { 50% { transform: scale(1.45); box-shadow: 0 0 0 2px var(--bg), 0 0 0 7px color-mix(in srgb, var(--err) 30%, transparent); } }
.bell-btn.ring-now .ico { animation: ring 1.1s ease 2; transform-origin: 50% 2px; }
/* 3) kostra tabuľky */
.skel { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--hover) 0%, color-mix(in srgb, var(--text-faint) 22%, transparent) 50%, var(--hover) 100%);
  background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 80ms); }
.qg td.r .skel { margin-left: auto; }
.qg-card .skel { margin: 7px 0; height: 12px; }
@keyframes skel { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.skel-row td { border-bottom-color: transparent; }
/* 4) nové riadky zo stanice */
.qg tbody tr.row-new td { animation: row-flash 1.8s ease both; }
@keyframes row-flash { 0% { background-color: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background-color: transparent; } }
/* 5) nádrže: vlniaca sa hladina, bublinky, nízka nádrž bliká */
.tank-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, white 28%), var(--c) 55%, color-mix(in srgb, var(--c) 82%, black 18%)); opacity: .92; overflow: visible; }
.tank-fill::before, .tank-fill::after { content: ""; position: absolute; left: 0; width: 200%; height: 10px; top: -7px;
  background: radial-gradient(10px 7px at 10px 0, transparent 9px, color-mix(in srgb, var(--c) 72%, white 28%) 9.5px) repeat-x; background-size: 20px 10px;
  animation: wave 3.2s linear infinite; }
.tank-fill::after { opacity: .45; top: -5px; animation-duration: 5s; animation-direction: reverse; }
@keyframes wave { to { transform: translateX(-50%); } }
.tank-gauge { overflow: hidden; }
.tank-fill i { position: absolute; bottom: 4px; left: calc(14% + var(--b) * 22%); width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: inset -1px -1px 0 rgba(0,0,0,.08); opacity: 0;
  animation: bubble 4.2s ease-in infinite; animation-delay: calc(var(--b) * 1.05s + var(--i, 0) * 0.3s); }
.tank-fill i:nth-child(2n) { width: 3px; height: 3px; }
@keyframes bubble { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 70% { opacity: .7; } 100% { transform: translate(4px, -70px); opacity: 0; } }
.tank.is-low .tank-gauge { animation: low-pulse 1.8s ease-in-out infinite; }
@keyframes low-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border-strong); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 35%, transparent); border-color: var(--err); } }
.tank-pct { z-index: 2; }
/* 6) záložky a menu */
.tab-panel.slide-r { animation: slide-r .38s var(--ease-out) both; }
.tab-panel.slide-l { animation: slide-l .38s var(--ease-out) both; }
@keyframes slide-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-l { from { opacity: 0; transform: translateX(-28px); } }
details[open] > .nav-items { animation: menu-down .28s var(--ease-out) both; transform-origin: top; }
@keyframes menu-down { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } }
/* 7) mapa – radarový pulz */
.map-pulse { pointer-events: none; }
.map-pulse span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); animation: radar 2.2s ease-out infinite; }
@keyframes radar { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
/* 8) pozdrav a naklápanie */
.topbar-title h1.typing::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 3px; vertical-align: -2px; background: var(--accent); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.kpi.tilt { transition: transform .08s linear, box-shadow .25s; box-shadow: 0 26px 50px -22px rgba(0,0,0,.45); }
.kpi { transform-style: preserve-3d; }
/* 9) fronta hotová */
.queue-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ok); animation: ok-pop .5s var(--ease-spring) both; }
.queue-ok .ico { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--ok); color: #fff; stroke-width: 3; }
@keyframes ok-pop { from { opacity: 0; transform: scale(.6); } }
.queue.collapse { animation: q-collapse .45s var(--ease-out) both; overflow: hidden; }
@keyframes q-collapse { to { opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tank-fill::before, .tank-fill::after, .tank-fill i, .map-pulse span, .skel, .tank.is-low .tank-gauge { animation: none !important; }
}

/* nádrže: rovná hladina (bez vĺn), bublinky len v palive */
.tank-fill { overflow: hidden; }
.tank-fill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; width: auto; height: 3px; background: rgba(255,255,255,.55);
  box-shadow: 0 1px 6px rgba(255,255,255,.35); animation: none; border-radius: 0; }
.tank-fill::after { display: none; }
.tank-fill i { bottom: 3px; animation-name: bubble-in; }
@keyframes bubble-in { 0% { bottom: 3px; opacity: 0; transform: translateX(0); } 12% { opacity: .85; } 50% { transform: translateX(3px); }
  85% { opacity: .6; } 100% { bottom: calc(100% - 9px); opacity: 0; transform: translateX(-2px); } }

/* ---- 35. Nádrže: jemné dynamické vlnky na hladine ------------------------
   Dve vrstvy "výrezov" vo farbe prázdnej nádrže s rôznou rýchlosťou a smerom
   → hladina sa jemne a nepravidelne hýbe (amplitúda ~3 px). */
.tank-gauge { background: var(--surface-2); }
.tank-fill::before, .tank-fill::after { content: ""; display: block; position: absolute; left: 0; top: -1px; width: 300%; height: 5px; border-radius: 0; box-shadow: none;
  background: radial-gradient(14px 4px at 14px 0, var(--surface-2) 99%, transparent 100%) repeat-x; background-size: 28px 5px; }
.tank-fill::before { animation: ripple 9s linear infinite, bob 4.6s ease-in-out infinite; }
.tank-fill::after { opacity: .55; background-size: 40px 5px; background-image: radial-gradient(20px 3px at 20px 0, var(--surface-2) 99%, transparent 100%);
  animation: ripple 14s linear infinite reverse, bob 6.2s ease-in-out infinite -2s; }
@keyframes ripple { to { transform: translateX(-33.333%); } }
@keyframes bob { 0%, 100% { top: -1px; } 50% { top: 0px; } }
.tank-fill { box-shadow: inset 0 3px 0 -1px rgba(255,255,255,.35); }
.tank.is-stale .tank-fill::before, .tank.is-stale .tank-fill::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .tank-fill::before, .tank-fill::after { animation: none !important; } }

/* ---- 36. Výraznejšie stĺpce v tabuľkách a pivotoch ---------------------- */
.qg th, .qg td { border-right: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.qg th:last-child, .qg td:last-child { border-right: 0; }
.qg thead th { background: color-mix(in srgb, var(--surface) 90%, var(--accent) 4%); border-bottom: 2px solid var(--border-strong); color: var(--text); }
.qg thead th .th-unit { color: var(--text-dim); }
.qg tfoot td { border-top: 2px solid var(--border-strong); }
.qg tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pv th, .pv td { border-right: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.pv thead th { background: color-mix(in srgb, var(--surface) 90%, var(--accent) 4%); border-bottom: 2px solid var(--border-strong); color: var(--text); }
.pv thead th.pv-ch { border-left: 1px solid var(--border-strong); }
.pv tfoot td, .pv tfoot th { border-top: 2px solid var(--border-strong); }
.pv tbody tr:nth-child(even) td, .pv tbody tr:nth-child(even) th.pv-rh { background-color: var(--zebra); }
.pv tbody tr:hover td, .pv tbody tr:hover th { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
[data-theme="light"] .qg th, [data-theme="light"] .qg td, [data-theme="light"] .pv th, [data-theme="light"] .pv td { border-right-color: rgba(20,24,40,.08); }

/* ---- 37. Login: denná doba + paralaxa ------------------------------------ */
.login-bg .px { position: absolute; inset: -6%; will-change: transform; transition: none; }
.login-bg .px-far { transform: translate3d(calc(var(--mx, 0) * -28px), calc(var(--my, 0) * -20px), 0); }
.login-bg .px-near { transform: translate3d(calc(var(--mx, 0) * 46px), calc(var(--my, 0) * 18px), 0); }
.login-watermark { transform: rotate(-6deg) translate3d(calc(var(--mx, 0) * 60px), calc(var(--my, 0) * 30px), 0); }
.login-card { transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0); }
/* farby svetiel podľa dennej doby */
body.login-page { --c1: #e63946; --c2: #3b6fe6; --c3: #f5a742; --base: #07090e; }
body.login-page[data-tod="dawn"]  { --c1: #ff7a59; --c2: #8b6cf0; --c3: #ffc46b; --base: #0d0a12; }
body.login-page[data-tod="day"]   { --c1: #3b8cff; --c2: #22c3b0; --c3: #9fd0ff; --base: #081019; }
body.login-page[data-tod="dusk"]  { --c1: #e63946; --c2: #8a3fd1; --c3: #ff8c42; --base: #0b0811; }
body.login-page[data-tod="night"] { --c1: #c81d2f; --c2: #1e3a8a; --c3: #e68a2e; --base: #05060a; }
body.login-page { background-color: var(--base); transition: background-color 1s; }
.aurora.a1 { background: radial-gradient(circle, var(--c1) 0%, transparent 65%); }
.aurora.a2 { background: radial-gradient(circle, var(--c2) 0%, transparent 65%); }
.aurora.a3 { background: radial-gradient(circle, var(--c3) 0%, transparent 60%); }
body.login-page[data-tod="day"] .aurora { opacity: .55; }
body.login-page[data-tod="night"] .aurora.a3 { opacity: .16; }
.login-eyebrow { transition: color 1s; }
body.login-page[data-tod="day"] .login-eyebrow { color: #7cc0ff; }
body.login-page[data-tod="dawn"] .login-eyebrow { color: #ffab8a; }

/* ---- 38. Nádrže: hladká SVG vlna (namiesto výrezov) --------------------- */
.tank-fill { overflow: visible; box-shadow: none; }
.tank-fill::before, .tank-fill::after { content: none; display: none; animation: none; }
.tank-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, white 22%), var(--c) 45%, color-mix(in srgb, var(--c) 85%, black 15%)); }
.tank-wave { position: absolute; left: 0; top: -7px; width: 200%; max-width: none; height: 8px; will-change: transform; pointer-events: none; }
.tank-wave path { fill: color-mix(in srgb, var(--c) 78%, white 22%); }
.tank-wave.w2 { top: -8px; height: 9px; opacity: .45; }
.tank-wave.w2 path { fill: color-mix(in srgb, var(--c) 60%, white 40%); }
@media (prefers-reduced-motion: no-preference) {
  .tank-wave { animation: tank-wave 3.4s linear infinite; }
  .tank-wave.w2 { animation: tank-wave 5.6s linear infinite reverse; }
}
@keyframes tank-wave { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tank.is-stale .tank-wave { animation: none; }
.tank-fill i { z-index: 1; }
.tank-pct { z-index: 3; }

/* ---- 39. Detail nádrže --------------------------------------------------- */
.tank-click { cursor: pointer; }
.tank.tank-click:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); }
.st-tank.tank-click { padding: 4px 6px; margin: 2px -6px; border-radius: 8px; }
.st-tank.tank-click:hover { background: var(--hover); }
.tk-card { width: min(1020px, 100%); }
.tk-stale { color: var(--warn); } .tk-online { color: var(--ok); }
.tk-top { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; margin-bottom: 14px; }
.tk-gauge-wrap .tank { padding: 0; border: 0; background: none; }
.tk-gauge-wrap .tank:hover { transform: none; box-shadow: none; }
.tk-gauge { height: 240px; margin: 0; border-radius: 18px; border-width: 2px; }
.tk-gauge .tank-pct { font-size: calc(30px * var(--fs, 1)); }
.tk-marks { position: absolute; right: 8px; top: 12px; bottom: 12px; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; }
.tk-marks i { width: 10px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 25%, transparent); }
.tk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.tk-fact { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--hover); display: flex; flex-direction: column; gap: 2px; }
.tk-fact small { font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); font-weight: 600; }
.tk-fact b { font-family: var(--num); font-size: calc(18px * var(--fs, 1)); } .tk-fact b i { font-style: normal; font-size: calc(11.5px * var(--fs, 1)); color: var(--text-dim); font-family: var(--font); }
.tk-fact.big b { font-size: calc(24px * var(--fs, 1)); color: var(--accent-text); }
.tk-runout { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; }
.tk-runout .ico { width: 24px; height: 24px; flex-shrink: 0; }
.tk-runout div { display: flex; flex-direction: column; }
.tk-runout b { font-size: calc(16px * var(--fs, 1)); } .tk-runout span { font-size: calc(12.5px * var(--fs, 1)); opacity: .85; }
.tk-runout.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.tk-runout.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.tk-runout.bad { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.tk-chart-box { margin-bottom: 12px; }
.tk-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; }
.tk-chart-head h4 { margin: 0; margin-right: auto; }
.tk-ranges { margin: 0; } .tk-ranges button { padding: 0 12px; height: 30px; font-size: calc(12.5px * var(--fs, 1)); }
.tk-toggles { display: flex; gap: 14px; }
.tk-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: calc(13px * var(--fs, 1)); color: var(--text-dim); margin-bottom: 6px; }
.tk-stats span { display: inline-flex; align-items: center; gap: 6px; } .tk-stats .ico { width: 15px; height: 15px; color: var(--accent-text); }
.tk-stats b { color: var(--text); font-family: var(--num); }
.tk-chart-wrap { position: relative; height: 300px; transition: opacity .2s; }
.tk-chart-wrap.loading { opacity: .45; }
.tk-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs, 1)); }
.tk-table th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border-strong); }
.tk-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); } .tk-table .r { text-align: right; } .tk-table .n { font-family: var(--num); color: var(--ok); font-weight: 600; }
.tk-deliv { max-height: 220px; overflow-y: auto; }
@media (max-width: 760px) { .tk-top { grid-template-columns: 1fr; } .tk-gauge { height: 180px; max-width: 220px; margin: 0 auto; } .tk-facts { grid-template-columns: repeat(2, 1fr); } .tk-chart-wrap { height: 240px; } }
.tk-ranges button { white-space: nowrap; }
.tk-fact.big b { color: var(--text); }
.tk-fact.wide { grid-column: span 2; }

/* ---- 40. Opravy pre mobil + pozdrav -------------------------------------- */
/* pozdrav */
.topbar-title h1.greet { animation: none; }
.greet .gl { display: inline-block; opacity: 0; transform: translateY(.45em) scale(.96); filter: blur(6px);
  animation: gl-in .55s var(--ease-out) forwards; }
@keyframes gl-in { to { opacity: 1; transform: none; filter: blur(0); } }
.greet .gl-name { background: linear-gradient(100deg, var(--accent-text) 0%, var(--accent-2) 40%, #fff 50%, var(--accent-text) 60%, var(--accent-text) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gl-in .55s var(--ease-out) forwards, name-shine 2.2s ease-in-out 1.4s 1 both; }
@keyframes name-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
[data-theme="light"] .greet .gl-name { background-image: linear-gradient(100deg, var(--accent-text) 0%, var(--accent) 40%, #ffd0d4 50%, var(--accent-text) 60%, var(--accent-text) 100%); }
.greet-hand { display: inline-block; margin-left: 8px; opacity: 0; transform-origin: 70% 75%;
  animation: hand-in .4s var(--ease-spring) forwards, hand-wave 1.4s ease-in-out 2; }
@keyframes hand-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes hand-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(14deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(10deg); } }

/* výber obdobia na mobile: panel zdola v <body> + stmavenie */
body > .period-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 320; display: flex; flex-direction: column;
  border-radius: 18px 18px 0 0; max-height: 86vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom);
  animation: sheet-in .28s var(--ease-out) both; }
body > .period-pop[hidden] { display: none; }
body.sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 310; background: rgba(0,0,0,.45); animation: fade-in .2s ease both; }
@media (max-width: 900px) { .f-period.open::after { display: none; } }

/* modálne okná (karta stanice, detail nádrže) na mobile – bez vodorovného posúvania */
.st-card, .tk-card { max-width: 100%; overflow-x: hidden; }
.tk-top > *, .st-grid > *, .tk-facts > * { min-width: 0; }
@media (max-width: 760px) {
  .st-wrap { padding: 8px; }
  .st-card, .tk-card { padding: 14px 12px; border-radius: 16px; }
  .st-head { gap: 10px; padding-right: 34px; }
  .st-head h3 { font-size: calc(18px * var(--fs, 1)); }
  .st-ico { width: 38px; height: 38px; border-radius: 11px; }
  .tk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tk-fact { padding: 9px 10px; } .tk-fact b { font-size: calc(16px * var(--fs, 1)); } .tk-fact.big b { font-size: calc(20px * var(--fs, 1)); }
  .tk-fact.wide { grid-column: 1 / -1; }
  .tk-chart-head { flex-direction: column; align-items: stretch; }
  .tk-ranges { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .tk-ranges button { padding: 0 4px; font-size: calc(12px * var(--fs, 1)); }
  .tk-toggles { justify-content: flex-start; }
  .tk-stats { font-size: calc(12px * var(--fs, 1)); gap: 4px 12px; }
  .tk-chart-wrap { height: 230px; margin: 0 -4px; }
  .tk-table { font-size: calc(12px * var(--fs, 1)); } .tk-table th, .tk-table td { padding: 6px 4px; }
  .st-links { justify-content: stretch; } .st-links .btn { flex: 1 1 auto; }
  .st-tank { grid-template-columns: 70px 1fr 38px 60px; }
}

/* ---- 41. Viacúrovňové zoskupenie ---------------------------------------- */
.qg tr.group .g-in { display: inline-flex; align-items: center; gap: 6px; padding-left: calc(var(--lvl, 0) * 22px); white-space: nowrap; }
.qg tr.group.g-lvl0 td { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-weight: 700; }
.qg tr.group.g-lvl1 td { background: color-mix(in srgb, var(--text) 3%, transparent); font-weight: 600; }
.qg tr.group.g-lvl2 td { font-weight: 500; }
.qg tr.group td .badge { font-weight: 600; }
.badge .ico { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }

.qg tr.group.g-lvl1 td { background: var(--surface-2); }
[data-theme="light"] .qg tr.group.g-lvl1 td { background: #f6f7fa; }

/* detail nádrže – ikony pri údajoch */
.tk-fact { flex-direction: row; align-items: center; gap: 11px; }
.tk-fact > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-fact-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; --ic: var(--accent); background: color-mix(in srgb, var(--ic) 14%, transparent); color: var(--ic); }
.tk-fact-ico .ico { width: 19px; height: 19px; }
.fi-fuel { --ic: var(--fuel, var(--accent)); } .fi-free { --ic: #8b93a8; } .fi-cap { --ic: #7c6cf0; } .fi-lvl { --ic: #14b8a6; }
.fi-temp { --ic: #f59e0b; } .fi-water { --ic: #3b82f6; } .fi-deliv { --ic: var(--ok); }
@media (max-width: 760px) { .tk-fact-ico { width: 32px; height: 32px; border-radius: 9px; } .tk-fact-ico .ico { width: 16px; height: 16px; } .tk-fact { gap: 8px; } }

.st-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.st-chart-groups .chart-canvas { height: 260px; }

/* ---- 42. Administrácia --------------------------------------------------- */
.nav-admin { margin-top: 18px; } .nav-admin + .nav-help { margin-top: 0; border-top: 0; padding-top: 6px; }
.adm { display: flex; flex-direction: column; gap: 16px; }
.adm-tabs .tab { display: inline-flex; align-items: center; gap: 7px; } .adm-tabs .tab .ico { width: 15px; height: 15px; }
.adm-panel { display: flex; flex-direction: column; gap: 16px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.adm-box { padding: 16px 18px; }
.adm-box h3 { display: flex; align-items: center; gap: 9px; font-size: calc(16px * var(--fs, 1)); margin: 0 0 10px; } .adm-box h3 .ico { width: 18px; height: 18px; color: var(--accent-text); }
.adm-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .adm-box-head h3 { margin: 0; }
.adm-hint { font-size: calc(13px * var(--fs, 1)); line-height: 1.5; margin: 6px 0 12px; }
.adm-scroll { max-height: 520px; overflow: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--fs, 1)); }
.adm-table th { text-align: left; font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--border-strong); position: sticky; top: 0; background: var(--card-solid); z-index: 1; }
.adm-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.adm-table .c { text-align: center; } .adm-table .r { text-align: right; }
.adm-table tr.ro td { opacity: .65; }
.adm-users th.c { font-size: calc(11px * var(--fs, 1)); max-width: 90px; white-space: normal; line-height: 1.2; text-align: center; }
.adm-user { display: flex; align-items: center; gap: 9px; } .adm-user div { display: flex; flex-direction: column; } .adm-user small { color: var(--text-dim); font-size: calc(12px * var(--fs, 1)); }
.dot-on, .dot-off { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-right: 6px; }
.dot-on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); animation: dot-pulse 2s ease-in-out infinite; }
.dot-off { background: var(--border-strong); }
@keyframes dot-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); } }
.adm-deny { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); cursor: pointer; display: inline-grid; place-items: center; transition: all .15s; }
.adm-deny .ico { width: 15px; height: 15px; }
.adm-deny.on { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.adm-deny:hover:not(:disabled) { transform: scale(1.08); } .adm-deny:disabled { cursor: not-allowed; }
.adm-hide-btn .ico { width: 14px; height: 14px; }
.adm-hide-pop { width: 340px; } .adm-hide-pop .pop-list { max-height: 380px; }
.adm-hide-pop label { display: flex; align-items: center; gap: 8px; }
.adm-hide-group { font-size: calc(11px * var(--fs, 1)); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); padding: 10px 6px 4px; }
.adm-reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.adm-rep-group h4 { font-size: calc(13px * var(--fs, 1)); margin: 0 0 6px; } .adm-rep-group h4 small { color: var(--text-faint); font-weight: 500; }
.adm-rep { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: calc(13.5px * var(--fs, 1)); }
.adm-rep:hover { background: var(--hover); } .adm-rep > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.adm-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.adm-mode { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; border: 2px solid var(--border); cursor: pointer; transition: border-color .15s, background .15s; }
.adm-mode input { display: none; } .adm-mode b { font-size: calc(14px * var(--fs, 1)); } .adm-mode small { font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); line-height: 1.35; }
.adm-mode.on, .adm-mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.adm-mode.disabled { cursor: default; opacity: .7; }
.adm-mode-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); color: var(--accent-text); margin-bottom: 4px; } .adm-mode-ico .ico { width: 18px; height: 18px; }
.adm-restore { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .adm-restore h4 { margin: 0; font-size: calc(14px * var(--fs, 1)); }
.adm-store { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
@media (max-width: 760px) { .adm-grid { grid-template-columns: 1fr; } .adm-modes { grid-template-columns: 1fr; } }

/* ---- 43. Klikateľné KPI a detaily ---------------------------------------- */
.kpi-click, .st-click { cursor: pointer; position: relative; }
.kpi-click::after, .st-click::after { content: "›"; position: absolute; right: 12px; bottom: 8px; font-size: calc(18px * var(--fs, 1)); color: var(--text-faint); transition: transform .2s, color .2s; }
.kpi-click:hover::after, .st-click:hover::after { color: var(--accent-text); transform: translateX(3px); }
.st-click:hover { border-color: var(--accent); background: var(--accent-soft); }
.dr-card { width: min(1060px, 100%); }
.dr-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dr-charts .chart-canvas { height: 240px; }
.dr-table-box { margin-bottom: 12px; }
.dr-table-box h4 small { font-weight: 500; }
.dr-scroll { max-height: 360px; overflow: auto; }
.dr-table tr.dr-click { cursor: pointer; } .dr-table tr.dr-click:hover td { background: var(--accent-soft); }
.dr-table .n { color: var(--text); font-weight: 500; }
.dr-go { width: 13px; height: 13px; margin-left: 6px; vertical-align: -2px; color: var(--text-faint); }
@media (max-width: 760px) { .dr-charts { grid-template-columns: 1fr; } }

.adm-users { max-height: calc(100vh - 290px); min-height: 360px; }
.adm-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-wide { grid-column: 1 / -1; }
.adm-chart .chart-box { border: 0; background: none; padding: 0; min-height: 0; }
.adm-chart .chart-canvas { height: 240px; }
@media (max-width: 900px) { .adm-charts { grid-template-columns: 1fr; } }

.adm-u { cursor: pointer; } tr.adm-u:hover td { background: var(--accent-soft); }
.adm-user.adm-u:hover b { color: var(--accent-text); text-decoration: underline; }
.adm-ud-deny { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }

/* úprava zostavy (servis) */
.adm-rep-act { display: inline-flex; align-items: center; gap: 8px; }
.adm-edit { width: 30px; height: 30px; } .adm-edit .ico { width: 15px; height: 15px; }
.adm-changed { font-style: normal; font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; margin-left: 6px; }
.adm-edit-modal { width: min(560px, 100%); text-align: left; }
.adm-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.adm-field > span { font-size: calc(12px * var(--fs, 1)); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim); }
.adm-field input, .adm-field select { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; }
.adm-field small { font-size: calc(12px * var(--fs, 1)); color: var(--text-faint); }
.adm-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 210px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; }
.adm-ic { height: 40px; border-radius: 9px; border: 1px solid transparent; background: var(--hover); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; }
.adm-ic .ico { width: 18px; height: 18px; } .adm-ic:hover { color: var(--accent-text); border-color: var(--border-strong); }
.adm-ic.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.adm-edit-modal .modal-actions { align-items: center; } .adm-edit-modal .modal-actions .btn .ico { width: 14px; height: 14px; }

.err-detail { margin-top: 10px; padding: 0; overflow: hidden; }
.err-detail summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 600; color: var(--text-dim); }
.err-detail summary .ico { width: 16px; height: 16px; }
.err-detail dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 0; padding: 4px 16px 16px; font-size: calc(13px * var(--fs, 1)); }
.err-detail dt { color: var(--text-dim); font-weight: 600; }
.err-detail dd { margin: 0; min-width: 0; }
.err-detail pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--mono); font-size: calc(12px * var(--fs, 1));
  white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; color: var(--text); }
.err-detail .btn { margin-top: 8px; }
@media (max-width: 760px) { .err-detail dl { grid-template-columns: 1fr; } }

.pp-days { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs, 1)); } .pp-days .ico { width: 14px; height: 14px; }

.adm-dl { display: grid; grid-template-columns: 200px 1fr; gap: 6px 12px; margin: 0 0 8px; font-size: calc(13.5px * var(--fs, 1)); }
.adm-dl dt { color: var(--text-dim); } .adm-dl dd { margin: 0; }
.adm-prepocet { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.adm-prepocet label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fs, 1)); color: var(--text-dim); font-weight: 600; }
.adm-prepocet input { height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; }

/* pivot: zoradenie klikom na hlavičku stĺpca */
.pv th.pv-sortable { cursor: pointer; user-select: none; }
.pv th.pv-sortable:hover { color: var(--accent-text); background: var(--hover); }
.pv th.pv-sortable.sorted { color: var(--accent-text); }
.pv th.pv-sortable.sorted::after { content: " ▼"; font-size: calc(10px * var(--fs, 1)); }
.pv th.pv-sortable.sorted.asc::after { content: " ▲"; }
.cell-unit { color: var(--text-faint); font-size: .86em; font-weight: 500; }

/* graf: nástroje (zobraziť všetko, export) */
.chart-tools { position: absolute; top: 8px; right: 10px; display: flex; gap: 6px; z-index: 2; opacity: .55; transition: opacity .15s; }
.chart-box:hover .chart-tools, .chart-tools:focus-within { opacity: 1; }
.chart-tool { height: 26px; min-width: 26px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  font: 600 calc(11.5px * var(--fs, 1)) var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.chart-tool:hover { color: var(--accent-text); border-color: var(--accent); }
.chart-tool .ico { width: 13px; height: 13px; }
.chart-box h3 { padding-right: 150px; }
@media (hover: none) { .chart-tools { opacity: 1; } }

.pv-help { margin-left: auto; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-size: calc(11px * var(--fs, 1)); font-weight: 700;
  background: var(--hover); color: var(--text-dim); cursor: help; position: relative; }
.pv-help:hover, .pv-help:focus { background: var(--accent-soft); color: var(--accent-text); outline: none; }
.pv-help:hover::after, .pv-help:focus::after { content: attr(data-help); position: absolute; right: 0; top: 22px; width: 280px; z-index: 30; padding: 10px 12px; border-radius: 10px;
  background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); color: var(--text); font-size: calc(12.5px * var(--fs, 1)); font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; white-space: normal; }
.pv-zone-title { display: flex; align-items: center; gap: 6px; }

.adm-look-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.adm-look-theme .ico { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.adm-look-accent { display: flex; flex-wrap: wrap; gap: 8px; }

/* nádrže: rezerva (mŕtva zásoba) */
.tank-res { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(255, 255, 255, .75); z-index: 3; pointer-events: auto; }
.tank-res::after { content: "rezerva"; position: absolute; right: 4px; top: -15px; font-size: calc(9.5px * var(--fs, 1)); font-weight: 700; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
[data-theme="light"] .tank-res { border-top-color: rgba(30, 41, 59, .55); }
[data-theme="light"] .tank-res::after { color: #334155; text-shadow: none; }
.tank-runres { margin-top: 3px; }
.tk-res-line { display: flex; align-items: center; gap: 5px; margin-top: 3px; } .tk-res-line .ico { width: 14px; height: 14px; }

/* import zoznamu do filtra */
.multi-actions [data-import] { display: inline-flex; align-items: center; gap: 4px; }
.multi-actions [data-import] .ico { width: 12px; height: 12px; }
.list-import { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.list-import textarea { width: 100%; resize: vertical; min-height: 84px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font: calc(12.5px * var(--fs, 1)) var(--mono); }
.list-import-row { display: flex; align-items: center; gap: 8px; } .list-import-row .btn .ico { width: 13px; height: 13px; }
.list-import-msg { font-size: calc(12px * var(--fs, 1)); line-height: 1.4; } .list-import-msg b { color: var(--accent-text); }

.adm-reserve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .adm-reserve { grid-template-columns: 1fr; } }

/* pivot: popis stĺpca (napr. čo obsahuje platba) */
.pv-qi { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; font: italic 700 calc(9.5px * var(--fs, 1)) Georgia, serif;
  background: var(--hover); color: var(--text-dim); vertical-align: 1px; flex-shrink: 0; }
.pv-field .pv-qi { margin-left: auto; }

.cell-sign.up { color: var(--ok); font-weight: 600; } .cell-sign.down { color: var(--err); font-weight: 600; }

/* načítavanie pri porovnaní / zmene filtra */
body.nav-loading::before { content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 35%; z-index: 9999; background: var(--accent);
  box-shadow: 0 0 8px var(--accent); animation: nav-bar 1.1s ease-in-out infinite; }
@keyframes nav-bar { 0% { left: -35%; } 100% { left: 100%; } }
body.nav-loading .content { opacity: .55; transition: opacity .2s; pointer-events: none; }
.cmp-wait, .cmp-loading, .pv-cmp-note { display: inline-flex; align-items: center; gap: 7px; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; color: var(--accent-text); }
.cmp-wait { margin-left: 10px; }
.cmp-loading { padding: 8px 12px; border-radius: 9px; background: var(--accent-soft); margin-bottom: 8px; }
.pv-cmp-note { margin-left: 10px; display: none; }
.pv-cmp-wait .pv-cmp-note { display: inline-flex; }
.pv-cmp-wait .pv-cmp { opacity: .55; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* pivot: počet kombinácií a čas výpočtu */
.pv-stat { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: var(--hover);
  border: 1px solid var(--border); font: 500 calc(12px * var(--fs, 1)) var(--font); color: var(--text-dim); white-space: nowrap; }
.pv-stat b { color: var(--text); font: 600 calc(12.5px * var(--fs, 1)) var(--font); }
.pv-stat i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }

.adm-st-list { max-height: 420px; }

/* veľkosť písma (Vzhľad › Písmo): násobí všetky veľkosti písma; rozloženie, okná a grafy ostávajú presné.
   "auto" = Safari na Macu väčšie (nastaví skript v hlavičke stránky) */
html[data-size="large"] { --fs: 1.12; }
html[data-size="xl"] { --fs: 1.25; }
/* Safari / macOS: plnšie písmo pri väčšej veľkosti (antialiased je na Retine tenké) */
html[data-size="large"] body, html[data-size="xl"] body { -webkit-font-smoothing: subpixel-antialiased; }

/* jednotné písmo: čísla všade s rovnako širokými číslicami (zarovnané pod sebou v stĺpcoch) */
body { font-variant-numeric: tabular-nums; }
.qg td.n, .pv td.n, .kpi-value { letter-spacing: 0; }
/* Vzhľad › Písmo: tri rovnaké stĺpce, písmeno nad názvom (nepretečie ani pri väčšom písme) */
.seg.seg-size { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.seg-size button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; min-width: 0; white-space: nowrap;
  font-size: calc(12px * var(--fs, 1)); line-height: 1.15; }
.seg.seg-size button span { margin: 0 !important; line-height: 1; }
/* okno Vzhľad: šírka rastie s veľkosťou písma; farby v 4 rovnakých stĺpcoch bez pretečenia */
.pop.appear { width: calc(300px * var(--fs, 1)); max-width: calc(100vw - 24px); }
.pop.appear .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pop.appear .swatch { min-width: 0; font-size: calc(11.5px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Novinky (Nápoveda) */
.nav-new { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: calc(10px * var(--fs, 1));
  font-weight: 700; letter-spacing: .3px; animation: pop-in .3s var(--ease-out) both; }
.help-news .news-rel { padding: 4px 0 12px; } .help-news .news-rel + .news-rel { border-top: 1px solid var(--border); padding-top: 14px; }
.help-news .news-date { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.help-news .news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.help-news .news-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.news-tag { flex-shrink: 0; min-width: 78px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: calc(11px * var(--fs, 1)); font-weight: 700; margin-top: 1px; }
.news-new { background: rgba(45, 212, 167, .14); color: var(--ok); }
.news-improved { background: rgba(77, 159, 255, .14); color: #4d9fff; }
.news-fixed { background: rgba(245, 179, 66, .16); color: var(--warn); }
.help-news .news-old { opacity: .8; }