/* Madlenka na telefonu – vzhled podle schváleného návrhu (web/prototyp).
   Barvy jsou jen v proměnných; tmavý režim je přepíše na jednom místě. */

:root {
  color-scheme: light dark;
  --pismo: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pismo-nadpis: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --paper: #faf9f5;
  --panel: #fffdf8;
  --card: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #4a4a4f;
  --muted: #6b6b70;
  --tich: #8a867c;
  --line: #e6e2d8;
  --line-head: #ece8de;
  --line-soft: #f1ede4;
  --line-btn: #d9d4c6;
  --line-box: #cfc9ba;
  --chevron: #b6b2a8;

  --accent: #c43e5c;
  --accent-text: #c43e5c;
  --accent-ink: #ffffff;
  --accent-bg: #fdeef1;
  --accent-slaby: #f0bfc9;
  --modra: #3b5bdb;
  --modra-text: #3b5bdb;
  --modra-bg: #eef2fb;
  --zelena: #2f7a4f;
  --zelena-bg: #e9f4ee;
  --zelena-line: #cfe4d8;
  --cervena: #b3261e;
  --cervena-bg: #fdecec;
  --cervena-line: #f0c4c0;
  --cervena-tlumena: #8a5049;
  --oranzova: #b9770e;
  --oranzova-bg: #fdf0e3;
  --ceka-bg: #f3f1ea;
  --souhrn-bg: #faf7ef;
  --pozn-bg: #fff8e6;
  --pozn-line: #edd9a3;
  --pozn-ink: #6b5a2a;
  --toast-bg: #1d1d1f;
  --toast-ink: #ffffff;
  --toast-btn: rgba(255, 255, 255, 0.16);
  --scrim: rgba(29, 29, 31, 0.38);
  --stin: 0 8px 28px rgba(0, 0, 0, 0.18);
  --papir: #ffffff;
  --fokus: #3b5bdb;

  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161513;
    --panel: #1c1b19;
    --card: #22211e;
    --ink: #f2efe9;
    --ink-2: #d9d5cd;
    --muted: #aaa69e;
    --tich: #9a968d;
    --line: #37352f;
    --line-head: #2e2c28;
    --line-soft: #2c2a26;
    --line-btn: #4a4742;
    --line-box: #5d5952;
    --chevron: #6f6b64;

    --accent: #c43e5c;
    --accent-text: #f190a6;
    --accent-ink: #ffffff;
    --accent-bg: #3b232b;
    --accent-slaby: #6a3443;
    --modra: #4461dc;
    --modra-text: #9db0ff;
    --modra-bg: #1f2640;
    --zelena: #86d3a4;
    --zelena-bg: #1d3326;
    --zelena-line: #2f5a41;
    --cervena: #ff8f86;
    --cervena-bg: #3b1f1d;
    --cervena-line: #6b3430;
    --cervena-tlumena: #e6b1ab;
    --oranzova: #ecae55;
    --oranzova-bg: #3a2c15;
    --ceka-bg: #2a2825;
    --souhrn-bg: #272521;
    --pozn-bg: #2e2716;
    --pozn-line: #5b4d25;
    --pozn-ink: #eadcae;
    --toast-bg: #3a3834;
    --toast-ink: #ffffff;
    --toast-btn: rgba(255, 255, 255, 0.14);
    --scrim: rgba(0, 0, 0, 0.6);
    --stin: 0 8px 28px rgba(0, 0, 0, 0.55);
    --fokus: #9db0ff;
  }
}
:root[data-theme="dark"] {
  --paper: #161513; --panel: #1c1b19; --card: #22211e; --ink: #f2efe9; --ink-2: #d9d5cd; --muted: #aaa69e;
  --tich: #9a968d; --line: #37352f; --line-head: #2e2c28; --line-soft: #2c2a26; --line-btn: #4a4742;
  --line-box: #5d5952; --chevron: #6f6b64; --accent-text: #f190a6; --accent-bg: #3b232b; --accent-slaby: #6a3443;
  --modra: #4461dc; --modra-text: #9db0ff; --modra-bg: #1f2640; --zelena: #86d3a4; --zelena-bg: #1d3326;
  --zelena-line: #2f5a41; --cervena: #ff8f86; --cervena-bg: #3b1f1d; --cervena-line: #6b3430;
  --cervena-tlumena: #e6b1ab; --oranzova: #ecae55; --oranzova-bg: #3a2c15; --ceka-bg: #2a2825;
  --souhrn-bg: #272521; --pozn-bg: #2e2716; --pozn-line: #5b4d25; --pozn-ink: #eadcae; --toast-bg: #3a3834;
  --toast-btn: rgba(255, 255, 255, 0.14); --scrim: rgba(0, 0, 0, 0.6); --stin: 0 8px 28px rgba(0, 0, 0, 0.55);
  --fokus: #9db0ff;
}

/* --- základ --- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.4 var(--pismo);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
/* průsvitný stavový řádek iPhonu: obsah pod ním nepodjíždí */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); z-index: 20;
  background: var(--panel); pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1:focus, h2:focus, [tabindex="-1"]:focus { outline: none; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#app { display: flex; flex-direction: column; min-height: 100dvh; }

/* --- hlavička --- */
.hlavicka {
  position: sticky; top: 0; z-index: 5;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line-head);
  display: flex; align-items: center; gap: 10px;
}
.hlavicka h1 {
  font-family: var(--pismo-nadpis); font-size: 22px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.2;
  overflow-wrap: anywhere;
}
.hlavicka .podnadpis { margin-top: 1px; }
.hlavicka.velka {
  position: static; background: transparent; border-bottom: 0;
  padding: calc(env(safe-area-inset-top) + 36px) 20px 14px; align-items: flex-start;
}
.hlavicka.velka h1 { font-size: 30px; letter-spacing: -0.3px; }
.hlavicka.velka .podnadpis { font-size: 15px; margin-top: 3px; }
.podnadpis { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.zpet {
  width: var(--tap); height: var(--tap); margin-left: -10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 12px; color: var(--ink);
}
.zpet:active { background: var(--line-soft); }
.ikonove {
  width: var(--tap); height: var(--tap); flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-btn); border-radius: 12px; background: var(--card); color: var(--ink);
}

/* --- tělo a spodní lišta (bezpečný okraj dole jen u posledního prvku) --- */
.telo { flex: 1; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#app > .telo:last-child { padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
.spodek {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--panel); border-top: 1px solid var(--line);
}
.dole { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.spodek > :last-child { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
.dole + .tabbar { border-top: 1px solid var(--line); }
.tabbar { display: flex; padding: 6px 4px 4px; }
.spodek > .tabbar:last-child { padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
.tabbar a {
  flex: 1; min-width: 0; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; color: var(--tich); border-radius: 12px; text-align: center; line-height: 1.15;
}
.tabbar a[aria-current="page"] { color: var(--accent-text); font-weight: 700; }
.tabbar a:active { background: var(--line-soft); }

/* --- obecné prvky --- */
.karta { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; }
.karta.bez-okraje { padding: 0; overflow: hidden; }
.radek { display: flex; align-items: center; gap: 10px; min-width: 0; }
.radek.nahoru { align-items: flex-start; }
.radek.mezi { justify-content: space-between; }
.roste { flex: 1; min-width: 0; }
.vpravo { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.nowrap { white-space: nowrap; }
.tucne { font-weight: 700; }
.stitek {
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--tich); text-transform: uppercase;
  margin-top: 8px; line-height: 1.3;
}
.telo > .stitek:first-child { margin-top: 2px; }
.prazdno { padding: 28px 8px; text-align: center; color: var(--muted); line-height: 1.5; }
.mezera { margin-top: 14px; }
.chyba { color: var(--cervena); }
.tlumene { color: var(--muted); }
.drobne { font-size: 12.5px; color: var(--tich); line-height: 1.4; }
.drobne a { color: var(--accent-text); text-decoration: underline; }
.stred { text-align: center; }

.tlacitko {
  min-height: 50px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 14px;
  background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.tlacitko svg { flex: none; }
.tlacitko.velke { min-height: 52px; font-size: 17px; }
.tlacitko.modre { background: var(--modra); border-color: var(--modra); color: #fff; }
.tlacitko.druhe { background: var(--card); color: var(--ink); border-color: var(--line-btn); font-weight: 600; font-size: 15px; }
.tlacitko.male { min-height: var(--tap); padding: 0 12px; font-size: 14px; border-radius: 12px; }
.tlacitko.nebezpecne { background: var(--card); color: var(--cervena); border-color: var(--cervena-line); font-weight: 600; font-size: 15px; }
.tlacitko.textove { background: none; border-color: transparent; color: var(--accent-text); font-weight: 700; font-size: 15px; padding: 0 8px; }
.tlacitko:active:not(:disabled) { filter: brightness(0.94); }
.tlacitko:disabled { opacity: 0.45; cursor: default; }
.tlacitka { display: flex; gap: 10px; }
.tlacitka > * { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
.tlacitka > .hlavni { flex: 1 1 auto; }
.tlacitka > .obsah { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }

.znacka {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 9px;
  font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.25; flex: none;
}
.znacka.ceka { background: var(--ceka-bg); color: var(--muted); }
.znacka.pozde, .znacka.chybi { background: var(--cervena-bg); color: var(--cervena); }
.znacka.ok, .znacka.poslano { background: var(--zelena-bg); color: var(--zelena); }
.znacka.upraveno { background: var(--oranzova-bg); color: var(--oranzova); }
.znacka.tisk { background: var(--accent-bg); color: var(--accent-text); padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.hlavicka > .znacka { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.znacka.pocet {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; justify-content: center;
  background: var(--accent); color: var(--accent-ink); font-size: 14px;
}
.znacka.pocet.modra { background: var(--modra); color: #fff; }
.znacka.mala { padding: 2px 7px; font-size: 11.5px; border-radius: 7px; font-weight: 600; }
.znacky { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.znacky:empty { display: none; }

.pozn {
  padding: 12px 14px; border-radius: 12px; background: var(--pozn-bg); border: 1px solid var(--pozn-line);
  font-size: 13.5px; line-height: 1.4; color: var(--pozn-ink); overflow-wrap: anywhere;
}
.pozn b { color: inherit; font-weight: 700; }

/* pruhy s upozorněním (bez signálu, přihlášení, nová verze, https) */
.pruh {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.35; background: var(--ceka-bg); color: var(--ink-2);
}
.pruh.varovani { background: var(--cervena-bg); color: var(--cervena); }
.pruh.info { background: var(--modra-bg); color: var(--modra-text); }
.pruh .tlacitko { min-height: 40px; font-size: 14px; padding: 0 12px; border-radius: 10px; flex: none; }

label.pole { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); min-width: 0; }
input[type="text"], input[type="password"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: var(--tap); padding: 0 12px; font-size: 16px;
  border: 1px solid var(--line-btn); border-radius: 12px; background: var(--card); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--tich); }
textarea { padding: 10px 12px; min-height: 88px; resize: vertical; line-height: 1.4; }
select { padding-right: 28px; }
input[aria-invalid="true"] { border-color: var(--cervena); background: var(--cervena-bg); }
.chyba-pole { font-size: 13.5px; color: var(--cervena); }
.chyba-pole:empty { display: none; }
.hledani { display: block; }
.hledani input { min-height: 46px; border-radius: 13px; }

/* --- úvod --- */
.dlazdice { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 16px; }
.dlazdice .nazev { display: block; font-size: 17px; font-weight: 700; }
.dlazdice .podnadpis { display: block; font-size: 14px; margin-top: 2px; }
.dlazdice:active, .radek-karta:active, .odkaz-radek:active { background: var(--line-soft); }
.sipka { color: var(--chevron); flex: none; display: flex; }
.symbol { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.symbol.ruzova { background: var(--accent-bg); color: var(--accent-text); }
.symbol.modra { background: var(--modra-bg); color: var(--modra-text); }
.symbol.oranzova { background: var(--oranzova-bg); color: var(--oranzova); }
.symbol.zelena { background: var(--zelena-bg); color: var(--zelena); }
.stav-dat {
  margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: var(--ceka-bg); border: 1px dashed var(--line-btn);
  display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; line-height: 1.35;
}
.stav-dat svg { flex: none; }

/* --- dodací listy --- */
.dl-radek {
  display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  overflow: hidden;
}
.dl-radek.vybrano { border-color: var(--accent); background: var(--accent-bg); }
.dl-vyber {
  flex: 1; min-width: 0; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.dl-vyber:focus-visible { outline-offset: -3px; border-radius: 14px; }
.box {
  width: 24px; height: 24px; flex: none; border: 2px solid var(--line-box); border-radius: 7px; background: var(--card);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.vybrano .box { border-color: var(--accent); background: var(--accent); }
.dl-titul { display: block; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.hotovy .dl-titul { font-weight: 600; }
.dl-popis { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.dl-castka { font-size: 15px; font-weight: 700; white-space: nowrap; flex: none; }
.hotovy .dl-castka { font-weight: 500; color: var(--ink-2); }
.dl-otevrit {
  width: 46px; flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--chevron); border-left: 1px solid var(--line-soft);
}
.vybrano .dl-otevrit { border-left-color: var(--accent-slaby); }
.dl-otevrit:active, .dl-vyber:active { background: var(--line-soft); }
.odkaz-radek {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink-2); font-weight: 600;
}
.odkaz-radek.doklad-archiv { margin-top: 0; color: var(--ink); font-weight: 400; }
.doklad-archiv .dl-castka { font-weight: 500; color: var(--ink-2); }

/* --- doklad --- */
.polozky-hlava {
  display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 700; color: var(--tich); text-transform: uppercase; letter-spacing: 0.4px;
}
.polozka { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.polozka:last-child { border-bottom: 0; }
.polozka .ks { min-width: 44px; font-size: 14px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.polozka .jmeno { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.polozka .cena { font-size: 15px; font-weight: 600; white-space: nowrap; text-align: right; }
.souhrn {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 13px 14px;
  background: var(--souhrn-bg); font-weight: 700; border-top: 1px solid var(--line-soft);
}
.souhrn .hodnota { font-size: 17px; white-space: nowrap; }
.trojice { display: flex; gap: 8px; }
.trojice .karta { flex: 1 1 0; min-width: 0; padding: 10px 11px; border-radius: 12px; }
.trojice .popis { font-size: 12px; color: var(--tich); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trojice .hodnota { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trojice .hodnota.dlouha { font-size: 14px; }
.rekapitulace { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
details.nahled { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
details.nahled summary {
  min-height: var(--tap); padding: 0 14px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; cursor: pointer; list-style: none;
}
details.nahled summary::-webkit-details-marker { display: none; }
details.nahled summary::after { content: "›"; color: var(--chevron); font-size: 24px; line-height: 1; transform: rotate(90deg); }
details.nahled[open] summary::after { transform: rotate(-90deg); }
.papir { margin: 0 12px 12px; background: var(--papir); border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); overflow: hidden; color: #1a1a1f; }
.papir svg { display: block; width: 100%; height: auto; }
.papir .prazdno { color: #6b6b70; }

/* úprava položek */
.uprava-radek { display: flex; flex-direction: column; gap: 10px; }
.uprava-radek .radek > label.pole { flex: 1 1 0; }
.uprava-radek input { min-height: 44px; }
.uprava-radek.smazany { padding: 8px 14px; border-style: dashed; }
.produkt-info { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.castka-radku { font-size: 15px; font-weight: 700; white-space: nowrap; }
.soucty { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13.5px; color: var(--muted); }
.soucty b { color: var(--ink); white-space: nowrap; }

/* výběr produktu */
.produkty { display: flex; flex-direction: column; gap: 6px; }
.produkt {
  width: 100%; min-height: 56px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
}
.produkt:active { background: var(--line-soft); }
.produkt .nazev-produktu { display: block; font-size: 15px; overflow-wrap: anywhere; }
.produkt .kod { display: block; font-size: 12px; color: var(--tich); }

/* --- faktury, přijaté, pobočky --- */
.radek-karta {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.radek-karta .nazev { display: block; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.radek-karta .podnadpis { display: block; margin-top: 2px; }
details.radek-karta { display: block; padding: 0; }
details.radek-karta > summary {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 60px; list-style: none; cursor: pointer;
}
details.radek-karta > summary::-webkit-details-marker { display: none; }
.stav-fakturace { font-size: 12px; font-weight: 700; color: var(--oranzova); }
.stav-vystaveno { font-size: 12px; font-weight: 700; color: var(--zelena); }
.pod-seznam {
  margin: 0 14px 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--muted);
}
.vyber-obdobi { flex: none; }
.vyber-obdobi select {
  width: auto; min-width: 96px; max-width: 150px; min-height: var(--tap); font-weight: 600; font-size: 14px;
  padding: 0 26px 0 10px;
}

.prijata { padding: 13px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.prijata.pozde { border-color: var(--cervena-line); }
.prijata.zaplacena { border-color: var(--zelena-line); }
.prijata .dodavatel { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.prijata .castka { font-size: 17px; font-weight: 700; white-space: nowrap; }
.prijata .castka .neznama { font-size: 13px; font-weight: 600; }
.prijata .dalsi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.prijata .poznamka { margin-top: 6px; overflow-wrap: anywhere; }
.prijata .akce { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.prijata .akce .tlacitko { min-height: 40px; flex: none; }
.kopirovat {
  min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-btn); background: var(--card);
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); flex: none;
}
.kopirovat:active { background: var(--line-soft); }
.soucet { flex: 1 1 0; padding: 10px 12px; border-radius: 12px; background: var(--ceka-bg); min-width: 0; }
.soucet .popis { font-size: 12px; color: var(--muted); }
.soucet .hodnota { font-size: 16px; font-weight: 700; white-space: nowrap; }
.soucet.pozde { background: var(--cervena-bg); }
.soucet.pozde .popis { color: var(--cervena-tlumena); }
.soucet.pozde .hodnota { color: var(--cervena); }

.cipy {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px;
  scrollbar-width: none;
}
.cipy::-webkit-scrollbar { display: none; }
.cipy.v-plachte { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.cip {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line-btn);
  background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.cip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.sekce { display: flex; flex-direction: column; gap: 12px; }
.sekce h2 { font-size: 16px; font-weight: 700; }
.graf { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.graf .sloupec { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.graf .hodnota { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.graf .bar { width: 100%; border-radius: 6px; background: var(--accent-slaby); }
.graf .bar.posledni { background: var(--accent); }
.graf .tyden { font-size: 11px; color: var(--tich); }

.info-radky { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; margin: 0; }
.info-radky dt { color: var(--muted); }
.info-radky dd { margin: 0; overflow-wrap: anywhere; }
.formular { display: flex; flex-direction: column; gap: 12px; }

/* --- spodní plachta (dialog) --- */
#plachta { position: fixed; inset: 0; z-index: 30; }
.plachta-pozadi { position: absolute; inset: 0; background: var(--scrim); }
.plachta {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 88dvh; overflow-y: auto;
  background: var(--panel); border-radius: 20px 20px 0 0; box-shadow: var(--stin);
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain;
}
.plachta-uchyt { width: 40px; height: 5px; border-radius: 3px; background: var(--line-btn); margin: 2px auto 0; flex: none; }
.plachta h2 { font-family: var(--pismo-nadpis); font-size: 21px; font-weight: 600; }
.plachta-obsah { display: flex; flex-direction: column; gap: 10px; }
.plachta .text { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.plachta pre {
  margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; font: 13.5px/1.4 var(--pismo); max-height: 28dvh; overflow-y: auto;
}
.plachta .pole-hodnota {
  padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  font-size: 14.5px; overflow-wrap: anywhere;
}
.plachta .stitek { margin-top: 2px; }
.soubory { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }

/* --- hláška (toast): nad spodní lištou, skrytá opravdu zmizí --- */
#hlaska, .hlaska {
  position: fixed; left: 16px; right: 16px; z-index: 40; margin: 0 auto; max-width: 528px;
  bottom: var(--hlaska-dole, calc(env(safe-area-inset-bottom) + 16px));
  padding: 12px 14px; border-radius: 12px; background: var(--toast-bg); color: var(--toast-ink); font-size: 14.5px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--stin);
  pointer-events: none; /* klepnutí projde na obsah pod hláškou, jen tlačítko v ní se chytá */
}
#hlaska[hidden], .hlaska[hidden] { display: none !important; }
#hlaska button, .hlaska button {
  flex: none; min-height: 38px; border: 0; background: var(--toast-btn); color: var(--toast-ink);
  border-radius: 9px; padding: 0 12px; font-weight: 700; pointer-events: auto;
}
#hlaska .roste { overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .telo, .dole, .hlavicka { padding-left: max(16px, calc((100vw - 640px) / 2)); padding-right: max(16px, calc((100vw - 640px) / 2)); }
  .tabbar { padding-left: max(4px, calc((100vw - 640px) / 2)); padding-right: max(4px, calc((100vw - 640px) / 2)); }
}
@media (max-width: 360px) {
  .trojice .hodnota { font-size: 14.5px; }
  .trojice .hodnota.dlouha { font-size: 13px; }
  .tlacitko { font-size: 15px; padding: 0 12px; }
  .tabbar a { font-size: 10.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .plachta { animation: vyjet 0.18s ease-out; }
  @keyframes vyjet { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
}
@media print {
  #app, #plachta, #hlaska { display: none !important; }
  body::before { display: none !important; }
}