* { box-sizing: border-box; }

/* Archivo — VÝHRADNĚ pro značku (wordmark). UI zůstává na Interu; záměna by byla
   redesign, ne aplikace manuálu. Latin + latin-ext podmnožina z Google Fonts,
   hostovaná lokálně: appka jinak nemá jediný externí požadavek a nemá smysl ho
   kvůli jednomu slovu zavádět. Soubor je variabilní (wght 100-900), proto jediný
   @font-face pro celý rozsah řezů. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("./fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("./fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — písmo rozhraní. Do 2026-07-29 byl jen ve font-stacku, ale nikde se
   nenačítal: kdo ho neměl nainstalovaný v systému (což je většina), viděl appku
   v systémovém groteskku, ne v tom, na čem stojí designový manuál. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — jen sloupce čísel. U proporcionálního Interu se řády mezi
   řádky neseřadí pod sebe; tabulková čísla to řeší. Latin-ext je tu kvůli
   českým textovým buňkám ve stejné tabulce (bez něj by se míchaly dva řezy). */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg: #08111f;
  --bg-soft: #0f172a;
  --panel: rgba(15, 23, 42, .86);
  --panel-strong: #111827;
  --border: rgba(148, 163, 184, .22);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --soft: #cbd5e1;
  --brand: #34d399;
  --brand-2: #60a5fa;
  --warn: #f59e0b;
  --bad: #fb7185;
  --shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --field: #0b1220;
  /* Zelená pro TEXT. V tmavém režimu je shodná s --brand (kontrast 9,9 : 1);
     ve světlém se rozchází — viz níž. Používej ji všude, kde je zelená písmem. */
  --brand-text: #34d399;
  /* Text a kresba NA zelené ploše. Nikdy bílá. */
  --brand-ink: #08111f;
  /* Kategoriální paleta grafů. Musí být tokeny, jinak se dva odstíny
     (fialová, tyrkysová) ve světlém režimu nepřebarví. */
  --chart-1: var(--brand);
  --chart-2: var(--brand-2);
  --chart-3: #a78bfa;
  --chart-4: var(--warn);
  --chart-5: var(--bad);
  --chart-6: #22d3ee;
  --chart-7: var(--muted);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef4fb;
  --bg-soft: #f8fafc;
  --panel: rgba(255, 255, 255, .9);
  --panel-strong: #ffffff;
  --border: rgba(15, 23, 42, .13);
  --text: #0f172a;
  --muted: #64748b;
  --soft: #334155;
  --brand: #059669;
  --brand-2: #2563eb;
  --warn: #d97706;
  --bad: #e11d48;
  --shadow: 0 24px 80px rgba(15, 23, 42, .12);
  --field: #ffffff;
  /* --brand #059669 nesplňuje AA pro text pod 18 px: 3,77 : 1 na bílé, 3,40 na
     --bg, 3,60 na --bg-soft. A zelená je tu použitá na .eyebrow (11 px) a na
     hodnoty úspory. #047857 dává 5,48 / 4,95 / 5,24 — nad 4,5 na všech třech.
     #059669 zůstává jen na plochy, rámy a ikony, kde platí mírnější 3 : 1. */
  --brand-text: #047857;
  --chart-3: #7c3aed;
  --chart-6: #0891b2;
}

body {
  margin: 0;
  min-height: 100vh;
  /* iOS PWA (standalone) kreslí obsah pod stavový řádek s hodinami — bez
     horního odsazení se text při skrolu míchá s hodinami (screenshoty
     uživatele 8. 8. 2026). V prohlížečích je env() nula, takže se nic nemění.
     Vyžaduje viewport-fit=cover v <meta name="viewport"> (modern.html,
     forecast.html) — bez něj iOS env() hodnoty nevyplní. */
  padding-top: env(safe-area-inset-top);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(52, 211, 153, .16), transparent 34rem),
    radial-gradient(circle at top right, rgba(96, 165, 250, .18), transparent 32rem),
    var(--bg);
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow {
  margin: 0 0 6px;
  color: var(--brand-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px clamp(14px, 3vw, 32px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px);
  transition: transform .22s ease, padding .22s ease, box-shadow .22s ease;
}

/* modern.html: hlavička už neplave — roli sticky prvku přebírá .appnav.
   forecast.html používá .mnav beze změny, proto modifikátor. */
.mnav-slim {
  position: static;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  padding-bottom: 6px;
}

.mnav.nav-compact {
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.mnav.nav-hidden {
  transform: translateY(-100%);
}

.mnav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Značka „Slash". Rádius 25 % hrany je součást konstrukce loga (mřížka 24 j,
   rádius 6 j) — proto procento, ne pixel z rádiusové stupnice UI: musí držet
   tvar v 42 px i v 56 px. Gradient a monogram „CE" jsou pryč, ikona je jediný
   barevný prvek v hlavičce. */
.mnav-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 25%;
  background: var(--brand);
  color: var(--brand-ink);
}
.mnav-mark svg { width: 64.3%; height: 64.3%; display: block; }
.mnav-mark-lg { width: 56px; height: 56px; }

/* Wordmark se sází živě z Archiva, aby zůstal ostrý a editovatelný.
   Jen na přihlašovací obrazovce — v hlavičce appky ho nahrazuje název vozidla. */
.wordmark {
  font-family: 'Archivo', Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.045em;
}

.mnav h1 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.mnav p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.mnav-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.m-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.mnav .m-input { width: auto; min-width: 150px; }
.m-input:focus { border-color: color-mix(in srgb, var(--brand-2) 70%, var(--border)); box-shadow: 0 0 0 3px rgba(96, 165, 250, .16); }

.m-btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  /* Plochá zelená, ne gradient. Tyrkysová #22d3ee ze staré verze nemá význam —
     signální barvy patří datům; v grafech zůstává jako 6. slot (--chart-6). */
  background: var(--brand);
  color: #04131f;
  padding: 10px 14px;
  font-weight: 800;
}

.m-btn.ghost {
  background: color-mix(in srgb, var(--panel-strong) 76%, transparent);
  border-color: var(--border);
  color: var(--text);
}
.m-btn.danger {
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  border-color: color-mix(in srgb, var(--bad) 45%, var(--border));
  color: var(--bad);
}

/* Label použitý jako tlačítko (výběr fotek) musí mít ruku jako kurzor. */
label.m-btn { cursor: pointer; }
/* Atribut hidden (sekce bez detailu skrývají „Rozšířený pohled") prohrává s display
   výše — stejná past, kterou už řešil .cons-tip[hidden] na řádku ~1375. */
.m-btn[hidden] { display: none; }

/* Průběh čtení fotek — <label> nejde `disabled`, tak blokujeme klikání třídou. */
.m-btn.is-busy { opacity: 0.6; pointer-events: none; }

/* Vizuálně skryté, ale pro prohlížeč stále "živé" (na rozdíl od display:none,
   které na iOS Safari rozbije otevření file pickeru). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.modern-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 22px clamp(12px, 3vw, 32px) 80px;
}

/* === Hlavní navigace: desktop = lišta tabů nahoře (sticky), mobil = pevná lišta dole === */
.appnav {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
}

.appnav-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 8px clamp(14px, 3vw, 32px);
}

.appnav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 800;
}

.appnav-item svg { width: 18px; height: 18px; }
.appnav-item:hover { color: var(--text); border-color: var(--border); }
.appnav-item.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); }

.appnav-add {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  border-radius: 14px;
  background: var(--brand);
  color: #04131f;
  box-shadow: 0 10px 26px rgba(52, 211, 153, .3);
}

.appnav-add svg { width: 20px; height: 20px; }
.appnav-add:active { transform: scale(.96); }

/* === Rozcestník sekcí na domovské === */
.hub-cap { margin: 20px 2px 10px; }

.hub-list { display: grid; gap: 10px; }

.hub-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 14px;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  transition: transform .16s ease, border-color .16s ease;
}

.hub-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-2) 55%, var(--border));
}

.hub-card:active { transform: scale(.99); }

.hub-ic {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}

.hub-ic.blue { background: color-mix(in srgb, var(--brand-2) 13%, transparent); color: var(--brand-2); }
.hub-ic.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.hub-ic svg { width: 21px; height: 21px; }

.hub-card strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.hub-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.4; }

.hub-val { text-align: right; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.hub-val small { display: block; font-weight: 600; font-size: 11px; color: var(--muted); }
.hub-chev { color: var(--muted); font-weight: 900; opacity: .7; }

@media (min-width: 900px) {
  .hub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === Pohled sekce === */
.section-topbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 12px;
}

.section-shell .panel-body { padding-top: 6px; }

/* === Menu === */
.menu-panel .panel-head { padding-bottom: 4px; }
.menu-list { padding: 4px 8px 10px; }

.menu-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  padding: 15px 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { color: var(--brand-text); }
.menu-chev { color: var(--muted); font-weight: 900; }

/* === Spodní menu „+" (action sheet) === */
.add-sheet { grid-template-columns: 1fr; align-items: end; justify-items: center; }
.add-sheet .drawer-backdrop { grid-row: 1; grid-column: 1; }

.sheet-card {
  grid-row: 1;
  grid-column: 1;
  width: min(100%, 520px);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}

.sheet-grip {
  width: 42px;
  height: 4px;
  border-radius: 4px;
  margin: 2px auto 12px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
}

.sheet-act {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--text);
  padding: 11px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}

.sheet-act.primary {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
}

.sheet-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
}

.sheet-ic svg { width: 22px; height: 22px; }
.sheet-txt strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.sheet-txt span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); font-weight: 500; }

.sheet-cancel {
  width: 100%;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  padding: 10px;
}

/* === Toast průběhu čtení fotek (viditelný i se zavřeným formulářem) === */
.scan-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 45;
  margin: 0;
  max-width: min(92vw, 460px);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.kpi-card {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  padding: 20px;
  text-align: left;
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-2) 60%, var(--border));
  box-shadow: var(--shadow);
}

.kpi-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.kpi-value { margin-top: 14px; font-size: clamp(23px, 3vw, 34px); font-weight: 900; letter-spacing: -.04em; line-height: 1.12; }
.kpi-sub { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 92%; }
/* Dekorativní zelený kruh v rohu (.kpi-card::after) je pryč: nenesl informaci
   a snižoval čitelnost čísla, které je na KPI kartě to jediné důležité. */
/* Signál „klikni pro detail" */
.kpi-card::before {
  content: "›";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  color: color-mix(in srgb, var(--brand) 75%, var(--muted));
  opacity: .6;
}
.kpi-card:active { transform: scale(.985); }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.panel {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 16px 54px rgba(0, 0, 0, .12);
  overflow: hidden;
}

.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-12 { grid-column: span 12; }

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 20px 20px 14px;
}

.panel h3 { margin: 0; font-size: 19px; letter-spacing: -.03em; }

.panel-body { padding: 2px 20px 20px; }
.panel-body.collapsed { max-height: 210px; overflow: hidden; mask-image: linear-gradient(#000 70%, transparent); }

.metric-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, auto);
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.metric-row:last-child { border-bottom: 0; }
.metric-row strong { display: block; font-size: 15px; line-height: 1.4; }
.metric-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.metric-value { text-align: right; font-weight: 900; color: var(--text); }

.bar-list { display: grid; gap: 14px; margin-top: 12px; }
.bar-row { display: grid; gap: 6px; }
.bar-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); }
.bar-fill { height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
}
.segmented button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}
.segmented button.active { background: var(--brand); color: #04131f; }

/* === Deníková historie === */
.journal-list { display: grid; gap: 8px; }

.journal-group {
  margin: 14px 2px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-group:first-child { margin-top: 2px; }

.journal-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-strong) 58%, transparent);
  padding: 12px 14px;
}

.journal-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
.journal-ic svg { width: 19px; height: 19px; }
.journal-ic.tone-ac { background: color-mix(in srgb, var(--brand-2) 13%, transparent); color: var(--brand-2); }
.journal-ic.tone-dc { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.journal-ic.tone-fuel,
.journal-ic.tone-expense { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--soft); }

.journal-main { min-width: 0; }

.journal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.journal-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.02em;
  min-width: 0;
}
.journal-title small { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 1px; }
.journal-mode {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.journal-amount { font-weight: 800; white-space: nowrap; font-size: 14px; }

.journal-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.journal-day { font-weight: 700; }
.journal-day.is-fresh { color: var(--brand-text); }

.journal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--soft);
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.chip--good { border-color: color-mix(in srgb, var(--brand) 38%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-text); }
.chip--warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 13%, transparent); color: var(--warn); }
.chip--note { font-weight: 500; font-style: italic; }

.journal-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 720px) {
  .journal-item { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .journal-ic { width: 34px; height: 34px; }
  .journal-ic svg { width: 17px; height: 17px; }
  /* Akce pod obsah, přes celou šířku pravého sloupce — na mobilu nepřekáží. */
  .journal-actions {
    grid-column: 2;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 9px;
  }
  .journal-title { font-size: 15px; }
}

.history-list { display: grid; gap: 10px; }
.history-expand {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.history-expand:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.history-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-strong) 58%, transparent);
  padding: 12px;
}
.history-date { color: var(--muted); font-size: 12px; }
.history-title { font-weight: 800; }
.history-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.pill { display: inline-flex; border-radius: 999px; background: color-mix(in srgb, var(--brand-2) 15%, transparent); color: var(--brand-2); padding: 5px 9px; font-size: 12px; font-weight: 800; }
.mem-badge { display: inline-block; border-radius: 999px; background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); padding: 1px 8px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.mini-action {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}
.mini-action:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); }
.mini-action.danger { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); }
.mini-action.danger:hover { border-color: color-mix(in srgb, #ef4444 55%, var(--border)); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 560px);
}
body.drawer-open { overflow: hidden; }

.detail-drawer {
  grid-template-columns: minmax(24px, 1fr) minmax(720px, 1120px);
}

.record-drawer {
  grid-template-columns: 1fr minmax(320px, 560px);
}
.drawer-backdrop { background: rgba(2, 6, 23, .68); backdrop-filter: blur(6px); }

/* Kontrola načtených fotek — na rozdíl od bočního draweru je vycentrovaná,
   aby se přehled na mobilu nedal přehlédnout (dřív to byl jen řádek v formuláři). */
.scan-modal { grid-template-columns: 1fr; place-items: center; padding: 14px; }
.scan-modal .scan-card {
  height: auto;
  max-height: 88vh;
  width: min(100%, 620px);
  border: 1px solid var(--border);
  border-radius: 24px;
}
/* Lišta akcí drží u spodní hrany modalu — na mobilu je seznam relací dlouhý a
   tlačítka se dřív zalomila mimo obrazovku, takže "Načíst a uložit" nebylo vidět. */
.scan-actions {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px -20px -20px;
  padding: 12px 20px 20px;
  background: var(--panel-strong);
  border-top: 1px solid var(--border);
}
.scan-actions .m-btn { flex: 1 1 130px; }
/* Hlavní akce dostane vlastní řádek, ať se nikam nezasune. */
#scanReviewSave { flex: 1 1 100%; order: -1; }
.scan-session {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--panel);
}
.scan-session-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.scan-session-head strong { font-size: 15px; }
.scan-session-head span { color: var(--muted); font-size: 12px; }
.scan-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.scan-kv dt { color: var(--muted); }
.scan-kv dd { margin: 0; font-weight: 700; text-align: right; }
.scan-kv dd.missing { color: var(--bad); font-weight: 600; }
/* Ikona uvnitř tlačítka — dědí barvu textu, tah 1,8 dle manuálu. */
.btn-ic { width: 18px; height: 18px; flex: none; }
/* Stavová hláška: ikona vlevo, text vedle ní. Emoji jsou pryč — signál nese
   ikona a barva rámu.
   POZOR: flex, ne grid se dvěma sloupci. Stejnou třídu nosí i živá nápověda
   „SoC při příjezdu", která se přepisuje přes textContent (bez ikony a bez
   <span>) — v gridu by se holý text nacpal do 18px sloupce pro ikonu. */
.scan-msg { display: flex; gap: 8px; align-items: flex-start; border-radius: 8px; padding: 9px 12px; margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
/* Autorské `display: flex` výš přebíjí UA pravidlo `[hidden] { display: none }`,
   takže bez tohohle svítí prázdný barevný pruh i u skryté hlášky. Potkalo to už
   .m-btn (ř. 273) i .cons-tip (ř. 1726); křížová kontrola telemetrie
   (#chargeTelemetryCheck) je třetí případ — ve formuláři je hlášku vidět jen při
   rozporu, takže skrytý stav je ten OBVYKLÝ. */
.scan-msg[hidden] { display: none; }
.scan-msg > span { min-width: 0; }
.scan-msg svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.scan-msg.warn svg { color: var(--warn); }
.scan-msg.bad svg { color: var(--bad); }
.scan-msg.ok svg { color: var(--brand-text); }
.scan-msg.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent); }
.scan-msg.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 42%, transparent); }
.scan-msg.ok { background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent); }
.scan-reset-opt {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  cursor: pointer;
}
.scan-note { color: var(--muted); font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
/* Ručně doplňovaný údaj v přehledu skenu (SoC při příjezdu) — na řádek se štítkem,
   stejná mřížka jako .scan-kv, ať navazuje na přečtené hodnoty nad ním. */
.scan-manual-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
}
.scan-manual-row label { color: var(--muted); }
.scan-manual-row input { text-align: right; font-weight: 700; padding: 6px 10px; }
.drawer-card {
  /* Explicitní vrstva NAD backdropem: backdrop-filter na .drawer-backdrop
     zakládá stacking context a bez z-indexu karty pak rozmazával i obsah
     karty, jakmile se na mobilu překrývají v téže grid buňce. */
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: auto;
  background: var(--panel-strong);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 20px;
  min-width: 0;
}
.drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin: -20px -20px 16px;
  padding: 20px;
  background: var(--panel-strong);
  border-bottom: 1px solid var(--border);
}
.drawer h2 {
  margin: 0;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

#drawerContent {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.detail-section {
  display: grid;
  gap: 12px;
}

.detail-field {
  margin-bottom: 14px;
}
.detail-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--soft);
}
.detail-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.detail-input {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--text);
}
.detail-input:focus {
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 1px;
}
.detail-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.detail-subhead {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--soft);
}
.forecast-page-link {
  margin: 0 0 16px;
}

.detail-section h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.02em;
}

/* Souhrnná zpráva nad BMS dashboardem. Nejde o "health score": každý verdikt
   zobrazuje i datovou oporu a jistotu, detailní metriky zůstávají pod ní. */
.obd-report {
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.obd-topics { display: grid; gap: 10px; }
.obd-topic,
.obd-reading-manage {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  overflow: clip;
}
.obd-topic > summary,
.obd-reading-manage > summary {
  cursor: pointer;
  padding: 13px 15px;
  color: var(--soft);
  font-weight: 800;
}
.obd-topic[open] > summary,
.obd-reading-manage[open] > summary { border-bottom: 1px solid var(--border); }
.obd-topic-content,
.obd-reading-manage > article { padding: 14px; }
.obd-topic-content > .detail-section > h3:first-child { display: none; }

.obd-report-head,
.obd-report-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.obd-report-status,
.obd-report-verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.obd-report-status {
  padding: 6px 10px;
}

.obd-report-status::before,
.obd-report-verdict::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
}

.obd-report-status.ok,
.obd-report-verdict.ok {
  color: var(--brand-text);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.obd-report-status.watch,
.obd-report-verdict.watch {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.obd-report-status.insufficient,
.obd-report-verdict.insufficient,
.obd-report-verdict.info {
  color: var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 12%, transparent);
}

.obd-report-verdict {
  padding: 4px 8px;
}

.obd-report-lead,
.obd-report-kpi {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.obd-report-lead {
  display: grid;
  gap: 7px;
  padding: 18px 20px;
  border-radius: 18px;
}

.obd-report-lead > strong {
  font-size: 16px;
}

.obd-report-lead p,
.obd-report-callout p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.55;
}

.obd-report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.obd-report-kpi {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 15px 16px;
  border-radius: 14px;
}

.obd-report-kpi > span,
.obd-report-kpi > small {
  color: var(--muted);
  font-size: 12px;
}

.obd-report-kpi > strong {
  font-size: 20px;
  line-height: 1.25;
}

.obd-report-subhead h4 {
  margin: 0;
  font-size: 14px;
}

.obd-report-trends {
  display: grid;
  gap: 10px;
}

.obd-report-callout {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border-left: 3px solid var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 7%, transparent);
  border-radius: 0 12px 12px 0;
}

.obd-report-callout.watch {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

.obd-report-callout > strong {
  font-size: 13px;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.2fr);
  gap: 22px;
  align-items: start;
  min-width: 0;
}

.detail-summary,
.detail-visual {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  padding: 20px 24px;
  min-width: 0;
  overflow: hidden;
}

.detail-summary .metric-row {
  grid-template-columns: minmax(0, 1fr) minmax(110px, max-content);
  column-gap: 18px;
}

.detail-summary .metric-value {
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
}

.detail-bars {
  display: flex;
  align-items: end;
  gap: 12px;
  min-height: 300px;
  max-width: 100%;
  padding: 14px 6px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.detail-bar {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 8px;
  min-width: 76px;
  flex: 1;
  height: 100%;
  text-align: center;
  min-height: 280px;
}

.detail-bar-col {
  align-self: end;
  height: var(--h, 0%);
  min-height: 8px;
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 32px rgba(52, 211, 153, .16);
}

.detail-bar-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.detail-bar-value {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.donut-wrap {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.donut {
  display: grid;
  place-items: center;
  width: min(220px, 100%);
  aspect-ratio: 1;
  height: auto;
  border-radius: 999px;
  position: relative;
  justify-self: center;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 32px;
  border-radius: inherit;
  background: var(--panel-strong);
}

.donut span {
  position: relative;
  z-index: 1;
  max-width: 132px;
  text-align: center;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.donut-legend {
  display: grid;
  gap: 9px;
}

.donut-legend div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(72px, auto);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
}

.donut-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.donut-legend span,
.donut-legend strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.donut-legend strong {
  color: var(--text);
  text-align: right;
}
.detail-empty { margin: 0; padding: 14px; }

.detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.detail-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.detail-table th,
.detail-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
}

.detail-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.detail-table td {
  color: var(--text);
  font-weight: 700;
}

/* Číselné sloupce monospace s tabulkovými číslicemi — u proporcionálního Interu
   se řády mezi řádky neseřadí pod sebe a sloupec se čte hůř. První sloupec je
   ve všech tabulkách popisek, ten zůstává v Interu. */
.detail-table td:not(:first-child),
.metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.detail-table td:not(:first-child) { font-weight: 500; }
.metric-value { font-weight: 700; letter-spacing: -.01em; }

.detail-table tr:last-child td {
  border-bottom: 0;
}

.record-tabs { margin-bottom: 14px; }
.record-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.record-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.record-form .span-2, .span-2 { grid-column: 1 / -1; }
.record-advanced {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-strong) 64%, transparent);
  overflow: clip;
}
.record-advanced > summary {
  cursor: pointer;
  padding: 13px 14px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}
.record-advanced[open] > summary { border-bottom: 1px solid var(--border); }
.record-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}
.record-form-actions {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: 4px -20px -20px;
  padding: 12px 20px max(20px, env(safe-area-inset-bottom));
  background: var(--panel-strong);
  border-top: 1px solid var(--border);
}
.record-form-actions .form-summary { grid-column: auto; }
.record-form-actions .m-btn { width: 100%; }
.form-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.form-error { min-height: 1.25em; margin: 0; color: var(--bad); font-size: 13px; line-height: 1.45; }
.context-fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-strong) 64%, transparent);
  margin: 0;
  padding: 12px;
}
.context-fieldset legend {
  padding: 0 6px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}
.m-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.m-check input {
  width: auto;
}
.form-summary {
  grid-column: 1 / -1;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  padding: 10px 12px;
  font-size: 13px;
}
.service-list { display: grid; gap: 10px; margin-bottom: 18px; }
.service-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.service-item p { margin: 4px 0; color: var(--muted); font-size: 13px; }
.service-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.service-status { font-weight: 800; }
.service-status.ok { color: var(--brand-text); }
.service-status.warn { color: var(--warn); }
.service-status.bad { color: var(--bad); }

.loading {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  gap: 12px;
  background: var(--bg);
  color: var(--muted);
}
.spinner {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 4px solid color-mix(in srgb, var(--muted) 20%, transparent);
  border-top-color: var(--brand);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .mnav { grid-template-columns: 1fr; }
  .mnav-controls { justify-content: flex-start; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-5, .span-6, .span-7 { grid-column: span 12; }
}

@media (max-width: 720px) {
  .mnav {
    position: static;
    grid-template-columns: 1fr;
    padding: 8px 10px;
    gap: 8px;
  }
  .mnav-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 7px;
  }
  .mnav .m-input, .mnav .m-btn { width: 100%; min-width: 0; }
  .mnav-controls .m-input { grid-column: 1 / -1; }
  .mnav-controls a { grid-column: span 2; }
  /* modern.html: dva výběry vedle sebe, případný kontextový filtr přes celou šířku */
  .mnav-slim .mnav-controls .m-input { grid-column: auto; }
  .mnav-slim .mnav-controls #contextFilter { grid-column: 1 / -1; }
  .modern-shell { padding: 12px 10px 118px; }
  .appnav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    border-bottom: 0;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
    backdrop-filter: blur(18px);
  }
  .appnav-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    width: 100%;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .appnav-item {
    display: grid;
    justify-items: center;
    gap: 3px;
    border: 0;
    border-radius: 14px;
    padding: 7px 2px 5px;
    font-size: 10.5px;
    font-weight: 700;
  }
  .appnav-item svg { width: 22px; height: 22px; }
  .appnav-item.active { background: transparent; color: var(--brand-text); }
  .appnav-add {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    margin: -26px auto 0;
    box-shadow: 0 12px 30px rgba(52, 211, 153, .38);
  }
  .appnav-add svg { width: 24px; height: 24px; }
  .scan-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .section-topbar { margin-top: 0; }
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
  }
  .kpi-card {
    min-height: 96px;
    padding: 13px 14px;
    border-radius: 22px;
  }
  .kpi-label { font-size: 11px; letter-spacing: .05em; }
  .kpi-value { margin-top: 7px; font-size: clamp(17px, 5.4vw, 25px); }
  .kpi-sub { margin-top: 6px; font-size: 11.5px; line-height: 1.4; max-width: 100%; }
  .kpi-card::before { top: 10px; right: 12px; font-size: 17px; }
  .panel { border-radius: 18px; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .history-item { grid-template-columns: 1fr; }
  .history-actions { justify-content: flex-start; }
  .metric-row { grid-template-columns: 1fr; }
  .metric-value { text-align: left; }
  .detail-grid { grid-template-columns: 1fr; }
  #drawerContent { gap: 16px; }
  .detail-summary,
  .detail-visual { padding: 12px; }
  .detail-summary .metric-row {
    grid-template-columns: 1fr;
  }
  .detail-summary .metric-value {
    text-align: left;
  }
  .obd-report-kpis {
    grid-template-columns: 1fr;
  }
  .obd-report-head,
  .obd-report-subhead {
    align-items: flex-start;
    flex-direction: column;
  }
  .detail-bars {
    min-height: 220px;
    overflow-x: auto;
    align-items: end;
  }
  .detail-bar {
    min-width: 58px;
    min-height: 210px;
  }
  .donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .donut {
    width: min(210px, 78vw);
  }
  .detail-table {
    min-width: 560px;
  }
  .drawer {
    grid-template-columns: 1fr;
    align-items: end;
  }
  /* align-self: stretch je tu KLÍČOVÝ: rodičovské align-items: end (bottom
     sheet) by prázdnému backdropu dalo výšku 0 a pruh stránky nad kartou
     zůstal jasný — text pod šuplíkem se pak nečitelně míchal s obsahem
     (nahlášeno uživatelem 8. 8. 2026 jako „posouvání menu přes text"). */
  .drawer-backdrop { grid-row: 1; grid-column: 1; align-self: stretch; }
  .drawer-card {
    grid-row: 1;
    grid-column: 1;
    height: min(92vh, 900px);
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: 24px 24px 0 0;
  }
  .record-form { grid-template-columns: 1fr; }
  .record-advanced-grid { grid-template-columns: 1fr; }
  .context-fieldset { grid-template-columns: 1fr; }
  .record-form .span-2, .span-2 { grid-column: auto; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
}

@media (max-width: 440px) {
  .kpi-grid { gap: 8px; }
  .kpi-card { padding: 12px; min-height: 90px; }
  .kpi-value { font-size: clamp(16px, 6vw, 23px); }
  .kpi-sub { font-size: 11px; }
}

/* === Spotřeba mezi nabíjeními ===
   Pruh na Domů (sparkline) + sloučený graf odchylek a driftu v sekci Spotřeba. */
.cons-wrap { margin: 0 0 18px; }

.cons-strip {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand) 7%, var(--panel));
  box-shadow: 0 10px 32px rgba(0, 0, 0, .1);
  overflow: hidden;
}

.cons-strip-thin { padding: 12px 16px; }

.cons-strip-sum {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.cons-strip-sum::-webkit-details-marker { display: none; }
.cons-strip-sum:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.cons-strip-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
}

.cons-strip-ic svg { width: 19px; height: 19px; }
.cons-strip-main .eyebrow { margin: 0 0 1px; }

.cons-strip-val {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.1;
  white-space: nowrap;
}

.cons-strip-val small { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 5px; letter-spacing: 0; }

/* Sparkline se roztahuje jen vodorovně; tahy drží tloušťku přes non-scaling-stroke. */
.cons-spark { width: 100%; height: 38px; min-width: 0; }
.cons-spark line, .cons-spark polyline { fill: none; vector-effect: non-scaling-stroke; }
.cons-spark-avg { stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.cons-spark-raw { stroke: color-mix(in srgb, var(--muted) 48%, transparent); stroke-width: 1; }
/* Modrá = vyhlazeno, a to shodně ve sparkline i v grafu. Zelená je v grafu
   obsazená významem „úspornější než průměr", takže by se pletla. */
.cons-spark-sm { stroke: var(--brand-2); stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
.cons-spark-dot { fill: var(--brand-2); }

.cons-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* U spotřeby je růst horší — barevnost je proto obrácená proti běžnému „nahoru = dobře". */
.cons-delta.is-worse { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.cons-delta.is-better { color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 42%, transparent); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.cons-delta small { font-size: 11px; font-weight: 600; color: var(--muted); }

.cons-strip[open] .ice-strip-car { transform: rotate(180deg); }
.cons-strip-body { border-top: 1px solid var(--border); padding: 14px 16px 16px; }
.cons-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; }

/* --- Sloučený graf --- */
.cons-chart { margin: 4px 0 0; position: relative; }

/* Bublina s hodnotou sloupce. Ukotvená nad sloupcem, nikdy nechytá myš. */
.cons-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 9px));
  pointer-events: none;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel-strong);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.35;
}

.cons-tip[hidden] { display: none; }
.cons-tip-top { display: flex; align-items: baseline; gap: 5px; }
.cons-tip-top b { font-size: 15px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cons-tip-top small { font-size: 11px; color: var(--muted); }
.cons-tip-top em {
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: 3px;
}
.cons-tip-top em.is-over { color: var(--warn); }
.cons-tip-top em.is-under { color: var(--brand-text); }
.cons-tip-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }

/* Špička bubliny */
.cons-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--panel-strong);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cons-plot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }

.cons-y { position: relative; height: var(--cons-h, 190px); }
.cons-y-t {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cons-y-t.is-avg { color: var(--text); font-weight: 800; }

.cons-canvas { height: var(--cons-h, 190px); min-width: 0; }
.cons-chart.is-compact { --cons-h: 148px; }
.cons-canvas svg { width: 100%; height: 100%; display: block; overflow: visible; }

.cons-band { fill: color-mix(in srgb, var(--muted) 13%, transparent); }
.cons-avg { stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cons-sep { stroke: color-mix(in srgb, var(--muted) 30%, transparent); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }

.cons-bar.is-over { fill: var(--warn); }
.cons-bar.is-under { fill: var(--brand); }
/* Rychlonabíječka světlejší — čitelné i pro barvoslepé, protože nese jen doplňkovou informaci. */
.cons-bar.is-dc { opacity: .55; }
.cons-bar { transition: opacity .12s ease; }
.cons-canvas:hover .cons-bar { opacity: .45; }
.cons-canvas .cons-bar:hover { opacity: 1; }

.cons-sm {
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.cons-x { position: relative; height: 30px; margin-left: 52px; }
.cons-x-m {
  position: absolute;
  top: 4px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  padding-left: 5px;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
}
.cons-x-m b { color: var(--soft); font-weight: 700; white-space: nowrap; }
.cons-x-m i { color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }

.cons-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.cons-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cons-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.cons-legend .k-over { background: var(--warn); }
.cons-legend .k-under { background: var(--brand); }
.cons-legend .k-dc { background: var(--brand); opacity: .55; }
.cons-legend .k-band { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.cons-legend .k-sm { background: var(--brand-2); height: 3px; border-radius: 2px; }

/* --- Žebříčky vybočujících jízd --- */
.cons-ex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cons-ex-h {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cons-ex-h.is-over { color: var(--warn); }
.cons-ex-h.is-under { color: var(--brand-text); }
.cons-ex ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cons-ex li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
}
.cons-ex-d { color: var(--muted); font-variant-numeric: tabular-nums; }
.cons-ex-m { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-ex-v { font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cons-ex-v.is-over { color: var(--warn); }
.cons-ex-v.is-under { color: var(--brand-text); }
.cons-ex-v small { font-weight: 600; color: var(--muted); margin-left: 5px; }
.cons-ex-note { grid-column: 1 / -1; margin-top: 2px; }

@media (max-width: 720px) {
  /* Na mobilu se pruh skládá do tří řádků. Umístění je EXPLICITNÍ u všech položek —
     s automatickým tokem si popisek a sparkline sedly do téže buňky a eyebrow se
     zalomil po jednotlivých slovech. */
  .cons-strip-sum {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    row-gap: 10px;
  }
  .cons-strip-ic { grid-column: 1; grid-row: 1; }
  .cons-strip-main { grid-column: 2; grid-row: 1; }
  .cons-strip .ice-strip-car { grid-column: 3; grid-row: 1; align-self: center; }
  /* Sparkline přes celou šířku — vedle čísla by byla na mobilu nečitelně úzká. */
  .cons-spark { grid-column: 1 / -1; grid-row: 2; height: 40px; }
  .cons-delta { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .cons-strip-val { font-size: 20px; }
  .cons-plot { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
  .cons-x { margin-left: 40px; }
  .cons-chart { --cons-h: 168px; }
  .cons-chart.is-compact { --cons-h: 132px; }
  .cons-ex { grid-template-columns: 1fr; }
  .cons-x-m i { display: none; }
}

/* === Chytrá karta pneumatik (jen když je co řešit) === */
.tire-alert-wrap { margin: 0 0 14px; }

.tire-alert {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 14px;
  gap: 13px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  color: var(--text);
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  cursor: pointer;
}

.tire-alert.tone-bad {
  border-color: color-mix(in srgb, var(--bad) 45%, var(--border));
  background: color-mix(in srgb, var(--bad) 10%, var(--panel));
}

.tire-alert:hover { border-color: color-mix(in srgb, var(--warn) 70%, var(--border)); }
.tire-alert.tone-bad:hover { border-color: color-mix(in srgb, var(--bad) 72%, var(--border)); }
.tire-alert:active { transform: scale(.995); }

.tire-alert-ic {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}

.tire-alert.tone-bad .tire-alert-ic {
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  color: var(--bad);
}

.tire-alert-ic svg { width: 21px; height: 21px; }
.tire-alert-txt strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.tire-alert-txt span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.tire-alert-val {
  text-align: right;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--warn);
}

.tire-alert.tone-bad .tire-alert-val { color: var(--bad); }
.tire-alert-val small { display: block; font-weight: 600; font-size: 11px; color: var(--muted); }

@media (max-width: 560px) {
  .tire-alert { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; padding: 12px 13px; }
  .tire-alert .hub-chev { display: none; }
  .tire-alert-ic { width: 38px; height: 38px; }
}

/* Vyplněná procenta, která se nepočítají do měřené kapacity */
.reject-list-wrap { margin-top: 16px; }

.reject-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.reject-list li {
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  padding: 9px 12px;
  font-size: 13px;
}

.reject-list li strong { font-weight: 800; }
.reject-list li span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Pneumatiky — nájezd sad */
.tire-legal {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
}
.tire-legal-days {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--soft);
  font-weight: 800;
  font-size: 13px;
}
.tire-legal-sub {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
}
.tire-sets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.tire-set-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tire-set-card.is-active {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  box-shadow: 0 10px 36px rgba(52, 211, 153, .12);
}
.tire-set-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tire-set-km {
  margin-top: 10px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: -.04em;
}
.tire-set-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.tire-set-card.is-active .tire-set-note {
  color: var(--brand-text);
  font-weight: 700;
}
.tire-swap-hint {
  margin: 0 0 14px;
  font-size: 12px;
}
.tire-details {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
}
.tire-details summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  color: var(--soft);
}
.tire-year-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.tire-year-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tire-year-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--soft);
}
.tire-year-table th,
.tire-year-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.tire-year-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 560px) {
  .tire-sets-grid { grid-template-columns: 1fr; }
}

/* Úspora vs referenční spalovač */
.ice-savings-wrap {
  margin: 0 0 18px;
}
.ice-savings-wrap.hidden {
  display: none;
}
.ice-savings-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--brand-2) 10%, var(--panel));
  box-shadow: 0 10px 32px rgba(0, 0, 0, .1);
}

/* Kompaktní podoba na domovské: jednořádkový souhrn, detail po rozbalení */
.ice-strip { padding: 0; overflow: hidden; }

.ice-strip-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.ice-strip-sum::-webkit-details-marker { display: none; }

.ice-strip-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
}

.ice-strip-ic svg { width: 19px; height: 19px; }

.ice-strip-main {
  min-width: 0;
  flex: 1;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

.ice-strip-main strong { font-size: 17px; letter-spacing: -.03em; margin-right: 6px; }

.ice-strip-total { text-align: right; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ice-strip-total strong { display: block; font-size: 14px; letter-spacing: -.02em; }

.ice-strip-car { color: var(--muted); font-weight: 900; transition: transform .18s ease; }
.ice-strip[open] .ice-strip-car { transform: rotate(180deg); }

.ice-strip-body { border-top: 1px solid var(--border); padding: 14px 16px 16px; }
.ice-savings-ref {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.ice-savings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}
.ice-savings-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ice-savings-val {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 900;
  letter-spacing: -.03em;
}
.ice-save-pos { color: var(--brand-text); }
.ice-save-neg { color: var(--bad); }
.ice-savings-sub {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .ice-savings-grid {
    grid-template-columns: 1fr;
  }
}

.ice-savings-details {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.ice-savings-details-sum {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--soft);
  font-weight: 700;
}
.ice-savings-details-sum::-webkit-details-marker {
  display: none;
}
.ice-savings-details-sum strong {
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: -.03em;
}
.ice-savings-sum-hint {
  font-weight: 600;
}
.ice-savings-details-body {
  margin-top: 12px;
}
.ice-savings-details-body .detail-table-wrap {
  overflow-x: auto;
}
.ice-savings-foot {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

/* === Přihlašovací overlay (modern jako jediný hlavní pohled) === */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 24px;
}
/* Sestava B (svislá): ikona nad wordmarkem, mezera 6 j = 14 px při ikoně 56 px. */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.login-brand h2 {
  margin: 0;
  font-size: 26px;
}
.login-sub {
  margin: 0;
  font-size: 13px;
  text-align: center;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.login-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.login-form .m-btn {
  margin-top: 4px;
  justify-content: center;
}
.login-err {
  margin: 0;
  min-height: 1em;
  color: var(--bad);
  font-size: 13px;
}

/* OBD odečty — výpis surového JSONu. Musí být scrollovatelný v obou osách:
   jeden odečet nese 24 teplotních bodů a desítky extra PIDů, a bez vlastního
   overflow by dlouhé řádky roztáhly celou zásuvku do šířky. */
.obd-raw {
  margin: 12px 0 0;
  padding: 12px;
  max-height: 340px;
  overflow: auto;
  border-radius: 10px;
  background: var(--field);
  border: 1px solid var(--border);
  color: var(--soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  tab-size: 2;
}

/* Telemetrie — malé časové grafy (teplota baterie, palubní odhad spotřeby).
   Stejné konvence jako cons-chart: SVG s preserveAspectRatio=none, popisky os
   v HTML vrstvách (v SVG by se s ním deformovaly), barvy přes CSS proměnné. */
.tlm-chart { margin: 10px 0 4px; }
.tlm-plot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.tlm-y { position: relative; height: var(--tlm-h, 120px); }
.tlm-y-t {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tlm-canvas { height: var(--tlm-h, 120px); min-width: 0; }
.tlm-canvas svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tlm-band { fill: color-mix(in srgb, var(--warn) 14%, transparent); }
.tlm-sep { stroke: color-mix(in srgb, var(--muted) 30%, transparent); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.tlm-l-max { fill: none; stroke: var(--warn); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tlm-l-min { fill: none; stroke: var(--brand-2); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tlm-l-est { fill: none; stroke: var(--brand-2); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tlm-ref { stroke: var(--brand); stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.tlm-x { position: relative; height: 16px; margin: 4px 0 0 52px; }
.tlm-x-t {
  position: absolute;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tlm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0 52px;
  color: var(--muted);
  font-size: 12px;
}
.tlm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tlm-legend i { width: 11px; height: 3px; border-radius: 2px; flex: none; }
.tlm-legend .k-tmax { background: var(--warn); }
.tlm-legend .k-tmin { background: var(--brand-2); }
.tlm-legend .k-est { background: var(--brand-2); }
.tlm-legend .k-ref { background: var(--brand); }

/* Značka volného párování (dávka z okna jízdy) v historii telemetrie. */
.tlm-un {
  color: var(--warn);
  font-weight: 700;
  cursor: help;
}

/* Průběh nabíjení: SoC na ose, příkon přeškálovaný do vlastního maxima. */
.tlm-l-soc { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tlm-l-pwr { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tlm-legend .k-soc { background: var(--brand); }
.tlm-legend .k-pwr { background: var(--warn); }

/* Offline pruh: appka jede z poslední stažené kopie (service worker). */
.offline-notice {
  margin: 0;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: color-mix(in srgb, var(--warn) 22%, var(--panel-strong));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* === Krok před čtením fotek (#scanOptions) — sdílí kartu spodního menu === */
.scan-opts-title { margin: 2px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.scan-opts-field { display: block; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.scan-opts-field .m-input { margin-top: 4px; }
.scan-opts-check { margin-top: 12px; font-size: 14px; align-items: flex-start; line-height: 1.4; cursor: pointer; }
.scan-opts-check input { margin-top: 3px; }
.scan-opts-go { width: 100%; margin-top: 14px; }
/* Souhrn volby nad přehledem skenu + tlačítko „Změnit" (otevře krok znovu). */
.scan-opts-summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.scan-opts-summary strong { color: var(--text); }
.scan-opts-summary .m-btn { min-height: 30px; padding: 4px 10px; font-size: 12px; margin-left: auto; }

/* === Plán nabíjení (sekce „plan": jaký proud nastavit na wallboxu) === */
.plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.plan-form .m-check { font-weight: 600; line-height: 1.4; align-items: flex-start; cursor: pointer; }
.plan-form .m-check input { margin-top: 3px; }
.plan-reco {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  padding: 16px 18px;
}
.plan-reco.warn {
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
  background: color-mix(in srgb, var(--warn) 13%, transparent);
}
.plan-reco-amps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.plan-reco-amps b {
  font-size: clamp(30px, 6vw, 40px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
}
.plan-reco.warn .plan-reco-amps b { color: var(--warn); }
.plan-reco-amps span { color: var(--muted); font-size: 13px; }
.plan-reco p { margin: 0; font-size: 14px; line-height: 1.5; }
/* Šest řádků × šest sloupců se musí vejít na mobil bez vodorovného posuvu. */
.detail-table.plan-table { min-width: 0; }
.plan-table th, .plan-table td { padding: 9px 8px; }
.plan-table tr.plan-row-rec td { color: var(--brand-text); font-weight: 800; }
.plan-table tr.plan-row-late td { color: var(--muted); }
.plan-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.plan-table td.plan-col-status { white-space: normal; }
@media (max-width: 640px) {
  .plan-table th, .plan-table td { padding: 8px 3px; font-size: 12px; }
  .plan-table .plan-col-kw { display: none; }
  /* Datum u vícedenních termínů („čt 11. 9. 06:45") se smí zalomit; doba a SoC ne. */
  .plan-table td:nth-child(4) { white-space: normal; }
}