/* Vzhled „Seznam“ pro Kočky a Vrhy (27. 10. 2026). Řádky přebírají vzhled z poradi-tahem.css (.po-mode, .po-row …). */
/* Dlaždice zůstávají v DOM kvůli svým oknům (Detail, Koťata) – jen se nekreslí. Jejich okna mají position:fixed a zůstávají vidět. */
.sz-skryt { display: block !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; gap: 0 !important; overflow: visible !important; }
.sz-skryt > * { visibility: hidden !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
.sz-skryt .compact-detail-overlay, .sz-skryt .cl-overlay { visibility: visible !important; }

.sz-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 6px 0; --po-fg: #d3643f; --po-bg: #f7f8f0; }
html.dark .sz-bar { --po-fg: #e6eacd; --po-bg: #444a1f; }
.sz-seg { display: inline-flex; border: 1px solid var(--po-fg); border-radius: 5px; overflow: hidden; }
.sz-seg button { min-height: 44px; min-width: 92px; padding: 0 12px; border: 0; background: var(--surface, #fff); color: var(--po-fg); font: inherit; font-weight: 700; font-size: calc(13px * var(--fs-scale, 1)); cursor: pointer; }
.sz-seg button + button { border-left: 1px solid var(--po-fg); }
.sz-seg button.on { background: var(--po-fg); color: var(--surface, #fff); font-weight: 800; }
.sz-leg { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: calc(12px * var(--fs-scale, 1)); color: var(--text2, #6a7042); }
.sz-leg > span { display: inline-flex; align-items: center; gap: 4px; }
.sz-leg i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid; display: inline-block; }

.sz-list .sz-item { display: flex; flex-direction: column; min-width: 0; }
.sz-list .sz-row { min-height: 76px; cursor: pointer; }
.sz-list .sz-row .po-av { width: 52px; height: 52px; }
.sz-list .sz-row:focus-visible { outline: 2px solid var(--po-fg); outline-offset: 1px; }
.sz-chev { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--po-fg); border-radius: 5px; background: var(--po-bg); color: var(--po-fg); font: inherit; font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; transition: transform .15s; }
.sz-item.open .sz-chev { transform: rotate(90deg); }
.sz-item.open .sz-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sz-pruh { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5em), 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--po-fg); border-top: 0; border-radius: 0 0 5px 5px; background: var(--po-bg); }
.sz-pruh[hidden] { display: none; }
.sz-pruh button { min-height: 44px; padding: 2px 6px; border: 1px solid var(--po-fg); border-radius: 5px; background: var(--surface, #fff); color: var(--po-fg); font: inherit; font-weight: 700; font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.2; white-space: normal; overflow-wrap: normal; word-break: normal; cursor: pointer; }
.sz-pruh button.hl { border-color: var(--po-ok-fg); color: var(--po-ok-fg); background: var(--po-ok-bg); }

/* Štítky */
.sz-ch { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; color: inherit !important; }
.sz-c { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px; border: 1px solid; border-radius: 4px; font-size: calc(12px * var(--fs-scale, 1)); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.sz-ruz { color: #9b1c55; border-color: #d97aa5; background: #fde8f1; }
.sz-cer { color: #a1231b; border-color: #e39a94; background: #fdecea; }
.sz-zlu { color: #6e4a00; border-color: #d9b54a; background: #fff6d9; }
.sz-zel { color: #350b5a; border-color: #9b7cc4; background: #f2ebe0; }
.sz-fia { color: #d3643f; border-color: #d1d6b7; background: #f7f8f0; }
.sz-mod { color: #1a5299; border-color: #93b8e6; background: #e6f0fd; }
html.dark .sz-ruz { color: #f6b5cf; border-color: #8a3a5f; background: #3a1a2a; }
html.dark .sz-cer { color: #ffb4ad; border-color: #8a3a35; background: #3a1715; }
html.dark .sz-zlu { color: #f3d27a; border-color: #7a6220; background: #33290d; }
html.dark .sz-zel { color: #bf9ce8; border-color: #4c2c6e; background: #231235; }
html.dark .sz-fia { color: #e6eacd; border-color: #818a4a; background: #444a1f; }
html.dark .sz-mod { color: #a3cbf8; border-color: #355a85; background: #142538; }

/* Pruh koťat (Vrhy) */
.sz-kt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-right: 4px; }
.sz-k { font-style: normal; min-width: 22px; height: 22px; padding: 0 2px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid; font-size: 12px; font-weight: 800; }
.sz-k-v { color: #350b5a; border-color: #9b7cc4 !important; background: #f2ebe0; }
.sz-k-r { color: #6e4a00; border-color: #d9b54a !important; background: #fff6d9; }
.sz-k-p { color: #8b9069; border-color: #e8ebd2 !important; background: #f9faf2; }
.sz-k-ch { color: #d3643f; border-color: #d1d6b7 !important; background: #f7f8f0; }
html.dark .sz-k-v { color: #bf9ce8; border-color: #4c2c6e !important; background: #231235; }
html.dark .sz-k-r { color: #f3d27a; border-color: #7a6220 !important; background: #33290d; }
html.dark .sz-k-p { color: #c7cab8; border-color: #6a7042 !important; background: #363a1c; }
html.dark .sz-k-ch { color: #e6eacd; border-color: #818a4a !important; background: #444a1f; }
.sz-kt b { margin-left: 4px; font-size: calc(12px * var(--fs-scale, 1)); font-weight: 800; color: var(--text2, #6a7042); white-space: nowrap; }
.sz-kt b.sz-vol { color: #350b5a; }
html.dark .sz-kt b.sz-vol { color: #bf9ce8; }
.sz-list { display: grid !important; grid-template-columns: 1fr; gap: 6px; margin: 6px 0 12px; align-items: start; }
@media (min-width: 700px) { .sz-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sz-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Úprava podle Petra 27. 10. (návrh 1: šedá + zelená, malý přepínač, větší fotka, stejná výška, nabídka přes řádek pod sebou) ── */
.sz-bar, .sz-list, .sz-km { --sz-line: #e0e2d5; --po-fg: #540f76; --po-bg: #f3eee4; --sz-av: #f5f6ef; --sz-txt: #30331a; --sz-sub: #6f7358; --sz-neu: #f9faf6; }
html.dark .sz-bar, html.dark .sz-list, html.dark .sz-km { --sz-line: #4e5236; --po-fg: #a66fd3; --po-bg: #271236; --sz-av: #34381d; --sz-txt: #f5f7ec; --sz-sub: #c7cab8; --sz-neu: #33361c; }
.sz-bar .sz-seg { border-color: var(--sz-line); }
.sz-bar .sz-seg button { min-width: 46px; width: 46px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--sz-sub); background: var(--surface, #fff); }
.sz-bar .sz-seg button + button { border-left-color: var(--sz-line); }
.sz-bar .sz-seg button.on { background: var(--po-bg); color: var(--po-fg); }
.sz-bar .sz-seg svg { width: 20px; height: 20px; }
.sz-leg i.sz-k-v, .sz-leg i.sz-k-r, .sz-leg i.sz-k-p, .sz-leg i.sz-k-ch { border-width: 1px; }

.sz-list { grid-auto-rows: 1fr; align-items: stretch !important; }
.sz-list .sz-item { position: relative; }
.sz-list .sz-row { height: 100%; box-sizing: border-box; min-height: 88px; gap: 12px; padding: 6px; border-color: var(--sz-line) !important; background: var(--surface, #fff); }
.sz-list .sz-item.open .sz-row { border-color: var(--po-fg) !important; border-radius: 5px; }
.sz-list .sz-row .po-av { width: 76px; height: 76px; border: 1px solid var(--sz-line); border-radius: 4px; background: var(--sz-av); }
.sz-list .po-pismeno { color: var(--po-fg); font-size: calc(24px * var(--fs-scale, 1)); }
.sz-list .po-t b { color: var(--sz-txt); }
.sz-list .po-t b i { color: var(--po-fg); }
.sz-list .po-t > span:not(.sz-ch) { color: var(--sz-sub); }
.sz-list .sz-chev { width: 44px; height: 44px; border-color: var(--sz-line); background: var(--surface, #fff); color: var(--po-fg); }
.sz-list .sz-item.open .sz-chev { background: var(--po-bg); border-color: var(--po-fg); }
/* běžné informace šedě, barevné jen upozornění */
.sz-list .sz-c.sz-fia, .sz-list .sz-c.sz-mod { color: var(--sz-txt); border-color: var(--sz-line); background: var(--sz-neu); }
/* nabídka: plave přes řádek pod sebou (výška = řádek + mezera), nic se neposune; u poslední řady nahoru */
.sz-list .sz-pruh { position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: max(calc(100% + 7px), 112px); z-index: 30; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 6px; padding: 8px; border: 1px solid var(--po-fg); border-radius: 5px; background: var(--surface, #fff); }
.sz-list .sz-item.nahoru .sz-pruh { top: auto; bottom: calc(100% - 1px); }
.sz-list .sz-pruh[hidden] { display: none !important; }
.sz-list .sz-pruh button { min-height: 44px; height: auto; display: flex; align-items: center; justify-content: center; gap: 6px; border-color: var(--sz-line); background: var(--surface, #fff); color: var(--sz-txt); }
.sz-list .sz-pruh button svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--po-fg); }
.sz-list .sz-pruh button.hl { border-color: var(--po-fg); color: var(--po-fg); background: var(--po-bg); }
/* ikonka nad textem; dlouhé slovo (de „Gesundheitsplan“) se v úzkém tlačítku zmenší, nerozdělí se ani neuteče */
.sz-list .sz-pruh button { flex-direction: column; gap: 3px; padding: 4px 3px; container-type: inline-size; min-width: 0; }
.sz-list .sz-pruh button span { display: block; max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; text-align: center; font-size: min(calc(13px * var(--fs-scale, 1)), 11.5cqi); line-height: 1.15; }

/* Přepínač jako dlaždice v řadě počtů (Petr 27. 10. 2026): Kočky místo „Všichni“, Vrhy 4. dlaždice. Dvě poloviny přes celou dlaždici. */
.sz-tile { --sz-line: #e0e2d5; --po-fg: #3e431b; --po-bg: #f3f5e7; --sz-sub: #6f7358; }
html.dark .sz-tile { --sz-line: #4e5236; --po-fg: #d3d9a0; --po-bg: #33361c; --sz-sub: #c7cab8; }
#stats .sz-tile, .cl-overview .sz-tile { display: flex !important; padding: 0 !important; overflow: hidden; cursor: default; background: var(--surface, #fff) !important; }
.cl-overview.s-prepinacem { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.sz-tile .sz-seg { display: flex; width: 100%; height: 100%; border: 0; border-radius: 0; }
.sz-tile .sz-seg button { flex: 1 1 0; min-width: 0; min-height: 44px; height: 100%; padding: 0; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--sz-sub); background: var(--surface, #fff); cursor: pointer; }
.sz-tile .sz-seg button + button { border-left: 1px solid var(--sz-line); }
.sz-tile .sz-seg button.on { background: var(--po-bg); color: var(--po-fg); }
.sz-tile .sz-seg svg { width: 24px; height: 24px; }
/* Lemování přepínače, návrh 3 (Petr 28. 10. 2026): zelený lem, jemně zelený podklad, uvnitř tři samostatná tlačítka, vybrané plně zelené.
   Předpona :not(#z…) zvedá váhu nad perleťová pravidla dlaždic v compact-pearl.css (i tmavý režim). */
.sz-tile { --sz-pod: #f8f9f1; --sz-lem: #cfd3b8; --sz-btn: #fff; --sz-on-ik: #fff; }
html.dark .sz-tile { --sz-pod: #24270f; --sz-lem: #4e5236; --sz-btn: #2a2d17; --sz-on-ik: #1c1e0d; }
html:not(#z1):not(#z2):not(#z3):not(#z4) body .sz-tile.sz-tile { border: 1px solid var(--po-fg) !important; border-radius: 6px !important; overflow: hidden !important; background: var(--sz-pod) !important; box-shadow: none !important; }
html:not(#z1):not(#z2):not(#z3):not(#z4) body .sz-tile .sz-seg { gap: 4px; padding: 4px; box-sizing: border-box; }
@media (max-width: 1100px) { html:not(#z1):not(#z2):not(#z3):not(#z4) body .sz-tile .sz-seg { gap: 2px; padding: 2px; } }   /* užší dlaždice (tablet, telefon): tlačítka zůstanou aspoň 44 px */
@media (max-width: 380px) { html:not(#z1):not(#z2):not(#z3):not(#z4) body .sz-tile .sz-seg { gap: 1px; padding: 1px; } }
html:not(#z1):not(#z2):not(#z3):not(#z4) body .sz-tile .sz-seg button { min-height: 44px; border: 1px solid var(--sz-lem) !important; border-radius: 4px !important; background: var(--sz-btn) !important; }
html:not(#z1):not(#z2):not(#z3):not(#z4) body .sz-tile .sz-seg button.on { background: var(--po-fg) !important; border-color: var(--po-fg) !important; color: var(--sz-on-ik) !important; }

/* Kompakt (28. 10. 2026): třetí zobrazení – jeden řádek = fotka, jméno, věk; na PC 2–3 sloupce, na telefonu jeden. Řádky přebírají tvar z ručního pořadí. */
.sz-km { --po-fg: #540f76; --po-bg: #f3eee4; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 6px 0 12px; }
html.dark .sz-km { --po-fg: #a66fd3; --po-bg: #271236; }
@media (min-width: 700px) { .sz-km { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sz-km { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sz-km .po-row { cursor: pointer; user-select: auto; -webkit-user-select: auto; min-height: 52px; padding: 4px 10px 4px 4px; border-color: var(--sz-line); }
.sz-km .po-row:hover { border-color: var(--po-fg); }
.sz-km .po-row:focus-visible { outline: 2px solid var(--po-fg); outline-offset: 1px; }
.sz-km .po-av { width: 44px; height: 44px; }
.sz-km .po-t b { color: var(--sz-txt); }
/* Přepínač Dlaždice / Seznam / Kompakt: původní dlaždice rozdělená na tři. Na telefonu mají dlaždice v řadě různou šířku, aby měla tři tlačítka aspoň 44 px. */
@media (max-width: 820px) {
  html.compact-home #stats { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  html.compact-home #stats > .stat { grid-column: span 4 !important; }
  html.compact-home #stats > .stat-prodane { grid-column: span 3 !important; }
  html.compact-home #stats > .stat-finance { grid-column: span 4 !important; }
  html.compact-home #stats > .sz-tile { grid-column: span 5 !important; }
  .cl-overview.cl-overview.s-prepinacem { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .cl-overview.s-prepinacem > .cl-stat:nth-child(1), .cl-overview.s-prepinacem > .cl-stat:nth-child(2) { grid-column: span 2 !important; }
  .cl-overview.s-prepinacem > .cl-stat:nth-child(3) { grid-column: span 3 !important; }
  .cl-overview.s-prepinacem > .sz-tile { grid-column: span 5 !important; }
}
@media (min-width: 1101px) { html.compact-home #stats > .sz-tile { grid-column: span 2 !important; } }

/* POZOR (Petr 1. 11. 2026): na kartách psů NESMÍ být `content-visibility`. Uzavře obsah karty, takže okna Detail a QR (uvnitř karty, position: fixed)
   se oříznou na rozměr karty a na telefonu se neukáže celé okno / QR nic neukáže. Rychlost seznamu řeší nepřepisování beze změny (app.js, _zapisHtml). */