/* FINVOX-DS: 1.3.0
   ^^^ Značka verze. Putuje s každou kopií do aplikace, takže se pozná,
   kdo je pozadu, aniž by se musely porovnávat celé soubory.
   Kontroluje to `ops/kontrola-vzhledu.sh` ve znalostní bázi.
   Při každé změně vrstvy ji zvyš spolu se záznamem v `README.md`.
   ============================================================ */

/* ============================================================
   FINVOX — APLIKAČNÍ ŠABLONA (aplikační vrstva design systému)
   Načítá se ZA tokens.css, base.css a components.css.
   Vše je odvozené z tokenů; nová hodnota jen tam, kde tokeny
   aplikační rozměr nemají (výška lišty, šířka pruhu podsekcí).

   Kostra (rozhodnutí PT 2026-08-09):
   – hlavní sekce v horní navy liště (zlaté podtržení aktivní),
   – podsekce v levém světlém pruhu (zlatý proužek aktivní),
     jen tam, kde podsekce existují,
   – třetí úroveň = taby v hlavičce stránky.
   Jen světlý režim. Jedno primární tlačítko na obrazovku.
   ============================================================ */

:root {
  /* Lišta je vzdušná (podoba převzatá ze Správy uživatelů, rozhodnutí PT
     2026-08-09). Výška ovládacích prvků v liště (hledání, odhlášení, iniciály). Z ní se
     počítá výška lišty — a z výšky lišty zase to, kam se lepí záhlaví tabulky
     a pruh podsekcí. Kdyby lišta rostla podle obsahu nezávisle na téhle hodnotě,
     zajelo by pod ni záhlaví tabulky (změřeno: lišta 86 px, záhlaví na 64 px). */
  --fx-lista-ovladac: 34px;
  --fx-app-lista: calc(var(--fx-lista-ovladac) + 2 * var(--fx-space-5));  /* 74px */
  --fx-znacka-vyska: var(--fx-space-6);                             /* 24px */
  --fx-znacka-zona: calc(var(--fx-znacka-vyska) * 0.78);            /* výška písmene F */
  --fx-app-pruh: 256px;       /* šířka pruhu podsekcí */
  --fx-app-obsah: 1200px;     /* šířka obsahu */

  /* Vrstva 1.3 (rozhodnutí PT 2026-09-24, návrh „sklo“ po kontrole s manuálem):
     rohy o stupeň kulatější — jen hodnoty ze stávající stupnice, žádný nový rozměr —
     a stíny o stupeň výš. Web a tisk zůstávají u manuálu (karty 14, tlačítka 8, pole 4). */
  --fx-app-radius-karta: var(--fx-radius-xl);    /* 22 — karty, tabulka, dlaždice, dialog */
  --fx-app-radius-ovladac: var(--fx-radius-lg);  /* 14 — tlačítka, položky pruhu, toast, hromadná lišta */
  --fx-app-radius-pole: var(--fx-radius-md);     /*  8 — pole, výběr, políčka kódu */
  --fx-app-stin-karta: var(--fx-shadow-2);
  --fx-app-stin-plovouci: var(--fx-shadow-3);

  /* Obruba ovládacího prvku (pole, výběr, přepínač). WCAG 1.4.11 chce u hranice
     ovládacího prvku aspoň 3:1 — `--fx-line-strong` má na bílé 1,67:1 a na ploše
     stránky 1,50:1, takže se pole na pozadí ztrácela (změřeno 2026-08-10).
     `--fx-navy-400` má 3,65:1 na bílé a 3,29:1 na `--fx-paper-cool`. */
  --fx-pole-obruba: var(--fx-navy-400);

  /* Světlé podklady stavů. Odznaky je měly zadrátované v sobě, ale stejný jemný
     podklad potřebují i výstražné panely a zvýrazněné řádky tabulky — jinak si ho
     každá aplikace namíchá z pastelové palety Tailwindu a barvy se rozejdou.

     Podklad se míchá z PŮVODNÍCH, světlejších značkových odstínů, ne ze ztmavených
     `--fx-success` / `--fx-warning` / `--fx-danger` (ty se 2026-08-10 ztmavily kvůli
     čitelnosti písma). Plocha má zůstat vzdušná; kontrast dělá tmavé písmo na ní,
     ne tmavší plocha. Změřeno: ztmavený jantarový podklad srazil `--fx-ink-muted`
     na 4,30 : 1, světlý ho drží na 4,51 : 1 a varovné písmo na 5,01 : 1. */
  --fx-success-tint: rgba(47, 125, 91, 0.1);
  --fx-warning-tint: rgba(184, 132, 42, 0.12);
  --fx-danger-tint:  rgba(179, 65, 65, 0.1);
}

/* ---------- Rám aplikace ---------- */

.fx-aplikace {
  min-height: 100vh;
  background: var(--fx-paper-cool);
  display: flex;
  flex-direction: column;
  font-size: var(--fx-text-14);
}

/* Odkaz v aplikaci není odkaz v článku. Většina odkazů tady jsou řádky tabulky,
   dlaždice a karty — zlaté podtržení z `base.css` z nich dělá hřeben.
   Podtržené jsou proto jen odkazy uvnitř souvislého textu, a ten se musí
   označit (`fx-proza`). Podle značky `<p>` to poznat nejde: karty jsou plné
   odstavců a odkazy v nich se pak podtrhávaly úplně zbytečně. */
.fx-aplikace a { text-decoration: none; }
.fx-aplikace .fx-proza a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--fx-gold);
  text-underline-offset: 3px;
}

/* ---------- Horní lišta: značka + hlavní sekce + uživatel ---------- */

.fx-lista {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--fx-navy);
  /* Zlatá linka pod lištou je podpis značky — má ji Kontrolní systém, POG
     i Kalkulačka. Vzdušné rozměry jsou ze Správy uživatelů, linka zůstává zlatá
     (rozhodnutí PT 2026-08-09). Podtržení aktivní sekce leží o 14 px výš,
     takže se s ní neplete. */
  border-bottom: 2px solid var(--fx-gold);
  color: #fff;
}
/* Lišta jde přes celou šířku okna (obsah stránky zůstává na 1200 px vystředěný) —
   v aplikaci je v liště víc prvků než na webu a na užších monitorech by se
   vystředěná lišta začala lámat. */
.fx-lista__vnitrek {
  padding: var(--fx-space-5) var(--fx-gutter);
  min-height: var(--fx-app-lista);
  display: flex;
  align-items: center;
  gap: var(--fx-space-6);
  min-width: 0;   /* lišta se musí umět zúžit, jinak roztáhne celou stránku */
}
/* Ovládací prvky v liště drží jednu výšku — jinak by nejvyšší z nich rozšířil
   lištu a všechno, co se pod ni lepí, by se schovalo za ni. Platí pro VŠECHNY
   prvky lišty, ne jen pro tlačítka: stačilo, aby byl o čtyři pixely vyšší
   kroužek s iniciálami, a záhlaví tabulky se schovalo za lištu. */
.fx-lista .fx-btn,
.fx-lista__hledani,
.fx-lista__uzivatel,
.fx-lista__inicialy {
  height: var(--fx-lista-ovladac);
  min-height: var(--fx-lista-ovladac);
}
.fx-lista__uzivatel { padding-block: 0; }
/* Pravý shluk lišty — odsune se na konec a drží prvky u sebe. */
.fx-lista__vpravo {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--fx-space-4);
}
/* Tlačítka v navy liště. Zlatá varianta by tu byla třikrát (hledání, odhlášení,
   nabídka) a rozpočet na zlato jsou nejvýš tři prvky na celou obrazovku — proto
   jsou tlumená a vystoupí až po najetí. Odhlášení má tenký světlý obrys, aby se
   dalo najít bez hledání. */
.fx-lista .fx-btn--ghost {
  color: var(--fx-navy-300);
  border-color: transparent;
  background: transparent;
}
.fx-lista .fx-btn--ghost:hover:not(:disabled) {
  color: var(--fx-paper);
  background: var(--fx-navy-700);
  border-color: var(--fx-navy-700);
}
.fx-lista .fx-btn--odhlasit {
  color: var(--fx-paper);
  border-color: var(--fx-navy-500);
}
.fx-lista .fx-napoveda-klavesy {
  color: var(--fx-navy-300);
  border-color: var(--fx-navy-600);
  background: transparent;
}
/* Úroveň oprávnění vedle přihlášeného. Vypisuje se jen u omezených úrovní —
   u plného přístupu by to byl šum, protože tak je aplikace navržená. */
.fx-lista__uroven {
  font-size: var(--fx-text-12);
  letter-spacing: 0.04em;
  color: var(--fx-navy-300);
  border: 1px solid var(--fx-navy-600);
  border-radius: var(--fx-radius-pill);
  padding: 2px var(--fx-space-2);
  white-space: nowrap;
}
/* Kde se míří prstem, potřebují tlačítka plnou cílovou plochu. Lišta o to
   povyroste celá — a protože se z téhle hodnoty počítá, dopočítá se i to,
   kam se lepí záhlaví tabulky. */
@media (pointer: coarse) {
  :root { --fx-lista-ovladac: 44px; }
}
/* Ochranná zóna značky = výška písmene F. Vodorovně ji drží vlastní odsazení,
   svisle odsazení lišty — do zóny tak nezasahuje ani nabídka, ani okraj stránky. */
.fx-lista__znacka {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline-end: var(--fx-znacka-zona);
  text-decoration: none;
}
/* Šířku určuje poměr souboru, ne pevné číslo — jinak vedle loga zůstane prázdno. */
.fx-lista__znacka img, .fx-lista__znacka svg {
  height: var(--fx-znacka-vyska);
  width: auto;
  display: block;
}

.fx-lista__delic {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.22);
  flex: 0 0 auto;
}
.fx-lista__aplikace {
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-size: var(--fx-text-16);
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}

/* Sekce jsou jediný pružný kus lišty: když se nevejdou, roluje se uvnitř nich
   (bez viditelného posuvníku) — nikdy se kvůli nim neroztáhne stránka. */
.fx-lista__sekce {
  display: flex;
  align-items: center;
  gap: var(--fx-space-6);
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.fx-lista__sekce::-webkit-scrollbar { display: none; }
.fx-lista__sekce a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);       /* místo pro ikonu, když ji sekce má */
  /* Dole je místo pro podtržení. Musí být UVNITŘ odkazu: sekce se umí rolovat,
     a co přesahuje ven, by se ořízlo — podtržení by zmizelo. */
  padding: var(--fx-space-1) 0 var(--fx-space-2);
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-14);
  font-weight: 500;
  /* Na navy podkladu: navy-300 drží kontrast, bílá značí aktivní položku. */
  color: var(--fx-navy-300);
  text-decoration: none;
  white-space: nowrap;          /* název sekce se nikdy nezlomí do dvou řádků */
  transition: color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-lista__sekce a:hover { color: var(--fx-paper); }
/* Zlaté podtržení roste zleva doprava; vzduch nad ním dělá odsazení odkazu. */
.fx-lista__sekce a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--fx-gold);
  transition: right var(--fx-dur-base) var(--fx-ease-out);
}
.fx-lista__sekce a.je-aktivni,
.fx-lista__sekce a[aria-current="page"] { color: var(--fx-paper); }
.fx-lista__sekce a.je-aktivni::after,
.fx-lista__sekce a[aria-current="page"]::after,
.fx-lista__sekce a:hover::after { right: 0; }
.fx-lista__sekce a:focus-visible {
  outline: 2px solid var(--fx-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.fx-lista__mezera { flex: 1; }

.fx-lista__hledani {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  width: 240px;
  padding-inline: 12px;
  border-radius: var(--fx-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fx-text-14);
  cursor: text;
}
.fx-lista__hledani svg { flex: 0 0 auto; opacity: 0.75; }
.fx-lista__hledani kbd {
  margin-left: auto;
  font-family: var(--fx-font-text);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  opacity: 0.8;
}

.fx-lista__uzivatel {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-3);
  color: #fff;
  font-size: var(--fx-text-14);
  white-space: nowrap;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--fx-radius-md);
}
.fx-lista__uzivatel:hover { background: rgba(255, 255, 255, 0.08); }
.fx-lista__jmeno { white-space: nowrap; }
/* Na užším monitoru ustoupí jméno iniciálám — lišta se nesmí zalomit ani přetéct.
   Pořadí ustupování: jméno → kontextové doplňky aplikace → název aplikace. */
@media (max-width: 1600px) { .fx-lista__jmeno { display: none; } }
/* Na úzkém monitoru se lišta radši zalomí do dvou řádků, než aby se ořezávaly
   názvy sekcí. Platí pro každou aplikaci, ať to nikdo neřeší znovu u sebe. */
@media (max-width: 1100px) {
  .fx-lista__vnitrek { flex-wrap: wrap; gap: var(--fx-space-4); padding-block: var(--fx-space-3); }
  .fx-lista__mezera { display: none; }
  /* Zalomená lišta nemá předem známou výšku, takže se přestane lepit — jinak by
     se pod ni schovalo záhlaví tabulky. Odroluje se pryč a záhlaví se lepí
     rovnou k hornímu okraji okna. */
  .fx-lista { position: static; }
  :root { --fx-app-lista: 0px; }
}

.fx-lista__inicialy {
  width: var(--fx-lista-ovladac);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Tělo: pruh podsekcí + obsah ---------- */

.fx-telo {
  flex: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Pruh podsekcí se drží při rolování (`position: sticky`), takže je vysoký přesně
   podle svého obsahu — u pěti položek to znamená bílý blok, který skončí v jedné
   třetině obrazovky a světlá plocha stránky pak vypadá jako chyba sazby.
   Bílý sloupec proto kreslí tělo pod ním, na celou svou výšku; pruh na něm jen leží. */
.fx-telo:has(> .fx-pruh) { position: relative; }
.fx-telo:has(> .fx-pruh)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--fx-app-pruh);
  background: var(--fx-paper);
  border-inline-end: 1px solid var(--fx-line);
  pointer-events: none;
}

.fx-pruh {
  width: var(--fx-app-pruh);
  flex: 0 0 auto;
  background: var(--fx-paper);
  border-right: 1px solid var(--fx-line);
  padding-block: var(--fx-space-6);
  position: sticky;
  top: calc(var(--fx-app-lista) + 2px);
  z-index: 1;
  align-self: flex-start;
  max-height: calc(100vh - var(--fx-app-lista) - 2px);
  overflow-y: auto;
}
.fx-pruh__skupina { margin-bottom: var(--fx-space-6); }
.fx-pruh__stitek {
  font-family: var(--fx-font-display);
  text-transform: uppercase;
  letter-spacing: var(--fx-track-eyebrow);
  font-size: 11px;
  font-weight: 600;
  color: var(--fx-gold-700);
  padding-inline: var(--fx-space-5);
  margin-bottom: var(--fx-space-2);
}
.fx-pruh__stitek { padding-inline: var(--fx-space-6); }
/* Vrstva 1.3: položka je pilulka odsazená od okrajů pruhu, ikona sedí v jemné
   dlaždici (u aktivní navy). Zlatý proužek zůstává — jako krátká značka uvnitř
   pilulky, protože levá hrana je zaoblená a plný okraj by se na ní lámal. */
.fx-pruh__odkaz {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fx-space-3);
  margin: 0 var(--fx-space-3) var(--fx-space-1);
  padding: 6px var(--fx-space-3) 6px var(--fx-space-3);
  border-radius: var(--fx-app-radius-ovladac);
  font-size: var(--fx-text-14);
  font-weight: 400;
  color: var(--fx-ink);
  text-decoration: none;
  transition: background-color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-pruh__odkaz > svg,
.fx-pruh__ikona {
  box-sizing: content-box;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 6px;
  border-radius: var(--fx-radius-md);
  background: var(--fx-navy-050);
  color: var(--fx-navy);
}
.fx-pruh__ikona { display: inline-flex; align-items: center; justify-content: center; }
.fx-pruh__ikona > svg { width: 16px; height: 16px; }
.fx-pruh__odkaz:hover { background: var(--fx-navy-050); }
.fx-pruh__odkaz:hover > svg,
.fx-pruh__odkaz:hover .fx-pruh__ikona { background: var(--fx-paper); }
/* `aria-current` je totéž co `je-aktivni` — kdo označí aktivní položku jen pro
   čtečku, dostane i zlatou značku. Jinak by zvýraznění tiše chybělo. */
.fx-pruh__odkaz.je-aktivni,
.fx-pruh__odkaz[aria-current]:not([aria-current="false"]) {
  background: var(--fx-navy-050);
  color: var(--fx-navy);
  font-weight: 600;
}
.fx-pruh__odkaz.je-aktivni::before,
.fx-pruh__odkaz[aria-current]:not([aria-current="false"])::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--fx-gold);
  transform: translateY(-50%);
}
.fx-pruh__odkaz.je-aktivni > svg,
.fx-pruh__odkaz.je-aktivni .fx-pruh__ikona,
.fx-pruh__odkaz[aria-current]:not([aria-current="false"]) > svg,
.fx-pruh__odkaz[aria-current]:not([aria-current="false"]) .fx-pruh__ikona {
  background: var(--fx-navy);
  color: var(--fx-paper);
}
.fx-pruh__pocet {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--fx-ink-muted);
  background: var(--fx-navy-050);
  border-radius: var(--fx-radius-pill);
  padding: 1px 8px;
}
.fx-pruh__odkaz.je-aktivni .fx-pruh__pocet,
.fx-pruh__odkaz[aria-current]:not([aria-current="false"]) .fx-pruh__pocet {
  background: var(--fx-paper);
}

.fx-obsah {
  flex: 1;
  min-width: 0;
  padding: var(--fx-space-8) var(--fx-gutter) var(--fx-space-16);
}
.fx-obsah__vnitrek {
  max-width: var(--fx-app-obsah);
  margin-inline: auto;
  min-width: 0;
}

/* ŠIROKÝ OBSAH — nástěnka, časová osa, tabulka s mnoha sloupci.
   Dvě pravidla, obě povinná:
   1) obrazovka smí zrušit šířku obsahu modifikátorem `--siroky`,
   2) široký prvek **musí rolovat sám v sobě** (`.fx-posuv-x`, u tabulky
      `.fx-tabulka__posuv`) — stránka se do stran neposouvá nikdy.
   Když se do stran posune stránka, ujede pod ní horní lišta i hlavička
   stránky a nad obsahem zůstane prázdné místo. */
.fx-obsah__vnitrek--siroky { max-width: none; }
.fx-posuv-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--fx-space-2);
}

/* ---------- Hlavička stránky (povinná na každé obrazovce) ---------- */

.fx-drobecky {
  display: flex;
  align-items: center;
  gap: var(--fx-space-2);
  font-size: var(--fx-text-12);
  color: var(--fx-ink-muted);
  margin-bottom: var(--fx-space-3);
}
.fx-drobecky a { color: var(--fx-ink-muted); text-decoration: none; }
.fx-drobecky a:hover { color: var(--fx-navy); text-decoration: underline; text-decoration-color: var(--fx-gold); }
.fx-drobecky span[aria-hidden] { color: var(--fx-line-strong); }

.fx-hlavicka {
  display: flex;
  /* Zalomení je povinné: se třemi tlačítky vpravo se textový blok dřív smrskl
     na šířku jednoho slova a nadpis se lámal po slabikách (nahlásil PT 19. 8. 2026).
     Text si proto drží čitelnou šířku a akce se zalomí pod něj. */
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fx-space-6);
  margin-bottom: var(--fx-space-8);
}
.fx-hlavicka > :first-child {
  flex: 1 1 22rem;
  min-width: min(100%, 22rem);
}
.fx-hlavicka__eyebrow {
  font-family: var(--fx-font-display);
  text-transform: uppercase;
  letter-spacing: var(--fx-track-eyebrow);
  font-size: var(--fx-text-12);
  font-weight: 600;
  color: var(--fx-gold-700);
  margin-bottom: var(--fx-space-2);
}
.fx-hlavicka h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
.fx-hlavicka__lede {
  font-size: var(--fx-text-14);
  color: var(--fx-ink-muted);
  margin: var(--fx-space-2) 0 0;
  max-width: 60ch;
}
.fx-hlavicka__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fx-space-3);
  flex: 0 1 auto;
}

/* Taby = třetí úroveň navigace, patří pod hlavičku stránky */
/* Záložky třetí úrovně. Platí pro odkazy i pro tlačítka `role="tab"` — hotové
   knihovní záložky (shadcn) jinak zůstanou ve svém výchozím vzhledu s pilulkou,
   která do systému nepatří. Stačí dát `fx-taby` na jejich obal. */
.fx-taby {
  display: flex;
  flex-wrap: wrap;
  /* Zarovnání i výška se vypisují schválně: hotové záložky (shadcn) si nesou
     `justify-center` a pevnou výšku, takže by jinak seděly uprostřed stránky. */
  justify-content: flex-start;
  height: auto;
  gap: var(--fx-space-6);
  border-bottom: 1px solid var(--fx-line);
  margin-bottom: var(--fx-space-6);
  background: transparent;
  padding: 0;
}
.fx-taby a,
.fx-taby [role="tab"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  padding: 10px 2px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-14);
  font-weight: 500;
  color: var(--fx-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.fx-taby a:hover,
.fx-taby [role="tab"]:hover { color: var(--fx-navy); }
.fx-taby a.je-aktivni,
.fx-taby [role="tab"][data-state="active"],
.fx-taby [role="tab"][aria-selected="true"] {
  color: var(--fx-navy);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}
.fx-taby a.je-aktivni::after,
.fx-taby [role="tab"][data-state="active"]::after,
.fx-taby [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--fx-gold);
}
.fx-taby [role="tab"]:focus-visible {
  outline: 2px solid var(--fx-gold);
  outline-offset: 2px;
}

/* ---------- Nástrojová lišta seznamu: hledání + filtry ---------- */

.fx-nastroje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fx-space-3);
  margin-bottom: var(--fx-space-4);
}
.fx-nastroje .fx-input,
.fx-nastroje .fx-select {
  width: auto;
  min-width: 160px;
  padding-block: 8px;
  font-size: var(--fx-text-14);
}
.fx-nastroje__hledani { position: relative; }
.fx-nastroje__hledani svg {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--fx-ink-subtle);
  pointer-events: none;
}
.fx-nastroje__hledani .fx-input { padding-left: 34px; width: 260px; }
/* Počet nalezených se odsune doprava — je to výsledek, ne další ovladač. */
.fx-nastroje__pocet {
  margin-inline-start: auto;
  font-size: var(--fx-text-14);
  color: var(--fx-ink-muted);
  font-feature-settings: "tnum";
}

.fx-filtry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fx-space-2);
  margin-bottom: var(--fx-space-4);
  font-size: 13px;
}
/* Bez tohohle by atribut hidden nic neudělal — display: flex ho přebije. */
.fx-filtry[hidden], .fx-nastroje[hidden] { display: none; }
.fx-filtr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: var(--fx-radius-pill);
  background: var(--fx-navy-050);
  color: var(--fx-navy);
  font-weight: 500;
}
.fx-filtr button {
  display: inline-flex;
  border: 0;
  background: transparent;
  color: var(--fx-ink-muted);
  padding: 2px;
  border-radius: 50%;
  line-height: 0;
}
.fx-filtr button:hover { color: var(--fx-danger); background: var(--fx-paper); }
.fx-filtry__zrusit {
  border: 0;
  background: transparent;
  color: var(--fx-ink-muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--fx-gold);
  cursor: pointer;
}
.fx-filtry__zrusit:hover { color: var(--fx-navy); }
.fx-filtry__pocet { margin-left: auto; color: var(--fx-ink-muted); }

/* ---------- Datová tabulka ---------- */

/* Obal NESMÍ mít `overflow: hidden`. Udělal by z sebe vlastní posuvnou schránku
   a přilepené záhlaví by se pak lepilo k ní, ne k oknu prohlížeče — takže by
   při rolování dlouhého seznamu zmizelo. Zaoblení proto obstarají krajní buňky. */
.fx-tabulka {
  background: var(--fx-paper);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-karta);
  box-shadow: var(--fx-app-stin-karta);
}
/* Tabulka uvnitř karty: rám dodává karta, tabulka si nechává jen sazbu. Třídu
   `fx-tabulka` je potřeba nechat — všechna pravidla pro `th` a `td` visí na ní,
   takže bez ní se z tabulky stane holá mřížka bez odsazení a bez záhlaví. */
.fx-tabulka--holy {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* První sloupec lícuje s textem karty. Poslední si odsazení nechává — bez něj
   se do úzkého sloupce akcí nevejde ani jeho vlastní nadpis a poslední písmeno
   se ořízne. */
.fx-tabulka--holy th:first-child,
.fx-tabulka--holy td:first-child { padding-inline-start: 0; }
/* Široká tabulka roluje sama v sobě. Pozor: tím se vzdává přilepeného záhlaví —
   posuvná schránka ho zachytí a záhlaví se lepí k ní, ne k oknu. Používej jen
   tam, kde se sloupce nevejdou. */
.fx-tabulka__posuv { overflow-x: auto; overscroll-behavior-x: contain; }
.fx-tabulka table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fx-text-14);
}
.fx-tabulka thead tr:first-child th:first-child { border-start-start-radius: var(--fx-app-radius-karta); }
.fx-tabulka thead tr:first-child th:last-child { border-start-end-radius: var(--fx-app-radius-karta); }
.fx-tabulka tbody tr:last-child td:first-child { border-end-start-radius: var(--fx-app-radius-karta); }
.fx-tabulka tbody tr:last-child td:last-child { border-end-end-radius: var(--fx-app-radius-karta); }
.fx-tabulka th {
  /* Záhlaví se zastaví pod horní lištou, ne na nule — jinak pod ni zajede.
     +2 px je zlatá linka pod lištou; bez ní by se záhlaví lepilo o kousek výš. */
  position: sticky;
  top: calc(var(--fx-app-lista) + 2px);
  z-index: 1;
  text-align: left;
  font-family: var(--fx-font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
  color: var(--fx-ink-muted);
  background: var(--fx-paper-cool);
  border-bottom: 1px solid var(--fx-line-strong);
  padding: 10px var(--fx-space-4);
  white-space: nowrap;
}
/* Uvnitř posuvné schránky musí být odsazení nulové. S odsazením od horní lišty
   by se záhlaví posunulo o výšku lišty dolů a leželo by přes druhý řádek —
   schránka totiž o liště nic neví. */
.fx-tabulka__posuv th { top: 0; }
.fx-tabulka td {
  padding: 12px var(--fx-space-4);
  border-bottom: 1px solid var(--fx-line);
  vertical-align: middle;
}
.fx-tabulka tbody tr:last-child td { border-bottom: 0; }
.fx-tabulka tbody tr { transition: background-color var(--fx-dur-fast) var(--fx-ease-out); }
.fx-tabulka tbody tr:hover { background: var(--fx-navy-050); }
.fx-tabulka tbody tr.je-klikaci { cursor: pointer; }
.fx-tabulka tbody tr.je-vybrany { background: var(--fx-gold-050); }
/* Značky obsahu. Platí i mimo tabulku — pod 900 px se seznamy překlápějí na
   položky a číslo musí zůstat číslem. Zarovnání vpravo dává smysl jen ve sloupci,
   proto zůstává vázané na tabulku. */
.je-cislo, .je-kod { font-variant-numeric: tabular-nums; }
.je-kod { white-space: nowrap; }
.je-vedlejsi { color: var(--fx-ink-muted); font-size: 13px; }
.fx-tabulka .je-cislo { text-align: right; }
.fx-tabulka input[type="checkbox"] { accent-color: var(--fx-navy); width: 16px; height: 16px; }

/* Řaditelné záhlaví — 3 stavy, šipka jen u aktivního */
.fx-tabulka th button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.fx-tabulka th button:hover { color: var(--fx-gold-700); text-decoration: underline; text-underline-offset: 3px; }
.fx-tabulka th button:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }
/* Šipka je vidět vždycky, jen tiše — když se objeví teprve po najetí myší, není
   na obrazovce poznat, že sloupcem jde vůbec řadit. Aktivní sloupec ji má plnou.
   Pozor na výběr: `th[aria-sort]` by chytlo i `aria-sort="none"`, které se na
   řaditelné záhlaví patří psát vždy — proto se vypisují oba činné stavy. */
.fx-tabulka th .fx-sipka {
  display: inline-flex;
  opacity: 0.4;
  transition: opacity var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-tabulka th[aria-sort="ascending"],
.fx-tabulka th[aria-sort="descending"] { color: var(--fx-navy); }
.fx-tabulka th[aria-sort="ascending"] .fx-sipka,
.fx-tabulka th[aria-sort="descending"] .fx-sipka { opacity: 1; }
.fx-tabulka th[aria-sort="descending"] .fx-sipka { transform: rotate(180deg); }

/* Odkaz uvnitř hustého seznamu. Podtržení až na najetí — v tabulce, kde je
   odkazem skoro každý řádek, by trvalé podtržení dělalo ze sloupce hřeben. */
.fx-odkaz {
  color: var(--fx-navy);
  font-weight: 500;
  text-decoration: none;
}
.fx-odkaz:hover {
  color: var(--fx-gold-700);
  text-decoration: underline;
  text-decoration-color: var(--fx-gold);
  text-underline-offset: 3px;
}

/* Řádkové akce: 1–2 ikony, zbytek do „…" */
.fx-tabulka__akce {
  display: inline-flex;
  border: 0;
  background: transparent;
  color: var(--fx-ink-subtle);
  padding: 6px;
  border-radius: var(--fx-radius-sm);
  cursor: pointer;
}
.fx-tabulka__akce:hover { color: var(--fx-navy); background: var(--fx-navy-050); }

/* Patka tabulky: stránkování */
.fx-strankovani {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Zalomení: bez něj se na telefonu tři kusy stránkování vedle sebe nevejdou
     a roztlačí celou stránku doprava (naměřeno 496 px v okně širokém 390). */
  flex-wrap: wrap;
  gap: var(--fx-space-4);
  padding: 10px var(--fx-space-4);
  border-top: 1px solid var(--fx-line);
  background: var(--fx-paper);
  font-size: 13px;
  color: var(--fx-ink-muted);
}
.fx-strankovani__na-stranku { display: inline-flex; align-items: center; gap: var(--fx-space-2); }
.fx-strankovani select {
  border: 1px solid var(--fx-line-strong);
  border-radius: var(--fx-radius-sm);
  padding: 3px 6px;
  font: inherit;
  color: var(--fx-ink);
  background: var(--fx-paper);
}
.fx-strankovani__stranky { display: inline-flex; align-items: center; gap: 4px; }
.fx-strankovani__stranky button {
  min-width: 30px;
  height: 30px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--fx-radius-sm);
  font: inherit;
  color: var(--fx-ink);
  cursor: pointer;
}
.fx-strankovani__stranky button:hover { background: var(--fx-navy-050); }
.fx-strankovani__stranky button.je-aktivni {
  background: var(--fx-navy);
  color: #fff;
  font-weight: 600;
}
.fx-strankovani__stranky button:disabled { color: var(--fx-line-strong); cursor: default; background: transparent; }

/* Hromadná lišta po výběru řádků */
.fx-hromadna {
  position: sticky;
  bottom: var(--fx-space-4);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--fx-space-4);
  margin-top: var(--fx-space-4);
  padding: 10px var(--fx-space-5);
  background: var(--fx-navy);
  color: #fff;
  border-radius: var(--fx-app-radius-ovladac);
  box-shadow: var(--fx-app-stin-plovouci);
  font-size: var(--fx-text-14);
}
.fx-hromadna[hidden] { display: none; }
.fx-hromadna strong { font-weight: 600; }
.fx-hromadna .fx-btn { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: transparent; }
.fx-hromadna .fx-btn:hover { background: rgba(255, 255, 255, 0.1); }
.fx-hromadna__zavrit {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: var(--fx-radius-sm);
}
.fx-hromadna__zavrit:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Plovoucí varianta lišty. Přilepený pruh na konci tabulky zmizí pod patičkou
   všude, kde se roluje dlouhý seznam; tahle visí nad stránkou uprostřed dolního
   okraje a je vidět pořád. Tvar pilulky ji odliší od obsahu za ní. */
.fx-hromadna--plovouci {
  position: fixed;
  left: 50%;
  bottom: var(--fx-space-6);
  transform: translateX(-50%);
  z-index: 60;
  margin-top: 0;
  padding: var(--fx-space-3) var(--fx-space-5);
  /* Zaoblený obdélník, ne pilulka. Lišta se zalamuje — nese počet, tlačítka
     a někdy i větu, proč je akce zašedlá — a plné zaoblení na vysokém boxu
     ukusuje kraje textu. */
  border-radius: var(--fx-app-radius-ovladac);
  max-width: calc(100vw - var(--fx-space-8));
  flex-wrap: wrap;
}
/* Počet vybraných je číslo, ne text — tabulkové číslice, ať neposkakuje. */
.fx-hromadna__pocet {
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.fx-hromadna .fx-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fx-hromadna .fx-btn--inverse:hover:not(:disabled) { box-shadow: var(--fx-shadow-2); }
/* Proč je akce zašedlá, se píše do lišty: u zakázaného prvku bublina nenaskočí. */
.fx-hromadna__duvod {
  width: 100%;
  font-size: var(--fx-text-12);
  color: rgba(255, 255, 255, 0.75);
}
.fx-hromadna__postup {
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-1);
  width: 100%;
  font-size: var(--fx-text-12);
}

/* Pruh postupu. Samostatná drobnost, ne jen kus hromadné lišty — hodí se
   všude, kde běh trvá déle než okamžik (import, dávka, nahrávání). */
.fx-postup {
  height: 3px;
  width: 100%;
  border-radius: var(--fx-radius-pill);
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.fx-postup__vypln {
  height: 100%;
  background: var(--fx-gold);
  transition: width var(--fx-dur-base) var(--fx-ease-out);
}
/* Postup po desetinách. Šířka se nesází inline — v `src/` nemá být jediný
   rozměr natvrdo a jedenáct kroků na běžnou dávku bohatě stačí. */
.fx-postup__vypln[data-podil="0"] { width: 0%; }
.fx-postup__vypln[data-podil="1"] { width: 10%; }
.fx-postup__vypln[data-podil="2"] { width: 20%; }
.fx-postup__vypln[data-podil="3"] { width: 30%; }
.fx-postup__vypln[data-podil="4"] { width: 40%; }
.fx-postup__vypln[data-podil="5"] { width: 50%; }
.fx-postup__vypln[data-podil="6"] { width: 60%; }
.fx-postup__vypln[data-podil="7"] { width: 70%; }
.fx-postup__vypln[data-podil="8"] { width: 80%; }
.fx-postup__vypln[data-podil="9"] { width: 90%; }
.fx-postup__vypln[data-podil="10"] { width: 100%; }

@media (max-width: 900px) {
  .fx-hromadna--plovouci {
    left: var(--fx-space-4);
    right: var(--fx-space-4);
    transform: none;
    justify-content: center;
  }
}

/* ---------- Stavové odznaky (nikdy jen barva, zlato nikdy jako stav) ---------- */

.fx-stav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fx-text-12);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--fx-radius-pill);
  white-space: nowrap;
}
.fx-stav::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fx-stav--uspech   { background: var(--fx-success-tint); color: var(--fx-success); }
.fx-stav--varovani { background: var(--fx-warning-tint); color: var(--fx-warning); }
.fx-stav--chyba    { background: var(--fx-danger-tint);  color: var(--fx-danger); }
.fx-stav--info     { background: var(--fx-navy-050);       color: var(--fx-info); }
.fx-stav--neutral  { background: var(--fx-navy-050);       color: var(--fx-ink-muted); }

/* ---------- Dlaždice s čísly (KPI) ---------- */

.fx-kpi-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--fx-space-5);
  margin-bottom: var(--fx-space-8);
}
.fx-kpi {
  background: var(--fx-paper);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-karta);
  padding: var(--fx-space-5) var(--fx-space-6);
  box-shadow: var(--fx-app-stin-karta);
}
a.fx-kpi { text-decoration: none; display: block; transition: border-color var(--fx-dur-base) var(--fx-ease-out), box-shadow var(--fx-dur-base) var(--fx-ease-out); }
a.fx-kpi:hover { border-color: var(--fx-gold); box-shadow: var(--fx-app-stin-plovouci); }
.fx-kpi__stitek {
  display: block;   /* funguje i na <span>, nejen na <div> */
  font-size: var(--fx-text-12);
  font-weight: 500;
  color: var(--fx-ink-muted);
  margin-bottom: var(--fx-space-2);
}
.fx-kpi__hodnota {
  display: block;
  font-size: var(--fx-text-30);
  font-weight: 600;
  color: var(--fx-navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fx-kpi__pozn { display: block; font-size: var(--fx-text-12); color: var(--fx-ink-muted); margin-top: var(--fx-space-2); }
.fx-kpi__pozn.je-uspech { color: var(--fx-success); }
.fx-kpi__pozn.je-chyba { color: var(--fx-danger); }

/* Dlaždice jako odkaz: celá je klikací plocha, ne odkaz uvnitř ní. */
.fx-kpi--odkaz {
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--fx-dur-base) var(--fx-ease-out),
    box-shadow var(--fx-dur-base) var(--fx-ease-out),
    border-color var(--fx-dur-base) var(--fx-ease-out);
}
.fx-kpi--odkaz:hover {
  transform: translateY(-2px);
  box-shadow: var(--fx-app-stin-plovouci);
  border-color: var(--fx-line-strong);
  color: inherit;
}
/* Tmavá dlaždice — jediná tmavá plocha obrazovky, nejvýš jedna (§8 systému). */
.fx-kpi--inverse {
  background: var(--fx-navy);
  border-color: var(--fx-navy);
}
.fx-kpi--inverse .fx-kpi__stitek { color: var(--fx-navy-300); }
.fx-kpi--inverse .fx-kpi__hodnota { color: var(--fx-gold); }
.fx-kpi--inverse .fx-kpi__pozn { color: var(--fx-navy-300); }
.fx-kpi--inverse.fx-kpi--odkaz:hover { border-color: var(--fx-gold); }

/* Trend pod číslem: šipka a rozdíl proti minulému období. Barva jde po směru,
   ne po tom, jestli je to dobře — to ví jen ten, kdo se na číslo dívá. */
.fx-kpi__pozn[data-smer] {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-1);
}
.fx-kpi__pozn[data-smer="nahoru"] { color: var(--fx-success); }
.fx-kpi__pozn[data-smer="dolu"] { color: var(--fx-danger); }

/* Vrstva 1.3: dlaždice s ikonou a poznámkou v pilulce. Ikona sedí v jemné dlaždici
   vedle popisku (`fx-kpi__zahlavi` + `fx-kpi__ikona`); poznámka je pilulka se značkou
   (šipka nebo tečka) a textem — stav nikdy jen barvou. */
.fx-kpi__zahlavi {
  display: flex;
  align-items: center;
  gap: var(--fx-space-3);
  margin-bottom: var(--fx-space-3);
}
.fx-kpi__zahlavi .fx-kpi__stitek { margin-bottom: 0; }
.fx-kpi__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--fx-space-8);
  height: var(--fx-space-8);
  border-radius: var(--fx-radius-md);
  background: var(--fx-navy-050);
  color: var(--fx-navy);
}
.fx-kpi__pozn--pilulka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--fx-space-3);
  padding: 3px 10px;
  border-radius: var(--fx-radius-pill);
  font-weight: 600;
  background: var(--fx-navy-050);
}
.fx-kpi__pozn--pilulka.je-uspech { background: var(--fx-success-tint); }
.fx-kpi__pozn--pilulka.je-chyba { background: var(--fx-danger-tint); }

/* ---------- Sekce / karta se záhlavím ---------- */

.fx-sekce {
  background: var(--fx-paper);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-karta);
  box-shadow: var(--fx-app-stin-karta);
  margin-bottom: var(--fx-space-6);
}
.fx-sekce__zahlavi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-space-4);
  padding: var(--fx-space-4) var(--fx-space-6);
  border-bottom: 1px solid var(--fx-line);
}
.fx-sekce__titul {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-16);
  font-weight: 600;
  color: var(--fx-navy);
}
.fx-sekce__telo { padding: var(--fx-space-6); }
.fx-sekce__telo--tesne { padding: 0; }

/* Popisný seznam (detail jen ke čtení) */
.fx-popis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fx-space-5) var(--fx-space-6);
  margin: 0;
}
.fx-popis div { min-width: 0; }
.fx-popis dt {
  font-size: var(--fx-text-12);
  font-weight: 500;
  color: var(--fx-ink-muted);
  margin-bottom: 3px;
}
.fx-popis dd {
  margin: 0;
  font-size: var(--fx-text-14);
  color: var(--fx-ink);
  overflow-wrap: break-word;
}
.fx-popis dd.je-prazdne { color: var(--fx-ink-subtle); }

/* Detail: obsah vlevo, metadata vpravo */
.fx-detail {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--fx-space-6);
  align-items: start;
}

/* Svislá časová osa (historie) */
.fx-osa { list-style: none; margin: 0; padding: 0; }
.fx-osa li {
  position: relative;
  padding: 0 0 var(--fx-space-5) var(--fx-space-6);
}
.fx-osa li::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: -6px;
  width: 2px;
  background: var(--fx-line);
}
.fx-osa li:last-child::before { display: none; }
.fx-osa li::after {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--fx-paper);
  border: 3px solid var(--fx-navy-300);
}
.fx-osa li.je-zvyraznena::after { border-color: var(--fx-gold); }
.fx-osa__kdy { font-size: var(--fx-text-12); color: var(--fx-ink-muted); }
.fx-osa__co { font-size: var(--fx-text-14); color: var(--fx-ink); }

/* ---------- Formuláře (doplnění k fx-field z components.css) ----------
   V aplikaci je polí na obrazovce mnohem víc než na webu a stojí často přímo
   na ploše stránky, ne na bílé kartě — s obrubou z `--fx-line-strong` splývala.
   Proto má aplikační vrstva vlastní, tmavší obrubu; na webu zůstává původní. */

.fx-aplikace .fx-input,
.fx-aplikace .fx-select,
.fx-aplikace .fx-textarea {
  border-color: var(--fx-pole-obruba);
}
.fx-aplikace .fx-input:hover:not(:disabled),
.fx-aplikace .fx-select:hover:not(:disabled),
.fx-aplikace .fx-textarea:hover:not(:disabled) {
  border-color: var(--fx-navy-500);
}
.fx-aplikace .fx-input:disabled,
.fx-aplikace .fx-select:disabled,
.fx-aplikace .fx-textarea:disabled {
  border-color: var(--fx-line-strong);
  background: var(--fx-navy-050);
  color: var(--fx-ink-subtle);
}

/* Totéž pro pole ze shadcn/ui (`border-input`, spouštěč výběru, přepínač).
   Aplikace je mají promíchané s `fx-*` poli a jinak by v jedné řádce filtrů
   byla dvě různě silná ohraničení. Most `--input` v tématu aplikace se
   nastavuje na stejný odstín — tohle je pojistka, když ho někdo obejde. */
.fx-aplikace [data-slot="select-trigger"],
.fx-aplikace [data-slot="input"],
.fx-aplikace [data-slot="textarea"],
.fx-aplikace [role="combobox"] {
  border-color: var(--fx-pole-obruba);
}

.fx-formular { max-width: 640px; }
.fx-formular__sekce { margin-bottom: var(--fx-space-8); }
.fx-formular__sekce > h2 {
  font-size: var(--fx-text-16);
  font-weight: 600;
  margin-bottom: var(--fx-space-4);
  padding-bottom: var(--fx-space-2);
  border-bottom: 1px solid var(--fx-line);
}
.fx-field--chyba .fx-input,
.fx-field--chyba .fx-select,
.fx-field--chyba .fx-textarea { border-color: var(--fx-danger); }
.fx-field--chyba .fx-input:focus { box-shadow: 0 0 0 3px rgba(179, 65, 65, 0.15); }
.fx-field__chyba {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fx-text-12);
  color: var(--fx-danger);
  margin-top: var(--fx-space-2);
}
.fx-formular__akce {
  display: flex;
  gap: var(--fx-space-3);
  margin-top: var(--fx-space-12);
}

/* ---------- Prázdné stavy (vždy: obrázek nebo ikona + věta proč + cesta ven) ----------
   Holá věta „nic tu není" nestačí. Prázdnou obrazovku člověk čte právě proto,
   že neví, co dál — proto povinně jedna vysvětlující věta a akce.
   Obrázková varianta (`__obrazek`) je základní: kreslené značky v `ilustrace/`.
   Ikonová (`__ikona`) je pro těsná místa uvnitř panelu. */

.fx-prazdno {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fx-space-3);
  /* Bílý podklad, ne studený — plocha stránky je studená a prázdný stav by se
     na ní ztratil. Takhle zabere přesně to místo, kde měl být obsah. */
  background: var(--fx-paper);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-karta);
  padding: var(--fx-space-12) var(--fx-space-6);
}
/* Uvnitř karty nebo tabulky, kde už podklad je — jinak by se plocha zdvojila. */
.fx-prazdno--v-karte { background: transparent; border: 0; border-radius: 0; }
.fx-prazdno__obrazek {
  width: 8rem;
  height: 8rem;
  margin-bottom: var(--fx-space-1);
}
.fx-prazdno__ikona {
  width: 56px; height: 56px;
  margin: 0 auto var(--fx-space-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-navy-050);
  color: var(--fx-navy-500);
}
.fx-prazdno--chyba .fx-prazdno__ikona { background: rgba(179, 65, 65, 0.08); color: var(--fx-danger); }
.fx-prazdno__titul {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-16);
  font-weight: 600;
  color: var(--fx-navy);
  margin: 0;
}
.fx-prazdno__text {
  font-size: var(--fx-text-14);
  color: var(--fx-ink-muted);
  max-width: 46ch;
  margin: 0;
}
.fx-prazdno__akce { margin-top: var(--fx-space-2); }

/* ---------- Načítání: kostra drží rozvržení ----------
   Jeden název pro všechno, co se tváří jako načítaný obsah. Dřív měla každá
   aplikace vlastní (`fx-skeleton` vs. `fx-skelet-bunka`) a vypnutí animací
   pak mířilo na třídu, která na obrazovce vůbec nebyla. */

.fx-kostra {
  display: block;
  border-radius: var(--fx-radius-sm);
  background: linear-gradient(90deg, var(--fx-navy-050) 25%, var(--fx-navy-100) 42%, var(--fx-navy-050) 60%);
  background-size: 240% 100%;
  animation: fx-shimmer 1.6s var(--fx-ease-in-out) infinite;
  min-height: 12px;
}
.fx-kostra--radek { height: var(--fx-space-4); width: 100%; }
.fx-kostra--uzka { height: var(--fx-space-4); width: 60%; }
.fx-kostra--kratka { height: var(--fx-space-4); width: 35%; }
.fx-kostra--cislo { height: var(--fx-space-8); width: 40%; }
@keyframes fx-shimmer {
  from { background-position: 130% 0; }
  to { background-position: -110% 0; }
}

/* ---------- Toast (jediný systém; kritické zprávy nikdy samo-mizející) ---------- */

.fx-toast {
  position: fixed;
  right: var(--fx-space-6);
  bottom: var(--fx-space-6);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--fx-space-3);
  max-width: 380px;
  background: rgb(255 255 255 / 0.86);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  color: var(--fx-ink);
  border: 1px solid var(--fx-line);
  border-left: 4px solid var(--fx-success);
  border-radius: var(--fx-app-radius-ovladac);
  box-shadow: var(--fx-app-stin-plovouci);
  padding: var(--fx-space-4) var(--fx-space-5);
  font-size: var(--fx-text-14);
}
.fx-toast--chyba { border-left-color: var(--fx-danger); }
.fx-toast__akce {
  border: 0;
  background: transparent;
  color: var(--fx-navy);
  font-weight: 600;
  font-size: var(--fx-text-14);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--fx-gold);
  cursor: pointer;
  white-space: nowrap;
}

/* ---------- Překryv + potvrzovací dialog (jen pro destrukci) ---------- */

.fx-preklad {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* Vrstva 1.3: obsah za oknem se rozostří místo ztmavení — kontext zůstává čitelný. */
  background: rgb(20 28 82 / 0.30);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fx-space-6);
}
.fx-dialog {
  background: var(--fx-paper);
  border-radius: var(--fx-app-radius-karta);
  box-shadow: var(--fx-shadow-4);
  max-width: 440px;
  width: 100%;
  padding: var(--fx-space-6);
}
.fx-dialog h2 {
  font-size: var(--fx-text-20);
  font-weight: 600;
  margin-bottom: var(--fx-space-3);
}
.fx-dialog p { font-size: var(--fx-text-14); color: var(--fx-ink-muted); max-width: none; }
.fx-dialog__vycet {
  margin: var(--fx-space-3) 0;
  padding: var(--fx-space-3) var(--fx-space-4);
  background: var(--fx-paper-cool);
  border-radius: var(--fx-app-radius-pole);
  font-size: var(--fx-text-14);
}
.fx-dialog__akce {
  display: flex;
  justify-content: flex-end;
  gap: var(--fx-space-3);
  margin-top: var(--fx-space-6);
}

/* ---------- Modální okno s hlavičkou, tělem a patičkou ----------

   `fx-dialog` výš je karta na jednu otázku. Tohle je to větší: okno, ve kterém
   se pracuje — hlavička s tím, koho se to týká, rolující tělo a patička s akcemi.
   Roluje jen tělo, hlavička a patička drží na místě.

   Vzniklo ve Správě uživatelů u detailu člověka. Sáhne po tom každá aplikace,
   která má „otevřít záznam a něco v něm dělat", takže se nemá vyrábět znovu.

--------------------------------------------------------------------- */

/* Záclona všech modálních oken. Hotové komponenty sázejí černou průhlednou
   plochu; systém čistě černé plochy zakazuje, tak se přebíjí navy. */
.fx-zaclona {
  z-index: 79 !important;   /* těsně pod oknem, ale nad lištou — viz `fx-panel-obal` */
  background: rgb(from var(--fx-navy) r g b / 0.30);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  animation: fx-zaclona-vstup var(--fx-dur-base) var(--fx-ease-out);
}
@keyframes fx-zaclona-vstup {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fx-panel-obal {
  max-height: min(88vh, 60rem);
  /* Okno musí být nad horní lištou (z 60). Hotové sady dialogů sázejí `z-50`
     v utilitách, a ty vyhrávají nad kaskádovými vrstvami bez ohledu na
     specificitu — proto je tady výjimečně `!important`. Na telefonu, kde okno
     zabírá celou plochu, se jinak jeho hlavička schová za lištu. */
  z-index: 80 !important;
  display: grid;
  /* hlavička · záložky · tělo · patka — tělo je jediné, co roluje. Když se počet
     řádků rozejde s počtem prvků, poslední se přeloží přes předchozí a nejde na
     něj kliknout. Bez `minmax(0, 1fr)` u sloupce se mřížka roztáhne na nejširší
     obsah a na telefonu se kus okna uřízne do strany bez možnosti se k němu
     dostat. Šířka patří na komponentu, ne sem — utilita z hotové sady ji odsud
     stejně přebije. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--fx-paper);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-karta);
  font-family: var(--fx-font-text);
  color: var(--fx-ink);
}
.fx-panel__hlava {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fx-space-4);
  padding: var(--fx-space-6) var(--fx-space-6) var(--fx-space-4);
  border-bottom: 1px solid var(--fx-line);
}
/* `min-height: 0` je to, co v mřížce dovolí buňce být nižší než její obsah —
   bez toho se řádek roztáhne a rolovat není co. */
.fx-panel__telo {
  min-height: 0;
  overflow-y: auto;
  padding: var(--fx-space-6);
}
/* Zalomení kvůli patičce se čtyřmi tlačítky: na úzké obrazovce by se bez něj
   vysypala ven z okna. */
.fx-panel__pata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fx-space-3);
  padding: var(--fx-space-4) var(--fx-space-6);
  border-top: 1px solid var(--fx-line);
  background: var(--fx-paper-cool);
}
/* Vysouvací panel u kraje obrazovky: obsah roluje uvnitř, ne celá stránka. */
.fx-panel-sheet {
  max-height: 80dvh;
  overflow-y: auto;
}

/* Rozbalovací nabídky OTEVŘENÉ Z MODÁLNÍHO OKNA musí být nad ním.
   Hotové sady je sázejí do portálu na konec stránky s `z-50`, kdežto okno má
   `z-index: 80` (viz `fx-panel-obal`) — nabídka se pak vykreslí POD oknem a je
   z ní vidět leda kus u okraje. Nahlásil PT 2026-08-21 u přidělení role v detailu
   člověka: rozbalovací nabídka rolí se schovala za okno a nešlo v ní vybírat.
   Platí pro všechny plovoucí prvky, které umí vyjet z okna. Řeší se ve vrstvě
   (ne v aplikaci), protože okno i nabídky jsou její součást. Hodnota drží pod
   toastem (100) — hlášení musí zůstat vidět i nad rozbalenou nabídkou. */
[data-radix-popper-content-wrapper] {
  z-index: 95 !important;
}
/* Tooltip a vyskakovací bublina jedou stejným portálem — ať je pořadí zjevné. */
[data-radix-tooltip-content],
[data-radix-hover-card-content] {
  z-index: 96;
}

/* Potvrzovací okno a vysouvací panely musí být NAD záclonou (79) — jinak jsou
   vidět, ale nejde na ně kliknout.

   Hotové sady sázejí obsahu okna `z-50` v utilitě. `fx-panel-obal` si to zvedá
   na 80, ale `fx-dialog` (potvrzení akce, okno s heslem) a `fx-sheet`
   (hromadná akce a nabídka na úzké obrazovce) zůstávaly na 50, tedy POD vlastní
   záclonou. Záclona je průhledná, takže okno bylo celé vidět a vypadalo živě —
   jenže každý klik na tlačítko spolkla ona a nestalo se vůbec nic. U potvrzení
   destruktivní akce se navíc na záclonu neklika nezavírá, takže se okno ani
   nedalo odklepnout myší.

   Nahlásil PT 2026-09-03: u člověka „test" nešel vypnout přístup do Radaru —
   přepínač otevřel potvrzení, ale „Odebrat přístup" bylo mrtvé. V historii
   změn není po zápisu ani stopa, protože se do databáze nikdy nedostal.
   Vzniklo to s vrstvou 1.2.16, která zavedla `z-index: 79` na záclonu; 1.2.21
   pak zvedla okno (80) a rozbalovací nabídky (95), na potvrzení se zapomnělo.

   Hodnota 90 drží nad oknem (80), aby šlo potvrzovat i z detailu člověka,
   a pod nabídkami (95) a toastem (100). */
.fx-dialog {
  z-index: 90 !important;
}


/* Text uvnitř dialogu. */
.fx-dialog__nadpis {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-20);
  color: var(--fx-ink);
}
.fx-dialog__popis {
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-14);
  color: var(--fx-ink-muted);
}
/* Výčet toho, čeho se akce dotkne — když je dlouhý, roluje uvnitř sebe. */
.fx-dialog__seznam {
  list-style: none;
  margin: 0;
  padding: var(--fx-space-3);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-pole);
  background: var(--fx-paper-cool);
  font-size: var(--fx-text-14);
  max-height: 12rem;
  overflow-y: auto;
}
.fx-dialog__seznam li { padding: 2px 0; }
.fx-dialog__zbytek { color: var(--fx-ink-muted); }
/* Poslední pole si spodní mezeru nebere — o rozestup k tlačítkům se stará dialog. */
.fx-dialog__pole .fx-field:last-child { margin-bottom: 0; }

/* Vstup vycentrovaného okna zdola nahoru. Vysouvací panely mají vlastní směr
   (zprava nebo zdola) a tenhle posun by je odsunul mimo obraz.

   Hýbe se vlastností `translate`, ne `transform`: okno vystřeďuje utilita, která
   sází právě `translate`. Kdyby animace sahala na `transform`, obě posunutí by se
   sečetla a okno by se po celou dobu vstupu kreslilo o půl své velikosti vlevo
   nahoře — a teprve po doběhnutí skočilo doprostřed. */
.fx-panel-obal,
.fx-dialog:not(.fx-sheet) {
  animation: fx-modal-vstup var(--fx-dur-slow) var(--fx-ease-emphasized);
}
@keyframes fx-modal-vstup {
  from { opacity: 0; translate: -50% calc(-50% + var(--fx-space-2)); }
  to { opacity: 1; translate: -50% -50%; }
}

/* Na telefonu okno nepřechází na celou plochu. Šířku mu dává komponenta (utilita
   z hotové sady, kterou vrstva nepřebije), takže by z „celé plochy" byl jen
   full-height obdélník s mezerou po stranách — půl na půl. Zůstává kartou
   s mezerou kolem dokola; výšku drží `max-height` výš. Vstupní animace se ale
   na úzké obrazovce vypíná: okno je skoro celá plocha a posun působí trhaně. */
@media (max-width: 900px) {
  .fx-panel-obal { animation: none; }
}

/* Zaostření má v celé rodině jednu podobu. `components.css` dává tlačítkům
   vlastní 2px zlatý obrys; do marketingových souborů se nesahá, tak se to
   dorovnává tady. */
.fx-btn:focus-visible {
  outline: 1.5px solid var(--fx-navy);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgb(from var(--fx-gold) r g b / 0.25);
}
/* Cílová plocha nejméně 44 × 44 px — malé tlačítko mělo dosud jen asi 37. */
.fx-btn--sm {
  padding-block: var(--fx-space-3);
  min-height: calc(var(--fx-space-10) + var(--fx-space-1));
}
/* Drobné prvky v tabulce dorostou na plnou cílovou plochu tam, kde se míří
   prstem. Na myši by 44 px jen rozvolnilo řádek, kvůli kterému se hustota
   zvyšovala. */
@media (pointer: coarse) {
  .fx-pruh__odkaz,
  .fx-tabulka th button { min-height: calc(var(--fx-space-10) + var(--fx-space-1)); }
}

/* Zpátky o úroveň výš. Tišší než odkaz v textu — je to navigace, ne obsah. */
.fx-zpet {
  display: inline-block;
  font-size: var(--fx-text-14);
  color: var(--fx-ink-muted);
  text-decoration: none;
  margin-bottom: var(--fx-space-2);
}
.fx-zpet:hover { color: var(--fx-gold-700); }

/* Jméno záznamu jako tlačítko, které ho otevře. `fx-odkaz` zůstává výhradně
   skutečným odkazům — dokud měly oba prvky stejný kabát, nedalo se poznat,
   co otevře okno a co odejde na jinou stránku. */
.fx-jmeno {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--fx-navy);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.fx-jmeno:hover {
  text-decoration: underline;
  text-decoration-color: var(--fx-gold);
  text-underline-offset: 3px;
}

/* Nebezpečná akce — plná červená, jen v potvrzovacím dialogu */
.fx-btn--nebezpeci {
  background: var(--fx-danger);
  color: #fff;
  border-color: var(--fx-danger);
}
.fx-btn--nebezpeci:hover { background: #9d3737; border-color: #9d3737; }

/* ---------- Průvodce (stepper) ---------- */

.fx-kroky {
  display: flex;
  align-items: center;
  gap: var(--fx-space-2);
  margin-bottom: var(--fx-space-8);
  flex-wrap: wrap;
}
.fx-krok {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  font-size: 13px;
  color: var(--fx-ink-muted);
}
.fx-krok__cislo {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--fx-line-strong);
  font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.fx-krok.je-hotovy .fx-krok__cislo {
  background: var(--fx-navy);
  border-color: var(--fx-navy);
  color: #fff;
}
.fx-krok.je-aktivni { color: var(--fx-navy); font-weight: 600; }
.fx-krok.je-aktivni .fx-krok__cislo {
  border-color: var(--fx-gold);
  box-shadow: 0 0 0 3px rgba(189, 156, 103, 0.25);
  color: var(--fx-navy);
}
.fx-kroky__spojka { width: 24px; height: 1.5px; background: var(--fx-line-strong); }

/* ---------- Přihlášení (jednorázový kód, vázané na Správu uživatelů) ---------- */

.fx-prihlaseni {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--fx-paper);
}
.fx-prihlaseni__panel {
  /* Vrstva 1.3: panel dostal hloubku — druhé světlo vpravo nahoře a dva skleněné
     kruhy (pseudoprvky, bez změny značek). Zlato zůstává jen v záři dole. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 55% at 18% 108%, rgba(189, 156, 103, 0.34), transparent 62%),
    radial-gradient(55% 45% at 92% 6%, rgb(91 100 156 / 0.6), transparent 66%),
    linear-gradient(160deg, var(--fx-navy-900) 0%, var(--fx-navy) 58%, var(--fx-navy-700) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--fx-space-12);
}
/* `align-self` je potřeba: panel je svislý flex a bez něj se obrázek roztáhne
   na celou šířku, takže se logo v SVG vystředí doprostřed panelu.

   Selektor musí vynechat ilustraci: `.fx-prihlaseni__panel img` by ji srazil
   na výšku loga (34 px). Přesně na tohle narazila Správa uživatelů, která si
   proto postavila vlastní variantu celé obrazovky — a ta se pak od ostatních
   aplikací rozešla. */
.fx-prihlaseni__panel::before,
.fx-prihlaseni__panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
  pointer-events: none;
}
.fx-prihlaseni__panel::before { width: 300px; height: 300px; left: -90px; top: 16%; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -40px 80px rgba(189, 156, 103, 0.10); }
.fx-prihlaseni__panel::after { width: 220px; height: 220px; right: -50px; bottom: 15%; }
.fx-prihlaseni__panel > img:not(.fx-prihlaseni__spot) {
  height: 34px;
  width: auto;
  align-self: flex-start;
}

/* Volitelná ilustrace v panelu (kreslené značky z `ilustrace/`). Používejte
   INVERZNÍ variantu — základní má navy kresbu, která na navy panelu zmizí. */
.fx-prihlaseni__spot {
  width: min(220px, 55%);
  height: auto;
  align-self: flex-start;
}

.fx-prihlaseni__claim {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-24);
  font-weight: 600;
  line-height: var(--fx-leading-snug);
  max-width: 20ch;
  text-wrap: balance;
}
.fx-prihlaseni__pozn { font-size: var(--fx-text-12); color: rgba(255, 255, 255, 0.55); }
.fx-prihlaseni__misto {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fx-space-8);
  background: var(--fx-paper-cool);
}
.fx-prihlaseni__karta {
  width: 100%;
  max-width: 464px;
  box-sizing: border-box;
  padding: var(--fx-space-8);
  background: var(--fx-paper);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-karta);
  box-shadow: var(--fx-app-stin-karta);
}
.fx-prihlaseni__karta h1 { font-size: var(--fx-text-24); margin-bottom: var(--fx-space-2); }
.fx-prihlaseni__karta > p { font-size: var(--fx-text-14); color: var(--fx-ink-muted); margin-bottom: var(--fx-space-6); }

/* ---------- Políčka jednorázového kódu (`fx-otp`) ----------

   Šest samostatných okének, ne jedno pole s proloženými znaky. Na první pohled
   je vidět, kolik číslic se čeká.

   POZOR NA SELEKTOR (opraveno 2026-09-02): do té doby tenhle vzor popisoval jen
   `.fx-otp input`. Knihovna `input-otp`, kterou používají všechny aplikace FINVOXu,
   ale políčka kreslí jako `<div>`, ne `<input>` — pravidlo se proto nikdy nechytlo
   a každá aplikace si tvar dopsala po svém. Výsledek: kód vypadal v každé aplikaci
   jinak (všiml si toho PT). Stylujeme proto přímé potomky, ať vzor platí na obojí;
   `.fx-otp input` zůstává kvůli obrazovkám, které políčka kreslí jako `<input>`. */
.fx-otp {
  display: flex;
  gap: var(--fx-space-2);
  margin-bottom: var(--fx-space-4);
}
.fx-otp > *,
.fx-otp input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  text-align: center;
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-24);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fx-ink);
  border: 1.5px solid var(--fx-line-strong);
  border-radius: var(--fx-app-radius-pole);
  background: var(--fx-paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Zaostřené políčko: navy obruba a zlatý prstenec. Zlato je tu jako signál
   zaostření, ne jako stavová barva — plochy se dotkne pár procent. */
.fx-otp > [data-aktivni="true"],
.fx-otp input:focus {
  outline: none;
  z-index: 1;
  border-color: var(--fx-navy);
  box-shadow: 0 0 0 3px rgba(189, 156, 103, 0.25);
}
.fx-prihlaseni__znovu { font-size: 13px; color: var(--fx-ink-muted); }

/* ---------- Hustý datový panel (`fx-udaje`) ----------

   Vzniklo ve Správě uživatelů. Předchozí podoba detailu byla stěna plnotučných
   formulářových polí pod sebou: popisek nad polem, rámeček, výplň jako na
   přihlašovací obrazovce. Dvanáct údajů zabralo tři obrazovky a nedalo se v nich
   číst — což je u panelu, kde se devadesát procent času jen kouká, ta horší
   z obou činností.

   Tenhle tvar čte jako tabulka a píše jako formulář: popisek vlevo, hodnota
   vpravo, nízký řádek, pole bez rámečku (`fx-vstup-tichy`). Rámeček naskočí, až
   když na pole najedete nebo do něj vstoupíte.

--------------------------------------------------------------------- */

.fx-udaje {
  display: grid;
  /* `min(…, 100%)` je tu schválně: bez něj drží sloupec svých 21 rem i v užším
     místě a panel přeteče do strany. V kartě člověka na telefonu se tím uřízlo
     78 px textu bez možnosti se k nim dostat. */
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: 0 var(--fx-space-8);
}
.fx-udaje__radek {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--fx-space-3);
  /* Výška řádku je osm × základní krok mřížky. Je to řádek tabulky. */
  min-height: var(--fx-space-8);
  padding: var(--fx-space-1) 0;
  border-bottom: 1px solid var(--fx-line);
}
/* Údaj přes celou šířku (poznámka, dlouhý text) — popisek zůstává nahoře. */
.fx-udaje__radek--siroky {
  grid-column: 1 / -1;
  align-items: start;
  /* Hodnota se necha capnout: pres celou sirku panelu by z poznamky bylo
     poledni pole siroke pres pul metru a vetsinou prazdne. */
  grid-template-columns: minmax(0, 11rem) minmax(0, 40rem);
}
/* Řádek s víceřádkovým polem: popisek nahoru, ne na střed proti trojřádkové
   krabici. */
.fx-udaje__radek:has(textarea) { align-items: start; padding-top: var(--fx-space-2); }
.fx-udaje__popisek {
  font-size: var(--fx-text-12);
  color: var(--fx-ink-muted);
  overflow-wrap: anywhere;
}

/* Tiché pole ve dvou dalších podobách, ať oddíl drží jeden rytmus. */
textarea.fx-vstup-tichy {
  height: auto;
  min-height: calc(var(--fx-space-10) + var(--fx-space-2));
  padding: var(--fx-space-2);
  line-height: 1.45;
  resize: vertical;
}
select.fx-vstup-tichy {
  /* Vlastní šipka; systémová by v tichém poli visela ve vzduchu. */
  appearance: none;
  padding-right: var(--fx-space-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fx-ink-subtle) 50%),
    linear-gradient(135deg, var(--fx-ink-subtle) 50%, transparent 50%);
  background-position:
    right var(--fx-space-4) center,
    right var(--fx-space-3) center;
  background-size:
    var(--fx-space-1) var(--fx-space-1),
    var(--fx-space-1) var(--fx-space-1);
  background-repeat: no-repeat;
}

/* Oddíl uvnitř jedné karty — místo šesti samostatných karet pod sebou. */
.fx-oddil {
  padding-top: var(--fx-space-5);
  margin-top: var(--fx-space-5);
  border-top: 1px solid var(--fx-line);
}
.fx-oddil:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
/* Doplněk vpravo v nadpisu oddílu je věta, ne štítek — verzálky a prostrkání
   z nadpisu by z ní udělaly nečitelný pruh. */
.fx-oddil__doplnek {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-12);
  font-weight: 400;
  color: var(--fx-ink-muted);
  text-align: right;
}
.fx-oddil__nadpis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fx-space-3);
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fx-gold-700);
  margin: 0 0 var(--fx-space-3);
}
/* Tentýž štítek v tišší, neznačkové podobě — kde by zlato bylo příliš. */
.fx-stitek {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-14);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
  margin: 0 0 var(--fx-space-2);
}

/* Nadpis bloku, který stojí sám (bez záhlaví karty). Doplňuje `fx-sekce__titul`,
   který sedí v záhlaví a mezeru pod sebou nemá. */
.fx-nadpis-bloku {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-16);
  font-weight: 600;
  line-height: var(--fx-leading-snug);
  color: var(--fx-ink);
  margin: 0 0 var(--fx-space-3);
}

/* ---------- Tichý stav: tečka místo pilulky ----------

   `fx-stav` je pilulka — dobrá jako odznak, hlučná v tabulce, kde je v každém
   řádku. Tohle je tatáž informace potichu: tečka plus věta.

--------------------------------------------------------------------- */

.fx-tecka {
  width: var(--fx-space-2);
  height: var(--fx-space-2);
  border-radius: var(--fx-radius-pill);
  flex: 0 0 auto;
  background: var(--fx-line-strong);
}
.fx-tecka--uspech { background: var(--fx-success); }
.fx-tecka--varovani { background: var(--fx-warning); }
.fx-tecka--chyba { background: var(--fx-danger); }
.fx-tecka--vypnuto { background: var(--fx-ink-muted); }
/* Prázdná tečka = stav, který ještě nenastal (žádný přístup, nezadáno). */
.fx-tecka--prazdna { background: transparent; border: 1.5px solid var(--fx-line-strong); }

.fx-stav-tise {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  font-size: var(--fx-text-14);
  color: var(--fx-ink);
}
.fx-stav-tise .fx-tecka { flex: none; }
/* Barvu nese tečka, ne text: zlatě laděná výstražná barva má na bílé kontrast
   3,3 : 1 a jako čtrnáctibodový text by normu nesplnila. Vedle slova ano. */
.fx-stav-tise--tise { color: var(--fx-ink-muted); }

/* ---------- Pole hledání s ikonou ---------- */

.fx-hledani {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fx-hledani__ikona {
  position: absolute;
  left: var(--fx-space-3);
  display: inline-flex;
  color: var(--fx-ink-muted);
  pointer-events: none;
}
.fx-hledani__pole {
  padding-inline-start: calc(var(--fx-space-3) * 2 + var(--fx-space-4));
  min-width: 16rem;
}
/* Klávesová zkratka má být vidět, ne jen fungovat. */
.fx-napoveda-klavesy {
  font-size: var(--fx-text-12);
  color: var(--fx-ink-muted);
}

/* ---------- Ikony ----------

   Jedna sada (Lucide), jedna tloušťka, dvě velikosti. Unicode znaky nejsou
   ikony — sázejí se displejovým písmem a mají jinou optickou váhu než rozhraní.

--------------------------------------------------------------------- */

.fx-ikona {
  width: var(--fx-space-4);
  height: var(--fx-space-4);
  stroke-width: 1.5;
  flex: 0 0 auto;
}
.fx-ikona--velka { width: var(--fx-space-5); height: var(--fx-space-5); }
/* Šipka primárního tlačítka se při najetí posune o tři pixely doprava. */
.fx-ikona--sipka { transition: transform var(--fx-dur-base) var(--fx-ease-out); }
.fx-btn:hover .fx-ikona--sipka { transform: translateX(3px); }

/* NAHRAZENO 2026-09-02 — pro nové obrazovky používej `.fx-otp` (oddělená okénka).

   Jednorázový kód jako jedno spojené pole. Vznikl jako rovnocenná varianta k `.fx-otp`
   a právě ta volba byla chyba: systém nabízel na tutéž věc dva vzhledy, aplikace si
   vybraly různě a **kód pak vypadal v každé aplikaci jinak** (upozornil PT). Jednu
   obrazovku má mít celý FINVOX stejnou, ne dvě přípustné podoby.

   Pravidla tu zůstávají, aby se nerozbilo nic, co je ještě používá; nové obrazovky
   je ale brát nemají. Poslední aplikace na nich stála Správa uživatelů a 2. 9. přešla
   na `.fx-otp`. */
.fx-otp-slot {
  width: var(--fx-space-10);
  height: var(--fx-space-12);
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-20);
  font-weight: 600;
  font-feature-settings: "tnum";
  color: var(--fx-ink);
  background: var(--fx-paper);
  border: 1.5px solid var(--fx-pole-obruba);
  border-inline-start-width: 0;
}
.fx-otp-slot:first-child {
  border-inline-start-width: 1.5px;
  border-start-start-radius: var(--fx-app-radius-pole);
  border-end-start-radius: var(--fx-app-radius-pole);
}
.fx-otp-slot:last-child {
  border-start-end-radius: var(--fx-app-radius-pole);
  border-end-end-radius: var(--fx-app-radius-pole);
}
.fx-otp-slot--aktivni {
  border-color: var(--fx-navy);
  box-shadow: 0 0 0 3px rgb(from var(--fx-gold) r g b / 0.25);
}

/* Poznámka pod nadpisem nebo polem: menší a tišší než text kolem. Bez menší
   velikosti splyne se souvislým textem — v kartě pak vypadá jako odstavec,
   ne jako vysvětlivka. `--fx-ink-subtle` má na bílé 3,1 : 1, norma žádá 4,5,
   takže na text nikdy nesahá; zůstává jen na placeholderech. */
.fx-pozn {
  font-size: var(--fx-text-14);
  color: var(--fx-ink-muted);
  margin: 0 0 var(--fx-space-3);
}

@media (max-width: 900px) {
  /* Na telefonu popisek nad hodnotu, ne vedle ní. Dva sloupce nechají na hodnotu
     asi 150 px a telefonní číslo ani pozice se do toho nevejdou — uřízne se
     zrovna to, kvůli čemu se člověk dívá. */
  .fx-udaje__radek {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    align-items: start;
    padding: var(--fx-space-2) 0;
  }
  .fx-hledani,
  .fx-hledani__pole { width: 100%; }
}

/* ---------- Menší obrazovky ---------- */

@media (max-width: 1023px) {
  .fx-pruh { display: none; }
  .fx-telo:has(> .fx-pruh)::before { display: none; }
  .fx-pruh-nahrada {
    display: block;
    margin-bottom: var(--fx-space-5);
  }
  .fx-lista__hledani { display: none; }
}
@media (min-width: 1024px) {
  .fx-pruh-nahrada { display: none; }
}
@media (max-width: 639px) {
  .fx-hlavicka { flex-direction: column; align-items: stretch; }
  /* Základ dává textovému bloku `flex: 1 1 22rem`, aby ho tlačítka vedle nesmáčkla.
     Jenže tady je hlavička SLOUPEC — a v sloupci není 22rem šířka, ale VÝŠKA.
     Textový blok tím na každém telefonu narostl na 352 px a pod nadpisem zůstalo
     přes 200 px prázdna (změřeno na 390 px: hlavička 352 px místo 148 px).
     Ve sloupci se proto základ ruší; šířku stejně drží `align-items: stretch`. */
  .fx-hlavicka > :first-child { flex: 0 0 auto; }
  .fx-detail { grid-template-columns: 1fr; }
  /* Na úzké obrazovce se z navy panelu stane hlavička: mřížka mu dá jen tolik
     výšky, kolik potřebuje, a zbytek patří kartě. Bez `grid-template-rows` si
     obě řady rozdělily výšku napůl a nad přihlašovací kartou zůstal přes půl
     obrazovky prázdný navy blok (změřeno na 390 px širokém telefonu: 530 px).
     Claim se přitom neschovává — říká, do čeho se člověk hlásí; jen zdrobní
     a postaví se vedle značky. Poznámku o zakládání účtů má karta taky, takže
     ta z panelu zmizet může. */
  .fx-prihlaseni { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fx-prihlaseni__panel {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--fx-space-2) var(--fx-space-4);
    padding: var(--fx-space-5) var(--fx-space-6);
  }
  .fx-prihlaseni__panel img { height: 26px; }
  .fx-prihlaseni__claim { font-size: var(--fx-text-16); max-width: none; }
  .fx-prihlaseni__pozn { display: none; }
  .fx-prihlaseni__misto { align-items: flex-start; padding: var(--fx-space-8) var(--fx-space-6); }
  /* Na telefonu ustoupí i název aplikace — poslední v pořadí ustupování.
     S ním musí zmizet i oddělovač, který ho odděloval od značky: sám o sobě
     je to svislá čárka za logem, za kterou nic není (vidět na Přehledu
     provizí 2026-08-13, ale platilo to ve všech aplikacích). */
  .fx-lista__aplikace,
  .fx-lista__znacka + .fx-lista__delic { display: none; }
}

/* ---------- Přeskočení na obsah ----------
   První odkaz na stránce, vidět je až po zaostření klávesnicí. Bez něj musí
   člověk, který nepoužívá myš, projít celou lištou znovu na každé stránce. */

.fx-preskocit {
  position: absolute;
  left: var(--fx-gutter);
  top: calc(-1 * var(--fx-space-20));
  z-index: 90;
  background: var(--fx-navy);
  color: var(--fx-paper);
  padding: var(--fx-space-3) var(--fx-space-5);
  border-radius: var(--fx-radius-md);
  text-decoration: none;
  transition: top var(--fx-dur-base) var(--fx-ease-out);
}
.fx-preskocit:focus-visible { top: var(--fx-space-2); color: var(--fx-paper); }

/* Text jen pro čtečky obrazovky */
.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;
}



/* ============================================================
   PŘÍRŮSTEK v1.2.12 — čtyři vzory, které si aplikace vymýšlely samy
   ============================================================

   Všechny čtyři vznikly ve Správě uživatelů a všechny čtyři jsou obecné.
   Zařazeno 2026-08-17 při srovnávání aplikace s vrstvou: měla nad ní přes
   2 500 řádků vlastního CSS, protože si stavěla vlastní stavebnici místo toho,
   aby chybějící díly doplnila sem.

   1. `fx-prepinac` — přepínač zapnuto/vypnuto s popiskem. README s ním počítal,
      vrstva ho neměla. Popisek je povinný: samotná poloha přepínače je stav
      sdělený jen tvarem a barvou.
   2. `fx-vstup-tichy` — pole, které vypadá jako text, dokud na něj nejedeš myší.
      Do mřížek údajů, kde je deset polí pod sebou a orámování by tvořilo mříž.
      Stejná myšlenka jako `fx-nastaveni__hodnota`, jen pro psaní.
   3. `fx-polozky` / `fx-polozka` — seznam karet, na který se tabulka překlápí
      na úzké obrazovce. Vrstva ten vzor popisovala v komentáři, ale samotný
      obal neměla, takže si ho každá aplikace kreslila po svém.
   4. `fx-avatar` + `fx-osoba` — monogram a dvojice jméno/e-mail. Je to nejčastější
      buňka v tabulkách napříč FINVOXem.
   ------------------------------------------------------------ */

/* ---------- Přepínač přístupu v řádku ---------- */

.fx-prepinac {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  cursor: pointer;
}
.fx-prepinac__popisek {
  font-size: var(--fx-text-12);
  color: var(--fx-ink-muted);
  white-space: nowrap;
}
.fx-prepinac__popisek[data-zapnuto="ano"] {
  color: var(--fx-ink);
  font-weight: 600;
}
/* ---------- Monogramový avatar ---------- */

.fx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--fx-space-8);
  height: var(--fx-space-8);
  border-radius: var(--fx-radius-pill);
  background: linear-gradient(135deg, var(--fx-navy-300), var(--fx-navy-100));
  font-family: var(--fx-font-display);
  font-weight: 700;
  font-size: var(--fx-text-12);
  color: var(--fx-navy);
  letter-spacing: 0;
  user-select: none;
}
.fx-avatar--lg {
  width: var(--fx-space-16);
  height: var(--fx-space-16);
  font-size: var(--fx-text-24);
}
/* Buňka „Člověk": avatar vlevo, jméno a e-mail vpravo pod sebou. */
.fx-osoba {
  display: flex;
  align-items: center;
  gap: var(--fx-space-3);
  min-width: 0;
}
.fx-osoba__text {
  min-width: 0;
}
/* ---------- Historie a poslední změny jako karty pod 900 px ---------- */

/* ---------- Volba s vysvětlením (`fx-volba`) ----------

   Řádek, který se dá vybrat a nese k sobě větu, proč. Nabídka rolí, výběr
   varianty, cokoli, kde samotný název nestačí a zaškrtávátko s jedním slovem
   nutí hádat. Vybraný stav se značí `data-ma="ano"`.

--------------------------------------------------------------------- */

.fx-volba {
  display: flex;
  align-items: flex-start;
  gap: var(--fx-space-3);
  padding: var(--fx-space-3);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-pole);
  cursor: pointer;
  background: var(--fx-paper);
  text-align: left;
  width: 100%;
  font: inherit;
  color: var(--fx-ink);
}
.fx-volba:hover { border-color: var(--fx-line-strong); }
.fx-volba[data-ma="ano"] {
  border-color: var(--fx-navy);
  background: var(--fx-navy-050);
}
.fx-volba__telo { min-width: 0; }
.fx-volba__nazev { font-weight: 600; }
.fx-volba__popis {
  display: block;
  margin-top: var(--fx-space-1);
  font-size: var(--fx-text-12);
  color: var(--fx-ink-muted);
}

/* ---------- Fronta práce (`fx-fronta`) ----------

   Seznam „kolik toho čeká a co s tím". Velké číslo vlevo, věta uprostřed, akce
   vpravo. Váhu čísla řídí `data-vaha="danger|warning"` — barvu nese číslo, ne
   celý řádek, aby se seznam nerozsvítil celý.

--------------------------------------------------------------------- */

.fx-fronta {
  display: flex;
  flex-direction: column;
  background: var(--fx-paper);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-app-radius-karta);
  overflow: hidden;
}
.fx-fronta__polozka {
  display: flex;
  align-items: center;
  gap: var(--fx-space-5);
  padding: var(--fx-space-4) var(--fx-space-6);
  border-bottom: 1px solid var(--fx-line);
}
.fx-fronta__polozka:last-child { border-bottom: 0; }
.fx-fronta__cislo {
  flex: 0 0 auto;
  min-width: 3rem;
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-30);
  font-weight: 700;
  line-height: var(--fx-leading-tight);
  font-feature-settings: "tnum";
  color: var(--fx-ink);
}
.fx-fronta__cislo[data-vaha="danger"] { color: var(--fx-danger); }
.fx-fronta__cislo[data-vaha="warning"] { color: var(--fx-warning); }
.fx-fronta__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fx-text-16);
  color: var(--fx-ink);
}
.fx-fronta__akce { flex: 0 0 auto; }

@media (max-width: 900px) {
  .fx-fronta__polozka { flex-wrap: wrap; gap: var(--fx-space-2) var(--fx-space-4); }
  .fx-fronta__akce { flex-basis: 100%; margin-inline-start: calc(3rem + var(--fx-space-5)); }
}

.fx-polozky {
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-2);
}
.fx-polozka {
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-1);
  padding: var(--fx-space-3);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius-md);
  background: var(--fx-paper);
  font-size: var(--fx-text-14);
}
/*
 * Tiché pole. Vypadá jako text, dokud se ho nedotknete. Výška 30 px je
 * záměrná — je to řádek tabulky, ne samostatný formulářový prvek.
 */
.fx-vstup-tichy {
  width: 100%;
  min-height: calc(var(--fx-space-8) - var(--fx-space-1) / 2);
  height: calc(var(--fx-space-8) - var(--fx-space-1) / 2);
  padding: 0 var(--fx-space-2);
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-14);
  color: var(--fx-navy);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--fx-radius-sm);
  transition:
    border-color var(--fx-dur-fast) var(--fx-ease-out),
    background-color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-vstup-tichy:hover:not(:disabled) {
  border-color: var(--fx-line-strong);
  background: var(--fx-paper);
}
.fx-vstup-tichy:focus {
  outline: none;
  border-color: var(--fx-navy);
  background: var(--fx-paper);
  box-shadow: 0 0 0 3px rgba(189, 156, 103, 0.25);
}
.fx-vstup-tichy:disabled {
  color: var(--fx-ink-muted);
  cursor: default;
}
.fx-vstup-tichy[aria-invalid="true"] {
  border-color: var(--fx-danger);
}
.fx-vstup-tichy::placeholder {
  color: var(--fx-ink-subtle);
}



/* ============================================================
   PŘÍRŮSTEK v1.2.13 — pohyb: ekvalizér a vstup stránky
   ============================================================

   Značkový načítací stav (pět zlatých pruhů podle loga) a vstupní animace
   obsahu. Design systém je popisuje v `previews/motion.html`, ale vrstva je
   neměla, takže si je Správa uživatelů opsala k sobě — a nikdo jiný je nemá.

   Tři hodnoty pohybu (`--fx-dur-deliberate`, `--fx-ease-emphasized`,
   `--fx-ease-spring`) jsou tu taky. Patří do `tokens.css`, ale do souborů
   marketingové vrstvy se nesahá, takže bydlí tady — stejně jako dosud bydlely
   v aplikaci.

   Vypnutí při `prefers-reduced-motion` je níž, plošně; nic se nevyjmenovává.
   ------------------------------------------------------------ */

:root {
  --fx-dur-deliberate: 640ms;
  --fx-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --fx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*
 * Ekvalizér jako načítací stav — pět zlatých pruhů v poměrech z oficiální značky
 * (krajní 42 %, prostřední 68 %, středový 88 %). Značkový podpis místo obecné tečky.
 */
.fx-eq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--fx-space-6);
}
.fx-eq span {
  width: 3px;
  border-radius: var(--fx-radius-pill);
  background: var(--fx-gold);
  transform-origin: center;
  animation: fx-eq-loading 1.2s var(--fx-ease-in-out) infinite;
}
.fx-eq span:nth-child(1),
.fx-eq span:nth-child(5) {
  height: 42%;
  animation-delay: 0ms;
}
.fx-eq span:nth-child(2),
.fx-eq span:nth-child(4) {
  height: 68%;
  animation-delay: 120ms;
}
.fx-eq span:nth-child(3) {
  height: 88%;
  animation-delay: 240ms;
}
@keyframes fx-eq-loading {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}
.fx-nacitam {
  display: flex;
  align-items: center;
  gap: var(--fx-space-3);
  color: var(--fx-ink-muted);
  font-size: var(--fx-text-14);
}
/* ---------- Ekvalizér: usazení po úspěchu, odhalení při prvním vykreslení ---------- */

.fx-eq--usazeni span {
  animation: fx-eq-usazeni var(--fx-dur-deliberate) var(--fx-ease-spring) 1;
}
@keyframes fx-eq-usazeni {
  0% {
    transform: scaleY(0);
  }
  60% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}
.fx-eq--odhaleni span {
  animation: fx-eq-odhaleni var(--fx-dur-deliberate) var(--fx-ease-out) 1;
}
@keyframes fx-eq-odhaleni {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
.fx-stranka {
  animation: fx-stranka-vstup var(--fx-dur-slow) var(--fx-ease-out);
}
@keyframes fx-stranka-vstup {
  from {
    opacity: 0;
    transform: translateY(var(--fx-space-2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Tisk ---------- */

@media print {
  .fx-lista, .fx-pruh, .fx-nastroje, .fx-hromadna, .fx-toast, .fx-hlavicka__akce { display: none !important; }
  .fx-aplikace { background: #fff; }
  .fx-tabulka, .fx-sekce, .fx-kpi { box-shadow: none; }
}

/* ---------- Omezený pohyb ---------- */

@media (prefers-reduced-motion: reduce) {
  .fx-kostra { animation: none; background: var(--fx-navy-050); }
  .fx-aplikace *, .fx-aplikace *::before, .fx-aplikace *::after {
    transition: none !important;
    /* I animace, ne jen přechody. Dokud tu byly jen přechody, musela si každá
       aplikace vyjmenovat vlastní animace — a na půlku zapomněla. */
    animation: none !important;
  }
}

/* ---------- Nadpis samostatné obrazovky (`fx-nadpis-stranky`) ----------

   Pro obrazovky, které NEMAJÍ hlavičku `fx-hlavicka` — přihlášení, „sem nemáte
   přístup", chybová stránka. Bez něj spadne `<h1>` na základní styl, který je
   marketingový: 64 px přes celou kartu. Přesně to se stalo na přihlašovací
   obrazovce Správy uživatelů a nikdo si toho půl roku nevšiml, protože ta třída
   se v kódu používala, ale nikde nebyla definovaná (nalezeno 2026-08-17).
   ------------------------------------------------------------ */

.fx-nadpis-stranky {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-24);
  font-weight: 600;
  line-height: var(--fx-leading-snug);
  color: var(--fx-navy);
  margin: 0 0 var(--fx-space-3);
}

/* ---------- Rozvržení: primitiva místo inline stylů ----------

   Vzniklo ve Správě uživatelů, když se z `src/` vymetaly natvrdo psané rozměry.
   Tři tvary a pár přepínačů pokryjí skoro celé rozvržení stránky, takže se
   v aplikacích nezakládají pokaždé znovu vlastní obaly:

   – `fx-stack`  — sloupec s mezerou (nejčastější věc na stránce),
   – `fx-radek`  — řádek prvků vedle sebe, zalamuje se,
   – `fx-grid`   — mřížka na 2 / 3 / 4 sloupce, na telefonu vždy jeden.

   Pravidlo: rozměr do `src/` nepatří. Když primitivum nestačí, patří to sem
   jako pojmenovaný tvar, ne jako `style={{ … }}` u prvku.

--------------------------------------------------------------------- */

.fx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-4);
}
.fx-stack--tesne { gap: var(--fx-space-2); }
/* Míra čitelnosti: sloupec formuláře nemá být širší než pohodlný řádek textu. */
.fx-stack--sirka { max-width: 40rem; }

.fx-radek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fx-space-2);
}
.fx-radek--rozestup { justify-content: space-between; width: 100%; }
.fx-radek--stred { justify-content: center; }
.fx-radek--tesne { flex-wrap: nowrap; }

.fx-grid {
  display: grid;
  gap: var(--fx-space-4);
}
.fx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Odsazení shora mezi bloky stránky — dvě míry, ne libovolné číslo u prvku. */
.fx-oddel { margin-top: var(--fx-space-6); }
.fx-oddel--velky { margin-top: var(--fx-space-8); }

.fx-plna-sirka { width: 100%; }
.fx-bez-mezery { margin: 0; }
/* Doplňující text: tišší než okolí, ale pořád čitelný. */
.fx-tise { color: var(--fx-ink-muted); }

/* Vycentrovaná plocha pro to, co stojí samo — chybová stránka, prázdný stav. */
.fx-stred {
  display: grid;
  place-items: center;
  min-height: 60vh;
}
.fx-stred > * { width: 100%; max-width: 34rem; }

/* Nadpis, který na stránce otevírá blok. Mezi nadpisem stránky (24 px) a
   titulkem karty (16 px) chyběl stupeň; bez něj si ho každá aplikace vyrábí
   po svém. */
.fx-nadpis-oddilu {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-20);
  font-weight: 600;
  color: var(--fx-navy);
  margin: 0 0 var(--fx-space-4);
}

/* Co se vykresluje jen na jedné šířce. Dvě podoby jedné věci (široká tabulka
   a úzký seznam karet) se přepínají tady, ne podmínkou v komponentě. */
.fx-jen-uzke { display: none; }

@media (max-width: 900px) {
  .fx-grid--2,
  .fx-grid--3,
  .fx-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .fx-jen-siroke { display: none; }
  .fx-jen-uzke { display: flex; }
}

/* ---------- Seznam nastavení (`fx-nastaveni`) ----------

   Mřížka řádků „věc → hodnota → zapnuto". Vzniklo ve Správě uživatelů jako
   přístupy člověka do aplikací, ale je to obecný tvar: cokoli, co se v kartě
   zapíná a k čemu se vybírá hodnota.

   Zařazeno do vrstvy 2026-08-17 na pokyn PT. Do té doby to byl vlastní výmysl
   jedné aplikace — a bylo to na tom vidět: řádky se rozjížděly, protože poslední
   sloupec měl šířku podle obsahu, a výběr hodnoty vypadal jako formulářové pole,
   takže deset řádků pod sebou tvořilo mříž. Obojí je tady vyřešené jednou
   pro všechny.

   Tvar:
     <div class="fx-nastaveni">
       <div class="fx-nastaveni__radek">
         <span class="fx-nastaveni__vec"><svg …/><span class="fx-nastaveni__nazev">…</span></span>
         <span class="fx-nastaveni__volba"><button class="fx-nastaveni__hodnota">…</button></span>
         <přepínač />
       </div>
     </div>

   Pravidla:
   - Ukazuj jen to, co je zapnuté; zbytek schovej pod „Přidat…". Seznam pak roste
     s obsahem, ne s počtem možností.
   - Sloupce mají pevnou míru. `auto` u posledního sloupce rozhodí celý seznam,
     protože „Aktivní" a „Vypnuto" nejsou stejně široké.
   - Hodnota není formulářové pole — orámuje se až pod myší.
   ------------------------------------------------------------ */
/* Aplikace ve dvou sloupcích. Panel je široký 72 rem a jeden sloupec řádků
   zabere sotva polovinu — vpravo zůstával pruh prázdna a jedenáct aplikací pod
   sebou nutilo rolovat (hlásil PT 2026-08-17). Ve dvou sloupcích se vejdou
   skoro celé na obrazovku. Na užším okně se sloupec sám sloučí do jednoho. */
.fx-nastaveni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius-md);
  background: var(--fx-paper);
  overflow: hidden;
}
/* Svislá linka mezi sloupci. Bez ní by dvojice řádků splývala v jeden. */
.fx-nastaveni .fx-nastaveni__radek:nth-child(even) {
  border-left: 1px solid var(--fx-line);
}
.fx-nastaveni__radek {
  display: grid;
  /* Název, role a přepínač těsně za sebou, ne roztažené od kraje ke kraji.
     Rozprostřený řádek nutil oko přeskočit skoro pět set bodů prázdna
     kvůli jedné informaci. */
  grid-template-columns: minmax(0, 1fr) 10rem 7.5rem;
  align-items: center;
  gap: var(--fx-space-3);
  padding: var(--fx-space-2) var(--fx-space-4);
  border-bottom: 1px solid var(--fx-line);
  min-height: var(--fx-space-12);
}
/* V mřížce „poslední" neznamená „úplně dole", takže se spodní linka nechává
   všem — poslední se stejně schová pod obrubu karty. */
.fx-nastaveni__radek[data-pracuje="ano"] {
  opacity: 0.55;
}
.fx-nastaveni__radek:hover {
  background: var(--fx-paper-cool);
}
.fx-nastaveni__vec {
  display: flex;
  align-items: center;
  gap: var(--fx-space-2);
  min-width: 0;
}
/* Název vypadá stejně, ať aplikace odkaz do administrace má, nebo nemá.
   Jako `<a>` si jinak vzal zlaté podtržení ze základního stylu odkazů — v seznamu
   jedenácti aplikací pak byla polovina názvů podtržená a polovina ne a vypadalo
   to jako chyba, ne jako záměr (hlásil PT). Podtržení se ukáže až pod myší. */
.fx-nastaveni__nazev {
  font-size: var(--fx-text-14);
  font-weight: 600;
  color: var(--fx-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.fx-nastaveni__nazev:hover,
a.fx-nastaveni__nazev:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--fx-gold);
  text-underline-offset: 3px;
}
/* Výběr role drží celý svůj sloupec, ne jen šířku textu. Jinak byl každý řádek
   jinak široký — „spravce", „Vybrat roli", „user" — a šipky se nikde nesrovnaly. */
.fx-nastaveni__volba {
  min-width: 0;
}
/* Výběr role v kartě člověka je hodnota, ne formulářové pole. Deset orámovaných
   boxů pod sebou dělalo ze seznamu mříž (hlásil PT 2026-08-17); rámeček se proto
   ukáže až pod myší nebo při zaostření, kdy s tím jde opravdu pracovat. */
/* Hodnota v řádku: tlačítko, které vypadá jako text, dokud s ním nejdeš pracovat. */
.fx-nastaveni__hodnota {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  padding: var(--fx-space-1) var(--fx-space-2);
  border: 1px solid var(--fx-line-strong);
  border-radius: var(--fx-radius-sm);
  background: none;
  font: inherit;
  color: var(--fx-ink);
  cursor: pointer;
  max-width: 100%;
  min-height: var(--fx-space-10);
  text-align: left;
}
.fx-nastaveni__hodnota:hover {
  border-color: var(--fx-navy-300);
  background: var(--fx-paper);
}
.fx-nastaveni__hodnota[data-prazdno="ano"] {
  color: var(--fx-ink-muted);
}
.fx-nastaveni__hodnota__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Na dotykové obrazovce musí být cíl aspoň 44 px. */
@media (pointer: coarse) {
  .fx-nastaveni__hodnota {
    min-height: calc(var(--fx-space-10) + var(--fx-space-1));
  }
}

.fx-nastaveni__volba .fx-nastaveni__hodnota {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-color: transparent;
  background: none;
}
.fx-nastaveni__radek:hover .fx-nastaveni__hodnota,
.fx-nastaveni__volba .fx-nastaveni__hodnota:hover,
.fx-nastaveni__volba .fx-nastaveni__hodnota:focus-visible {
  border-color: var(--fx-line-strong);
  background: var(--fx-paper);
}

@media (max-width: 900px) {
  .fx-nastaveni__radek {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--fx-space-2);
    padding: var(--fx-space-3) var(--fx-space-3);
  }
  .fx-nastaveni__volba {
    grid-column: 1 / -1;
  }
}

/* ---------- Vrstva 1.3 — tlačítka, pole a ikony v aplikacích ----------
   Rozhodnutí PT 2026-09-24 (návrh „sklo“ po kontrole s manuálem, podoba B).
   Tlačítka a pole jsou o stupeň kulatější než na webu; primární tlačítko zůstává
   plná navy bez přechodu a stín dostává až při najetí (manuál, §8 Hover states).
   Ikony Lucide kreslí tahem 1,5 px, jak manuál předepisuje (výchozí je 2). */
.fx-btn { border-radius: var(--fx-app-radius-ovladac); }
.fx-input,
.fx-select,
.fx-textarea,
.fx-vstup-tichy { border-radius: var(--fx-app-radius-pole); }
.fx-aplikace svg.lucide { stroke-width: 1.5; }

/* Kdo si v systému vypne průhlednost, dostane plné plochy — sklo je ozdoba, ne nosná věc. */
@media (prefers-reduced-transparency: reduce) {
  .fx-toast { background: var(--fx-paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fx-preklad,
  .fx-zaclona { background: rgb(20 28 82 / 0.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fx-prihlaseni__panel::before,
  .fx-prihlaseni__panel::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
}