/* GOAT BARN — rozvrzeni aplikace.
   PRAVIDLO: zadna vizualni hodnota se tu nevymysli. Co v GL DESIGN SYSTEM neni,
   se nepouzije a zapise se do docs/04-POZADAVEK-GL-DESIGN-SYSTEM.md.
   Tokeny se pisou BEZ fallbacku — chybejici token ma byt videt hned.
   Tenhle soubor resi jen rozvrzeni: pozice, tok a odstupy z --gl-sys-space-*. */

.barn {
  margin: 0;
  min-height: 100dvh;
  background: var(--gl-sys-color-surface);
  color: var(--gl-sys-color-on-surface);
}

.barn-vizualne-skryto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------- menu panel */


/* zakladni .gl-menu = panel (plna vyska, bez zaobleni);
   varianta .gl-menu--plovouci by z nej udelala kartu — tu nechceme */
.barn-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 20;
  overflow: auto;
  transition: transform var(--gl-sys-motion-duration-medium) var(--gl-sys-motion-easing-standard),
              opacity var(--gl-sys-motion-duration-medium) var(--gl-sys-motion-easing-standard);
}

.barn-menu__znacka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gl-sys-space-2);
  padding: var(--gl-sys-space-3) var(--gl-sys-space-4) var(--gl-sys-space-2);
}

/* Logo aplikace: ve svetlem rezimu tmave, v tmavem zlute.
   DS kresli kazde svg uvnitr gl- komponenty tahem
   (`:where([class*=gl-]) svg { fill: none; stroke: currentColor }`),
   logo je ale plocha, ne ikona — proto se tah rusi. */
.barn-menu .barn-logo {
  height: var(--gl-sys-space-8);
  width: auto;
  color: var(--gl-sys-color-on-surface);
  fill: currentColor;
  stroke: none;
}

[data-gl-theme="dark"] .barn-menu .barn-logo { color: var(--gl-sys-color-primary); }

@media (prefers-color-scheme: dark) {
  :root:not([data-gl-theme="light"]) .barn-menu .barn-logo { color: var(--gl-sys-color-primary); }
}

/* zavrene menu odjede doleva, plocha se roztahne */

.barn-plocha {
  min-height: 100dvh;
  padding-inline-start: calc(var(--gl-comp-menu-sirka) + var(--gl-sys-space-12));
  padding-inline-end: var(--gl-sys-space-12);
  transition: padding-inline-start var(--gl-sys-motion-duration-medium)
              var(--gl-sys-motion-easing-standard);
}


/* Na uzke obrazovce menu lezi pres obsah a plocha se po nem neodsazuje.
   Vychozi stav (zavreno) nastavuje app.js podle sirky okna. */
@media (width < 60rem) {
  .barn-plocha,

  .barn-lista { flex-wrap: wrap; }

  /* drobecky na uzke obrazovce jdou na druhy radek */
  .barn-drobecky {
    order: 1;
    flex-basis: 100%;
    margin-inline-end: 0;
  }

  .barn-dlazdice {
    gap: var(--gl-sys-space-6);
    margin-block-end: var(--gl-sys-space-8);
  }

  .barn-mrizka { gap: var(--gl-sys-space-10); }

  .barn-obsah { padding-block-end: var(--gl-sys-space-12); }
}

/* na telefonu stoji cisla ve dvou sloupcich, ne v jedne rade */
@media (width < 36rem) {
  .barn-dlazdice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gl-sys-space-5);
  }

  .barn-karta__hlava { flex-wrap: wrap; }
}

/* ------------------------------------------------------------ lista */

.barn-lista {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--gl-sys-space-3);
  padding-block: var(--gl-sys-space-2);
  background: var(--gl-sys-color-surface);
}

/* Drobeckova navigace — GL DESIGN SYSTEM komponentu pro ni nema (viz docs/04-…).
   Polozky jsou tercialni male gl-btn, tenhle soubor resi jen jejich rozlozeni. */
.barn-drobecky {
  /* vzhled dela gl-drobecky, tady jen misto v horni liste */
  margin-inline-end: auto;
  min-width: 0;
}



/* ------------------------------------------------------ cisla nahore */

.barn-dlazdice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gl-sys-space-10);
  margin-block-end: var(--gl-sys-space-10);
}

.barn-dlazdice__kus {
  display: flex;
  flex-direction: column;
  gap: var(--gl-sys-space-1);
}

.barn-dlazdice__popisek {
  font: var(--gl-sys-text-body-3-font);
  color: var(--gl-sys-color-on-surface-variant);
}

/* DS nema vetsi stupen nez headline-1 (1,75 rem) — viz docs/04-POZADAVEK-… */
.barn-dlazdice__cislo { font: var(--gl-sys-text-headline-1-font); }

.barn-dlazdice__pod {
  font: var(--gl-sys-text-body-2-font);
  color: var(--gl-sys-color-on-surface-variant);
}

/* ------------------------------------------- obsah: sekce pod sebou */

.barn-obsah {
  max-width: 72rem;
  /* Pod lepici listou nic nezacina natesno - plati pro vsechny stranky. */
  padding-block-start: var(--gl-sys-space-16);
  padding-block-end: var(--gl-sys-space-16);
}

.barn-mrizka {
  display: flex;
  flex-direction: column;
  gap: var(--gl-sys-space-12);
}

.barn-karta { container-type: inline-size; }

.barn-karta__hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gl-sys-space-2);
  margin-block-end: var(--gl-sys-space-3);
}

.barn-karta__nadpis {
  margin: 0;
  font: var(--gl-sys-text-headline-3-font);
}

.barn-prazdno {
  margin: 0;
  padding-block: var(--gl-sys-space-4);
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-2-font);
}


/* ------------------------------------------------- detail tasku (task.html) */

/* `hidden` musi prebit display z komponenty (gl-chip je inline-flex). */
[hidden] { display: none !important; }
/* Jen rozvrzeni. Komponenty se neprepisuji, hodnoty jdou z tokenu. */

/* Detail tasku jde pres celou sirku — pravy sloupec ma dosahnout az k pravemu okraji
   (pokyn Lukase 10. 10. 2026). Ctecí sirka 72rem plati pro ostatni stranky. */
.barn-task { gap: var(--gl-sys-space-4); max-width: none; }

.barn-task__hlava { display: grid; gap: var(--gl-sys-space-2); align-content: start; }

/* chipy maji nad sebou popisek, takze se radek zarovnava na spodni hranu */
.barn-task__radek {
  display: flex; flex-wrap: wrap; align-items: end;
  gap: var(--gl-sys-space-2) var(--gl-sys-space-4);
}

/* vsechny chipy v hlavicce jedou medium (500) */
/* ⛔ Svisle zarovnani chipu se tady NEPREPISUJE. gl-chip ma v DS
   align-items: center a jen padding-inline — obsah je presne na stredu.
   Jakykoli lokalni padding-block nebo translateY ho z nej zase sundá
   (stalo se opakovane, naposled 11. 10. 2026). Kdyby mel byt chip opticky
   posunuty, patri to do GL DESIGN SYSTEM, ne sem. */
.barn-task__radek .gl-chip { font-weight: 500; }

/* Klikatelne chipy jsou <button> a prohlizec jim dava vlastni ramecek,
   padding a pismo — v Safari jinak nez v Chrome. Tady se srovnaji na stejny
   tvar jako chip ve <span>: zadny vlastni padding-block, aby zustalo
   centrovani z DS. */
.barn-task__radek button.gl-chip {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  padding-block: 0;
  padding-inline: var(--gl-comp-chip-padding-x);
  font: var(--gl-comp-chip-font);
  font-weight: 500;
  text-align: center;
}

.barn-task__nazev {
  /* velikost dava design system pres :where(h1), tady jen odstup k chipum */
  margin: 0;
  margin-block-end: var(--gl-sys-space-4);
}

/* Pokyn Lukase 10. 10. 2026: mezi chipy a obsahem aspon 150 px.
   9,5 rem = 152 px, slozeno z tokenu (nejvetsi je space-24 = 6 rem). */
.barn-task__telo {
  margin-block-start: calc(var(--gl-sys-space-24) + var(--gl-sys-space-14));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.5fr);
  align-items: start;
  gap: var(--gl-sys-space-4);
}

.barn-task__hlavni { display: grid; gap: var(--gl-sys-space-3); min-width: 0; }
/* Pravý sloupec jede s obsahem a drží se pod lepicí lištou.
   Lišta má výšku chipu + 2× padding, odsazení se přičítá. */
.barn-task__strana {
  display: grid; gap: var(--gl-sys-space-4);
  align-content: start;
  position: sticky;
  top: calc(var(--gl-comp-chip-vyska) + var(--gl-sys-space-2) * 2 + var(--gl-sys-space-2));
  align-self: start;
  max-block-size: calc(100dvh - var(--gl-sys-space-16));
  overflow: auto;
}
/* Řešitel | Zadavatel na jednom řádku, oddělené svislou linkou. */
.barn-osoby { display: flex; align-items: stretch; gap: var(--gl-sys-space-3); }
.barn-osoba { flex: 1; min-width: 0; }
/* svislý dělič mezi dvojicí polí se nekreslí (pokyn Lukáše 10. 10. 2026) */
.barn-osoby__delic { display: none; }
.barn-osoba__tlacitko {
  display: flex; align-items: center; gap: var(--gl-sys-space-3);
  inline-size: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.barn-osoba__tlacitko--staticky { cursor: default; }
.barn-osoba__tlacitko:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: 2px;
}

/* nabídka s hledáním nad seznamem; seznam se roluje, pole zůstává */
/* list sedi az k okrajum panelu, proto zadny vnitrni padding */
.barn-rozbal--hledani {
  min-inline-size: 16rem;
  display: grid; gap: var(--gl-sys-space-1);
  padding: var(--gl-sys-space-1) 0 0;
  overflow: hidden;
}
.barn-rozbal__hledat {
  inline-size: calc(100% - var(--gl-sys-space-2));
  justify-self: center;
  min-block-size: var(--gl-comp-chip-vyska);
  padding-inline: var(--gl-sys-space-3);
  border: var(--gl-sys-linka) solid var(--gl-sys-color-outline-variant);
  border-radius: var(--gl-sys-radius-small);
  background: var(--gl-sys-color-surface);
  color: var(--gl-sys-color-on-surface);
  font: var(--gl-comp-chip-font);
}
.barn-rozbal__hledat:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: -3px;
}
.barn-rozbal__seznam {
  max-block-size: 18.75rem; /* 300 px */
  overflow-y: auto;
  margin: 0;
}
/* ⚠️ Nabídka je zanořená uvnitř .barn-fakta (gl-list--linky --pruhledny) a DS
   cílí potomky, ne přímé děti — proto se linky a průhlednost propisovaly i sem.
   Tady se to ruší, aby nabídka byla obyčejný gl-list. */
.barn-rozbal .gl-list__polozka {
  box-shadow: none;
  background: var(--gl-comp-list-plocha);
  /* gl-list je flex sloupec a seznam ma max-vysku — bez tohohle se radky
     smrskly pod vysku avataru a ten pretekal ven. */
  flex: none;
}

/* Malá varianta listu — menší padding, menší avatar, drobnější text.
   Používá se v rozbalovacích nabídkách. ⛔ DS ji nemá, viz docs/04-…. */
.barn-list--maly .gl-list__polozka {
  min-block-size: 0;
  padding: var(--gl-sys-space-2) var(--gl-sys-space-3);
}
.barn-list--maly .gl-list__leading,
.barn-list--maly .gl-list__trailing {
  min-inline-size: var(--gl-sys-space-8);
  min-block-size: var(--gl-sys-space-8);
}
.barn-list--maly .gl-avatar { --gl-comp-avatar-velikost: var(--gl-sys-space-8); }
.barn-list--maly .barn-ikona {
  inline-size: var(--gl-sys-space-5);
  block-size: var(--gl-sys-space-5);
}
.barn-list--maly .gl-list__nadpis { font: var(--gl-comp-list-popis-font); }
/* hover z DS (#F6F4EC vs #FCF9F2) je skoro neviditelny — pouzije se
   stavova vrstva --gl-sys-state-hover (8 %) nad plochou listu */
.barn-rozbal .gl-list__polozka:hover {
  background: color-mix(in srgb,
    var(--gl-sys-color-on-surface) calc(var(--gl-sys-state-hover) * 100%),
    var(--gl-comp-list-plocha));
}

/* rozklikávací řádek (Naměřeno → tabulka zápisů času) */
.barn-rozbalovaci { display: block; }
.barn-rozbalovaci__hlava {
  display: flex; align-items: center; gap: var(--gl-comp-list-mezera);
  inline-size: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.barn-rozbalovaci__hlava:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: 2px;
}
.barn-rozbalovaci__sipka { transition: rotate var(--gl-sys-motion-duration-short) var(--gl-sys-motion-easing-standard); }
.barn-rozbalovaci--otevreno .barn-rozbalovaci__sipka { rotate: 90deg; }
.barn-rozbalovaci__telo {
  margin-block-start: var(--gl-sys-space-3);
  /* linky radku tabulky jsou v DS svetle (#C7C6C5) a vedle cernych linek
     seznamu (#1B1B1B) zanikaly — tady se srovnaji na stejnou barvu */
  --gl-comp-tabulka-obrys: var(--gl-comp-list-obrys);
  --gl-comp-tabulka-obrys-hlavicka: var(--gl-comp-list-obrys);
}

/* ⚠️ DS kresli linku radku jako box-shadow na <tr> — Safari box-shadow na
   radku tabulky nevykresli (Chrome ano). Proto linka na bunkach. */
.barn-rozbalovaci__telo .gl-tabulka__mrizka tbody td {
  border-block-end: var(--gl-comp-tabulka-linka) solid var(--gl-comp-tabulka-obrys);
}
.barn-rozbalovaci__telo .gl-tabulka__mrizka tbody tr:last-child td {
  border-block-end: 0;
}

.barn-osoby { align-items: start; }

/* Barevná legenda na celém řádku: plocha z palety stavu, text sytější.
   Třídy .barn-stav--* drží jen hodnoty v proměnných, proto jdou použít i tady. */
/* ⚠️ .gl-list--pruhledny .gl-list__polozka (0,2,0) nastavuje transparent,
   proto musi mit tohle vyssi specificitu, jinak se plocha neprojevi. */
.barn-fakta .gl-list__polozka.barn-radek-barva {
  background: var(--_barn-stav-plocha);
  color: var(--_barn-stav-obsah);
  border-radius: var(--gl-sys-radius-medium);
}
.barn-radek-barva .gl-list__overline { color: inherit; opacity: var(--gl-sys-state-disabled); }

/* Date picker — ⛔ GL DESIGN SYSTEM ho nema (viz docs/04-…),
   postaveny jen z tokenu DS. */
.barn-kalendar {
  inline-size: max-content;
  padding: var(--gl-sys-space-3);
  display: grid; gap: var(--gl-sys-space-2);
}
.barn-kalendar__hlava {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gl-sys-space-2);
}
.barn-kalendar__mesic {
  font: var(--gl-comp-list-nadpis-font);
  text-transform: var(--gl-comp-button-velikost-pisma);
}
.barn-kalendar__mrizka {
  display: grid; grid-template-columns: repeat(7, 2rem);
  gap: var(--gl-sys-space-1);
}
.barn-kalendar__den-popisek {
  display: flex; align-items: center; justify-content: center;
  block-size: var(--gl-sys-space-6);
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-comp-list-overline-font);
}
.barn-kalendar__den {
  inline-size: 2rem; block-size: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--gl-sys-radius-full);
  background: transparent;
  color: var(--gl-sys-color-on-surface);
  font: var(--gl-comp-chip-font);
  cursor: pointer;
}
.barn-kalendar__den:hover { background: var(--gl-sys-color-surface-container-high); }
.barn-kalendar__den:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: -3px;
}
.barn-kalendar__den--mimo { color: var(--gl-sys-color-on-surface-variant); opacity: var(--gl-sys-state-disabled); }
.barn-kalendar__den--dnes { box-shadow: inset 0 0 0 var(--gl-sys-linka) var(--gl-sys-color-on-surface); }
.barn-kalendar__den[aria-current="date"] {
  background: var(--gl-sys-color-primary);
  color: var(--gl-sys-color-on-primary);
}
.barn-kalendar__pata {
  display: flex; justify-content: space-between; gap: var(--gl-sys-space-2);
}

/* seznam priloh: nahled vlevo, ikony akci vpravo, bez spodnich linek */
.barn-priloha__nahled img {
  inline-size: var(--gl-sys-space-10); block-size: var(--gl-sys-space-10);
  border-radius: var(--gl-sys-radius-small);
  object-fit: cover;
}
.barn-priloha__akce { display: inline-flex; gap: var(--gl-sys-space-1); }
.barn-priloha { border-radius: var(--gl-sys-radius-small); }
.barn-priloha:hover { background: var(--gl-comp-list-plocha-hover); }
.barn-priloha--nahrat { cursor: pointer; }

/* odkaz na soubor v textu: ikona + tucne, bez podtrzeni a bez modre */
.barn-soubor {
  display: inline-flex; align-items: center; gap: var(--gl-sys-space-1);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.barn-soubor:hover { text-decoration: none; background: var(--gl-sys-color-surface-container-high); }
.barn-soubor__ikona {
  inline-size: var(--gl-comp-chip-ikona); block-size: var(--gl-comp-chip-ikona);
  flex: none;
}

/* obrazek vlozeny do textu + uchyt na zmenu sirky */
.barn-obrazek {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--gl-sys-radius-medium);
}
.barn-obrazek__ram {
  position: relative;
  display: inline-block;
  max-inline-size: 100%;
  line-height: 0;
}
.barn-obrazek__uchyt {
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--gl-sys-space-2) * -1);
  inline-size: var(--gl-sys-space-4);
  cursor: ew-resize;
  opacity: 0;
  transition: opacity var(--gl-sys-motion-duration-short) var(--gl-sys-motion-easing-standard);
}
.barn-obrazek__uchyt::before {
  content: '';
  position: absolute;
  inset-block: var(--gl-sys-space-4);
  inset-inline-end: var(--gl-sys-space-2);
  inline-size: var(--gl-sys-space-1);
  border-radius: var(--gl-sys-radius-full);
  background: var(--gl-sys-color-primary);
}
.barn-obrazek__ram:hover .barn-obrazek__uchyt { opacity: 1; }
.barn-priloha__odkaz { color: inherit; }

/* nevyplnene pole se ukaze taky, jen tlumene */
.barn-fakta__prazdna .gl-list__nadpis { color: var(--gl-sys-color-on-surface-variant); }

/* Radky v pravem panelu maji mezeru, aby se podbarvene radky nedotykaly. */
.barn-fakta { gap: var(--gl-sys-space-2); }

/* zalozka: ikona + text + zluty badge s poctem */
.barn-zalozka {
  display: inline-flex; align-items: center; gap: var(--gl-sys-space-2);
}
.barn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--gl-sys-space-5); block-size: var(--gl-sys-space-5);
  padding-inline: var(--gl-sys-space-1);
  border-radius: var(--gl-sys-radius-full);
  background: var(--gl-sys-color-primary);
  color: var(--gl-sys-color-on-primary);
  font: var(--gl-comp-list-overline-font);
  font-weight: 500;
}

/* Menu zůstává v obou režimech stejné — žluté (pokyn Lukáše 10. 10. 2026).
   V tmavém režimu DS mění --gl-comp-menu-plocha na #2A2A2A, tady se vrací
   na značkovou žlutou z tokenů primary / on-primary. */
[data-gl-theme="dark"] .barn-menu {
  --gl-comp-menu-plocha: var(--gl-sys-color-primary);
  --gl-comp-menu-obsah: var(--gl-sys-color-on-primary);
  --gl-comp-menu-plocha-hover: color-mix(in srgb, var(--gl-sys-color-on-primary) 12%, transparent);
  background: var(--gl-sys-color-primary);
  color: var(--gl-sys-color-on-primary);
}
[data-gl-theme="dark"] .barn-menu .barn-logo { color: var(--gl-sys-color-on-primary); }

/* přepínač světlého a tmavého režimu vedle loga */
.barn-rezim {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--gl-sys-space-8); block-size: var(--gl-sys-space-8);
  flex: none;
  padding: 0;
  border: none;
  border-radius: var(--gl-sys-radius-full);
  background: transparent;
  color: var(--gl-comp-menu-obsah);
  cursor: pointer;
}
.barn-rezim:hover { background: var(--gl-comp-menu-plocha-hover); }
.barn-rezim:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: 2px;
}
.barn-rezim__ikona {
  inline-size: var(--gl-comp-menu-ikona); block-size: var(--gl-comp-menu-ikona);
}

/* Běžící měření v menu: zavřené vypadá jako chip, po kliku se zvětší
   a ukáže obsah — žádný druhý panel navíc. Pozadí bílé. */
.barn-menu__mereni {
  margin-inline: var(--gl-sys-space-4);
  margin-block-end: var(--gl-sys-space-2);
  justify-self: start;
  display: grid;
  inline-size: fit-content;
  border-radius: var(--gl-comp-chip-radius);
  background: var(--gl-sys-color-surface-container-lowest);
  transition: border-radius var(--gl-sys-motion-duration-short) var(--gl-sys-motion-easing-standard);
}
.barn-menu__mereni--otevreno {
  inline-size: auto;
  border-radius: var(--gl-sys-radius-large);
  padding-block-end: var(--gl-sys-space-3);
}
.barn-menu__mereni-chip {
  display: inline-flex; align-items: center;
  gap: var(--gl-comp-chip-mezera);
  min-block-size: var(--gl-comp-chip-vyska);
  padding: 0 var(--gl-comp-chip-padding-x);
  border: 0;
  background: transparent;
  color: var(--gl-sys-color-on-surface);
  font: var(--gl-comp-chip-font);
  font-weight: 500;
  cursor: pointer;
}
.barn-menu__mereni-chip:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: -3px;
}
.barn-menu__mereni-ikona {
  inline-size: var(--gl-comp-chip-ikona); block-size: var(--gl-comp-chip-ikona);
  flex: none;
  color: var(--gl-sys-color-error);
}
.barn-menu__mereni-telo {
  display: grid; gap: var(--gl-sys-space-2); justify-items: start;
  padding-inline: var(--gl-comp-chip-padding-x);
}
.barn-menu__mereni-task {
  color: var(--gl-sys-color-on-surface);
  font: var(--gl-comp-list-nadpis-font);
  text-decoration: none;
}
.barn-menu__mereni-task:hover { text-decoration: underline; }

.barn-modal__popis {
  margin: 0;
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-2-font);
}

/* druha rada chipu: mereni casu */
.barn-cas-radek { margin-block-start: var(--gl-sys-space-3); align-items: center; }
.barn-cas-radek__avatar { flex: none; }
.barn-cas-radek__suma {
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-3-font);
}

/* Modal — ⛔ GL DESIGN SYSTEM dialog nema, viz docs/04-…. Nativni <dialog>. */
.barn-modal {
  inline-size: min(28rem, calc(100vw - var(--gl-sys-space-8)));
  padding: 0;
  border: none;
  border-radius: var(--gl-sys-radius-large);
  background: var(--gl-sys-color-surface);
  color: var(--gl-sys-color-on-surface);
}
.barn-modal::backdrop { background: rgb(0 0 0 / 0.4); }
.barn-modal__telo {
  display: grid; gap: var(--gl-sys-space-4);
  padding: var(--gl-sys-space-6);
}
.barn-modal__nadpis { margin: 0; font: var(--gl-sys-text-headline-3-font); }
.barn-modal__akce {
  display: flex; justify-content: flex-end; gap: var(--gl-sys-space-2);
}
.barn-modal__stav {
  margin: 0; min-block-size: 1.25rem;
  color: var(--gl-sys-color-error);
  font: var(--gl-sys-text-body-3-font);
}

/* kazdy box vpravo ma bezove pozadi a zaobleni */
.barn-box {
  padding: var(--gl-sys-space-4);
  border-radius: var(--gl-sys-radius-large);
  background: var(--gl-sys-color-surface-container-high);
}

/* polozky vpravo zabiraji celou sirku sloupce */
.barn-task__strana .barn-fakta,
.barn-task__strana .gl-list__polozka { inline-size: 100%; }

/* vetsi bocni odsazeni nez svisle, at obsah nelepi na okraje boxu */
.barn-task__hlavni {
  padding: var(--gl-sys-space-4) var(--gl-sys-space-8);
  border-radius: var(--gl-sys-radius-large);
  background: var(--gl-sys-color-surface-container-high);
}

.barn-task__zalozky {
  justify-self: start;
  max-width: 100%;
  margin-block-end: var(--gl-sys-space-8);
}

.barn-task__stranka:not(:empty) {
  margin-block-start: var(--gl-sys-space-4);
  padding-block-start: var(--gl-sys-space-4);
  border-block-start: var(--gl-sys-linka) solid var(--gl-sys-color-outline-variant);
}

.barn-text { display: grid; gap: var(--gl-sys-space-3); }
/* zakladni text v editoru je o stupen mensi (pokyn Lukase 10. 10. 2026) */
.barn-text p { margin: 0; font: var(--gl-sys-text-body-2-font); }

/* ikona v polozce listu ma velikost z DS (--gl-comp-list-ikona), nic vlastniho */
.barn-ikona {
  inline-size: var(--gl-comp-list-ikona);
  block-size: var(--gl-comp-list-ikona);
}

/* komentare - ploche, bez odsazeni; velikost textu jako v gl-list */
.barn-vlakno {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gl-sys-space-4);
}

.barn-komentar {
  display: grid; gap: var(--gl-sys-space-2);
  padding: var(--gl-sys-space-4);
  border-radius: var(--gl-sys-radius-medium);
  /* na béžovém panelu se komentář ztrácel — čistě bílá plocha */
  background: var(--gl-sys-color-surface-container-lowest);
  font: var(--gl-comp-list-nadpis-font);
}

/* vlastni komentar: stejna bila plocha, odlisuje ho linka */
.barn-komentar--moje {
  background: var(--gl-sys-color-surface-container-lowest);
  border-inline-start: var(--gl-sys-space-1) solid var(--gl-sys-color-primary);
}

.barn-komentar__hlava {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--gl-sys-space-2);
}

.barn-komentar__autor { font: var(--gl-comp-list-nadpis-font); }

.barn-komentar__kdy {
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-comp-list-overline-font);
}

.barn-komentar__znacky {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--gl-sys-space-2);
  margin-inline-start: auto;
}

/* Chip stavu: pastelova plocha + sytejsi text teze barvy (rozhodnuti Lukase
   10. 10. 2026). Barvu urcuje sloupec stavy.barva, hodnoty jdou z palet DS.
   ⛔ GL DESIGN SYSTEM barevne varianty chipu nema — poslano jako pozadavek,
   viz docs/04-POZADAVEK-GL-DESIGN-SYSTEM.md. */
/* Stav se pise verzalkami. ⛔ Prostrkani se u verzalek NEZVYSUJE
   (pokyn Lukase 10. 10. 2026) — proto zadny letter-spacing. */
.barn-stav {
  background: var(--_barn-stav-plocha);
  color: var(--_barn-stav-obsah);
  text-transform: var(--gl-comp-button-velikost-pisma);
  font-weight: 500; /* medium */
}

/* rozbalovaci vyber stavu — ⛔ DS dropdown nema, viz docs/04-… */
/* chip s popiskem nad sebou (ID, STAV, PRIORITA…) */
.barn-pole { display: grid; gap: var(--gl-sys-space-1); justify-items: start; }
/* Popisek zacina tam, kde radius chipu prechazi do vodorovne linky —
   u plneho radiusu je to polovina vysky chipu. */
.barn-pole__popisek {
  padding-inline-start: calc(var(--gl-comp-chip-vyska) / 2);
  font: var(--gl-comp-list-overline-font);
  font-weight: 500; /* medium */
  color: var(--gl-sys-color-on-surface-variant);
  text-transform: var(--gl-comp-button-velikost-pisma);
}

.barn-volba { position: relative; display: inline-flex; }
.barn-rozbal {
  position: absolute;
  inset-block-start: calc(100% + var(--gl-sys-space-1));
  inset-inline-start: 0;
  z-index: 10;
  min-inline-size: 14rem;
  margin: 0;
  padding: var(--gl-sys-space-1);
  border-radius: var(--gl-sys-radius-medium);
  background: var(--gl-sys-color-surface-raised-high);
}
.barn-rozbal__polozka { cursor: pointer; }

/* Vybrana varianta cerne, ne zlute (pokyn Lukase 10. 10. 2026) — DS dava
   gl-list__polozka[aria-selected=true] plochu primary, tady se prebiji. */
.barn-rozbal__polozka[aria-selected="true"],
.barn-rozbal .gl-list__polozka[aria-selected="true"],
.barn-rozbal .gl-list__polozka[aria-selected="true"]:hover {
  background: var(--gl-sys-color-inverse-surface);
  color: var(--gl-sys-color-inverse-on-surface);
}
.barn-stav--neutralni {
  --_barn-stav-plocha: var(--gl-ref-color-neutralni-90);
  --_barn-stav-obsah: var(--gl-ref-color-neutralni-30);
}
.barn-stav--info {
  --_barn-stav-plocha: var(--gl-ref-color-info-90);
  --_barn-stav-obsah: var(--gl-ref-color-info-30);
}
.barn-stav--primarni {
  --_barn-stav-plocha: var(--gl-ref-color-primarni-90);
  --_barn-stav-obsah: var(--gl-ref-color-primarni-30);
}
.barn-stav--varovani {
  --_barn-stav-plocha: var(--gl-ref-color-varovani-90);
  --_barn-stav-obsah: var(--gl-ref-color-varovani-30);
}
.barn-stav--chyba {
  --_barn-stav-plocha: var(--gl-ref-color-chyba-90);
  --_barn-stav-obsah: var(--gl-ref-color-chyba-30);
}
.barn-stav--uspech {
  --_barn-stav-plocha: var(--gl-ref-color-uspech-90);
  --_barn-stav-obsah: var(--gl-ref-color-uspech-30);
}

/* ⛔ V tmavém režimu zůstávají chipy i podbarvené řádky stejné jako ve světlém
   (pokyn Lukáše 10. 10. 2026) — pastelová plocha, sytější text. */

/* Ikona komentare: zluta plocha, cerna ikona — primary / on-primary.
   ⛔ GL DESIGN SYSTEM pro tohle komponentu nema, viz docs/04-…. */
.barn-odznak {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--gl-sys-space-8); block-size: var(--gl-sys-space-8);
  padding: 0;
  border: none;
  border-radius: var(--gl-sys-radius-full);
  background: var(--gl-sys-color-primary);
  color: var(--gl-sys-color-on-primary);
  cursor: pointer;
}
.barn-odznak:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: 2px;
}

/* bez ikony je to jen tlumene tlacitko „pridat ikonu", vidi se pri najeti */
.barn-odznak--prazdny {
  background: transparent;
  color: var(--gl-sys-color-on-surface-variant);
  opacity: var(--gl-sys-state-disabled);
}
.barn-komentar:hover .barn-odznak--prazdny,
.barn-odznak--prazdny:focus-visible { opacity: 1; }
.barn-odznak--prazdny:hover { background: var(--gl-sys-color-surface-container-lowest); }
.barn-odznak__ikona {
  inline-size: var(--gl-comp-button-ikona); block-size: var(--gl-comp-button-ikona);
}

/* Odpovedet je u kazdeho komentare, ale nema prebijet obsah. */
.barn-komentar__odpovedet { opacity: var(--gl-sys-state-disabled); }
.barn-komentar:hover .barn-komentar__odpovedet,
.barn-komentar__odpovedet:focus-visible { opacity: 1; }

/* @zminka v textu */
.barn-zminka {
  padding-inline: var(--gl-sys-space-1);
  border-radius: var(--gl-sys-radius-small);
  background: var(--gl-sys-color-primary-container);
  color: var(--gl-sys-color-on-primary-container);
}

/* citace: nad formularem (odpovidam na…) i ve vlakne (odpoved na…) */
.barn-citace {
  display: flex; align-items: center; gap: var(--gl-sys-space-2);
  margin: 0;
  padding: var(--gl-sys-space-2) var(--gl-sys-space-3);
  border-inline-start: var(--gl-sys-linka) solid var(--gl-sys-color-outline-variant);
  border-radius: var(--gl-sys-radius-small);
  /* krémové pozadí, aby citace odsedla od bílého komentáře */
  background: var(--gl-sys-color-surface-container-high);
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-3-font);
}
.barn-citace__text {
  min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* vyber ikony ke komentari */
.barn-ikony { display: flex; flex-wrap: wrap; gap: var(--gl-sys-space-1); }
.barn-ikony__volba {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--gl-sys-space-8); block-size: var(--gl-sys-space-8);
  padding: 0;
  border: none;
  border-radius: var(--gl-sys-radius-full);
  background: transparent;
  color: var(--gl-sys-color-on-surface-variant);
  cursor: pointer;
}
.barn-ikony__volba:hover { background: var(--gl-sys-color-surface-container-lowest); }
.barn-ikony__volba:focus-visible {
  outline: 3px solid var(--gl-sys-color-primary-readable);
  outline-offset: 2px;
}
.barn-ikony__volba[aria-pressed="true"] {
  background: var(--gl-sys-color-primary);
  color: var(--gl-sys-color-on-primary);
}
.barn-ikony__ikona {
  inline-size: var(--gl-comp-button-ikona); block-size: var(--gl-comp-button-ikona);
}

/* naseptavac @zminek — gl-list v karte pod polem */
.barn-naseptavac {
  margin: 0; padding: var(--gl-sys-space-1);
  border-radius: var(--gl-sys-radius-medium);
  background: var(--gl-sys-color-surface-raised-high);
}
.barn-naseptavac__polozka { cursor: pointer; border-radius: var(--gl-sys-radius-small); }
.barn-naseptavac__polozka--vybrana { background: var(--gl-sys-color-surface-container-lowest); }

.barn-komentar__text { display: grid; gap: var(--gl-sys-space-2); }
.barn-komentar__text p { margin: 0; font: var(--gl-comp-list-popis-font); }

/* formular nove odpovedi je oddeleny od vlakna, at nesplyva s poslednim komentarem */
.barn-odpoved {
  display: grid; gap: var(--gl-sys-space-3);
  margin-block-start: var(--gl-sys-space-6);
}
.barn-odpoved__akce {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--gl-sys-space-3);
}
.barn-odpoved__stav {
  margin: 0; margin-inline-start: auto;
  font: var(--gl-sys-text-body-3-font);
  color: var(--gl-sys-color-on-surface-variant);
}
.barn-odpoved__stav--chyba { color: var(--gl-sys-color-error); }

/* prazdny stav */
.barn-prazdny-stav {
  display: grid; justify-items: center; gap: var(--gl-sys-space-2);
  padding-block: var(--gl-sys-space-8);
  text-align: center;
}
.barn-prazdny-stav__ikona {
  inline-size: 2.5rem; block-size: 2.5rem;
  color: var(--gl-sys-color-on-surface-variant);
}
.barn-prazdny-stav__nadpis { margin: 0; font: var(--gl-sys-text-headline-3-font); }
.barn-prazdny-stav__popis {
  margin: 0; max-inline-size: 42rem;
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-2-font);
}

/* hledani v liste */


.barn-zkratit {
  max-inline-size: 24rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.barn-nonbilable { color: var(--gl-sys-color-on-surface-variant); }
.barn-chyba { color: var(--gl-sys-color-error); }

@media (max-width: 64rem) {
  .barn-task__telo { grid-template-columns: minmax(0, 1fr); }
}

/* klikaci radek tabulky tasku na dashboardu */
.barn-odkaz { color: inherit; text-decoration: none; }
.barn-odkaz:hover { text-decoration: underline; }
tr[data-id] { cursor: pointer; }

/* Semafor zbyvajicich hodin. Barvy jsou systemove tokeny, nic natvrdo.
   gl-chip nema semanticke varianty - az vzniknou v DS, tahle trida zmizi. */
/* Casovy fond (zbyvajici cas) — jen vypocet, nejde zmenit.
   Barvu bere ze stejnych trid jako chip stavu (.barn-stav--*). */

/* odhad hodin se prepisuje primo v chipu */
.barn-odhad__vstup {
  inline-size: 5ch;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
}
.barn-odhad__vstup:focus-visible { outline: none; }
.barn-odhad__vstup--siroky { inline-size: 7ch; text-align: start; }
/* telo stranky tasku - prosty markdown z Notionu */
.barn-text h2, .barn-text h3, .barn-text h4 { margin: 0; }
.barn-text hr {
  width: 100%; margin: 0; border: 0;
  border-block-start: var(--gl-sys-linka) solid var(--gl-sys-color-outline-variant);
}
.barn-text pre {
  margin: 0; padding: var(--gl-sys-space-4);
  border-radius: var(--gl-sys-radius-small);
  background: var(--gl-sys-color-surface-raised-high);
  font: var(--gl-sys-text-body-3-font); font-family: ui-monospace, monospace;
  overflow-x: auto; white-space: pre-wrap;
}
/* Seznamy i citace jedou stejnym stupnem jako odstavec (body-2). Drive mely
   body-1, takze text pri prevodu "- " na seznam skakal z 16 na 18 px. */
.barn-text ul, .barn-text ol { margin: 0; }
.barn-text blockquote {
  margin: 0; padding-inline-start: var(--gl-sys-space-4);
  border-inline-start: var(--gl-sys-space-1) solid var(--gl-sys-color-outline-variant);
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-2-font);
}
.barn-seznam {
  margin: 0; padding-inline-start: var(--gl-sys-space-6);
  margin-inline-start: calc(var(--barn-uroven, 0) * var(--gl-sys-space-6));
  /* mezera mezi polozkami stejna jako mezi bloky */
  display: grid; gap: var(--gl-sys-space-3);
  font: var(--gl-sys-text-body-2-font);
}
.barn-ukol { list-style: none; }
.barn-ukol::before { content: "☐ "; }
.barn-ukol[data-hotovo="1"]::before { content: "☑ "; }
.barn-ukol[data-hotovo="1"] { color: var(--gl-sys-color-on-surface-variant); }



/* ------------------------------- blokovy editor (md.js), chova se jako Notion */
.gl-md { position: relative; display: grid; gap: var(--gl-sys-space-2); }

.gl-md__plocha {
  outline: none;
  min-block-size: 6rem;
}
.gl-md__plocha:focus-visible { outline: none; }

/* prazdna plocha napovi, co delat */
.gl-md__plocha:empty::before,
.gl-md__plocha > p:only-child:empty::before {
  content: attr(data-prazdne);
  color: var(--gl-sys-color-on-surface-variant);
}
.gl-md__plocha > p:only-child:empty::before { content: 'Piš, nebo stiskni / pro bloky'; }

.gl-md__stav {
  min-block-size: 1.25rem;
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-3-font);
}
.gl-md__stav--chyba { color: var(--gl-sys-color-error); }

/* uchyt na posouvani odstavce */
.gl-md__uchyt {
  position: absolute;
  display: grid; place-items: center;
  /* zona na chyceni sahá az k textu, aby mezi textem a uchytem nebyla dira */
  inline-size: 1.5rem; block-size: 1.5rem;
  padding-inline-end: var(--gl-sys-space-1);
  border-radius: var(--gl-sys-radius-small);
  color: var(--gl-sys-color-outline);
  cursor: grab;
  opacity: .55;
  transition: opacity var(--gl-sys-motion-duration-short) var(--gl-sys-motion-easing-standard),
              background var(--gl-sys-motion-duration-short) var(--gl-sys-motion-easing-standard);
}
.gl-md__uchyt:hover {
  opacity: 1;
  background: var(--gl-sys-color-surface-raised-high);
  color: var(--gl-sys-color-on-surface);
}
.gl-md__uchyt:active { cursor: grabbing; }
.gl-md__uchyt-ikona { inline-size: .625rem; block-size: 1rem; }

.gl-md__blok--tazeny { opacity: .4; }
.gl-md__blok--nad { box-shadow: 0 -2px 0 0 var(--gl-sys-color-primary); }
.gl-md__blok--pod { box-shadow: 0 2px 0 0 var(--gl-sys-color-primary); }

/* nabidka po lomitku */
.gl-md__nabidka {
  position: absolute; z-index: 30;
  inline-size: 17rem; max-block-size: 18rem; overflow-y: auto;
  padding: var(--gl-sys-space-1);
  border-radius: var(--gl-sys-radius-medium);
  background: var(--gl-sys-color-surface-raised-high);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--gl-sys-color-shadow) 24%, transparent);
  display: grid; gap: var(--gl-sys-space-1);
}

.gl-md__skupina {
  padding: var(--gl-sys-space-2) var(--gl-sys-space-2) var(--gl-sys-space-1);
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-comp-list-overline-font);
  text-transform: uppercase;
}

.gl-md__prikaz {
  display: flex; align-items: center; gap: var(--gl-sys-space-3);
  padding: var(--gl-sys-space-2);
  border: 0; border-radius: var(--gl-sys-radius-small);
  background: transparent; color: inherit;
  text-align: start; cursor: pointer;
}
.gl-md__prikaz:hover,
.gl-md__prikaz[aria-selected="true"] { background: var(--gl-sys-color-surface-raised); }
.gl-md__prikaz-ikona { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.gl-md__prikaz-nazev { display: block; font: var(--gl-comp-list-nadpis-font); }
.gl-md__prikaz-popis {
  display: block;
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-comp-list-overline-font);
}

/* zaskrtavatko u ukolu je klikaci */
.gl-md__plocha .barn-ukol::before { cursor: pointer; }

/* ------------------------------------------------------------ platby a doklady
   Jen rozvrzeni. Barvy a mezery jdou z tokenu, komponenty se nepretezuji.
   ⚠️ DS nema select ani checkbox — filtry proto pouzivaji gl-input se <select>
   a gl-chip--klikaci jako prepinac (pozadavek je v docs/04-POZADAVEK-GL-DESIGN-SYSTEM.md). */

.barn-lista__akce {
  display: flex;
  align-items: center;
  gap: var(--gl-sys-space-2);
  margin-inline-start: auto;
}

.barn-stav-hlaska {
  color: var(--gl-sys-color-on-surface-variant);
  font-size: .875rem;
  max-width: 42ch;
}

.barn-stav-hlaska--chyba { color: var(--gl-sys-color-error); }

.barn-platby__zalozky { margin-block-end: var(--gl-sys-space-4); }

.barn-filtry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gl-sys-space-2);
}

.barn-filtr { width: auto; min-width: 11rem; }

/* Nativni <select> uvnitr gl-input: DS mu vypina vlastni sipku (appearance:none),
   takze se dokresluje ikona gl-nav-arrow-down jako u dropdownu v DS. Sipka lezi
   pres pravy okraj pole a neprijima kliknuti — jinak by klik na ni select neotevrel. */
.barn-filtr .gl-input__ramec { position: relative; }
.barn-filtr .gl-input__stav {
  position: absolute;
  inset-inline-end: var(--gl-comp-input-padding-x);
  pointer-events: none;
}
.barn-filtr select.gl-input__vstup {
  padding-inline-end: calc(var(--gl-comp-input-ikona) + var(--gl-comp-input-mezera));
  cursor: pointer;
}
.barn-filtr__prepinac { cursor: pointer; }
.barn-filtr__prepinac[aria-pressed="true"] {
  background: var(--gl-sys-color-primary);
  color: var(--gl-sys-color-on-primary);
}

.barn-strankovani {
  display: flex;
  justify-content: center;
  margin-block-start: var(--gl-sys-space-3);
}

.barn-castka--vydaj { color: var(--gl-sys-color-on-surface); }
.barn-castka--prijem { color: var(--gl-sys-color-primary-readable); }

.barn-radek--klikaci { cursor: pointer; }
.barn-radek--klikaci:hover > td { background: var(--gl-comp-tabulka-plocha-hover, var(--gl-sys-color-surface-container)); }
.barn-radek--klikaci[aria-expanded="true"] > td { background: var(--gl-sys-color-surface-container); }

/* Detail dokladu se rozbaluje primo pod svym radkem (pokyn Lukase 11. 10. 2026) —
   karta na konci stranky nebyla pri delsim seznamu videt. */
/* Platby: tabulky pres celou sirku okna (pokyn Lukase 11. 10. 2026).
   Ctecí sirka 72rem plati pro stranky s textem, ne pro seznamy plateb. */
.barn-obsah--siroky { max-width: none; }

.barn-detail-radek > td {
  /* Detail sedi uvnitr <table> a .gl-tabulka__mrizka prepisuje tokeny chipu
     i malych tlacitek na tabulkovou velikost (chip 18 px, ikona 10 px).
     Tady se vraci vychozi hodnoty z DS, jinak je detail nectitelne maly. */
  --gl-comp-chip-vyska: var(--gl-sys-space-8);
  --gl-comp-chip-padding-x: var(--gl-sys-space-3);
  --gl-comp-chip-mezera: var(--gl-sys-space-2);
  --gl-comp-chip-ikona: var(--gl-sys-space-4);
  --gl-comp-chip-font: 500 .8125rem/1.25rem var(--gl-sys-font-text);
  --gl-comp-ikona-velikost: var(--gl-sys-space-5);
  --gl-comp-button-height-male: 2rem;
  --gl-comp-button-font-male: 700 .75rem/1rem var(--gl-sys-font-text);
  --gl-comp-button-ikona-male: var(--gl-sys-space-4);
  --gl-comp-button-padding-x-male: var(--gl-sys-space-4);
  padding: var(--gl-sys-space-4);
  background: var(--gl-sys-color-surface-container-low);
}
.barn-detail-radek .barn-karta__nadpis { margin-block-end: var(--gl-sys-space-3); }

/* Panel platby pod radkem — rozlozeni podle pokynu Lukase 11. 10. 2026:
   castka vlevo / datum vpravo, pod tim chip stavu a akce k dokladu, pak udaje
   a nakonec rozhodnuti o stavu. Kazda cast ma svuj odstup, aby to bylo vzdusne. */
.barn-platba { padding: var(--gl-sys-space-6) !important; }

.barn-platba__hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gl-sys-space-4);
  margin-block-end: var(--gl-sys-space-4);
}
.barn-platba .barn-platba__castka { margin: 0; }
.barn-platba__datum {
  color: var(--gl-sys-color-on-surface-variant);
  font: var(--gl-sys-text-body-2-font);
  white-space: nowrap;
}

.barn-platba__pas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gl-sys-space-3);
}

.barn-udaje--vzdusne {
  margin-block: var(--gl-sys-space-6);
  row-gap: var(--gl-sys-space-3);
}

.barn-platba__akce { margin-block-start: var(--gl-sys-space-5); }
.barn-platba .barn-vyber { margin-block-start: var(--gl-sys-space-5); }

/* vyber dokladu k platbe bez dokladu */
.barn-vyber {
  display: grid; gap: var(--gl-sys-space-2);
  margin-block-start: var(--gl-sys-space-3);
  padding: var(--gl-sys-space-3);
  border-radius: var(--gl-sys-radius-medium);
  background: var(--gl-sys-color-surface-container-low);
}
.barn-vyber__hledat {
  min-block-size: var(--gl-comp-chip-vyska);
  padding-inline: var(--gl-sys-space-3);
  border: var(--gl-sys-linka) solid var(--gl-sys-color-outline-variant);
  border-radius: var(--gl-sys-radius-small);
  background: var(--gl-sys-color-surface);
  color: var(--gl-sys-color-on-surface);
  font: var(--gl-comp-chip-font);
}
.barn-vyber__seznam { display: grid; gap: var(--gl-sys-space-1); justify-items: start; }
.barn-vyber__polozka { justify-content: flex-start; text-align: start; }

/* tyz detail, ale rozbaleny pod kartou ve fronte k rozhodnuti */
.barn-detail-karta {
  border-radius: var(--gl-sys-radius-medium);
  margin-block-end: var(--gl-sys-space-4);
}

/* tlacitka v bunce tabulky (zalozka K uhrade) */
.barn-radek__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gl-sys-space-2);
}

/* potvrzeni pred odeslanim prikazu do banky — vedome mimo okno prohlizece,
   at je videt, co presne do banky pujde */
.barn-potvrzeni {
  display: grid;
  gap: var(--gl-sys-space-2);
  margin-block-start: var(--gl-sys-space-3);
  padding: var(--gl-sys-space-4);
  border: var(--gl-sys-linka) solid var(--gl-sys-color-outline-variant);
  border-radius: var(--gl-sys-radius-medium);
  background: var(--gl-sys-color-surface-container-low);
}
.barn-potvrzeni__text { margin: 0; font-weight: 600; }
.barn-potvrzeni__pozn {
  margin: 0;
  color: var(--gl-sys-color-on-surface-variant);
  font-size: .875rem;
}

/* chipy a tlacitka dokladu v jedne rade */
.barn-detail__hlava { margin-block-end: var(--gl-sys-space-2); }

/* Popis platby na jednu radku; cely text je v detailu pod radkem
   (pokyn Lukase 11. 10. 2026). max-width:0 na bunce je trik, kterym se v tabulce
   s automatickym rozvrzenim da vynutit oriznuti - bez nej se bunka roztahne. */
/* width:100% + max-width:0 = sloupec si vezme zbyvajici sirku, ale text se orizne */
/* ⛔ V tabulkach plateb se nic nezalamuje na druhou radku (pokyn Lukase 11. 10. 2026) —
   datum "11. 10. 2026" se jinak rozpadne na dve radky a radky maji ruznou vysku. */
#t-pohyby td, #t-doklady td, #t-kuhrade td,
.barn-platby__zalozky ~ .barn-panel th { white-space: nowrap; }

/* Popis bere vsechnu zbylou sirku radku, ale nikdy se nezalomi na druhou radku:
   width:100% + max-width:0 = bunka si vezme zbytek, text se orizne trema teckami. */
.barn-popis { width: 100%; max-width: 0; }
.barn-popis__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* splatnost, ktera uz propadla */
.barn-po-splatnosti { color: var(--gl-sys-color-error); font-weight: 600; }

/* --- jedna karta ve fronte k rozhodnuti */

.barn-spor {
  display: flex;
  flex-direction: column;
  gap: var(--gl-sys-space-2);
  padding-block: var(--gl-sys-space-4);
  border-block-end: var(--gl-sys-linka) solid var(--gl-sys-color-outline-variant);
}

.barn-spor:last-of-type { border-block-end: 0; }

.barn-spor__hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gl-sys-space-2);
}

.barn-spor__kdy {
  color: var(--gl-sys-color-on-surface-variant);
  font-size: .8125rem;
}

.barn-spor__castka { margin-inline-start: auto; }

.barn-spor__popis { margin: 0; }

.barn-spor__vazba {
  margin: 0;
  color: var(--gl-sys-color-on-surface-variant);
  font-size: .875rem;
}

.barn-spor__akce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gl-sys-space-2);
  margin-block-start: var(--gl-sys-space-1);
}

/* --- detail dokladu pod tabulkou */

.barn-detail { margin-block-start: var(--gl-sys-space-4); }

.barn-dlazdice__cislo--male { font-size: 1.125rem; }

/* --- udaje dokladu jako definicni seznam (dva sloupce, popisek vlevo) */

.barn-udaje {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: var(--gl-sys-space-1) var(--gl-sys-space-4);
  margin-block: var(--gl-sys-space-3);
}

.barn-udaje dt {
  color: var(--gl-sys-color-on-surface-variant);
  font-size: .875rem;
}

.barn-udaje dd { margin: 0; }

@media (max-width: 40rem) {
  .barn-udaje { grid-template-columns: 1fr; gap: 0; }
  .barn-udaje dd { margin-block-end: var(--gl-sys-space-2); }
}

/* prihlaseni tokenem (API je na GL1 verejne na barn.goatlabs.cz) */
.barn-prihlaseni {
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  background: var(--gl-sys-color-surface);
}
.barn-prihlaseni__karta {
  display: grid;
  gap: var(--gl-sys-space-4);
  inline-size: min(22rem, 90vw);
  padding: var(--gl-sys-space-8);
  border-radius: var(--gl-sys-radius-large);
  background: var(--gl-sys-color-surface-container-low);
}
.barn-prihlaseni__nadpis { margin: 0; font: var(--gl-sys-text-nadpis-3-font); }
.barn-prihlaseni__popis { margin: 0; color: var(--gl-sys-color-on-surface-variant); }
.barn-prihlaseni__chyba { margin: 0; color: var(--gl-sys-color-error); }