/*
 * SPECTRA-PE — základný štýl.
 *
 * Čisté CSS s custom properties, bez preprocesora a bez frameworku.
 * Mobile-first: základ je navrhnutý pre šírku 375 px, širšie obrazovky
 * dopĺňa jediný breakpoint.
 *
 * Farby drží značková paleta `--pr-*` (fialová, zlatá, tyrkys). Sémantické aliasy
 * `--color-*` z nej iba čerpajú, aby sa nemuseli prepisovať všetky pravidlá.
 * Úvodná stránka k tomuto súboru pridáva ešte assets/css/landing.css.
 */

/* --- písmo Lato (vendorované, žiadne volanie na Google Fonts) ------------ */
/*
 * Jeden súbor na rez so základnou aj rozšírenou latinkou (č, ľ, ô, ŕ…).
 * Rozdelenie na latin + latin-ext s unicode-range robilo v Brave na Androide
 * diakritiku iným písmom (10. 9. 2026); súbory sú podmnožina plného Lato
 * z repozitára Google Fonts (scripts/vendor.sh).
 */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-400.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-700.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/lato-900.woff2") format("woff2");
}

:root {
  /* Značková paleta. */
  --pr-primary: #5a2d83;
  --pr-primary-dark: #3f1f5e;
  --pr-primary-deep: #290544;
  --pr-primary-mid: #532f7d;
  --pr-primary-soft: #ede7f4;
  --pr-accent: #fdb71a;
  --pr-accent-hover: #f3ba46;
  --pr-accent-text: #290544; /* text na zlatej musí byť tmavý — biely nemá kontrast */
  --pr-teal: #1c888e;
  --pr-text: #2b2b2e;
  /* O odtieň tmavšia než sivá z palety (#6d6e71) — na svetlofialovom podklade
     sekcií by tá nedosiahla kontrast AA pre bežný text. */
  --pr-text-muted: #5f6063;
  --pr-text-faint: #9a9ba0;
  --pr-border: #d5d5d6;
  --pr-bg: #f7f6f5;
  --pr-surface: #ffffff;
  --pr-danger: #b3261e;
  --pr-success: #2e7d4f;

  /* Sémantické aliasy — jediný zdroj pravdy je paleta vyššie. */
  --color-bg: var(--pr-bg);
  --color-surface: var(--pr-surface);
  --color-text: var(--pr-text);
  --color-text-muted: var(--pr-text-muted);
  --color-brand: var(--pr-primary);
  --color-brand-dark: var(--pr-primary-dark);
  --color-border: var(--pr-border);
  --color-error: var(--pr-danger);
  --color-error-bg: #fdecea;
  --color-success-bg: #e8f5ee;

  --radius: 10px;
  /* Oranžové bubliny (upozornenia, koncept, aktualizácia): pozadie a nenápadný rámik o tón tmavší. */
  --pr-warn-bg: #fdf3e2;
  --pr-warn-border: #efd9b0;
  --pr-warn-text: #8a5a00;
  --space: 16px;
  /*
   * Jedna šírka obsahu pre všetky obrazovky. Žiadna stránka si ju neurčuje
   * sama — inak by sa pri prechode medzi Prípadmi a Nastaveniami obsah pod
   * ponukou posúval.
   */
  --content-width: 1200px;
  --content-width-narrow: 420px;
  /* Medzera medzi blokmi obsahu (karty, sekcie, tabuľky) — mobil / počítač. */
  --space-block: 16px;
  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-brand);
}

h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 var(--space);
}

.app {
  display: flex;
  flex-direction: column;
  /* min(100dvh, 100%) — na Androide v PWA zaráta 100dvh aj pruh systémových tlačidiel. */
  min-height: min(100dvh, 100%);
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space);
  flex: 1 0 auto;
}

/*
 * Vzduch medzi blokmi obsahu na jednom mieste: nadpis stránky, karty, filtre,
 * tabuľka a stránkovanie dostanú rovnakú medzeru bez toho, aby si ju každá
 * obrazovka riešila vlastným odsadením.
 */
.container > * + * {
  margin-top: var(--space-block);
}

/* Hláška si okraje nuluje (je to odsek), medzera medzi blokmi platí aj pre ňu. */
.container > .alert + *,
.container > * + .alert {
  margin-top: var(--space-block);
}

/* Odsadenie dáva kontajner; vlastné by sa k nemu pripočítalo. */
.container > .section-heading,
.container > h1,
.container > .definitions {
  margin-bottom: 0;
}

/* Pod hlavičkou s tlačidlom je väčšia medzera, aby tlačidlo nesedelo na obsahu. */
.container > .section-heading + * {
  margin-top: 24px;
}

.container > .pager {
  margin-top: var(--space-block);
}

/* Neprihlásené formuláre (prihlásenie, registrácia, obnova hesla). */
.container--narrow {
  max-width: var(--content-width-narrow);
}

/* --- hlavička ---------------------------------------------------------- */

.header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--space);
  background: var(--color-brand);
  color: #fff;
}

.header__brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- prepínač jazyka --------------------------------------------------- */

.lang {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang__btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.lang__btn--active {
  background: #fff;
  color: var(--color-brand);
  font-weight: 700;
}

/* --- tlačidlá ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-brand);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-brand-dark);
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* V tmavej hlavičke je rovnaké tlačidlo svetlé. */
.header .btn--ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn--danger {
  color: var(--color-error);
  border-color: #e8b8b4;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Tlačidlo s ikonou pred textom (napríklad stiahnutie listu prípadu). */
.btn--icon {
  gap: 8px;
}

/*
 * Drobnejšie tlačidlo do riadku tabuľky. Na telefóne ostáva plná dotyková
 * výška — prst je prst; zmenšuje sa až na počítači (viď @media nižšie).
 */
.btn--small {
  gap: 6px;
  padding: 8px 12px;
}

/*
 * Akčné tlačidlo v tabuľke alebo karte. Na telefóne ikona aj text, na širokej
 * obrazovke iba ikona s bublinovou nápovedou — popis nesie `aria-label`, takže
 * sa čítačke obrazovky nestratí.
 */
.action-btn {
  min-width: 44px;
}

/* Kopírovanie evidenčného čísla: drobná ikona vedľa čísla, v nadpise aj v riadku. */
.copy-btn {
  min-height: 32px;
  min-width: 32px;
  margin-left: 6px;
  padding: 4px 6px;
  vertical-align: middle;
}

.copy-btn .icon {
  width: 18px;
  height: 18px;
}

/*
 * Rýchly výber — čipy v prvom riadku karty filtra; aktívny má farbu značky.
 * Popis pred nimi hovorí, že sú to predvoľby polí pod nimi.
 */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.chips__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: 4px;
}

/* Na telefóne plná dotyková výška (prst je prst); zmenšuje sa až na počítači. */
.chip {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--color-brand);
}

.chip--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

/* --- obsah ------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space);
}

.lead {
  font-size: 1.05rem;
}

.muted {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Kotva pre vysvetlenie pod ikonou „i“ — panel má vďaka tomu šírku poľa
     a na 375 px sa zmestí na obrazovku bez vodorovného posúvania. */
  position: relative;
}

/* Názov poľa a vedľa neho ikona „i“. */
.field__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.field__label {
  font-weight: 600;
  font-size: 0.92rem;
}

/* --- dátum písaný rukou (components/DateInput) --------------------------- */

/*
 * Textové pole a vedľa neho tlačidlo s ikonou kalendára (44 px dotyková
 * plocha), ktoré otvorí vlastný výber dátumu (components/DatePicker).
 */
.date-input__row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.date-input__text {
  flex: 1 1 auto;
  min-width: 0;
}

.date-input__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--pr-primary);
  cursor: pointer;
}

.date-input__btn:hover:not(:disabled),
.date-input__btn[aria-expanded="true"] {
  background: var(--pr-primary-soft);
}

.date-input__btn:focus-visible {
  outline: 2px solid var(--pr-primary);
  outline-offset: 2px;
}

.date-input__btn:disabled {
  cursor: default;
  opacity: 0.5;
}

/* --- vlastný výber dátumu (components/DatePicker) ------------------------ */

/*
 * Jeden kalendár pre všetky prehliadače: na širokej obrazovke okienko pod
 * tlačidlom (poloha z JS), na telefóne panel pri spodnom okraji nad stmaveným
 * pozadím. Musí ležať nad modálnym oknom (.modal má z-index 50), lebo dátumy
 * sa vyberajú aj v ňom.
 */
.date-picker {
  position: fixed;
  z-index: 70;
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(41, 5, 68, 0.18);
}

.date-picker--sheet {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.date-picker__backdrop {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(9, 20, 31, 0.45);
}

.date-picker__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

/* Nadpis je tlačidlo: ťuknutie prepne na výber mesiaca a roka. */
.date-picker__title {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.date-picker__title:hover {
  background: var(--pr-primary-soft);
}

/* Šípky: dotyková plocha 44 px (na telefóne boli malé). */
.date-picker__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--pr-primary);
  cursor: pointer;
}

.date-picker__nav:hover {
  background: var(--pr-primary-soft);
}

.date-picker__chevron {
  width: 26px;
  height: 26px;
}

/* Výber mesiaca (3 × 4) a roka (4 × 4): dlaždice namiesto mriežky dní, rovnaká výška. */
.date-picker__months,
.date-picker__years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  min-height: 268px;
}

.date-picker__years {
  grid-template-columns: repeat(4, 1fr);
}

.date-picker__month {
  min-height: 44px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.date-picker__month:hover {
  background: var(--pr-primary-soft);
}

.date-picker__month--today {
  border-color: var(--pr-primary);
  font-weight: 600;
}

.date-picker__month--current,
.date-picker__month--current:hover {
  background: var(--pr-primary);
  color: #fff;
}

.date-picker__weekdays,
.date-picker__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker__weekday {
  text-align: center;
  font-size: 0.75rem;
  text-transform: lowercase;
  color: var(--color-text-muted);
  padding: 4px 0;
}

.date-picker__day {
  height: 40px;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.date-picker__day:hover {
  background: var(--pr-primary-soft);
}

.date-picker__day--outside {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.date-picker__day--today {
  border-color: var(--pr-primary);
  font-weight: 600;
}

.date-picker__day--selected,
.date-picker__day--selected:hover {
  background: var(--pr-primary);
  color: #fff;
}

.date-picker__day:focus-visible,
.date-picker__month:focus-visible,
.date-picker__title:focus-visible,
.date-picker__nav:focus-visible {
  outline: 2px solid var(--pr-primary);
  outline-offset: 1px;
}

/* Nápoveda klávesnice — len v okienku na počítači, drobným písmom pod mriežkou. */
.date-picker__keys {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-muted);
}

.date-picker__foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.date-picker__action {
  white-space: nowrap;
}

.date-input--invalid .field__input {
  border-color: var(--color-error);
}

/* --- vysvetlenie k poľu (ikona „i“) ------------------------------------- */

.info-popover {
  display: inline-flex;
}

.info-popover__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--pr-primary);
  cursor: pointer;
}

/*
 * Dotyková plocha 44 × 44 px bez toho, aby ikona roztiahla riadok s názvom
 * poľa — samotný krúžok ostáva 28 px.
 */
.info-popover__btn::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.info-popover__btn:hover {
  background: var(--pr-primary-soft);
}

.info-popover__btn .icon {
  width: 20px;
  height: 20px;
}

.info-popover__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--pr-border);
  border-radius: var(--radius);
  background: var(--pr-surface);
  box-shadow: 0 8px 20px rgba(41, 5, 68, 0.18);
  font-weight: 400;
}

/*
 * Zabalený panel musí zmiznúť úplne: `display: flex` vyššie prebíja
 * predvolené `[hidden] { display: none }` prehliadača a neviditeľný panel by
 * potom bral kliknutia celému formuláru.
 */
.info-popover__panel[hidden] {
  display: none;
}

.info-popover__title {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
}

.info-popover__text {
  margin: 0;
  color: var(--pr-text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.field__input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: inherit;
  width: 100%;
}

/*
 * Vlastný výberový box (components/Select): tlačidlo vyzerá ako pole,
 * zoznam sa otvára v paneli pod ním (alebo nad ním, keď dole nie je miesto);
 * nad desať položiek má pole na hľadanie. Dotykové ciele 44 px ako inde.
 */
.select {
  position: relative;
  width: 100%;
}

.select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.select__button:disabled {
  cursor: default;
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.select__button--empty .select__value {
  color: var(--color-text-muted);
}

.select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Šípka rozbalenia — kreslí sa z okrajov, rovnako ako vo výbere kroku. */
.select__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 0;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
}

.select--open .select__chevron {
  margin: 4px 4px 0 0;
  transform: rotate(-135deg);
}

.select--open .select__button {
  border-color: var(--color-brand);
}

/*
 * Panel je pripnutý k obrazovke (poloha a šírka z JS, Select.tsx), nie
 * k tlačidlu: v toku stránky by ho orezalo posúvateľné telo dialógu alebo
 * tabuľka s vodorovným posunom. Musí ležať nad dialógom (.modal má z-index 50).
 */
.select__panel {
  position: fixed;
  z-index: 70;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(41, 5, 68, 0.14);
}

.select__search {
  min-height: 40px;
  padding: 8px 10px;
}

.select__list {
  max-height: min(320px, 50vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.select__list:focus-visible {
  outline: none;
}

.select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}

.select__option--active {
  background: var(--pr-primary-soft);
}

.select__option[aria-selected='true'] {
  font-weight: 700;
}

.select__option--disabled {
  color: var(--color-text-muted);
  cursor: default;
}

.select__option-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.select__hint {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

/* Fajka pri vybranej položke — z okrajov, bez ďalšej ikony; má vlastný
   stĺpec vpravo (margin-left: auto), text jej neuhýba ani sa neprekrýva. */
.select__check {
  flex: 0 0 auto;
  width: 6px;
  height: 12px;
  margin: 0 8px 4px auto;
  border-right: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  transform: rotate(45deg);
}

.select__empty {
  padding: 10px;
  color: var(--color-text-muted);
}

/*
 * Hodnota poľa len na čítanie (vybavený termín, vymazaný prípad): údaj pod
 * popisom, bez ovládacieho prvku — nič nevyzerá ako niečo, čo sa dá vyplniť.
 */
.field__value {
  padding: 4px 0;
  font-weight: 400;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.field__value--empty {
  color: var(--color-text-muted);
}

.field__value-text {
  white-space: pre-wrap;
}

.field__value-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.field__value-list li + li {
  margin-top: 2px;
}

/*
 * Iba na čítanie (vymazaný prípad, uzavretý termín): hodnota sedí v rámiku
 * rovnakej výšky ako pole na písanie, aby sa rozloženie nemenilo, ale so
 * stlmeným podkladom a bez dolného rámika „na písanie“ — na prvý pohľad je
 * vidieť, že sa tu nič nezadáva. Prázdna hodnota je pomlčka, zoznam čipy.
 */
.field--readonly .field__label {
  font-weight: 600;
}

.field--readonly .field__value {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  background: var(--color-bg);
  font-weight: 500;
}

.field--readonly .field__value--empty {
  font-weight: 400;
  font-style: italic;
}

.field--readonly .field__value-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.field--readonly .field__value-list li {
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.92rem;
}

.field--readonly .field__value-list li + li {
  margin-top: 0;
}

.field__input:focus-visible,
.btn:focus-visible,
.lang__btn:focus-visible {
  outline: 3px solid var(--pr-primary-mid);
  outline-offset: 2px;
}

.alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
}

/* Poznámka so skrytím (Termíny): text a vpravo tlačidlo ×. */
.note-dismissible {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Po skrytí ostáva len drobné „i“ s textom — bez rámika, v jednom riadku. */
.note-dismissible__stub {
  margin: 0;
}

.note-dismissible__show {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.note-dismissible__show:hover,
.note-dismissible__show:focus-visible {
  color: var(--color-brand);
  text-decoration: underline;
}

.note-dismissible__text {
  flex: 1 1 auto;
  margin: 0;
}

.note-dismissible__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  margin: -8px -8px -8px 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.note-dismissible__close:hover,
.note-dismissible__close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

.alert--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.alert--info {
  background: var(--pr-primary-soft);
  color: var(--pr-primary-dark);
}

.alert--warning {
  background: var(--pr-warn-bg);
  color: var(--pr-warn-text);
  /* Nenápadný rámik o tón tmavší než pozadie — bublina bez neho pôsobí plocho. */
  border: 1px solid var(--pr-warn-border);
}

.definitions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 var(--space);
}

.definitions__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

.definitions__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.definitions dt {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.definitions dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.case-registry {
  margin-top: 32px;
}

.section-heading {
  display: flex;
  /* Na mobile pod sebou, aby sa nadpis nelámal vedľa tlačidla. */
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space);
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

/* Nadpis s tlačidlom vpravo aj na telefóne (tlačidlo je tam iba ikona). */
.section-heading--row {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

/* Kompaktné tlačidlo: na telefóne bez textu, od 800 px s textom (viď nižšie). */
.action-btn--compact .action-btn__text {
  display: none;
}

.action-btn.action-btn--compact {
  padding: 6px;
}

.case-card__meta {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* Tlačidlá pod formulárom; hlavné je vpravo, kde formulár končí. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/*
 * Štítok stavu (termín, účet, prípad). Text sa nikdy nezalamuje — v bunke
 * tabuľky by sa „Po termíne“ rozpadlo na dva riadky a riadok by narástol.
 * Preto má aj stĺpec so štítkom vlastnú najmenšiu šírku (`.table .col--badge`).
 */
.badge {
  display: inline-block;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-success-bg);
  color: #246044;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.fieldset {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
  padding: var(--space) 0 0;
}

.fieldset:first-child {
  border-top: 0;
  padding-top: 0;
}

.fieldset legend {
  padding: 0 8px 0 0;
  font-weight: 700;
}

.field__textarea {
  resize: vertical;
}

.multi-choice {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

.multi-choice legend {
  margin-bottom: 8px;
  font-size: 0.92rem;
  font-weight: 600;
}

.multi-choice__grid {
  display: grid;
  gap: 8px;
}

/* Skupina prepínačov s nadpisom — bez rámu, stačí nadpis. */
.check-group {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.check-group > legend {
  padding: 0;
  margin-bottom: 8px;
}

.check-option {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}

.check-option input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-brand);
}

.form-grid {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.computed {
  width: fit-content;
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--color-success-bg);
}

.score-panel {
  padding: var(--space);
  border: 1px solid #a9d3bc;
  border-radius: var(--radius);
  background: var(--color-success-bg);
}

.score-panel h3,
.score-panel p {
  margin: 0;
}

.score-panel dl {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.score-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.score-panel dd {
  margin: 0;
  font-weight: 700;
}

.score-panel p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Pätka je nenápadný sivý pás: tmavší podklad než stránka, drobné tlmené písmo. */
.footer {
  padding: var(--space);
  border-top: 1px solid var(--color-border);
  background: #efeeed;
}

/*
 * Právne upozornenie a verzia musia byť čitateľné: tlmená farba má na podklade
 * stránky kontrast nad 4,5 : 1 (bledá `--pr-text-faint` mala 2,6 : 1) a písmo
 * neklesá pod 12 px.
 */
.footer p {
  max-width: var(--content-width);
  margin: 0 auto;
  /* #6a6b6f na #efeeed = kontrast 4,7 : 1 — stále čitateľné, ale nenápadné. */
  color: #6a6b6f;
  font-size: 0.8rem;
  line-height: 1.45;
}

.footer__version {
  margin-top: 0.35rem;
  font-size: 0.76rem;
}

.footer__version a {
  color: inherit;
}

.page-error {
  padding: var(--space);
}
/* --- lišta novej verzie -------------------------------------------------- */

.update-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--space);
  background: var(--pr-warn-bg);
  box-shadow: inset 0 0 0 1px var(--pr-warn-border);
  color: var(--pr-warn-text);
  font-weight: 600;
}

/* --- formulár zo slovníka ---------------------------------------------- */

.field__required {
  color: var(--color-error);
}

.field__unit,
.field__help {
  color: var(--color-text-muted);
  font-weight: 400;
}

.field__help,
.field__warning,
.field__error {
  margin: 0;
  font-size: 0.85rem;
}

/*
 * Voľba so zaškrtávacím políčkom a vysvetlenie pod ňou.
 *
 * Vnútri `.field` je vysvetlenie položkou stĺpca a na vlastný riadok sa dostane
 * samo; tu je to obyčajný span vedľa textu voľby a bez tohto pravidla by sa naň
 * nalepilo — „Klinická kontrola 3–6 mesiacovVoliteľný modul…“.
 */
.check-option .field__help {
  display: block;
  margin-top: 4px;
}

.field__warning {
  color: var(--pr-warn-text);
}

.field__error {
  color: var(--color-error);
  font-weight: 600;
}

/*
  Pasca na automaty v registračnom formulári. Nie `display: none` ani
  `visibility: hidden` — tie časť automatov rozpozná a pole preskočí. Odsunutie
  mimo obrazovky vyzerá v zdroji ako bežné pole, a človek ho pritom nevidí.
*/
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
  Rámik overenia (Cloudflare Turnstile). Widget je vo voľbe `flexible`, takže
  vyplní šírku rodiča; obmedzenie drží, aby sa na širokej obrazovke neroztiahol
  cez celý formulár, a na 375 px sa zmestí bez vodorovného posúvania.
*/
.turnstile {
  max-width: 20rem;
  min-height: 4.1rem;
}

.field--invalid .field__input {
  border-color: var(--color-error);
}

.field--computed {
  padding: 10px 12px;
  border: 1px dashed #a9d3bc;
  border-radius: var(--radius);
  background: var(--color-success-bg);
}

.field__output {
  font-size: 1.05rem;
  font-weight: 700;
}

.tristate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.tristate__btn {
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tristate__btn--active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

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

.wizard__status,
.wizard__saved {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--color-brand);
  transition: width 0.2s ease;
}

/*
 * Riadok, ktorého text sa počas vypĺňania mení (stav ukladania, evidenčné
 * číslo po prvom uložení). Miesto má rezervované dopredu, aby sa formulár
 * pod ním ani nad ním nepohol.
 */
.case-line {
  display: flex;
  align-items: center;
  min-height: 1.4rem;
}

/* --- sekcie prípadu ----------------------------------------------------- */

/*
 * Formulár a prehľad sekcií. Na telefóne pod sebou (výber kroku je zbalený),
 * od 1024 px vedľa seba — vtedy sú všetky sekcie vidieť naraz a nemusí sa
 * nič posúvať nabok.
 */
.case-form {
  /*
   * Na telefóne stĺpec vo flexe, nie grid: pripnutý výber kroku (`.case-steps`)
   * sa smie držať len v rámci svojho rámu a rám položky gridu je iba jej
   * riadok — vo flexe je ním celý formulár, takže výber ostane hore, kým sa
   * roluje formulárom.
   */
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

/*
 * Prehľad krokov je na telefóne pripnutý pod lištou aplikácie (56 px), aby
 * bol aktuálny krok a sekcia vidieť aj uprostred dlhého formulára. Pod lištou
 * aplikácie (z-index 20) a pod otvorenou ponukou, nad obsahom.
 */
.case-steps {
  position: sticky;
  top: 56px;
  z-index: 10;
}

.case-form__main {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  min-width: 0;
}

.case-steps__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-steps__list--wide {
  display: none;
}

.case-steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.case-steps__item:hover {
  background: var(--pr-primary-soft);
}

.case-steps__item--active {
  border-color: var(--color-brand);
  background: var(--pr-primary-soft);
  color: var(--pr-primary-dark);
  font-weight: 700;
}

.case-steps__label {
  flex: 1 1 auto;
  min-width: 0;
}

.case-steps__order {
  color: var(--color-text-muted);
  font-weight: 400;
}

.case-steps__mark {
  flex: 0 0 auto;
  color: var(--pr-text-faint);
}

.case-steps__mark--done {
  color: var(--pr-success);
}

.case-steps__mark--partial {
  color: var(--color-brand);
}

.case-steps__mark--missing {
  color: var(--color-error);
}

.case-steps__badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Zbalený výber kroku na telefóne (pripnutý cez `.case-steps`). */
.case-steps__picker {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Sekcia, v ktorej sa práve roluje — pod názvom kroku. */
.case-steps__section {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.case-steps__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}

.case-steps__summary::-webkit-details-marker {
  display: none;
}

/* Šípka rozbalenia — kreslí sa z okrajov, aby nepribudla ďalšia ikona. */
.case-steps__summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
}

.case-steps__picker[open] .case-steps__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.case-steps__counter {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.case-steps__title {
  display: block;
  font-weight: 700;
}

.case-steps__picker .case-steps__list {
  padding: 4px 6px 8px;
  border-top: 1px solid var(--color-border);
}

/*
 * Neplatná hodnota (krížik) je iná vec než chýbajúci údaj (trojuholník):
 * prvá sa neuloží, druhá bráni iba dokončeniu. Sivý počet je iba údaj —
 * koľko povinných polí v kroku ešte treba, kým sa zadávateľ nepokúsil
 * prípad dokončiť.
 */
.case-steps__mark--invalid {
  color: var(--color-error);
}

.case-steps__badge--invalid {
  background: var(--color-error);
  color: #fff;
}

.case-steps__badge--quiet {
  background: var(--color-border);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Výber kroku a ikona hľadania poľa vedľa seba (telefón). */
.case-steps__bar {
  display: flex;
  /* Ikona hľadania sa rovná zbalenému výberu kroku; pri rozbalenom zozname
     krokov nesmie rásť s ním (predtým sa natiahla na celú výšku zoznamu). */
  align-items: flex-start;
  gap: 8px;
}

.case-steps__bar .case-steps__picker {
  flex: 1 1 auto;
  min-width: 0;
}

.case-steps__search-toggle {
  flex: 0 0 auto;
  min-width: 44px;
  /* Rovnaká výška ako zbalený výber kroku (dva riadky textu + odsadenie). */
  min-height: 64px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.case-steps__search-toggle--open {
  color: var(--color-brand);
}

/* Rozbalené hľadanie ide s pripnutým výberom kroku. */
.case-steps__search {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Hľadanie nad formulárom je pre širokú obrazovku; na telefóne je v ikone. */
.wizard__search {
  display: none;
}

@media (min-width: 1024px) {
  .case-form {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
  }

  .case-steps {
    top: 12px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .case-steps__picker,
  .case-steps__search-toggle,
  .case-steps__search {
    display: none;
  }

  .case-steps__list--wide {
    display: grid;
  }

  .wizard__search {
    display: block;
  }
}

/* --- hlavička prípadu --------------------------------------------------- */

/*
 * Číslo prípadu so štítkom stavu vľavo, tlačidlá vpravo — aj na telefóne
 * v jednom riadku (PDF je tam iba ikona, „Späť“ krátke), aby prvé pole
 * formulára nebolo celú obrazovku nižšie.
 */
.section-heading.case-heading {
  align-items: center;
  gap: 8px 16px;
}

.case-heading__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.case-heading__title h1 {
  margin: 0;
  overflow-wrap: anywhere;
}

.case-heading__actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.case-heading__back-long {
  display: none;
}

/*
 * Vysvetlenie pod hlavičkou dokončeného prípadu. Na telefóne sa nekreslí —
 * stav hovorí štítok a prvé pole formulára má byť vidieť bez rolovania.
 */
.case-heading__note {
  display: none;
  margin: 0;
  font-size: 0.92rem;
}

/* Verzia slovníka a sady vzorcov v pätke prípadu. */
.case-meta {
  margin: 8px 0 0;
  font-size: 0.82rem;
}

@media (min-width: 640px) {
  .case-heading__back-long {
    display: inline;
  }

  .case-heading__back-short {
    display: none;
  }

  .case-heading__note {
    display: block;
  }
}

.wizard__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--space);
  border-top: 1px solid var(--color-border);
}

/* --- hľadanie poľa a prechod na pole ------------------------------------ */

/*
 * Zoznam zhôd je v toku stránky pod poľom, nie vysunutý nad obsahom: na
 * telefóne sa dá prejsť prstom, neprekrýva prehľad sekcií a nepotrebuje
 * vrstvenie. Dlhší zoznam sa posúva vo vlastnom rámiku.
 */
.field-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-search__list {
  max-height: 18rem;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  list-style: none;
  overflow-y: auto;
}

.field-search__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}

.field-search__item--active {
  background: var(--pr-primary-soft);
}

.field-search__item--unreachable {
  color: var(--color-text-muted);
  cursor: default;
}

.field-search__name {
  font-weight: 600;
}

.field-search__badge {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pr-warn-bg);
  color: var(--pr-warn-text);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.field-search__place,
.field-search__unlock {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.field-search__empty {
  margin: 0;
}

/* Text len pre čítačku obrazovky (počet zhôd). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*
 * Obal poľa vo formulári — cieľ prechodu z hľadania a na chýbajúci údaj.
 * Odsadenie zhora ráta s lepkavou hornou lištou na telefóne (56 px); od
 * 960 px lišta nie je a stačí malá medzera. Tá istá hodnota platí pre vrch
 * formulára po prepnutí sekcie.
 */
/*
 * Nájdené pole sa posúva pod lištu aplikácie a pripnutý výber kroku
 * (56 + ~64 px); od 960 px lišta aplikácie mizne, od 1024 px aj výber.
 */
.field-slot,
.case-form {
  min-width: 0;
  scroll-margin-top: 136px;
}

@media (min-width: 960px) {
  .field-slot,
  .case-form {
    scroll-margin-top: 88px;
  }

  .case-steps {
    top: 0;
  }
}

@media (min-width: 1024px) {
  .field-slot,
  .case-form {
    scroll-margin-top: 16px;
  }
}

/* Nájdené pole sa na chvíľu zvýrazní; bez pohybu pri „menej pohybu“. */
/* Viacnásobný výber a produkty majú vlastnú mriežku možností — v dvojstĺpcovom
   formulári by sa tiesnili v polovici šírky. */
.field-slot--wide {
  grid-column: 1 / -1;
}

.field-slot--found {
  border-radius: var(--radius);
  outline: 3px solid var(--pr-accent);
  outline-offset: 4px;
  animation: field-found 2.4s ease-out forwards;
}

@keyframes field-found {
  0% {
    outline-color: var(--pr-accent);
    background: #fff6dc;
  }
  70% {
    outline-color: var(--pr-accent);
    background: transparent;
  }
  100% {
    outline-color: transparent;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-slot--found {
    animation: none;
  }
}

/* Hláška o chýbajúcich údajoch s tlačidlom, ktoré na prvý z nich prejde. */
.alert--actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* --- zoznam prípadov ---------------------------------------------------- */

.badge--draft {
  background: var(--pr-warn-bg);
  color: var(--pr-warn-text);
  box-shadow: inset 0 0 0 1px var(--pr-warn-border);
}

/*
 * Termín po splatnosti. Je to jediný stav, ktorý si žiada zásah, preto má
 * najsilnejšiu farbu — a nie iba farbu: text badge sa mení tiež, nech sa dá
 * prečítať aj bez rozlíšenia odtieňov.
 */
.badge--overdue {
  background: #fbe4e4;
  color: #8a1c1c;
}

.check-option--inline {
  width: fit-content;
  margin-bottom: var(--space);
}

.cases-count {
  margin: 0 0 10px;
}


/* Ďalší blok stránky pod hlavným obsahom (zoznam vzorcov, poznámka). */
.page-section {
  margin-top: 32px;
}

/* Súkromná poznámka autora — pracovná pomôcka, nie údaj registra. */
.private-note {
  margin-top: 32px;
}

.private-note__field {
  min-height: 96px;
  resize: vertical;
}

.private-note__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.history {
  margin-top: 32px;
}

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

.history__note {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-bg);
}

.history__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/*
 * Zbalený riadok histórie: dátum, kto, akcia a počet zmien. Rozbaľuje sa
 * značkou <details>, takže funguje aj bez JavaScriptu a čítačka obrazovky
 * vie, že sa dá otvoriť.
 */
.history__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 44px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.92rem;
}

/* Vlastná šípka: `display: flex` na súhrne skryje predvolenú značku. */
.history__summary {
  list-style: none;
}

.history__summary::-webkit-details-marker {
  display: none;
}

.history__summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
}

/*
 * Priamy potomok: v otvorenom sedení sú vnorené položky histórie, ktoré majú
 * vlastnú šípku — potomkovský selektor by ich otočil spolu so sedením.
 */
.history__item[open] > .history__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.history__when {
  font-weight: 700;
}

.history__who,
.history__action,
.history__count,
.history__saves {
  color: var(--color-text-muted);
}

/*
 * Sedenie: uloženia toho istého používateľa krátko po sebe. Počet uložení je
 * odlíšený od počtu zmenených údajov, aby sa dve čísla vedľa seba nepomýlili.
 */
.history__saves {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-bg);
}

/* Sedenie je zložené z viacerých uložení — prúžok to prezradí už zbalené. */
.history__item--session {
  border-left: 3px solid var(--color-brand);
}

/* Jednotlivé uloženia sedenia — zbalené, otvárajú sa až na požiadanie. */
.history__nested {
  margin: 0 12px 12px;
  border-top: 1px solid var(--color-border);
}

.history__nested-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
  list-style: none;
}

.history__nested-summary::-webkit-details-marker {
  display: none;
}

.history__nested-summary::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(-45deg);
}

.history__nested[open] > .history__nested-summary::before {
  transform: rotate(45deg);
}

.history__list--nested {
  padding-bottom: 8px;
}

.history__truncated {
  margin: 10px 0 0;
}

.history__none {
  margin: 0;
  padding: 0 12px 12px;
}

.history__changes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 12px 12px;
}

.history__change {
  display: grid;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.history__field {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.history__values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.history__before {
  color: var(--color-text-muted);
  text-decoration: line-through;
  overflow-wrap: anywhere;
}

.history__arrow {
  color: var(--color-text-muted);
}

.history__after {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.history__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

@media (min-width: 800px) {
  .history__change {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: 4px 16px;
    align-items: baseline;
  }
}

/* --- modálne okno ------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space);
  background: rgba(9, 20, 31, 0.55);
}

.modal__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-width-narrow);
  /* Panel sa nesmie roztiahnuť za obrazovku — obsah sa posúva vnútri. */
  max-height: calc(100dvh - 2 * var(--space));
  padding: var(--space);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/*
 * Okno so zoznamom (náhľad hromadného pozvania). Tabuľka riadkov sa do úzkeho
 * panela nezmestí; na telefóne je aj tak na celú šírku obrazovky.
 */
.modal__panel--wide {
  max-width: var(--content-width);
}

/* Panel dostane zameranie iba programovo (Modal.tsx), rámik by nič nehovoril. */
.modal__panel:focus-visible {
  outline: none;
}

.modal__title {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  /* Posúvateľné telo oreže všetko mimo obsahu — aj rámik zamerania (3 px
     + 2 px odsadenie). Vnútorný okraj mu nechá miesto, záporný vonkajší
     drží obsah zarovnaný s nadpisom a tlačidlami. */
  padding: 6px;
  margin: -6px;
}

.modal__body p {
  margin: 0;
}

/* Druhý odsek (vysvetlenie pod hlavnou vetou) nesmie splynúť s prvým. */
.modal__body p + p {
  margin-top: 10px;
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--space);
}


@media (min-width: 640px) {
  :root {
    --space-block: 24px;
  }

  h1 {
    font-size: 1.9rem;
  }

  .container {
    padding: 32px var(--space);
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .multi-choice__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wizard__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .section-heading {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* --- ponuka podľa roly -------------------------------------------------- */

/* Odkaz, ktorý spúšťa presun v aplikácii — vyzerá ako odkaz, je to tlačidlo. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-brand);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/*
 * Odkaz v riadku tabuľky alebo v karte zoznamu: bez podčiarknutia (v hustom
 * texte pôsobí ako cudzí prvok), tučne vo farbe značky, s ikonou; pri prejdení
 * myšou dostane jemné podfarbenie ako štítok. Odsadenie je záporné, aby text
 * ostal zarovnaný so susedným riadkom bunky.
 */
.table .link-btn,
.record-card .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  margin: -2px -6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s;
}

.table .link-btn .icon,
.record-card .link-btn .icon {
  width: 16px;
  height: 16px;
}

.table .link-btn:hover,
.record-card .link-btn:hover {
  background: var(--pr-primary-soft);
  color: var(--pr-primary-dark);
}

.table .link-btn:focus-visible,
.record-card .link-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

/* --- formuláre ---------------------------------------------------------- */

/*
 * Karty (taby): pruh s čiarou pod ním, aktívna karta má podčiarknutie vo
 * farbe značky. Jeden vzhľad pre celú aplikáciu (e-maily, štatistiky) —
 * tlačidlá vedľa seba by vyzerali ako akcie, nie ako prepínanie obsahu.
 * Na úzkej obrazovke sa pruh posúva do strán, karty sa nelámu.
 */
.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  /* Posúvanie iba do strán: `overflow-x: auto` by inak zapol aj zvislé
     posúvanie a pruh by dostal zvislú lištu kvôli jedinému pixelu. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tabs__btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tabs__btn:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

.tabs__btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.tabs__btn--active,
.tabs__btn--active:hover {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

/* Pruh kariet nad obsahom stránky (štatistiky, používatelia). */
.stats-page-tabs,
.page-tabs {
  margin: 0 0 var(--space);
}

/*
 * Paleta rýchleho vyhľadávania (Ctrl+K). Stojí na vrstve modálneho okna (50):
 * nad hornou lištou (20), spodnou navigáciou (20) aj bočnou ponukou (40).
 * Na počítači je to okno v hornej tretine obrazovky; na telefóne (pod 960 px)
 * zaberá celú šírku medzi hornou lištou a spodnou navigáciou, ktoré ostávajú
 * viditeľné pod stmavením — pozri blok nižšie.
 */
.palette-backdrop {
  align-items: flex-start;
  padding-top: 10vh;
}

.palette {
  max-width: 640px;
  max-height: 100%;
  gap: 10px;
}

.palette__field {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.palette__field > .icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.palette__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}

/* Krížik prehliadača v poli `type=search` by dubloval vlastné tlačidlo. */
.palette__input::-webkit-search-cancel-button {
  display: none;
}

.palette__field:focus-within {
  border-color: var(--color-brand);
}

.palette__close {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.palette__close:hover {
  background: rgba(41, 5, 68, 0.08);
  color: var(--color-text);
}

/* Výsledky sa posúvajú vnútri; okno samo nikdy nepresiahne obrazovku. */
.palette__results {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 55vh;
  overflow-y: auto;
}

.palette__status,
.palette__keys {
  margin: 4px 0;
  font-size: 0.88rem;
}

.palette__status--error {
  color: var(--color-error);
}

.palette__keys {
  flex: 0 0 auto;
}

.palette__group-title {
  margin: 8px 0 4px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.palette__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.palette__item--active,
.palette__item:hover {
  background: var(--color-bg);
}

.palette__item--active {
  box-shadow: inset 3px 0 0 var(--color-brand);
}

/* Dlhé meno či e-mail sa orežú bodkami, riadok neprerastie paletu. */
.palette__item-title,
.palette__item-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__item-title {
  font-weight: 600;
}

.palette__item-meta {
  font-size: 0.85rem;
}

/*
 * Druhý riadok prípadu nájdeného mimo čísla: úryvok so zvýraznenou zhodou
 * a kde sa našla. Úryvok je na celú šírku, dlhší sa oreže bodkami.
 */
.palette__item-snippet {
  flex-basis: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.palette__item-snippet mark {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--pr-primary-soft);
  color: var(--color-brand-dark);
  font-weight: 600;
}

.palette__item-matched {
  flex-basis: 100%;
  font-size: 0.78rem;
}

.topbar__search {
  margin-right: 4px;
}

@media (max-width: 959px) {
  .palette-backdrop {
    padding: 56px 0 0;
  }

  /* Spodná navigácia (ak ju rola má) ostáva pod paletou viditeľná. */
  .app--shell .palette-backdrop {
    padding-bottom: var(--bottom-nav-height);
  }

  .palette {
    max-width: none;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .palette__results {
    max-height: none;
  }

  /* Na telefóne sa klávesami nevyberá — riadok so skratkami by len zaberal miesto. */
  .palette__keys {
    display: none;
  }
}

/* V nainštalovanej PWA je horná lišta o výrez nižšie; paleta tiež. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  @media (max-width: 959px) {
    .palette-backdrop {
      padding-top: calc(56px + env(safe-area-inset-top));
    }

    .app--shell .palette-backdrop {
      padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
  }
}

/* Sila hesla — štyri stupne, farba aj text (samotná farba nestačí). */
.strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.strength__bar {
  flex: 0 0 96px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
}

.strength__bar--1 {
  background: linear-gradient(90deg, #d93025 25%, var(--color-border) 25%);
}

.strength__bar--2 {
  background: linear-gradient(90deg, #e8a33d 50%, var(--color-border) 50%);
}

.strength__bar--3 {
  background: linear-gradient(90deg, #3f8f4f 75%, var(--color-border) 75%);
}

.strength__bar--4 {
  background: #2f7d3f;
}

.strength__label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- tabuľky so záložnými kartami --------------------------------------- */

/*
 * Na širokej obrazovke tabuľka, na úzkej karty. Obe podoby vznikajú z tej istej
 * definície stĺpcov (components/RecordTable.tsx), takže sa nemôžu rozísť.
 */
.table-wrap {
  display: none;
}

/*
 * Tabuľka sa nikdy neposúva do strán. Drží to `overflow-wrap: anywhere` na
 * bunkách: aj najdlhší reťazec má potom najmenšiu možnú šírku jeden znak,
 * takže sa tabuľka vojde do stránky a text sa zalomí. Šírky si rozdelí
 * prehliadač podľa obsahu (`auto`) — rovnaký podiel pre každý stĺpec by dal
 * dlhému názvu centra rovnako miesta ako dátumu. Menej dôležité stĺpce sa
 * pod 1100 px skryjú (`.col--low`); v karte na telefóne ostávajú.
 */
.table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table th,
.table td {
  /* 8 px po stranách: zoznam prípadov má pre koordinátora desať stĺpcov
     a akčné tlačidlá a s 12 px by sa na 1280 px už nezmestil. */
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  /*
   * Zalomiť sa dá kdekoľvek. Zjemniť to na `break-word` sa nedá: potom má
   * stĺpec najmenšiu šírku najdlhšieho slova a pri desiatich stĺpcoch
   * (zoznam prípadov) sa ich súčet do stránky nezmestí — tabuľka by sa začala
   * posúvať do strán. Radšej zalomené slovo než posuvník.
   */
  overflow-wrap: anywhere;
}

/*
 * Názov stĺpca sa neláme uprostred slova — „EVIDENČ / NÉ ČÍSLO“ sa nedá čítať.
 * Bunky sa lámu kdekoľvek (pravidlo vyššie), takže stĺpec aj tak dokáže byť
 * úzky; hlavička drží iba svoje najdlhšie slovo.
 */
.table th {
  overflow-wrap: break-word;
  background: #eef3f8;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

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

/*
 * Hlavička triediteľného stĺpca je tlačidlo: dedí písmo aj farbu hlavičky,
 * bez rámu a pozadia, aby vyzerala ako ostatné názvy stĺpcov — o tom, že sa
 * dá kliknúť, hovorí šípka. Aktívny stĺpec je farbou značky.
 *
 * Tlačidlo je riadkové (nie flex), aby si stĺpec nevypýtal viac miesta než
 * bez triedenia: šípka sa drží posledného slova a názov sa medzi slovami
 * láme rovnako ako v netriediteľnej hlavičke. Tlačidlo je vždy aspoň
 * riadkový blok, takže jeho zvislé odsadenie zvyšuje riadok a názov by stál
 * o 4 px nižšie než v stĺpci bez triedenia — záporný okraj ho vracia späť.
 */
.table__sort {
  display: inline;
  margin: -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.table__sort:hover,
.table__sort:focus-visible {
  background: var(--pr-primary-soft);
  color: var(--color-brand);
}

/* Posledné slovo názvu a šípka sa nerozdelia — šípka nestojí sama na riadku. */
.table__sort-last {
  white-space: nowrap;
}

.table__sort .icon {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  color: var(--pr-text-faint);
}

.table__sort--active,
.table__sort--active .icon {
  color: var(--color-brand);
}

/* Prepínač triedenia nad kartami na telefóne; v tabuľke ho nahrádza hlavička. */
.record-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-bottom: 12px;
}

/* Popis a ponuka vedľa seba — dva riadky by zoznam na telefóne zbytočne odsunuli. */
.record-sort__field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.9rem;
}

.record-sort__field > .muted {
  flex: 0 0 auto;
  white-space: nowrap;
}

.record-sort__field > .select {
  flex: 1 1 auto;
  min-width: 0;
}

.record-sort__dir {
  gap: 6px;
  padding-inline: 12px;
}

/*
 * Akčný stĺpec je posledný a zarovnaný vpravo — pri rôznom počte tlačidiel by
 * inak ľavý okraj riadok od riadku skákal. Šírka je pevná a vychádza z ikon:
 * tri sa zmestia vedľa seba, viac sa zalomí do druhého riadku. Bez nej by mu
 * rozdelenie šírok podľa obsahu dalo len toľko, koľko si vypýta jedno
 * tlačidlo, a ostatné by vyliezli na susedný stĺpec a prekryli jeho text.
 */
.table .table__actions {
  width: 10rem;
  text-align: right;
}


/*
 * Stĺpec so štítkom stavu. Bez vlastnej miery by ho rozdelenie šírok podľa
 * obsahu stlačilo tak, že by sa štítok zalomil alebo orezal.
 */
.table .col--badge {
  width: 9.5rem;
}

/*
 * Hodnota, ktorá sa zalomiť nesmie: dátum, čas, kód. Prehliadač jej dá aspoň
 * toľko miesta, koľko potrebuje — dátum rozdelený na dva riadky sa číta horšie
 * než o niečo užší susedný stĺpec.
 *
 * E-mail medzi ne nepatrí: je to najdlhšia nedeliteľná hodnota v tabuľke
 * a stĺpec, ktorý sa nesmie zalomiť, by ostatné roztlačil až za okraj stránky.
 *
 * Platí to pre hodnotu, nie pre názov stĺpca: „POSLEDNÁ ZMENA“ sa medzi
 * slovami zalomiť smie (ako každá iná hlavička), inak by si stĺpec vypýtal
 * viac miesta než jeho dátumy a pri desiatich stĺpcoch by tabuľka pretiekla.
 */
.table td.col--nowrap,
.table td code,
.table td time {
  white-space: nowrap;
  overflow-wrap: normal;
}

/*
 * Meno osoby sa láme medzi slovami, nie na slabiky (audit: stĺpec Kto).
 * `break-word` nezmenšuje najmenšiu šírku stĺpca na jeden znak (to robí
 * `anywhere`), ale meno bez medzier dlhšie než stĺpec ešte stále zalomí —
 * tabuľka tak nepretečie.
 */
.table td.col--words {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/*
 * Podrobnosti audit denníka: riadky „kľúč: hodnota“ namiesto JSON v jednom
 * riadku. Hodnota sa zalamuje kdekoľvek, aby tabuľka na 1280 px nepretiekla.
 */
.audit-meta {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 0.85rem;
}

.audit-meta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.audit-meta__row dt {
  color: var(--color-text-muted);
}

.audit-meta__row dt::after {
  content: ":";
}

.audit-meta__row dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 1099px) {
  .table .col--low {
    display: none;
  }

  /*
   * Obsah skrytého stĺpca pod hlavným údajom riadku. Ukazuje sa iba tam, kde
   * je zoznam tabuľkou a stĺpec sa skryl — v karte na telefóne (pod 800 px je
   * tabuľka celá skrytá) je to vlastný riadok karty, takže sa nezdvojí.
   */
  .table .cell-extra {
    display: block;
  }
}

/* Nad 1100 px má tento údaj vlastný stĺpec. */
.cell-extra {
  display: none;
}

/*
 * Prázdny stav zoznamu (EmptyState): ikona, nadpis, veta a akcia v strede
 * karty. Vzduch okolo hovorí, že tu nič nechýba — zoznam je naozaj prázdny.
 * Na 375 px sa nič neláme: obsah je v stĺpci a tlačidlá sa zalomia pod seba.
 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--pr-primary-soft);
  color: var(--color-brand);
}

.empty-state__icon .icon {
  width: 28px;
  height: 28px;
}

.empty-state__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.empty-state__text {
  max-width: 34rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.record-cards {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-card {
  display: grid;
  gap: 8px;
}

.record-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.record-card__rows {
  display: grid;
  gap: 4px;
  margin: 0;
}

.record-card__row {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 8px;
}

.record-card__row dt {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.record-card__row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.record-card__actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * V karte na telefóne sa akcie držia vľavo — vpravo by viseli od okraja
 * a pri rôznom počte tlačidiel by ich používateľ hľadal inde v každej karte.
 * Vpravo sa zarovnávajú až v tabuľke (viď @media nižšie).
 */
.row-actions--end {
  justify-content: flex-start;
}

/* Tlačidlo sa radšej zalomí do ďalšieho riadku, než by sa zúžilo a orezalo
   vlastný popis. */
.row-actions > .btn {
  flex: 0 0 auto;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: var(--space);
}

.pager__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.pager__size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pager__size > span {
  white-space: nowrap;
}

.pager__size .field__input {
  width: auto;
  min-height: 38px;
  padding: 4px 8px;
}

/* Drobné údaje pod sebou v jednej bunke. */
.stack-small {
  display: grid;
  gap: 2px;
  font-size: 0.9rem;
}

/* Oddeľovač medzi dvoma cestami v jednom formulári (heslo / biometria). */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-transform: lowercase;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Záložné kódy a kľúč TOTP — na prepísanie musia byť jednoznačné. */
.code-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 1rem;
}

.code-key {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

@media (min-width: 800px) {
  /* Bez `overflow-x: auto` — tabuľka sa vojde vždy: bunky sa dajú zalomiť
     kdekoľvek a menej dôležité stĺpce sa pod 1100 px skryjú. */
  .table-wrap {
    display: block;
  }

  /*
   * Od tejto šírky je zoznam tabuľkou a akčné tlačidlá sú samotné ikony;
   * popis ostáva v `title` aj v `aria-label`.
   */
  .action-btn .action-btn__text {
    display: none;
  }

  .action-btn {
    padding: 6px;
  }

  /* Tlačidlo v hlavičke stránky (export zoznamu) si text nechá — samotná
     ikona by tam nič nevysvetlila a miesto je. */
  .action-btn--labelled .action-btn__text {
    display: inline;
  }

  /* Dve triedy, aby vyhralo nad neskorším `.action-btn` v pravidlách bočného panela. */
  .action-btn.action-btn--labelled {
    padding: 6px 14px;
  }

  /* Kompaktné tlačidlo pri nadpise má na širokej obrazovke aj text. */
  .action-btn--compact .action-btn__text {
    display: inline;
  }

  .action-btn.action-btn--compact {
    padding: 6px 14px;
  }

  .row-actions--end {
    justify-content: flex-end;
  }

  .record-cards {
    display: none;
  }

  .record-sort,
  .record-select-all {
    display: none;
  }

  /* Zoznam bez tabuľkovej podoby (napr. zariadenia pre prihlásenie biometriou) ostáva kartový. */
  .record-cards--always {
    display: grid;
  }
}

/* QR kód pri párovaní 2FA — ostré hrany aj po zväčšení. */
.qr {
  width: min(240px, 100%);
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  image-rendering: pixelated;
}

/* Formulár v modálnom okne: posúva sa telo, tlačidlá ostávajú na mieste. */
.modal__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- označovanie riadkov a hromadné akcie ------------------------------- */

/*
 * Políčko výberu v tabuľke aj v karte (components/RecordTable.tsx). Samotné
 * políčko má 20 px, dotyková plocha okolo neho vzniká odsadením bunky
 * a hlavičky karty.
 */
.select-box {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.table .table__select {
  width: 2.5rem;
  padding-right: 4px;
  text-align: center;
  vertical-align: middle;
}

.table tr.is-selected td {
  background: var(--pr-primary-soft);
}

/* Karta s políčkom: políčko sedí na riadku nadpisu, nadpis dostane zvyšok. */
.record-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}

/*
 * S políčkom je hlavička jeho popisom (label): ťuknutie na číslo prípadu
 * výber prepne a dotyková plocha je celý riadok vysoký aspoň 44 px — samotné
 * políčko má 20 px. Záporný okraj vracia riadok do rytmu karty.
 */
.record-card__head--select {
  min-height: 44px;
  margin: -10px 0;
  cursor: pointer;
}

.record-card__head .record-card__title {
  flex: 1 1 auto;
  min-width: 0;
}

.record-card--selected {
  background: var(--pr-primary-soft);
  border-color: var(--color-brand);
}

/*
 * Kompaktná karta (prehľad: najbližšie termíny): hodnoty ostatných stĺpcov
 * v jednom riadku pod nadpisom, oddelené bodkou, akcie vpravo od nadpisu.
 * Názvy stĺpcov ostávajú čítačke (.visually-hidden v RecordTable.tsx).
 */
.record-cards--compact {
  gap: 8px;
}

.record-card--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 14px;
}

.record-card--compact .record-card__head {
  min-height: 0;
}

.record-card--compact .record-card__title {
  font-size: 1rem;
}

.record-card--compact .record-card__rows {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 0.9rem;
}

.record-card--compact .record-card__row {
  display: contents;
}

.record-card--compact .record-card__row dd {
  display: inline-flex;
  align-items: center;
}

.record-card--compact .record-card__row + .record-card__row dd::before {
  content: "·";
  margin-right: 6px;
  color: var(--color-text-muted);
}

.record-card--compact .record-card__actions {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.record-card--compact .record-card__actions .btn {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* „Označiť všetko na strane“ nad kartami — karty hlavičku tabuľky nemajú. */
.record-select-all {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
}

/*
 * Lišta hromadných akcií. Pripnutá k spodku okna, kým je zoznam na obrazovke;
 * pri dorolovaní na koniec sa zastaví nad pätkou (je posledným prvkom
 * obsahu). Na telefóne má dva riadky: počet so zrušením výberu a pod ním
 * akcie; tlačidlá si text nezalamujú — keď sa vedľa seba nevojdú, idú pod
 * seba. Od 640 px je všetko v jednom riadku.
 */
.bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-left: calc(-1 * var(--space));
  margin-right: calc(-1 * var(--space));
  padding: 10px var(--space);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -4px 16px rgba(9, 20, 31, 0.12);
}

.bulk-bar__head {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bulk-bar__count {
  font-weight: 700;
  white-space: nowrap;
}

.bulk-bar__actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.bulk-bar__actions .btn,
.bulk-bar__head .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

.bulk-bar__head .btn {
  flex: 0 0 auto;
}

/*
 * Na telefóne je pod obsahom spodná navigačná lišta (`.bottom-nav`), lišta
 * hromadných akcií sa preto pripína nad ňu, nie k okraju okna.
 */
@media (max-width: 959px) {
  .app--shell .bulk-bar {
    bottom: var(--bottom-nav-height);
  }
}

@media (min-width: 640px) {
  .bulk-bar__head {
    flex: 0 1 auto;
  }

  .bulk-bar__actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .bulk-bar__actions .btn {
    flex: 0 0 auto;
  }
}

/* --- účet --------------------------------------------------------------- */

/* Karty účtu pod sebou na telefóne; od 960 px mriežka: údaje | heslo,
   e-maily na celú šírku, biometria | 2FA. */
.account-grid {
  display: grid;
  gap: var(--space-block);
}

@media (min-width: 960px) {
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
  }

  .account-grid__wide {
    grid-column: 1 / -1;
  }

  /* Voľby e-mailov v dvoch stĺpcoch, aby karta na celú šírku nebola vysoká. */
  .account-grid__wide .check-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- štatistiky --------------------------------------------------------- */

/*
 * Filtre nad zoznamom — jeden vzhľad pre prípady, štatistiky, používateľov,
 * centrá, produkty, termíny aj audit (components/FilterBar.tsx).
 * Medzera pod filtrami patrí sem, nie zoznamu pod nimi: pod filtrami býva
 * tabuľka, karty, hláška aj text načítania.
 */
.filter-bar {
  margin-bottom: var(--space);
}

.filter-bar__title {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

/* Hlavička filtra s tlačidlom na zbalenie. */
.filter-bar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.filter-bar__head .filter-bar__title {
  margin-bottom: 0;
}

.filter-bar__heading {
  min-width: 0;
}

/* Súhrn uplatneného filtra, kým sú polia zbalené („Obdobie … · centrum: …“). */
.filter-bar__summary {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.filter-bar__toggle {
  min-height: 38px;
}

/* Rýchly výber je nad poľami a ostáva vidieť aj pri zbalených filtroch. */
.filter-bar__quick {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* Pri zbalených poliach je rýchly výber posledný — čiara by oddeľovala nič. */
.filter-bar__quick--last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/*
 * Rýchly výber: na širokej obrazovke čipy, na telefóne jeden rozbaľovací
 * výber s krížikom (čipy v riadkoch zaberali dve výšky, posuvný riadok sa
 * na dotyku neovládal spoľahlivo).
 */
.quick-select__mobile {
  display: none;
  align-items: center;
  gap: 8px;
}

.quick-select__mobile > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.quick-select__clear {
  flex: 0 0 auto;
}

@media (max-width: 959px) {
  .quick-select .chips {
    display: none;
  }

  .quick-select__mobile {
    display: flex;
  }
}

/* Zbalené filtre: `hidden` musí prebiť display: grid/flex mriežky a tlačidiel. */
.filter-bar__grid[hidden],
.filter-bar__actions[hidden] {
  display: none;
}

.filter-bar__grid {
  display: grid;
  gap: 12px;
}

/* Pole, ktoré sa nedelí na stĺpce — napríklad záložky stavu účtu. */
.filter-bar__wide {
  grid-column: 1 / -1;
}

/* Prepínač vo filtri stojí v mriežke pri poliach; zarovnáva sa k ich spodku. */
.filter-bar__check {
  align-self: end;
  margin: 0;
}

.filter-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space);
}

/*
 * Kým sa načítavajú nové čísla, staré ostávajú na obrazovke stlmené a nad
 * nimi je riadok so stavom — prázdna stránka bez indikátora vyzerala ako
 * výpadok (N-08).
 */
.stats-content--busy {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s;
}

.stats-refreshing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spinner-turn 0.8s linear infinite;
}

@keyframes spinner-turn {
  to {
    transform: rotate(360deg);
  }
}

.stats-kpis {
  display: grid;
  gap: 10px;
  margin: 0 0 var(--space);
  padding: 0;
  list-style: none;
}

.stats-kpi {
  padding: 12px 14px;
}

.stats-kpi__label {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.stats-kpi__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stats-kpi__value {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 9px;
  border-left: 3px solid var(--color-border);
}

/* Farba pruhu drží dvojicu „moje centrum | celok“ zhodnú s farbami v grafoch. */
.stats-kpi__value--mine {
  border-left-color: var(--pr-primary);
}

.stats-kpi__value--all {
  border-left-color: var(--pr-teal);
}

.stats-kpi__series {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.stats-kpi__value strong {
  font-size: 1.15rem;
  line-height: 1.2;
}

/* Z koľkých prípadov je hodnota známa — bez toho sa podiel nedá čítať. */
.stats-kpi__known {
  color: var(--color-text-muted);
  font-size: 0.74rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.stats-grid {
  display: grid;
  gap: var(--space);
}

.stats-chart {
  min-width: 0;
}

.stats-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stats-chart__title {
  margin: 0;
  font-size: 1.02rem;
}

.stats-chart__save {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.stats-chart__note,
.stats-chart__state {
  margin: 8px 0 0;
}

/* Plátno grafu si výšku drží samo; šírku dostane od karty. */
.stats-chart__canvas {
  width: 100%;
  margin-top: 8px;
}

.stats-empty,
.stats-suppressed {
  margin: 0 0 var(--space);
}

.stats-footnote {
  margin: var(--space) 0 0;
}

/* --- trendy, krížové pohľady, porovnanie centier ----------------------- */

.stats-section {
  margin-top: calc(var(--space) * 2);
}

.stats-section .section-heading {
  margin-bottom: 12px;
}

.stats-tabs {
  margin-bottom: var(--space);
}

/* Dvojica „moje centrum | celok“ v jednej bunke; farby ako v grafoch. */
.stats-pair {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-variant-numeric: tabular-nums;
}

.stats-pair__mine {
  color: var(--pr-primary);
  font-weight: 700;
}

.stats-pair__all {
  color: var(--pr-teal);
}

.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  font-size: 0.82rem;
}

.stats-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stats-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.stats-legend__dot--mine {
  background: var(--pr-primary);
}

.stats-legend__dot--all {
  background: var(--pr-teal);
}

/* Zmena oproti predošlému obdobiu — farba aj znamienko, farba sama nestačí. */
.stats-delta {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* V kartách ukazovateľov je málo miesta: text zmeny sa zalamuje (v tabuľkách ostáva na riadku). */
.stats-kpi .stats-delta {
  white-space: normal;
}

.stats-delta--better {
  color: #246044;
}

.stats-delta--worse {
  color: var(--color-error);
}

.stats-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.stats-cell__delta {
  font-size: 0.78rem;
}

.stats-cross-grid {
  display: grid;
  gap: var(--space);
}

.stats-cross {
  min-width: 0;
}

.stats-cross__title {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.stats-cross__intro {
  margin: 0 0 10px;
  font-size: 0.88rem;
}

.stats-benchmark__note {
  margin: 0 0 var(--space);
}

/* Riadok môjho centra v tabuľke porovnania. */
.stats-own {
  color: var(--pr-primary);
  font-weight: 700;
}

/* Uložené pohľady a porovnanie období nad filtrami štatistík. */
.stats-views {
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.stats-views__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.stats-views__pick,
.stats-views__name {
  flex: 1 1 220px;
  min-width: 0;
}

.stats-views__save {
  min-height: 44px;
}

.stats-views__help {
  margin: 8px 0 0;
}

.stats-views__compare {
  margin-top: 0;
}

.stats-compare {
  margin: 0 0 var(--space);
}

/* --- pomoc -------------------------------------------------------------- */

.help-group {
  margin: 0 0 var(--space);
}

.help-group__title {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.help-topics {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-topic__title {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.help-topic__text {
  margin: 0 0 10px;
}

.help-purpose {
  margin-top: var(--space);
}

/* Karty stránky Pomoc: obsah pod lištou kariet potrebuje medzeru. */
.tabs + .help-group,
.tabs + .faq {
  margin-top: var(--space);
}

/* Otázky a odpovede — karta stránky Pomoc. */
.faq-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--space);
}

.faq-search__row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.faq-search__input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Vlastné tlačidlo Vymazať — natívny krížik poľa by bol druhý vedľa neho. */
.faq-search__input::-webkit-search-cancel-button {
  display: none;
}

.faq-search__count {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.9rem;
}

.faq-group {
  margin: 0 0 var(--space);
}

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

/* Otázka z odkazu v adrese sa posúva pod lepkavú lištu na telefóne (56 px). */
.faq-item {
  padding: 0;
  scroll-margin-top: 72px;
}

@media (min-width: 960px) {
  .faq-item {
    scroll-margin-top: 16px;
  }
}

.faq-item__q {
  padding: 12px var(--space);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.faq-item[open] > .faq-item__q::before {
  transform: rotate(45deg);
}

.faq-item__q:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.faq-item__a {
  padding: 0 var(--space) var(--space) calc(var(--space) + 18px);
}

.faq-item__a p {
  margin: 0 0 10px;
}

.faq-item__a code {
  font-size: 0.92em;
}

.faq-mark {
  padding: 0 1px;
  background: var(--pr-warn-bg);
  color: inherit;
  border-radius: 2px;
}

/* --- prehľad po prihlásení ---------------------------------------------- */

/*
 * Dlaždice so súhrnnými číslami. Na telefóne pod sebou, na širšej obrazovke
 * v dvoch a od 960 px v štyroch stĺpcoch — rovnako ako karty na štatistikách.
 */
/* Počítadlo pri položke ponuky: čo čaká na prácu. */
.sidebar__count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pr-accent);
  color: var(--pr-accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

/* „Pokračovať, kde som skončil“ na prehľade. */
.dash-continue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--space);
  padding: 14px 16px;
  border-left: 4px solid var(--pr-primary);
}

.dash-continue__label {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.dash-continue__case {
  margin: 0;
  overflow-wrap: anywhere;
}

.dash-kpis__title {
  margin: 0 0 10px;
  font-size: 1.02rem;
}

/* Dve dlaždice v riadku aj na telefóne — štyri pod sebou by najdôležitejšie
   číslo (termíny po lehote) odsunuli pod okraj obrazovky. */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 var(--space);
  padding: 0;
  list-style: none;
}

/* Dlaždice po inom bloku (posledné úpravy) držia rytmus sekcií prehľadu. */
.container > * + .dash-kpis {
  margin-top: 32px;
}

.dash-kpi {
  padding: 10px 12px;
}

.dash-kpi__label {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dash-kpi__value {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.dash-kpi__note {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* Číslo, ktoré si žiada zásah — farba nie je jediný nosič, popis je pod ním. */
.dash-kpi--alert .dash-kpi__value {
  color: var(--color-error);
}

/*
 * Súhrn zadávateľov: tri dlaždice a vedľa nich (na telefóne pod nimi) karta
 * s päticou, ktorá si žiada pozornosť. Riadok pätice je odkaz na stránku
 * Zadávatelia so štítkom počtu konceptov a metaúdajmi pod ním — tá istá podoba
 * ako posledné úpravy, aby prehľad hovoril jedným jazykom.
 */
.dash-entrants {
  display: grid;
  gap: 12px;
}

.dash-entrants__kpis {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin: 0;
}

.dash-entrants__foot {
  margin: 10px 0 0;
}

/* E-mail pod menom zadávateľa — dvaja lekári s rovnakým menom sa inak nerozlíšia. */
.entrants__email {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

/* Upozornenie s odkazom na obrazovku, kde sa dá vybaviť. */
.dash-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 var(--space);
}

.dash-notice__text {
  margin: 0;
  flex: 1 1 220px;
}

.dash-chart {
  margin-top: var(--space);
}

/*
 * Kompletnosť údajov: údaj, počet prípadov a podiel. Pruh je len doplnok
 * k číslu, preto je krátky a v bunke — desať pruhov na celú šírku pod sebou
 * sa čítalo horšie než percentá.
 */
.dash-completeness__share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-completeness__bar {
  flex: 0 0 auto;
  width: 5rem;
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.dash-completeness__fill {
  display: block;
  height: 100%;
  background: var(--color-brand);
}

.dash-completeness__value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dash-completeness__more {
  display: flex;
  margin-top: var(--space);
}

/*
 * Posledné úpravy: prípady a termíny v dvoch kartách vedľa seba, na telefóne
 * pod sebou. Riadok je odkaz so štítkom stavu a pod ním čas a meno — bez
 * tabuľky, aby päť riadkov nezaberalo viac než súhrnné dlaždice nad nimi.
 */

.dash-recent__grid {
  display: grid;
  gap: 12px;
}

.dash-recent__heading {
  margin: 0 0 10px;
  font-size: 1rem;
}

.dash-recent__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-recent__row {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}

.dash-recent__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.dash-recent__row:last-child {
  padding-bottom: 0;
}

.dash-recent__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dash-recent__link {
  font-weight: 600;
}

.dash-recent__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (min-width: 640px) {
  .filter-bar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-kpis,
  .dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dash-kpi {
    padding: 12px 14px;
  }

  .help-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .filter-bar__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-kpis,
  .dash-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dash-recent__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Dlaždice súhrnu zadávateľov pod sebou vľavo, pätica vpravo. */
  .dash-entrants {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }

  .dash-kpis.dash-entrants__kpis {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- bočný panel a horná lišta ----------------------------------------- */

.icon {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/*
 * Horná lišta na telefóne. Drží sa navrchu aj pri posúvaní obsahu — ponuka
 * a odhlásenie majú byť po ruke aj na dlhom zozname. Vrstvou je pod prekrytím
 * vysunutej ponuky (30) aj pod samotnou ponukou (40), takže ju otvorená ponuka
 * prekryje.
 *
 * Odsadenie o výrez obrazovky sa pridáva až v samostatnom okne (viď blok
 * `display-mode` nižšie): v okne prehliadača vracia Chrome na telefóne
 * s výrezom `env(safe-area-inset-top)` nenulovú hodnotu aj vtedy, keď je lišta
 * prehliadača nad nami — lišta aplikácie by o toľko zbytočne narástla.
 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 44 px dotykové tlačidlo + 2 × 6 px = 56 px, rovnako ako hlavička ponuky. */
  min-height: 56px;
  padding: 6px 8px;
  background: var(--color-brand);
  color: #fff;
}

.topbar__brand {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topbar__spacer {
  width: 44px;
}

.sidebar__overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(41, 5, 68, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sidebar__overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/*
 * Bočný panel je stĺpec s tromi časťami: hlavička, ponuka a pätka. Posúva sa
 * iba ponuka uprostred (`.sidebar__nav`), takže meno, jazyk a odhlásenie ostanú
 * dole aj vtedy, keď má rola dlhú ponuku a na obrazovku sa nezmestí.
 */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(280px, 85vw);
  background: linear-gradient(180deg, var(--pr-primary-deep) 0%, var(--pr-primary-dark) 100%);
  color: #fff;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  overflow: hidden;
}

.sidebar--open {
  transform: none;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
}

/* Hľadanie na začiatku ponuky so skratkou vpravo. */
.sidebar__search {
  margin-bottom: 6px;
}

/*
 * Na telefóne je lupa v hornej lište — v bočnej ponuke by bola dvakrát.
 * Selektor s rodičom, aby prebil `.sidebar__link { display: flex }` nižšie.
 */
@media (max-width: 959px) {
  .sidebar__nav .sidebar__search {
    display: none;
  }
}

.sidebar__kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  font: inherit;
  font-size: 0.72rem;
  opacity: 0.75;
}

.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Rovnakých 56 px ako horná lišta — pri vysunutí ponuky nesmie názov skočiť. */
  min-height: 56px;
  padding: 6px 8px 6px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar__brand {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar__nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  /* Bez `min-height: 0` by sa stĺpec neposúval, ale roztiahol a vytlačil pätku. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*
 * Skupina ponuky: čiara a nad ňou malý nadpis. Prvá skupina čiaru nemá — bola
 * by hneď pod hlavičkou panela, ktorá už jednu má.
 */
.sidebar__group + .sidebar__group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar__group-title {
  margin: 0 0 4px;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.sidebar__link {
  display: flex;
  /* tlačidlo v bloku by malo šírku obsahu — položka musí byť klikateľná v celej šírke ponuky */
  width: 100%;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.sidebar__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar__link--active {
  background: var(--pr-accent);
  color: var(--pr-primary-deep);
}

.sidebar__link--active:hover {
  background: var(--pr-accent-hover);
  color: var(--pr-primary-deep);
}

.sidebar__foot {
  /* Pätka drží spodok panela aj vtedy, keď je ponuka krátka. */
  margin-top: auto;
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.sidebar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pr-accent);
  color: var(--pr-primary-deep);
  font-weight: 700;
}

.sidebar__user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar__user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.sidebar__user-role {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

.sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
}

/*
 * Prepínač jazyka a odhlásenie v jednej výške: obe 44 px vrátane rámika
 * (prepínač má rámik na obale, tlačidlo na sebe — bez tohto bol prepínač
 * o 2 px vyšší).
 */
.sidebar__actions .lang {
  box-sizing: border-box;
  height: 44px;
}

.sidebar__actions .lang__btn {
  min-height: 42px;
}

.sidebar__actions .sidebar__logout {
  box-sizing: border-box;
  min-height: 44px;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * Odhlásenie je v pätke iba na širokej obrazovke. Na telefóne je v hornej
 * lište vpravo ako ikona — v pätke by bolo to isté tlačidlo dvakrát.
 */
.sidebar__logout {
  display: none;
}

.sidebar .btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* Prepínač jazyka si drží svoju veľkosť — splošťovať sa nemá. */
.sidebar .lang {
  flex: 0 0 auto;
}

.sidebar .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.app__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 960px) {
  .app--shell {
    flex-direction: row;
  }

  .topbar,
  .sidebar__overlay,
  .sidebar__close {
    display: none;
  }

  .sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 260px;
    width: 260px;
    height: 100vh;
    transform: none;
    transition: none;
    box-shadow: none;
  }

  /* Na širokej obrazovke horná lišta nie je, takže odhlásenie patrí do pätky. */
  .sidebar__logout {
    display: inline-flex;
  }

  .app--shell .app__body {
    min-height: 100vh;
  }

  /*
   * Na počítači sú tlačidlá jemne nižšie a s drobnejším písmom — dotykovú
   * výšku 44 px potrebuje prst, nie ukazovateľ myši.
   */
  .btn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.92rem;
  }

  .btn--small {
    min-height: 34px;
    padding: 6px 10px;
  }

  .chip {
    min-height: 36px;
  }

  /* Za `.btn--small`, aby ikone ostalo štvorcové odsadenie a tri tlačidlá sa
     zmestili do akčného stĺpca vedľa seba. */
  .action-btn {
    min-width: 34px;
    min-height: 34px;
    padding: 6px;
  }
}

/* --- hlášky po akcii (toasty) ------------------------------------------- */

/*
 * Jedno miesto pre všetky hlášky o výsledku akcie. Na telefóne sa vysunú zhora
 * cez celú šírku, na širokej obrazovke stoja vpravo hore. Úspech a informácia
 * zmiznú samy, chyba ostáva do zavretia (viď frontend/src/toast.ts).
 */
.toasts {
  position: fixed;
  /*
   * Pod hornou lištou (56 px), nie cez ňu. Chybová hláška ostáva do zavretia,
   * takže by inak zakryla tlačidlo ponuky aj odhlásenie — jediné dve veci,
   * ktoré má používateľ na telefóne stále po ruke.
   */
  top: calc(56px + 8px);
  left: 8px;
  right: 8px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Prázdny obal nesmie prekrývať obsah pod sebou ani chytať ukazovateľ. */
  pointer-events: none;
}


.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 14px;
  border: 1px solid var(--color-border);
  border-left-width: 5px;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 6px 24px rgba(41, 5, 68, 0.18);
  pointer-events: auto;
}

.toast__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tlačidlo v hláške (Späť po zmazaní). */
.toast__action {
  min-height: 34px;
  padding: 4px 12px;
}

.toast__close {
  flex: 0 0 auto;
  /* Dotykový cieľ; na počítači sa zmenšuje (viď @media nižšie). Záporný
     okraj ho nechá vyčnievať do výplne hlášky, aby jednoriadkový text
     nedostal prázdny pás pod sebou. */
  min-width: 44px;
  min-height: 44px;
  margin: -10px -4px -10px 0;
  color: var(--color-text-muted);
}

.toast__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.toast--success {
  border-left-color: var(--pr-success);
  background: var(--color-success-bg);
}

.toast--error {
  border-left-color: var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.toast--info {
  border-left-color: var(--color-brand);
  background: var(--pr-primary-soft);
  color: var(--pr-primary-dark);
}

@media (min-width: 640px) {
  .toasts {
    left: auto;
    right: var(--space);
    top: var(--space);
    width: min(420px, calc(100vw - 2 * var(--space)));
  }

  .toast__close {
    min-width: 36px;
    min-height: 36px;
  }
}

/* --- výrez obrazovky (iba samostatné okno) ------------------------------- */

/*
 * Odsadenie o výrez a o pruh systémových tlačidiel patrí len tam, kde je
 * aplikácia sama na obrazovke — teda do nainštalovanej PWA. V okne prehliadača
 * je nad nami jeho vlastná lišta a pod nami jeho vlastný pruh; Chrome
 * (a s ním Brave) na telefóne s výrezom napriek tomu vracia
 * `env(safe-area-inset-top)` nenulový, takže by horná lišta aplikácie
 * o toľko narástla a nad ňou by ostal prázdny fialový pás.
 */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .topbar {
    padding-top: calc(6px + env(safe-area-inset-top));
  }

  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .footer {
    padding-bottom: calc(var(--space) + env(safe-area-inset-bottom));
  }

  /* Lišta hromadných akcií sedí nad pruhom systémových tlačidiel (bez
     spodnej navigácie, teda od 960 px); pod ňou o výrez nižšie je aj spodná
     navigácia, takže na telefóne stačí jej výška. */
  .bulk-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  @media (max-width: 959px) {
    .app--shell .bulk-bar {
      padding-bottom: 10px;
      bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
  }

  /* Lišta je o výrez nižšie, hlášky pod ňou tiež. */
  .toasts {
    top: calc(56px + 8px + env(safe-area-inset-top));
  }

  /* Aj pripnutý prehľad krokov sedí pod lištou o výrez nižšie. */
  .case-steps {
    top: calc(56px + env(safe-area-inset-top));
  }
}

@media (min-width: 640px) {
  @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    .toasts {
      top: calc(var(--space) + env(safe-area-inset-top));
    }
  }
}

/* --- spotreba produktov vo formulári ------------------------------------ */

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

.product-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* Názov produktu drží celý riadok, aby sa dlhý katalógový názov nezlomil
   doprostred medzi polia. */
.product-list__name {
  flex: 1 1 100%;
  font-weight: 600;
}

.product-list__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.product-list__label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.product-list__qty {
  width: 6.5rem;
}

.product-list__source {
  min-width: 10rem;
}

/* --- exporty ------------------------------------------------------------ */

.exports-list {
  margin: 0 0 var(--space);
  padding-left: 1.2rem;
  color: var(--color-text-muted);
}

.exports-list li {
  margin-bottom: 4px;
}

.btn--disabled {
  opacity: 0.6;
  cursor: default;
}

/* --- tlačová súhrnná správa --------------------------------------------- */

.report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space);
}

.report__paper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space);
}

.report__head h1 {
  margin-top: 0;
}

.report__meta {
  display: grid;
  gap: 8px 16px;
  margin: 0 0 var(--space);
}

.report__meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report__meta dt {
  color: var(--color-text-muted);
}

.report__meta dt::after {
  content: ":";
}

.report__meta dd {
  margin: 0;
  font-weight: 600;
}

.report__section {
  margin-bottom: calc(var(--space) * 1.5);
}

.report__table {
  width: 100%;
  margin-bottom: var(--space);
}

.report__charts {
  display: grid;
  gap: var(--space);
}

.report__chart {
  margin: 0;
  min-width: 0;
}

.report__chart figcaption {
  margin-bottom: 4px;
  font-weight: 600;
}

.report__canvas {
  width: 100%;
}

.report__foot {
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

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

  /*
   * Plátno grafu dostane v tlači pevnú šírku podľa A4 (210 mm mínus okraje):
   * ECharts kreslí do rozmeru, aký mal na obrazovke, takže z telefónu by graf
   * vyšiel úzky a zo širokého monitora by presahoval stranu.
   */
  .report__charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 186mm;
  }

  .report__chart {
    width: 91mm;
  }

  .report__canvas {
    width: 91mm;
  }

  .report__table {
    width: 186mm;
  }
}

/*
 * Tlač: samotná správa na A4 bez ponuky, hlavičky a tlačidiel. Sekcia sa
 * nesmie zlomiť uprostred grafu ani tabuľky — v PDF by ostala polovica na
 * jednej strane a polovica na druhej.
 */
@media print {
  @page {
    size: A4;
    margin: 14mm 12mm 16mm;
  }

  body {
    background: #fff;
  }

  .no-print,
  .header,
  .topbar,
  .sidebar,
  .sidebar__overlay,
  .footer,
  .update-bar,
  .bottom-nav {
    display: none !important;
  }

  .app,
  .app__body,
  .container {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .report__paper {
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .report__section,
  .report__chart,
  .report__table,
  .report__foot {
    break-inside: avoid;
  }

  .report__section {
    page-break-inside: avoid;
  }

  .report__charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report__table th,
  .report__table td {
    border-color: #999;
  }

  /*
   * Pätka s dátumom, verziou a vyhlásením ostáva v toku dokumentu. Prehliadače
   * síce vedia opakovať prvok s position: fixed na každej strane, ale ten sa
   * potom prekrýva s posledným riadkom textu — radšej jedna čitateľná pätka
   * než opakovaná cez obsah. Dátum aj verzia sú okrem nej aj v hlavičke správy.
   */
  .report__foot {
    background: #fff;
  }
}

/* --- E-maily systému ---------------------------------------------------- */

.mail-group {
  margin-top: var(--space);
}

/* Druh správy tak, ako je v denníku odoslanej pošty — pod predmetom. */
.mail-template {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* Spúšťač: udalosť má pokojnú farbu, denný beh a ručné vyžiadanie vlastnú. */
.badge--trigger-cron {
  background: var(--pr-primary-soft);
  color: var(--pr-primary-dark);
}

.badge--trigger-manual {
  background: var(--pr-warn-bg);
  box-shadow: inset 0 0 0 1px var(--pr-warn-border);
  color: var(--pr-warn-text);
}

/* Správa vo fronte: pokojná značková farba — nič nezlyhalo, ešte len ide. */
.badge--queued {
  background: var(--pr-primary-soft);
  color: var(--pr-primary-dark);
}

.settings-mail-link {
  margin: 0 0 var(--space);
}

/*
 * Načítavací stav: značková ikona sa kreslí jedným ťahom (priedušnica, obe
 * pľúca), naskočí embolus, chvíľu drží a začne odznova. Nič netlčie ani
 * nedýcha — embolus nie je srdce. Tie isté krivky, farby a hrúbka ťahu ako
 * v ikone (assets/img/icon.svg).
 *
 * Kreslí ho shell pred štartom klienta (index.html, kým je #root prázdny)
 * a klient počas overenia prihlásenia (components/Loader.tsx). Záchyt štartu
 * (boot-fallback) má prednosť. Pri „obmedziť pohyb“ stojí hotová ikona.
 */
.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--color-bg);
}

#root:not(:empty) ~ .boot-loader,
body:has(.boot-fallback) .boot-loader {
  display: none;
}

.boot-loader--inline {
  position: static;
  min-height: 60vh;
  background: transparent;
}

.boot-loader__tile {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 22%;
  background: var(--color-brand);
}

.boot-loader__tile svg {
  width: 62%;
  height: 62%;
  overflow: visible;
}

.boot-loader__tile path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dĺžky kriviek: priedušnica 104, každé pľúco 541,5 (getTotalLength). */
.boot-loader__trachea {
  stroke-dasharray: 104;
  animation: boot-trachea 3.2s linear infinite;
}

.boot-loader__lung {
  stroke-dasharray: 542;
  animation: boot-lung 3.2s linear infinite;
}

.boot-loader__dot {
  fill: var(--pr-accent);
  transform-origin: 176px 300px;
  animation: boot-dot 3.2s linear infinite;
}

/* Cyklus 3,2 s: priedušnica 0–0,35 s, pľúca 0,3–1,3 s, embolus 1,25–1,55 s,
   pokoj do 2,8 s, zhasnutie do 3,1 s a znova. */
@keyframes boot-trachea {
  0% { stroke-dashoffset: 104; opacity: 1; }
  11% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes boot-lung {
  0%, 9% { stroke-dashoffset: 542; opacity: 1; }
  40% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes boot-dot {
  0%, 39% { opacity: 0; transform: scale(0); }
  45% { opacity: 1; transform: scale(1.18); }
  48% { transform: scale(1); }
  88% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-loader__trachea,
  .boot-loader__lung,
  .boot-loader__dot {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }
}

/* Záchytná obrazovka štartu (shell, skript data-spectra-pe-boot): prekryje
   prázdnu plochu, keď sa klient nespustí. Nesmie sa spoliehať na nič
   z klienta — len na toto CSS, a aj bez neho ostane čitateľný text. */
.boot-fallback {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg);
  color: var(--color-text);
}

.boot-fallback__card {
  width: 100%;
  max-width: 480px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.boot-fallback__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.boot-fallback__text {
  margin: 0 0 16px;
}

.boot-fallback__detail {
  display: block;
  margin: 0 0 16px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.boot-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.boot-fallback__version {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* --- spodná lišta (telefón) ---------------------------------------------- */

/*
 * Štyri najčastejšie cesty pripnuté dole na telefóne — prehľad, prípady,
 * termíny, nový prípad (viď components/BottomNav.tsx). Vrstvou rovnako ako
 * horná lišta (20): pod prekrytím vysunutej ponuky (30) aj pod ňou (40),
 * takže ju otvorená ponuka prekryje. Na širokej obrazovke lišta nie je —
 * ponuka je stále vľavo.
 *
 * Výška lišty je v `--bottom-nav-height`, aby s ňou rátala rezerva pätky
 * (nižšie) a nič dole neostalo zakryté.
 */
.app {
  --bottom-nav-height: 60px;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--bottom-nav-height);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -4px 16px rgba(41, 5, 68, 0.08);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Dotyková plocha: celá výška lišty, najmenej 44 px. */
  min-width: 44px;
  min-height: 44px;
  padding: 6px 4px 8px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.bottom-nav__item:hover {
  color: var(--color-brand);
}

.bottom-nav__item:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius);
}

/* Aktívna položka: farbou značky a plným prúžkom nad ikonou. */
.bottom-nav__item--active {
  color: var(--color-brand);
  font-weight: 700;
}

.bottom-nav__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 26px;
  border-radius: 13px;
}

.bottom-nav__item--active .bottom-nav__icon {
  background: var(--pr-primary-soft);
}

.bottom-nav__label {
  font-size: 0.72rem;
  line-height: 1.2;
}

/* Počítadlo pri ikone — to isté číslo ako v bočnej ponuke. */
.bottom-nav__count {
  position: absolute;
  top: -6px;
  left: calc(50% + 6px);
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pr-accent);
  color: var(--pr-accent-text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Rezerva pätky, aby lišta nezakrývala posledný riadok ani pätku. */
@media (max-width: 959px) {
  .app--shell .footer {
    padding-bottom: calc(var(--space) + var(--bottom-nav-height));
  }
}

@media (min-width: 960px) {
  .bottom-nav {
    display: none;
  }
}

/* V nainštalovanej PWA sedí lišta aj rezerva pätky nad pruhom systémových tlačidiel. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  @media (max-width: 959px) {
    .app--shell .footer {
      padding-bottom: calc(var(--space) + var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
  }
}

/* --- sťahovanie prehľadu štatistík (pages/Statistics) -------------------- */

.stats-download {
  align-items: flex-end;
}

.stats-download__scope {
  min-width: 220px;
}

/* Rovnaká výška ako tlačidlá vedľa (pole má väčší riadok písma než tlačidlo). */
.stats-download__scope .select__button {
  height: 44px;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
}

.stats-download .btn {
  height: 44px;
}

/*
 * Druhé vykreslenie kariet pri sťahovaní: mimo obrazovky, ale v strome a s
 * pevnou šírkou počítača, aby sa tabuľky vykreslili ako tabuľky (nie karty
 * pre telefón) a grafy ako SVG v rozumnom pomere strán.
 */
.stats-report-render {
  position: fixed;
  top: 0;
  left: -20000px;
  width: 1000px;
  pointer-events: none;
}

/* Legenda grafu ako zoznam — kreslí sa len pri skladaní správy (mimo obrazovky). */
.stats-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.stats-chart__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: middle;
}