* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Zakazat zoom cele stranky - zoom je povolen jen ve vieweru */
/* Zamezit zvetseni pisma podle systemu (Android "Velikost pisma") */
/* ════════════════════════════════════════════════════════════════════════
   VELIKOST PÍSMA V APLIKACI JE NEZÁVISLÁ NA NASTAVENÍ V ZAŘÍZENÍ

   `text-size-adjust: 100%` brání jen tomu, aby si prohlížeč text sám
   zvětšoval při přiblížení stránky. NEBRÁNÍ tomu, aby systémové nastavení
   „velikost písma" změnilo VÝCHOZÍ velikost písma dokumentu — a to je
   silnější, protože se pak zvětší všechno, co si vlastní velikost neurčuje.

   Naměřeno na 360 px: při kořenovém písmu 16 → 24 → 32 px rostla výška
   obsahu záložky Kočky 1 550 → 1 692 → 1 930 px, přestože v aplikaci bylo
   pořád nastaveno „Normální". Velikosti se násobily: kdo si zvětší písmo
   v telefonu, rozpadne se mu i to, co má v aplikaci normální.

   Proto se kořenová velikost přibíjí na 16 px. Je to táž hodnota, jakou má
   prohlížeč ve výchozím stavu, takže se nikomu nic nezmění — jen přestane
   reagovat na systémový násobič. Vlastní stupně písma v aplikaci na tom
   nestojí: Malé a Velké jsou `zoom`, Extra je `--fs-scale`, a obojí funguje
   nad pevným základem stejně. *(Dávka 26.)* */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}
/* Tělo si velikost drží taky samo — bez toho by ji zdědilo z `html`, což je
   dnes totéž, ale při jakékoli budoucí změně kořene by se to rozešlo. */
body { font-size: 16px; overflow-x: hidden; }
html, body { touch-action: pan-x pan-y; }
:root {
  --bg: #f7f5f0; --surface: #ffffff; --surface2: #f0ede6; --border: #e2ddd4; --border2: #ccc8be;
  --text: #1a1814; --text2: #6b6760; --text3: #9e9b95; --accent: #962d43; --accent-light: #f7e9ec;
  --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 3px rgba(0,0,0,0.07);
  --bt-zluty-bg: #FEF5E4; --bt-zluty-border: #F5E1B0; --bt-zluty-tile: #FDF3DC;
  /* DÁVKA 49: JEDINÝ zdroj zaoblení pro ikonu aplikace i logo chovatelské
     stanice. Logo se vykresluje na deseti místech (hlavička, náhledy pěti
     dokumentů, rodokmen, karta růstu, export, PDF) a mělo je rozdílné —
     v kupní smlouvě ostré rohy, v hlavičce zaoblené. Odsud si ho berou
     všechna, takže se to nemůže rozejít. */
  --logo-radius: 12px;
  --boy: #eef4fb; --boy-text: #2e5a88; --girl: #fdf2f8; --girl-text: #a64d79; --danger: #c62828;
  --unpaid: #d00000;
  --status-free: #2e7d32;
  --status-option: #e09b00;
  --status-reserved: #ed6c02;
  --status-sold: #9e9e9e;
  /* TMAVÝ REŽIM — barvy textu a rámečků na dlaždicích `.set-bg` a na hlavičkách
     sekcí v Nastavení. Do 4. 9. 2026 byly natvrdo v `index.html` jako inline
     `color:`/`border-color:`, takže je pravidlo pro tmavý režim (které přebíjí
     jen POZADÍ) nedokázalo přebarvit — v tmavém režimu zůstával tmavý text na
     tmavém podkladu, kontrast 1,19–1,88 místo 4,5. Stejný vzor jako `--accent`
     o kus níž: světlá hodnota je PŘESNĚ ta původní (světlý režim se nemění),
     tmavá je zesvětlený týž odstín. Hodnoty se opakují ve třech blocích —
     tady, v `@media (prefers-color-scheme: dark)` a v `html.dark`. Když budeš
     něco měnit, měň to na všech třech místech. */
  --tile-ink-blue: #0C447C;
  --tile-ink-blue2: #2C5F8A;
  --tile-ink-amber: #633806;
  --tile-ink-green: #27500A;
  --tile-ink-green2: #1e6b3a;
  --tile-ink-violet: #3C3489;
  --tile-ink-purple: #6B3FA0;
  --tile-brd-violet: #B794E8;
  --tile-brd-blue: #8FB8DE;
  --tile-brd-green: #8FCB9B;
  /* Druhá vlna (4. 9. 2026): POZADÍ a zbývající barvy textu, které byly
     natvrdo v `index.html`, `app.js` a níž v tomto souboru. Týž princip:
     světlá hodnota = přesně ta původní, tmavá = protějšek z palety appky.
     Barevné plochy se v tmavém režimu sjednocují na `--surface2` — stejně,
     jako to už dělá pravidlo `.set-bg` u dlaždic; identitu nese barevný
     text, ne podklad. Výjimka je červená (Nebezpečná zóna, Předplatné),
     která si drží varovný odstín `#2a0f0f`/`#f08080` jako `.btn-danger`.
     POZOR: hexy v generátorech dokumentů (`js/features/…-agreement.js`,
     `pdf-generators.js`, prodejní kartička, plátno PDF prohlížeče) se
     ZÁMĚRNĚ nemění — tisknou se na papír, kde tmavý režim nedává smysl. */
  --sf-blue: #B5D4F4;
  --sf-green: #C0DD97;
  --sf-amber: #FAC775;
  --sf-violet: #EEEDFE;
  --sf-cream: #FDF3DC;
  --sf-cream-panel: #FEF5E4;
  --sf-mint: #E1F5EE;
  --sf-help: #F8F6FC;
  --sf-helpnew: #EFFBF6;
  --sf-chip: #ffffff;
  --sf-red: #F7C1C1;
  --sf-red-soft: #fff0f0;
  --sf-red-solid: #A32D2D;
  --sf-mint-solid: #5DCAA5;
  --tile-ink-cream: #92600A;
  --tile-ink-red: #791F1F;
  --tile-ink-red2: #a32d2d;
  --tile-ink-mint: #0F6E56;
  --tile-ink-mint2: #085041;
  --tile-ink-on-solid: #ffffff;
  --tile-ink-help: #534AB7;
  --tile-ink-helpnum: #AFA9EC;
  --tile-ink-helptxt: #444441;
  --tile-ink-helpsyn: #888780;
  --tile-brd-cream: #F5E1B0;
  --tile-brd-mint: #BEE7D9;
  --tile-brd-help: #E4DFF0;
  --tile-brd-red: #F7C9A8;
  --tile-brd-red2: #f09595;
  --sf-red-lite: #FCEBEB;
  --sf-violet2: #EDE7F9;
  --sf-cream-alert: #fef5e4;
  --tile-brd-cream-alert: #e8c67a;
  --tile-ink-cream-alert: #7a5510;
  --ink-ok: #2e7d32;
  --ink-bad: #c62828;
  --ink-bad2: #b71c1c;
  --ink-ok2: #1b5e20;
  --ink-del: #e53935;
  --tile-ink-star: #c8a415;
  --tile-ink-report: #c0392b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111009; --surface: #2b2920; --surface2: #38352c; --border: #4a4740; --border2: #5e5b52;
    --text: #f0ede6; --text2: #a09d96; --text3: #a5a29b; /* 4.9.2026: #9e9b95 byla v tmavém režimu shodná se světlou hodnotou a dávala jen 4,42 proti --surface2; #a5a29b dává 4,81 a proti --surface 5,72. Světlý režim se nemění. */
    --boy: #1a2a3a; --boy-text: #7ab0e0; --girl: #2d1b24; --girl-text: #e08ab0;
    /* Akcent musí být v tmavém režimu světlejší — #6B3FA0 je navržený pro
       světlé pozadí a na tmavém měl kontrast jen 1,97. #B58EE8 drží stejný
       fialový odstín a splňuje 4,5 proti bg, surface, surface2 i accent-light. */
    --accent: #ea7f93;
    --accent-light: #3e121b;
    /* viz komentář u světlých hodnot v :root — tři místa, musí zůstat shodná */
    --tile-ink-blue: #7FC4EC;
    --tile-ink-blue2: #7FC4EC;
    --tile-ink-amber: #F0B860;
    --tile-ink-green: #63D18F;
    --tile-ink-green2: #63D18F;
    --tile-ink-violet: #C9A0E8;
    --tile-ink-purple: #C9A0E8;
    --tile-brd-violet: var(--border);
    --tile-brd-blue: var(--border);
    --tile-brd-green: var(--border);
    /* druhá vlna — viz komentář u světlých hodnot v :root */
    --sf-blue: var(--surface2);
    --sf-green: var(--surface2);
    --sf-amber: var(--surface2);
    --sf-violet: var(--surface2);
    --sf-cream: var(--surface2);
    --sf-cream-panel: var(--surface);
    --sf-mint: var(--surface2);
    --sf-help: var(--surface2);
    --sf-helpnew: var(--surface2);
    --sf-chip: var(--surface);
    --sf-red: #2a0f0f;
    --sf-red-soft: #2a0f0f;
    --sf-red-solid: #f08080;
    --sf-mint-solid: #63D18F;
    --tile-ink-cream: #F0B860;
    --tile-ink-red: #f08080;
    --tile-ink-red2: #f08080;
    --tile-ink-mint: #63D18F;
    --tile-ink-mint2: #63D18F;
    --tile-ink-on-solid: var(--surface);
    --tile-ink-help: #C9A0E8;
    --tile-ink-helpnum: #C9A0E8;
    --tile-ink-helptxt: var(--text);
    --tile-ink-helpsyn: var(--text2);
    --tile-brd-cream: var(--border);
    --tile-brd-mint: var(--border);
    --tile-brd-help: var(--border);
    --tile-brd-red: #5a2020;
    --tile-brd-red2: #5a2020;
    --sf-red-lite: #2a0f0f;
    --sf-violet2: var(--surface2);
    --sf-cream-alert: #2a1e05;
    --tile-brd-cream-alert: #5a4010;
    --tile-ink-cream-alert: #d4a843;
    --ink-ok: #6fcf97;
    --ink-bad: #f08080;
    --ink-bad2: #f08080;
    --ink-ok2: #6fcf97;
    --ink-del: #f08080;
    --tile-ink-star: #e8c34a;
    --tile-ink-report: #f08080;
  }
  /* Generic buttons: clearly stand out from card backgrounds */
  .btn {
    background: #48453c;
    color: var(--text);
    border-color: #6e6b62;
  }
  .dog-card.breeding-male .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--boy) 100%);
  }
  .dog-card.breeding-female .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--girl) 100%);
  }
  .dog-card.breeding-puppy .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, #2a2510 100%);
  }
  /* Repro info bar (pregnancy strip) */
  .repro-info {
    background: #2a2208;
    color: #d4b483;
    border-bottom-color: #4a4030;
  }
  /* Colored action buttons */
  .btn-close {
    background: #0f2035;
    color: #7ab0e0;
    border-color: #1e3a55;
  }
  .btn-close:active { background: #162840; }
  .btn-danger {
    background: #2a0f0f;
    color: #f08080;
    border-color: #5a2020;
  }
  .btn-danger:active { background: #361515; }
  /* Zelená #2e7d32 je navržená pro světlé pozadí; na tmavém tlačítku má
     nedostatečný kontrast. Stejný důvod, proč se v tmavém režimu zesvětluje
     akcent na #B58EE8. */
  .btn-doc-filled::after { color: #66bb6a; }
  .btn-pa {
    background: #2a1e05;
    color: #d4a843;
    border-color: #5a4010;
  }
  .btn-pa:active { background: #352508; }
  .btn-ra {
    background: #0f2035;
    color: #7ab0e0;
    border-color: #1e3a55;
  }
  .btn-ra:active { background: #162840; }
  .expense-total-bar { background: rgba(198,40,40,0.18); border-color: rgba(198,40,40,0.4); color: #f08080; }
  .income-total-bar { background: rgba(150, 45, 67, 0.22); border-color: var(--accent); color: #a7f3d0; }
  .btn-share-pup { background: rgba(21,101,192,0.2); border-color: rgba(21,101,192,0.4); color: #7ab0e0; }
  .bloodtype-warn { background: rgba(249,168,37,0.12); border-color: rgba(249,168,37,0.4); color: #f0c040; }
  .btn-danger { background: #2a0f0f; color: #f08080; border-color: #5a2020; }
}

html {
    background: var(--bg);
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    /* Portrait: left/right 16px + safe area pro landscape (notch na boku) */
    padding-top: env(safe-area-inset-top, 20px);
    /* Tab bar výška (92px) + home indicator + mezera — obsah se nesmí schovat za lištu ani plovoucí tlačítko */
    padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px) + 50px);
    padding-left: max(16px, env(safe-area-inset-left, 16px));
    padding-right: max(16px, env(safe-area-inset-right, 16px));
    min-height: 100vh;
}
.app { max-width: 860px; margin: 0 auto; }
header { padding: 20px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 7px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; }
.logo-text-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-text-wrapper h1 { width: 100%; text-align: center; margin: 0; }
#cloud-badge { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
#cloud-badge, #cloud-badge *, #badge-device, #badge-cloud, #badge-device *, #badge-cloud * {
    font-size: 11px !important;
    line-height: 1.2 !important;
}
#badge-device, #badge-cloud {
    min-width: 82px;
    justify-content: center;
    box-sizing: border-box;
}
.logo-icon { width: 55px; height: 55px; background: transparent; border-radius: var(--logo-radius); display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; cursor: pointer; overflow: hidden; border: none; flex-shrink: 0; }
.logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 7px; }
/* ── DÁVKA 39: TVAR DLAŽDICE SE SE STUPNĚM PÍSMA NEMĚNÍ ───────────────────
   Petrovo pravidlo, stejné jako u osmi dlaždic pod seznamem: při přepnutí
   velikosti písma v Nastavení zůstává dlaždice stejná — mění se jen písmo
   uvnitř a to, jak se obsah poskládá.

   Do dávky 38 tu stálo `min-height: 80px`, takže dlaždice s obsahem ROSTLA.
   Naměřeno v prohlížeči: v jednom a témž stupni měly dlaždice různé výšky
   (při Extra 83,2 / 105,5 / 84,2 px) a mezi stupni se lišily taky.
   Dnes je výška PEVNÁ; obsah, který by přerostl, zmenší písmo
   (`_pismoCastek()` v app.js) — ne dlaždici. */
.stat { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 10px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: transform 0.1s ease; height: 80px; width: 100%; overflow: hidden; }
.stat:active { transform: scale(0.96); }
/* ── DÁVKA 39: DLAŽDICE PŘIJATO MÁ TOUŽ KOMPOZICI JAKO SOUSEDÉ ─────────────
   Do dávky 38 měla `align-items: flex-start` a `text-align: left`, takže se
   částky lepily vpravo nahoru, popisek PŘIJATO zůstal osamocený vlevo dole
   a mezi tím byla díra. Sousední dlaždice mají číslo uprostřed a popisek pod
   ním — tahle je teď skládá stejně. */
/* ── 2. 9. 2026: ODZNAK JE V ROHU, OBSAH MÁ POD NÍM REZERVU ────────────────
   Odznak „Celkem ⇄" se vrátil do pravého horního rohu (Petrovo rozhodnutí ze
   srovnání s appkou Psi). Aby se nemohl potkat s částkami — to byl důvod, proč
   ho dávka 40 stěhovala dolů — má tahle dlaždice nahoře REZERVU: odznak sedí
   4 px od hrany a je nejvýš 13,2 px vysoký (do 17,2 px), padding-top 20 px ho
   pokryje ve všech čtyřech stupních písma. Naměřeno na draftu: 4 režimy ×
   11 jazyků × 4 velikosti × 3 šířky = 528 kombinací, 0 překryvů, 0 přetečení.
   Zbylé strany zůstávají na 10 px jako dřív. */
.stat-finance { align-items: center; text-align: center; padding: 20px 10px 10px; gap: 2px; }
/* ── DÁVKA 38: ČÁSTKY VE VÍC MĚNÁCH ────────────────────────────────────────
   Blok částek má PEVNOU výšku (nastavuje ji `_STAT_CASTKY_VYSKA` v app.js),
   takže dlaždice s obsahem neroste. Do dávky 37 rostla: se čtyřmi měnami
   měřila 105,5 px proti 83,2 px u sousedů a táhla s sebou celý řádek.
   Když se řádky nevejdou, `_pismoCastek()` sníží písmo přes proměnnou
   `--castky-pismo` — inline by neprošlo, viz dávka 37. */
.stat-castky, .fin-castky { font-size: var(--castky-pismo, inherit); }
/* DÁVKA 41: pole s EMS kódem čte velikost z proměnné, kterou mu dopočet
   nastaví, když by se nejdelší volba nevešla. Bez proměnné platí 14 px
   jako u ostatních polí, takže se nic nemění tam, kde se všechno vejde.
   `--ems-vyska` drží původní výšku pole — menší písmo by ho jinak srazilo. */
.field select.ems-select { font-size: var(--ems-pismo, 14px); height: var(--ems-vyska, auto); }
/* DÁVKA 39: dlaždice čte velikost z proměnné, kterou jí dopočet nastaví,
   když by jí obsah přerostl pevnou výšku. Bez proměnné platí 16 px jako
   dosud, takže se nic nemění tam, kde se všechno vejde. */
.stat { font-size: var(--stat-pismo, 16px); position: relative; }
.stat-corner-ico { position: absolute; right: 7px; bottom: 5px; font-size: 18px; line-height: 1; pointer-events: none; z-index: 1; opacity: 0.9; }
.castky-mrizka { text-overflow: clip; }
.stat-val { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 1.1em; color: var(--text); line-height: 1.2; z-index: 2; }
.stat-label { font-size: 9px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; margin-top: 2px; z-index: 2; }

/* Filter Bar - Perfect alignment with stats */
.filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 7px;
}
/* ── DÁVKA 35: DVĚ ŘADY PO ČTYŘECH PŘES CELOU ŠÍŘKU ────────────────────────
   Řada filtrů na Kočkách — čtyři stejně široké dlaždice: Roky | Poznámky |
   Test | Rezervace. Řada přepínačů pod ní má TOTOŽNOU mřížku, sestavuje ji
   `_renderCatSexTabs()` ze stejných čísel.

   PEVNÁ ŠÍŘKA 66 px Z DÁVKY 30 SE ZRUŠILA. Krčila dlaždice doprostřed a na
   širokém okně kolem nich zbývalo prázdno. Dnes `repeat(4, 1fr)` a `gap: 7px`
   — obojí shodné s `.stats` (dlaždice s čísly nad nimi), takže obě řady
   začínají i končí přesně pod nimi a jsou stejně od sebe.

   MÍSTO KRÁCENÍ SLOV SE ZMENŠUJE PÍSMO. Dávka 30 řešila nedostatek místa
   zkratkami; dnes se slova vracejí celá a písmo se u nich dopočítává za běhu
   (`_pismoDlazdic()` v app.js) — jen tam, kde je to nutné, a nejníž na 8 px.
   Měřením vyšlo, že se zmenšit musí JEN DVA popisky z 99: ru „Племенные ✦"
   na 8,1 px a es „Esterilizados" na 9,3 px, obojí až při 360 px a Velkém
   písmu. Ostatních 97 se vejde v plné velikosti. */
.filters-row-4col {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}
.filters-row-4col > * { min-width: 0; }
/* ── DÁVKA 37: OBĚ ŘADY JSOU JEDNA SADA — ZMĚŘENO V PROHLÍŽEČI ─────────────
   Do dávky 36 se řady lišily ve dvou věcech naráz a ani jednu nešlo spočítat
   z metrik písma; obojí se ukázalo až čtením `getComputedStyle` na draftu.

   1) VÝŠKA. `<select>` „Roky" nese z dávky 24 `min-height: 44px` (dotykové
      plochy). Mřížka natáhne na jeho výšku CELÝ řádek, takže řada filtrů
      měřila **44 px**, zatímco řada přepínačů **39,34 px**. Sjednoceno tím,
      že minimum 44 px dostanou dlaždice v OBOU řadách — je to zároveň
      minimální dotyková plocha, kterou projekt vyžaduje.

   2) PÍSMO. Přepínač měl `font-size` inline a `_pismoDlazdic()` ho svým
      `removeProperty('font-size')` smazala — nerozezná vlastní dopočet od
      základu. Dlaždice pak spadla na výchozích **13,33 px** prohlížeče
      proti **10 px** v řadě filtrů. Základ proto patří do CSS, ne do
      inline stylu; inline zůstává jen dopočet, který se smět mazat MÁ. */
.filters-row-4col > *,
#dog-sex-tabs > *,
#cat-sex-tabs > * { min-height: 44px; }

/* ── DÁVKA 37: PÍSMO JDE PŘES PROMĚNNOU, NE PŘES INLINE STYL ───────────────
   Dopočet z dávky 35 zapisoval velikost inline s `!important` — a NEPROŠEL.
   Změřeno v prohlížeči: `el.style.setProperty('font-size','14.3px','important')`
   se do `style` zapsal, ale `getComputedStyle` dál vracel 15 px, protože ho
   přebilo pravidlo `html.font-xlarge … .filter-btn { … !important }`. Dopočet
   tedy celou dobu počítal správně a nic nenastavil.

   Řeší to jediná proměnná `--dlazdice-pismo` na `<html>`: obě řady z ní
   čtou, takže je společné písmo zaručené konstrukcí, ne dvouprůchodovým
   výpočtem. Když proměnná není nastavená, platí základ za čárkou. */
.filters-row-4col .filter-btn,
.filters-row-4col .app-select,
#dog-sex-tabs .sex-tab,
#cat-sex-tabs .sex-tab { font-size: var(--dlazdice-pismo, 10px); }
/* 10.1: Řada filtrů a řada pohlaví pod ní musí sedět dlaždice na dlaždici.
   Nesedly kvůli `line-height: normal` — sjednocuje se na 1.15.

   DÁVKA 36 sem doplnila `<button>`. Pravidlo dřív mířilo na `.app-select`
   a `input.filter-btn`, takže TLAČÍTKA v řadě filtrů zůstala na
   `line-height: normal`. U DM Sans to bylo 1,302 (ascender 992 − descender
   −310, lineGap 0), takže tlačítko měřilo 10+10 odsazení + 2+2 rámeček
   + 13,02 = **37,02 px**, zatímco dlaždice přepínače s 1.15 měřila
   **35,50 px**. DÁVKA 74: IBM Plex Sans má 1,300 (1025 − −275, lineGap 0),
   tedy o 0,002 míň — rozdíl 0,02 px na tlačítku. Pravidlo `line-height: 1.15`
   platí dál a je to pořád ono, co ty dvě řady drží srovnané. Řady vypadaly jako dvě různé sady a při zmenšeném písmu
   se rozdíl zvětšil až na 3,8 px. Změřeno z metrik písma, ne odhadnuto.

   Šířky a mezery řeší mřížka v `_renderCatSexTabs()`. */
.filters-row-4col .app-select,
.filters-row-4col .filter-btn { line-height: 1.15; }
.filters-row-4col .filter-btn { padding-left: 1px; padding-right: 1px; }
/* DÁVKA 30: popisek se NELÁME ani NEUTÍNÁ — slova jsou zkrácená tak, aby se
   vešla. Obecné `.filters button.filter-btn` níž zapíná `white-space: normal`
   + `overflow-wrap: break-word`, což je přesně to lámání uprostřed slova,
   které se tady zakazuje. Proto se v téhle řadě obojí ruší. */
.filters-row-4col .filter-btn,
.filters-row-4col button.filter-btn {
    white-space: nowrap;
    overflow-wrap: normal;
    overflow: visible;
    text-overflow: clip;
}
/* ── EXTRA: čtveřice filtrů roste jako zbytek aplikace ────────────────────────
   Písmo 10 → 15 px přes `--fs-scale`, aby tahle řada nebyla při zapnuté
   NEJVĚTŠÍ velikosti nejmenším textem na obrazovce.

   ZALOMENÍ ZRUŠILA DÁVKA 30 a platí to dál. Dřív tu stálo
   `overflow-wrap: anywhere`, tedy lámání UPROSTŘED SLOVA. `nowrap` + `clip`
   je pojistka: kdyby se popisek přece jen nevešel, projeví se to viditelným
   přetečením, ne tichým zalomením uprostřed slova ani trojtečkou.

   DÁVKA 35: `font-size` je tu ZÁKLAD, ne konečné slovo. `_pismoDlazdic()`
   po vykreslení dopočítá u každé dlaždice zvlášť, jestli se popisek vejde,
   a jen tam, kde ne, zapíše menší hodnotu inline (nejníž 8 px). Proto tu
   `!important` být musí — jinak by obecné `.filter-btn { font-size: 9px }`
   přebilo základ, ale zároveň nesmí přebít inline dopočet, což `!important`
   na pravidle nedělá (inline styl bez `!important` prohrává jen s
   `!important` pravidlem, a proto `_pismoDlazdic()` zapisuje s prioritou). */
html.font-xlarge .filters-row-4col .filter-btn,
html.font-xlarge .filters-row-4col .app-select,
html.font-xlarge #dog-sex-tabs .sex-tab,
html.font-xlarge #cat-sex-tabs .sex-tab {
    /* Proměnná má přednost i tady — jinak by při Extra dopočet neprošel,
       přesně jak se to dělo do dávky 36. */
    font-size: var(--dlazdice-pismo, calc(10px * var(--fs-scale))) !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;
}
/* DÁVKA 37: řada přepínačů musí být v tomhle pravidle taky. Do dávky 36 na
   ni Extra dosahovalo přes univerzální `html.font-xlarge [style*="font-size:10px"]`
   — tedy přes INLINE hodnotu. Jakmile se základ přesunul do CSS (což musel,
   viz výš), by ji to pravidlo přestalo vidět a přepínač by při největším
   písmu zůstal na 10 px, zatímco filtry by šly na 15 px. */

.filter-btn {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 5px;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: var(--text);
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.filter-btn:hover {
    background: var(--surface2);
    border-color: var(--accent);
}

.filter-btn:active {
    transform: scale(0.98);
}

.filter-btn:focus {
    outline: none;
    border-color: var(--accent);
}

/* Akční tlačítka filtru (Test krytí, Rezervace, Lidé) se NEOŘEZÁVAJÍ: delší překlady
   (de „Verpaarung testen", hu „Párosítási teszt", ru „Забронированные") se ZALOMÍ.
   Scopováno na <button>, aby select (rok) a input (Hledat) zůstaly jednořádkové s ellipsis.
   Platí pro všechny čtyři stupně písma. */
.filters button.filter-btn {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    line-height: 1.15;
}

/* Barevné odlišení dlaždic Poznámky (Teal) a Krytí (Amber) */
.filter-btn.fbtn-notes {
    background: #F0FDFA;
    border: 2px solid #0D9488 !important;
    color: #115E59 !important;
}
.filter-btn.fbtn-notes:hover {
    background: #CCFBF1;
    border-color: #0F766E !important;
}
.filter-btn.fbtn-mating {
    position: relative;
    background: #FFFBEB;
    border: 2px solid #D97706 !important;
    color: #92400E !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filter-btn.fbtn-mating .mating-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filter-btn.fbtn-mating .fbtn-mating-icon {
    position: absolute;
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}
.filter-btn.fbtn-mating .mt-label {
    display: inline-block;
    white-space: nowrap;
}
.filter-btn.fbtn-mating:hover {
    background: #FEF3C7;
    border-color: #B45309 !important;
}

@media (prefers-color-scheme: dark) {
    .filter-btn.fbtn-notes {
        background: rgba(13, 148, 136, 0.18);
        border: 2px solid #14B8A6 !important;
        color: #5EEAD4 !important;
    }
    .filter-btn.fbtn-notes:hover {
        background: rgba(13, 148, 136, 0.28);
    }
    .filter-btn.fbtn-mating {
        background: rgba(217, 119, 6, 0.18);
        border: 2px solid #F59E0B !important;
        color: #FCD34D !important;
    }
    .filter-btn.fbtn-mating:hover {
        background: rgba(217, 119, 6, 0.28);
    }
}
html.dark .filter-btn.fbtn-notes {
    background: rgba(13, 148, 136, 0.18);
    border: 2px solid #14B8A6 !important;
    color: #5EEAD4 !important;
}
html.dark .filter-btn.fbtn-notes:hover {
    background: rgba(13, 148, 136, 0.28);
}
html.dark .filter-btn.fbtn-mating {
    background: rgba(217, 119, 6, 0.18);
    border: 2px solid #F59E0B !important;
    color: #FCD34D !important;
}
html.dark .filter-btn.fbtn-mating:hover {
    background: rgba(217, 119, 6, 0.28);
}

/* ── DÁVKA 77, ČÁST 7: ikona 🧬 u tlačítka „Test" ──────────────────────────
   Dlaždice i text „Test" musí zůstat PŘESNĚ tak velké jako dřív — jistota
   nadřazená ikoně. Doslovných 44×44 px (rozměr ikon na spodní liště) se do
   44px vysoké dlaždice s 2px rámečkem nevejde (44 − 2×2 = 40 < 44), natož
   spolu s textem vedle. Kolečko je proto 18×18 px — vejde se do STÁVAJÍCÍHO
   odsazení tlačítka, aniž by se sáhlo na padding/rámeček/výšku — a je záměrně
   malé, aby nezatížilo `_pismoDlazdic()`: ta počítá JEDNO sdílené písmo pro
   všech osm dlaždic (viz dávka 36–37 výš), takže velká ikona by shodným
   mechanismem zmenšila písmo i sousedům (Poznámky, Rezervace, Roky). */
.filter-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.filter-btn-icon .mt-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filter-btn-icon .mt-icon {
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EDE7F9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}


/* Paywall Styles */
#paywall-overlay.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top, 12px)) max(12px, env(safe-area-inset-right, 12px)) max(12px, env(safe-area-inset-bottom, 12px)) max(12px, env(safe-area-inset-left, 12px)) !important;
    box-sizing: border-box !important;
}

#paywall-overlay .modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: 400px !important;
    width: 100% !important;
    max-height: min(92vh, calc(100dvh - 36px)) !important;
    padding: 20px 16px 16px !important;
    border-radius: 22px !important;
    border: 1.5px solid var(--accent) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.32) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    text-align: center;
    box-sizing: border-box;
    margin: auto !important;
}

#paywall-overlay .modal-close {
    position: sticky;
    top: 0;
    float: right;
    margin-top: -6px;
    margin-right: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface2);
    color: var(--text2);
    border: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#paywall-overlay .modal-close:active {
    background: var(--border);
}

.paywall-diamond-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(107, 63, 160, 0.1);
}

.paywall-heading {
    color: var(--accent);
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.paywall-desc {
    font-size: 12.5px;
    margin-bottom: 12px;
    line-height: 1.4;
    color: var(--text2);
}

.paywall-price-card {
    background: var(--accent-light);
    padding: 10px 12px;
    border-radius: 14px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
}

.paywall-price-card .price-row {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
}

.paywall-price-card .price-sub {
    font-size: 11.5px;
    color: var(--text2);
    margin-top: 3px;
}

.paywall-price-card .price-trial {
    font-size: 10.5px;
    color: var(--text3);
    margin-top: 5px;
    opacity: 0.85;
    line-height: 1.35;
}

.paywall-features-list {
    text-align: left;
    margin: 0 0 16px;
    list-style: none;
    padding: 0 4px;
}

.paywall-features-list li {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
}

.paywall-features-list li .check-icon {
    color: #10b981;
    font-weight: 800;
    font-size: 13px;
}

.paywall-action-btn {
    width: 100%;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    box-sizing: border-box;
    display: block;
    text-align: center;
}
.section { display: none; } .section.active { display: block; }
.cat-card, .dog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 7px !important; overflow: hidden; position: relative; transition: transform 0.1s ease, opacity 0.1s ease; cursor: pointer; transform: translateZ(0); will-change: transform; contain: layout style; }
.cat-card:active { transform: scale(0.97); opacity: 0.8; }
/* Zvýraznění chovných kocourů a koček */
.dog-card.breeding-male {
    border: 2px solid #90b8d8;
    box-shadow: 0 0 0 2px rgba(144, 184, 216, 0.2), 0 4px 12px rgba(0,0,0,0.1);
}
.dog-card.breeding-male .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, #eef4fb 100%);
}
.dog-card.breeding-female {
    border: 2px solid #e8a0b8;
    box-shadow: 0 0 0 2px rgba(232, 160, 184, 0.2), 0 4px 12px rgba(0,0,0,0.1);
}
.dog-card.breeding-female .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, #fdf2f8 100%);
}
.dog-card.breeding-puppy {
    border: 2px solid #ffd700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3), 0 4px 12px rgba(0,0,0,0.1);
}
.dog-card.breeding-puppy .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, #fff8e1 100%);
}
.cat-header, .dog-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cat-header.male { background: var(--boy); }
.cat-header.female { background: var(--girl); }
/* JemnĂŠ odliĹĄenĂ­ dospÄlĂ˝ / ĹĄtÄnÄ bez "pilulek" */
.pup-row { padding-left: 16px; }
.pup-row .sq-avatar { width: 40px; height: 40px; border-radius: 12px; }
.pup-row { border-left: none; }
.repro-info { 
    background: #fff9c4; 
    padding: 12px 20px; 
    min-height: 50px;
    font-size: 13px; 
    border-bottom: 1px solid var(--border); 
    color: #5d4037; 
    font-weight: 600; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 4px 0;
    line-height: 1.6;
}

/* Automatické zmenšení textu pro dlouhé texty */
@media (max-width: 768px) {
    .repro-info {
        font-size: 12px;
        padding: 10px 16px;
    }
}

@media (max-width: 480px) {
    .repro-info {
        font-size: 11px;
        padding: 10px 12px;
    }
}
.sq-avatar { width: 45px; height: 45px; border-radius: 12px; background: var(--surface2); border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); position: relative; }
.sq-avatar img { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; }
.pup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.pup-row.male {
    background: var(--boy);
    border-bottom-color: rgba(46,90,136,0.18);
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.6);
}
.pup-row.female {
    background: var(--girl);
    border-bottom-color: rgba(166,77,121,0.16);
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.6);
}
.pup-status { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: bold; margin-left: 8px; }
.status-free { background: var(--status-free); color: white; }
.status-reserved { background: var(--status-reserved); color: white; }
.status-sold { background: var(--status-sold); color: white; }
/* 10.4/A2: kotě, které si chovatelka nechala, není prodané — dřív sdílelo
   šedou `status-sold`, takže text „Zůstává v chovu" a barva si odporovaly. */
.status-kept { background: var(--accent, #6B3FA0); color: white; }
.status-option { background: var(--status-option); color: white; }
.status-returned { background: #9e9e9e; color: white; }
.drag-handle-col { width: 44px; color: var(--text3); cursor: grab; flex-shrink: 0; touch-action: none; user-select: none; font-size: 24px; text-align: center; padding: 8px 0; }
.sex-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: bold; color: white; margin-left: 5px; vertical-align: middle; }
.sex-badge.m { background: #2196F3; }
.sex-badge.f { background: #E91E63; }
.price-container {
    text-align: right;
    width: 120px;
    flex-shrink: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.progress-bar-bg { width: 100%; height: 5px; background: var(--border2); border-radius: 3px; margin: 5px 0 0 0; overflow: hidden; }
.price-container .pup-status { display: block; margin-left: 0; text-align: right; }
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
/* Puntík „nepřibírá" na dlaždici koťátka. ZÁMĚRNĚ NE ČERVENÁ — červená
   v aplikaci znamená chybu (nezaplaceno, smazat). Tohle je náznak, ne poplach,
   proto jantarová, stejná jako stav „opce". Sedí s ostatními řádky dlaždice:
   stejná velikost písma i odsazení. */
.pup-gain-dot {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 3px; padding: 2px 8px 2px 6px;
    border-radius: 999px; cursor: pointer;
    background: rgba(224, 155, 0, 0.12);
    border: 1px solid rgba(224, 155, 0, 0.45);
    font-size: 11px; font-weight: 600; color: var(--status-option);
}
.pup-gain-dot-mark {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--status-option); flex-shrink: 0;
}
.pup-gain-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Vážná úroveň — úbytek přes desetinu nejvyšší zaznamenané váhy. Tady červená
   ANO: je to jediný stav v hlídání přírůstku, který snese barvu vyhrazenou
   vážným věcem. Bere se `--danger`, jediná červená v projektu (style.css:10) —
   žádný nový odstín. Jantarová úroveň zůstává beze změny; kdyby byly obě
   stejně křiklavé, odstupňování by nemělo smysl. */
.pup-gain-dot-bad {
    background: rgba(198, 40, 40, 0.10);
    border-color: rgba(198, 40, 40, 0.45);
    color: var(--danger);
}
.pup-gain-dot-bad .pup-gain-dot-mark { background: var(--danger); }

/* DÁVKA 66: `position:relative; z-index:1` NENÍ kosmetika, drží celou zkratku.
   U KOŤÁTKA jsou tyhle ikony uvnitř klikacího řádku, který má třídu `.tap44`.
   Ta si přes `::after` roztahuje neviditelnou dotykovou plochu přes CELÝ řádek
   a klepnutí BERE (`pointer-events` tam schválně není `none`). Ikony jsou
   nepozicované, takže se halo kreslí NAD NĚ — prst tedy netrefil ikonu, ale
   řádek, a místo rozbalených Záznamů se otevřel jen profil koťátka.
   U KOČKY je týž klikací řádek BEZ `.tap44`, žádné halo nevzniká a zkratka
   fungovala — proto to vypadalo jako vada jen u koťat.
   `event.stopPropagation()` v obsluze ikony to spravit nemohlo: událost se
   k ikoně vůbec nedostala.
   Nesahá se tím na rozměry ani na vzhled, jen na pořadí vrstev. */
.quick-attachments { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: flex-start; position: relative; z-index: 1; }
.att-group { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; width: 55px; }
/* `.att-name` (název souboru nad mini-ikonou) zrušen — do 55px sloupečku se
   nevešel a ořezával se, takže nic neříkal. Zůstala ikona a počet. */
.mini-photo-link { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    border: 2px solid #fff; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px var(--border); 
    overflow: hidden; 
    cursor: pointer; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}
.mini-photo-link .ei,
.mini-doc-link .ei {
    display: block;
    font-size: 16px;
    line-height: 1;
    transform: translateY(1px);
    -webkit-transform: translateY(1px);
}
.mini-photo-link .ei {
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.mini-doc-link .ei {
    transform: translateY(1px) translateX(1px);
    -webkit-transform: translateY(1px) translateX(1px);
}
.mini-photo-link:hover { 
    transform: scale(1.08); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 2px var(--accent); 
}
.mini-photo-link img { width: 100%; height: 100%; object-fit: cover; }
.mini-doc-link { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 34px; 
    height: 34px; 
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%); 
    border-radius: 50%; 
    border: 2px solid #fff; 
    cursor: pointer; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mini-doc-link:hover { 
    transform: scale(1.08); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 2px var(--accent); 
}
.btn { padding: 6px 12px; font-size: 13px; font-weight: 500; border: 1px solid var(--border2); border-radius: 8px; cursor: pointer; background: var(--surface); transition: transform 0.1s ease, opacity 0.1s ease; }
.btn:active { transform: scale(0.97); opacity: 0.8; }
.btn-primary {
    background: var(--accent-light, #f7e9ec);
    color: var(--accent, #962d43);
    border: 1.5px solid var(--accent, #962d43);
    font-weight: 700;
}
.btn-primary:hover {
    background: rgba(150, 45, 67, 0.15);
    border-color: var(--accent, #962d43);
}
.btn-primary:active {
    transform: scale(0.97);
    opacity: 0.85;
}
html.dark .btn-primary {
    background: rgba(150, 45, 67, 0.25);
    color: #a7f3d0;
    border-color: var(--accent);
}

/* Validace formulářů — povinná pole */
.field-error {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 2px rgba(229,57,53,0.25) !important;
    animation: fieldShake 0.35s ease;
}
@keyframes fieldShake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}
.field-required-label::after {
    content: " *";
    color: #e53935;
    font-weight: 700;
}
.acc-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 8px 0;
}
@media (max-width: 520px) {
    .acc-doc-grid {
        grid-template-columns: 1fr;
    }
}
.acc-doc-grid .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    min-height: 42px;
    text-align: center;
}

.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2500; align-items: center; justify-content: center;
    /* Safe area na všech stranách — Dynamic Island, notch, home indicator */
    padding-top: max(10px, env(safe-area-inset-top, 10px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    padding-left: max(10px, env(safe-area-inset-left, 10px));
    padding-right: max(10px, env(safe-area-inset-right, 10px));
}
/* POZOR — TENHLE `padding-bottom` DNES NA MODAL NEPŮSOBÍ (ověřeno 4. 9. 2026).
   Změřeno v prohlížeči: VŠECH 20 oken aplikace má `.modal`/`.modal-sticky`
   s `position: fixed` a vlastním `top` + `transform`, takže jsou z flex-toku
   overlaye vyjmutá. Padding se dá nastavit i na 400 px a modal se nepohne
   ani o pixel — vyzkoušeno.
   Z toho plyne dvojí:
     • `--nav-bar-height` se nikde v JS nenastavuje (je tu od PRVNÍHO commitu
       projektu `9511859`, nikdy nebyla naplněná) a dosazuje se za ni 0px.
       Naplnit ji výškou spodní lišty by stejně nic nezměnilo — a nemá to ani
       proč: `.ios-tab-bar` má `z-index:100`, `.overlay` 200, takže lišta
       leží POD oknem a překrýt ho nemůže.
     • `--keyboard-height` se z `initKeyboardHandling()` (app.js) nastavuje,
       ale na odsazení okna od klávesnice se tudy taky nedosáhne. Fokusované
       pole řeší `scrollIntoView` v téže funkci, ne tenhle padding.
   Pravidlo se NECHÁVÁ, jak je: nic nerozbíjí a odstranění by byl zásah do
   všech dvaceti oken bez užitku. Skutečná oprava by znamenala změnit
   pozicování modalů — to je samostatná práce, ne úprava jedné řádky. */
.overlay.open { display: flex; animation: fadeIn 0.2s ease-out; padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + var(--nav-bar-height, 0px) + var(--keyboard-height, 0px) + 10px)); transition: padding-bottom 0.25s ease; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateZ(0);
    }
}

@keyframes slideUpMobile {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   MODAL - Jednoduchý design od nuly
   ======================================== */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    background: var(--surface);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh; max-height: 85dvh;
    overflow-y: auto;
    /* Dojetí na konec obsahu se NESMÍ přenést na stránku pod oknem. Bez
       tohohle se po dorolování okna začala posouvat aplikace za ním a po
       zavření byla chovatelka jinde, než odkud okno otevřela. `.modal` je
       přitom rolovací prvek KAŽDÉHO okna — `max-height: 85vh` plus
       `overflow-y: auto` platí pro všechna, ne jen pro ta s `.modal-body`. */
    overscroll-behavior: contain;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: slideUp 0.2s ease-out;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 28px;
    cursor: pointer;
    color: var(--text2);
    background: none;
    border: none;
    line-height: 1;
    padding: 4px;
}

/* Sticky-footer modals — header scrolls, buttons stay fixed at bottom */
.modal.modal-sticky {
    padding: 0;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}
.modal-sticky .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    /* 10.4/B4: na konci rolování v modalu propadal scroll na stránku pod ním —
       doloženo posunem stránky o 600 px, když modal už neměl kam. `contain`
       scroll zastaví na hranici modalu, ale rolování VNITŘ modalu nechá být.
       Volí se před `overflow:hidden` na body: to na iOS přeskočí stránku
       na začátek a po zavření modalu se uživatelka ocitne jinde. */
    overscroll-behavior: contain;
}
.modal-sticky .modal-footer {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ========================================
   FIELD - Jednoduchý design: label nad inputem
   ======================================== */
.field {
    margin-bottom: 12px;
    width: 100%;
}

.field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border2);
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
    font-family: 'IBM Plex Sans', sans-serif;
}

.field textarea {
    min-height: 70px;
    resize: vertical;
}

.attach-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.attachments-list { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); margin-top: 10px; }
.attachment-item { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--border); }

/* ========================================
   FOTOALBUM — pásy příloh (fotky / dokumenty)
   Pás má PEVNOU výšku a posouvá se vodorovně. Původní plochý seznam
   při deseti přílohách odtlačil sekce IDENTIFIKACE, PŮVOD i GENETIKU.
   Proto tu nikde nesmí být `flex-wrap` ani `height:auto`.
   Barvy jdou VÝHRADNĚ přes proměnné → tmavý režim se řeší sám.
   ======================================== */
#d-attachments, #p-attachments { padding: 8px 8px 4px; }
/* prázdná schránka nesmí zabírat ani rámeček */
.attachments-list.att-box-empty { display: none; }

.att-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.att-sort-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text2); }
.att-sort-btn {
    font: inherit; font-size: 11px; line-height: 1.3;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border2); background: var(--surface); color: var(--text2);
    cursor: pointer; white-space: nowrap;
}
.att-sort-btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); font-weight: 700; }

.att-strip-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text2); margin: 6px 0 4px;
}
.att-strip-count {
    font-size: 10px; font-weight: 700; line-height: 1;
    padding: 2px 6px; border-radius: 999px;
    background: var(--surface2); color: var(--text2);
}

.att-strip {
    display: flex; flex-wrap: nowrap; gap: 8px;
    /* Dřív `height: 134px` a s ním `overflow-y: hidden` — pás byl uzavřený
       do pevné výšky, takže delší název přílohy se v dlaždici UŘÍZL.
       Naměřeno na draftu: „Rodokmen Bela Modra Hvezda.pdf" potřeboval
       37 px, dostal 24 → třetí řádek pryč. `min-height` drží dosavadní
       vzhled u krátkých názvů a dovolí vyrůst, kde je to potřeba. */
    height: auto; min-height: 134px; align-items: stretch;
    box-sizing: border-box;
    padding: 2px 2px 10px;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.att-strip::-webkit-scrollbar { height: 6px; }
.att-strip::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.att-tile {
    position: relative; flex: 0 0 auto;
    /* Výška `auto` s `min-height`: dlaždice smí vyrůst, aby se název vešel.
       Ve flexové řadě se všechny srovnají na nejvyšší (`align-items: stretch`
       na pásu), takže řada zůstane zarovnaná. */
    width: 96px; height: auto; min-height: 122px;
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); overflow: hidden; cursor: pointer;
}
/* DÁVKA 51: dlaždice FOTKY KOŤÁTKA nese jediný řádek — věk („3 týdny").
   Název souboru se u ní nevypisuje, takže padá i důvod, proč směla vyrůst:
   nemá se co přizpůsobovat. Nižší minimum ji zkrátí o jeden řádek.
   U DOKUMENTŮ zůstává pravidlo výš beze změny — tam název dala chovatelka
   a dlaždice se mu má přizpůsobit. */
.att-tile-foto { min-height: 100px; }
/* Úchytka pro přetažení pořadí fotek koťátka (1.9.2026, přenos vzoru z appky
   Psi). Kotví se do rohu dlaždice (`.att-tile` má `position: relative` výš).
   `touch-action: none` je nutné, aby na dotykovém displeji tažení nezačalo
   rolovat stránku místo přesouvání fotky. Ukazuje se jen u fotek koťátka,
   kde má pořadí smysl — vykresluje ji `_attTile()` podle parametru. */
.att-drag-handle { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-size: 12px; line-height: 1; cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.2); z-index: 2; }
.att-drag-handle:active { cursor: grabbing; }
/* Věk se NESMÍ utnout. `.att-tile-date` má `nowrap` + `ellipsis`, což u data
   („1. 7. 2024") stačí, ale delší věk se ořízl — naměřeno it „8 settimane"
   při Extra, kde textu chybělo 82,9 px z 86. Tady se proto zalamuje mezi
   slovy a dlaždice smí vyrůst, stejně jako u názvu dokumentu.
   `anywhere` (ne `break-word`) proto, že jen ono zmenší min-content ve
   flexu — táž past jako u popisků filtrů a názvů příloh. */
.att-tile-foto .att-tile-date {
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
}
/* Samotné `min-height` na dlaždici NESTAČÍ: pás má vlastní minimum 134 px
   a `align-items: stretch`, takže dlaždice roztáhne zpátky na svou výšku.
   Naměřeno — dlaždice hlásila `min-height: 100px` a přitom měřila 122 px.
   Zmenšuje se proto i pás, ale JEN ten s fotkami koťátka: u kočky se věk
   nepočítá a dlaždice tam mají dál název i datum. */
#p-att-strip-foto { min-height: 112px; }
.att-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.att-thumb {
    height: 74px; flex: 0 0 74px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface2); overflow: hidden;
}
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-ico { font-size: 30px; line-height: 1; }
/* DÁVKA 52: obrázek, který se nedá vykreslit. Rozměry náhledu se NEMĚNÍ —
   dlaždice musí zůstat stejně vysoká jako ostatní, jinak pás poskočí.
   Podklad zůstává `--surface2` z `.att-thumb`; přibývá jen linka v barvě,
   kterou aplikace používá pro chyby, aby to fungovalo i v tmavém motivu.
   DÁVKA 53: tenhle komentář byl rozbitý — měl uvnitř druhou ukončovací
   značku a dva řádky textu pak stály mimo komentář. Prohlížeč se z toho
   srovnal až za následujícím pravidlem, takže `.att-thumb-chyba` v aplikaci
   VŮBEC NEBYLO (naměřeno na draftu: 467 pravidel, tohle mezi nimi chybělo).
   Ukončovací značka komentáře se do textu nepíše ANI v uvozovkách — CSS
   nezná únikové znaky a komentář skončí na prvním jejím výskytu. */
.att-thumb-chyba { box-shadow: inset 0 0 0 2px var(--danger); }
/* Hláška v prohlížeči příloh. Světlá, protože overlay je tmavý. */
.viewer-chyba {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 28px 20px; text-align: center;
    font-size: 30px; color: #fff;
}
.viewer-chyba span { font-size: 1rem; opacity: .9; max-width: 18em; }
.att-meta { flex: 1 1 auto; min-height: 0; padding: 4px 5px; overflow: hidden; }
/* POZOR na názvy tříd: `.att-name` a `.att-group` (ř. 351–352) už patří
   mini-náhledům příloh na KARTĚ kočky a mají navíc `!important` pravidlo
   u největšího písma (ř. 1573). Dlaždice pásu proto mají vlastní `att-tile-*`.
   Kdyby sdílely `.att-name`, pozdější pravidlo by přebilo dřívější a rozbilo
   mini-náhledy — beze slova, protože obojí by se dál vykreslovalo.

   POZNÁMKA O PEVNÝCH px ZDE DŘÍV STÁLA A UŽ NEPLATÍ. Znělo to „dlaždice má
   PEVNOU výšku, takže se s ní škálování písma nesmí hýbat, jinak by text
   z dlaždice vypadl". Ta pevná výška byla ale sama tou chybou: text z ní
   vypadával už při dnešní velikosti. Dlaždice teď smí vyrůst (výš), takže
   škálování je bezpečné a je zavedené. */
.att-tile-name {
    /* Byl tu `-webkit-line-clamp: 2`, tedy strop DVA ŘÁDKY. Delší název se
       o třetí řádek připravil — naměřený ořez 13 px. Bez stropu se zalomí,
       kolik je potřeba, a dlaždice se přizpůsobí. `anywhere` (ne
       `break-word`) proto, že jen ono zmenší min-content ve flexu — stejná
       past jako u popisků filtrů, viz sekce 66 v kontrolách. */
    display: block;
    overflow: hidden; overflow-wrap: anywhere;
    font-size: 10px; line-height: 12px; color: var(--text);
}
.att-tile-date {
    display: block; font-size: 10px; line-height: 12px; color: var(--text2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Největší písmo: název i datum škálují a dlaždice se ROZŠÍŘÍ. Šířka je tu
   levnější než výška — pás se roluje vodorovně, takže širší dlaždice nikomu
   nepřekáží, zatímco vyšší tlačí zbytek karty dolů.
   Naměřeno na draftu (šířka 360 px, cz i de, název o 74 znacích):
       výchozí   dlaždice  96×156, pás 168 px, ořez 0
       Extra     dlaždice 130×210, pás 222 px, ořez 0
   Křížek na mazání zůstává v obou případech uvnitř dlaždice. */
html.font-xlarge .att-tile { width: calc(96px * 1.35); }
html.font-xlarge .att-tile-name,
html.font-xlarge .att-tile-date {
    font-size: calc(10px * var(--fs-scale)) !important;
    line-height: calc(12px * var(--fs-scale)) !important;
}
/* Ikona typu přílohy (📕 / 🖼️) roste s písmem taky. Náhled má PEVNOU výšku
   74 px a ta se nemění, takže tady muselo měření rozhodnout, jestli se
   zvětšená ikona vejde. Naměřeno na draftu (šířka 360 px):
       výchozí   ikona 30 px → 30×30 v náhledu  94×74   nevyteče
       Extra     ikona 45 px → 45×45 v náhledu 128×74   nevyteče
   45 < 74, takže je i po zvětšení nad i pod ikonou místo a nepřekrývá
   křížek na mazání (ověřeno porovnáním obdélníků, ne odhadem).
   Ostatní dva nezaškálované prvky pásu se NEMĚNÍ: `.att-del` je křížek
   ve pevném tlačítku 20×20 px, zvětšené písmo by z něj vyteklo — tam nejde
   o velikost písma, ale o velikost dotykové plochy (viz měření pod 44 px). */
html.font-xlarge .att-ico { font-size: calc(30px * var(--fs-scale)) !important; }

/* ── PROHLÍŽEČ PŘÍLOH: DVA PRVKY, KTERÉ PŘI EXTRA ZŮSTÁVALY STÁT ────────
   Zbytek položky B37. Naměřeno na 360 px při všech čtyřech stupních:

     stupeň    .viewer-meta-clear   .viewer-nav-btn   .att-ico (vzor)
     Malé      33,4 × 33,4          38,7 × 38,7       30 px
     Normální  38 × 38              44 × 44           30 px
     Velké     44,8 × 44,8          51,9 × 51,9       30 px
     Extra     38 × 38              44 × 44           45 px   ← nerostly

   Malé, Normální a Velké mění velikost ZOOMEM celé stránky, takže tyhle
   dva prvky rostou samy. Extra ale zoom nepoužívá — mění jen `--fs-scale`
   a roste jen to, co si o to v CSS řekne. Ikona přílohy si o to řekla
   v dávce 21, tyhle dva ne, takže chovatelka s největším písmem měla
   v prohlížeči příloh dvě nezvětšená tlačítka.

   ROSTE I RÁMEČEK, nejen písmo. U `.att-ico` stačilo písmo, protože sedí
   ve volném náhledu 74 px. Tady je glyf v PEVNÉM čtverci: 30 px písma by
   se do 44px tlačítka po zvětšení na 45 px nevešlo a vyteklo by ven. */
html.font-xlarge .viewer-meta-clear {
    font-size: calc(18px * var(--fs-scale)) !important;
    width:     calc(38px * var(--fs-scale)) !important;
    height:    calc(38px * var(--fs-scale)) !important;
}
html.font-xlarge .viewer-nav-btn {
    font-size: calc(30px * var(--fs-scale)) !important;
    width:     calc(44px * var(--fs-scale)) !important;
    height:    calc(44px * var(--fs-scale)) !important;
}
/* Křížek na dlaždici. V 4B byl zrušen a hned vrácen: PDF se otevírá mimo
   prohlížeč, takže bez něj nešel dokument smazat vůbec. Mazání je natrvalo
   na obou místech — tady i v prohlížeči. */
.att-del {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 14px; line-height: 20px; text-align: center;
    cursor: pointer;
}

/* ── FOTOALBUM — prohlížeč fotek (krok 4A) ──────────────────────────────
   Platí JEN se třídou `has-nav`, kterou nasazuje _viewerRenderNav() podle
   toho, jestli viewAttachment() dostal ctx. Bez ní vypadá prohlížeč přesně
   jako dřív — na tom stojí pět starších volání.

   MÍSTO NA DISPLEJI. Původní #viewer-content má height:100vh, takže by
   spodní panel z overlaye vytlačil ven. Proto se v režimu has-nav pouští
   do svislého flexu (flex:1, height:auto) a fotka si vezme, co zbyde.
   Žádné magické číslo: panel má svou výšku, zbytek je fotka. Počítadlo
   a šipky jsou position:fixed, takže na výšku nestojí nic.

   Overlay je v OBOU režimech tmavý (rgba(0,0,0,.95)), proto jsou barvy
   panelu napsané natvrdo a ne přes proměnné — světlá varianta proměnných
   by dala světlé pole na tmavém pozadí a rozbila kontrast. */
#viewer-overlay.has-nav #viewer-content { height: auto; flex: 1 1 auto; min-height: 0; padding: 60px 0 6px; }
#viewer-overlay.has-nav #viewer-img-wrap img { max-height: 100%; max-width: 92vw; }

/* PDF vykreslené do prohlížeče pásu.

   POSUN I ZVĚTŠENÍ POČÍTÁ JS a sází je jako `transform` na obal stránek —
   přesně jako u fotky, týmž kódem (`_viewerGesta`). Kontejner proto
   NEROLUJE a prohlížeči se gesto nedává: `touch-action` zůstává `none`
   ze základního pravidla `#viewer-img-wrap`.

   Pět kol se tady zkoušelo nativní rolování — `overflow` v obou osách,
   `overscroll-behavior`, `touch-action: pan-x pan-y`, `width: max-content`
   a řešení přetoku — a pětkrát to na Androidu selhalo. Fotka přitom visí na
   TOMTÉŽ prvku a funguje. Všechny ty vrstvy jsou pryč; zbylo jen zarovnání
   obsahu, o zbytek se stará JS. */
#viewer-img-wrap.pdf-mode {
    overflow: hidden;
    align-items: flex-start;
}
.viewer-pdf-pages {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 4px 0 8px;
}

#viewer-counter {
    position: fixed; top: max(env(safe-area-inset-top, 10px), 10px); left: 50%;
    transform: translateX(-50%); z-index: 5010;
    background: rgba(0,0,0,0.55); color: #fff;
    font-size: 13px; font-weight: 700; font-family: 'IBM Plex Sans', sans-serif;
    padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.viewer-nav-btn {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 5010;
    width: 44px; height: 44px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff;
    font-size: 30px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
}
#viewer-prev { left: 8px; }
#viewer-next { right: 8px; }

#viewer-meta {
    flex: 0 0 auto; width: 100%; box-sizing: border-box;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(0,0,0,0.55);
    flex-direction: column; gap: 6px;
}
.viewer-meta-row { display: flex; gap: 6px; align-items: center; }
#viewer-date {
    flex: 1 1 auto; min-width: 0; cursor: pointer;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.08); color: #fff;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px;
}
#viewer-date::placeholder { color: rgba(255,255,255,0.55); }
.viewer-meta-clear {
    flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
    border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1;
    border: 1px solid rgba(255,120,120,0.7);
    background: rgba(255,255,255,0.08); color: #ff8a8a;
}
#viewer-note {
    width: 100%; box-sizing: border-box; resize: none;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.08); color: #fff;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; line-height: 1.35;
    touch-action: auto;   /* overlay má touch-action:none — bez tohohle nejde do pole ťuknout prstem */
}
#viewer-note::placeholder { color: rgba(255,255,255,0.55); }
/* Smazat fotku (4B) — v panelu, tedy jen v režimu has-nav. Mimo prohlížeč
   z pásu se nikdy neukáže, stejně jako počítadlo a šipky. */
/* Tlačítka výřezu pro PDF ve vieweru fotky (1.9.2026). Stejný tvar jako
   „Smazat" níž, jen neutrální barvy — nejde o destruktivní akci. Ukazují se
   jen u fotky koťátka, řídí je `_viewerRenderNav()`. */
.viewer-meta-crop {
    width: 100%; padding: 9px 12px; margin-bottom: 6px;
    border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12); color: #fff;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 700;
}
.viewer-meta-delete {
    width: 100%; padding: 9px 12px;
    border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255,120,120,0.7);
    background: rgba(198,40,40,0.35); color: #ffdada;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 700;
}

/* ── NÍZKÉ OKNO (typicky telefon na šířku) ──────────────────────────────
   Panel s datem, poznámkou a mazáním má přes 150 px. Na displeji vysokém
   320 px z toho zbyde na fotku nebo dokument skoro nic — a prohlížeč je od
   toho, aby byl vidět OBSAH, ne ovládání. Panel se proto schová; po otočení
   zpátky na výšku je zase tam, kde byl.

   Rozhoduje SKUTEČNÁ VÝŠKA OKNA, ne typ zařízení. Hranice 500 px leží mezi
   oběma světy s rezervou na obě strany: nejvyšší telefon na šířku má kolem
   430 px, nejnižší telefon na výšku 568 px. Na výšku se tedy nezmění nic.

   `!important` je tu nutné, ne z lenosti: `_viewerRenderNav()` zapisuje
   `meta.style.display` inline a vlastní styl by jinak vyhrál nad tímhle
   pravidlem bez ohledu na výšku okna. */
@media (max-height: 500px) {
    #viewer-meta { display: none !important; }
    #viewer-overlay.has-nav #viewer-content { padding: 56px 0 4px; }
}

/* ========================================
   iOS TAB BAR - Spodní navigace
   ======================================== */
.ios-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    /* Dynamická výška: ikona 44 (aktivní ×1.22 ≈ 54) + HTML popisek až 2 řádky + home indicator.
       Musí pojmout 2řádkový popisek (např. „Einstellungen") i u aktivní zvětšené ikony na VŠECH stupních. */
    height: calc(92px + env(safe-area-inset-bottom, 0px));
    /* Jemný fialový nádech: tenká vrstva accentu (#6B3FA0) přes surface — subtilní v obou režimech (světlý i tmavý),
       netluče se s barevnými popisky ani se zvýrazněním aktivní záložky (to jede přes opacitu/scale/stín). */
    background: linear-gradient(rgba(107, 63, 160, 0.1), rgba(107, 63, 160, 0.1)), var(--surface);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 8px;
    /* Padding-bottom = home indicator = ikony se neposunout pod safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Landscape: respektovat boční safe area */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.tab-item {
    flex: 1;
    min-width: 0;
    max-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s ease, transform 0.2s ease, filter 0.2s ease;
    opacity: 0.65;
}

.tab-item.active {
    opacity: 1;
}

.tab-item:active {
    transform: scale(0.88);
    opacity: 0.7;
}

/* Aktivní ikona — scale + stín (dle Evidence loveckých psů) */
.tab-item.active .tab-icon {
    transform: scale(1.22);
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)) brightness(0.85);
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    overflow: visible;
    transition: transform 0.15s ease;
    /* DÁVKA 77, ČÁST 6: kotva pro odznak Kalendáře (.cal-tab-badge, position:absolute).
       Mění se JEN pozicovací kontext, ne rozměr — 44×44 výš zůstává přesné. Ostatních
       pět ikon nemá žádné absolutně pozicované dítě, takže se pro ně nemění vůbec nic. */
    position: relative;
}

.tab-icon svg {
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 11px;
    overflow: hidden;
}

/* DÁVKA 77, ČÁST 6: odznak počtu položek „K vyřízení" na ikoně Kalendáře.
   Barva = var(--danger) — TÁŽ červená, kterou tenhle soubor jinde používá pro
   nadpis „K vyřízení" a pro „po X dnech" u prošlých položek (calendar.js) —
   žádná nová barva. Odznak jen "sedí" v rohu 44×44 ikony (position:absolute
   v position:relative .tab-icon výš); ikona samotná se nemění ani o pixel. */
.cal-tab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    pointer-events: none;
    box-sizing: border-box;
}

/* Nápověda: textový odznak „nové" v rohu dlaždice Nápověda (Nastavení →
   Podpora). Stejný vzor jako .cal-tab-badge výš (position:absolute v rohu),
   jen širší pro text a fialová (var(--accent)) místo červené — dlaždice
   nehlásí počet, ale novinku appky. */
.help-tile-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--surface);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    pointer-events: none;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Spodní lišta: popisek migrován ze SVG do HTML (aby ho chytlo plošné zvětšení při Extra).
   Zalomit, ne oříznout — kvůli delším jazykům (němčina „Einstellungen"). Ikona zůstává v SVG. */
.tab-label {
    display: block;
    font-size: 9px;
    line-height: 1.05;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 1px;
}


#viewer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 5000; backdrop-filter: blur(8px); align-items: center; justify-content: center; flex-direction: column; touch-action: none; overflow: hidden; }
#viewer-overlay.open { display: flex; }
#viewer-content { position: relative; width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; padding: 60px 0 40px; box-sizing: border-box; }
#viewer-img-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#viewer-img-wrap.grabbing { cursor: grabbing; }
#viewer-img-wrap img { max-width: 95vw; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.3); transform-origin: center center; user-select: none; -webkit-user-select: none; pointer-events: none; }
#viewer-content iframe { width: 95vw; height: 90vh; height: 90dvh; border: none; background: white; border-radius: 8px; }
.viewer-close-btn { position: fixed; top: max(env(safe-area-inset-top, 10px), 10px); right: 15px; background: rgba(180,0,0,0.85); color: white; border: none; padding: 12px 22px; border-radius: 10px; cursor: pointer; font-weight: bold; font-family: 'IBM Plex Sans', sans-serif; z-index: 5010; box-shadow: 0 4px 10px rgba(0,0,0,0.4); font-size: 15px; min-height: 48px; min-width: 120px; display: flex; align-items: center; justify-content: center; }
.viewer-share-btn { position: fixed; top: max(env(safe-area-inset-top, 10px), 10px); left: 15px; background: rgba(107, 63, 160, 0.85); color: white; border: none; padding: 12px 22px; border-radius: 10px; cursor: pointer; font-weight: bold; font-family: 'IBM Plex Sans', sans-serif; z-index: 5010; box-shadow: 0 4px 10px rgba(0,0,0,0.4); font-size: 15px; min-height: 48px; min-width: 120px; display: flex; align-items: center; justify-content: center; }
#export-preview { line-height: 1.5; color: #000; background: #fff; padding: 40px; border: 1px solid #ddd; box-sizing: border-box; max-width: 100%; }
.preview-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--accent); padding-bottom: 15px; margin-bottom: 20px; }
.preview-section { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.share-card { max-width: 500px; margin: 0 auto; }
.share-buttons { display: flex; gap: 10px; margin: 20px 0; justify-content: center; flex-wrap: wrap; }
@media print {
    /* Odkrývací dvojice `body * { visibility: hidden }` +
       `#export-preview { visibility: visible }` tu stávala od začátku a
       1.9.2026 se zrušila — proč, vysvětluje komentář u `#print-root` níž.
       Historie pod tímhle řádkem se nechává jako doklad, co všechno se
       cestou odkrývání muselo obcházet. */
    /* proklik #11 pokračování, 2026-08-23, nález 2: `.modal` má `transform`
       (translate+translateZ, o pár řádků výš) — u `position:fixed` potomka
       to podle specifikace CSS vytváří NOVÝ "containing block", takže
       `#export-preview` níž zůstávalo i přes vlastní `position:fixed`
       uvězněné uvnitř `.modal` (`max-height:85vh; overflow-y:auto`), místo
       aby se ukotvilo k celé stránce. Změřeno přímo v Chromu (`getBoundingClientRect`):
       PŘED touhle opravou vycházelo `#export-preview` na souřadnicích
       `.modal` (např. top 403,5 px místo požadovaných 0), PO zrušení
       transformu/ořezu na `top:0; left:0`, přes celou šířku okna — přesně
       jak `left:0; top:0` níž zamýšlí. Bez týhle opravy tisk/PDF ukázal jen
       horní kousek (hlavičku), zbytek dat kotěte byl za hranicí 85vh a na
       papír se nikdy nedostal (btn_email ve stejném okně chybu neměl —
       čte `#export-preview` přes `.innerText`, ne přes vykreslení stránky,
       proto fungoval). Zúženo na `#export-overlay`, ostatní `.modal` v appce
       se v tisku samy neukazují (schované přes `body * { visibility:hidden }`
       výš), takže je není třeba měnit.

       REGRESE PO TÉHLE OPRAVĚ (2026-08-24): `.modal` má kromě `transform`
       i `will-change: transform, opacity` (o pár řádků výš, mimo tenhle
       blok) — a `will-change` s hodnotou `transform` vytváří NOVÝ
       containing block pro `position:fixed` potomka úplně stejně jako
       samotný `transform`, i beze změny transformu. Zrušení jen
       `transform` tedy past odstranilo jen z poloviny — `#export-preview`
       zůstávalo „ukotvené" k `.modal` (změřeno: top 451 px / left 512 px
       místo požadovaných 0/0), a protože `.modal` i `#export-overlay`
       jsou `position:fixed` (opakují se v tisku Chromu NA KAŽDÉ STRÁNCE
       — to je specifikované chování `position:fixed` ve stránkovaných
       médiích, ne chyba appky), dlouhý obsah (Finance s víc řádky) se
       vešel na dvě fyzické strany a CELÁ karta se vytiskla dvakrát.
       Oprava: `will-change: auto` navíc k `transform: none`, a hlavně
       CELÝ řetězec (`#export-overlay`, `.modal`, `#export-preview`)
       přepnut v tisku z `position:fixed` na jiné hodnoty — nic v něm
       tedy `position:fixed` není a nic se neopakuje na každé stránce;
       dlouhý obsah teče normálně přes tolik stran, kolik potřebuje,
       JEDNOU.

       `#export-overlay` je `position:absolute` (ne `static`): appka
       před ním v DOM má spoustu vlastního obsahu, které `body *
       {visibility:hidden}` jen SCHOVÁ, ale nevyjme z toku stránky —
       kdyby `#export-overlay` zůstal ve „static" toku, posunul by ho
       ten skrytý obsah dolů (změřeno: `top` vyšlo přes 900 px místo 0,
       tedy prázdné místo přesně jako u původního hlášeného nálezu).
       `position:absolute` ho naopak z toku VYJME (na rozdíl od `fixed`
       ale BEZ opakování na každé stránce) a `top:0;left:0;width:100%`
       ho ukotví na začátek první strany přes celou šířku. `.modal` a
       `#export-preview` uvnitř už zůstávají `static` — nemají proč být
       cokoliv jiného, když je má kam ukotvit rodič.

       Šířka a odsazení (`max-width`, `padding` na `.modal` a
       `.modal-body`) se musí zrušit ručně — bez `position:fixed;
       width:100%` už karta nemá jak sama přeskočit odsazení modalu na
       šířku celé stránky.

       REGRESE Č. 2 PO TÉHLE OPRAVĚ (2026-08-24, druhé kolo): kartička
       se přestala zdvojovat, ale tiskový dialog pořád hlásil 2 listy —
       na první straně kartička, na druhé prázdno. Příčina: základní
       (mimo tenhle blok) pravidlo `.overlay { inset: 0 }` nastavuje
       VŠECHNY čtyři strany (top/right/bottom/left: 0), ale výš jsem
       přepsal jen `top`/`left`. `right: 0` a `bottom: 0` tak zůstaly
       v platnosti i po přepnutí na `position:absolute` — a `top:0` +
       `bottom:0` bez výslovné `height` NATÁHNE box `#export-overlay`
       na výšku jeho "containing blocku" (změřeno: 887 px = výška
       okna/stránky, úplně bez ohledu na to, že skutečný obsah karty
       měřil jen 720 px). Těch 167 px navíc je neviditelný, ale pořád
       zabírá místo na papíře — a stačilo to přetéct přes hranici
       jedné fyzické strany, proto druhý, skoro prázdný list. Oprava:
       `right: auto` a `bottom: auto` (aby `inset:0` už na `#export-overlay`
       nepůsobilo) plus výslovné `height: auto` (výška ať se řídí jen
       obsahem, ne oknem). Ověřeno měřením na živém draftu: bez opravy
       `#export-overlay` = 887 px (rovná se výšce okna); s opravou
       720,15625 px (rovná se skutečné výšce obsahu karty).

       REGRESE Č. 3 (2026-08-24, třetí kolo, reálný tiskový náhled z
       Chromu): pořád 2 listy — strana 1 kartička správně, strana 2
       úplně prázdná. Příčina NEBYLA v `#export-overlay` samotném (ten
       už měl správnou výšku), ale v jeho SOUROZENCÍCH pod `<body>`.
       `body * { visibility: hidden }` výš schová jen INKOUST (nic
       nekreslí), ale nezruší LAYOUT — `<body>` má kromě
       `#export-overlay` dalších ~60 přímých potomků (hlavní obal
       appky `.app` s celým UI, `.ios-tab-bar`, banner zkušební verze,
       tlačítko nahoru, ostatní modaly jako `#viewer-overlay`,
       `#paywall-overlay`, `#pedigree-overlay`…) a ty i schované
       (`visibility:hidden`) dál zabírají svou plnou výšku v toku
       stránky. Změřeno na živém draftu (Caesar): `document.body.
       scrollHeight` = 3975 px (samotný `.app` obal 3837 px), zatímco
       jedna tisková strana A4 má na výšku ~1123 px (~1046 px po
       odečtení běžných okrajů) — proto druhá, prázdná strana (a při
       delším obsahu appky klidně i další).
       Oprava: `body > *:not(#export-overlay) { display: none }` —
       na rozdíl od `visibility:hidden` `display:none` VYJME box z
       toku úplně, takže nezabírá žádnou výšku. Funguje bezpečně,
       protože `#export-overlay` je přímý potomek `<body>` (ne
       potomek `.app` ani žádného jiného sourozence), takže se
       nesmaže spolu s nimi. Ověřeno měřením na živém draftu (Caesar):
       bez týhle opravy `body.scrollHeight` = 3975 px, s ní 943 px —
       pod hranicí jedné A4 strany i s okraji (~1046 px), takže tisk
       vygeneruje přesně jeden list. */
    /* PŘEPSÁNO 1.9.2026 (Petrovo hlášení: „Vytisknout / PDF" v Exportu
       (náhled) dalo bílé stránky, i když okno na obrazovce obsah mělo).

       Pravidla výš i celá historie pod nimi řešily jednu a tutéž věc:
       jak v tisku ODKRÝT náhled, který leží hluboko v modalu. Každá
       oprava sundala jednu překážku (transform, will-change, position,
       max-height), ale řetězec zůstal — náhled pořád visel pod třemi
       předky s `visibility: hidden` (`.modal-body` → `.modal` →
       `#export-overlay`), pod `overflow: auto` na `.modal-body`, které
       se nikdy nerušilo, a pod `position: absolute` na overlayi.

       DVA DOLOŽENÉ NÁSLEDKY. Za prvé: `#export-overlay` dostával
       `display: block !important` BEZ ohledu na třídu `.open` — změřeno
       v prohlížeči, že i po odebrání `.open` vyšel `display: block`.
       Tisk odkudkoli z appky (⌘P, tiskové tlačítko v jiném okně) proto
       schoval `body > *:not(#export-overlay)` a ukázal PRÁZDNÝ náhled,
       tedy bílé stránky. Za druhé: odkrývání přes `visibility` je ve
       WebKitu na vrstvách křehké, takže co v Chromu projde, v Safari
       vyjde bílé — a Petr tiskne v Safari.

       Appka proto odkrývání opustila. `_tiskExportu()` (app.js) obsah
       náhledu před tiskem ZKOPÍRUJE do `#print-root` — prázdného
       kontejneru přímo pod `<body>`, tedy mimo modal, mimo
       `visibility: hidden` i mimo `overflow` — a po tisku ho zahodí.
       Tisknout se tak nemá co odkrývat: na stránce zbude jediná věc,
       a je to rovnou ta správná. Míň pravidel, žádná vrstva navíc,
       a jako vedlejší účinek i míň stran: netiskne se rám modalu
       ani jeho odsazení, jen samotný obsah. */
    /* Pravidla platí JEN během tisku náhledu — `_tiskExportu()` na tu dobu
       nasadí `<body class="tisk-export">` a hned po tisku ji sundá. Dřív se
       schovávalo všechno kromě `#export-overlay` NATVRDO, takže ⌘P kdekoli
       jinde v appce (nebo tiskové tlačítko v jiném okně) vytisklo prázdné
       stránky: náhled byl prázdný a zbytek appky schovaný. Bez té třídy se
       teď netiskne nic zvláštního — appka se vytiskne tak, jak vypadá. */
    /* PRÁZDNÁ DRUHÁ STRÁNKA (1.9.2026, Petrovo hlášení po předchozí opravě):
       obsah se vešel na jednu stranu, ale tiskla se ještě jedna bílá. Změřeno
       v prohlížeči: `<body>` je vysoké jako celý viewport (`height` i
       `min-height` = 887 px při okně 887 px) a NAVÍC má
       `padding-bottom: calc(102px + safe-area + 20px)` = 122 px kvůli spodní
       liště appky. Při tisku se výška viewportu rovná výšce stránky, takže
       body vyjde o těch ~122 px VYŠŠÍ než papír a přeteče — a přetečení je
       prázdné, protože obsah končí mnohem výš (naměřeno 514 px). Odsazení pro
       lištu ani výška na celou obrazovku v tisku nedávají smysl, tak se
       obojí ruší; stránka pak končí tam, kde končí obsah. */
    html.tisk-export, body.tisk-export { height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
    body.tisk-export > *:not(#print-root) { display: none !important; }
    body.tisk-export #print-root { display: block !important; visibility: visible !important; position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    body.tisk-export #print-root * { visibility: visible !important; }
    .no-print { display: none !important; }
}

/* Tiskový kontejner je na obrazovce vždycky prázdný a schovaný — plní ho
   `_tiskExportu()` až v okamžiku tisku a hned zase vyprázdní. */
#print-root { display: none; }
#crop-overlay { z-index: 3000; background: rgba(0,0,0,0.9); }
.crop-box { background: var(--surface); padding: 20px; border-radius: 20px; width: 320px; text-align: center; }
.crop-canvas-wrap { position: relative; width: 280px; height: 280px; margin: 10px auto; background: #000; border-radius: 12px; overflow: hidden; cursor: move; touch-action: none; border: 2px solid var(--accent); }
#crop-canvas { position: absolute; top: 0; left: 0; }
/* 1.9.2026 (výřez pro PDF — přeneseno z appky Psi, kde vzniklo 31.8.2026):
   appka má vlastní rozměr 280×210 (4:3, stejná šířka jako appky .crop-box
   vnitřní plocha) — appka nesdílí pevných 280×280 s avatarovým výřezem výš.
   Bez tohohle pravidla je obal 280×280 proti canvasu 280×210, takže pod
   plátnem zbývá 70 px černé mezery. */
#pdf-crop-canvas-container.crop-canvas-wrap { width: 280px; height: 210px; }
#pdf-crop-canvas { position: absolute; top: 0; left: 0; }
/* OPRAVA 1.9.2026 (přeneseno z appky Psi, kde vzniklo 31.8.2026 po Petrově
   hlášení, že tlačítko „Hotovo" v overlayi výřezu nereagovalo na klik):
   appka #pdf-crop-overlay dědila obecnou třídu .overlay se z-indexem jen
   200. Na rozdíl od avatarového #crop-overlay (otevírá se z karty kočky/
   koťátka, ne zevnitř prohlížeče příloh) appka tenhle overlay otevírá
   tlačítkem ZEVNITŘ #viewer-overlay, který má z-index 5000 (a jeho vlastní
   ovládací prvky 5010) — appka #pdf-crop-overlay tak vizuálně i klikací
   plochou ležel POD otevřeným prohlížečem, takže kliky na Hotovo/Zrušit
   appka chytal prohlížeč vespod, ne dialog. Appka teď dostává vlastní
   z-index nad 5010, ale pod appky toast notifikacemi (10000), ať appka
   zůstane viditelná i přes ně. */
#pdf-crop-overlay { z-index: 5500; }
#repro-fields { background: transparent; border-radius: 8px; padding: 0; margin-bottom: 12px; }
#d-img-preview, #p-img-preview {
    width: 70px !important;
    height: 70px !important;
}
input[type="date"], input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    padding: 10px;
    text-align: left;
    font-size: 14px;
}

/* Date Picker */
.dp-wrap {
    position: relative;
    height: 176px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border2);
    background: var(--bg);
}
/* Horni a dolni fade efekt */
.dp-wrap::before, .dp-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 55px;
    z-index: 2;
    pointer-events: none;
}
.dp-wrap::before { top: 0; background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%); }
.dp-wrap::after  { bottom: 0; background: linear-gradient(to top, var(--bg) 0%, transparent 100%); }
/* Zvyrazneni vybrane polozky */
.dp-selector {
    position: absolute;
    top: 50%;
    left: 4px; right: 4px;
    height: 40px;
    margin-top: -20px;
    background: rgba(107, 63, 160, 0.08);
    border: 1px solid var(--border);
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
}
.dp-scroll {
    height: 176px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;
    position: relative;
    z-index: 0;
}
.dp-scroll::-webkit-scrollbar { display: none; }

/* ── ROLOVÁNÍ SE Z OKNA NEPŘENÁŠÍ NA STRÁNKU ────────────────────────────
   `.modal` má `overscroll-behavior: contain` ve svém pravidle výš, ale okna
   skládaná v JavaScriptu ho nemají: rolovací prvek je u nich anonymní
   `<div style="flex:1;overflow-y:auto">` bez třídy, kterou by šlo vybrat.
   Přeměřeno 17. 8. 2026: takových prvků je v projektu **50** a ani jeden
   nebyl pod `.modal` ani `.modal-sticky`.

   Padesát inline stylů se neopravuje po jednom — padesát prvních a jeden
   zapomenutý padesátý první. Jedno pravidlo přes atribut `style` pokryje
   i okna, která ještě nevznikla.

   `overscroll-behavior` na prvku, který neroluje, nedělá nic, takže je to
   bezpečné i tam, kde se selektor náhodou chytne. Čtyři varianty zápisu
   proto, že se v projektu píše obojí — s mezerou i bez, `overflow`
   i `overflow-y`. */
[style*="overflow-y:auto"], [style*="overflow-y: auto"],
[style*="overflow:auto"],   [style*="overflow: auto"],
[style*="overflow-y:scroll"], [style*="overflow-y: scroll"] {
    overscroll-behavior: contain;
}
.dp-spacer { height: 68px; flex-shrink: 0; }
.dp-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--text2);
    scroll-snap-align: center;
    cursor: pointer;
    transition: color 0.15s, font-size 0.15s;
    padding: 0 4px;
}
.dp-item.selected {
    color: var(--accent);
    font-weight: 700;
    font-size: 17px;
    background: var(--accent-light);
    border-radius: 8px;
}


/* Legal links hover effect */
#tab-nastaveni a:hover {
    color: var(--accent);
}

/* ==================== NOTES ==================== */
/* ==================== LITTER CARDS ==================== */
.litter-card {
    border: 2px solid #e8a0b8;
    box-shadow: 0 0 0 2px rgba(232, 160, 184, 0.15), 0 4px 12px rgba(0,0,0,0.08);
    border-radius: var(--radius-lg);
}

/* ==================== ROZBALOVACÍ LIŠTA ŠTĚŇAT NA KARTĚ VRHU ==================== */
.pups-toggle-bar {
    margin: 0 0 12px 0;
    padding: 8px 12px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--accent-light, #f7e9ec);
    border: 1.5px solid var(--accent, #962d43);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.pups-toggle-bar:hover {
    background: rgba(150, 45, 67, 0.15);
    border-color: var(--accent, #962d43);
}
.pups-toggle-bar:active {
    opacity: 0.9;
}
.pups-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.pups-count-badge {
    background: var(--accent);
    color: white;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.pups-toggle-title-wrap {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.pups-detail-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #962d43);
    white-space: nowrap;
}
.pups-sex-summary {
    font-size: 12px;
    color: var(--accent, #962d43);
    font-weight: 500;
    opacity: 0.85;
}
.pups-toggle-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}
.pups-toggle-chevron {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(150, 45, 67, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: var(--accent);
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) .pups-toggle-bar {
        background: rgba(150, 45, 67, 0.18);
        border-color: rgba(150, 45, 67, 0.45);
    }
    :root:not(.light) .pups-toggle-bar:hover {
        background: rgba(150, 45, 67, 0.28);
        border-color: var(--accent);
    }
    :root:not(.light) .pups-detail-text {
        color: #e0f2fe;
    }
    :root:not(.light) .pups-sex-summary {
        color: #a7f3d0;
    }
    :root:not(.light) .pups-toggle-chevron {
        background: rgba(150, 45, 67, 0.25);
        color: #a7f3d0;
    }
}
html.dark .pups-toggle-bar {
    background: rgba(150, 45, 67, 0.18);
    border-color: rgba(150, 45, 67, 0.45);
}
html.dark .pups-toggle-bar:hover {
    background: rgba(150, 45, 67, 0.28);
    border-color: var(--accent);
}
html.dark .pups-detail-text {
    color: #e0f2fe;
}
html.dark .pups-sex-summary {
    color: #a7f3d0;
}
html.dark .pups-toggle-chevron {
    background: rgba(150, 45, 67, 0.25);
    color: #a7f3d0;
}

/* ==================== ROZBALOVACÍ LIŠTA KOŤAT NA KARTĚ KOČKY ==================== */
.cat-pups-toggle-bar {
    margin: 8px 12px 12px;
    padding: 8px 12px;
    min-height: 44px;
    box-sizing: border-box;
    background: #F0F9FF;
    border: 1.5px solid #BAE6FD;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.cat-pups-toggle-bar:hover {
    background: #E0F2FE;
    border-color: #7DD3FC;
}
.cat-pups-toggle-bar:active {
    opacity: 0.9;
}
.cat-pups-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.cat-pups-count-badge {
    background: #0284c7;
    color: white;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cat-pups-title-wrap {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.cat-pups-detail-text {
    font-size: 13px;
    font-weight: 700;
    color: #0369A1;
    white-space: nowrap;
}
.cat-pups-sex-summary {
    font-size: 12px;
    color: #0284c7;
    font-weight: 500;
}
.cat-pups-toggle-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0284c7;
    white-space: nowrap;
    flex-shrink: 0;
}
.cat-pups-toggle-chevron {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E0F2FE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: #0284c7;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) .cat-pups-toggle-bar {
        background: rgba(14, 165, 233, 0.12);
        border-color: rgba(14, 165, 233, 0.35);
    }
    :root:not(.light) .cat-pups-toggle-bar:hover {
        background: rgba(14, 165, 233, 0.2);
        border-color: #38bdf8;
    }
    :root:not(.light) .cat-pups-detail-text {
        color: #e0f2fe;
    }
    :root:not(.light) .cat-pups-sex-summary {
        color: #7dd3fc;
    }
    :root:not(.light) .cat-pups-toggle-right {
        color: #7dd3fc;
    }
    :root:not(.light) .cat-pups-toggle-chevron {
        background: rgba(14, 165, 233, 0.25);
        color: #e0f2fe;
    }
}
html.dark .cat-pups-toggle-bar {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.35);
}
html.dark .cat-pups-toggle-bar:hover {
    background: rgba(14, 165, 233, 0.2);
    border-color: #38bdf8;
}
html.dark .cat-pups-detail-text {
    color: #e0f2fe;
}
html.dark .cat-pups-sex-summary {
    color: #7dd3fc;
}
html.dark .cat-pups-toggle-right {
    color: #7dd3fc;
}
html.dark .cat-pups-toggle-chevron {
    background: rgba(14, 165, 233, 0.25);
    color: #e0f2fe;
}

/* ==================== FINANCE CARDS ==================== */
.finance-item {
    border: 2px solid #6B3FA0;
    box-shadow: 0 0 0 2px rgba(107, 63, 160, 0.1), 0 4px 12px rgba(0,0,0,0.06);
    border-radius: var(--radius);
}

/* ==================== NOTES ==================== */
.note-item {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    background: var(--bg);
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.2s ease;
}
.note-item:active {
    transform: scale(0.98);
}
.note-item:hover {
    border-color: var(--accent);
}

/* ==================== TOAST NOTIFICATIONS ==================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    pointer-events: all;
    animation: toastSlideIn 0.3s ease-out;
    border-left: 4px solid var(--accent);
}

.toast.success {
    border-left-color: #4caf50;
}

.toast.error {
    border-left-color: #f44336;
}

.toast.warning {
    border-left-color: #ff9800;
}

.toast.info {
    border-left-color: #2196f3;
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
    min-width: 0;
}


.toast-message {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text3);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    background: var(--surface);
}

@keyframes toastSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.removing {
    animation: toastSlideOut 0.3s ease-in forwards;
}

/* Undo toast */
.toast.undo {
    border-left-color: #9c27b0;
    flex-wrap: wrap;
    padding-bottom: 10px;
}
.toast-undo-btn {
    background: var(--accent);
    color: var(--tile-ink-on-solid);
    border: none;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.toast-undo-btn:active { opacity: 0.75; }
.toast-progress {
    width: 100%;
    height: 3px;
    background: var(--surface2);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.toast-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: none;
}

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 80px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* ==================== SKELETON LOADING ==================== */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: 6px;
}
.skeleton-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    overflow: hidden;
}
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.skeleton-avatar {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
}
.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 6px;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.long { width: 85%; }
.skeleton-line.full { width: 100%; }
.skeleton-badge {
    width: 60px;
    height: 20px;
    border-radius: 999px;
}

/* ==================== EMPTY STATES ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px 40px;
    color: var(--text2);
}

/* ==================== ONBOARDING 2.0 ==================== */
.onboarding-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}
.onboarding-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border2);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.onboarding-dot.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
}
@keyframes onboardFadeIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.onboarding-step {
    animation: onboardFadeIn 0.25s ease;
}
.onboarding-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0;
}
.onboarding-feature-item {
    background: var(--surface2);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.onboarding-feature-icon {
    font-size: 26px;
    margin-bottom: 2px;
}
.onboarding-notif-demo {
    background: var(--surface);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 14px 0;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.onboarding-wow-box {
    background: var(--accent-light);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

/* Obecný „select se šipkou" — sdílený pro finance (Období/Řazení, js/features/finance.js)
   i pro filtr roku na Kočkách (#yearFilter). Necháváme NATIVNÍ šipku (žádné appearance:none),
   text zleva, prohlížeč sám rezervuje místo vpravo pro šipku. flex:1 se uplatní jen ve flex
   řádku financí; v gridu (Kočky) je inertní a select vyplní buňku sloupce. */
.app-select {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}
.app-select:hover { border-color: var(--accent); }
/* #yearFilter ve čtveřici filtrů na Kočkách sjednotit se sousedními dlaždicemi (.filter-btn):
   zaoblené rohy, centrovaný text, vlastní šipka. appearance:none kvůli Safari/iOS, které
   nativní select jinak nezaobluje ani necentruje. Základní .app-select (finance) se NEMĚNÍ.
   DÁVKA 30 — ŠIPKA SI MUSÍ ŘÍCT O MÍSTO PADDINGEM. Šipka je pozadí
   (`right 5px`, šířka 9 px), takže zabírá pravých 14 px dlaždice, ale do
   layoutu nezasahuje. Se souměrným paddingem 1 px by byl text centrovaný přes
   celou šířku a nejdelší popisek („Jahre" / „Years" = 27,0 px při 10 px, tedy
   40,5 px při Extra) by končil na 53,3 px, zatímco šipka začíná na 52,0 px —
   překryv 1,3 px. Proto je padding vpravo 15 px: text se centruje do 46 px
   nalevo od šipky a nejdelší popisek končí na 46,8 px, tedy 5,2 px před ní. */
.filters-row-4col .app-select {
    -webkit-appearance: none;
    appearance: none;
    font-size: 10px;
    text-align: center;
    text-align-last: center;
    border-radius: var(--radius);
    padding: 10px 15px 10px 1px;
    box-sizing: border-box;
    height: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232d6a4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 9px;
}

/* ── proklik oprava 2026-08-25: „Roky" vedle „Přijato" na Financích ───────
   BALÍK 12 přesouvá #yearFilter do #stats na Financích (viz komentář u
   `renderCatsTab()` v app.js), ale mimo `.filters-row-4col` a
   `#litter-toolbar-left` dostává select jen ZÁKLADNÍ `.app-select` — ten
   na rozdíl od těch dvou kontextů nemá appearance:none. Měřeno na draftu
   (getComputedStyle): border-radius (10px) i výška (80px) vyjdou u
   `#yearFilter` a sousední dlaždice `.stat-finance` STEJNĚ, přesto se rohy
   vizuálně lišily — nativní chrome selectu (appearance:auto) se nezaobluje
   stejně jako div, i když CSS border-radius je shodný. Řešení stejné jako
   u dvou existujících kontextů výš: appearance:none + vlastní šipka.
   Scoped na `#stats .app-select`, týká se JEN Financí — #yearFilter na
   Kočkách/Vrhách má svoje vlastní pravidla výš a tady se nemění.
   Pravý padding zvětšen jen kvůli místu pro šipku (stejný důvod jako
   „ŠIPKA SI MUSÍ ŘÍCT O MÍSTO PADDINGEM" u `.filters-row-4col .app-select`
   výš) — jinak by přesahovala přes delší překlady („Jahre"/„Years").
   Border-radius, výška, barvy a levý padding (12px) se neuvádí znovu,
   protože už sedí — mění se jen appearance a místo pro šipku. */
#stats .app-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 10px 28px 10px 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232d6a4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 9px;
}

/* ── proklik 2026-08-24, ČÁST 1: „Roky" přesunuté do řady Vrhů ────────────
   `renderLittersTab()` (app.js) přesouvá `#yearFilter` z `.filters-row-4col`
   (kde zůstává jen na Kočkách) do vlastní řady nad seznamem vrhů, jako třetí
   pilulku vedle „Nejnovější"/„Rodič" — `#litter-toolbar-left` je jejich
   společný obal. Mimo `.filters-row-4col` na select nedosáhne ŽÁDNÉ z pravidel
   výš (jsou na tu třídu schválně navázaná), takže dostává vlastní: stejný
   padding/výška/zaoblení jako sousední tlačítka „Nejnovější"/„Rodič"
   (`padding:7px …`, `border-radius:var(--radius)`, `font-size:12px`), jen
   vpravo o pár px víc místa pro šipku — `flex:none` ruší `.app-select`
   základ (`flex:1`), který by jinak select natáhl přes celou zbylou šířku
   řádku. Barva rámečku (fialová) i ikona šipky zůstávají stejné jako dřív.

   DOPLNĚNO PO VIZUÁLNÍM OVĚŘENÍ NA DRAFTU: select se renderoval 44px vysoký
   místo 32px jako sousední tlačítka (naměřeno getBoundingClientRect). Příčina:
   obecné pravidlo `.app-select { min-height:44px }` (dotykový cíl, viz níže
   v souboru) je sice nižší specificity, ale tahle sada NIKDY min-height
   nepřepsala — `padding`/`font-size` řídí výšku jen do chvíle, než na scénu
   nastoupí min-height, ten pak vždy vyhraje. Řešení: `min-height:0` +
   `height:auto`, ať výšku určí čistě padding+line-height stejně jako u
   tlačítek vedle. */
#litter-toolbar-left .app-select {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    background: var(--surface2, var(--surface));
    border: 2px solid #6B3FA0;
    color: var(--text);
    border-radius: var(--radius);
    padding: 7px 22px 7px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    font-family: 'IBM Plex Sans', sans-serif;
    text-align: center;
    text-align-last: center;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B3FA0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 9px;
}

/* ── BALÍK 12: PULZUJÍCÍ TEČKA U „ROKY", KDYŽ JE VYBRANÝ KONKRÉTNÍ ROK ────
   #yearFilter je nativní <select>, kam se nedá vložit vlastní HTML (tečka
   by se ukázala jen jako text uvnitř <option>, ne jako vizuální prvek) —
   a tenhle konkrétní select má navíc velmi přesně dopočítané odsazení
   (viz komentář „ŠIPKA SI MUSÍ ŘÍCT O MÍSTO PADDINGEM" o pár řádků výš):
   levý padding je schválně jen 1 px, protože se s ním počítá vycentrování
   textu proti šipce vpravo. Sahat na tenhle padding kvůli tečce by tu
   matematiku rozbilo.
   Řešení: `#yearFilter-dot` je SOUROZENEC selectu (ne obal kolem něj —
   obal by přidal pátý přímý potomek do `.filters-row-4col` a rozbil
   `tests/integrity-tests.js`, který v HTML počítá regexem přesně čtyři
   <button|select> do prvního </div> uvnitř `.filters filters-row-4col`).
   `position:relative` proto přidáváme přímo na `.filters-row-4col` a
   tečka je nad selectem absolutně umístěná, u levého okraje dlaždice —
   `pointer-events:none`, aby nikdy nestála v cestě kliknutí. Vlastní
   select ani jeho padding/centrování textu se tímhle nemění vůbec.
   Zobrazení/skrytí řídí `updateYearFilterSelect()` v app.js. */
@keyframes yfPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50%      { opacity: .45; transform: translateY(-50%) scale(1.3); }
}
.filters-row-4col { position: relative; }
.yf-pulse-dot {
    /* `.filters-row-4col > *` o kus výš nastavuje všem přímým potomkům
       `min-height:44px` (dlaždice/tlačítka). Tečka je teď taky přímý
       potomek (sourozenec selectu), takže by ji to pravidlo natáhlo na
       44px vysoký/široký neviditelný box kolem 7px tečky — min-height a
       height jsou different vlastnosti, jedna druhou přebitím specificity
       nezruší. Proto tu min-height/min-width výslovně vracíme na 0. */
    min-height: 0;
    min-width: 0;
    position: absolute;
    /* 2026-08-23: `left:5px` sedělo na okraji CELÉHO řádku filtrů, ne u
       čísla roku — dlaždice #yearFilter je sice první ve čtveřici (takže
       její levý okraj = levý okraj řádku), ale text uvnitř NENÍ zarovnaný
       doleva. `.filters-row-4col .app-select` má text-align:center s
       asymetrickým paddingem 1px/15px (kvůli šipce vpravo, viz komentář
       „ŠIPKA SI MUSÍ ŘÍCT O MÍSTO PADDINGEM" výš) — střed textu proto leží
       v (colWidth-16px)/2 + 1px od levého okraje dlaždice, ne v jejím
       středu. Dosazením šířky sloupce colWidth = (100% - 3×7px gap)/4 do
       vzorce a odečtením poloviny šířky čtyřmístného roku (~11px při
       10px písmu IBM Plex Sans) a 4px mezery k tečce vyjde:
       left = 12.5% − 31.6px — na rozdíl od pevných 5px se škáluje se
       šířkou řádku, takže tečka zůstává těsně u čísla i při jiné šířce
       obrazovky (ověřeno dopočtem pro 360/390/430 px, ne živým měřením
       v prohlížeči — ten tu k dispozici není). */
    left: calc(12.5% - 31.6px);
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: yfPulse 1.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* ==================== ADDED DATE BADGE ==================== */
.cat-added-date, .dog-added-date {
    font-size: 10px;
    color: var(--text3);
    margin-top: 2px;
    font-weight: 400;
}

/* Currency dropdown */
.cur-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}
.cur-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s;
}
.cur-dropdown-btn:active { border-color: var(--accent); }
.cur-dropdown-arrow {
    font-size: 12px;
    color: var(--text2);
    transition: transform 0.2s;
}
.cur-dropdown.open .cur-dropdown-arrow { transform: rotate(180deg); }
.cur-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 120px;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 10px;
    overflow: hidden;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.cur-dropdown.open .cur-dropdown-list { display: block; }
.cur-dropdown-list button {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cur-dropdown-list button:last-child { border-bottom: none; }
.cur-dropdown-list button:active { background: var(--accent-light); }
.cur-dropdown-list button.active {
    color: var(--accent);
    font-weight: 700;
    background: var(--accent-light);
}

/* Close button — blue variant */
.btn-close {
    background: #dbeafe;
    color: #185FA5;
    border-color: #93c5fd;
}
.btn-close:active {
    background: #bfdbfe;
}

/* Danger button — red, for delete actions */
.btn-danger {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}
.btn-danger:active {
    background: #fecaca;
}

/* Purchase agreement button — amber/yellow */
/* Vyplněná smlouva — značka se přidává přes ::after, ne do textu tlačítka.
   setLang() přepisuje innerText podle data-lang, takže značka zapsaná do
   textu by po přepnutí jazyka zmizela (přesně nemoc B13 u trial banneru).
   Pseudoprvek do innerText nepatří, takže přepnutí přežije.
   Fajfka není nový výtvarný prvek — aplikace ji pro „hotovo" už používá
   ve zdravotním plánu, u progesteronu i na paywallu. */
.btn-doc-filled::after {
    content: ' ✓';
    color: #2e7d32;
    font-weight: 700;
}
.btn-pa {
    background: #fef3c7;
    color: #854F0B;
    border-color: #fcd34d;
}
.btn-pa:active {
    background: #fde68a;
}

/* Reservation agreement button — blue */
.btn-ra {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}
.btn-ra:active {
    background: #bfdbfe;
}

/* ── Dynamically generated classes (app.js) ─────────────────────────── */

/* Payment method badges */
.class_cash     { background:#dcfce7; color:#15803d; border:1px solid #86efac; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600; }
.class_transfer { background:#dbeafe; color:#1d4ed8; border:1px solid #93c5fd; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600; }
.class_other    { background:#fef3c7; color:#b45309; border:1px solid #fcd34d; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600; }

/* Finance items */
.finance-item-male   { background:#eff6ff; border:1px solid #93c5fd; }
.finance-item-female { background:#fdf2f8; border:1px solid #f9a8d4; }

/* Expense total bar */
.expense-total-bar { background:#fce4ec; border:1.5px solid #f48fb1; border-radius:12px; min-height:42px; padding:8px 14px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; box-sizing:border-box; color:#c62828; }
.expense-total-bar span { color:#c62828; }

/* Income total bar */
.income-total-bar { background:var(--accent-light, #f7e9ec); border:1.5px solid var(--accent, #962d43); border-radius:12px; min-height:42px; padding:8px 14px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; box-sizing:border-box; }
.income-total-bar span { color:var(--accent, #962d43); }

/* Share pup button */
.btn-share-pup { background:#e3f2fd; border:1px solid #90caf9; color:#1565c0; border-radius:8px; cursor:pointer; }

/* Inbreeding calculator */
.ni-overview          { background:#f0f7ff; border-top:1px solid var(--border); }
.ni-overview.ni-risk  { background:#fff5f5; }
.ni-overview.ni-ok    { background:#f1f8e9; }
.ni-warn-box { background:#ffebee; border-top:1px solid #ef9a9a; }
.ni-safe-box { background:#f1f8e9; border-top:1px solid #a5d6a7; }

/* ── Dark mode overrides for dynamic classes ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  .class_cash     { background:#0d2a15; color:#6fcf97; border-color:#1a4a25; }
  .class_transfer { background:#0f2035; color:#7ab0e0; border-color:#1e3a55; }
  .class_other    { background:#2a1e05; color:#d4a843; border-color:#5a4010; }

  .finance-item-male   { background:#0f1e2d; border-color:#1e3a55; }
  .finance-item-female { background:#20111a; border-color:#4a2035; }

  .expense-total-bar { background:#2a0f0f; border-color:#5a2020; color:#f08080; }
  .expense-total-bar span { color:#f08080; }

  .income-total-bar { background:rgba(150, 45, 67, 0.22); border-color:var(--accent); color:#a7f3d0; }
  .income-total-bar span { color:#a7f3d0; }

  .btn-share-pup { background:#0f2035; border-color:#1e3a55; color:#7ab0e0; }

  .ni-overview          { background:#141e28; }
  .ni-overview.ni-risk  { background:#200f0f; }
  .ni-overview.ni-ok    { background:#0f1e10; }
  .ni-warn-box { background:#2a0f0f; border-top-color:#5a2020; }
  .ni-safe-box { background:#0f1e10; border-top-color:#1a4a25; }
}

/* Blood type warning box */
.bloodtype-warn { background:#fff8e1; border:1.5px solid #f9a825; color:#7a5800; }
@media (prefers-color-scheme: dark) {
  .bloodtype-warn { background:#2a1e05; border-color:#5a4010; color:#d4a843; }
}



/* ── html.dark class — JS-based dark mode (mirrors media query for Capacitor/WebView) ── */
html.dark {
    color-scheme: dark;
    --bg: #111009; --surface: #2b2920; --surface2: #38352c; --border: #4a4740; --border2: #5e5b52;
    --text: #f0ede6; --text2: #a09d96; --text3: #a5a29b; /* 4.9.2026: #9e9b95 byla v tmavém režimu shodná se světlou hodnotou a dávala jen 4,42 proti --surface2; #a5a29b dává 4,81 a proti --surface 5,72. Světlý režim se nemění. */
    --bt-zluty-bg: #332b16; --bt-zluty-border: #5c4d24; --bt-zluty-tile: #3d331a;
    --boy: #1a2a3a; --boy-text: #7ab0e0; --girl: #2d1b24; --girl-text: #e08ab0;
    /* Akcent musí být v tmavém režimu světlejší — #6B3FA0 je navržený pro
       světlé pozadí a na tmavém měl kontrast jen 1,97. #B58EE8 drží stejný
       fialový odstín a splňuje 4,5 proti bg, surface, surface2 i accent-light. */
    --accent: #ea7f93;
    --accent-light: #3e121b;
    /* viz komentář u světlých hodnot v :root — tři místa, musí zůstat shodná */
    --tile-ink-blue: #7FC4EC;
    --tile-ink-blue2: #7FC4EC;
    --tile-ink-amber: #F0B860;
    --tile-ink-green: #63D18F;
    --tile-ink-green2: #63D18F;
    --tile-ink-violet: #C9A0E8;
    --tile-ink-purple: #C9A0E8;
    --tile-brd-violet: var(--border);
    --tile-brd-blue: var(--border);
    --tile-brd-green: var(--border);
    /* druhá vlna — viz komentář u světlých hodnot v :root */
    --sf-blue: var(--surface2);
    --sf-green: var(--surface2);
    --sf-amber: var(--surface2);
    --sf-violet: var(--surface2);
    --sf-cream: var(--surface2);
    --sf-cream-panel: var(--surface);
    --sf-mint: var(--surface2);
    --sf-help: var(--surface2);
    --sf-helpnew: var(--surface2);
    --sf-chip: var(--surface);
    --sf-red: #2a0f0f;
    --sf-red-soft: #2a0f0f;
    --sf-red-solid: #f08080;
    --sf-mint-solid: #63D18F;
    --tile-ink-cream: #F0B860;
    --tile-ink-red: #f08080;
    --tile-ink-red2: #f08080;
    --tile-ink-mint: #63D18F;
    --tile-ink-mint2: #63D18F;
    --tile-ink-on-solid: var(--surface);
    --tile-ink-help: #C9A0E8;
    --tile-ink-helpnum: #C9A0E8;
    --tile-ink-helptxt: var(--text);
    --tile-ink-helpsyn: var(--text2);
    --tile-brd-cream: var(--border);
    --tile-brd-mint: var(--border);
    --tile-brd-help: var(--border);
    --tile-brd-red: #5a2020;
    --tile-brd-red2: #5a2020;
    --sf-red-lite: #2a0f0f;
    --sf-violet2: var(--surface2);
    --sf-cream-alert: #2a1e05;
    --tile-brd-cream-alert: #5a4010;
    --tile-ink-cream-alert: #d4a843;
    --ink-ok: #6fcf97;
    --ink-bad: #f08080;
    --ink-bad2: #f08080;
    --ink-ok2: #6fcf97;
    --ink-del: #f08080;
    --tile-ink-star: #e8c34a;
    --tile-ink-report: #f08080;
  }
  /* Generic buttons: clearly stand out from card backgrounds */
html.dark .btn {
    background: #48453c;
    color: var(--text);
    border-color: #6e6b62;
  }
html.dark .dog-card.breeding-male .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--boy) 100%);
  }
html.dark .dog-card.breeding-female .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--girl) 100%);
  }
html.dark .dog-card.breeding-puppy .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, #2a2510 100%);
  }
  /* Repro info bar (pregnancy strip) */
html.dark .repro-info {
    background: #2a2208;
    color: #d4b483;
    border-bottom-color: #4a4030;
  }
  /* Colored action buttons */
html.dark .btn-close {
    background: #0f2035;
    color: #7ab0e0;
    border-color: #1e3a55;
  }
html.dark .btn-close:active { background: #162840; }
html.dark .btn-danger {
    background: #2a0f0f;
    color: #f08080;
    border-color: #5a2020;
  }
html.dark .btn-danger:active { background: #361515; }
html.dark .btn-pa {
    background: #2a1e05;
    color: #d4a843;
    border-color: #5a4010;
  }
html.dark .btn-pa:active { background: #352508; }
html.dark .btn-ra {
    background: #0f2035;
    color: #7ab0e0;
    border-color: #1e3a55;
  }
html.dark .btn-ra:active { background: #162840; }
html.dark .expense-total-bar { background: rgba(198,40,40,0.18); border-color: rgba(198,40,40,0.4); color: #f08080; }
html.dark .btn-share-pup { background: rgba(21,101,192,0.2); border-color: rgba(21,101,192,0.4); color: #7ab0e0; }
html.dark .bloodtype-warn { background: rgba(249,168,37,0.12); border-color: rgba(249,168,37,0.4); color: #f0c040; }
html.dark .btn-danger { background: #2a0f0f; color: #f08080; border-color: #5a2020; }
html.dark .class_cash { background:#0d2a15; color:#6fcf97; border-color:#1a4a25; }
html.dark .class_transfer { background:#0f2035; color:#7ab0e0; border-color:#1e3a55; }
html.dark .class_other { background:#2a1e05; color:#d4a843; border-color:#5a4010; }

html.dark .finance-item-male { background:#0f1e2d; border-color:#1e3a55; }
html.dark .finance-item-female { background:#20111a; border-color:#4a2035; }

html.dark .expense-total-bar { background:#2a0f0f; border-color:#5a2020; color:#f08080; }
html.dark .expense-total-bar span { color:#f08080; }

html.dark .income-total-bar { background:rgba(150, 45, 67, 0.22); border-color:var(--accent); color:#a7f3d0; }
html.dark .income-total-bar span { color:#a7f3d0; }
html.dark .other-income-card { background:rgba(245, 158, 11, 0.12) !important; border-color:rgba(245, 158, 11, 0.35) !important; }

html.dark .btn-share-pup { background:#0f2035; border-color:#1e3a55; color:#7ab0e0; }

html.dark .ni-overview { background:#141e28; }
html.dark .ni-overview.ni-risk { background:#200f0f; }
html.dark .ni-overview.ni-ok { background:#0f1e10; }
html.dark .ni-warn-box { background:#2a0f0f; border-top-color:#5a2020; }
html.dark .ni-safe-box { background:#0f1e10; border-top-color:#1a4a25; }
html.dark .bloodtype-warn { background:#2a1e05; border-color:#5a4010; color:#d4a843; }

/* Velikost písma — in-app nastavení */
html.font-small  { zoom: 0.88; }
html.font-large  { zoom: 1.18; }

/* Při velkém písmu (zoom 1.18) modal přeroste viewport — kompenzace:
   68vh × 1.18 ≈ 80vh efektivní výška, modal se VŽDY bezpečně vejde na obrazovku na desktopu i mobilu */
html.font-large .modal,
html.font-large .show-form-modal-card,
html.font-large [id$="-modal"] > div,
html.font-large [id$="-overlay"] > div {
    max-height: 68vh !important; max-height: 68dvh !important;
}

/* Kompenzace pro záhlaví při Velká (zoom 1.18):
   Záhlaví a pilulky zálohy nesmí přetékat šířku mobilu ani se rozpadat */
html.font-large header {
    gap: 8px;
}
html.font-large .logo {
    gap: 6px;
}
html.font-large .logo-text-wrapper h1 {
    font-size: 18px !important;
}
html.font-large .litter-card .cat-header strong {
    font-size: 12.5px !important;
}
html.font-large .litter-card .cat-header, html.font-large .litter-card .dog-header {
    padding: 10px 10px !important;
}
html.font-large #cloud-badge .tap44 {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding: 2px 4px !important;
    font-size: 10.5px !important;
}
/* Footer: mírně stlačený padding/gap, ať se vejde víc tlačítek na řádek.
   Patička má flex-wrap:wrap + sticky (tělo se scrolluje), takže zalomení na víc řádků
   je v pořádku a stejně nastává. NEzmenšujeme tu font tlačítek — dřívější pravidlo
   font-size:11px spolu se zoomem 1.18 vycházelo na ~13px = stejně jako při Normálním,
   takže tlačítka při Velké opticky nerostla. Odstraněno, ať rostou spolu se zbytkem. */
html.font-large .modal-sticky .modal-footer {
    padding: 8px 16px;
    gap: 6px;
}

/* ── Extra (xlarge) = zvětšit VEŠKERÝ text PLOŠNĚ, ne obaly ──────────────────────────────
   zoom zůstává 1.0 (nenafukuje padding/rámečky). Velikost textu řídí --fs-scale (Extra 1.5).
   PLOŠNĚ: každá inline font-size 8–20px (obě mezerování „font-size:Npx" i „font-size: Npx")
   se znásobí napříč CELOU appkou. Emoji/dekorace ≥22px NE. small/normal/large beze změny.
   :root MUSÍ existovat — bez něj se calc(px * var(--fs-scale)) nevyhodnotí NIKDE. */
:root { --fs-scale: 1; }
html.font-xlarge { zoom: 1.0; --fs-scale: 1.28; }

/* VÝJIMKA — PDF/export přes html2canvas se NESMÍ zvětšovat: doklad/rodokmen musí vypadat vždy
   stejně bez ohledu na nastavení písma. Kočky NEmají koňský marker opacity:0.01 — používají:
   (1) kartu růstu koťat generovanou z off-screen kontejneru → má vlastní třídu .fs-capture-noscale,
   (2) rodokmen #pedigree-content. Oběma vrátíme --fs-scale na 1 (pedigree ještě níž, viz zádrhel). */
html.font-xlarge .fs-capture-noscale { --fs-scale: 1 !important; }
/* Rodokmen: overlay na 1.0, samotný strom na 0.6 — jinak by se dlouhá jména lámala a hlavička
   s tlačítky by přetekla. Není to chyba, je to úmysl (přeneseno z koňské aplikace). */
html.font-xlarge #pedigree-overlay { --fs-scale: 1.0; }
html.font-xlarge #pedigree-content { --fs-scale: 0.6; }

html.font-xlarge [style*="font-size:8px"],  html.font-xlarge [style*="font-size: 8px"]  { font-size: calc(8px  * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:9px"],  html.font-xlarge [style*="font-size: 9px"]  { font-size: calc(9px  * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:10px"], html.font-xlarge [style*="font-size: 10px"] { font-size: calc(10px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:11px"], html.font-xlarge [style*="font-size: 11px"] { font-size: calc(11px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:12px"], html.font-xlarge [style*="font-size: 12px"] { font-size: calc(12px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:13px"], html.font-xlarge [style*="font-size: 13px"] { font-size: calc(13px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:14px"], html.font-xlarge [style*="font-size: 14px"] { font-size: calc(14px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:15px"], html.font-xlarge [style*="font-size: 15px"] { font-size: calc(15px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:16px"], html.font-xlarge [style*="font-size: 16px"] { font-size: calc(16px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:17px"], html.font-xlarge [style*="font-size: 17px"] { font-size: calc(17px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:18px"], html.font-xlarge [style*="font-size: 18px"] { font-size: calc(18px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:19px"], html.font-xlarge [style*="font-size: 19px"] { font-size: calc(19px * var(--fs-scale)) !important; }
html.font-xlarge [style*="font-size:20px"], html.font-xlarge [style*="font-size: 20px"] { font-size: calc(20px * var(--fs-scale)) !important; }

/* ── Extra: texty stylované CSS TŘÍDOU (attribute selektory chytnou jen inline) ─────────────
   Bez těchto by se při Extra (zoom 1.0) třídové texty NEzvětšily a proti „Velké" (zoom 1.18) by
   se dokonce ZMENŠILY o ~15 % — přesně nahlášená vada. Škálujeme je stejným --fs-scale jako inline.
   Kočičí sada (ověřeno ve style.css), rozšířená proti koňské. NEpatří sem: dekorace/emoji ≥22px,
   sdílecí karta, grafy váhy (canvas), PDF ochrana, a paywall .bt-* (citlivý monetizační layout — vynechán). */
html.font-xlarge .stat-val { font-size: calc(1.1em * var(--fs-scale)) !important; }
html.font-xlarge .stat-label,
html.font-xlarge .filter-btn,
html.font-xlarge .app-select { font-size: calc(13px * var(--fs-scale)) !important; }
/* Pětice filtrů na Kočkách: select „Roky" má mít STEJNOU velikost jako sousední
   tlačítka. Dřív to znamenalo 10 px pro obojí (cap výš); teď obojí roste
   `--fs-scale`, takže se sem píše týž výpočet, ne pevná hodnota. Bez tohohle
   pravidla by select spadl na obecné `.app-select` = 13×1,5 = 19,5 px a byl by
   o polovinu větší než tlačítka vedle sebe. */
/* DÁVKA 37: pravidlo stojí ZA tím výš v souboru, takže při shodné specificitě
   vyhrává — a proto v něm musí být proměnná taky. Bez ní by select zůstal na
   plné velikosti, zatímco tlačítka vedle něj by se zmenšila. */
html.font-xlarge .filters-row-4col .app-select { font-size: var(--dlazdice-pismo, calc(10px * var(--fs-scale))) !important; }
/* Trojice na Vrhách: select „Roky" (`#litter-toolbar-left .app-select`) musí
   při Extra růst od STEJNÉHO základu jako sousední tlačítka „Nejnovější"/
   „Rodič" — ta mají inline `font-size:12px`, chytá je řádek 2346 výš
   (`[style*="font-size:12px"]`) a při Extra dají 12×1,5 = 18 px. Select ale
   font-size dostává z CSS třídy (`#litter-toolbar-left .app-select` ve
   style.css, `font-size: 12px`), na kterou `[style*=…]` selektor nedosáhne
   — beze změny by proto spadl na obecné `.app-select` výš (13×1,5 = 19,5 px)
   a byl o cca 1,7 px vyšší než tlačítka vedle sebe (naměřeno na draftu:
   38,70 px vs 40,42 px). Stejný vzor jako pravidlo pro Kočky o pár řádků
   výš, jen jiný základ (12px, ne 10px), protože tlačítka na Vrhách mají
   jiné inline písmo než tlačítka na Kočkách. */
html.font-xlarge #litter-toolbar-left .app-select { font-size: calc(12px * var(--fs-scale)) !important; }
html.font-xlarge .pup-status { font-size: calc(10px * var(--fs-scale)) !important; }
/* DÁVKA 47: „Dnes před rokem“ — ROSTE JEN PÍSMO, ne rámeček ani fotka.
   Bez tohohle pravidla by text při Extra zůstal na 14 px, zatímco pozdrav
   nad ním by měl 22,5 px (naměřeno na první verzi). Fotka i odsazení
   schválně zůstávají v pevných px — Petr chtěl, aby se s velikostí písma
   měnilo jen písmo. Výška rámečku se tím zvětší sama podle textu. */
html.font-xlarge .vyroci-text { font-size: calc(14px * var(--fs-scale)) !important; }

/* ── DROBNÝ TEXT, KTERÝ NASTAVENÍ PÍSMA MÍJELO ────────────────────────────────
   Třináct tříd se při Extra nezvětšovalo. Prošly jedna po druhé v prohlížeči
   na aktuálním draftu; u každé se měřilo, jestli text po zvětšení nevyteče
   z prvku (scrollWidth/scrollHeight proti clientWidth/clientHeight) a jestli
   nepřekryje další prvek v toku. Deset projde, tři NE (viz níž).

   Naměřeno (před → po, žádné přetečení):
     .cat-added-date      10 → 15 px     w188, h13 → 20
     .att-strip-title     10 → 15 px     w442, h13 → 20
     .att-strip-count     10 → 15 px     w18 → 21
     .att-strip-empty     13 → 19,5 px   h45 → 54
     .att-sort-label      10 → 15 px
     .att-sort-btn        11 → 16,5 px   řádek má flex-wrap, na kartě široké
                                         340 px se zalomí (h55 → 69) a nepřeteče
     #viewer-counter      13 → 19,5 px   w50 → 63
     #viewer-date         13 → 19,5 px   h35 → 44
     #viewer-note         13 → 19,5 px   h53 → 71
     .viewer-meta-delete  13 → 19,5 px   celý #viewer-meta 149 → 181 px, vejde se */
html.font-xlarge .cat-added-date, .dog-added-date { font-size: calc(10px * var(--fs-scale)) !important; }
html.font-xlarge .att-strip-title,
html.font-xlarge .att-strip-count,
html.font-xlarge .att-sort-label { font-size: calc(10px * var(--fs-scale)) !important; }
html.font-xlarge .att-sort-btn { font-size: calc(11px * var(--fs-scale)) !important; }
html.font-xlarge .att-strip-empty,
html.font-xlarge #viewer-counter,
html.font-xlarge #viewer-date,
html.font-xlarge #viewer-note,
html.font-xlarge .viewer-meta-delete { font-size: calc(13px * var(--fs-scale)) !important; }

/* NEZVĚTŠUJÍ SE — dlaždice přílohy je 84 × 24 px s `overflow: hidden`:
   `.att-tile-name` je při 10 px SVISLE OŘEZANÉ UŽ DNES (naměřeno
   scrollHeight > clientHeight ještě před jakoukoli změnou) a zvětšením by se
   z názvu ztratilo ještě víc; `.att-tile-date` se při 10 px vejde, ale při
   15 px z dlaždice vyteče. Zvětšit by je šlo jen se zvětšením dlaždice, a to
   je jiná úloha než velikost písma.
   `.settings-tile` mezi ně nepatří: všechny tři dlaždice podpory nesou i
   `.settings-tile-lg`, což je jedno ze šesti ZÁMĚRNÝCH zastropování s vlastním
   odůvodněním o dvacet řádků níž. */
/* DÁVKA 65 — SPODNÍ LIŠTA POSLOUCHÁ VELIKOST PÍSMA.
   Tady stávala „varianta B": popisky dostaly při Velkém 7 px a při Extra 8 px, aby se
   všech šest vešlo na JEDEN řádek. Jenže základní velikost popisku je 9 px — takže když
   si chovatelka zapnula VĚTŠÍ písmo, popisky ve spodní liště se ZMENŠILY. U Extra to bylo
   9 → 8 px doslova; u Velkého sice pomáhá zoom 1.18, ale 7 × 1.18 ≈ 8,3 px je pořád míň
   než 9. Přesně to hlásil proklik jako „spodní lišta neposlouchá velikost písma".

   Platí pravidlo: ROZMĚRY SE NEMĚNÍ S VELIKOSTÍ PÍSMA, MĚNÍ SE JEN PÍSMO.
   Výška lišty proto zůstává 92 px u všech stupňů (viz `html.font-xlarge .ios-tab-bar` níž,
   které nastavuje tutéž hodnotu jako základ) a popisek se místo zmenšování ZALOMÍ na dva
   řádky — základní `.tab-label` na to je stavěná (`hyphens:auto`, `overflow-wrap:break-word`)
   a komentář u výšky lišty to říká výslovně: „Musí pojmout 2řádkový popisek."

   Velké: mírné snížení základu na 8.5px, aby se po zoomu 1.18 (~10px) 9-písmenné „Nastavení" vešlo na 50px záložku.
   Extra: zastropováno na 10px (13.5px bylo pro 7 záložek na 375px telefonu příliš velké). */
html.font-large .tab-label { font-size: 8.5px !important; }
html.font-large .tab-item.active .tab-icon { transform: scale(1.14) !important; }
html.font-xlarge .tab-label { font-size: 10px !important; line-height: 1.1 !important; }
html.font-xlarge .field label { font-size: calc(11px * var(--fs-scale)) !important; }
/* Dlaždice v Nastavení (Záloha dat a Podpora) a chipy — dlaždice mají pevný rozměr,
   písmo se nesmí nafouknout na 19px, jinak přeteče z dlaždice. */
html.font-large .backup-grid button,
html.font-large .backup-grid div,
html.font-large .backup-grid span,
html.font-large .settings-tile-lg,
html.font-large .settings-tile-lg span { font-size: 11px !important; }

html.font-xlarge .backup-grid button,
html.font-xlarge .backup-grid div,
html.font-xlarge .backup-grid span { font-size: 11px !important; }
html.font-xlarge .settings-tile-lg,
html.font-xlarge .settings-tile-lg span { font-size: 11px !important; }
html.font-large .bk-chip,
html.font-xlarge .bk-chip { font-size: 11.5px !important; }
html.font-large .cal-ev-ava, html.font-xlarge .cal-ev-ava { width: 28px !important; height: 28px !important; font-size: 15px !important; }
html.font-large .cal-ev-ics, html.font-xlarge .cal-ev-ics { font-size: 12px !important; padding: 3px 5px !important; }
html.font-xlarge .class_cash,
html.font-xlarge .class_transfer,
html.font-xlarge .class_other,
html.font-xlarge .cur-dropdown-arrow,
html.font-xlarge .onboarding-feature-item { font-size: calc(12px * var(--fs-scale)) !important; }
html.font-xlarge .btn,
html.font-xlarge .repro-info,
html.font-xlarge .toast-message,
html.font-xlarge .toast-undo-btn,
html.font-xlarge .cur-dropdown-btn { font-size: calc(13px * var(--fs-scale)) !important; }
html.font-xlarge .field input,
html.font-xlarge .field select,
html.font-xlarge .field textarea,
html.font-xlarge .cur-dropdown-list button { font-size: calc(14px * var(--fs-scale)) !important; }
/* DÁVKA 41: pravidlo výš má `!important`, takže by proměnnou přebilo
   a dopočet by se při Extra vůbec neprojevil — a Extra je právě ten
   stupeň, kde se volby utínaly. Proto tu proměnná musí být znovu. */
html.font-xlarge .field select.ems-select { font-size: var(--ems-pismo, calc(14px * var(--fs-scale))) !important; height: var(--ems-vyska, auto); }
html.font-xlarge .dp-item,
html.font-xlarge .viewer-close-btn,
html.font-xlarge .viewer-share-btn { font-size: calc(15px * var(--fs-scale)) !important; }
html.font-xlarge .dp-item.selected { font-size: calc(17px * var(--fs-scale)) !important; }
/* Spodní lišta při Extra: popisek je nově menší a na JEDEN řádek (varianta B), takže lišta má
   STEJNOU výšku jako v normálu (92px) — žádné poskakování, ikony na stejném místě. */
html.font-xlarge .ios-tab-bar { height: calc(92px + env(safe-area-inset-bottom, 0px)); }
/* Kalendář: zvětšený titul události (inline white-space:nowrap) zalomit místo ořezání. Jen při Extra. */
html.font-xlarge #tab-kalendar [style*="white-space:nowrap"] { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* Karta kotěte: cena (inline white-space:nowrap) je při Extra širší než sloupec 120px a přetéká VLEVO
   přes jméno/„Na mazla"/kupce. Necháme ji zalomit do vlastního sloupce, ať se nepřekrývá s textem. */
html.font-xlarge .price-container [style*="white-space:nowrap"] { white-space: normal !important; }
/* Bare <select> v Nastavení (interval zálohy, iCloud, Google Drive, oblíbená kočka) používají VÝCHOZÍ font
   prohlížeče — plošná ani třídová sada je nechytne. Scopujeme na obrazovku Nastavení, ať pokryjeme i případné
   další přehlédnuté bare selecty tamtéž. #tab-nastaveni VYLUČUJE paywall (samostatný .overlay), sdílecí kartu
   i PDF capture (mimo tento kontejner). Vstupy Profilu jsou už pokryté třídovou sadou (.field). */
html.font-xlarge #tab-nastaveni select { font-size: calc(14px * var(--fs-scale)); }
/* Čitelné texty BEZ inline font-size a bez pokryté třídy dědí výchozí velikost (nadpisy 20–24px, jména
   koček 16px), takže je plošná ani třídová sada nechytne → proti Velké (zoom 1.18) se při Extra ZMENŠÍ.
   Doplňujeme je. Nadpisy (h1/h2, >20px) dostávají menší násobek 1.3 (aby se dlouhé vešly), jména koček
   a popisky v Nastavení plný --fs-scale (1.5). Sdílecí karta používá <b> (ne <strong>) a fixní px → nedotčena;
   growth-card/paywall nadpisy nepoužívají; pedigree má vlastní scale. */
html.font-xlarge h1 { font-size: calc(20.8px * 1.3) !important; }
/* DÁVKA 48: název aplikace je z tohohle pravidla VYJMUTÝ. Pravidlo výš dává
   nadpisům při Extra PEVNÝCH 27,04 px s `!important` — a to by přebilo
   zmenšení, kvůli kterému se vedle názvu vejde logo stanice. Bez tohohle
   řádku zůstal název při Extra v původní velikosti, ať se `--nazev-pismo`
   nastavilo na cokoli (naměřeno v prohlížeči). Vyšší specificita sama
   nestačí, `!important` musí být na obou stranách. */
/* 2. 9. 2026: násobek 1,3 odsud ZMIZEL a fallback jde na 20px — název se
   srovnává s appkou Psi (`Chov - Psi/Chov - PWA/index.html:65`, pravidlo
   `.logo-text-wrapper h1 { font-size: 20px }`). Psi nemají pro název žádné
   pravidlo pro Extra a `html.font-xlarge` u nich znamená `zoom: 1.0`, takže
   tam název drží 20 px při KAŽDÉM stupni písma; s násobkem 1,3 by Kočky měly
   26 px, tedy víc než vzor.
   Pravidlo tu zůstává proto, že `html.font-xlarge h1` o řádek výš dává
   nadpisům pevných 27,04 px s `!important` — bez tohohle řádku by název
   spadl na ně a s appkou Psi by se rozešel. */
html.font-xlarge .logo h1 { font-size: var(--nazev-pismo, 20px) !important; }
html.font-xlarge h2 { font-size: calc(24px * 1.3) !important; }
html.font-xlarge .cat-card strong, html.font-xlarge .dog-card strong,
html.font-xlarge #tab-nastaveni strong { font-size: calc(16px * var(--fs-scale)) !important; }

/* Datová pole ve dvousloupcovém rozvržení (grid 1fr 1fr) mají jen půl šířky; při zvětšeném písmu
   se do nich datum nevejde a ořízne se (např. vrh: „První den krytí" l-mate, „Porod" l-birth).
   Ve formulářích (uvnitř .overlay) proto dvousloupcové dvojice při Velké i Extra srovnáme do JEDNOHO
   sloupce → pole má plnou šířku a datum se vejde celé i v delších jazycích (německé měsíce).
   Míří jen na inline „1fr 1fr" (obě mezerování); jiné poměry (2fr 1fr, 1fr 2fr) nechává beze změny.
   Main screen (mimo .overlay) se netýká. */
/* Míří na JAKÝKOLI inline grid v těle formuláře (ne jen „1fr 1fr", ale i „1fr 2fr" u Písmeno/Název vrhu
   a „2fr 1fr" u genetických řádků) — bez seznamu poměrů. Scopováno na .modal-body (tělo formuláře), takže:
   • hlavní obrazovka (Nastavení vč. tlačítek velikosti písma 2×2 a dlaždic Podpory, Finance, Kalendář,
     Zásoby, Kočky) je mimo — není v .modal-body;
   • PDF/zobrazovací obsah (rodokmen v #pedigree-content, sdílecí karta, karta kotěte, certifikáty) se
     vykresluje do vlastních kontejnerů MIMO .modal-body → jeho gridy (např. 1fr 1fr strom rodokmenu)
     zůstávají nedotčené a PDF se nerozbije. Ověřeno měřením. */
html.font-large  .modal-body [style*="grid-template-columns"],
html.font-xlarge .modal-body [style*="grid-template-columns"],
html.font-large  #show-form-modal [style*="grid-template-columns"],
html.font-xlarge #show-form-modal [style*="grid-template-columns"],
html.font-large  .grid-2col-responsive,
html.font-xlarge .grid-2col-responsive { grid-template-columns: 1fr !important; }

/* Statistické dlaždice na hlavní obrazovce: při Extra se tři sloupce nevejdou. Dlaždice financí
   („Celkem ⇄ 1.250.000 €") má při 1,5× textu velké min-content a sloupec repeat(3,1fr) ho neumí
   zúžit pod min-content → mřížka přeteče vpravo mimo obrazovku (třetí sloupec). Při zoomu (Velké)
   se škáluje obal i text současně, takže tam problém není — jen při Extra. Řešení: při Extra 2 sloupce
   (dlaždice víc pod sebe) + minmax(0,1fr), aby mřížka nikdy nepřetekla a velká částka se vešla.
   Dlaždice zůstávají tlačítka (mění se jen počet sloupců). Malé/Normální/Velké beze změny. */
html.font-xlarge .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Systematický sken hlavních obrazovek při Extra našel ještě: karta vrhu — řádek „Vrhy A · 12. 6. 2025"
   (inline white-space:nowrap) přetéká → zalomit. (Zbylá drobná přetečení viz report — jsou to pevné
   akční sloupce karet / řady tlačítek v němčitě, řeší se zvlášť jako layout, ne tímto pravidlem.) */
html.font-xlarge .litter-card [style*="white-space:nowrap"] { white-space: normal !important; overflow-wrap: break-word; }
/* Kalendář: horní přepínač (taby „Kalendář / 🔔 Benachrichtigungen") jsou flex:1 tlačítka. Dlouhé německé
   slovo má min-width:auto, takže se tlačítko neumí zúžit pod jeho šířku → přetéká. min-width:0 povolí zúžení
   na flex podíl a slovo se zalomí. Onclick tabů zůstává. */
html.font-xlarge #tab-kalendar button { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
/* Nastavení — čtyři tlačítka velikosti písma (2×2). Při Extra jejich popisek naroste na ~28px a v úzkém
   dvousloupci se dlouhé překlady (ru „A⁺⁺ Огромный", de „A⁺⁺ Riesig") nevejdou. Zmenšíme jejich písmo
   při Extra (utility tlačítka, nemusí být obří), aby zůstalo 2×2 a nic nepřeteklo — ve všech jazycích. */
html.font-xlarge #fs-btn-small, html.font-xlarge #fs-btn-normal,
html.font-xlarge #fs-btn-large, html.font-xlarge #fs-btn-xlarge { font-size: 16px !important; overflow-wrap: break-word; word-break: break-word; }

/* Extra velké: úprava rozložení hlaviček karet koček, vrhů a spodního odsazení pro rolování */
html.font-xlarge body {
    padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px) + 70px) !important;
}
html.font-xlarge #scroll-top-btn {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px) + 8px) !important;
}
html.font-xlarge .cat-header, html.font-xlarge .dog-header {
    padding: 10px 12px !important;
}
html.font-xlarge .cat-header > div:last-child, html.font-xlarge .dog-header > div:last-child {
    gap: 3px !important;
}
html.font-xlarge .cat-header > div:last-child .btn, html.font-xlarge .dog-header > div:last-child .btn {
    padding: 4px 8px !important;
    font-size: 13px !important;
}
html.font-xlarge .litter-card .cat-header, html.font-xlarge .litter-card .dog-header {
    padding: 10px 12px !important;
}



/* ── Mobilní zobrazení modálních oken a formulářů (včetně velkého písma) ── */
@media (max-width: 640px) {
    .overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: max(12px, env(safe-area-inset-top, 12px)) 10px max(50px, calc(env(safe-area-inset-bottom, 0px) + 40px)) 10px !important;
        box-sizing: border-box !important;
    }
    .modal {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 480px !important;
        max-height: min(82vh, calc(100dvh - 80px)) !important;
        max-height: min(82vh, calc(100vh - 80px)) !important; max-height: min(82dvh, calc(100dvh - 80px)) !important;
        border-radius: 16px !important;
        margin: auto !important;
        box-sizing: border-box !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        animation: slideUpMobile 0.2s ease-out !important;
    }
    html.font-large .modal {
        max-height: min(68vh, calc(100dvh - 120px)) !important;
        width: calc(100% - 16px) !important;
    }
    html.font-xlarge .modal {
        max-height: min(72vh, calc(100dvh - 120px)) !important;
        max-height: min(72vh, calc(100vh - 120px)) !important; max-height: min(72dvh, calc(100dvh - 120px)) !important;
        width: calc(100% - 16px) !important;
    }
    .modal-sticky .modal-footer {
        padding: 10px 16px 14px !important;
        border-radius: 0 0 16px 16px !important;
    }
    #export-preview {
        padding: 16px 12px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Dynamický dialog formuláře výstav a dalších oken */
    .show-form-modal-wrap {
        align-items: center !important;
        justify-content: center !important;
        padding: max(12px, env(safe-area-inset-top, 12px)) 10px max(55px, calc(env(safe-area-inset-bottom, 0px) + 45px)) 10px !important;
        box-sizing: border-box !important;
    }
    .show-form-modal-card {
        width: 100% !important;
        max-width: 480px !important;
        border-radius: 16px !important;
        max-height: min(82vh, calc(100dvh - 80px)) !important;
        max-height: min(82vh, calc(100vh - 80px)) !important; max-height: min(82dvh, calc(100dvh - 80px)) !important;
        margin: auto !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
        overflow: hidden !important;
        animation: slideUpMobile 0.2s ease-out !important;
    }
    html.font-large .show-form-modal-card {
        max-height: min(68vh, calc(100dvh - 120px)) !important;
        width: calc(100% - 16px) !important;
    }
    html.font-xlarge .show-form-modal-card {
        max-height: min(72vh, calc(100dvh - 120px)) !important;
        max-height: min(72vh, calc(100vh - 120px)) !important; max-height: min(72dvh, calc(100dvh - 120px)) !important;
        width: calc(100% - 16px) !important;
    }
    .show-form-modal-footer {
        padding: 10px 16px 14px !important;
        border-radius: 0 0 16px 16px !important;
    }
    .grid-2col-responsive {
        grid-template-columns: 1fr !important;
    }
    #show-form-modal [style*="grid-template-columns:1fr 1fr"]:not([role="radiogroup"]),
    #show-form-modal [style*="grid-template-columns: 1fr 1fr"]:not([role="radiogroup"]),
    #show-form-modal [style*="grid-template-columns:2fr 1fr"],
    #show-form-modal [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #show-form-modal .show-type-radiogroup {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #show-form-modal .show-form-body {
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-width: 100% !important;
    }
}

/* ── Dynamická okna vytvořená v JS — vždy plovoucí karta, nikdy přilepená ke dnu ── */
#supply-form-modal,
#other-income-modal,
#expense-modal,
#custom-event-modal,
#cycle-predictor-overlay,
#litter-shows-modal,
#litter-show-form-modal,
#pup-shows-modal,
#pup-show-form-modal,
#milestones-modal,
#birth-checklist-modal,
#whelping-modal,
#pregnancy-calendar-overlay,
#preg-form-overlay,
#bulk-weight-overlay,
#pup-health-form-modal,
#pup-feeding-form-modal,
#litter-dup-modal,
#litter-docs-modal,
#assign-orphan-pay-modal,
#temp-form-modal,
#reminder-form-modal,
#bulk-pup-overlay,
#refund-form-modal,
#feedback-modal,
#restore-modal,
#reserved-list-modal,
#mating-test-modal,
#add-ancestor-modal,
#kitten-cert-modal,
#spt-form-modal,
#mating-overlay,
#mating-form-overlay,
#mating-overview-overlay,
#show-entry-modal,
#cp-form-modal,
#heat-form-modal,
#health-form-modal,
#prog-form-modal,
#vacc-overview-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(34px, calc(env(safe-area-inset-bottom, 0px) + 24px)) 12px !important;
    box-sizing: border-box !important;
    z-index: 2500 !important;
}

#supply-form-modal > div,
#other-income-modal > div,
#expense-modal > div,
#custom-event-modal > div,
#cycle-predictor-overlay > div,
#litter-shows-modal > div,
#litter-show-form-modal > div,
#pup-shows-modal > div,
#pup-show-form-modal > div,
#milestones-modal > div,
#birth-checklist-modal > div,
#whelping-modal > div,
#pregnancy-calendar-overlay > div,
#preg-form-overlay > div,
#bulk-weight-overlay > div,
#pup-health-form-modal > div,
#pup-feeding-form-modal > div,
#litter-dup-modal > div,
#litter-docs-modal > div,
#assign-orphan-pay-modal > div,
#temp-form-modal > div,
#reminder-form-modal > div,
#bulk-pup-overlay > div,
#refund-form-modal > div,
#feedback-modal > div,
#restore-modal > div,
#reserved-list-modal > div,
#mating-test-modal > div,
#add-ancestor-modal > div,
#kitten-cert-modal > div,
#spt-form-modal > div,
#mating-overlay > div,
#mating-form-overlay > div,
#mating-overview-overlay > div,
#show-entry-modal > div,
#cp-form-modal > div,
#heat-form-modal > div,
#health-form-modal > div,
#prog-form-modal > div,
#vacc-overview-modal > div {
    border-radius: 16px !important;
    width: calc(100% - 20px) !important;
    max-width: 480px !important;
    max-height: min(78vh, calc(100dvh - 110px)) !important;
    max-height: min(78vh, calc(100vh - 110px)) !important; max-height: min(78dvh, calc(100dvh - 110px)) !important;
    margin: auto !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
    overflow: hidden !important;
}

html.font-large #supply-form-modal > div,
html.font-large #other-income-modal > div,
html.font-large #expense-modal > div,
html.font-large #custom-event-modal > div,
html.font-large #cycle-predictor-overlay > div,
html.font-large #litter-shows-modal > div,
html.font-large #litter-show-form-modal > div,
html.font-large #pup-shows-modal > div,
html.font-large #pup-show-form-modal > div,
html.font-large #milestones-modal > div,
html.font-large #birth-checklist-modal > div,
html.font-large #whelping-modal > div,
html.font-large #pregnancy-calendar-overlay > div,
html.font-large #preg-form-overlay > div,
html.font-large #bulk-weight-overlay > div,
html.font-large #pup-health-form-modal > div,
html.font-large #pup-feeding-form-modal > div,
html.font-large #litter-dup-modal > div,
html.font-large #litter-docs-modal > div,
html.font-large #assign-orphan-pay-modal > div,
html.font-large #temp-form-modal > div,
html.font-large #reminder-form-modal > div,
html.font-large #bulk-pup-overlay > div,
html.font-large #refund-form-modal > div,
html.font-large #feedback-modal > div,
html.font-large #restore-modal > div,
html.font-large #reserved-list-modal > div,
html.font-large #mating-test-modal > div,
html.font-large #add-ancestor-modal > div,
html.font-large #kitten-cert-modal > div,
html.font-large #spt-form-modal > div,
html.font-large #mating-overlay > div,
html.font-large #mating-form-overlay > div,
html.font-large #mating-overview-overlay > div,
html.font-large #show-entry-modal > div,
html.font-large #cp-form-modal > div,
html.font-large #heat-form-modal > div,
html.font-large #health-form-modal > div,
html.font-large #prog-form-modal > div,
html.font-large #vacc-overview-modal > div {
    max-height: min(68vh, calc(100dvh - 120px)) !important;
    width: calc(100% - 16px) !important;
}

html.font-xlarge #supply-form-modal > div,
html.font-xlarge #other-income-modal > div,
html.font-xlarge #expense-modal > div,
html.font-xlarge #custom-event-modal > div,
html.font-xlarge #cycle-predictor-overlay > div,
html.font-xlarge #litter-shows-modal > div,
html.font-xlarge #litter-show-form-modal > div,
html.font-xlarge #pup-shows-modal > div,
html.font-xlarge #pup-show-form-modal > div,
html.font-xlarge #milestones-modal > div,
html.font-xlarge #birth-checklist-modal > div,
html.font-xlarge #whelping-modal > div,
html.font-xlarge #pregnancy-calendar-overlay > div,
html.font-xlarge #preg-form-overlay > div,
html.font-xlarge #bulk-weight-overlay > div,
html.font-xlarge #pup-health-form-modal > div,
html.font-xlarge #pup-feeding-form-modal > div,
html.font-xlarge #litter-dup-modal > div,
html.font-xlarge #litter-docs-modal > div,
html.font-xlarge #assign-orphan-pay-modal > div,
html.font-xlarge #temp-form-modal > div,
html.font-xlarge #reminder-form-modal > div,
html.font-xlarge #bulk-pup-overlay > div,
html.font-xlarge #refund-form-modal > div,
html.font-xlarge #feedback-modal > div,
html.font-xlarge #restore-modal > div,
html.font-xlarge #reserved-list-modal > div,
html.font-xlarge #mating-test-modal > div,
html.font-xlarge #add-ancestor-modal > div,
html.font-xlarge #kitten-cert-modal > div,
html.font-xlarge #spt-form-modal > div,
html.font-xlarge #mating-overlay > div,
html.font-xlarge #mating-form-overlay > div,
html.font-xlarge #mating-overview-overlay > div,
html.font-xlarge #show-entry-modal > div,
html.font-xlarge #cp-form-modal > div,
html.font-xlarge #heat-form-modal > div,
html.font-xlarge #health-form-modal > div,
html.font-xlarge #prog-form-modal > div,
html.font-xlarge #vacc-overview-modal > div {
    max-height: min(72vh, calc(100dvh - 120px)) !important;
    max-height: min(72vh, calc(100vh - 120px)) !important; max-height: min(72dvh, calc(100dvh - 120px)) !important;
    width: calc(100% - 16px) !important;
}

.bt-paywall {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bt-paywall-card {
  background: var(--surface, #fff);
  border-radius: 24px;
  padding: 32px 28px 28px;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}
.bt-paywall-icon { font-size: 48px; line-height: 1; }
.bt-paywall-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #1a0a2e);
  text-align: center;
}
.bt-paywall-sub {
  font-size: 14px;
  color: var(--text-muted, #7a6a8a);
  text-align: center;
  line-height: 1.5;
}
.bt-key-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border, #e2ddd4);
  border-radius: 12px;
  font-size: 15px;
  font-family: monospace;
  text-align: center;
  letter-spacing: 0.08em;
  background: var(--bg, #f7f5f0);
  color: var(--text, #1a0a2e);
  outline: none;
  margin-top: 4px;
}
.bt-key-input:focus { border-color: #6B3FA0; }
.bt-key-error {
  font-size: 13px;
  color: #c0392b;
  text-align: center;
  line-height: 1.4;
}
.bt-activate-btn {
  width: 100%;
  padding: 14px;
  background: #6B3FA0;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.bt-activate-btn:hover { background: #4a2070; }
.bt-activate-btn:disabled { background: #9a8aaa; cursor: default; }
.bt-buy-link {
  font-size: 14px;
  color: #6B3FA0;
  text-decoration: none;
  font-weight: 500;
}
.bt-buy-link:hover { text-decoration: underline; }
.bt-paywall-contact {
  font-size: 12px;
  color: var(--text-muted, #7a6a8a);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.bt-paywall-contact a { color: #6B3FA0; text-decoration: none; }

/* ==================== SCROLL TO TOP ==================== */
#scroll-top-btn {
    position: fixed;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px) + 12px);
    right: max(16px, env(safe-area-inset-right, 16px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--tile-ink-on-solid);
    border: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateY(8px);
    z-index: 150;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
#scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}


/* ==== Dlaždice v Nastavení (Záloha dat + Podpora) — styl dle psí appky ==== */
.settings-tile {
    border: 1px solid var(--border);
    border-radius: 16px;
    aspect-ratio: 1;
    padding: 10px 4px;
    min-width: 0;
    max-width: 104px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 9px;
    color: var(--text2);
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
    text-align: center;
}
.settings-tile span {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
    text-align: center;
}
.settings-tile-lg {
    border-radius: 12px;
    aspect-ratio: auto;
    max-width: none;
    /* Bod 3: ikony zarovnané na stejnou výšku bez ohledu na 1/2/3 řádky textu — obsah od vrchu.
       Bod 2: víc horizontálního odsazení, ať text nedře o kraj dlaždice. */
    justify-content: flex-start;
    padding: 14px 6px;
    font-size: 11px;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
    text-align: center;
}

/* Dlaždice v mřížce Zálohy dat — pevný rozměr dlaždic, text se nikdy nerozteče ven */
.backup-grid button,
.backup-grid div {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    line-height: 1.15 !important;
}
.backup-grid button span,
.backup-grid div span {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    line-height: 1.15 !important;
    display: inline-block;
    max-width: 100%;
}

/* Moderní pastelové dlaždice Zálohy dat */
.bk-tile-btn {
    border-radius: 13px !important;
    border: 1.5px solid var(--border) !important;
    padding: 12px 6px !important;
    min-width: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    transition: transform 0.1s ease, filter 0.1s ease;
}
.bk-tile-btn:active {
    transform: scale(0.97);
}
.bk-tile-ico {
    font-size: 21px !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bk-tile-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
.bk-tile-sub {
    font-size: 10px !important;
    opacity: 0.85 !important;
    line-height: 1.2 !important;
}

/* 6 barevných témat pro horní dlaždice */
.bk-t-blue { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
.bk-t-purple { background: #F5F3FF !important; border-color: #DDD6FE !important; color: #6D28D9 !important; }
.bk-t-amber { background: #FFFBEB !important; border-color: #FDE68A !important; color: #B45309 !important; }
.bk-t-berry { background: #FDF2F8 !important; border-color: #FBCFE8 !important; color: #9D174D !important; }
.bk-t-teal { background: #F0FDFA !important; border-color: #99F6E4 !important; color: #0F766E !important; }
.bk-t-indigo { background: #EEF2FF !important; border-color: #C7D2FE !important; color: #3730A3 !important; }

/* Spodní 2 velké dlaždice (Do zařízení & Google Disk) */
.bk-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.bk-tile-bottom {
    border-radius: 14px !important;
    border: 1.5px solid var(--border) !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 5px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
}
.bk-tile-bottom[style*="display: none"],
.bk-tile-bottom[style*="display:none"] {
    display: none !important;
}
.bk-bot-device {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #1E293B !important;
}
.bk-bot-cloud {
    background: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
}

/* Vycentrované přepínací tlačítko Zapnuto/Vypnuto */
.bk-badge-toggle {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 3px 14px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.15s ease !important;
}
.bk-badge-toggle.badge-on-blue {
    background: #DBEAFE !important;
    color: #1E40AF !important;
}
.bk-badge-toggle.badge-off {
    background: #E2E8F0 !important;
    color: #64748B !important;
}
.bk-badge-toggle.badge-on-green {
    background: #DCFCE7 !important;
    color: #166534 !important;
}

/* Vycentrovaný input pro název zařízení */
.bk-dev-input {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 7px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #1E1B2E !important;
    outline: none !important;
    font-family: inherit !important;
}

/* Vycentrovaný štítek pro Google e-mail */
.bk-email-badge {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #DCFCE7 !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: 7px !important;
    padding: 4px 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #166534 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}



/* ==== proklik 2026-08-24, ČÁST 1: sjednocení vzhledu ROZBALENÉHO obsahu
   sekcí Nastavení se zavřeným řádkem (fialová/zaoblená/tučný fialový text).
   Dřív byl `.set-collapse` bez jakéhokoli CSS pravidla — obsah byl holý bílý,
   bez odsazení, přilepený hned pod řádek. Teď dostává stejný podklad jako
   řádek nad ním (#F8F6FC, shodné se zavřeným stavem řádků výš) + odsazení.
   Řádky samotné (zavřený stav) se NEMĚNÍ — jen obsah PO rozbalení.
   `*:first-child` reset: děti uvnitř mají vlastní `margin-top` (8–10px)
   navržený pro nulové odsazení rodiče — bez resetu by se sčítalo s novým
   paddingem a nahoře by vznikla zbytečně velká mezera. */
.set-collapse {
    background: #F8F6FC;
    padding: 14px;
}
.set-collapse > *:first-child { margin-top: 0 !important; }
/* Předplatné (text-align:center) a Nebezpečná zóna (background:#FCEBEB)
   dostávají svou výjimku přímo inline stylem v index.html na tom konkrétním
   `.set-collapse` — NE novou třídou. Testy integrity (integrity-tests.js,
   „Sekce v Nastavení jsou v HTML zavřené" a „Nebezpečná zóna se v
   index.html našla i s obsahem") hledají přesný řetězec `class="set-collapse"`
   a přidaná druhá třída by je rozbila. Inline styl má stejně vyšší
   specificitu, takže výjimku přebije bez ohledu na pořadí v CSS. */

/* ==== Backup karty — chipy (varianta C) ==== */
.bk-chip {
    padding: 5px 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    font-size: 11px;
    color: var(--text2);
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
}
.bk-chip.on { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 500; }
/* proklik 2026-08-24 (5. kolo): Automatická záloha (modrá) a Google Drive
   (zelená) mají teď VLASTNÍ barvu chipů místo sdílené var(--accent) —
   přesné hex hodnoty ze zadání, ne odvozené z palety appky. */

/* Date picker vždy nad všemi modaly (dynamické modaly mají z-index 2000–9999) */
#datepicker-overlay { z-index: 100000; }
/* iOS: skrýt zadávání licenčního klíče i přes CSS (Apple pravidla) — pojistka mimo configurePaywallForPlatform */
body.is-ios #license-toggle-btn, body.is-ios #license-key-form { display: none !important; }

/* DARK MODE FIX (mirror psí appky): světlá hardcoded pozadí v Nastavení + koťata sub-karty (.pup-row) */
@media (prefers-color-scheme: dark) {
    .set-bg { background: var(--surface2) !important; }
    .pup-row { background: var(--surface2) !important; }
}
html.dark .set-bg { background: var(--surface2) !important; }
html.dark .pup-row { background: var(--surface2) !important; }

/* ── NASTAVENÍ VARIANTA 1B (Soft Lavender / Brand Chic) ─────────────────── */
.set-brand-group {
    margin-bottom: 18px;
}
.set-brand-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6C5CE7;
    margin: 0 0 8px 6px;
}
.set-brand-card {
    background: #F8F6FD;
    border: 1px solid #E5E0F4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.04);
}
.set-brand-row {
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background 0.15s ease;
    border-bottom: 1px solid #EBE7F6;
}
.set-brand-card > .set-brand-row:last-of-type {
    border-bottom: none;
}
.set-brand-row-last {
    border-bottom: none !important;
}
.set-brand-card .set-collapse {
    background: #F8F6FD;
    padding: 14px 16px 16px 16px;
    border-bottom: 1px solid #EBE7F6;
}
.set-brand-card .set-collapse:last-child {
    border-bottom: none;
}
.set-brand-row:active {
    background: rgba(108, 92, 231, 0.06);
}
.set-brand-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #E2DCF3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(108, 92, 231, 0.08);
}
.set-brand-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.set-brand-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #2D2754;
    line-height: 1.25;
}
.set-brand-sub {
    font-size: 11.5px;
    color: #7B7599;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}
.set-brand-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.set-brand-pill {
    display: none !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: #EBE6F8;
    color: #5C4BC4;
    border: 1px solid #DCD4F3;
}
.set-brand-pill-success {
    background: #E6F7EC !important;
    color: #1E7E34 !important;
    border-color: #C3E6CB !important;
}
.set-brand-pill-muted {
    background: #F1EFF5 !important;
    color: #8C879E !important;
    border-color: #E2DFE9 !important;
}
.set-brand-caret {
    font-size: 17px;
    font-weight: 700;
    color: #9D96BE;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease;
}
.set-brand-row.is-open .set-brand-caret {
    color: #6C5CE7;
}

/* Danger Zone Card */
.set-danger-card {
    background: #FFF5F5;
    border: 1px solid #F8D7DA;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.04);
}
.set-danger-row {
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background 0.15s ease;
}
.set-danger-row:active {
    background: rgba(220, 53, 69, 0.06);
}
.set-danger-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #F5C6CB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(220, 53, 69, 0.08);
}
.set-danger-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #A32D2D;
    line-height: 1.25;
}
.set-danger-sub {
    font-size: 11.5px;
    color: #C25454;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}
.set-danger-caret {
    font-size: 17px;
    font-weight: 700;
    color: #E24B4A;
    line-height: 1;
}

@media (prefers-color-scheme: dark) {
    .set-brand-hdr { color: #A29BFE !important; }
    .set-brand-card { background: var(--surface) !important; border-color: var(--border) !important; }
    .set-brand-card .set-collapse { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
    .set-brand-row { border-bottom-color: var(--border) !important; }
    .set-brand-icon-box { background: var(--surface2) !important; border-color: var(--border) !important; }
    .set-brand-title { color: var(--text) !important; }
    .set-brand-sub { color: var(--text2) !important; }
    .set-brand-pill { background: var(--surface2) !important; color: #A29BFE !important; border-color: var(--border) !important; }
    .set-brand-pill-success { background: #183321 !important; color: #75b798 !important; border-color: #2b5738 !important; }
    .set-brand-pill-muted { background: var(--surface2) !important; color: var(--text2) !important; border-color: var(--border) !important; }
    .set-brand-caret { color: var(--text2) !important; }
    .set-brand-row.is-open .set-brand-caret { color: #A29BFE !important; }
    .set-danger-card { background: #220d0d !important; border-color: #5a2020 !important; }
    .set-danger-icon-box { background: #381515 !important; border-color: #5a2020 !important; }
    .set-danger-title { color: #f08080 !important; }
    .set-danger-sub { color: #e57373 !important; }
}
html.dark .set-brand-hdr { color: #A29BFE !important; }
html.dark .set-brand-card { background: var(--surface) !important; border-color: var(--border) !important; }
html.dark .set-brand-card .set-collapse { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
html.dark .set-brand-row { border-bottom-color: var(--border) !important; }
html.dark .set-brand-icon-box { background: var(--surface2) !important; border-color: var(--border) !important; }
html.dark .set-brand-title { color: var(--text) !important; }
html.dark .set-brand-sub { color: var(--text2) !important; }
html.dark .set-brand-pill { background: var(--surface2) !important; color: #A29BFE !important; border-color: var(--border) !important; }
html.dark .set-brand-pill-success { background: #183321 !important; color: #75b798 !important; border-color: #2b5738 !important; }
html.dark .set-brand-pill-muted { background: var(--surface2) !important; color: var(--text2) !important; border-color: var(--border) !important; }
html.dark .set-brand-caret { color: var(--text2) !important; }
html.dark .set-brand-row.is-open .set-brand-caret { color: #A29BFE !important; }
html.dark .set-danger-card { background: #220d0d !important; border-color: #5a2020 !important; }
html.dark .set-danger-icon-box { background: #381515 !important; border-color: #5a2020 !important; }
html.dark .set-danger-title { color: #f08080 !important; }
html.dark .set-danger-sub { color: #e57373 !important; }

/* ── HLAVIČKY SEKCÍ V NASTAVENÍ (`.set-head`) ─────────────────────────────
   Devět rozbalovacích hlaviček (Přehledy, Záloha dat, Předplatné, Velikost
   písma, Oblíbená kočka, Vlastní smlouvy, Profil chovatele, Statistika
   stanice, Nebezpečná zóna) má pozadí natvrdo inline (#F8F6FC, u nebezpečné
   zóny #FCEBEB) a NEMĚLO třídu `.set-bg`, takže je pravidlo výš vůbec
   nezasáhlo — v tmavém režimu zůstávaly jako bílé pruhy. Nestačí ale jen
   přebarvit pozadí: nadpis (#3C3489), stříška `.gen-caret` (#7F77DD) i
   čtvereček s ikonou (#EEEDFE) jsou také natvrdo, takže se musí přebarvit
   s ním, jinak by vznikl tmavý text na tmavém pruhu. Ve světlém režimu
   pravidlo neexistuje — inline hodnoty platí dál a vzhled se nemění.
   Nebezpečná zóna si drží červenou identitu, jen v tmavé variantě
   (#2a0f0f/#f08080 — stejná dvojice jako `.btn-danger` výš).
   Blok se opět píše dvakrát: @media (prohlížeč) a html.dark (Capacitor). */
@media (prefers-color-scheme: dark) {
    .set-head { background: var(--surface2) !important; border-bottom-color: var(--border) !important; }
    .set-head strong { color: var(--text) !important; }
    .set-head .gen-caret { color: var(--tile-ink-violet) !important; }
    .set-head > div { background: var(--surface) !important; }
}
html.dark .set-head { background: var(--surface2) !important; border-bottom-color: var(--border) !important; }
html.dark .set-head strong { color: var(--text) !important; }
html.dark .set-head .gen-caret { color: var(--tile-ink-violet) !important; }
html.dark .set-head > div { background: var(--surface) !important; }

/* Tělo rozbalené sekce (`.set-collapse`) má v CSS natvrdo `#F8F6FC` — po
   ztmavení hlaviček by pod tmavým pruhem zůstal bílý panel. */
@media (prefers-color-scheme: dark) {
    .set-collapse { background: var(--surface) !important; }
}
html.dark .set-collapse { background: var(--surface) !important; }

/* `.filter-btn-icon .mt-icon` má výplň natvrdo `#EDE7F9` — hodnotu hlídá test
   integrity („.mt-icon má výplň přesně #EDE7F9 a je kulatá"), takže se v
   pravidle NEMĚNÍ a tmavá varianta se dopisuje až sem. */
@media (prefers-color-scheme: dark) { .filter-btn-icon .mt-icon { background: var(--surface2) !important; } }
html.dark .filter-btn-icon .mt-icon { background: var(--surface2) !important; }

/* Šipky roletek jsou kreslené jako data-URI SVG, kde barva obrysu není
   vlastnost CSS, ale součást adresy obrázku — proměnná do ní nedosáhne.
   V tmavém režimu proto celý obrázek přepisujeme za týž tvar se světlým
   obrysem (accent #B58EE8 u obecných roletek, #7FC4EC u modré roletky
   Oblíbené kočky). Když se bude šipka někdy měnit, změň OBĚ varianty. */
@media (prefers-color-scheme: dark) {
    .filters-row-4col .app-select, #stats .app-select, #litter-toolbar-left .app-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23B58EE8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; }
    #fav-cat-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237FC4EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; }
}
html.dark .filters-row-4col .app-select,
html.dark #stats .app-select,
html.dark #litter-toolbar-left .app-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23B58EE8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; }
html.dark #fav-cat-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237FC4EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; }

/* proklik 2026-08-24 (8. kolo): NALEZENA PŘÍČINA — tohle byl zbytek z doby,
   kdy Záloha dat měla 6 dlaždic (včetně odstraněného „Návodu"). Pravidlo
   mělo `!important`, takže na širších oknech (≥600px) potichu PŘEBÍJELO
   inline `grid-template-columns:repeat(5,1fr)` z index.html a vnucovalo
   6 sloupců pro 5 dlaždic — proto zůstávala napravo mezera přesně o šířku
   jednoho sloupce navíc, i když kontejner samotný měl už správnou šířku.
   Teď zbytečné: inline `repeat(5,1fr)` funguje stejně na jakékoli šířce
   (elastické 1fr sloupce se nemusí přeskupovat), takže celé pravidlo pryč. */

/* ============================================================================
   TMAVÝ REŽIM — dodatečné opravy kontrastu (nález z proklikání draftu).
   Blok se záměrně píše dvakrát: jednou pro @media (prohlížeč) a jednou pro
   html.dark (Capacitor/WebView). Deklarace MUSÍ zůstat shodné — když budeš
   něco měnit, měň to na obou místech.
   ========================================================================= */

/* --- 1) Popisky spodní lišty. Barvy jsou natvrdo v index.html jako inline
       style, proto !important. Odstíny zůstávají, jen se zesvětlily tak,
       aby proti --surface (#2b2920) držely aspoň 4,5. --- */
@media (prefers-color-scheme: dark) {
  .tab-label[data-lang="tab_cats"]      { color: #7FC4EC !important; }
  .tab-label[data-lang="tab_litters"]   { color: #C9A0E8 !important; }
  .tab-label[data-lang="tab_finance"]   { color: #F0B860 !important; }
  .tab-label[data-lang="tab_calendar"]  { color: #63D18F !important; }
  .tab-label[data-lang="tab_supplies"]  { color: #E0AA55 !important; }
  .tab-label[data-lang="tab_settings"]  { color: #A8B8C8 !important; }
}
html.dark .tab-label[data-lang="tab_cats"]     { color: #7FC4EC !important; }
html.dark .tab-label[data-lang="tab_litters"]  { color: #C9A0E8 !important; }
html.dark .tab-label[data-lang="tab_finance"]  { color: #F0B860 !important; }
html.dark .tab-label[data-lang="tab_calendar"] { color: #63D18F !important; }
html.dark .tab-label[data-lang="tab_supplies"] { color: #E0AA55 !important; }
html.dark .tab-label[data-lang="tab_settings"] { color: #A8B8C8 !important; }

/* --- 2) Filtrační pilulky (Kocouři / Kočky / Kastráti / Archiv).
       Neaktivní jsou v kódu světle levandulové (#E0CEF4) a v tmavém režimu
       svítí. Ztlumují se jen NEAKTIVNÍ; aktivní (#6B3FA0, bílý text) zůstává
       beze změny, takže rozdíl mezi vybranou a nevybranou zůstává zřetelný. --- */
@media (prefers-color-scheme: dark) {
  button[style*="#E0CEF4"] {
    background: #2A2438 !important;
    border-color: #4A4270 !important;
    color: #D6C4EE !important;
  }
}
html.dark button[style*="#E0CEF4"] {
  background: #2A2438 !important;
  border-color: #4A4270 !important;
  color: #D6C4EE !important;
}

/* --- 3) Odznaky, které mají akcent jako POZADÍ a bílý text (10 míst v app.js,
       zápis `background:var(--accent);color:#fff`). Zesvětlením akcentu by
       bílý text klesl na 2,63 — proto se v tmavém režimu obrací na tmavý.
       Kontrast #1F1430 na #B58EE8 je 6,66. --- */
@media (prefers-color-scheme: dark) {
  [style*="background:var(--accent)"] { color: #1F1430 !important; }
}
html.dark [style*="background:var(--accent)"] { color: #1F1430 !important; }

/* --- 4) Zbylá místa s akcentem napsaným natvrdo v inline stylu (např. tlačítko
       „⇅ Řazení"). Selektor cílí VÝHRADNĚ na `color:#6B3FA0` a `solid #6B3FA0`,
       ne na `background:#6B3FA0` — jinak by aktivní filtrační pilulka
       dostala fialový text na fialovém pozadí. --- */
@media (prefers-color-scheme: dark) {
  [style*="color:#6B3FA0"] { color: #B58EE8 !important; }
  [style*="solid #6B3FA0"] { border-color: #B58EE8 !important; }
}
html.dark [style*="color:#6B3FA0"] { color: #B58EE8 !important; }
html.dark [style*="solid #6B3FA0"] { border-color: #B58EE8 !important; }

/* --- 5) Přepínač jazyka. Barvu mu nastavuje JavaScript, takže se v atributu
       uloží jako `rgb(107, 63, 160)` a selektory na `#6B3FA0` ho minou.
       Proto se cílí podle id. --- */
@media (prefers-color-scheme: dark) {
  #lang-pill-btn { color: #B58EE8 !important; border-color: #B58EE8 !important; }
}
html.dark #lang-pill-btn { color: #B58EE8 !important; border-color: #B58EE8 !important; }

/* --- 6) Zástupná ikona koťat. Dospělí mají 🐱 (barevná hlava, jas 176),
       koťata 🐾 — a packy jsou v emoji fontu tmavě šedé (jas 70), takže
       v tmavém režimu splývaly s --surface2. Emoji nejde obarvit přes color,
       proto filtr. brightness(2.6) je změřená hodnota: zvedne packy na jas
       182, tedy na stejnou viditelnost, jakou má ikona u dospělých.
       Obal <span class="ph-paw"> je v app.js, aby se filtr nedotkl fotek
       ani odznaku s počtem příloh ve stejném čtverečku. --- */
@media (prefers-color-scheme: dark) {
  .ph-paw { filter: brightness(2.6); }
}
html.dark .ph-paw { filter: brightness(2.6); }



/* Srdíčka po založení nového vrhu — viz _oslavaSrdicka() v app.js.
   Animace je krátká a jednorázová; vrstva se po 2,4 s sama odstraní. */
@keyframes oslava-let {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-70vh) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Pojistka v CSS pro případ, že by se JS kontrola obešla. */
  #oslava-srdicka { display: none !important; }
  #vyroci-kvetiny { display: none !important; }
}

/* ── DÁVKA 56: statistika stanice ────────────────────────────────────────
   Řádky „popisek — hodnota" v rozklikávacím řádku Nastavení.

   ROZMĚRY JSOU V px, ne v em — s velikostí písma se mění jen text, ne
   odsazení ani mezery. Totéž pravidlo jako u dlaždic a u pásku „Dnes před
   rokem". Výška se neurčuje vůbec: řídí ji obsah, takže se dlouhý popisek
   zalomí místo aby přetekl.

   Popisek a hodnota jsou dva sloupce, které se při úzkém okně zalomí pod
   sebe (`flex-wrap`) — v maďarštině a francouzštině je popisek dlouhý
   a hodnota by se jinak vytlačila ven. */
.stat-stanice { margin-top: 10px; }
.stat-st-radek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.stat-st-radek:last-child { border-bottom: 0; }
.stat-st-popis {
  font-size: 13px;
  color: var(--text2);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.stat-st-hod {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.stat-st-prazdno {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Extra písmo. Malé a Velké jedou přes `zoom`, takže rostou samy; Extra mění
   jen `--fs-scale` a musí se dopočítat ručně — týž postup jako u dlaždic
   příloh (ř. 888) a tlačítek prohlížeče. ROSTE JEN PÍSMO: odsazení řádků
   zůstává 7 px a mezera mezi sloupci 12 px, tedy přesně jak to zadání chce.
   Naměřeno: bez tohohle pravidla zůstal přehled při Extra na 13 px, zatímco
   jméno kočky vedle něj mělo 24. */
html.font-xlarge .stat-st-popis,
html.font-xlarge .stat-st-hod,
html.font-xlarge .stat-st-prazdno {
  font-size: calc(13px * var(--fs-scale)) !important;
}

/* ── DÁVKA 55: popisek „český tiskopis" u tlačítka ───────────────────────
   Sází se do tlačítka v nabídce dokumentů vrhu. Vlastní řádek, aby se
   nemíchal s názvem dokumentu, a menším tichým písmem — je to vysvětlení,
   ne druhý název. Velikost je v `em`, takže roste s písmem tlačítka; výšku
   tlačítka to nezmění, protože ta se řídí obsahem. */
.doc-cz {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  opacity: .75;
  margin-top: 2px;
}

/* ── DÁVKA 54: dnešní značky v seznamu ───────────────────────────────────
   Dortík u narozenin a tichá věta u koťátka, které dnes odchází.

   ROZMĚRY ŘÁDKU SE NESMÍ ZMĚNIT. Dortík je proto `1em` a `line-height: 1` —
   roste s písmem (je to znak, ne obrázek), ale nikdy nepřeroste řádek, který
   drží jméno se svou vlastní výškou řádku. Odsazení je v px, ne v em, takže
   se s velikostí písma nemění mezera, jen text. Totéž pravidlo jako
   u dlaždic a u pásku „Dnes před rokem“ níž.

   DORTÍK SE SÁZÍ DOVNITŘ `<strong>` SE JMÉNEM, ne vedle něj. Naměřeno
   v prohlížeči: při Extra písmu má jméno 24 px, ale obalový `<div>` zůstává
   na 16 px — a `1em` dědí z RODIČE, ne od sourozence. Vedle jména proto
   dortík zůstal malý (16 px vedle 24px jména). Uvnitř `<strong>` dědí
   správně. Výška karty se tím nezmění ani o pixel (381,3 px před i po).

   Věta o odchodu je „tichá“ doslova: barva `--text2` jako u ostatních
   doplňkových řádků, žádná ikona, žádný rámeček. Zalomí se místo aby
   přetekla — v maďarštině a francouzštině je dlouhá. */
.dortik {
  font-size: 1em;
  line-height: 1;
  margin-left: 4px;
  flex-shrink: 0;
}
.odchod-dnes {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Jedna tlapka, která zamává a zmizí. Vrstva nechytá klepnutí a uklidí se
   sama — týž mechanismus jako srdíčka po vrhu a květiny u pásku. */
@keyframes odchod-mavnuti {
  0%   { transform: rotate(0deg)   scale(0.6); opacity: 0; }
  15%  { transform: rotate(-18deg) scale(1);   opacity: 1; }
  30%  { transform: rotate(14deg)  scale(1);   opacity: 1; }
  45%  { transform: rotate(-12deg) scale(1);   opacity: 1; }
  60%  { transform: rotate(10deg)  scale(1);   opacity: 1; }
  75%  { transform: rotate(-6deg)  scale(1);   opacity: 1; }
  100% { transform: rotate(0deg)   scale(0.9); opacity: 0; }
}

/* ── DÁVKA 47: „Dnes před rokem“ ─────────────────────────────────────────
   Květiny padají shora dolů (srdíčka po vrhu letí zdola nahoru), 3–4 s,
   do ztracena. Vrstva nechytá klepnutí a sama se po sobě uklidí. */
@keyframes vyroci-pad {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(140deg); opacity: 0; }
}
@keyframes oslava-kvetiny {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(140deg); opacity: 0; }
}
/* Připomínka pod pozdravem. ROZMĚRY JSOU PEVNÉ V px, ne v em — s velikostí
   písma se mění jen text, ne fotka ani odsazení (totéž pravidlo jako
   u dlaždic). Výška se neurčuje vůbec: řídí ji obsah, takže se dlouhá věta
   zalomí místo aby přetekla. */
.vyroci-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 0 8px;
  border-radius: var(--radius, 10px);
  background: var(--surface);
  border: 2px solid var(--border);
  box-sizing: border-box;
  width: 100%;
}
/* Kolečko vlevo je tlačítko — klepnutím se květiny spustí znovu. Vypadá
   jako obyčejné kolečko, proto nemá rámeček ani pozadí; ty si nese až
   ikona uvnitř. Dotyková plocha se dorovnává třídou `.tap44` (halo 44 px):
   nad ním i pod ním je odsazení rámečku a vpravo mezera k textu, který
   klikací není — překryv s cizím ovládacím prvkem je tedy nulový. */
.vyroci-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Halo `.tap44` roste přes `::after`, takže musí být nad ním, ne pod. */
  overflow: visible;
}
.vyroci-foto {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.vyroci-ikona {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-light);
  font-size: 20px;
}
.vyroci-text {
  /* `min-width: 0` — bez něj by se text ve flexu odmítl zalomit a vytlačil
     by fotku z řádku. Zalamuje se mezi slovy, nikdy uprostřed slova. */
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text2);
  overflow-wrap: break-word;
}
/* DÁVKA 77, ČÁST 5: má-li dnes narozeniny víc zvířat najednou, `_renderVyroci()`
   (app.js) vloží do `.vyroci-text` víc `.vyroci-radek` — každé jméno na svém
   řádku, ne slité za sebou v jedné větě. */
.vyroci-radek {
  display: block;
}
.vyroci-radek + .vyroci-radek {
  margin-top: 2px;
}


/* Prázdný pás příloh — viz _attStrip() v app.js. */
.att-strip-empty {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--text3);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════
   DOTYKOVÁ PLOCHA — SDÍLENÝ VZOR
   ══════════════════════════════════════════════════════════════════════════
   Doporučená nejmenší dotyková plocha je 44 × 44 px. V aplikaci bylo
   naměřeno 75 klikacích prvků pod tuhle mez, z toho 16 pod 20 px — na
   Androidu to znamená „klepnu a nic se nestane, klepnu podruhé".

   V PROJEKTU ŽÁDNÝ VZOR PRO ZVĚTŠENÍ DOTYKOVÉ PLOCHY NEBYL. Číslo 44 se
   objevovalo jen jako PŘÍMÝ rozměr (`.viewer-nav-btn`, `.tab-icon`), tedy
   spolu se vzhledem. Tady je vzor, který vzhled nemění a dá se použít dál.

   DVĚ VARIANTY, protože jedna na všechno nestačí:

   `.tap44`      — neviditelná plocha OKOLO prvku (pseudoprvek). Vzhled
                   zůstává, klepnutí bere plocha 44 × 44. Pro prvky, které
                   stojí SAMY a mají okolo sebe volné místo.

   `.tap44-row`  — zvětší SÁM PRVEK na 44 px na výšku. Pro prvky ve SVISLÉ
                   ŘADĚ (zaškrtávátka pod sebou), kde by se neviditelné
                   plochy překryly a kradly si klepnutí navzájem — a to je
                   horší než dnešní stav.

   JAK SE ROZHODUJE, KTEROU POUŽÍT: změří se, kolik je okolo prvku volného
   místa do nejbližšího jiného klikacího prvku. Když je z každé strany
   aspoň (44 − rozměr) / 2, smí se `.tap44`. Když ne, buď `.tap44-row`,
   nebo se prvek NECHÁ BÝT a napíše se proč — okno se prvku
   nepřizpůsobuje. Naměřené hodnoty jsou u každého použití. */
.tap44 { position: relative; }
.tap44::after {
    content: '';
    position: absolute;
    /* Vystředěno na prvek: plocha roste symetricky do všech stran, takže
       se nikam „neposune" a měření okolí platí pro obě strany stejně. */
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    /* `max()` drží plochu aspoň 44 px, ale u větších prvků ji nezmenší. */
    width: max(100%, 44px);
    height: max(100%, 44px);
    /* POZOR: `pointer-events` tu NESMÍ být `none` — celý smysl je, že tahle
       plocha klepnutí BERE. To je taky důvod, proč se nesmí rozlézt nad
       sousední prvek; viz `.tap44-row`. */
    z-index: 0;
}
/* Prvek, který je v řadě pod sebou: zvětší se on sám, plochy se nepřekryjí. */
.tap44-row {
    min-height: 44px;
    box-sizing: border-box;
}
/* Třetí varianta: plocha roste JEN NAHORU (a do šířky), dolů ne.
   Pro prvek, který má pod sebou hned jiný ovládací prvek.

   VZNIKLA PRO MAZACÍ KŘÍŽKY U DATA V KARTĚ VRHU — A TY JI PŘESTO NEDOSTALY.
   Naměřeno na draftu při šířce okna 360 px: křížek má střed přesně na horní
   hraně pole „Počet kocourů", a i při rostoucí ploše jen nahoru se překryv
   s CIZÍMI ovládacími prvky zvětší (u `l-mate-clear` z 0 na 326 px², u
   `l-birth-clear` z 297 na 1 432 px²). Chybné klepnutí by smazalo datum,
   což je horší než malý křížek — proto se tam nic nezvětšilo. Rozhodlo
   měření, ne úsudek; podrobná čísla jsou v reportu 22. dávky.


/* ════════════════════════════════════════════════════════════════════════
   ČTVRTÁ CESTA: POLE, NA KTERÁ PSEUDOPRVEK NEFUNGUJE (dávka 24)

   `.tap44` roste přes `::after`. Prohlížeč ale pseudoprvky na NAHRAZOVANÝCH
   prvcích — `<input>` a `<select>` — nevykresluje vůbec. Není to volba
   návrhu, je to tvrdé omezení, a týká se v aplikaci 34 polí: datumů
   a rozbalovacích seznamů, které měly na 360 px 40 až 43 px na výšku.

   Jediné, co na nich funguje, je zvětšit je samotné. Změna 40 → 44 px je
   VIDITELNÁ a Petr ji schválil; menší zásah než obalovat 34 polí do
   `<span>` ve dvanácti souborech těsně před vydáním.

   ZAŠKRTÁVÁTKA A PŘEPÍNAČE SEM NEPATŘÍ a jsou níž vyřazená. Jejich cílem
   klepnutí je popisek, ne ten čtvereček — všech dvacet je obalených
   v `<label>`, takže plocha je 156 až 320 px široká. Zvětšit ten čtvereček
   na 44 px by jen rozhodilo řádek a nic by nezískalo. */
.field input, .field select,
input.date-display, .app-select {
    min-height: 44px;
}
/* Zaškrtávátko ani přepínač růst NESMÍ — klepe se na popisek. Bez tohohle
   řádku by je pravidlo výš nafouklo z 13 × 13 na 44 × 44 a rozbilo řádky. */
.field input[type="checkbox"], .field input[type="radio"] {
    min-height: 0;
}
/* Víceřádkové pole má vlastní, větší minimum — ať ho pravidlo nesnižuje. */
.field textarea { min-height: 70px; }

/* ════════════════════════════════════════════════════════════════════════
   PÁTÁ CESTA: KŘÍŽEK DOSTANE SVOJE MÍSTO VEDLE POLE (dávka 42)

   Mazací křížky u data v kartě vrhu (`l-mate-clear`, `l-mate-last-clear`,
   `l-birth-clear`) seděly ABSOLUTNĚ UVNITŘ datového pole, u pravého okraje.
   Měly 18,5 × 22 px a celá ta plocha ležela na poli, které samo otevírá
   výběr data — překryv s cizím ovládacím prvkem tedy nebyl 0, ale rovnou
   407 px². Dávka 22 zkusila plochu 44 px vyrobit neviditelným halem
   a MĚŘENÍM TO ZAMÍTLA: překryv by narostl na 1 490 px² a chybné klepnutí
   SMAŽE DATUM.

   Halo tedy není řešení — křížek potřebuje VLASTNÍ místo, ne přesah přes
   souseda. Řádek je proto přerovnaný na `flex`: pole se zúží a křížek
   dostane vedle něj svůj sloupec 44 × 44 px.

   PROČ TO NEZMĚNÍ VÝŠKU ŘÁDKU: pole má od dávky 24 `min-height: 44px`,
   takže křížek 44 px na výšku se do už existující výšky přesně vejde.
   Naměřeno: výška řádku 62,5 px před i po.

   PROČ SE DATUM POŘÁD VEJDE: zúžením pole se ubralo 44 px, tak se ubralo
   i jinde — mezera mezi polem a křížkem je nulová a odsazení textu je
   8 px vlevo, 6 px vpravo (dřív 10 a 28, protože pod pravým odsazením
   seděl křížek). Čísla: nejtěsnější je sv při Normálním na 360 px, kde
   nejširší možné datum („2000-06-06") měří 88,5 px proti 95 px místa,
   tedy rezerva 6,5 px. Měřeno na 1 320 kandidátech data, ne na tom, co
   zrovna leží v datech — nejširší číslice je „0" (9,58 px proti 4,37 px
   u „1"), takže na datu z databáze by se to nepoznalo.

   Rozměry jsou v pevných px, ne v `em` — plocha se tedy nemění
   s velikostí písma (totéž pravidlo jako u dlaždic). */
.date-row { display: flex; align-items: center; gap: 0; }
.date-row > input.date-display {
    flex: 1 1 auto;
    /* Bez `min-width: 0` by se pole ve flexu odmítlo zúžit pod svůj
       vlastní obsah a vytlačilo by křížek z řádku. */
    min-width: 0;
    padding-left: 8px;
    padding-right: 6px;
}
.date-row > .date-clear {
    /* `flex: 0 0 44px` — křížek se nesmí smrsknout, když je pole dlouhé. */
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: var(--text3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ── DÁVKA 67, ČÁST 2 → proklik 2026-08-24 (11. kolo): kolik místa zabírají
   fotky a dokumenty (klíč `att_size_title`, dnes „Soubory"/„Files"/…).
   Do 11. kola to byla samostatná karta POD gridem Zálohy dat; teď je nadpis
   + ikona natvrdo šestou dlaždicí gridu (index.html) a `#att-size-row`
   uvnitř ní nese JEN dynamickou hodnotu (velikost/počet) — proto tu zbývá
   jen drobný podtext, ne celá karta. Případné varování (moc/skoro moc
   souborů) je příliš dlouhý text na úzkou dlaždici v 3sloupcovém gridu,
   proto `renderAttSizeRow()` (app.js) píše ho do SAMOSTATNÉHO
   `#att-size-alert-row` POD celým gridem, na plnou šířku — ten si podržel
   původní vzhled karty (`border-radius:14px`, `padding:12px 14px`,
   max-width 600px), jen bez řádku s ikonou/nadpisem (ten už dlaždice má).

   ROZMĚRY JSOU V PEVNÝCH px a NEMĚNÍ SE S VELIKOSTÍ PÍSMA — mění se jen
   písmo. Proto tu není `em` ani `rem` u odsazení, mezer a poloměrů. */
.att-size-row:empty { display: none; }
.att-size-row {
    font-size: 11px;
    font-weight: 500;
    color: inherit;
    text-align: center;
    line-height: 1.3;
}
.att-size-value {
    font-size: 11px;
    color: inherit;
}
.att-size-alert-row:empty { display: none; }
.att-size-alert-row {
    max-width: 600px;
    margin: 10px auto 0;
    width: 100%;
}
.att-size-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.45;
}
/* Žlutá = „ještě je čas". Táž dvojice barev jako u ostatních upozornění
   v aplikaci; nic nového se nezavádí. */
.att-size-alert-varovani {
    background: var(--sf-cream-alert);
    border: 1px solid var(--tile-brd-cream-alert);
    color: var(--tile-ink-cream-alert);
}
/* Červená = „poslední chvíle". Táž jako u Nebezpečné zóny v Nastavení. */
.att-size-alert-durazne {
    background: var(--sf-red-soft);
    border: 1px solid var(--tile-brd-red2);
    color: var(--tile-ink-red2);
    font-weight: 500;
}
.att-size-alert-ico { flex: 0 0 auto; line-height: 1.45; }

/* proklik 2026-08-24 (2. kolo): tlačítka Velikost písma byla obyčejné bílé
   obdélníky s tenkým šedým rámečkem — vybraná položka se poznala jen podle
   trochu tmavšího okraje (`applyFontSize()` v app.js).
   proklik 2026-08-24 (4. kolo): jednotná fialová nahrazena barvou PODLE
   ROLE (Malé fialová, Normální zelená, Velké žlutá, Extra coral) — stejná
   škála jako Záloha dat / Předplatné jinde v appce. Vybraná dlaždice se
   pozná silnějším rámečkem (2px, `currentColor` — bere barvu z vlastní
   `.fs-btn-clr-*` třídy, ne jednotnou fialovou). */
.fs-btn {
    border-radius: 10px;
    border: 1.5px solid transparent;
}
/* proklik 2026-08-24 (5. kolo): PŘESNÉ hex ze zadání, ne odvozeno z
   existující palety appky — stejná škála jako Záloha dat / Předplatné
   v tomto kole (modrá/zelená/žlutá/červená). */
.fs-btn-clr-small  { background: var(--sf-blue); border-color: var(--sf-blue); color: var(--tile-ink-blue); }
.fs-btn-clr-normal { background: var(--sf-green); border-color: var(--sf-green); color: var(--tile-ink-green); }
.fs-btn-clr-large  { background: var(--sf-amber); border-color: var(--sf-amber); color: var(--tile-ink-amber); }
.fs-btn-clr-xlarge { background: var(--sf-red); border-color: var(--tile-brd-red); color: var(--tile-ink-red); }
.fs-btn.fs-btn-active {
    border-width: 2px;
    border-color: currentColor;
}

/* proklik 2026-08-24 (2. kolo): popisné texty uvnitř sekcí Nastavení
   (stav předplatného, prázdné stavy) byly v základním řezu bez hierarchie
   — vypadaly jako placeholder. Dvě role:
   .set-status = krátký stavový popisek NAD tlačítkem (Předplatné) — o
   trochu větší a tučnější, ať je stav vidět na první pohled.
   .set-empty  = „zatím tu nic není" (Statistika stanice, Vlastní smlouvy).
   proklik 2026-08-24 (3. kolo): kurzíva + tlumená `--text3` z minulého kola
   byly příliš slabé, špatně čitelné — Petr chtěl zpátky obyčejný text.
   Teď `var(--text)` (hlavní barva textu appky), řez 400, beze změny
   velikosti — pořád jasně popisek (menších 13px), ne hlavní obsah, ale
   čitelný. */
.set-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
}
.set-empty {
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
}

/* ── DÁVKA 67, ČÁST 3: hledání v celé aplikaci ────────────────────────────
   Výsledky v okně `#gsearch-overlay`. Vzhled je držený v duchu zbytku
   aplikace — hlavička skupiny vypadá jako nadpis pásu příloh
   (`.att-strip-title`), položka jako řádek v seznamu kontaktů.

   ROZMĚRY JSOU V PEVNÝCH px a NEMĚNÍ SE S VELIKOSTÍ PÍSMA — mění se jen
   písmo. Řádek proto NEMÁ pevnou výšku: dlouhé jméno se musí vejít
   i při Extra písmu (poučení z dlaždice příloh, kde pevná výška byla
   sama příčinou uřezaného textu). */
.gs-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
}
.gs-group-title:first-child { margin-top: 0; }
.gs-count {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text3);
    font-size: 11px;
    font-weight: 700;
}
.gs-item {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 6px;
    cursor: pointer;
    /* Minimální výška pro prst, ne pevná výška pro text. */
    min-height: 44px;
    box-sizing: border-box;
}
.gs-item:active { background: var(--surface2); }
.gs-item-name { font-size: 14px; font-weight: 600; color: var(--text); }
.gs-item-note { margin-top: 2px; font-size: 12px; color: var(--text3); }
.gs-more { padding: 4px 12px 8px; font-size: 12px; color: var(--text3); }
.gs-hint { padding: 18px 4px; font-size: 13px; color: var(--text3); text-align: center; line-height: 1.5; }

/* ── DÁVKA 67, ČÁST 4: denní přehled „co dnes" ────────────────────────────
   Pásek pod pozdravem na domovské obrazovce. Vzhled je opsaný z pásku
   „Dnes před rokem" (`.vyroci-box`) hned nad ním — týž rámeček, tytéž
   barvy, totéž odsazení. Nic nového se nezavádí.

   ROZMĚRY JSOU PEVNÉ V px, ne v em — s velikostí písma se mění jen text.
   Výška se neurčuje vůbec: řídí ji obsah, takže se dlouhý popisek zalomí
   místo aby přetekl (poučení z dlaždice příloh). */
.top-tiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 7px;
  width: 100%;
}
.top-info-tile {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius, 10px);
  height: 48px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  user-select: none;
  transition: transform 0.1s ease;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.top-info-tile:active {
  transform: scale(0.97);
}
.top-tile-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.top-tile-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.15;
  overflow: hidden;
}
.top-tile-sub {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text3);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-tile-main {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.cd-license-tile.top-info-tile {
  position: relative;
  width: 100%;
  height: 48px;
  min-width: 0;
  max-width: none;
  min-height: 48px;
  max-height: 48px;
  padding: 6px 10px;
  border-width: 2px;
  border-style: solid;
}
.cd-license-tile.top-info-tile .cd-license-icon {
  position: static;
  transform: none;
  font-size: 20px;
  flex-shrink: 0;
  margin-right: 8px;
}
.cd-license-tile.top-info-tile .cd-license-text {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.15;
  overflow: hidden;
}
.cd-license-tile.top-info-tile .cd-license-top {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-license-tile.top-info-tile .cd-license-bottom {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
/* Slavnostní zvýraznění oslavence v seznamu (Červený styl pro psy) */
.dog-card.is-birthday-today, .cat-card.is-birthday-today {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25), 0 4px 12px rgba(0,0,0,0.08) !important;
}
.dog-bday-ribbon, .cat-bday-ribbon {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.dog-bday-sub, .cat-bday-sub {
  font-size: 11px;
  opacity: 0.95;
  font-weight: 700;
}
@media (max-width: 480px) {
  .dog-bday-ribbon, .cat-bday-ribbon {
    font-size: 11px;
    padding: 5px 10px;
  }
  .dog-bday-sub, .cat-bday-sub {
    font-size: 10px;
  }
}
html.dark .dog-card.is-birthday-today, html.dark .cat-card.is-birthday-today {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4) !important;
}

.cd-box {
  padding: 8px 12px;
  margin: 0 0 7px;
  border-radius: var(--radius, 10px);
  background: var(--surface);
  border: 2px solid var(--border);
  box-sizing: border-box;
  width: 100%;
}
.cd-box-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cd-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.cd-ikona { font-size: 20px; flex: 0 0 auto; }
.cd-empty {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text2);
  overflow-wrap: break-word;
}
.cd-license-tile {
  position: relative;
  width: 160px;
  height: 40px;
  min-width: 160px;
  max-width: 160px;
  min-height: 40px;
  max-height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  border: 1.5px solid transparent;
  padding: 2px 6px;
  text-decoration: none;
  user-select: none;
  transition: transform 0.1s ease;
}
.cd-license-tile:hover {
  transform: scale(1.02);
}
.cd-license-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
.cd-license-text {
  text-align: center;
  width: 100%;
  pointer-events: none;
}
.cd-license-top {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cd-license-bottom {
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.85;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}
.cd-lic-sub {
  background: #F4EEFB;
  border-color: #C9AEEC;
  color: #4C2683;
}
.cd-lic-lifetime {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}
.cd-lic-trial {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.cd-lic-expired {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
@media (prefers-color-scheme: dark) {
  .cd-lic-sub {
    background: #311A52;
    border-color: #8B5CF6;
    color: #DDD6FE;
  }
  .cd-lic-lifetime {
    background: #064E3B;
    border-color: #34D399;
    color: #A7F3D0;
  }
  .cd-lic-trial {
    background: #451A03;
    border-color: #FBBF24;
    color: #FDE68A;
  }
  .cd-lic-expired {
    background: #450A0A;
    border-color: #F87171;
    color: #FECACA;
  }
}
.cd-nadpis {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 6px;
}
.cd-skupina {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text3);
}
.cd-skupina:first-of-type { margin-top: 2px; }
.cd-pocet {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface2);
  font-size: 10px;
}
/* DÁVKA 77, ČÁST 6: `.cd-skupina-po` a `.cd-radek-po` (červená pro skupinu „Po termínu")
   smazány — ta skupina se v „co dnes" na domovské obrazovce už nevykresluje vůbec
   (renderCoDnes() dál nepoužívá `v.poTerminu`), takže tyhle třídy nikdo nevypisuje. */
.cd-radek {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Minimální výška pro prst, ne pevná výška pro text. */
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  box-sizing: border-box;
}
.cd-radek:active { background: var(--surface2); }
.cd-radek-ico { flex: 0 0 auto; font-size: 16px; }
.cd-radek-text {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text2);
  overflow-wrap: break-word;
}
.cd-vic {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

/* ─── NAROZENINOVÝ BANNER (2. 9. 2026, přeneseno 1:1 z appky Psi) ───────
   Ukáže se v den narozenin kočky nebo koťátka. Rozměry jsou OPSANÉ
   z pásku „co dnes" (.cd-box pár řádků výš) — týž padding 8px 10px, týž
   margin 0 4px 8px, týž poloměr 12px, týž rám a tatáž výplň. Appka Psi má
   u sebe přesně tyhle hodnoty (jejich `.birthday-banner` vznikl opsáním
   od nás), takže „1:1 podle Psi" a „ladí s našimi bannery" je tady jedna
   a tatáž věc — nic se nevymýšlí a nic se nerozchází.

   ROZMĚRY JSOU V PIXELECH, ne v `em`: při Extra písmu roste PÍSMO, ne rám
   kolem něj — pravidlo celé aplikace (viz .nv-box níž). Pevná výška tu
   proto není žádná, dlouhý překlad se má kam zalomit. */
.birthday-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin: 0 0 7px;
  border-radius: var(--radius, 10px);
  background: var(--surface);
  border: 2px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}
.birthday-banner-text {
  min-width: 0;
  flex: 1;
  overflow-wrap: break-word;
}
/* Dortík je tlačítko, ne obrázek — vypadá ale jako text vedle sebe,
   proto žádné pozadí ani rám. Týž tvar používá i dortík na konci pásku
   „co dnes" (renderCoDnes()), aby oba vypadaly stejně. */
.birthday-banner-cake {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  vertical-align: -2px;
}

/* ─── DÁVKA 68, ČÁST 2: PRUH „JE TU NOVÁ VERZE" ─────────────────────────
   Vzhled je opsaný z pásku „co dnes" (.cd-box) o pár set řádků výš — týž
   poloměr, týž rám, tatáž vnitřní mezera. Nic nového se nevymýšlí, jen
   je pruh zvýrazněný barvou přízvuku, protože je na něj potřeba klepnout.

   ROZMĚRY JSOU V PIXELECH, ne v `em`. Při Extra písmu se má zvětšit
   PÍSMO, ne rám kolem něj — to je pravidlo celé aplikace.
   Text se smí zalomit (`flex-wrap`), aby se při dlouhém překladu
   a velkém písmu tlačítko sesunulo pod text místo přetečení. */
.nv-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 0 7px;
  border-radius: 12px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  box-sizing: border-box;
  width: 100%;
}
.nv-text { min-width: 0; flex: 1 1 160px; }
.nv-nadpis {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: break-word;
}
.nv-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--tile-ink-on-solid);
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

/* ── DÁVKA 68, ČÁST 3: PRUH NOVÉ VERZE PŘI EXTRA PÍSMU ──────────────────
   PAST, DO KTERÉ SE V TOMHLE PROJEKTU UŽ JEDNOU ŠLAPLO: plošná pravidla
   `html.font-xlarge [style*="font-size:Npx"]` chytnou jen INLINE styl.
   Text stylovaný CSS TŘÍDOU by při Extra zůstal, jak byl — a proti „Velké"
   (které zvětšuje `zoom`) by se dokonce opticky ZMENŠIL. Třídy `.nv-*`
   jsou proto vyjmenované tady.

   ROSTE JEN PÍSMO. Rám, poloměr ani vnitřní mezera se nemění, přesně jako
   u „Dnes před rokem" a u pásku „co dnes". Výška pruhu se zvětší sama
   podle textu, protože pevnou výšku nemá. */
html.font-xlarge .nv-nadpis { font-size: calc(14px * var(--fs-scale)) !important; }
html.font-xlarge .nv-btn    { font-size: calc(13px * var(--fs-scale)) !important; }

/* ── APPLE INSET DESIGN ZÁLOŽEK V KARTĚ KOČKY A KOTĚTE (ACCORDIONS) ────────── */
.apple-sec-group {
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
    margin: 14px 0 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.apple-sec-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    user-select: none;
    transition: background 0.15s ease;
    background: var(--surface);
}
.apple-sec-group > .apple-sec-row:last-of-type {
    border-bottom: none;
}
.apple-sec-row:hover {
    background: var(--surface2);
}
.apple-sec-row:active {
    opacity: 0.85;
}
.apple-sec-row.is-open {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.apple-sec-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.06);
    box-sizing: border-box;
}
.apple-sec-title {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.1px;
}
.apple-sec-row .sec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981 !important;
    margin-left: auto;
    margin-right: 6px;
    flex-shrink: 0;
}
.apple-sec-row .gen-caret {
    font-size: 14px;
    font-weight: 700;
    color: var(--text2);
    line-height: 1;
    transition: transform 0.2s ease, color 0.15s ease;
}
.apple-sec-row.is-open .gen-caret {
    color: var(--accent);
}
.apple-sec-content {
    border-bottom: 1px solid var(--border);
    padding: 14px 14px 10px;
    background: var(--surface2);
}
.apple-sec-group > .apple-sec-content:last-child {
    border-bottom: none;
}

/* ==================== MODERNÍ ZÁSOBY (SUPPLIES) ==================== */
.supplies-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.supply-item-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    margin-bottom: 0 !important;
}
.supply-item-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Filtrační dlaždice aktivní - jemný podklad ze spodní lišty */
.supply-filter-tile.active {
    background: #F1EAFA !important;
    border: 1px solid #6B3FA0 !important;
    color: #6B3FA0 !important;
    box-shadow: 0 2px 8px rgba(107, 63, 160, 0.15) !important;
}
.supply-filter-tile.active .supply-badge-count {
    background: #6B3FA0 !important;
    color: #ffffff !important;
    border: none !important;
}
html.dark .supply-filter-tile.active {
    background: rgba(181, 142, 232, 0.15) !important;
    border-color: #B58EE8 !important;
    color: #B58EE8 !important;
}
html.dark .supply-filter-tile.active .supply-badge-count {
    background: #B58EE8 !important;
    color: #1F1430 !important;
}
.supply-filter-tile {
    min-height: 54px;
}
html.font-xlarge .supply-filter-tile {
    min-height: 58px !important;
    padding-top: 8px !important;
    padding-bottom: 7px !important;
}
html.font-xlarge .supply-top-stat-lbl {
    margin-top: 3px !important;
    padding-bottom: 2px !important;
}

/* Web / Desktop Kanban zobrazení zásob (3 sloupce) */
.supplies-desktop-cols {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    align-items: start;
    box-sizing: border-box;
}
.supply-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.supply-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.supply-col-count {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 14px;
    text-align: center;
}
.supply-col-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.supply-col-cards > .supply-item-card {
    height: 128px;
    box-sizing: border-box;
}

.supplies-mobile-view {
    display: block;
    width: 100%;
}

@media (min-width: 768px) {
    .supplies-desktop-cols {
        display: grid;
    }
    .supplies-mobile-view {
        display: none;
    }
}
.supply-top-stat-lbl {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html.font-xlarge .supply-top-stat-lbl {
    font-size: 11px !important;
}
.supply-type-tile {
    transition: all 0.15s ease;
}
.supply-type-tile:active {
    transform: scale(0.96);
}

/* Zdravotní záznamy — dotykové dlaždice pro výběr typu */
.health-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.health-type-tile {
    padding: 9px 4px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
}
.health-type-tile:active {
    transform: scale(0.96);
}
.health-type-tile.active {
    border: 2px solid var(--accent) !important;
    background: rgba(107, 63, 160, 0.1) !important;
}
.health-type-tile .tile-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 3px;
}
.health-type-tile .tile-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.health-type-tile.active .tile-text {
    font-weight: 800;
    color: var(--accent);
}

/* Responzivní přizpůsobení pro Velké a Extra velké písmo */
html.font-large .health-type-grid,
html.font-xlarge .health-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
html.font-large .health-type-tile,
html.font-xlarge .health-type-tile {
    min-height: 64px;
    padding: 10px 6px;
}
html.font-large .health-type-tile .tile-text,
html.font-xlarge .health-type-tile .tile-text {
    font-size: 13px;
}

.health-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 6px;
}
html.font-large .health-date-grid,
html.font-xlarge .health-date-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
}

/* ==========================================================================
   RYCHLÉ HLEDÁNÍ V KARTĚ KOČKY / KOTĚTE (Card Quick Search)
   ========================================================================== */
.card-search-strip {
    padding: 6px 12px 10px;
    position: relative;
    background: transparent;
    display: flex;
    justify-content: center;
}
.card-search-pill-box {
    display: inline-flex;
    align-items: center;
    background: var(--surface, #ffffff);
    border: 1.5px solid #BAE6FD;
    border-radius: 20px;
    box-shadow: 0 2px 7px rgba(186, 230, 253, 0.35);
    padding: 2px 8px 2px 5px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}
@media (min-width: 601px) {
    .card-search-pill-box {
        max-width: 320px;
    }
}
.card-search-pill-box:focus-within {
    border-color: #38BDF8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}
.card-search-pill-badge {
    background: #E0F2FE;
    color: #0369A1;
    border: 1px solid #BAE6FD;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 4px 8px;
    border-radius: 12px;
    margin-right: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}
.card-search-pill-input {
    border: none;
    background: transparent;
    outline: none;
    padding: 4px 2px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text, #111);
    width: 100%;
    min-width: 0;
}
.card-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text3, #999);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.card-search-clear:hover {
    color: var(--danger, #e53935);
}
.card-search-dropdown {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 100%;
    margin-top: 4px;
    width: auto;
    max-width: none;
    background: var(--surface, #fff);
    border: 1.5px solid #BAE6FD;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    max-height: min(380px, 55vh);
    max-height: min(380px, 55dvh);
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
}
.card-search-dropdown.drop-up {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.22) !important;
}
@media (min-width: 601px) {
    .card-search-dropdown {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 100% !important;
        max-width: 330px !important;
    }
}
html.dark .card-search-pill-box {
    border-color: #0369A1;
    box-shadow: 0 2px 7px rgba(3, 105, 161, 0.2);
}
html.dark .card-search-pill-box:focus-within {
    border-color: #38BDF8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}
html.dark .card-search-pill-badge {
    background: #0C447C;
    color: #7FC4EC;
    border-color: #0369A1;
}
html.dark .card-search-dropdown {
    border-color: #0369A1;
}
.card-search-header {
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text3, #888);
    background: var(--surface2, #f7f7f9);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--border, #eee);
}
.card-search-item {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border, #f0f0f0);
    transition: background 0.15s;
    user-select: none;
}
.card-search-item:last-child {
    border-bottom: none;
}
.card-search-item:hover,
.card-search-item:active {
    background: rgba(107, 63, 160, 0.08);
}
.card-search-ico {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.card-search-info {
    flex: 1;
    min-width: 0;
}
.card-search-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #222);
    margin-bottom: 1px;
}
.card-search-item-desc {
    font-size: 11px;
    color: var(--text2, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-search-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.card-search-badge.badge-primary {
    background: var(--accent, #6B3FA0);
    color: #fff;
}
.card-search-badge.badge-neutral {
    background: var(--surface2, #eee);
    color: var(--text2, #555);
}

/* Úpravy pro velká a extra velká písma */
html.font-large .card-search-pill-box,
html.font-xlarge .card-search-pill-box {
    max-width: 100%;
}
html.font-large .card-search-pill-input,
html.font-xlarge .card-search-pill-input {
    font-size: 14px;
}
html.font-large .card-search-item-title,
html.font-xlarge .card-search-item-title {
    font-size: 14px;
}
html.font-large .card-search-item-desc,
html.font-xlarge .card-search-item-desc {
    font-size: 12px;
}

/* Zajištění, že otevřený našeptávač na kartě zvířete nebude oříznut spodním okrajem karty */
.dog-card.has-open-search, .cat-card.has-open-search,
.pup-row.has-open-search {
    overflow: visible !important;
    z-index: 9999 !important;
    contain: none !important;
}

/* Výstavy akční dlaždice - shodná velikost na mobilu i webu */
.shows-header-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}
.shows-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}
.shows-action-tile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 40px !important;
    height: 100% !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    line-height: 1.2 !important;
    hyphens: auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}
html.font-large .shows-action-tile {
    font-size: 11px !important;
    padding: 6px 4px !important;
}
html.font-xlarge .shows-action-tile {
    font-size: 10.5px !important;
    padding: 6px 2px !important;
}
@media (min-width: 601px) {
    .shows-header-bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .shows-action-grid {
        width: auto;
        min-width: 380px;
        max-width: 480px;
    }
}

/* ── JEDNOTNÉ PRÁZDNÉ STAVY PRO VŠECH 6 ZÁLOŽEK (NÁVRH C) ─────────────────── */
.empty-state-card {
    position: relative;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 14px;
    text-align: center;
    margin: 20px auto 40px;
    width: 300px !important;
    max-width: calc(100% - 32px);
    min-height: 185px;
    box-sizing: border-box;
}

.empty-state-card .card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sf-violet2, #F8F5FC);
    border: 1.5px solid var(--tile-brd-help, #E8DEF5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(107, 63, 160, 0.05);
    flex-shrink: 0;
}

.empty-state-card .card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-card .card-subtitle {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text2);
    max-width: 250px;
    min-height: 31px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-card .card-action-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    white-space: nowrap;
    line-height: 1.2;
}

/* Podpora Extra velkého písma */
html.font-xlarge .empty-state-card .card-title {
    font-size: calc(13.5px * var(--fs-scale, 1.25)) !important;
}
html.font-xlarge .empty-state-card .card-subtitle {
    font-size: calc(11px * var(--fs-scale, 1.25)) !important;
}
html.font-xlarge .empty-state-card .card-action-nav {
    font-size: calc(10px * var(--fs-scale, 1.25)) !important;
}
html.font-xlarge .empty-state-card .card-icon-box {
    width: calc(44px * 1.15) !important;
    height: calc(44px * 1.15) !important;
    font-size: 26px !important;
}

/* ── Volba zobrazení záložek v Nastavení ── */
.tiles-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding: 6px 0;
}
.picker-tile {
    position: relative;
    width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, border-color 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
.picker-tile:active {
    transform: scale(0.96);
}
.picker-tile.disabled {
    opacity: 0.45;
    background: var(--surface2);
    filter: grayscale(0.85);
}
.picker-ico-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 5px;
}
.picker-lbl {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}
.picker-tile .check-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(22,163,74,0.3);
    border: 2px solid var(--surface);
}
.picker-tile.disabled .check-badge {
    background: #9ca3af;
    box-shadow: none;
}
.picker-tile .lock-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 4px rgba(107,63,160,0.3);
    border: 2px solid var(--surface);
}

/* ── Karta vrhu: akční tlačítka a roletka ── */
.litter-card .cat-header, .litter-card .dog-header {
    padding: 12px 14px;
}
.litter-tile-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
    transition: transform 0.1s ease, background 0.15s ease;
    user-select: none;
}
.litter-tile-btn:active {
    transform: scale(0.95);
}
.litter-tile-btn.accent-tint {
    background: var(--accent-light, #f7e9ec);
    border: 1.5px solid var(--accent, #962d43);
    color: var(--accent, #962d43);
}
.litter-roleta-btn {
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1.5px solid var(--accent, #962d43);
    background: var(--accent-light, #f7e9ec);
    color: var(--accent, #962d43);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(150, 45, 67,0.1);
    box-sizing: border-box;
    white-space: nowrap;
    transition: transform 0.1s ease, background 0.15s ease;
    user-select: none;
}
.litter-roleta-btn:active {
    transform: scale(0.96);
}
.litter-roleta-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    width: 250px;
    max-width: 90vw;
    max-height: 85vh; max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}
.litter-roleta-item {
    padding: 8.5px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s ease;
    background: var(--surface);
}
.litter-roleta-item:last-child {
    border-bottom: none;
}
.litter-roleta-item:active {
    background: var(--surface2);
}
.litter-roleta-item .item-ico {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.dog-card.litter-card, .cat-card.litter-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.dog-card.litter-card.roleta-open, .cat-card.litter-card.roleta-open {
    overflow: visible !important;
    contain: none !important;
    z-index: 200 !important;
}
.litter-card.roleta-open,
.litter-card.roleta-open:active {
    transform: none !important;
}
.litter-card.roleta-open .dog-header,
.litter-card.roleta-open .cat-header {
    overflow: visible !important;
}
.litter-card-body {
    border-radius: 0 0 14px 14px;
}
.litter-card-pups {
    border-radius: 0 0 14px 14px;
}

/* ── MODERNÍ SYSTÉMOVÉ DIALOGY (CONFIRM & PROMPT) ─────────────────── */
.modal-dialog-modern {
    max-width: 340px !important;
    padding: 24px 20px 20px !important;
    border-radius: 22px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
    text-align: center;
    box-sizing: border-box;
}

.modal-dialog-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: var(--sf-violet2);
    border: 1.5px solid var(--tile-brd-help);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.modal-dialog-icon.danger {
    background: var(--sf-red-lite, #fee2e2);
    border-color: var(--tile-brd-red2, #fca5a5);
    color: var(--tile-ink-red, #b91c1c);
}

.modal-dialog-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.modal-dialog-desc {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.5;
    margin: 0 0 14px;
    white-space: pre-line;
}

.modal-dialog-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sf-red-lite, #fee2e2);
    color: var(--tile-ink-red, #b91c1c);
    border: 1px solid var(--tile-brd-red2, #fca5a5);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 12px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-dialog-input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 18px;
}

.modal-dialog-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    background: var(--surface);
}

.modal-dialog-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.modal-dialog-actions .btn {
    flex: 1;
    padding: 12px 10px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sjednocení vertikální pozice prázdných karet napříč záložkami podle záložky Psi */
#tab-vrhy > .empty-state-card,
#tab-platby > .empty-state-card,
#tab-kalendar > .empty-state-card,
#tab-zkousky > .empty-state-card,
#tab-zasoby > .empty-state-card {
    margin-top: 420px !important;
}

@media (max-width: 600px) {
    #tab-vrhy > .empty-state-card,
    #tab-platby > .empty-state-card,
    #tab-kalendar > .empty-state-card {
        margin-top: 310px !important;
    }
    #tab-zkousky > .empty-state-card,
    #tab-zasoby > .empty-state-card {
        margin-top: 352px !important;
    }
}

/* Obnovení původní pozice prázdného stavu na 1. záložce (Psi) */
#tab-fenky .empty-state-card,
#dogs-list-content .empty-state-card {
    margin-top: 60px !important;
}

/* Režim úpravy pořadí koček (tlačítka ▲ ▼ ⏫ ⏬ v pravém sloupci) */
.cat-order-controls-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    align-items: stretch;
    width: 44px;
    margin-left: 6px;
}
.cat-order-arrow-btn {
    width: 100%;
    height: 30px;
    padding: 0;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.15s ease;
}
.cat-order-arrow-btn:active {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
    transform: scale(0.95);
}
.cat-order-arrow-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    background: var(--surface2);
    border-color: var(--border);
    box-shadow: none;
    transform: none;
}

/* Hromadný výběr koček v režimu úprav (Návrh 1) */
.dog-card.is-order-mode, .cat-card.is-order-mode {
    cursor: pointer !important;
    user-select: none;
    -webkit-user-select: none;
}
.dog-card.is-selected-for-order, .cat-card.is-selected-for-order {
    border-color: var(--accent) !important;
    background: var(--accent-light) !important;
    box-shadow: 0 0 0 2px var(--accent) !important;
}
.cat-order-select-box {
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--surface);
    border: 2px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: transparent;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.18);
    transition: all 0.15s ease;
}
.dog-card.is-selected-for-order .cat-order-select-box, .cat-card.is-selected-for-order .cat-order-select-box,
.cat-order-select-box.is-checked {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
}


/* Všechny ROZBALENÉ roletky a nabídky napříč celou aplikací (Řazení koček/vrhů/financí/zásob,
   výběr rodiče, filtr roku, nabídka jazyků v hlavičce i rodokmenu atd.)
   zůstávají VŽDY v NORMÁLNÍ velikosti písma i při nastavení Velké nebo Extra velké velikosti */

[id$="-dd"],
[id$="-dd"] *,
[id$="-drop"],
[id$="-drop"] *,
.lpopt,
.sort-opt {
    --fs-scale: 1 !important;
}

/* 1. Zrušení zvětšení při Velkém písmu VÝHRADNĚ v rozbalených nabídkách */
html.font-large [id$="-dd"],
html.font-large [id$="-drop"],
html.font-large #lang-pill-drop,
html.font-large #ped-lang-pill-drop {
    zoom: 0.8475 !important;
}

/* 2. Zrušení zvětšení při Extra velkém písmu VÝHRADNĚ v rozbalených nabídkách */
html.font-xlarge [id$="-dd"],
html.font-xlarge [id$="-dd"] *,
html.font-xlarge [id$="-drop"],
html.font-xlarge [id$="-drop"] *,
html.font-xlarge .lpopt,
html.font-xlarge .sort-opt {
    font-size: 13px !important;
    line-height: 1.3 !important;
    zoom: 1.0 !important;
    --fs-scale: 1 !important;
}

/* Skenování čárových kódů fotoaparátem — Plynulý náběh a probouzení kamery */
@keyframes scanOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scanViewfinderPop {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes scanRadarWave {
    0% { transform: scale(0.65); opacity: 0.9; }
    50% { opacity: 0.45; }
    100% { transform: scale(1.65); opacity: 0; }
}

@keyframes scanCameraPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.4)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(192, 132, 252, 0.9)); }
}

@keyframes scanCornerGlow {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; filter: drop-shadow(0 0 8px #c084fc); }
}

@keyframes scanLaser {
    0% { transform: translateY(-75px); opacity: 0.2; }
    50% { transform: translateY(75px); opacity: 1; filter: drop-shadow(0 0 10px #e9d5ff); }
    100% { transform: translateY(-75px); opacity: 0.2; }
}

.scan-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: #c084fc;
    border-style: solid;
    pointer-events: none;
    animation: scanCornerGlow 2.2s ease-in-out infinite;
}
.scan-corner-tl { top: 0; left: 0; border-width: 3.5px 0 0 3.5px; border-top-left-radius: 12px; }
.scan-corner-tr { top: 0; right: 0; border-width: 3.5px 3.5px 0 0; border-top-right-radius: 12px; }
.scan-corner-bl { bottom: 0; left: 0; border-width: 0 0 3.5px 3.5px; border-bottom-left-radius: 12px; }
.scan-corner-br { bottom: 0; right: 0; border-width: 0 3.5px 3.5px 0; border-bottom-right-radius: 12px; }








/* ==================== PSI COMPATIBILITY RULES ==================== */
.attachments-count { position: absolute; bottom: -2px; right: -2px; background: var(--accent); color: white; font-size: 9px; padding: 2px 4px; border-radius: 8px; font-weight: bold; }

.pup-row .avatar-col { width: 46px; }

.avatar-col { width: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 12px; }

.backup-warn-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 7px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;
  width: 100%;
}

.backup-warn-banner .backup-warn-text {
  min-width: 0;
  flex: 1 1 160px;
}

.backup-warn-banner .backup-warn-line {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: break-word;
}

.backup-warn-banner .backup-warn-line + .backup-warn-line {
  margin-top: 4px;
}

.backup-warn-banner .backup-warn-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.backup-warn-banner .backup-warn-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  line-height: 1;
}

.font-xlarge .backup-warn-banner .backup-warn-line  { font-size: calc(14px * var(--fs-scale)) !important; }

.font-xlarge .backup-warn-banner .backup-warn-btn   { font-size: calc(13px * var(--fs-scale)) !important; }

.font-xlarge .backup-warn-banner .backup-warn-close { font-size: calc(16px * var(--fs-scale)) !important; }

.birthday-banner-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.birthday-banner-close:hover {
  opacity: 1;
}

.bk-chip-blue { border-color: #0C447C; color: #0C447C; background: transparent; }

.bk-chip-blue.on { background: #0C447C; border-color: #0C447C; color: #fff; font-weight: 500; }

.bk-chip-green { border-color: #27500A; color: #27500A; background: transparent; }

.bk-chip-green.on { background: #27500A; border-color: #27500A; color: #fff; font-weight: 500; }

.dog-card.breeding-female {
    border: 2px solid var(--girl-text);
    box-shadow: 0 0 0 2px rgba(232, 160, 184, 0.2), 0 4px 12px rgba(0,0,0,0.1);
}

.dog-card.breeding-female .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--girl) 100%);
}

.dog-card.breeding-male {
    border: 2px solid var(--stat-blue);
    box-shadow: 0 0 0 2px rgba(144, 184, 216, 0.2), 0 4px 12px rgba(0,0,0,0.1);
}

.dog-card.breeding-male .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--boy) 100%);
}

.dog-card.breeding-puppy {
    border: 2px solid var(--stat-gold);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15), 0 4px 12px rgba(0,0,0,0.1);
}

.dog-card.breeding-puppy .dog-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
}

.bt-box-cerveny { background: var(--bt-cerveny-bg); border: 1px solid var(--bt-cerveny-border); }

.bt-box-cerveny #sub-status-text { color: var(--bt-zona-text) !important; }

.dark .bt-box-cerveny #sub-status-text { color: var(--bt-zona-text) !important; }

.bt-box-zluty { background: var(--bt-zluty-bg); border: 1px solid var(--bt-zluty-border); }

.bt-box-zluty .tap44 { background: var(--bt-zluty-tile); border: 1px solid var(--bt-zluty-border); }

.bt-hlaska-chyba { background: var(--bt-chyba-bg); border: 1px solid var(--bt-chyba-border); color: var(--bt-chyba-text); }

.bt-zona-hlavicka { background: var(--bt-zona-bg); }

.bt-zona-hlavicka .set-sec-icon { background: var(--bt-zona-border) !important; }

.dark .bt-zona-hlavicka .set-sec-icon { background: var(--bt-zona-border) !important; }

.bt-zona-telo { background: var(--bt-zona-bg); }

.bt-zona-tlacitko { background: var(--bt-zona-bg); border: 0.5px solid var(--bt-zona-border); color: var(--bt-zona-text); cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; }

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    line-height: 1;
    filter: grayscale(0.2);
}

.empty-state-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    text-align: left;
    width: 100%;
    max-width: 260px;
}

.empty-state-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text2);
}

.empty-state-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.empty-state-text {
    font-size: 14px;
    color: var(--text2);
    margin-bottom: 24px;
    max-width: 280px;
    line-height: 1.5;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.filter-option {
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: var(--bg);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.filter-option:last-child {
    margin-bottom: 0;
}

.filter-option:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.filter-option:active {
    transform: scale(0.98);
}

.font-xlarge .viewer-meta-clear {
    font-size: calc(18px * var(--fs-scale)) !important;
    width:     calc(38px * var(--fs-scale)) !important;
    height:    calc(38px * var(--fs-scale)) !important;
}

.font-xlarge .viewer-meta-delete { font-size: calc(13px * var(--fs-scale)) !important; }

.font-small  { zoom: 0.88; }

.font-large  { zoom: 1.18; }

.font-xlarge { zoom: 1.0; --fs-scale: 1.5; }

.font-large .modal { max-height: 72vh; max-height: 72dvh; max-height: 72svh; }

.font-large .modal-sticky .modal-footer { padding: 8px 16px; gap: 6px; }

.font-xlarge [style*="font-size:8px"],  html.font-xlarge [style*="font-size: 8px"]  { font-size: calc(8px  * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:9px"],  html.font-xlarge [style*="font-size: 9px"]  { font-size: calc(9px  * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:10px"], html.font-xlarge [style*="font-size: 10px"] { font-size: calc(10px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:11px"], html.font-xlarge [style*="font-size: 11px"] { font-size: calc(11px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:12px"], html.font-xlarge [style*="font-size: 12px"] { font-size: calc(12px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:13px"], html.font-xlarge [style*="font-size: 13px"] { font-size: calc(13px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:14px"], html.font-xlarge [style*="font-size: 14px"] { font-size: calc(14px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:15px"], html.font-xlarge [style*="font-size: 15px"] { font-size: calc(15px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:16px"], html.font-xlarge [style*="font-size: 16px"] { font-size: calc(16px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:17px"], html.font-xlarge [style*="font-size: 17px"] { font-size: calc(17px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:18px"], html.font-xlarge [style*="font-size: 18px"] { font-size: calc(18px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:19px"], html.font-xlarge [style*="font-size: 19px"] { font-size: calc(19px * var(--fs-scale)) !important; }

.font-xlarge [style*="font-size:20px"], html.font-xlarge [style*="font-size: 20px"] { font-size: calc(20px * var(--fs-scale)) !important; }

.font-xlarge .dp-item { font-size: calc(15px * var(--fs-scale)) !important; }

.font-xlarge .dp-item.selected { font-size: calc(17px * var(--fs-scale)) !important; }

.font-xlarge #yearFilter { font-size: calc(10px * var(--fs-scale)) !important; }

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

.font-xlarge .modal-body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

.font-xlarge #header-row2 { flex-wrap: wrap; }

.font-xlarge #tab-kalendar button { min-width: 0; overflow-wrap: break-word; word-break: break-word; }

.font-xlarge #fs-btn-large, html.font-xlarge #fs-btn-xlarge {
    font-size: 16px !important; overflow-wrap: break-word; word-break: break-word;
}

.font-xlarge #stats #yearFilter { font-size: calc(13px * var(--fs-scale)) !important; }

.font-xlarge {
  --hlavicka-pilulka-font: calc(13px * var(--fs-scale));
}

.font-xlarge .stat-val { font-size: calc(1.1em * var(--fs-scale)) !important; }

.font-xlarge .stat-label { font-size: calc(13px * var(--fs-scale)) !important; }

.font-xlarge .app-select { font-size: calc(13px * var(--fs-scale)) !important; }

.font-xlarge .tab-label { font-size: calc(9px * var(--fs-scale)) !important; }

.font-xlarge .ios-tab-bar { height: calc(92px + env(safe-area-inset-bottom, 0px)); }

.font-xlarge .pup-status { font-size: calc(10px * var(--fs-scale)) !important; }

.font-xlarge #tab-nastaveni strong { font-size: calc(16px * var(--fs-scale)) !important; }

.font-xlarge .toast-undo-btn { font-size: calc(13px * var(--fs-scale)) !important; }

.lang-select {
    min-width: 200px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 14px;
    cursor: pointer;
}

.nv-cislo { font-size: 12px; line-height: 1.3; color: var(--text2); overflow-wrap: break-word; margin-top: 2px; }

.price-paid-full { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 2px; }

.pup-age {
    white-space: nowrap;
}

.scan-laser-line {
    animation: scanLaser 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.set-sec-head {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
}

.set-sec-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text);
}

.viewer-nav-next { right: 10px; }

.viewer-nav-prev { left: 10px; }

/* ── Mating & Planned Litters UI (Cards with Photos & Full Dark Mode Support) ── */
.mating-picker-wrap {
    position: relative;
    width: 100%;
}
.mating-picker-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    -webkit-appearance: none;
    appearance: none;
}
.mating-picker-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    user-select: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.mating-picker-card.is-dam {
    border-color: #fbcfe8;
    background: #fffdfd;
}
.mating-picker-card.is-sire {
    border-color: #bfdbfe;
    background: #fdfeff;
}
.mating-picker-card:hover,
.mating-picker-select:focus ~ .mating-picker-card,
.mating-picker-select:active ~ .mating-picker-card {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.mating-dog-thumb, .mating-cat-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.mating-dog-thumb.thumb-dam, .mating-cat-thumb.thumb-dam {
    background: #fce7f3;
    border: 1.5px solid #fbcfe8;
    color: #db2777;
}
.mating-dog-thumb.thumb-sire, .mating-cat-thumb.thumb-sire {
    background: #dbeafe;
    border: 1.5px solid #bfdbfe;
    color: #2563eb;
}
.mating-dog-info, .mating-cat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mating-dog-name, .mating-cat-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.mating-dog-sub, .mating-cat-sub {
    font-size: 11.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.mating-picker-arrow {
    font-size: 11px;
    color: #94a3b8;
    flex-shrink: 0;
    margin-left: 2px;
}

/* Tab 2: Planned Litter Parent Row */
.plan-parents-row {
    background: #faf5ff;
    border: 1px solid #ede9fe;
    border-radius: 10px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.plan-parent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.plan-parent-item.is-sire {
    justify-content: flex-end;
    text-align: right;
}
.plan-parent-text {
    flex: 1;
    min-width: 0;
}

/* Tab 3: Test Duel Container */
.test-duel-container {
    background: var(--surface, #ffffff);
    border: 1px solid #99f6e4;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 4px 14px rgba(13,148,136,0.05);
    margin-bottom: 14px;
}

/* Dark mode overrides for Planned Matings */
html.dark .mating-picker-card {
    background: var(--surface, #2b2920);
    border-color: var(--border, #4a4740);
    color: #f0ede6;
}
html.dark .mating-picker-card.is-dam {
    background: #20111a;
    border-color: #6b2148;
}
html.dark .mating-picker-card.is-sire {
    background: #0f1e2d;
    border-color: #1e3a55;
}
html.dark .mating-dog-thumb.thumb-dam, html.dark .mating-cat-thumb.thumb-dam {
    background: #381528;
    border-color: #6b2148;
    color: #f472b6;
}
html.dark .mating-dog-thumb.thumb-sire, html.dark .mating-cat-thumb.thumb-sire {
    background: #122438;
    border-color: #1e3a55;
    color: #93c5fd;
}
html.dark .mating-dog-name, html.dark .mating-cat-name {
    color: #f0ede6;
}
html.dark .mating-dog-sub, html.dark .mating-cat-sub {
    color: #a09d96;
}
html.dark .mating-picker-arrow {
    color: #a09d96;
}
html.dark .plan-parents-row {
    background: #231828;
    border-color: #4c1d95;
}
html.dark .test-duel-container {
    background: var(--surface, #2b2920);
    border-color: #134e4a;
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    html:not(.light) .mating-picker-card {
        background: var(--surface, #2b2920);
        border-color: var(--border, #4a4740);
        color: #f0ede6;
    }
    html:not(.light) #planned-mating-modal .modal,
    html:not(.light) #mating-overview-overlay .modal {
        background: var(--surface, #2b2920) !important;
        color: #f0ede6;
    }
    html:not(.light) #planned-mating-modal .modal-body,
    html:not(.light) #mating-overview-overlay #mating-overview-content {
        background: var(--bg, #111009) !important;
        color: #f0ede6;
    }
    html:not(.light) #planned-mating-modal .modal-footer,
    html:not(.light) #mating-overview-overlay .modal-footer {
        background: var(--surface, #2b2920) !important;
        border-color: var(--border, #4a4740) !important;
    }
    html:not(.light) #planned-mating-modal input,
    html:not(.light) #planned-mating-modal select,
    html:not(.light) #planned-mating-modal textarea {
        background: var(--surface2, #38352c) !important;
        border-color: var(--border, #4a4740) !important;
        color: var(--text, #f0ede6) !important;
    }
    html:not(.light) .mating-picker-card.is-dam {
        background: #20111a;
        border-color: #6b2148;
    }
    html:not(.light) .mating-picker-card.is-sire {
        background: #0f1e2d;
        border-color: #1e3a55;
    }
    html:not(.light) .mating-dog-thumb.thumb-dam, html:not(.light) .mating-cat-thumb.thumb-dam {
        background: #381528;
        border-color: #6b2148;
        color: #f472b6;
    }
    html:not(.light) .mating-dog-thumb.thumb-sire, html:not(.light) .mating-cat-thumb.thumb-sire {
        background: #122438;
        border-color: #1e3a55;
        color: #93c5fd;
    }
    html:not(.light) .mating-dog-name, html:not(.light) .mating-cat-name {
        color: #f0ede6;
    }
    html:not(.light) .mating-dog-sub, html:not(.light) .mating-cat-sub {
        color: #a09d96;
    }
    html:not(.light) .mating-picker-arrow {
        color: #a09d96;
    }
    html:not(.light) .plan-parents-row {
        background: #231828;
        border-color: #4c1d95;
    }
    html:not(.light) .test-duel-container {
        background: var(--surface, #2b2920);
        border-color: #134e4a;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ZÁLOHY: Dvouřádkové karty (Návrh A podle vzoru Koček)
   ═══════════════════════════════════════════════════════════════════ */
.backup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 9px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  box-sizing: border-box;
  min-width: 0;
}
.backup-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.backup-card-info {
  flex: 1;
  min-width: 0;
}
.backup-card-date {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.backup-card-sub {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  word-break: break-word;
}
.backup-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  display: inline-block;
  line-height: 1.4;
}
.backup-badge-auto {
  background: #ede9fe;
  color: #6d28d9;
}
.backup-badge-manual {
  background: #e0f2fe;
  color: #0369a1;
}
.backup-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.backup-restore-btn {
  background: linear-gradient(135deg, var(--accent, #962d43) 0%, #1b4332 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}
.backup-card-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}
.backup-tool-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}
.backup-tool-btn.del {
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) .backup-badge-auto {
    background: rgba(168, 85, 247, 0.25);
    color: #d8b4fe;
  }
  html:not(.light) .backup-badge-manual {
    background: rgba(56, 189, 248, 0.22);
    color: #7dd3fc;
  }
  html:not(.light) .backup-tool-btn.del {
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
  }
}
html.dark .backup-badge-auto {
  background: rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
}
html.dark .backup-badge-manual {
  background: rgba(56, 189, 248, 0.22);
  color: #7dd3fc;
}
html.dark .backup-tool-btn.del {
  border-color: rgba(248, 113, 113, 0.35);
  color: #f87171;
}

/* ==================== SLOŽKY A PODSLOŽKY PŘÍLOH ==================== */
.att-folders-container {
  margin-top: 10px;
  margin-bottom: 12px;
}
.att-year-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.att-year-tab {
  padding: 7px 15px;
  background: var(--accent, #962d43);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.att-year-tab .att-badge {
  background: rgba(255,255,255,0.25);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1;
}
.att-year-tab.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  font-weight: 600;
  box-shadow: none;
}
.att-subfolders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.att-subcard {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.att-subhead {
  padding: 11px 16px;
  background: rgba(150, 45, 67,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
html.dark .att-subhead {
  background: rgba(255,255,255,0.05);
}
.att-subhead-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.att-subhead-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-subhead-meta {
  font-size: 11.5px;
  color: var(--text2);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.att-subhead-toggle {
  color: var(--accent, #962d43);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.att-subbody {
  padding: 6px 8px 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.att-subcard.collapsed .att-subbody {
  display: none;
}
.att-subcard.collapsed .att-subhead {
  border-bottom: none;
}

/* ── Složky fotografií na hlavní obrazovce (rok a rozbalovací nabídka) ── */
.att-folder-dropdown-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.att-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface2, #f3f6f4);
  color: var(--accent, #962d43);
  border: 1.5px solid var(--accent, #962d43);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.att-folder-btn:hover {
  background: var(--accent-light, #f7e9ec);
  transform: translateY(-1px);
}

.att-folder-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: var(--surface, #ffffff);
  border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  min-width: 145px;
  margin-top: 4px;
  overflow: hidden;
}

.att-folder-menu-head {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3, #888);
  background: var(--surface2, #f8f9fa);
  border-bottom: 1px solid var(--border, #eee);
}

.att-folder-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #222);
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid var(--border, #eee);
}

.att-folder-menu-item:last-child {
  border-bottom: none;
}

.att-folder-menu-item:hover {
  background: var(--accent-light, #f7e9ec);
  color: var(--accent, #962d43);
}

.att-folder-badge {
  background: var(--accent-light, #f7e9ec);
  color: var(--accent, #962d43);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
}

/* Záložky roků u feny */
.female-years-bar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface2, #f4f7f5);
  border-bottom: 1.5px solid var(--border, #e0e0e0);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.female-year-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border, #cbd5e1);
  background: var(--surface, #ffffff);
  color: var(--text, #333333);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.female-year-tab-btn:hover {
  border-color: var(--accent, #962d43);
  color: var(--accent, #962d43);
}

.female-year-tab-btn.active {
  background: var(--accent, #962d43);
  color: #ffffff;
  border-color: var(--accent, #962d43);
  box-shadow: 0 2px 6px rgba(150, 45, 67, 0.25);
}

.female-year-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}

.female-year-tab-btn.active .female-year-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}



/* Tlačítko „Odebrat fotku" na avataru karty psa / štěněte (z Koček, 31. 10. 2026). Viditelná kulička 26 px, dotyková plocha ~44 px (::after). */
.photo-remove-btn {
  position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border2, #ccc); background: var(--surface); color: var(--text);
  font-size: 13px; line-height: 1; padding: 0; cursor: pointer; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
}
.photo-remove-btn::after { content: ''; position: absolute; inset: -9px; }

/* Hlášky na PC dole vpravo jako na telefonu (31. 10. 2026): nahoře zakrývaly ~3 s křížek a nadpis otevřeného okna. */
@media (min-width: 769px) {
    .toast-container { top: auto; bottom: 96px; right: 20px; }
}

/* Větší plocha pro prst (js/dotyk-44.js, 31. 10. 2026, podle Koček): průhledná plocha kolem malého tlačítka, vzhled beze změny */
.hit44-rel { position: relative; }
.hit44::after { content: ''; position: absolute; top: var(--h44-t, 0); bottom: var(--h44-b, 0); left: var(--h44-l, 0); right: var(--h44-r, 0); }
.tap44.hit44::after { transform: none; width: auto; height: auto; }

/* Tlačítko „QR“ (karta na klec) v záložce Výstavy (js/features/exhibitions.js; přenos z Koček, ostrý styl psí zeleně) */
.shows-qr-pill-btn {
    background: var(--accent-light) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    margin-left: 6px !important;
    box-shadow: none !important;
    min-height: 36px !important;
}
.shows-qr-pill-btn:active {
    transform: scale(0.97) !important;
}