/* ==========================================================================
   CarExpense — barevné oblasti (redesign 2026-10-16)

   Poslední vrstva nad modern.css / app.css / mobile-details.css. Mění jen
   vzhled: tokeny, barvu oblasti v záhlaví a grafech, Přehled a lištu.
   Bez tohoto souboru se aplikace vrátí k vzhledu app.css v7.

   Každé téma má svou barvu (energie modrá, spotřeba fialová, náklady
   jantarová, baterie zelenomodrá, pneu a servis růžová, kilometry oranžová,
   ostatní šedá). Stav lepší/horší/pozor má barvy oddělené a vždy nese
   šipku nebo ikonu a text. Řady grafů (zdroje nabíjení, kategorie nákladů)
   mají pevnou barvu podle entity, ověřenou validátorem palety v obou
   vzhledech (sousední dvojice při poruchách barvocitu ΔE ≥ 13).
   ========================================================================== */

:root {
  --c-bg: #0b1120;
  --c-surface: #121a2b;
  --c-surface-2: #182238;
  --c-surface-3: #1f2a42;
  --c-line: #223049;
  --c-line-2: #2e3c5a;
  --c-ink: #edf1f7;
  --c-ink-2: #a9b4c7;
  --c-ink-3: #8a96ab;
  --c-acc: #34d399;
  --c-acc-ink: #06281c;
  --c-inv: #edf1f7;
  --c-inv-ink: #0b1120;
  --c-grid: #1d2840;
  --c-axis: #33415c;
  --c-ref: #55627a;

  --c-good: #89da9b;
  --c-good-mark: #0ca30c;
  --c-good-bg: color-mix(in srgb, #0ca30c 20%, var(--c-surface));
  --c-warn: #f2b966;
  --c-warn-mark: #fab219;
  --c-warn-bg: color-mix(in srgb, #fab219 16%, var(--c-surface));
  --c-bad: #ffa59d;
  --c-bad-mark: #e66767;
  --c-bad-bg: color-mix(in srgb, #e66767 18%, var(--c-surface));
  --c-info: #8ec7ff;
  --c-info-bg: color-mix(in srgb, #3987e5 18%, var(--c-surface));
  --c-over: var(--c-bad-mark);
  --c-under: var(--c-good-mark);

  /* Oblasti: plná barva (grafy, ikona záhlaví), text/ikona na ploše, závoj. */
  --d-en: #3987e5; --d-en-ink: #8ec7ff;
  --d-sp: #9085e9; --d-sp-ink: #c3b7ff;
  --d-na: #c98500; --d-na-ink: #edbb64;
  --d-ba: #199e70; --d-ba-ink: #68ddb8;
  --d-se: #d55181; --d-se-ink: #ffa3c8;
  --d-km: #d95926; --d-km-ink: #ffab82;
  --d-ow: #7f8ba1; --d-ow-ink: #c4ccda;
  --wash: 18%;

  /* Zdroje nabíjení — pořadí Doma, Určice, Rychlé DC, Veřejné AC. */
  --src-home: var(--d-ba);
  --src-urcice: var(--d-en);
  --src-dc: var(--d-km);
  --src-ac: var(--d-sp);
  --src-fuel: var(--d-na);
  --src-unknown: var(--c-ref);

  /* Kategorie nákladů — barva patří kategorii, ne pořadí. */
  --cat-energy: var(--d-en);
  --cat-insurance: var(--d-na);
  --cat-tires: var(--d-se);
  --cat-service: var(--d-sp);
  --cat-warranty: var(--d-ba);
  --cat-care: var(--d-km);
  --cat-other: var(--c-ref);
  --cat-purchase: var(--c-ref);

  --s1-t: color-mix(in srgb, var(--s1) var(--wash), var(--c-surface));
  --s2-t: color-mix(in srgb, var(--s2) var(--wash), var(--c-surface));
  --s3-t: color-mix(in srgb, var(--s3) var(--wash), var(--c-surface));
  --s4-t: color-mix(in srgb, var(--s4) var(--wash), var(--c-surface));
  --brand-text: var(--c-good);
  --chart-1: var(--cat-energy);
  --chart-2: var(--cat-insurance);
  --chart-3: var(--d-ba);
  --chart-4: var(--d-km);
  --chart-5: var(--d-sp);
  --chart-6: var(--d-se);
  --chart-7: var(--c-ref);
  --dom: var(--d-ow); --dom-ink: var(--d-ow-ink); --dom-on: #ffffff; --dom-2: var(--d-en);
}

:root[data-theme="light"] {
  --c-bg: #f3f5f9;
  --c-surface: #ffffff;
  --c-surface-2: #f4f6fa;
  --c-surface-3: #e9edf3;
  --c-line: #e2e7ef;
  --c-line-2: #d3dae5;
  --c-ink: #0e1626;
  --c-ink-2: #4a5568;
  --c-ink-3: #5f6b7e;
  --c-acc: #047857;
  --c-acc-ink: #ffffff;
  --c-inv: #0e1626;
  --c-inv-ink: #ffffff;
  --c-grid: #edf0f5;
  --c-axis: #c9d1dd;
  --c-ref: #b4bdcb;

  --c-good: #007329;
  --c-good-mark: #0ca30c;
  --c-good-bg: #e6f4e8;
  --c-warn: #8d4c00;
  --c-warn-mark: #e69b00;
  --c-warn-bg: #fcf1dc;
  --c-bad: #a12f2f;
  --c-bad-mark: #e34948;
  --c-bad-bg: #fcebea;
  --c-info: #0e5caf;
  --c-info-bg: #e8f0fb;

  --d-en: #2a78d6; --d-en-ink: #0e5caf;
  --d-sp: #6f5fd6; --d-sp-ink: #5f49ab;
  --d-na: #e09a00; --d-na-ink: #884f00;
  --d-ba: #1baf7a; --d-ba-ink: #007650;
  --d-se: #e0628f; --d-se-ink: #9a2f62;
  --d-km: #eb6834; --d-km-ink: #9e3800;
  --d-ow: #7d889b; --d-ow-ink: #4a5568;
  --wash: 11%;
  --src-ac: #4a3aa7;
  --cat-service: #4a3aa7;
}

/* --- Barva oblasti ---------------------------------------------------------- */
.dom-en, [data-domain="en"] { --dom: var(--d-en); --dom-ink: var(--d-en-ink); --dom-2: var(--src-home); }
.dom-sp, [data-domain="sp"] { --dom: var(--d-sp); --dom-ink: var(--d-sp-ink); --dom-2: var(--d-km); }
.dom-na, [data-domain="na"] { --dom: var(--d-na); --dom-ink: var(--d-na-ink); --dom-2: var(--d-na); --dom-on: #1b1200; }
.dom-ba, [data-domain="ba"] { --dom: var(--d-ba); --dom-ink: var(--d-ba-ink); --dom-2: var(--d-en); }
.dom-se, [data-domain="se"] { --dom: var(--d-se); --dom-ink: var(--d-se-ink); --dom-2: var(--d-ba); }
.dom-km, [data-domain="km"] { --dom: var(--d-km); --dom-ink: var(--d-km-ink); --dom-2: var(--d-sp); }
.dom-ow, [data-domain="ow"] { --dom: var(--d-ow); --dom-ink: var(--d-ow-ink); --dom-2: var(--d-en); }
.dom-good { --dom: var(--c-good-mark); --dom-ink: var(--c-good); }
.dom-warn { --dom: var(--c-warn-mark); --dom-ink: var(--c-warn); }

/* Grafy a zvýraznění uvnitř tématu převezmou jeho barvu. Náklady a predikce
   drží dvojici energie (modrá) × provoz (jantarová) jako na Přehledu. */
:is(#viewAnalysis, #viewSection, #viewRecords, #viewMenu)[data-domain] {
  --brand: var(--dom);
  --brand-2: var(--dom-2);
  --brand-text: var(--dom-ink);
}
:is(#viewAnalysis, #viewSection, #viewRecords, #viewMenu)[data-domain="na"] { --brand: var(--cat-energy); --brand-2: var(--d-na); }
:is(#viewAnalysis, #viewSection, #viewRecords, #viewMenu)[data-domain] :is(.section-shell, .drawer) { --brand-2: var(--dom-2); }

/* --- Čip ikony oblasti ------------------------------------------------------- */
.kpi-ic, .sec-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--dom) var(--wash), var(--c-surface));
  color: var(--dom-ink);
}
.kpi-ic svg { width: 16px; height: 16px; }
.sec-ic { width: 36px; height: 36px; border-radius: 11px; }
.sec-ic svg { width: 19px; height: 19px; }
.topic-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--dom);
  color: var(--dom-on);
}
:root[data-theme="light"] .topic-ic { background: var(--dom-ink); color: #ffffff; }
.topic-ic svg { width: 23px; height: 23px; }
.topic-ic:empty { display: none; }

/* --- Záhlaví tématu: závoj barvy oblasti ------------------------------------ */
.topic-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topic-title > div { min-width: 0; }
:is(#viewAnalysis, #viewRecords, #viewMenu)[data-domain] > .view-head {
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--dom) 30%, var(--c-line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--dom) var(--wash), var(--c-bg));
}
:is(#viewAnalysis, #viewRecords, #viewMenu)[data-domain] > .view-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
:is(#viewAnalysis, #viewRecords, #viewMenu)[data-domain] > .view-head .view-sub { color: var(--c-ink-2); font-size: 13.5px; }
:is(#viewAnalysis, #viewRecords, #viewMenu)[data-domain] .view-actions .m-input { background: var(--c-surface); }
#viewSection[data-domain] .section-shell > .panel-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--dom) 30%, var(--c-line));
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: color-mix(in srgb, var(--dom) var(--wash), var(--c-surface));
}
#viewSection[data-domain] .section-shell > .panel-head h3 { font-size: 22px; font-weight: 700; }
#viewSection[data-domain] .section-shell > .panel-body { padding-top: 16px; }
:is(#viewAnalysis, #viewMenu) [data-topic-back],
#viewSection #sectionBackBtn,
#viewRecords #recordsBookBack {
  min-height: 44px;
  margin-bottom: 4px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--dom-ink);
  font-weight: 600;
}
#viewSection .section-topbar { margin-bottom: 4px; }

/* Záznamy: aktivní záložka v barvě druhu záznamu. */
#viewRecords[data-domain] .chip-btn.active {
  border-color: color-mix(in srgb, var(--dom) 55%, transparent);
  background: color-mix(in srgb, var(--dom) var(--wash), var(--c-surface));
  color: var(--dom-ink);
}
.chip-btn.active { background: var(--c-inv); border-color: var(--c-inv); color: var(--c-inv-ink); }

/* --- Navigace --------------------------------------------------------------- */
.tabbar .tab.active svg {
  box-sizing: content-box;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--c-surface-3);
}
.tab { gap: 2px; padding-top: 4px; }
.desktop-nav .tab.active { color: var(--c-ink); }
.segmented { background: var(--c-surface); border: 1px solid var(--c-line); }
.segmented button.active { background: var(--c-surface-3); box-shadow: inset 0 0 0 1px var(--c-line-2); }
.sync-pill.is-stale { border-color: transparent; background: var(--c-warn-bg); color: var(--c-warn); }
.sync-pill.is-stale i { background: var(--c-warn-mark); }
.sync-pill.is-fresh i { background: var(--c-good-mark); }

/* --- Stavové štítky ---------------------------------------------------------- */
.pill.good, .chip--good { background: var(--c-good-bg); color: var(--c-good); }
.pill.warn, .chip--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.pill.bad { background: var(--c-bad-bg); color: var(--c-bad); }
.tone-src-home { background: color-mix(in srgb, var(--src-home) var(--wash), var(--c-surface)); color: var(--d-ba-ink); }
.tone-src-urcice { background: color-mix(in srgb, var(--src-urcice) var(--wash), var(--c-surface)); color: var(--d-en-ink); }
.tone-src-dc { background: color-mix(in srgb, var(--src-dc) var(--wash), var(--c-surface)); color: var(--d-km-ink); }
.tone-src-ac { background: color-mix(in srgb, var(--src-ac) var(--wash), var(--c-surface)); color: var(--d-sp-ink); }

/* --- Přehled ----------------------------------------------------------------- */
#viewHome .home-kpis { gap: 10px; }
#viewHome .home-kpi.card { min-height: 0; padding: 14px; border-radius: 18px; }
#viewHome .home-kpi .stat-label.kpi-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-right: 18px; color: var(--c-ink-2); font-weight: 500; }
#viewHome .home-kpi-value { font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
#viewHome .home-kpi-value > .home-kpi-unit { display: block; margin-top: 2px; }

/* Hlavní číslo: cena energie za kilometr přes celou šířku. */
#viewHome #homeMonth.card { grid-column: 1 / -1; padding: 18px 16px 16px; border-radius: 20px; }
#viewHome #homeMonth .home-kpi-value { font-size: 54px; line-height: 1; letter-spacing: -.035em; }
#viewHome #homeMonth .home-kpi-value .home-kpi-unit { display: inline; margin-left: 8px; font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--c-ink-2); }
#viewHome #homeMonth .home-kpi-unit.hero-sub { margin-top: 8px; font-size: 13px; }
.hero-compare { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.hero-compare-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; color: var(--c-ink-2); }
.hero-compare-row strong { color: var(--c-ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-track { height: 10px; overflow: hidden; border-radius: 5px; background: var(--c-surface-3); }
.hero-track i { display: block; height: 100%; border-radius: 0 5px 5px 0; }
.hero-compare .pill { justify-self: start; white-space: nowrap; }
.hero-compare-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--c-ink-3); }

#viewHome #batteryQuick.card { grid-column: 1 / -1; padding: 14px 16px; border-radius: 18px; }
#viewHome #batteryQuick .card-h .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--c-ink-2); font-size: 13px; font-weight: 500; }
#viewHome .hb-bar { height: 12px; background: var(--c-surface-3); }
#viewHome .hb-bar i { background: var(--d-ba); }
#viewHome .home-kpis.is-ice #homeMileage { grid-column: auto; }

/* Pozornost */
#viewHome .home-alerts:not([hidden]) {
  display: block;
  padding: 2px 14px;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: var(--c-surface);
}
#viewHome .home-alert-detail + .home-alert-detail { border-top: 1px solid var(--c-line); }
#viewHome .home-alert-detail > summary { gap: 12px; min-height: 56px; }
#viewHome .home-alert-detail > summary > .row-title { font-size: 14.5px; font-weight: 600; }
#viewHome .home-alert-detail > summary > .pill { white-space: nowrap; }

/* Náklady */
#viewHome .home-finances { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#viewHome .home-costs.card { padding: 16px; border-radius: 20px; }
#viewHome .home-costs .card-h { margin: 0 0 4px; }
#viewHome .home-costs .card-h h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
#viewHome .home-costs .card-h h2 .home-period-label { display: inline; margin: 0; font-size: 13px; }
.home-costs-total { margin: 4px 0 0; font-size: 32px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.home-costs-total .unit { font-size: 16px; color: var(--c-ink-2); }
.split-bar { display: flex; gap: 2px; height: 14px; margin-top: 14px; overflow: hidden; border-radius: 7px; background: var(--c-surface-3); }
.split-bar i { display: block; min-width: 4px; }
.legend-rows { display: grid; gap: 8px; margin-top: 12px; }
.legend-rows > div { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-ink-2); }
.legend-rows i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.legend-rows strong { margin-left: auto; color: var(--c-ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#viewHome .home-costs > .note { margin: 10px 0 0; font-size: 12.5px; }
#viewHome .home-costs .home-savings { margin-top: 12px; padding: 2px 12px; border-color: var(--c-line); border-radius: 14px; background: var(--c-good-bg); }
#viewHome .home-costs .home-savings > summary strong { font-size: 16px; }

/* Vývoj spotřeby */
#viewHome .home-cons.card { padding: 16px; border-radius: 20px; }
#viewHome .home-cons .card-h h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
#viewHome #homeCons .spark .sp-line { stroke: var(--d-sp); stroke-width: 2; }
#viewHome #homeCons .spark .sp-dot { fill: var(--d-sp); stroke: var(--c-surface); stroke-width: 2.5; }
#viewHome #homeCons .spark .sp-avg { stroke: var(--c-ink-3); stroke-width: 1; stroke-dasharray: none; opacity: .7; }
#viewHome #homeCons .spark .sp-area { fill: var(--d-sp); opacity: .12; }

/* Oblasti: dlaždice s barvou tématu */
#viewHome .home-sections.card { padding: 0; border: 0; background: none; box-shadow: none; }
#viewHome .home-sections .card-h { margin: 6px 2px 10px; }
#viewHome .home-sections .card-h h2 { font-size: 18px; font-weight: 650; }
.home-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sec-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
}
.sec-tile:hover { border-color: color-mix(in srgb, var(--dom) 45%, var(--c-line)); }
.sec-tile:focus-visible { outline: 2px solid var(--dom); outline-offset: 2px; }
.sec-tile .row-chev { position: absolute; top: 22px; right: 12px; }
.sec-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-title { font-size: 15px; font-weight: 600; line-height: 1.25; }
.sec-meta { font-size: 12.5px; line-height: 1.4; color: var(--c-ink-2); }

/* Zvýrazněný první údaj tématu v barvě oblasti (dříve vždy modrý). */
:is(#viewAnalysis, #viewSection, #viewRecords, #viewMenu)[data-domain] :is(.analysis-summary .metric-row:first-child, .metric-insights .mi-stats > div:first-child, .detail-summary .metric-row:first-child, .ownership-hero > div:first-child, .records-summary > div, .journal-kpis > div, .obd-report) {
  background: color-mix(in srgb, var(--dom) 10%, var(--c-surface));
  border-color: color-mix(in srgb, var(--dom) 30%, var(--c-line));
}
#viewAnalysis .analysis-summary .metric-value { overflow-wrap: normal; }
#viewAnalysis .analysis-summary .metric-row:first-child .metric-value { font-size: clamp(24px, 7.4vw, 40px); }
@media (max-width: 600px) {
  #viewAnalysis .analysis-summary .metric-row:not(:first-child) .metric-value { font-size: 20px; }
}

/* --- Grafy -------------------------------------------------------------------- */
#viewAnalysis[data-domain="sp"] .cons-sm { stroke: var(--d-sp-ink); }
#viewAnalysis[data-domain="sp"] .cons-legend .k-sm { background: var(--d-sp-ink); }
.cons-bar.is-over, .cons-legend .k-over { fill: var(--c-bad-mark); background: var(--c-bad-mark); }
.cons-bar.is-under, .cons-legend .k-under { fill: var(--c-good-mark); background: var(--c-good-mark); }
.cons-legend .k-dc { background: var(--c-good-mark); }
.cons-tip-top em.is-over, .cons-ex-h.is-over, .cons-ex-v.is-over { color: var(--c-bad); }
.cons-tip-top em.is-under, .cons-ex-h.is-under { color: var(--c-good); }
#viewAnalysis .bar-list .bar-row .bar-fill { background: var(--bar, var(--brand)); }
.mi-grid { stroke: var(--c-grid); stroke-dasharray: none; }
.mi-band { fill: var(--brand); opacity: .1; }
.month-bars .b-closed, .month-bars .b-open { fill: var(--brand); }
/* Jedna barva oblasti místo dekorativního přechodu, který nic nekódoval. */
.detail-bar-col { background: var(--dom); box-shadow: none; border-radius: 8px 8px 3px 3px; }
.tlm-grid { stroke: var(--c-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Klíč v legendě kreslí čárkované čáry čárkovaně, aby šly k čáře v grafu přiřadit. */
.tlm-legend .k-ref { background: repeating-linear-gradient(90deg, var(--brand) 0 4px, transparent 4px 7px); }
.tlm-legend .k-pwr { background: repeating-linear-gradient(90deg, var(--warn) 0 4px, transparent 4px 7px); }
.spark text.sp-cur { fill: var(--c-ink); font-weight: 600; }

@media (max-width: 1023px) {
  #viewHome .view-head h1 { font-size: 28px; font-weight: 700; }
}
@media (max-width: 359px) {
  #viewHome #homeMonth .home-kpi-value { font-size: 44px; }
  .hero-compare-row { grid-template-columns: 80px minmax(0, 1fr) auto; }
}

@media (min-width: 1024px) {
  #viewHome .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #viewHome .home-grid > :is(#homeKpis, #homeKpiNote, #homeTodo, .home-sections) { grid-column: 1 / -1; }
  #viewHome .home-kpis { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  #viewHome #homeMonth.card { grid-column: span 2; grid-row: span 2; padding: 22px; }
  #viewHome #homeMonth .home-kpi-value { font-size: 64px; }
  #viewHome #batteryQuick.card { grid-column: span 2; }
  #viewHome .home-kpi.card { padding: 18px; }
  .home-section-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  #viewHome .home-sections { grid-column: 1 / -1; }
}