/* ============================================================================
   Wellness Booking – ZÁKLAD PODSTRÁNEK (zaklad.css)
   GENEROVÁNO skriptem _prace/sestav.py – NEUPRAVOVAT RUČNĚ (změny by další sestavení přepsalo).
   Zdroj pravdy: nastenka-jemna.html, tag v106-kontrola-2, poslední změna souboru dc464c2.

   ČÁST A = styly nástěnky DOSLOVA (32 bloků <style> ve stejném pořadí; pořadí je důležité,
            pozdější bloky přebíjejí dřívější). Jediná úprava: 40× #resv → :is(#resv, .rz-telo)
            a 19× #resvCards → :is(#resvCards, .rz-karty) – stejná váha selektoru, vzhled beze změny.
            Mrtvá pravidla nástěnky (.side-foot, .sr-btn, .rail-ear, .botnav, .more-sheet, #wbClient, .bg-primary-*)
            zůstávají kvůli věrnosti – v šabloně se nevykreslují.
   ČÁST B = doplňky (_prace/zdroj/nove.css): komponenty, které nástěnka nemá. NOVÉ – k posouzení porotou.
   ============================================================================ */

/* ############################## ČÁST A – NÁSTĚNKA DOSLOVA ############################## */
/* ===== nástěnka · <style> (1/32) ===== */
  /* ============================================================
     FINÁLNÍ DESIGN v2 — základ nastenka-voda.html
     Převzato z Luxe: odstupňované textové tokeny, kompaktnější
     hustota, 5 stavů rezervací, segmentový filtr období.
     Opraveno z auditu: tmavý tooltip, přepínač pozadí, sidebar
     jako odkazy, sparkline + správné texty srovnání, bez CDN fontů.
     ============================================================ */
  /* ============================================================
     OKLCH GENERÁTOR ŽIVLŮ (skripta kap. 25 / Linear vzor)
     Každý živel = 2 vstupy: --hue (odstín) a --c (chroma akcentu),
     + --cw (chroma světa). Všechno ostatní se odvozuje vzorcem —
     všechny živly mají matematicky stejnou světlost a kontrast.
     ============================================================ */
  [data-elem="voda"]   { --hue: 220; --c: 0.085; --cw: 0.065; } /* tma drží zamčené hodnoty */
  [data-elem="ohen"]   { --hue: 38;  --c: 0.105; --cw: 0.032; }
  [data-elem="zeme"]   { --hue: 135; --c: 0.078; --cw: 0.058; }
  /* VZDUCH = stříbrný kov bez pigmentu; ve tmě BEZ záře (ticho drží), zlato v UI nikde */
  [data-elem="vzduch"] { --hue: 215; --c: 0.014; --cw: 0.003; } /* leštěné stříbro: chladný kov, mimo fialovou i béžovou */
  /* světlé přeladění ohně a země (tma zůstává dle schválených hodnot) */
  /* NÁSTŘEL: barva živlu ve verzálkových štítcích KPI (jen světlý režim) */
  /* stejný kontrast jako ve tmě: tma 3.6:1 → světlo L 0.55 = 4.7:1 (nejbližší hodnota,
     která drží AA pro 10.5px verzálky; 0.62 by dalo přesně 3.6:1, ale pod AA) */
  /* MRTVÝ TOKEN (0× použito): štítky KPI a hlavičky karet berou --ink-2 / --ink */
  [data-mode="light"] { --head-tone: oklch(0.50 var(--c) var(--hue)); }
  [data-mode="light"] .kpi .label { color: var(--ink-2); }
  [data-mode="light"] .card-h { color: var(--ink); }
  /* voda ve světlém: původní značkové zadání = primary-600 landingu */
  [data-mode="light"][data-elem="voda"] { --hue: 225; --c: 0.103; --cw: 0.075; }
  [data-mode="light"][data-elem="ohen"] { --hue: 42; --c: 0.082; --cw: 0.026; }  /* měděná oranž — hue výš = pryč od růžové; pod jantarem (90) zůstává */
  [data-mode="light"][data-elem="zeme"] { --hue: 128; --c: 0.062; --cw: 0.040; } /* mech — hlubší a zelenější než bledá oliva */
  /* voda + vzduch ve světlém ještě světlejší (plátno i tanec světlosti) */
  [data-mode="light"][data-elem="voda"],
  [data-mode="light"][data-elem="vzduch"] {
    --canvas: oklch(0.990 calc(var(--cw) * 0.09) var(--hue));
    --light: linear-gradient(104deg,
        oklch(0.999 calc(var(--cw) * 0.03) var(--hue)) 0%,
        oklch(0.989 calc(var(--cw) * 0.12) var(--hue)) 9%,
        oklch(0.997 calc(var(--cw) * 0.05) var(--hue)) 18%,
        oklch(0.985 calc(var(--cw) * 0.16) var(--hue)) 29%,
        oklch(0.996 calc(var(--cw) * 0.06) var(--hue)) 41%,
        oklch(0.982 calc(var(--cw) * 0.19) var(--hue)) 54%,
        oklch(0.995 calc(var(--cw) * 0.08) var(--hue)) 67%,
        oklch(0.979 calc(var(--cw) * 0.21) var(--hue)) 81%,
        oklch(0.989 calc(var(--cw) * 0.14) var(--hue)) 91%,
        oklch(0.974 calc(var(--cw) * 0.25) var(--hue)) 100%);
  }
  /* vzduch je nejlehčí ze čtyř světů — chladné stříbro jako podklad,
     po němž běhají KOLEČKA SVĚTLA (lesk na leštěném kovu, žádná šedá dna) */
  [data-mode="light"][data-elem="vzduch"] {
    /* plátno viz blok „LEŠTĚNÝ KOV" níže (0.987/0.0015/90 — dřívější porcelán 215 působil modře) */
    /* šeď mizí, když má neutrál chladný směr: sekundární tóny vzduchu jsou OCEL, ne šedá */
    --ink-2:  oklch(0.34 0.012 215);
    --muted:  oklch(0.50 0.011 215);
    --faint:  oklch(0.65 0.012 215);
    --accent:      oklch(0.54 0.015 215);
    --accent-deep: oklch(0.40 0.017 215);
    /* nález 7: head-tone 0.55 u vzduchu splýval s muted 0.46 (chroma to nezachrání — zámek
       fialové). Štítky KPI a hlavičky karet dělá HLOUBKA: tmavší ocel = rytá stříbrná tabulka. */
    --head-tone: var(--accent-deep);
    /* skala intenzity pruhu: 0.885 s chroma ~0 byla bila na bile - stribrny zebrik 0.80 -> 0.40 cte se i bez barvy */
    --scale-lo: oklch(0.80 0.008 215);
    --accent-line: oklch(0.64 0.014 215);
    --chart-line:  oklch(0.60 0.015 215);
    --hairline:    oklch(0.93 0 0);
  }
  [data-mode="light"][data-elem="vzduch"] {
    /* LEŠTĚNÝ KOV (schváleno 23. 7. večer; finál = nejdecentnější „stříbro + dech zlata", jedna osa 115°): stříbro nese efekt — čistý
       neutrál chroma 0, paprsky s jádrem a měkkou hranou (0.96); zlato JEN jako dech
       (alfa .28; jádro 0.993/0.016 i hrany 0.960/0.026 bezpečně pod gamutovými stropy). Základ teple
       neutrální bílá hue 90 — modrý pocit pryč. Zámek „zlato v UI nikde" otevřen
       uživatelkou VÝHRADNĚ pro pozadí vzduchu ve světle; tma zůstává ticho (tvrdý zákaz). */
    --canvas: oklch(0.987 0.0015 90);
    --light: linear-gradient(115deg, transparent 0%, oklch(0.962 0 0 / 0.16) 8.0%, oklch(0.998 0 0 / 0.55) 16%, oklch(0.962 0 0 / 0.16) 26.0%, transparent 36%),
             linear-gradient(115deg, transparent 30%, oklch(0.960 0.026 87 / 0.09) 38.0%, oklch(0.993 0.016 89 / 0.28) 46%, oklch(0.960 0.026 87 / 0.09) 54.0%, transparent 62%),
             linear-gradient(115deg, transparent 56%, oklch(0.964 0 0 / 0.14) 65.0%, oklch(0.998 0 0 / 0.48) 74%, oklch(0.964 0 0 / 0.14) 84.0%, transparent 94%);
  }
  /* OHEŇ + ZEMĚ světlé: fixní jednolité plátno — žádný tanec světlosti, žádná vinětace;
     odlesky a atmosféra patří jen vodě a vzduchu */
  [data-mode="light"][data-elem="ohen"], [data-mode="light"][data-elem="zeme"] { --light: none; }
  /* audit Z2: plátno ohně z kmenového hue padalo do růžové (měřeno H≈31–34 vs akcenty 42–46).
     PODKLAD se scopnutě posouvá na měď/písek hue 55 (světlo) a 52 (tma); akcenty drží 42/38.
     Gamut: 0.973 potřebuje 0.0047 (strop h55 0.0155), tma 0.016 (strop h52 0.0345) — s rezervou. */
  [data-mode="light"][data-elem="ohen"] {
    --canvas: oklch(0.973 calc(var(--cw) * 0.18) 55);
    /* QA12: muted/faint z vzorce c×0.60 hnědly (#704f42) — ztišit chroma a přiklonit k mědi */
    --muted: oklch(0.50 calc(var(--c) * 0.32) 50);
    --faint: oklch(0.65 calc(var(--c) * 0.30) 50);
  }
  [data-atmo="on"][data-mode="dark"][data-elem="ohen"] { --canvas: oklch(0.126 calc(var(--cw) * 0.5) 52); }
  /* vypnuté pozadí ve světlém = čistá bílá */
  [data-mode="light"][data-atmo="off"] { --canvas: oklch(0.998 0 0); }



  /* VZDUCH = leštěné stříbro: odlesk jen na hero číslech + silnější hrana ve tmě */
  [data-elem="vzduch"] .kpi .val {
    background-image: linear-gradient(180deg,
      oklch(0.26 0.010 215) 0%, oklch(0.46 0.016 215) 42%,
      oklch(0.32 0.012 215) 58%, oklch(0.54 0.016 215) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  [data-mode="light"] {
    /* sémantika ze stejného OKLCH systému: jednotná světlost a sytost, žádné RGB primárky */
    --ok:        oklch(0.55 0.085 158);
    --ok-bright: oklch(0.50 0.130 150); /* audit: 0.58 dávalo 4,06:1 */ /* svěží zelená jen pro růstové delty */
    --confirmed: oklch(0.55 0.075 245);
    --progress:  oklch(0.55 0.080 200); /* audit Z1: Probíhá = pevný tyrkys — stav se nikdy netónuje živlem */
    --amber:     oklch(0.68 0.115 90);
    --amber-ink: oklch(0.55 0.115 90); /* AA text na bílé (4.6:1) */
    --plan: oklch(0.845 0.006 240); --plan-ink: oklch(0.50 0.008 240); /* Naplánováno = tichý neutrál */
    --cancel:    oklch(0.55 0.105 30);
    --noshow:    oklch(0.30 0.008 240); /* skoro černá — nejtvrdší selhání, nejtemnější tón */
    /* DIOR: stíny teplé a měkčí — papír na látce, ne UI deska */
    --shadow:0 1px 2px rgba(46,38,28,.04), 0 10px 30px rgba(46,38,28,.055);
    --shadow-hover:0 2px 5px rgba(46,38,28,.05), 0 18px 44px rgba(46,38,28,.085);
    /* spekulární linka vypnutá i ve světle — karta je papír, ne UI deska */
    --specular: rgba(255,255,255,0); --specular-hover: rgba(255,255,255,0);
    /* teplé neutrály (Linear 2026): šedá s nádechem, ne studená modrošedá */
    /* KOV MÍSTO HNĚDÉ: neutrály = studený kov odvozený ze živlu (voda ocel, vzduch stříbro) */
    /* Inkoustové hladiny (ink/ink-2/muted/faint) se deklarují JEDINÝM blokem níž
       („HLADINY INKOUSTU"). Nepřidávat je sem — dvě deklarace se stejnou specificitou
       znamenají, že vyhraje pozdější a editace tady se tiše zahodí. */
    /* DIOR: plátno = slonovina s podtónem živlu; karty = bílý papír na látce */
    --chrome:#FFFFFF;
    --canvas: oklch(0.973 calc(var(--cw) * 0.18) var(--hue));
    --surface:#FFF;
    --accent:      oklch(0.555 var(--c) var(--hue)); /* světlost dle původního značkového zadání */
    --accent-deep: oklch(0.34 calc(var(--c) * 1.15) var(--hue)); /* hierarchie tónů živlu: důraz */
    --accent-line: oklch(0.67 calc(var(--c) * 1.05) var(--hue));
    --chart-line:  var(--accent-line);
    --brand:       oklch(0.30 calc(var(--c) * 0.60) var(--hue)); /* MRTVÝ TOKEN (0×): vlnovka bere kotvu CTA přímo */
    --hairline:    oklch(0.93 0 0); /* neutrál: tónovaná linka dělala na bílé kartě modrý obtah */
    --row-line:    oklch(0.965 0 0); /* neutrál (viz hairline) */
    --surface-sunken: var(--row-line);
    --pad-y: 16px; --pad-x: 18px;
    --light: linear-gradient(104deg,
        oklch(0.995 calc(var(--cw) * 0.05) var(--hue)) 0%,
        oklch(0.975 calc(var(--cw) * 0.20) var(--hue)) 9%,
        oklch(0.990 calc(var(--cw) * 0.08) var(--hue)) 18%,
        oklch(0.968 calc(var(--cw) * 0.26) var(--hue)) 29%,
        oklch(0.988 calc(var(--cw) * 0.10) var(--hue)) 41%,
        oklch(0.962 calc(var(--cw) * 0.30) var(--hue)) 54%,
        oklch(0.984 calc(var(--cw) * 0.12) var(--hue)) 67%,
        oklch(0.956 calc(var(--cw) * 0.34) var(--hue)) 81%,
        oklch(0.975 calc(var(--cw) * 0.22) var(--hue)) 91%,
        oklch(0.945 calc(var(--cw) * 0.40) var(--hue)) 100%);
    color-scheme: light;
  }
  [data-mode="dark"] {
    /* sémantika: stejné odstíny jako ve světlém, zvednutá světlost, srovnaná sytost */
    --ok:        oklch(0.68 0.095 158);
    --ok-bright: oklch(0.68 0.085 148); /* tma: zeleň na hladině --ok — směr nesou šipka a znaménko, ne jas */
    --confirmed: oklch(0.68 0.075 245);
    --progress:  oklch(0.68 0.080 200); /* audit Z1: pevný tyrkys i ve tmě, sjednocená světlost se stavy */
    --amber:     oklch(0.82 0.125 92);
    --amber-ink: var(--amber);
    --plan: oklch(0.50 0.006 240); --plan-ink: oklch(0.75 0.006 240);
    --cancel:    oklch(0.64 0.095 30);
    --noshow:    oklch(0.46 0.008 240); /* ve tmě nejtemnější čitelný — pořád znatelně pod ostatními stavy */
    --shadow:0 1px 2px rgba(0,0,0,.25);
    /* hover ve tmě: světlat se nesmí (zámek) — zdvih dělá hlubší tmavé halo + posun,
       stejná choreografie jako ve světle */
    --shadow-hover:0 4px 10px rgba(0,0,0,.55), 0 16px 38px rgba(0,0,0,.45);
    /* spekulární linka po horní hraně je VYPNUTÁ (zámek: žádná záře ve tmě).
       Token zůstává na nule, aby se dal zapnout jedním místem, ne osmi. */
    --specular: rgba(255,255,255,0); --specular-hover: rgba(255,255,255,0);
    /* typografie v tónu živlu VŽDY (symetrie se světlem) — přepínač pozadí mění jen plátno;
       vzduch má cw 0.003, takže zůstává fakticky neutrální */
    /* hladiny inkoustu: viz jediný blok „HLADINY INKOUSTU" níž */
    /* MRTVÝ TOKEN (0× použito) — štítky KPI dnes berou --ink-2; nechán jako historie sweepu #3 */
    --ink-deep-label: oklch(0.58 var(--c) var(--hue));
    --glow: none; /* ZÁKAZ platí vždy */
    --chrome: oklch(0.137 0 0); --canvas: oklch(0.128 0 0); --surface: oklch(0.139 0 0); /* karta stojí jako box i ve tmě: plátno o stupeň hlouběji */
    --accent:      oklch(0.66 var(--c) var(--hue));
    --accent-deep: oklch(0.60 calc(var(--c) * 1.15) var(--hue)); /* audit citelnosti: 0.55 davalo 3,9-4,25:1 - akcni stav musi nad AA */
    /* data-viz ve tmě: −15 % chroma proti akcentu (skripta kap. 23) */
    --chart-line:  oklch(0.52 calc(var(--c) * 0.95) var(--hue)); /* hluboký tón živlu i v datech */
    --brand:       oklch(0.85 calc(var(--c) * 0.35) var(--hue)); /* MRTVÝ TOKEN (0×) */
    --hairline:    oklch(0.185 0 0); /* zámek A: jediná hladina linek ve tmě — nic světlejšího (0.305 svítilo na liště, hledání i segmentech) */
    --row-line:    oklch(0.185 0 0);
    --surface-sunken: oklch(0.115 0 0);
    /* tma opticky zahušťuje → +20 % dech (skripta kap. 23) */
    --pad-y: 18px; --pad-x: 20px;
    color-scheme: dark;
  }

  /* tmavý režim + paleta zapnutá = svět živlu: jednolité tónované plátno a hluboká
     typografie. ŽÁDNÁ záře/gradient (tvrdý zákaz). Vypnuto = neutrální černá. */
  [data-atmo="on"][data-mode="dark"] {
    /* JEDNOTNÁ VELMI TMAVÁ (dohledáno: schválený stav „plátno, karty i lišty na jedné
       hladině ~0.135–0.139, rozdíl dělají jen vlasové linky a těsný stín").
       Sytost cw×0.5 = na gamutové mezi; pozdější zdvihy na 0.145/0.155 svítily. */
    --canvas: oklch(0.126 calc(var(--cw) * 0.5) var(--hue)); /* o stupeň hlouběji — karta musí stát jako box i ve tmě */
  }
  /* voda: cw 0.065 × 0.5 = 0.0325 přetéká strop gamutu (0.0246 při L 0.135) — deklarace
     na stropu = stejný render, ale bez mapování a bez rizika, že se tma rozsvítí */
  [data-atmo="on"][data-mode="dark"][data-elem="voda"] {
    --canvas: oklch(0.126 0.022 220);
  }
  /* vzduch bez záře — jeho identita je ticho; a zároveň NEJHLUBŠÍ noc ze čtyř světů:
     rozlišení nedělá barva (chroma ~0), ale hloubka proti neutrálním kartám 0.139 */
  /* ohen ve tme: vzorcove tokeny na hue 38 padaji pod prahy ostatnich zivlu
     (deep-label 2,67 vs. 2,9; chart 3,46) - korekce +0,03 L srovnava ticho na stejne cislo */
  [data-mode="dark"][data-elem="ohen"] {
    --ink-deep-label: oklch(0.61 var(--c) var(--hue));
    --accent-deep:    oklch(0.63 calc(var(--c) * 1.15) var(--hue));
    --chart-line:     oklch(0.55 calc(var(--c) * 0.95) var(--hue));
  }
  /* vzduch ve tmě: ŽÁDNÉ jasové výjimky — dřívější „jasné stříbro" (akcent 0.86, štítky 0.74)
     dělalo při proklikávání živlů skok intenzity (jediný „bílý" svět). Vzduch teď jede
     stejnou světelnou hladinou jako ostatní (vzorce: akcent 0.66, štítky 0.46, deep 0.55);
     jeho identitu drží nulové chroma a nejhlubší plátno 0.112. */
  [data-atmo="on"][data-elem="vzduch"][data-mode="dark"] {
    --glow: none;
    --canvas: oklch(0.106 0 0); /* nejhlubší noc jen se zapnutým pozadím */
  }

  /* vinětace: vrstva stále přítomná, stmívá se synchronně se září (žádné probliknutí) */
  .content::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: 0; transition: opacity .34s ease;
  }
  [data-mode="light"] .content::after {
    background:
      radial-gradient(42% 34% at 0% 100%,   oklch(0.25 0.01 var(--hue) / .085) 0%, transparent 72%),
      radial-gradient(42% 34% at 100% 100%, oklch(0.25 0.01 var(--hue) / .085) 0%, transparent 72%),
      radial-gradient(36% 26% at 0% 0%,     oklch(0.25 0.01 var(--hue) / .05)  0%, transparent 70%),
      radial-gradient(36% 26% at 100% 0%,   oklch(0.25 0.01 var(--hue) / .05)  0%, transparent 70%);
  }
  [data-atmo="on"][data-mode="light"][data-elem="voda"] .content::after { opacity: 1; }
  /* burger + vysouvací lišta pro neúplná zobrazení */
  .burger { display: inline-flex; border: 0; background: transparent; color: var(--muted); cursor: pointer; /* jednotný ovladač lišty: PC = zabalit, mobil = šuplík */
            width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; } /* 36 = jednotná řada ovladačů */
  .burger svg { width: 20px; height: 20px; }
  .burger:hover { background: var(--row-line); color: var(--ink); }
  .drawer-overlay { position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.38);
                    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  @media (max-width: 1080px) {
    body.nav-open .sidebar { display: flex; position: fixed; left: 0; top: 72px; /* 1. 10.: flex + 214 px = ikony na stejném místě jako zabalená i připnutá (dřív poskočily) */
      height: auto; bottom: 0; width: 214px; z-index: 70;
      box-shadow: 0 0 0 1px var(--hairline), 24px 0 60px rgba(0,0,0,.25); }
    .drawer-overlay { top: 72px; } /* čárky (burger) zůstávají pevně nad šuplíkem a zavírají ho */
  }

  .palette-pop { position: fixed; right: 12px; top: 78px; z-index: 60; min-width: 190px;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
    box-shadow: var(--shadow-hover); padding: 12px; }
  .palette-pop .pp-label { font-size: 11.5px; font-weight: 450; letter-spacing: -.01em;
    color: var(--muted); margin-bottom: 8px; }
  .palette-pop .pp-elems { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
  .palette-pop .pp-elems button, .palette-pop .pp-atmo {
    border: 1px solid var(--hairline); background: transparent; color: var(--muted);
    font: 400 11.5px Inter, system-ui, sans-serif; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
  .palette-pop .pp-elems button.on { background: var(--row-line); color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 500; }
  .palette-pop .pp-atmo { width: 100%; }

  [data-mode="dark"] .card, [data-mode="dark"] .kpi {
    border-color: oklch(0.185 0 0); } /* nález 2: čistý neutrál — žádný nádech živlu v tmavých linkách */
  * { box-sizing: border-box; }
  body, .topbar, .sidebar, .card, .kpi, .pill, .status-list li,
  .page-date, .card-h, .card-sub, .kpi .label, .kpi .val, .kpi .foot,
  th, td, .t-time, .s-name, .s-count, .s-pct, .brand,
  .top-ic, .mode-btn, .avatar, .seg, .seg button, .botnav a {
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; /* barvu písma NEanimovat — přelévala se přes cizí odstíny */
  }
  html, body { margin: 0; }
  body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-optical-sizing: auto;
    background: var(--canvas); color: var(--ink); font-size: 14px;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
  }
  .app { display: flex; flex-direction: column; min-height: 100vh; }
  .app-body { display: flex; flex: 1; min-height: 0; }

  .sidebar {
    width: 214px; flex: none; background: var(--chrome);
    border-right: 1px solid var(--hairline);
    position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
    padding: 7px 14px 0; display: flex; flex-direction: column; /* 7 = střed SR přesně na středu řádku „Přehled · Červen" */
  }
  /* patička uzavírá sloupec; kolečko na ose ikon skupin x=32 */
  .side-foot { margin: 0 -14px 0; position: sticky; bottom: 0;
    background: var(--chrome); border-top: 1px solid var(--hairline);
    padding: 9px 14px 11px; display: flex; align-items: center; }
  /* OUŠKO: přepínač menu mezi „jen ikony" a „plné zobrazení".
     Sedí u horního konce lišty a straddluje její pravou hranu — proto fixed
     (lišta má overflow-y:auto a cokoli uvnitř by uřízla). Šířka je třetina
     běžného tlačítka; cíl kliknutí je ale plných 34 px díky ::before. */
  /* OUŠKO: přepínač menu „jen ikony" ↔ „plné zobrazení".
     Sedí NAD ikonami na jejich ose (x=32, táž v obou stavech), takže se při
     přepnutí nepohne ani o pixel a nikdy nemizí. Fixed proto, že lišta má
     overflow-y:auto a cokoli uvnitř by uřízla. Šířka je třetina běžného
     tlačítka; cíl kliknutí je plných 34 px díky ::before. */
  /* MONOGRAM SALONU = ovladač menu. Stojí nad ikonami na jejich ose (x=32,
     táž v obou stavech), takže se při přepnutí nepohne a nikdy nemizí.
     Fixed proto, že lišta má overflow-y:auto a cokoli uvnitř by uřízla.
     Šipka je přivěšená na pravé hraně jako malé ouško — přesahuje přes hranu
     lišty, aby bylo vidět, že se tudy otevírá. */
  /* MONOGRAM SALONU = ovladač menu. Stojí tam, kde bývala vlnovka, tedy na ose
     ikon lišty — sloupec má jednu svislici odshora dolů. Vlnovka se posunula ZA
     wordmark: je to značka a vede na Přehled, neovládá nic. */
  /* vlnovka před wordmarkem: jen značka, žádná funkce — neklikací a skrytá čtečkám.
     Lištu ovládá SR v její hlavě. */
  .brand-mark { pointer-events: none; }
  .brand-mark svg { overflow: visible; }
  /* SALON: monogram je ovladač lišty, jméno stojí vedle něj a při zabalení mizí
     spolu se jmény sekcí — chová se jako ony, ne jako výjimka. */
  .sr-btn { height: 36px; flex: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; padding: 0; color: var(--muted);
    display: inline-flex; align-items: center; gap: 10px;
    align-self: stretch; margin: 0 0 18px -2px; /* osa monogramu = osa ikon skupin */
    transition: color .15s; }
  .sr-mono { width: 36px; height: 36px; flex: none; border: 1px solid var(--hairline);
    border-radius: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s; }
  .sr-name { display: none; font-size: 12.5px; font-weight: 450; color: var(--ink-2); letter-spacing: -.01em;
    text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sr-btn:hover .sr-mono { background: var(--row-line); color: var(--accent); border-color: var(--accent); }
  .sr-btn:hover .sr-name { color: var(--ink); }
  .sr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
  body.nav-collapsed .sr-btn { align-self: center; margin: 0 0 18px; gap: 0; }
  body.nav-collapsed .sr-name { display: none; }

  /* (ouško zrušeno — SR stojí přímo nad ikonami, druhý ovladač by byl navíc) */
  .rail-ear { display: none; }
  /* nepoužito: */
  .rail-ear { position: fixed; z-index: 45; top: 86px; left: 214px;
    transform: translateX(-50%); width: 13px; height: 30px; padding: 0;
    border: 1px solid var(--hairline); border-radius: 4px;
    background: var(--chrome); color: var(--faint); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: left .18s, background .15s, color .15s; }
  .rail-ear::before { content: ""; position: absolute; inset: -10px -12px; }
  .rail-ear .chev { width: 11px; height: 11px; transition: transform .18s; }
  .rail-ear:hover { background: var(--row-line); color: var(--accent); }
  body.nav-collapsed .rail-ear { left: 64px; }
  body.nav-collapsed .rail-ear .chev { transform: rotate(180deg); }
  @media (max-width: 1080px) { .rail-ear { display: none; } } /* lišta tu není, ovládá SR v topbaru */
  .side-foot button { width: 36px; height: 36px; border: 0; border-radius: 10px;
    background: transparent; color: var(--faint); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
  .side-foot button svg { width: 18px; height: 18px; }
  .side-foot button:hover { background: var(--row-line); color: var(--muted); }
  /* zabalené menu se rovnoměrně rozprostře po celé výšce (space-between);
     gap 26 je minimum — po rozbalení skupin volné místo ubývá a rytmus se stáhne k němu */
  .snav { display: flex; flex-direction: column; gap: 26px; flex: 1;
    justify-content: space-between; padding-bottom: 18px; }
  .snav-group { display: flex; flex-direction: column; gap: 4px; }
  /* hlavní úroveň menu = plnohodnotné silné řádky (žádné verzálkové podnadpisy).
     POZOR: váhu a inkoust tohoto bloku PřEPISUJE pravidlo Ř. 340–346 (štítky i podbody
     jsou 400 / 0.48 světlo / 0.70 tma). Tady už nastávají jen rozměry a rozložení. */
  .snav-group-label { display: flex; align-items: center; gap: 24px;
    font-size: 12.5px;
    padding: 8px 10px; cursor: pointer; user-select: none; border-radius: 8px;
    transition: color .15s, background .15s; }
  .snav-group-label:hover { background: var(--row-line); }
  /* šipky na jedné svislici: text skupiny má pevný sloupec, šipka pak stojí u všech na témže x */
  .snav-group-label > span:not(.chev) { width: 104px; }
  .snav-group-label .chev { margin-left: 8px; display: inline-flex; }
  .snav-group-label .chev svg { width: 13px; height: 13px; transition: transform .2s; }
  .snav-group.open .snav-group-label .chev svg { transform: rotate(180deg); }
  /* výchozí stav: podbody zabalené — menu ukazuje jen hlavičky, rozbalí se kliknutím */
  .snav-group:not(.open) .snav-item { display: none; }
  .snav-group:not(.open) { gap: 0; }
  .snav-group-label svg { width: 16px; height: 16px; flex: none; color: var(--faint); stroke-width: 1.6; }
  .snav-group-label .chev { color: var(--muted); }
  /* podbody rozbalené skupiny: tišší a menší než hlavní řádky */
  .snav-group .snav-item { font-size: 12.5px; } /* podbody mají stejnou velikost jako hlavní řádky — hierarchii nese barva */
  .snav-group .snav-item:hover { color: var(--ink); }
  .snav-group .snav-item.active { color: var(--accent-deep); font-weight: 500; }
  .snav-item { display: flex; align-items: center; gap: 24px; text-decoration: none;
    font-size: 12.5px; /* váha a inkoust: viz ř. 340–346 (jediný zdroj pravdy pro tichost lišty) */
    padding: 8px 10px; border-radius: 8px; transition: background .15s, color .15s; overflow: visible; }
  .snav-item svg { width: 16px; height: 16px; flex: none; color: var(--faint); stroke-width: 1.6; transition: color .15s; }
  .snav-item:hover { background: var(--row-line); color: var(--ink); }
  .snav-item:hover svg { color: var(--accent-deep); }
  /* písmo lišty se potkává v půli cesty mezi inkoustem aktivní „Nástěnky“ a modrou ikon */
  /* barvu nese ikona, text nikdy (poučeno z tmavého režimu: chroma ve světlém textu na tmavém plátně svítí) */
  /* PRAVIDLO 8. 9.: čím menší text, tím o ousíček tmavší, aby si udržel intenzitu.
     Lišta je na 12,5 px → o stupeň hlubší než tabulková meta (0.50 → 0.46; ve tmě 0.68 → 0.72). */
  .snav-group-label, .snav-item { font-weight: 400; color: var(--muted); }
  .snav-group .snav-item { font-weight: 400; color: var(--muted); }
  [data-mode="light"] .snav-group-label, [data-mode="light"] .snav-item,
  [data-mode="light"] .snav-group .snav-item { color: oklch(0.48 calc(var(--c) * 0.60) var(--hue)); }
  [data-mode="dark"] .snav-group-label, [data-mode="dark"] .snav-item,
  [data-mode="dark"] .snav-group .snav-item { color: oklch(0.70 calc(var(--cw) * 0.45) var(--hue)); }
  [data-mode="light"] .snav-item.active, [data-mode="dark"] .snav-item.active { color: var(--accent-deep); }
  .snav-item:hover, .snav-group-label:hover, .snav-group .snav-item:hover { color: var(--ink); }
  .snav-group .snav-item:hover { color: var(--ink-2); }
  .snav-item.active, .snav-group .snav-item.active { background: transparent; color: var(--accent-deep); font-weight: 500; }
  .snav-item.active svg { color: var(--accent); }
  .snav-item.active svg { color: var(--accent); }
  /* pojicí čáry: svislá linka protékající tečkami (Filament grouped-border) */
  .gline { position: relative; width: 16px; height: 16px; flex: none; }
  .gline .ln { position: absolute; left: 50%; width: 1px; transform: translateX(-50%);
    background: color-mix(in oklab, var(--faint) 38%, transparent); }
  .gline .ln.up { top: -20px; bottom: 50%; }
  .gline .ln.down { top: 50%; bottom: -20px; }
  .snav-item.run-first .ln.up { display: none; }
  .snav-item.run-last .ln.down { display: none; }
  .gline .cdot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 5px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 86%, var(--muted)); }
  .snav-item.conn:hover .cdot { background: var(--accent-deep); }
  .snav-item.conn.active .cdot { background: var(--accent); }
  /* ZNAČKA SALONU (tenant) — hlavička lišty/šuplíku.
     Topbar nese wordmark „wellness booking"; jméno salonu žije zde.
     Umístění je přepínatelné pro posouzení: data-tenant = sidebar | topbar | account
     (sidebar = vždy v hlavičce lišty · topbar = tiché verzálky vedle wordmarku, ≤1000 padá do šuplíku
      · account = na PC nikde, jen v šuplíku ≤1000). */
  /* jméno salonu v hlavičce šuplíku — jen tam, kde ovladač vpravo ustupuje (≤1000) */
  .side-brand { display: none; }
  @media (max-width: 1000px) { .side-brand { display: block; } }
  .side-brand { font-family: 'Iowan Old Style', Palatino, Georgia, serif;
      font-weight: 400; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.45;
      text-wrap: balance;
      background-image: linear-gradient(180deg,
        color-mix(in oklab, var(--ink) 93%, var(--accent)) 0%,
        color-mix(in oklab, var(--ink-2) 82%, var(--accent)) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      padding: 2px 10px 16px; margin-bottom: 20px; border-bottom: 1px solid var(--hairline); }
  .side-brand small { display: block; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      font-size: 9.5px; font-weight: 500; letter-spacing: .22em;
      text-transform: uppercase; color: var(--muted); margin-top: 5px; }
  [data-mode="dark"] .side-brand { background-image: none; -webkit-text-fill-color: currentColor; color: var(--ink-2); }
  /* Lišta se skrývá JEN na telefonu (≤640), kde ji nahrazuje spodní navigace.
     Dřív mizela už pod 1080 — rozbalením se pak ztratila i se svým ovladačem
     a nešlo ji vrátit. */
  @media (max-width: 640px) { .sidebar { display: none; } }
  /* PC: vlnovka lištu ZABALÍ NA IKONY — nezamkne ji. Jména, šipky a podbody zmizí,
     ikony zůstávají fixně na svém místě v téže jemné podobě (16 px, tah 1,6, tón živlu).
     Osa ikon: pás 64 px → střed 32 = táž osa jako v rozbalené liště. */
  /* Zabalený stav platí v KAŽDÉ šířce, kde lišta existuje — dřív byl zavřený
     v @media (min-width:1081px), takže pod 1080 zabalení nedělalo nic a lišta
     prostě zmizela („v zabaleném stavu není nic"). */
  /* pás 64 px → střed = 32 px, což je PŘESNĚ osa ikon v rozbalené liště
     (14 odsazení + 10 padding + 8 půl ikony). Ikony jsou tedy středem pásu
     a při rozbalení neodskočí ani o pixel — oba požadavky naráz. */
  body.nav-collapsed .sidebar { width: 64px; padding: 7px 0 0; }
  /* rytmus i rozložení jako v rozbaleném stavu: řádky se rovnoměrně rozprostřou
     od vrchní hrany po spodní (space-between); ikony středem pásu, ne u levé hrany */
  body.nav-collapsed .snav { align-items: center; justify-content: space-between; gap: 0; padding: 10px 0 16px; }
  /* „Přizpůsobit menu" (posuvníky) je mrtvé → pryč z lišty na všech šířkách; nastavení nese ⚙ vpravo nahoře */
  .side-foot { display: none !important; }
  /* SR pryč z levé lišty (brand nese vlnka nahoře, účet nese SR vpravo nahoře) */
  .sr-btn { display: none; }
  body.nav-collapsed .snav-group { gap: 0; align-items: center; }
  /* stejný rámeček jako v rozbaleném řádku (32 px výška) → ikony neposkočí */
  body.nav-collapsed .snav-group-label,
  body.nav-collapsed .snav > .snav-item, body.nav-collapsed .snav-top > .snav-item {
    width: 36px; gap: 0; padding: 8px 10px; border-radius: 9px; justify-content: center; }
  /* text, šipka a podbody se skryjí; ikona a její tón zůstávají */
  body.nav-collapsed .snav-group-label > span:not(.chev),
  body.nav-collapsed .snav-group-label .chev,
  body.nav-collapsed .snav > .snav-item > span:not(.gline), body.nav-collapsed .snav-top > .snav-item > span:not(.gline),
  body.nav-collapsed .snav-group .snav-item { display: none; }
  body.nav-collapsed .side-brand { display: none; }
  body.nav-collapsed .side-foot { margin: 0; padding: 9px 0 11px;
    display: flex; justify-content: center; }


  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topbar {
    height: 72px; background: var(--chrome);
    border-bottom: 1px solid var(--hairline); /* linka vždy celou šířkou, v obou stavech */
    display: flex; align-items: center; padding: 0 28px 0 0; gap: 16px;
    position: sticky; top: 0; z-index: 30;
  }
  /* kolejnice bez dělicí čáry — roh je jednolitý, jméno patří doleva hned k čárkám;
     tři čáry = jeden ovladač na všech šířkách (PC zabalí lištu, mobil otevře šuplík) */
  /* BLOK ZNAČKY (4. 8., na přání Terezy): název na vlastním řádku NAD čárami, podtitul vpravo vedle čar;
     celý blok se vejde do šířky levé lišty (256) — nic nepřetéká přes její pomyslnou hranici */
  .brand-block { display: flex; flex-direction: row; align-items: center; gap: 10px;
                 width: auto; min-width: 214px; flex: none; align-self: stretch; padding-left: 19px; } /* osa vlnovky = osa ikon lišty: 19 + 26/2 = 32 = střed railu 64 px (30. 9.) */
  @media (max-width: 1080px) { .brand-block { width: auto; padding-left: 19px; } } /* rail 64 px i na tabletu → stejná osa 32 */
  @media (max-width: 640px)  { .brand-block { padding-left: 14px; } }
  /* vlnovka je o dech větší než ikony lišty (26 vs. 20) — značka, ne ikona */
  .brand-mark { color: var(--accent); flex: none; transform: translateY(1.5px); } /* opticky na střed lišty (72 px) */
  /* vlnovka bere tón CTA „Nová rezervace" (světlo: kotva 0.46; ve tmě je CTA tmavá plocha, tam drží accent) */
  [data-mode="light"] .brand-mark { color: oklch(0.46 var(--c) var(--hue)); }
  .brand-mark svg { width: 26px; height: 19px; }
  .brand-mark:hover { background: var(--row-line); color: var(--accent); }
  .brand-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: transparent; }
  .wordmark { display: flex; align-items: baseline; gap: 6px; font-size: 16px;
              line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
  .wordmark b    { font-weight: 500; color: var(--ink); }
  .wordmark span { font-weight: 300; color: var(--ink-2); }
  @media (max-width: 640px) { .wordmark { display: none; }
    .brand-block { min-width: 0 !important; padding-left: 14px; } /* lišta je skrytá → brand nemusí držet 214px (dělalo přetečení + bílo vpravo) */
  }

  /* OVLADAČ SALON + ÚČET (N7a): jediná identita vpravo. Monogram drží pevnou šířku,
     jméno ustupuje ≤1240 — pravý okraj lišty se nehne ani u dlouhých názvů. */
  .acct-wrap { position: relative; flex: none; }
  .acct { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px;
          border: 0; background: transparent; border-radius: 10px; cursor: pointer; font: inherit;
          white-space: nowrap; transition: background .18s, color .18s; }
  .acct:hover { background: var(--row-line); }
  .acct:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* ovladač salonu nese ikonu nastavení, ne monogram — monogram SR teď ovládá
     lištu vlevo a dvakrát týž znak by mátl */
  .acct .mono { display: none; width: 26px; height: 26px; border-radius: 8px; flex: none;
          align-items: center; justify-content: center; background: transparent; color: var(--muted); }
  .acct .mono svg { width: 18px; height: 18px; }
  .acct:hover .mono { color: var(--accent); }
  .acct .lbl { font-size: 11.5px; font-weight: 400; letter-spacing: -.01em; color: var(--muted); }
  .acct:hover .lbl { color: var(--ink-2); }
  .acct .ch { width: 13px; height: 13px; color: var(--faint); }
  @media (max-width: 1000px) { .acct .lbl, .acct .ch { display: none; } .acct .mono { display: inline-flex; } .acct { padding: 0 5px; } }
  @media (min-width: 1001px) { .acct .mono { display: inline-flex; } } /* ikona nastavení je vidět vždy */ /* pod 1000 nese jméno hlavička šuplíku, tlačítko zůstává jako monogram */
  .acct-pop { position: absolute; right: 0; top: 46px; width: 268px; z-index: 60;
          background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
          padding: 10px 8px 8px; box-shadow: var(--shadow-hover); text-align: left; }
  .ap-sect { font-size: 11.5px; font-weight: 450; letter-spacing: -.01em;
          color: var(--muted); padding: 2px 10px 8px; }
  .ap-tenant, .ap-user { display: flex; align-items: center; gap: 9px; padding: 4px 10px 8px;
          font-size: 12.5px; font-weight: 500; color: var(--ink); }
  .ap-mono { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
          border-radius: 8px; background: var(--row-line); color: var(--muted);
          font-size: 10px; font-weight: 500; letter-spacing: .04em; flex: none; }
  .ap-row { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent;
          cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 400; color: var(--ink-2);
          padding: 7px 10px; border-radius: 8px; text-align: left; }
  .ap-row:hover { background: var(--row-line); color: var(--ink); }
  .ap-row .mi, .ap-user .mi { width: 16px; height: 16px; color: var(--faint); flex: none; }
  .ap-line { height: 1px; background: var(--hairline); margin: 8px 10px 10px; }
  /* přepínání salonu (pobočky): aktivní salon tučně s fajfkou, ostatní tiše; mono kolečko v tónu živlu jen u aktivního */
  .ap-salons { display: flex; flex-direction: column; gap: 1px; margin-bottom: 2px; }
  .ap-salon { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; cursor: pointer;
          font: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink-2); padding: 5px 10px; border-radius: 8px; text-align: left; }
  .ap-salon:hover, .ap-salon:focus-visible { background: var(--row-line); color: var(--ink); }
  .ap-salon .ap-sn { flex: 1; min-width: 0; }
  .ap-salon .ap-check { width: 15px; height: 15px; color: var(--accent); flex: none; visibility: hidden; }
  .ap-salon.on { font-weight: 500; color: var(--ink); cursor: default; }
  .ap-salon.on .ap-check { visibility: visible; }
  .ap-salon .ap-pin { width: 16px; height: 16px; color: var(--faint); flex: none; }
  .ap-salon.on .ap-pin { color: var(--accent); }
  .ap-sect-sub { padding-top: 12px; } /* Pobočka: vzduch od Nastavení salonu */
  .acct .lbl small { font: inherit; color: var(--muted); }
  .ap-langs { display: flex; gap: 1px; margin: 2px 10px 8px; padding: 2px;
          border: 1px solid var(--hairline); border-radius: 10px; }
  .ap-langs button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 11.5px;
          font-weight: 400; color: var(--muted); padding: 5px 0; border-radius: 8px; cursor: pointer; }
  .ap-langs button.on { background: var(--row-line); color: var(--ink); }
 /* název na vlastním řádku nad čárami; levá hrana = hrana glyfu čar i ikon lišty (x=24), konec < hranice lišty 256 */

  .topbar .spacer { flex: 1; }
  .top-ic { width: 36px; height: 36px; border-radius: 10px; display: flex;
            align-items: center; justify-content: center; color: var(--muted);
            cursor: pointer; border: 1px solid transparent; background: transparent;
            transition: color .18s, background .18s; }
  .top-ic:hover { color: var(--accent); }
  .top-ic.on { color: var(--accent); }
  .top-ic svg { width: 19px; height: 19px; }
  .cta { display: inline-flex; align-items: center; gap: 7px; background: oklch(0.46 var(--c) var(--hue)); color: oklch(0.985 0 0); /* kotva 0.46 — ztišený akcent (varianta 2), nekřičí proti slonovině */
         border: 0; border-radius: 10px; padding: 9px 15px; font: inherit; font-size: 11.5px;
         font-weight: 500; letter-spacing: .01em; cursor: pointer; white-space: nowrap;
         transition: filter .18s; }
  .cta:hover { filter: brightness(1.1); }
  .cta svg { width: 14px; height: 14px; }
  [data-mode="dark"] .cta {
    background: oklch(0.185 calc(var(--c) * 0.60) var(--hue)); /* ztišeno z 0.205 (zámek otevřen 23.7.) — pořád nad kartami 0.139, nesvítí */
    color: oklch(0.93 0.010 var(--hue));
    border: 1px solid oklch(0.22 calc(var(--c) * 0.40) var(--hue)); /* těsně nad výplní 0.185 — hrana se tuší, nesvítí */
  }
  [data-mode="dark"] .cta:hover { filter: brightness(1.22); }
  .search { display: flex; flex: 0 1 220px; min-width: 150px; align-items: center; gap: 8px; width: 220px; height: 36px;
            padding: 0 8px 0 11px; margin-left: 14px; border: 1px solid var(--hairline);
            border-radius: 10px; background: var(--surface); color: var(--muted);
            font-size: 11.5px; cursor: text; }
  .search svg { width: 15px; height: 15px; flex: none; }
  .search kbd { margin-left: auto; font: inherit; font-size: 10px; color: var(--muted);
                border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 6px; }
  /* QA1 byla léčba příznaku: hledání se skrývalo od 1140 px, i když v liště zbývala
     třetina volného místa. Pole se místo toho smí SMRSKNOUT (min 150) a zkratka ⌘K
     ustoupí první — mizí až tam, kde na ně opravdu není prostor. */
  @media (max-width: 900px) { .search kbd { display: none; } }
  @media (max-width: 820px) { .search { display: none; } }
  /* tablet 641–820: hledání jako lupa (jako na mobilu), ne úplně pryč */
  @media (max-width: 820px) and (min-width: 641px) {
    .search { display: flex; flex: none; width: 36px; min-width: 0; padding: 0; gap: 0; justify-content: center; font-size: 0; }
    .search kbd { display: none; }
  }
  @media (max-width: 760px) { .cta { padding: 8px 11px; } .cta svg { margin-right: 0; } }


  .seg { display: inline-flex; gap: 4px; background: transparent; border: 0; padding: 0; }
  .seg button { border: 0; background: transparent; color: oklch(0.50 0 0);
    font: inherit; font-size: 11.5px; font-weight: 400; padding: 5px 8px;
    border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
  .seg button.on { background: transparent; color: var(--ink); font-weight: 500; }
  [data-mode="dark"] .seg button { color: oklch(0.74 0 0); } /* audit: 0.66 dávalo 3,66:1 */
  [data-mode="dark"] .seg button.on { color: var(--ink); }
  .seg button:hover:not(.on) { color: oklch(0.32 0 0); }
  [data-mode="dark"] .seg button:hover:not(.on) { color: oklch(0.84 0 0); }

  .mode-btn { width: 36px; height: 36px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; color: var(--muted); cursor: pointer;
    border: 1px solid transparent; background: transparent; transition: color .18s, background .18s; }
  .mode-btn:hover { color: var(--ink-2); background: var(--row-line); }
  .top-ic:hover { background: var(--row-line); }
  .mode-btn svg { width: 18px; height: 18px; }

  .content { flex: 1; position: relative; padding: 18px 20px 40px; }
  .bg-layer { position:absolute; inset:0; pointer-events:none; opacity:0;
              transition: opacity .34s ease; z-index:0; }
  .bg-layer.on { opacity:1; }
  .content > *:not(.bg-layer) { position: relative; z-index:1; }

  .page-head { display:flex; align-items:center; justify-content:space-between;
               margin: 0 0 18px; gap: 12px 24px; flex-wrap: wrap; }
  h1.eyebrow { font-size: 11.5px; font-weight: 400; letter-spacing: -.01em;
               color: var(--ink-2); margin: 0; }
  .page-meta { text-align: right; }
  .page-date { font-size: 11.5px; font-weight: 400; color: var(--muted); }
  /* tma: pomocne verzalky (th, d-label, eyebrow) na --faint - nesmi svitit vic nez primarni stitky 0.46 */
  [data-mode="dark"] th { color: var(--muted); } /* audit: faint dával 2,45:1 */
  [data-mode="dark"] .d-label, [data-mode="dark"] .donut-box .d-label { color: var(--muted); }
  [data-mode="dark"] h1.eyebrow { color: var(--ink-2); }
  [data-mode="dark"] .sect { color: var(--ink); } /* .donut-box kvůli specificitě — stráž nález #1 */

  .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline);
          border-radius: 12px; padding: var(--pad-y) var(--pad-x); margin-bottom: 16px;
          box-shadow: var(--shadow), inset 0 1px 0 var(--specular);
          transition: box-shadow .22s, transform .22s, background-color .3s ease, border-color .3s ease; }
  .card:hover { box-shadow: var(--shadow-hover), inset 0 1px 0 var(--specular-hover); transform: translateY(-1px); }

  /* kapitoly stránky */
  .sect { display: flex; align-items: center; gap: 12px; margin: 34px 0 10px; /* drží levou linku obsahu (eyebrow ↔ sekce ↔ karty) */
          font-size: 14px; font-weight: 450; letter-spacing: -.01em;
          color: var(--ink); } /* = nadpis karty (jeden nadpisový styl) */
  /* .sect::after zrušeno 8. 9. — linka přes celou šířku byla nadbytečná */
  [data-mode="dark"] .kpi .label { color: var(--ink-2); }
  /* škála intenzity pruhů: nejmenší = nejsvětlejší tón živlu, nejvyšší = accent-deep */
  [data-mode="light"] { --scale-lo: oklch(0.885 calc(var(--c) * 0.45) var(--hue)); --scale-hi: var(--accent-deep); }
  [data-mode="dark"]  { --scale-lo: oklch(0.36 calc(var(--c) * 0.55) var(--hue)); --scale-hi: oklch(0.64 var(--c) var(--hue)); }
  [data-mode="dark"] .card-h { color: var(--ink); }
  [data-mode="dark"] .card-sub { color: var(--muted); } /* audit: faint dával 2,45:1 */
  [data-mode="dark"] .donut svg path { filter: saturate(.85) brightness(.92); } /* data-viz −15 % i pro koláče, sweep #10 */
  [data-mode="dark"] .kpi .val { background-image: none; -webkit-text-fill-color: currentColor; color: var(--ink-2); } /* KPI číslice o stupeň pod bílou (0.84) — řada nesmí řvát */


  /* nástup obsahu */
  @keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  .content > *:not(.bg-layer), .kpis .kpi { animation: rise .5s ease backwards; animation-delay: calc(var(--i, 0) * 45ms); } /* backwards: po nástupu animace nedrží transform → jemné poskočení při najetí funguje u VŠECH karet stejně */
  .card.flush { padding: 0; margin-bottom: 24px; }
  .card.group-start, .grid2.group-start { margin-top: 34px; } /* zlom skupiny = dvojnásobný vzduch (kapitoly zrušeny 8. 9.) */
  .card.flush .card-head { padding: var(--pad-y) var(--pad-x) 0; }
  .card-h { font-size: 11.5px; font-weight: 400; margin: 0 0 2px; color: var(--ink-2); letter-spacing: -.01em; } /* PŘESNĚ jako KPI labely (Dnešní tržby): Inter 11.5 / w400 / ink-2 */
  .card-sub { font-size: 11.5px; color: var(--muted); margin: 0 0 14px; }
  .card-sub b { color: var(--ink-2); font-weight: 500; }
  .card.flush .card-sub { margin-bottom: 6px; }
  .card-head { display:flex; align-items:flex-start; justify-content:space-between; gap: 12px;
               margin: -6px 0 0; } /* názvy karet maličko výš (rozhodnutí 3. 8.); vlevo drží páteř obsahu — posun −8px tvořil třetí levou linku (audit 4. 8.) */
  .card-head > div:first-child { display: flex; align-items: baseline; gap: 10px; }
  .card-head .card-h, .card-head .card-sub { margin: 0; } /* podtitulek vedle nadpisu, ne pod ním */
  .card.flush .card-head { margin: 0; padding: calc(var(--pad-y) - 6px) var(--pad-x) 0; }
  .card-head .seg { align-self: center; position: relative; top: -5px; } /* 30. 9.: záložky na účaří nadpisu karty (bylo o 5 px níž) */
  .card-head + * { margin-top: 2px; }
  .card-head + .rows { margin-top: 12px; } /* žebříčky: vzduch mezi názvem a prvním řádkem (pravidlo dle karty Stav, 4. 8.) */

  table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
  /* rezervace scrolují uvnitř karty (týden až 90 dní), hlavička drží nahoře;
     přesnou výšku (celé řádky, nikdy useknutý) dopočítává layoutResvTable */
  .tbl-scroll { margin-top: 8px; /* vzduch mezi titulkem a hlavičkami sloupců */ }
  /* bez vlastního posuvníku: hlavička se při rolování stránky přilepí pod horní lištu */
  .tbl-scroll thead th { position: sticky; top: 72px; z-index: 2; background: var(--surface); }
  /* 1. 10. Tereza: řádek „Zobrazit další“ jemnější – tichý odkaz, ne tlačítko */
  .resv-more { display: block; margin: 0 auto 10px; padding: 4px 10px; border: 0; border-radius: 6px; background: none;
    font: inherit; font-size: 11.5px; font-weight: 400; color: var(--muted); cursor: pointer; }
  .resv-more:hover, .resv-more:focus-visible { color: var(--accent); }
  .resv-more[hidden] { display: none !important; }
  .resv-cards .rc[hidden] { display: none !important; }
  /* Sloupce rozměřuje JS (layoutResvTable): obsah KAŽDÉHO sloupce centrovaný
     na jeho ose, mezery mezi obsahy identické, levý odsaz Času = vzdálenost
     „í" (Nadcházející) od pravého okraje, poslední sloupec končí pod „í".
     Tady jen rozumný fallback pro případ bez JS. */
  col.c-time { width: 15%; } col.c-client { width: 21%; }
  col.c-service { width: 20%; } col.c-ther { width: 16%; } col.c-perm { width: 11%; } col.c-state { width: 13%; }
  col.c-menu { width: 48px; }
  /* úzká tabulka: skrýt křestní jméno, nechat jen příjmení, ať se to vejde */
  @media (max-width: 1080px) { .card.flush .nm-first { display: none; } }
  /* ZAROVNÁNÍ (4. 8., rozhodnutí Terezy): NÁZVY sloupců zůstávají na levých páteřích;
     DATA se centrují pod STŘED TEXTU názvu (osu dopočítává layoutResvTable per buňka
     přes padding-left). Výjimky: Datum a čas (levá kotva 22 px) a ⋮ (pravá hrana). */
  th, td { text-align: left; padding-left: 0; padding-right: 0; }
  td:last-child, th:last-child { text-align: right; padding: 14px var(--pad-x) 14px 10px; } /* ⋮ na pravé hraně */
  td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  td:nth-child(5), td:last-child { overflow: visible; } /* stav ani ⋮ se nesmí ořezávat (u ⋮ vznikala falešná výpustka „…“) */
  /* boční padding jen 10px — vzdušnost sloupců řídí vypočtené mezery (layoutResvTable),
     velký padding by u úzkých sloupců zbytečně vynucoval ořez */
  th { font-size: 11.5px; color: var(--muted); font-weight: 400;
       letter-spacing: -.01em;
       padding: 10px 10px 14px; border-bottom: 0; }
  /* nit jen pod slovem, každý sloupec samostatně (jedna linka přes celou hlavičku zamítnuta) */
  th .thl.thl-time { display: inline-flex; }
  th .thl { display: inline-block; } /* bez podtržení názvů — hierarchii nese barva + váha */
  td { vertical-align: middle; padding: 13px 10px; border-bottom: 1px solid var(--row-line); font-size: 12.5px; color: var(--ink-2); }
  tr:last-child td { border-bottom: none; }
  tbody tr { transition: background .18s; }
  tbody tr:hover { background: var(--row-line); }
  .t-time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .t-time .t-day { display: inline-block; min-width: 92px; }
  th .th-slot { display: inline-block; min-width: 92px; padding-left: 7px; } /* „Datum" nad daty, maličko doprava = střed sloupečku dat */
  th .th-cas { margin-left: 5px; } /* „Čas" nad časy (slot 92 px), maličko doprava = střed časů */ /* datum vlevo na páteři; pevná šířka = časy na vlastní druhé svislici (posunuto o 2 číslice doprava dle Terezy) */
  .t-time b { color: var(--accent); font-weight: 450; }
  [data-mode="dark"] .t-time b { color: oklch(0.74 var(--c) var(--hue)); } /* audit: accent 0.66 dával 3,74:1 */
  .t-name { font-weight: 450; color: var(--ink); } /* bez display:flex — td musí zůstat table-cell, jinak se řádek rozpadá (flex byl pozůstatek iniciál) */
  .t-perm { color: var(--muted); } /* permanentka jemně; číslo (.perm-num) tiše zdůrazněné */
  /* 1. 10.: sloupec Prodej zrušen – prodej i jeho částka jsou v rozbalení rezervace */
  .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px;
          font-weight: 450; padding: 0; border: 0; background: transparent;
          white-space: nowrap; }
  /* kolečko pilulky = odbavení: klik nabídne ✓ Dorazil / ✕ Nedostavil se;
     neviditelný terč 22px (6px tečka se nedá trefit) */
  td .pill { padding-left: 8px; } /* místo pro neviditelný terč 22px kolem tečky (bez něj se terč ořezával o hranu buňky) */
  td .pill .dot { cursor: pointer; position: relative; }
  td .pill .dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  td .pill .dot:hover { transform: scale(1.35); }
  .pill .dot { transition: transform .12s; }
  /* permanentka: každé číslo ve vlastním kroužku (evokace ∞), plus volně mezi nimi — v menu ⋮ */
  .perm-b { display: inline-flex; align-items: center; gap: 3px; }
  .perm-n { display: inline-flex; align-items: center; justify-content: center;
    min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-deep) 45%, transparent); /* decentní barevný prstenec, číslo inkoustem */
    font-size: 10px; font-weight: 500; color: var(--ink);
    font-variant-numeric: tabular-nums; }
  .perm-plus { font-size: 10px; font-weight: 500; color: var(--muted); }
  .perm-none { color: var(--faint); } /* bez permanentky: tiché „žádná", ne prázdno */
  /* počítač: prázdné políčko permanentky je živé – najetím „Přidat“, klik = prodej, po koupi se vyplní */
  .rc-comm .perm-add { margin: -2px -6px; } /* karty: „–“ je dotyková plocha, text stojí na místě */
  .rc-comm .perm-add .pa-go { display: none; } /* karty: bez najetí myší – jen „–“ na svém místě */
  .rc-comm .perm-add > span { text-align: left; }
  .rc-comm .perm-edit { gap: 5px; } /* karty: „0 + 5“ s mezerami jako dřív */
  .perm-add { display: inline-grid; cursor: pointer; color: var(--faint); border-radius: 6px; padding: 2px 6px; }
  .perm-add > span { grid-area: 1 / 1; text-align: center; transition: opacity .15s; }
  .perm-add .pa-go { opacity: 0; color: var(--accent); font-weight: 500; }
  /* 1. 10. Tereza: bez nápisu „Přidat“ – po najetí se pomlčka jen jemně obtáhne, klik = prodej permanentky */
  .perm-add .pa-go { display: none; }
  .perm-add { transition: box-shadow .15s, color .15s; }
  /* 1. 10. Tereza: nic nevykreslovat – pomlčka i číslo se jen podtrhnou při přesném najetí; prodej je hlavně pod ⊕, úprava i v ⋮ */
  :is(#resv, .rz-telo) .perm-add, :is(#resv, .rz-telo) .perm-edit { padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; }
  /* číslo permanentky: při přesném najetí jen probarvit barvou živlu (jako „+“), bez podtržení */
  :is(#resv, .rz-telo) .perm-edit { transition: color .15s; }
  :is(#resv, .rz-telo) .perm-edit:hover, :is(#resv, .rz-telo) .perm-edit:focus-visible, :is(#resv, .rz-telo) .perm-edit:hover .perm-num, :is(#resv, .rz-telo) .perm-edit:hover .perm-plus,
  :is(#resv, .rz-telo) .perm-edit:focus-visible .perm-num, :is(#resv, .rz-telo) .perm-edit:focus-visible .perm-plus { color: var(--accent); outline: none; }
  /* pomlčka se při přesném najetí změní na prosté „+“ (bez kolečka) – klik = prodej permanentky */
  /* „+“ neutrálně: stejná barva jako pomlčka, jen o chlup větší kvůli čitelnosti; barvu živlu dostane až při přesném najetí */
  :is(#resv, .rz-telo) .perm-add .pa-go { display: block; opacity: 0; color: inherit; font-weight: 400; font-size: 1.15em; line-height: 0; align-self: center; }
  :is(#resv, .rz-telo) .perm-add:hover .pa-go, :is(#resv, .rz-telo) .perm-add:focus-visible .pa-go { color: var(--accent); }
  /* „+“ se ukáže už při najetí na celý řádek klienta (Tereza 1. 10. – ne až při přesném zásahu malé pomlčky) */
  :is(#resv, .rz-telo) tr:hover .perm-add .pa-dash, :is(#resv, .rz-telo) .perm-add:focus-visible .pa-dash { opacity: 0; }
  :is(#resv, .rz-telo) tr:hover .perm-add .pa-go, :is(#resv, .rz-telo) .perm-add:focus-visible .pa-go { opacity: 1; }
  :is(#resv, .rz-telo) .perm-add:focus-visible { outline: none; }
  .perm-edit { display: inline-flex; cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: background .15s; }
  .perm-edit:hover, .perm-edit:focus-visible { background: var(--row-line); }
  .perm-out { color: var(--muted); font-size: 11.5px; }
  /* řádkový popover (odbavení / menu ⋮ / prodejní šablony) */
  .row-pop { position: fixed; z-index: 90; min-width: 168px; padding: 6px;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(46,38,28,.16); }
  .row-pop button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 10px;
    border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left;
    font: 400 11.5px Inter, ui-sans-serif, sans-serif; color: var(--ink-2); }
  .row-pop button:hover { background: var(--row-line); color: var(--ink); }
  .row-pop .price { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* menu ⋮: informační řádky (permanentka, prodej) nad akcí */
  .row-pop .rp-info { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 7px 10px; font: 400 11.5px Inter, ui-sans-serif, sans-serif; color: var(--muted); }
  .row-pop .rp-info b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
  .row-pop .rp-sep { height: 1px; background: var(--row-line); margin: 4px 2px; }
  .row-pop .m-ok { color: var(--ok); font-weight: 500; }
  .row-pop .m-no { color: var(--cancel); font-weight: 500; }
  .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
  .pill.plan { color: var(--accent-deep); }
  [data-mode="dark"] .pill.plan { color: oklch(0.74 calc(var(--c) * 1.05) var(--hue)); } /* audit: accent-deep 0.60 dával 2,96:1 */ /* jediný akční stav: dutá tečka (prstenec) místo čárkovaného obrysu */
  .pill.plan .dot { background: transparent; box-shadow: inset 0 0 0 1.6px currentColor; }
  .pill.ok       { color: var(--confirmed); }
  .pill.progress { color: var(--progress); }
  .pill.done     { color: var(--ok); }
  .pill.cancel   { color: var(--cancel); }
  .pill.noshow   { color: color-mix(in srgb, var(--noshow) 80%, var(--ink)); }
  .dots { color: var(--muted); cursor: pointer; display: inline-flex; width: 28px; height: 28px;
          align-items: center; justify-content: center; border-radius: 8px; transition: color .15s, background .15s; }
  .dots:hover { color: var(--ink); background: var(--row-line); }
  /* akce řádku: ⊕ (prodej+permanentka) a ⋮ (upravit/zrušit) — dvě tiché ikony na hraně */
  .row-acts { display: inline-flex; align-items: center; gap: 2px; }
  .add { color: var(--faint); cursor: pointer; display: inline-flex; width: 28px; height: 28px;
         align-items: center; justify-content: center; border-radius: 8px; transition: color .15s, background .15s; }
  .add svg { width: 17px; height: 17px; }
  .add:hover { color: var(--accent); background: var(--row-line); }
  .add:focus-visible, .dots:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* permanentka jemně: číslo tiše zdůrazněné, BEZ kroužku */
  .perm-num { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* ikona v řádcích popoveru (Upravit/Zrušit/Doplňkový prodej) */
  .row-pop .mi { width: 16px; height: 16px; flex: none; color: var(--muted); }
  .row-pop button[data-act="sale"] svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
  .row-pop .m-cancel { color: var(--cancel); }
  .row-pop .m-cancel .mi { color: var(--cancel); }
  .row-pop .m-cancel:hover { background: color-mix(in oklab, var(--cancel) 12%, transparent); }

  /* hero 1.55 bylo na „28 400 Kč" zbytečně široké — text končil daleko od pravé hrany;
     1.28 mu nechá hero měřítko a vrátí místo zbylým třem */
  .kpis { display: grid; grid-template-columns: 1.28fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .kpi { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
         display: flex; flex-direction: column; align-items: flex-start; /* patička/delta kotví dole v OBOU režimech */
         padding: var(--pad-y) var(--pad-x) 26px; box-shadow: var(--shadow), inset 0 1px 0 var(--specular); /* spodek 34px u VŠECH karet (zóna vlnovky) — jinak se střed pásma karta od karty liší */
         transition: box-shadow .22s, transform .22s, background-color .3s ease, border-color .3s ease;
         position: relative; overflow: hidden; display: flex; flex-direction: column; }
  /* obsah KPI: štítek nahoře, číslo s dovětkem vycentrované ve zbylém prostoru (rozhodnutí 3. 8.);
     SPOLEČNÉ LINKY ŘADY (audit 4. 8.): 44px strut v .val drží účaří čísel na jedné lince ve všech
     kartách (hero i 28px čísla), třetí řádek má jednotnou výšku 21px — bez toho každá karta
     centrovala jinak (číslo „14" sedělo o 7 px níž, paty na třech výškách) */
  .kpi:hover { box-shadow: var(--shadow-hover), inset 0 1px 0 var(--specular-hover); transform: translateY(-1px); }
  .kpi .label { font-size: 11.5px; color: var(--ink-2); font-weight: 400; letter-spacing: -.01em; }
  .kpi .val { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
              font-size: 26px; font-weight: 400;
              letter-spacing: -.01em; color: var(--ink); line-height: 1;
              /* tichá rytina: dva blízké tóny inkoustu s nádechem kovu živlu */
              background-image: linear-gradient(180deg,
                color-mix(in oklab, var(--ink) 93%, var(--accent)) 0%,
                color-mix(in oklab, var(--ink-2) 82%, var(--accent)) 100%);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
  .kpi.primary .val { font-size: 38px; letter-spacing: -.015em; }
  /* špička pyramidy: jediné číslo v hlubokém tónu živlu (rytina z accent-deep) */
  html:not([data-elem="vzduch"]) .kpi.primary .val {
    background-image: linear-gradient(180deg,
      color-mix(in oklab, var(--accent-deep) 92%, var(--ink)) 0%,
      color-mix(in oklab, var(--accent-deep) 74%, var(--ink-2)) 100%); }
  /* tma: žádná metalíza — ve tmě přeliv na glyfech vypadá lacině a rozostřuje čitelnost.
     Hero je prostý plochý tón živlu; ostatní KPI čistý inkoust. */
  html[data-mode="dark"] .kpi.primary .val {
    background-image: none; -webkit-text-fill-color: currentColor;
    /* hero ve tmě = stejná barva jako ostatní čísla řady (23. 7. večer; 0.40 působil cize, čistá bílá řvala → celá řada na ink-2 0.84) */
    color: var(--ink-2); }
  /* JEDINÁ deklarace rozměrů .val (dřív byla rozdělená do dvou pravidel a `margin-top: auto`
     z pozdějšího tiše přebíjel psaných 10 px — mezera štítek↔číslo pak nebyla navržená,
     ale zbytková). Skupina štítek + číslo + pata drží pohromadě a kotví se ke DNU karty,
     takže štítek stojí u své hodnoty, ne osamoceně nahoře. */
  .kpi { justify-content: flex-end; }
  .kpi .label { margin-bottom: 9px; }
  .kpi .val { height: 42px; margin: 0 0 7px; }   /* 42 = řádek 38px vzpěry + dotahy */
  .kpi .val::before { content: "0"; display: inline-block; width: 0; overflow: hidden; font-size: 38px; } /* strut: společné účaří řady */
  /* třetí řádek má JEDNU mechaniku pro deltu i patu — dřív byl jednou inline-flex
     a jednou line-height, takže účaří napříč řadou nesedělo.
     POZOR: flex dělá z textu kolem <b> samostatné položky a mezeru mezi nimi zahodí
     („Další v17:00“) — proto `gap`, který ji vrátí a nezávisí na bílém znaku ve zdroji. */
  .kpi .delta, .kpi .foot { display: flex; align-items: center; height: 21px; margin: 0; gap: .3em; }
  .kpi .delta { align-self: flex-start; padding: 0; font-size: 11.5px; font-weight: 450;
                gap: 5px; max-width: 100%; }
  /* řádek má pevných 21 px — dlouhý dovětek se musí oříznout, ne zalomit, jinak
     se rozpadne společné účaří řady */
  .kpi .delta > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi .delta.up { color: var(--ok-bright, var(--ok)); }
  .kpi .delta.down { color: var(--cancel); }
  .kpi .delta .ctx { color: var(--muted); font-weight: 400; }
  .kpi .foot { font-size: 11.5px; color: var(--muted); } /* výška a zarovnání viz společné pravidlo výš */
  .kpi .foot b { color: var(--accent); font-weight: 500; } /* audit A2: konvence „čas = akcent 600" platí i tady */
  .kpi .delta svg { width: 12px; height: 12px; stroke-width: 1.6; flex: none; }
  .kpi .spark { position: absolute; right: 0; bottom: 0; left: 0; height: 26px; opacity: .4; pointer-events: none; }
  .kpi .spark svg { display: block; width: 100%; height: 26px; }
  .spark-fill { fill: none; } /* plocha pod křivkou zrušena — působila jako přeliv plátna do karty */
  .spark-line { fill: none; stroke: var(--chart-line); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }

  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
  .grid2:last-child { margin-bottom: 0; }
  /* asymetrie 65/35 dle váhy obsahu (skripta kap. 16) */
  .grid2.asym-r { grid-template-columns: 1fr 1.42fr; }
  .grid2.asym-l { grid-template-columns: 1.42fr 1fr; }

  /* sloučené žebříčky: název · metrika 1 · Kč · pruh */
  .rows { list-style: none; margin: 0; padding: 0; }
  .rows li { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
             gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--row-line); }
  .rows li:last-child { border-bottom: none; padding-bottom: 2px; }
  .rows .name { font-size: 12.5px; color: var(--ink-2); font-weight: 400;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rows .m1 { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
  .rows .m2 { font-size: 12.5px; font-weight: 400; color: var(--ink); white-space: nowrap; text-align: right; min-width: 84px; font-variant-numeric: tabular-nums; }
  /* audit A4: karta Terapeuti se jmenuje „vytížení" — % je primární metrika (600/ink), Kč sekundární; u Služeb zůstávají primární Kč */
  #therapists .m1 { font-size: 12.5px; font-weight: 450; color: var(--ink); }
  #therapists .m2 { font-size: 11.5px; font-weight: 400; color: var(--muted); }
  #therapists .m1.ext { color: var(--accent-deep); } /* extrémy max/min = accent-deep v OBOU režimech (schválené rozhodnutí; akcent ze sweepu #9 vracel barvu klikacích časů — audit 4. 8.) */
  [data-elem="vzduch"][data-mode="dark"] #therapists .m1.ext { color: var(--ink); font-weight: 500; } /* sedy deep by hierarchii obratil - duraz nese vaha */ /* kapacitní extrémy (max/min) = důraz */
  .rows .bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
  .rows .bar i { display: block; height: 100%; border-radius: 999px;
                 background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); }

  /* spokojenost: sloupce s čísly, bez osy */
  .vbars2 { display: flex; align-items: flex-end; gap: 14px; flex: 1; height: auto; min-height: 195px; padding-top: 4px; }
  .vb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
  .vb .cnt { font-size: 12.5px; color: var(--muted); font-weight: 400; } /* počty ustupují průměru */
  .vb .col { width: 100%; max-width: 40px; border-radius: 4px 4px 2px 2px; min-height: 3px; }
  .vb .cap { font-size: 11.5px; color: var(--muted); }
  .chart-wrap { position: relative; }
  .rev-tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
             background: var(--ink); color: var(--surface); font: 500 11.5px/1.35 'Inter', ui-sans-serif, system-ui, sans-serif;
             padding: 7px 10px; border-radius: 8px; white-space: nowrap; z-index: 3; }
  .rev-tip .t-date { font-weight: 400; opacity: .72; display: block; }
  [data-mode="dark"] .rev-tip { background: oklch(0.24 0 0); color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.5); } /* N3: tma bez bílého záblesku */
  .status-wrap { display: flex; gap: 26px; align-items: center; flex: 1; }
  .donuts { display: flex; gap: 20px; flex: none; }
  .donut-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .donut-box .d-label { font-size: 11.5px; font-weight: 450; letter-spacing: -.01em; color: var(--muted); }
  .donut { flex: none; width: 132px; height: 132px; }
  .donut svg { display: block; width: 100%; height: 100%; }
  .donut .d-total { font: 400 22px 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; fill: var(--ink); }
  .donut .d-cap { font: 450 11.5px Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; fill: var(--muted); }
  .status-list { flex: 1; }
  @media (max-width: 760px) { .status-wrap { flex-direction: column; align-items: stretch; }
    .donut { margin: 2px auto 6px; } }
  .status-list { list-style: none; margin: 0; padding: 0; }
  .status-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center;
                    gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--row-line); }
  .status-list li:last-child { border-bottom: none; }
  .status-list .s-name { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
  .status-list .s-name i { width: 9px; height: 9px; border-radius: 4px; flex: none; }
  .status-list .s-count { font-size: 12.5px; font-weight: 500; color: var(--ink); }
  .status-list .s-pct { font-size: 12.5px; color: var(--muted); width: 44px; text-align: right; }

  .botnav { display: none; }
  /* Nastavení v topbaru — jen mobil (místo TR) */
  .top-set { display: none; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent;
             color: var(--muted); cursor: pointer; align-items: center; justify-content: center; }
  .top-set svg { width: 19px; height: 19px; }
  /* SR vpravo nahoře = důležitá ikonka → accent text + rámeček (bez výplně) */
  .top-set .sr-mono { width: 34px; height: 34px; font-weight: 500; letter-spacing: .02em;
    color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 55%, var(--hairline));
    background: transparent; }
  .top-set:hover .sr-mono { border-color: var(--accent); color: var(--accent-deep); }
  /* menu pod SR / kolem (mobil): účet nahoře + vzhled */
  .set-pop { display: none; position: fixed; top: 54px; right: 10px; z-index: 90; min-width: 210px;
             background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
             box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px;
             max-height: calc(100vh - 80px); overflow-y: auto; }
  .set-pop:not([hidden]) { display: block; }
  .set-pop .sp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
                     border: 0; background: transparent; border-radius: 9px; cursor: pointer;
                     font: inherit; font-size: 13px; color: var(--ink); text-align: left; }
  .set-pop .sp-row:hover, .set-pop .sp-row:active { background: var(--row-line); }
  .set-pop .sp-row svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
  /* vysouvací panel zkratek — otevírá se NAHORU nad spodní lištou */
  .more-sheet { display: none; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom));
                z-index: 76; background: var(--surface); border-top: 1px solid var(--hairline);
                border-radius: 12px 12px 0 0; box-shadow: 0 -14px 34px rgba(0,0,0,.16);
                padding: 12px 10px; transform: translateY(120%); visibility: hidden;
                transition: transform .3s ease, visibility .3s; }
  .more-sheet.open { transform: translateY(0); visibility: visible; }
  .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .more-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 6px 11px;
                 border-radius: 12px; text-decoration: none; color: var(--ink-2); font-size: 10px; font-weight: 400; }
  .more-grid a svg { width: 21px; height: 21px; color: var(--muted); }
  .more-grid a:hover, .more-grid a:active { background: var(--row-line); }
  /* tma: delty ÚPLNĚ bez zelené (směr nese šipka a znaménko, barva jen ve světle);
     sloupce Spokojenosti hluboko ztlumené — zelená ve tmě patří jen sémantickým stavům */
  [data-mode="dark"] .kpi .delta { background: transparent; padding: 0; } /* min-height 21 drží linku řady i bez pilulky */
  [data-mode="dark"] .kpi .delta.up { color: var(--muted); }
  [data-mode="dark"] .kpi .delta.down { color: var(--muted); }
  [data-mode="dark"] .vb .col { filter: brightness(.7) saturate(.55); }
  #botMore svg { transition: transform .25s ease; }
  #botMore.on svg { transform: rotate(180deg); }
  #botMore.on { color: var(--accent); }
  .resv-cards { display: none; }
  .resv-cards { padding: 0 var(--pad-x) 16px; }
  .resv-cards .rc { padding: 14px 0; border-bottom: 1px solid var(--row-line); }
  .resv-cards .rc:last-child { border-bottom: none; }
  .rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
  .rc-top .pill { margin-left: auto; } /* telefon: stav vpravo hned u ⋮ jako na počítači */
  .rc-top .dots { margin-left: -6px; }
  .rc-actions { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .rc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 4px; }
  .rc-metas { min-width: 0; }
  .rc-time { font-size: 11.5px; color: var(--accent); font-weight: 450; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rc-time.past { color: var(--muted); font-weight: 400; } /* audit A3: minulý čas je záznam, ne „připrav se" */
  .sat-avg { font-family: 'Iowan Old Style', Palatino, Georgia, serif; font-size: 26px; color: var(--ink); margin: 22px 0 10px; } /* číslo níž — pravidlo odsazení názvů dle karty Stav (4. 8.) */
  .sat-avg small { font-size: 11.5px; color: var(--muted); font-family: Inter, ui-sans-serif, sans-serif; font-weight: 400; margin-left: 7px; }
  .rc-name { font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
  .rc-meta { font-size: 11.5px; color: var(--muted); }
  .rc-perm { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .rc-comm { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .rc-comm .rc-lbl { color: var(--faint); }
  [data-mode="dark"] .rc-comm .rc-lbl { color: var(--muted); } /* tma: faint dával 4,1:1 */
  .rc-comm .rc-dot { color: var(--muted); }   /* 23. 10. kontrola: --faint pod 4,5 : 1 */
  .rc-comm .add { width: 22px; height: 22px; }
  .rc-comm .add svg { width: 15px; height: 15px; }

  @media (max-width: 880px) {
    table { display: none; }
    .resv-cards { display: flex; flex-direction: column; }
  }
  @media (max-width: 1000px) {
  }
  @media (max-width: 980px) {
    /* čtyři karty = dvě a dvě, žádné roztažení přes celou šířku.
       Pravidlo QA4 („poslední přes celou šířku, žádná díra") platilo pro TŘI karty;
       se čtyřmi dělalo rozvržení 1 + 2 + 1, které rozbíjí čtení řady. */
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .grid2, .grid2.asym-l, .grid2.asym-r { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    html, body { overflow-x: hidden; }
    /* mobil = jako PC: nativní ZABALENÝ sidebar (ikonový rail vlevo).
       POZOR: pod overflow-x:hidden selhává sticky (viz topbar) → rail je FIXED jako topbar,
       obsah odsazen o jeho šířku. Zabalený i rozbalený stav = fixed → žádné odskakování. */
    .sidebar { display: flex; position: fixed; left: 0; top: 60px;
               bottom: calc(60px + env(safe-area-inset-bottom)); height: auto; z-index: 30; }
    /* užší rail na mobilu → ikona blíž obsahu (vyváženější mezera vlevo vs vpravo) */
    body.nav-collapsed .sidebar { width: 54px; }
    .main { margin-left: 54px; } /* rail je fixed → obsah vedle (jako .main padding-top u topbaru) */
    .content { padding-left: 12px; }
    /* „Více" = SPODNÍ list s klonem navigace (skupiny + podbody, rozklikávací dole) */
    .more-sheet { max-height: 72vh; overflow-y: auto; }
    .more-grid { display: block; }
    .more-grid .snav { display: flex; flex-direction: column; gap: 2px; }
    .menu-backdrop { display: none; position: fixed; top: 60px; left: 0; right: 0;
      bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 75; background: rgba(0,0,0,.4); }
    /* pevná horní lišta: sticky pod overflow-x:hidden selhává — fixed + odsazení obsahu */
    .topbar { height: 60px; padding: 0 14px 0 0; gap: 8px;
              position: fixed; left: 0; right: 0; top: 0; }
    .main { padding-top: 60px; }
    .topbar .top-ic { display: none; } /* včetně palety — na mobilu schovaná úplně */
    .palette-pop { top: 66px; } /* nižší mobilní lišta */
    .mode-btn { border: 0; background: transparent; } /* stejná váha jako ozubené kolo — mobilní lišta drží jednu řeč */

    .topbar .seg { display: none; }
    /* mobilní topbar: [logo][lupa] — [+ Nová rezervace uprostřed, nad spodním „+"] — [zvoneček][⚙] */
    .brand-block { order: 0; }
    .search { display: flex; order: 1; flex: none; width: 40px; min-width: 0; gap: 0;
              padding: 0; justify-content: center; font-size: 0; /* jen lupa, vedle loga */
              color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, var(--hairline)); }
    .search svg { color: var(--accent); }        /* lupa maličko výraznější */
    .search kbd { display: none; }
    .cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
           font-size: 11.5px; } /* zrcadlově nad spodním „+" (vždy na středu) */
    .topbar .spacer { order: 2; }
    .mode-btn { display: none; }              /* noční režim → pod ⚙ */
    .topbar #atmoBtn { display: none; }       /* paleta → pod ⚙ */
    #notifBtn { display: inline-flex; order: 3; } /* zvoneček zůstává */
    .top-set { order: 4; }

    .content { padding: 20px 16px calc(78px + env(safe-area-inset-bottom)); }
    .page-head { gap: 10px; margin-bottom: 14px; }

    /* na telefonu dvě karty vedle sebe VČETNĚ hero — rozpětí přes celou šířku
       z pravidla pro 980 px se tu ruší, jinak čtyři karty čtou 1 + 2 + 1 */
    .kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
    .kpi.primary, .kpi:last-child { grid-column: auto; }
    .kpi { padding: 15px 16px; }
    .kpi .label { font-size: 11.5px; margin-bottom: 7px; }
    .kpi .val { font-size: 22px; height: 30px; margin: 0 0 5px; }
    .kpi.primary .val { font-size: 26px; }
    .kpi .val::before { font-size: 26px; }

    .card { padding: 16px; margin-bottom: 12px; }
    .card.flush { padding: 0; }
    .card.flush .card-head { padding: 16px 16px 0; }
    .resv-cards { padding: 0 16px 14px; }
    .grid2 { gap: 12px; }
    #revSeg { display: none; }

    .botnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; /* nad šuplíkem menu — lišta musí zůstat klikací (zavření Menu) */
              justify-content: space-around; padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
              background: color-mix(in srgb, var(--surface) 90%, transparent);
              backdrop-filter: saturate(180%) blur(12px);
              border-top: 1px solid var(--hairline); }
    .botnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
                text-decoration: none; color: var(--muted); font-size: 10px; font-weight: 400;
                padding: 4px 2px; border-radius: 10px; }
    .botnav a svg { width: 23px; height: 23px; }
    .botnav a.active { color: var(--accent); }
    /* prostřední „+" = Nová rezervace v accent barvě, mírně vyvýšené */
    .bot-add { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; border: 0; cursor: pointer;
               display: inline-flex; align-items: center; justify-content: center; margin: -6px 6px 0;
               background: var(--accent); color: #fff;
               box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 38%, transparent); }
    .bot-add svg { width: 24px; height: 24px; }
    .bot-add:active { transform: translateY(1px); }
    .avatar, .acct-wrap { display: none; } /* na mobilu místo identity ozubené kolo Nastavení */
    body.nav-open .sidebar { top: 60px; display: flex; } /* mobilní topbar je nižší; flex i po otevření (žádné přeskládání) */
    .drawer-overlay { top: 60px; }
    .top-set { display: inline-flex; }
    .more-sheet { display: block; }
    /* šuplík menu i ztmavení končí NAD spodní lištou — botnav zůstává viditelný a klikací */
    body.nav-open .sidebar { height: auto; bottom: calc(60px + env(safe-area-inset-bottom)); }
    .drawer-overlay { bottom: calc(60px + env(safe-area-inset-bottom)); }
  }
  @media (max-width: 360px) {
    /* i na nejužším telefonu zůstávají dvě vedle sebe (žádost 14. 9.);
       ořez drží třetí řádek na jedné lince */
    .kpi { padding: 13px 13px 14px; }
    .kpi .val { font-size: 19px; }
    .kpi.primary .val { font-size: 22px; }
  }
  @media (max-width: 640px) {
    /* dlaždice jsou teď opravdu široké jako polovina obrazovky (dřív přetékaly mimo);
       číslo se nesmí zalomit → písmo se na úzkých telefonech plynule zmenší, aby se vešlo.
       (100vw − rail 54 − odsazení 32 − mezera 12) / 2 − padding a rámeček 34 = šířka pro číslo */
    .kpi .val { white-space: nowrap; font-size: min(22px, calc(((100vw - 98px) / 2 - 34px) / 5.2)); }
    .kpi.primary .val { font-size: min(26px, calc(((100vw - 98px) / 2 - 34px) / 4.6)); }
    .kpi .delta { white-space: nowrap; }  /* „+12 %" drží pohromadě, dovětek se ořízne */
    .kpi .foot { display: block; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* sloupec 1fr = minimálně šířka obsahu → „Rezervace dle stavu" a „Spokojenost" se na 340 px roztáhly mimo obrazovku */
    .grid2, .grid2.asym-l, .grid2.asym-r { grid-template-columns: minmax(0, 1fr); }
    /* dva prstence vedle sebe: plná velikost 132 px, na úzkém telefonu se zmenší, aby se vešly do karty
       (100vw − rail 54 − odsazení 32 − padding karty 32 − rámeček 2 − mezera 20) / 2 */
    .donuts { justify-content: center; max-width: 100%; }
    .donut { width: min(132px, calc((100vw - 140px) / 2)); height: min(132px, calc((100vw - 140px) / 2)); }
    /* nadpis a podtitulek karty: když se nevejdou vedle sebe, podtitulek sklouzne celý pod nadpis */
    .card-head > div:first-child { flex-wrap: wrap; row-gap: 2px; }
  }

  /* ===== ATELIÉR v seznamu rezervací (inspirace konceptem Den · Ateliér) =====
     Čas = tichý sloupec s tabulárními číslicemi na společné svislici; datum verzálkami
     o stupeň niž; jméno je nejsilnější prvek řádku; služba a terapeut ustupují;
     minulost mizí světlostí (ne velikostí); jediný pohyb v seznamu je „Probíhá". */
  .tbl-scroll .t-time .t-day { font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); } /* audit: faint 3,57:1 (světlo) a 2,45:1 (tma) */
  .tbl-scroll td:nth-child(3), .tbl-scroll td:nth-child(4) { font-size: 11.5px; color: var(--muted); }
  .tbl-scroll tbody tr:hover td:nth-child(3), .tbl-scroll tbody tr:hover td:nth-child(4) { color: var(--ink-2); }
  .tbl-scroll tbody tr.past .t-name { color: var(--muted); }
  .tbl-scroll tbody tr.past .t-time b { color: var(--muted); font-weight: 400; }
  .tbl-scroll tbody tr.past .t-time .t-day { color: color-mix(in srgb, var(--faint) 78%, transparent); }
  .pill.progress .dot { animation: pulseDot 2.4s ease-in-out infinite; }
  @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }


  /* ===== HLADINY INKOUSTU — JEDINÝ ZDROJ PRAVDY =====
     Zámek 9. 9. (varianta T3, abc-inkoust.html): text nenese AKCENT.
     Původní formulace „nenese živel ani v odstínu, chroma 0" pravidlo utáhla víc,
     než bylo míněno — rodilo se z modrého TEXTU v liště, který ve tmě svítil, ne
     z dechu hue v inkoustu. Světlost drží doktrína, sytost je dech (c × 0.36–0.60),
     který udrží text v jednom světě s tónovaným plátnem (canvas má cw × 0.18).
     Akcent v textu zůstává zakázaný. Tento blok je POSLEDNÍ deklarace hladin —
     nikde výš je znovu nedeklarovat. */
  [data-mode="light"] {
    --ink:    oklch(0.21 calc(var(--c) * 0.36) var(--hue));
    --ink-2:  oklch(0.34 calc(var(--c) * 0.50) var(--hue));
    --muted:  oklch(0.50 calc(var(--c) * 0.60) var(--hue));
    --faint:  oklch(0.65 calc(var(--c) * 0.55) var(--hue));
  }
  [data-mode="dark"] {
    --ink:    oklch(0.92 calc(var(--cw) * 0.28) var(--hue));
    --ink-2:  oklch(0.80 calc(var(--cw) * 0.32) var(--hue));
    --muted:  oklch(0.68 calc(var(--cw) * 0.45) var(--hue));
    --faint:  oklch(0.55 calc(var(--cw) * 0.30) var(--hue));
  }
  /* vzduch = stříbro bez pigmentu: ocelový směr místo hue živlu (cw 0.003 by dech nedal) */
  [data-mode="light"][data-elem="vzduch"] {
    --ink:    oklch(0.21 0.010 215);
    --ink-2:  oklch(0.34 0.012 215);
    --muted:  oklch(0.50 0.011 215);
    --faint:  oklch(0.65 0.012 215);
  }
  /* oheň: chroma ztišená a hue přikloněná k mědi — vzorec c×0.60 hnědl (QA12) */
  [data-mode="light"][data-elem="ohen"] {
    --muted: oklch(0.50 calc(var(--c) * 0.32) 50);
    --faint: oklch(0.65 calc(var(--c) * 0.30) 50);
  }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
  /* 30. 9.: řádek „Přehled · Červen 2026 / Čtvrtek 18. 6. · 14:20“ skrytý (nadpis zůstává pro čtečky);
     období nese štítek karty jednotně „co · kdy“ */
  .page-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; position: absolute !important; }
  .content { padding-top: 20px; } /* karty 20 px pod lištou = stejně jako 20 px od levé lišty */
  .kpi .label .lbl-kdy { color: var(--muted); }
  @media (max-width: 640px) { .kpi .label .lbl-rok { display: none; } } /* úzké karty: štítek na jeden řádek */
  @media (max-width: 380px) { .kpi .label .lbl-den { display: none; } .kpi .label { white-space: nowrap; } }
  /* 30. 9.: linka karet = přesně linka lišty (--hairline); ve světle pryč úzký stín u hrany, který
     linku opticky ztmavoval – zůstává jen měkký široký stín; poskočení při najetí beze změny */
  [data-mode="light"] .card, [data-mode="light"] .kpi { box-shadow: 0 10px 30px rgba(46,38,28,.05); }
  [data-mode="light"] .card:hover, [data-mode="light"] .kpi:hover { box-shadow: var(--shadow-hover); }
  /* 30. 9.: o kousek větší značka – vlnka 28 px na ose lišty (32), název 17 px hned za lištou (66) */
  @media (min-width: 641px) {
    .brand-block { padding-left: 18px !important; gap: 20px !important; } /* 18 + 28/2 = 32 = osa lišty; název těsně za hranou lišty (64 px) */
    .brand-mark svg { width: 28px; height: 20px; }
    .wordmark { font-size: 17px; }
  }
  /* 30. 9.: Nová rezervace vpravo v liště (za hledáním), dole uprostřed obsahu jen „+“ skoro u hrany */
  @media (min-width: 641px) {
    .topbar > .cta { margin: 0 6px 0 4px; }
    .cta.fab-add { position: fixed; left: calc(50% + 32px); bottom: 5px; transform: translateX(-50%); z-index: 55;
      width: 42px; height: 42px; padding: 0; border-radius: 13px; justify-content: center; gap: 0;
      box-shadow: 0 8px 22px -10px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.06); }
    .cta.fab-add svg { width: 19px; height: 19px; margin: 0; }
    .cta.fab-add { transition: opacity .25s ease, transform .25s ease; }
    /* 30. 9. Tereza: „+“ je VŽDY vidět (i na úplném konci stránky); může překrýt kousek textu, stránka se kvůli němu neprodlužuje */
  }
  @media (max-width: 640px) { .cta.fab-add { display: none; } }

/* ===== nástěnka · <style id="vzduch"> (2/32) ===== */
  /* VZDUCH – varianta Perleť v pozadí (30. 9.: bílá + perleťové odlesky + černé písmo, bez šedé) */
  :root[data-elem="vzduch"]:not([data-mode="dark"]){--accent:oklch(0.22 0.010 285);--cta:oklch(0.17 0.008 285);--canvas:oklch(0.994 0.003 300);
    --muted:oklch(0.33 0.008 285);--faint:oklch(0.46 0.008 285);--ink:oklch(0.15 0.004 285);--ink-2:oklch(0.22 0.006 285);}
  html[data-mode="light"][data-elem="vzduch"]{--accent:oklch(0.22 0.010 285);--accent-deep:oklch(0.17 0.008 285);--head-tone:oklch(0.17 0.008 285);
    --ink:oklch(0.15 0.004 285);--ink-2:oklch(0.22 0.006 285);--muted:oklch(0.33 0.008 285);--faint:oklch(0.46 0.008 285);--canvas:oklch(0.994 0.003 300);
    --accent-line:oklch(0.68 0.040 285);--chart-line:oklch(0.62 0.045 285);--scale-lo:oklch(0.84 0.025 285);}
  :root[data-mode="dark"][data-elem="vzduch"]{--accent:oklch(0.84 0.022 285);--cta:oklch(0.84 0.022 285);--cta-fill:oklch(0.84 0.022 285);}
  html[data-mode="dark"][data-elem="vzduch"]{--accent:oklch(0.84 0.022 285);--accent-deep:oklch(0.84 0.022 285);--chart-line:oklch(0.60 0.026 285);}
  #wbClient[data-elem="vzduch"]{--c-accent:oklch(0.17 0.008 285)!important;}
  #wbClient[data-mode="dark"][data-elem="vzduch"]{--c-accent:oklch(0.84 0.022 285)!important;--c-fill:oklch(0.50 0.030 285)!important;}
  .wb-swatches button[data-elem="vzduch"] i{background:linear-gradient(135deg,oklch(0.99 0.003 285),oklch(0.80 0.024 285))!important;box-shadow:inset 0 0 0 1px oklch(0.78 0.02 285);}
  :root[data-mode="dark"][data-elem="vzduch"] .bg-primary-50{background:color-mix(in oklab,var(--accent) 10%,oklch(0.17 0 0))!important;}
  :root[data-elem="vzduch"]:not([data-mode="dark"]) .text-primary-600{color:oklch(0.17 0.008 285)!important;}

  
  /* PERLEŤOVÉ ODLESKY (jen světlo; tma zůstává tichá – zámek „žádná záře“). Bez modré = nepplete se s vodou */
  :root[data-elem="vzduch"]:not([data-mode="dark"]){--pearl:
     linear-gradient(115deg,transparent 4%,oklch(0.990 0.020 300 / .65) 15%,transparent 26%),
     linear-gradient(115deg,transparent 38%,oklch(0.990 0.022 350 / .50) 47%,transparent 56%),
     linear-gradient(115deg,transparent 64%,oklch(0.992 0.020 90 / .45) 72%,oklch(0.990 0.018 290 / .45) 78%,transparent 88%);}
  html[data-mode="light"][data-elem="vzduch"]{--light:var(--pearl);
     --hairline:oklch(0.925 0.006 290);--row-line:oklch(0.968 0.004 290);}
  html[data-mode="light"][data-elem="vzduch"][data-atmo="off"]{--light:none;}
  html[data-mode="dark"][data-elem="vzduch"]{--muted:oklch(0.68 0.014 285);--faint:oklch(0.55 0.012 285);}
  :root[data-elem="vzduch"]:not([data-mode="dark"]) section[style*="var(--canvas)"],
  :root[data-elem="vzduch"]:not([data-mode="dark"]) .bg-slate-50{background-image:var(--pearl)!important;}
  :root[data-elem="vzduch"]:not([data-mode="dark"]){--hairline:oklch(0.925 0.006 290);}
  :root[data-elem="vzduch"]:not([data-mode="dark"]) .bg-gray-100{background:oklch(0.962 0.006 290)!important;}
  :root[data-elem="vzduch"]:not([data-mode="dark"]) .bg-gray-50{background:oklch(0.980 0.004 290)!important;}

  html[data-elem="vzduch"]:not([data-mode="dark"]) .kpi .val{background-image:linear-gradient(180deg,oklch(0.12 0.003 285) 0%,oklch(0.24 0.006 285) 100%)!important;}
  
  html[data-elem="vzduch"]:not([data-mode="dark"]) .bg-primary-600:not(#wbClient *), html[data-elem="vzduch"]:not([data-mode="dark"]) .wb-dock a, html[data-elem="vzduch"]:not([data-mode="dark"]) .cta, html[data-elem="vzduch"]:not([data-mode="dark"]) .bot-add{background:linear-gradient(180deg,oklch(0.997 0.002 300) 0%,oklch(0.958 0.010 295) 100%)!important;color:oklch(0.15 0.004 285)!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px oklch(0.885 0.012 290),0 8px 20px -12px oklch(0.45 0.03 290 / .35)!important;}
  html[data-elem="vzduch"][data-mode="dark"] .bg-primary-600:not(#wbClient *), html[data-elem="vzduch"][data-mode="dark"] .wb-dock a, html[data-elem="vzduch"][data-mode="dark"] .cta, html[data-elem="vzduch"][data-mode="dark"] .bot-add{background:linear-gradient(180deg,oklch(0.95 0.006 300) 0%,oklch(0.87 0.016 295) 100%)!important;color:oklch(0.20 0.020 285)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)!important;border:0!important;}
  html[data-elem="vzduch"]:not([data-mode="dark"]) .bg-primary-600:not(#wbClient *) *, html[data-elem="vzduch"]:not([data-mode="dark"]) .wb-dock a *, html[data-elem="vzduch"]:not([data-mode="dark"]) .cta *, html[data-elem="vzduch"]:not([data-mode="dark"]) .bot-add *, html[data-elem="vzduch"][data-mode="dark"] .bg-primary-600:not(#wbClient *) *, html[data-elem="vzduch"][data-mode="dark"] .wb-dock a *, html[data-elem="vzduch"][data-mode="dark"] .cta *, html[data-elem="vzduch"][data-mode="dark"] .bot-add *{color:inherit!important;}

  /* 30. 9. večer – Tereza: nakonec perleť „P“ s méně růžovou; písmo ne šedé:
     zpět stříbrné paprsky + zlatý dech (alfa 0.28 → 0.23, 0.09 → 0.07), texty tmavší, linky stříbrné */
  :root[data-elem="vzduch"]:not([data-mode="dark"]), html[data-mode="light"][data-elem="vzduch"]{
    /* perleťové odlesky „P“ (levandule · růžová · šampaňská), růžová ztlumená na polovinu */
    --light: linear-gradient(115deg,transparent 4%,oklch(0.990 0.020 300 / .65) 15%,transparent 26%),
             linear-gradient(115deg,transparent 38%,oklch(0.990 0.016 350 / .25) 47%,transparent 56%),
             linear-gradient(115deg,transparent 64%,oklch(0.992 0.020 90 / .45) 72%,oklch(0.990 0.018 290 / .45) 78%,transparent 88%);
    --canvas: oklch(0.994 0.003 300);
    --ink: oklch(0.14 0.003 250); --ink-2: oklch(0.20 0.004 250);
    --muted: oklch(0.29 0.005 250); --faint: oklch(0.40 0.006 250);
    --hairline: oklch(0.925 0 0); --row-line: oklch(0.966 0 0);
    --accent-line: oklch(0.60 0.012 240); --chart-line: oklch(0.52 0.014 240);
  }
  html[data-mode="light"][data-elem="vzduch"][data-atmo="off"]{ --light: none; }

  /* 30. 9. – Tereza: tlačítko ve vzduchu jen obtažené černou linkou, žádná výplň */
  html[data-elem="vzduch"]:not([data-mode="dark"]) .cta, html[data-elem="vzduch"]:not([data-mode="dark"]) .cta.fab-add, html[data-elem="vzduch"]:not([data-mode="dark"]) .bot-add { background: transparent !important; color: var(--ink) !important;
    box-shadow: inset 0 0 0 1px var(--ink) !important; border: 0 !important; }
  html[data-elem="vzduch"]:not([data-mode="dark"]) .cta:hover { background: oklch(0.14 0.003 250 / .04) !important; }
  /* dolní „+“ plave přes obsah – podklad = barva stránky (opticky bez výplně), jinak by se nečetlo */
  html[data-elem="vzduch"]:not([data-mode="dark"]) .cta.fab-add, html[data-elem="vzduch"]:not([data-mode="dark"]) .bot-add { background: var(--canvas) !important; }

/* ===== nástěnka · <style id="tma-zrcadlo"> (3/32) ===== */
/* 30. 9. TMAVÝ REŽIM „Zrcadlo světlého“ (schváleno Terezou): tma dělá totéž co světlo – pozadí jen nádech živlu, plochy o pár % od sebe,
   barvu nese plné tlačítko (jako ve dne), akcenty střídmě */
html[data-mode="dark"] { --surface: oklch(0.115 0.004 var(--hue)) !important; --chrome: oklch(0.110 0.004 var(--hue)) !important;
  --hairline: oklch(0.085 0 0) !important; --row-line: oklch(0.155 0.004 var(--hue)) !important; /* linky tmavší, ne světlé */
  --accent: oklch(0.64 calc(var(--c) * 1.00) var(--hue)); --accent-deep: oklch(0.60 calc(var(--c) * 1.00) var(--hue)); /* tlumenější – nesvítí */
  --chart-line: oklch(0.62 calc(var(--c) * 1.0) var(--hue)); }
html[data-mode="dark"][data-elem="ohen"] { --hue: 30; --c: 0.090; } /* teplé bordó bez modrého podtónu */
html[data-mode="dark"][data-elem="zeme"] { --hue: 138; --c: 0.085; } /* tlačítko a akcenty v teplé lesní zelené */
html[data-mode="dark"][data-elem="voda"] { --hue: 250; --c: 0.105; } /* čistá safírová modrá */
html[data-mode="dark"][data-atmo="on"][data-elem="voda"]   { --canvas: oklch(0.180 0.048 255) !important; }
html[data-mode="dark"][data-atmo="on"][data-elem="ohen"]   { --canvas: oklch(0.175 0.040 28)  !important; }
html[data-mode="dark"][data-atmo="on"][data-elem="zeme"]   { --canvas: oklch(0.155 0.048 160) !important; } /* jehličí – silnější */
html[data-mode="dark"][data-atmo="on"][data-elem="vzduch"] { --canvas: oklch(0.175 0.004 250) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .card, html[data-mode="dark"]:not([data-elem="vzduch"]) .kpi, html[data-mode="dark"]:not([data-elem="vzduch"]) .rz-panel .rzp-sek { border: 1px solid oklch(0.32 calc(var(--c) * 0.6) var(--hue)) !important; } /* linka v tónu živlu */
html[data-mode="dark"]:not([data-elem="vzduch"]) .topbar { border-bottom: 1px solid oklch(0.36 calc(var(--c) * 0.6) var(--hue)) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .sidebar { border-right: 1px solid oklch(0.36 calc(var(--c) * 0.6) var(--hue)) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .botnav { border-top: 1px solid oklch(0.36 calc(var(--c) * 0.6) var(--hue)) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .cta, html[data-mode="dark"]:not([data-elem="vzduch"]) .bot-add {
  background: oklch(0.40 calc(var(--c) * 1.00) var(--hue)) !important; color: oklch(0.95 0.008 var(--hue)) !important; /* hlubší tlačítko */
  border: 0 !important; box-shadow: none !important; }
html[data-mode="dark"] .t-time b { color: var(--accent) !important; }
html[data-mode="dark"][data-elem="vzduch"] .cta, html[data-mode="dark"][data-elem="vzduch"] .bot-add { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; border: 0 !important; }
html[data-mode="dark"][data-elem="vzduch"] .cta.fab-add { background: var(--canvas) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }

/* ===== nástěnka · <style id="citelnost"> (4/32) ===== */
/* čitelnost: nic pod 11 px (oba režimy); tma: prázdná permanentka o stupeň světlejší */
.search kbd { font-size: 11px !important; }
.perm-plus { font-size: 11px !important; }
@media (max-width: 640px) { .botnav a { font-size: 11px !important; } }
html[data-mode="dark"] .perm-none, html[data-mode="dark"] .perm-add { color: var(--muted) !important; }
svg text[font-size="10"] { font-size: 11px; } /* popisky os grafu */
html[data-mode="dark"]:not([data-elem="vzduch"]) .search { border: 1px solid oklch(0.38 calc(var(--c) * 0.6) var(--hue)) !important; } /* rámeček hledání na černé liště */

/* ===== nástěnka · <style id="vzduch-noc"> (5/32) ===== */
/* vzduch v noci: téměř černá + jemné odlesky (znát, ale decentně); tenké bílé linky všude, kde má být hrana */
html[data-mode="dark"][data-atmo="on"][data-elem="vzduch"] { --canvas: oklch(0.115 0 0) !important; }
html[data-mode="dark"][data-elem="vzduch"] { --hairline: oklch(1 0 0 / .16) !important; --row-line: oklch(1 0 0 / .08) !important; }
html[data-mode="dark"][data-atmo="on"][data-elem="vzduch"] .content.__zruseno {
  background:
    linear-gradient(115deg, transparent 5%, oklch(1 0 0 / .055) 15%, transparent 25%),
    linear-gradient(115deg, transparent 39%, oklch(1 0 0 / .040) 47%, transparent 55%),
    linear-gradient(115deg, transparent 65%, oklch(1 0 0 / .050) 74%, transparent 84%),
    var(--canvas) !important; }
html[data-mode="dark"][data-elem="vzduch"] .card, html[data-mode="dark"][data-elem="vzduch"] .kpi,
html[data-mode="dark"][data-elem="vzduch"] .search, html[data-mode="dark"][data-elem="vzduch"] :is(.palette-pop, .acct-pop, .set-pop, .row-pop) {
  border: 1px solid oklch(1 0 0 / .16) !important; }
html[data-mode="dark"][data-elem="vzduch"] .topbar { border-bottom: 1px solid oklch(1 0 0 / .16) !important; }
html[data-mode="dark"][data-elem="vzduch"] .sidebar { border-right: 1px solid oklch(1 0 0 / .16) !important; }
html[data-mode="dark"][data-elem="vzduch"] .botnav { border-top: 1px solid oklch(1 0 0 / .16) !important; }

/* ===== nástěnka · <style id="zeme-den"> (6/32) ===== */
/* 30. 9.: země ve dne = lesní zelená (stejná síla jako voda), sladěná s jehličím v noci – schváleno Terezou */
html[data-mode="light"][data-elem="zeme"] { --hue: 150; --c: 0.090; --cw: 0.045; }
html[data-mode="light"][data-atmo="on"][data-elem="zeme"] { --canvas: oklch(0.975 0.008 150) !important; }

/* ===== nástěnka · <style id="ohen-den"> (7/32) ===== */
/* 30. 9.: oheň ve dne = teplé bordó (hue 30), stejná rodina jako oheň v noci – schváleno Terezou */
html[data-mode="light"][data-elem="ohen"] { --hue: 30; --c: 0.100; --cw: 0.030; }
html[data-mode="light"][data-atmo="on"][data-elem="ohen"] { --canvas: oklch(0.975 0.007 65) !important; } /* teplá kost – hue 40 na bílé růžověl (známý nález Z2) */

/* ===== nástěnka · <style id="telefon"> (8/32) ===== */
/* 30. 9. telefon: dovětek pod procenta (ne useknutý), názvy v žebříčcích na 2 řádky, nic k hraně karty */
@media (max-width: 640px) {
  .kpi .delta { flex-wrap: wrap; height: auto !important; row-gap: 0; white-space: normal !important; }
  .kpi .delta .ctx { flex-basis: 100%; white-space: normal; line-height: 15px; }
  .kpi .foot { white-space: normal !important; height: auto !important; overflow: visible !important; text-overflow: clip !important; line-height: 15px !important; }
  .rows .name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 16px; }
  .kpi .label { margin-bottom: auto; } /* štítek vždy nahoře, číslo a dovětek dole – v řadě karet na stejné lince */
}
@media (max-width: 380px) { .kpi .label { font-size: 11px !important; letter-spacing: -.005em; } } /* nejužší telefon: štítek se vejde (min. 11 px) */
@media (max-width: 360px) { .kpi .label { line-height: 1.35 !important; } .kpi .label .lbl-kdy { display: block; } .kpi .label .lbl-tecka { display: none; } .kpi .label .lbl-den { display: inline; } } /* 320–360 px: štítek vždy na 2 řádky – co / kdy – u všech karet stejně */

/* ===== nástěnka · <style id="stavy-barvy"> (9/32) ===== */
/* 30. 9.: stavy bez cizích barev – Potvrzeno tiše v barvě písma, Probíhá (živý stav) v barvě živlu;
   Dokončeno zelené a Stornováno červené zůstávají (nesou význam). Spokojenost = škála živlu. */
html[data-mode] { --confirmed: var(--ink-2); } /* Probíhá drží původní pevný tyrkys – v barvě živlu splýval se Zrušeno (oheň), Potvrzeno (vzduch) a Dokončeno (země) */
/* ve dne rozlišit tmavé tečky: Nedostavil se = neutrální šedá (Potvrzeno je tmavé v barvě písma);
*/
html[data-mode="light"] { --noshow: oklch(0.66 0.004 250); }

html[data-mode="dark"] .vb .col { filter: none; }

/* ===== nástěnka · <style id="pismo-jednotne"> (10/32) ===== */
/* 30. 9. jednotnost písma: tlačítka dědí Inter (SR monogram byl v Arialu), nejmenší velikost sjednocena na 11,5 px */
button, input, kbd { font-family: inherit; }
.search kbd, .perm-plus { font-size: 11.5px !important; }
svg text[font-size="10"] { font-size: 11.5px; }
@media (max-width: 640px) { .botnav a { font-size: 11.5px !important; } }

/* ===== nástěnka · <style id="cisla-newsreader"> (11/32) ===== */
/* 30. 9.: velká čísla, hodnocení a čísla v kolečkách v Newsreaderu – na Macu, Windows i Androidu stejně */
.kpi .val, .donut .d-total, .sat-avg, .side-brand { font-family: "Newsreader", "Iowan Old Style", Georgia, serif !important; }

/* ===== nástěnka · <style id="tma-tlumena"> (12/32) ===== */
/* 30. 9. večer – Tereza (varianta C + D): „svítí to jak blázen“ → v noci pozadí skoro černé jen s nádechem živlu,
   okraje karet a lišt v tónu živlu, ale tlumené (na tmavším pozadí jinak vystupovaly). Světlý režim beze změny. */
/* 26. 10. 2026 Tereza: noc „ztratila sytost“ → kompromis mezi v20 (30. 9. ráno, „svítí jak blázen“) a C+D (30. 9. večer, skoro černá): živel znatelný, stále tmavé. Srovnání _qa/noc-sytost/SROVNANI.html */
html[data-mode="dark"][data-atmo="on"][data-elem="voda"] { --canvas: oklch(0.155 0.032 255) !important; }
html[data-mode="dark"][data-atmo="on"][data-elem="ohen"] { --canvas: oklch(0.152 0.028 28)  !important; }
html[data-mode="dark"][data-atmo="on"][data-elem="zeme"] { --canvas: oklch(0.142 0.032 160) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .card, html[data-mode="dark"]:not([data-elem="vzduch"]) .kpi { border-color: oklch(0.29 calc(var(--c) * 0.55) var(--hue)) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .topbar { border-bottom-color: oklch(0.31 calc(var(--c) * 0.55) var(--hue)) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .sidebar { border-right-color: oklch(0.31 calc(var(--c) * 0.55) var(--hue)) !important; }
/* 1. 10. Tereza: vzduch v noci – zapnuté pozadí = černá + jemné perleťové odlesky (zrcadlo dne), vypnuté = čistá černá */
/* vzduch noc: pozadí, karty, lišty i vyskakovací okna JEDNOU černou, oddělené jen tenkými bílými linkami */
html[data-mode="dark"][data-elem="vzduch"], html[data-mode="dark"][data-atmo="on"][data-elem="vzduch"] {
  --canvas: #000 !important; --surface: #000 !important; --chrome: #000 !important; }
html[data-mode="dark"][data-elem="vzduch"] .kpi, html[data-mode="dark"][data-elem="vzduch"] .card, html[data-mode="dark"][data-elem="vzduch"] .rz-panel .rzp-sek { box-shadow: none !important; }
/* vypnuté pozadí = u všech živlů čistá neutrální plocha (vzduch ve světle dřív zůstával perleťový → vypínač „nic nedělal“) */
html[data-mode="light"][data-atmo="off"][data-elem="vzduch"] { --canvas: oklch(0.998 0 0) !important; }

/* ===== nástěnka · <style id="perm-nekonecno"> (13/32) ===== */
/* 1. 10. Tereza: „Permanentka“ = ležatá osmička ∞. Kreslená tenkou linkou ve výšce malých písmen,
   aby zapadla do textu (ne tučný znak písma). Karty: bez permanentky jen ∞ (klik = prodej), pomlčka pryč. */
.inf { width: 1.3em; height: .62em; display: inline-block; vertical-align: .02em; overflow: visible; }
th .thl-perm { line-height: 1; }
.rc-inf { display: inline-flex; color: var(--muted); }
/* tabulka: číslo permanentky bez záporných okrajů – jinak ho měření sloupců posunulo o 6 px vlevo od středu (∞ v záhlaví) */
:is(#resv, .rz-telo) .perm-edit { margin: 0; padding: 0; border-radius: 4px; }
:is(#resv, .rz-telo) .perm-edit:hover, :is(#resv, .rz-telo) .perm-edit:focus-visible { background: var(--row-line); box-shadow: 0 0 0 5px var(--row-line); }
.rc-comm .rc-inf-add { display: inline-flex; align-items: center; color: var(--muted); margin: -6px -8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.rc-comm .rc-inf-add:hover, .rc-comm .rc-inf-add:focus-visible { color: var(--accent); background: var(--row-line); }

/* ===== nástěnka · <style id="odznaky"> (14/32) ===== */
/* 30. 9. Tereza: počty v liště jen u toho, co čeká na akci (Hlídání termínu, Zpětná vazba); zvonek s počtem nových */
.snav-item:has(.snav-badge) > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; }
.snav-badge { margin-left: -16px; /* flex gap položky je 24 px → k textu 8 px */ flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent); background: color-mix(in oklch, var(--accent) 10%, transparent); }
body.nav-collapsed .snav-badge { display: none; }
#notifBtn { position: relative; }
.notif-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; line-height: 1; color: var(--surface); background: var(--accent); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }

/* ===== nástěnka · <style id="tma-vypnuto-cerna"> (15/32) ===== */
/* 1. 10. Tereza: tma + VYPNUTÉ pozadí = pozadí stránky, lišty, karty i vyskakovací okna jednou neutrální černou (bez nádechu živlu);
   oddělují je jen linky (v tónu živlu, u vzduchu bílé). Zapnuté pozadí beze změny (nádech živlu). */
html[data-mode="dark"][data-atmo="off"], html[data-mode="dark"][data-atmo="off"][data-elem] { --canvas: #000 !important; --surface: #000 !important; --chrome: #000 !important; }
html[data-mode="dark"][data-atmo="off"] .kpi, html[data-mode="dark"][data-atmo="off"] .card, html[data-mode="dark"][data-atmo="off"] .rz-panel .rzp-sek { box-shadow: none !important; }
/* vzduch v noci: černá i se zapnutým pozadím (odlesky jen v mezerách) */
html[data-mode="dark"][data-elem="vzduch"] { --canvas: #000 !important; --surface: #000 !important; --chrome: #000 !important; }
/* rozvinutá lišta v noci: žádný světlý stín (dělal šedý opar přes obsah) – odděluje ji jen linka */
html[data-mode="dark"] body.nav-peek .sidebar { box-shadow: 24px 0 40px -10px rgba(0,0,0,.85) !important; }

/* ===== nástěnka · <style id="tma-karty-cerne"> (16/32) ===== */
/* 1. 10. Tereza („o to tady celou dobu jde“): v noci jsou karty, lišty a vyskakovací okna VŽDY úplně černé;
   zapnuté pozadí = nádech živlu jen v mezerách mezi kartami, vypnuté = černá i tam */
html[data-mode="dark"][data-elem] { --surface: #000 !important; --chrome: #000 !important; }
html[data-mode="dark"] .kpi, html[data-mode="dark"] .card { box-shadow: none !important; }

/* ===== nástěnka · <style id="vzduch-noc-linky"> (17/32) ===== */
/* 1. 10. Tereza: vzduch v noci = čistá černá + bílé linky, bez odlesků (v mezerách působily jako šmouhy); zapnuto i vypnuto stejné.
   Najetí na řádek v noci jen sotva znatelné (šedé podbarvení s Night Shift hnědlo). */
/* najetí na řádek v noci: voda/oheň/země = PŘESNĚ barva jejich tmavého pozadí (Tereza 1. 10.); jen vzduch má jemnou studenou bílou záři */
/* vypnuté pozadí: řádek pod myší bez podbarvení, jen silnější linka nahoře a dole v tónu živlu (vzduch bílá) */
html[data-mode="dark"] :is(tbody tr, .resv-cards .rc):hover { background: transparent !important; } /* 1. 10.: v noci řádek nikdy nepodbarvovat – na displeji působil světleji než pozadí */
html[data-mode="dark"]:not([data-elem="vzduch"]) tbody tr:hover td { box-shadow: inset 0 1px 0 oklch(0.42 calc(var(--c) * 0.8) var(--hue)), inset 0 -1px 0 oklch(0.42 calc(var(--c) * 0.8) var(--hue)); }
html[data-mode="dark"][data-elem="vzduch"] tbody tr:hover td { box-shadow: inset 0 1px 0 oklch(1 0 0 / .38), inset 0 -1px 0 oklch(1 0 0 / .38); }
html[data-mode="dark"]:not([data-elem="vzduch"]) .resv-cards .rc:hover { box-shadow: inset 0 1px 0 oklch(0.42 calc(var(--c) * 0.8) var(--hue)), inset 0 -1px 0 oklch(0.42 calc(var(--c) * 0.8) var(--hue)); }
html[data-mode="dark"][data-elem="vzduch"] .resv-cards .rc:hover { box-shadow: inset 0 1px 0 oklch(1 0 0 / .38), inset 0 -1px 0 oklch(1 0 0 / .38); }
/* v noci žádné stíny (na černé dělaly šedý/hnědý opar) – okna, karty, tlačítka oddělují jen linky */
html[data-mode="dark"] :is(.palette-pop, .acct-pop, .set-pop, .row-pop, .kpi, .card, .search, .cta, .fab-add, .notif-badge) { box-shadow: none !important; }
html[data-mode="dark"] :is(.palette-pop, .acct-pop, .set-pop, .row-pop) { border: 1px solid var(--hairline) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) :is(.palette-pop, .acct-pop, .set-pop, .row-pop) { border-color: oklch(0.25 calc(var(--c) * 0.5) var(--hue)) !important; }
/* linky mezi řádky (tabulka, karty, seznamy) v noci v tónu živlu jako okraje karet, jen jemněji – šedá s Night Shift hnědla */
html[data-mode="dark"]:not([data-elem="vzduch"]) { --row-line: oklch(0.21 calc(var(--c) * 0.45) var(--hue)) !important; }
html[data-mode="dark"][data-elem="vzduch"] .content { background: #000 !important; }
html[data-mode="dark"][data-elem="vzduch"] { --hairline: oklch(1 0 0 / .22) !important; --row-line: oklch(1 0 0 / .10) !important; } /* vypnuto = stejně jako zapnuto (Tereza) */
html[data-mode="dark"][data-atmo="on"][data-elem="vzduch"] { --hairline: oklch(1 0 0 / .22) !important; --row-line: oklch(1 0 0 / .10) !important; }
html[data-mode="dark"][data-elem="vzduch"] :is(.card, .kpi, .rz-panel .rzp-sek, .search, .palette-pop, .acct-pop, .set-pop, .row-pop) { border-color: var(--hairline) !important; }
html[data-mode="dark"][data-elem="vzduch"] .topbar { border-bottom-color: var(--hairline) !important; }
html[data-mode="dark"][data-elem="vzduch"] .sidebar { border-right-color: var(--hairline) !important; }

/* ===== nástěnka · <style id="najeti-linky"> (18/32) ===== */
/* 1. 10. Tereza: i ve dne řádek pod myší bez šedé výplně – jen decentní linka nahoře a dole v tónu živlu (vzduch černá) */
html[data-mode="light"] :is(tbody tr, .resv-cards .rc):hover { background: transparent !important; }
html[data-mode="light"]:not([data-elem="vzduch"]) tbody tr:hover td { box-shadow: inset 0 1px 0 oklch(0.80 calc(var(--c) * 0.55) var(--hue)), inset 0 -1px 0 oklch(0.80 calc(var(--c) * 0.55) var(--hue)); }
html[data-mode="light"][data-elem="vzduch"] tbody tr:hover td { box-shadow: inset 0 1px 0 oklch(0.30 0 0 / .35), inset 0 -1px 0 oklch(0.30 0 0 / .35); }
html[data-mode="light"]:not([data-elem="vzduch"]) .resv-cards .rc:hover { box-shadow: inset 0 1px 0 oklch(0.80 calc(var(--c) * 0.55) var(--hue)), inset 0 -1px 0 oklch(0.80 calc(var(--c) * 0.55) var(--hue)); }
html[data-mode="light"][data-elem="vzduch"] .resv-cards .rc:hover { box-shadow: inset 0 1px 0 oklch(0.30 0 0 / .35), inset 0 -1px 0 oklch(0.30 0 0 / .35); }
/* noc: karta pod myší se jemně ohraničí zřetelnější linkou (v tónu živlu, vzduch bílá) */
html[data-mode="dark"]:not([data-elem="vzduch"]) :is(.kpi, .card):hover { border-color: oklch(0.40 calc(var(--c) * 0.75) var(--hue)) !important; }
html[data-mode="dark"][data-elem="vzduch"] :is(.kpi, .card):hover { border-color: oklch(1 0 0 / .42) !important; }
:is(.kpi, .card) { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* ===== nástěnka · <style id="spodni-mezera"> (19/32) ===== */
/* 1. 10. Tereza: mezera pod posledními kartami = mezera nad kartami (pod horní lištou); plovoucí + smí překrýt okraj */
.content { padding-bottom: var(--gap-top, 20px) !important; }
.content > *:last-child, .content > *:last-child .card, .content > *:last-child .kpi { margin-bottom: 0 !important; }

/* ===== nástěnka · <style id="najeti-linky-vsude"> (20/32) ===== */
/* 1. 10. Tereza: princip linky všude – najetí/fokus nikdy nevyplní políčko barvou, jen ho jemně obtáhne (v tónu živlu; vzduch černá/bílá) */
:root { --hover-line: oklch(0.80 calc(var(--c) * 0.55) var(--hue)); }
html[data-elem="vzduch"]:not([data-mode="dark"]) { --hover-line: oklch(0.30 0 0 / .35); }
html[data-mode="dark"]:not([data-elem="vzduch"]) { --hover-line: oklch(0.40 calc(var(--c) * 0.75) var(--hue)); }
html[data-mode="dark"][data-elem="vzduch"] { --hover-line: oklch(1 0 0 / .42); }
:is(.snav-item, .snav-group-label, .mode-btn, .top-ic, .acct, .ap-row, .ap-salon, .row-pop button, .dots, .add, .set-pop .sp-row,
    .lista-pin, .burger, .brand-mark, #ppElems button, #ppAtmo, .seg button, .ap-langs button, .rc-comm .rc-inf-add):is(:hover, :focus-visible) {
  background: transparent !important; box-shadow: inset 0 0 0 1px var(--hover-line) !important; outline: none !important; }
.row-pop .m-cancel:hover { background: transparent !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 45%, transparent) !important; }
:is(#resv, .rz-telo) .perm-edit:hover, :is(#resv, .rz-telo) .perm-edit:focus-visible { background: transparent !important; box-shadow: none !important; }
.snav-item.active { box-shadow: none; }

/* ===== nástěnka · <style id="dalsi-jako-radek"> (21/32) ===== */
/* 1. 10. Tereza: „Zobrazit další“ jako poslední buňka tabulky – stejná linka nahoře jako mezi řádky, text na středu řádku (svisle i vodorovně), karta končí jeho spodní hranou */
.card.flush:has(> .resv-more:not([hidden])), .card.flush:has(.resv-more:not([hidden])) { padding-bottom: 0; }
.resv-more { display: flex !important; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
  margin: 0 !important; padding: 0 !important; height: 44px; border: 0 !important; border-top: 1px solid var(--row-line) !important; border-radius: 0 0 var(--radius, 14px) var(--radius, 14px) !important; }
.resv-more[hidden] { display: none !important; }
.resv-more:hover, .resv-more:focus-visible { background: transparent !important; box-shadow: none !important; color: var(--accent); }
/* řádek nad ním nemá vlastní dolní linku navíc (linku nese buňka) */
:is(#resv, .rz-telo) tr:not([hidden]):nth-last-child(1 of :not([hidden])) td { border-bottom: 0; }
.resv-cards .rc:not([hidden]):nth-last-child(1 of :not([hidden])) { border-bottom: 0; }
.resv-cards:has(+ .resv-more:not([hidden])) { padding-bottom: 0 !important; }
/* karty (tablet, telefon): linka buňky odsazená stejně jako linky mezi kartami */
.resv-cards ~ .resv-more, .resv-cards + .resv-more { width: auto; margin: 0 var(--pad-x) !important; border-radius: 0 !important; }

/* ===== nástěnka · <style id="minule-stejne"> (22/32) ===== */
/* 1. 10. Tereza: záložka Minulé stejné písmo i barvy jako Nadcházející (rozdíl nese jen stav) */
.tbl-scroll tbody tr.past .t-name { color: var(--ink) !important; }
.tbl-scroll tbody tr.past .t-time b { color: var(--accent) !important; font-weight: 450 !important; }

.tbl-scroll tbody tr.past .t-time .t-day { color: var(--muted) !important; }
.rc-time.past { color: var(--accent) !important; font-weight: 450 !important; }

/* ===== nástěnka · <style id="proklikani-1-10"> (23/32) ===== */
/* 1. 10. opravy z proklikání */
.ap-mono { font-size: 11px !important; }                                                       /* nic pod 11 px */
body:has(#setPop:not([hidden]), #acctPop:not([hidden]), #palettePop:not([hidden]), .row-pop) .cta.fab-add { opacity: 0; pointer-events: none; } /* + nezakryje otevřené menu */
html[data-elem="vzduch"]:not([data-mode="dark"]) .topbar > .cta:hover { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; } /* vzduch: najetí = silnější linka, ne výplň */
.search:hover, .search:focus-visible { box-shadow: inset 0 0 0 1px var(--hover-line) !important; outline: none; }
@media (hover: none) { /* dotyk: po ťuknutí nezůstává linka ani povytažení */
  :is(tbody tr, .resv-cards .rc):hover td, .resv-cards .rc:hover { box-shadow: none !important; }
  :is(.kpi, .card):hover { transform: none !important; }
}

/* ===== nástěnka · <style id="sr-vsude"> (24/32) ===== */
/* 1. 10. Tereza: „SR“ všude – nastavení se schová pod něj. Počítač: SR + název salonu; tablet i telefon: jen SR,
   noční režim a paleta (Motiv a pozadí) jsou v jeho menu, v liště nejsou. */
.acct .mono { display: inline-flex !important; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline);
  font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--ink-2); }
.acct:hover .mono { border-color: var(--hover-line); color: var(--ink); }
@media (min-width: 641px) and (max-width: 1099px) {
  .topbar .mode-btn, .topbar #atmoBtn, .topbar .acct-wrap { display: none !important; }
  .top-set { display: inline-flex !important; }
  .set-pop { top: 66px !important; right: 16px !important; }
}

/* ===== nástěnka · <style id="datum-jednotne"> (25/32) ===== */
/* 1. 10. Tereza: datum a čas sjednoceně všude jako v tabulce – „18. 6. Čt“ tiše (kontext), čas v barvě živlu (to hlavní: kdy přijde) */
.rc-time .t-day { color: var(--muted); font-weight: 400; margin-right: 8px; }
.rc-time b { color: var(--accent); font-weight: 450; }
.rc-time, .rc-time.past { color: var(--muted) !important; }
/* permanentka v tabulce stejně vzdušně jako v kartách: „0 + 5“ */
:is(#resv, .rz-telo) .perm-edit { gap: 5px; }

/* ===== nástěnka · <style id="rytmus-mezer"> (26/32) ===== */
/* 1. 10.: rytmus mezer jednotně – uvnitř skupiny 16 px (telefon 12) mezi všemi kartami vodorovně i svisle, mezi skupinami 34 px */
.grid2 { gap: 16px !important; }
.content > .grid2 { margin-bottom: 16px !important; }
.content > .grid2:last-child { margin-bottom: 0 !important; }
.kpis { margin-bottom: 16px !important; }
/* osa ikon zabalené lišty přesně 32 px (lišta 64 px vč. 1px linky → bez korekce 31,5) */
body.nav-collapsed .snav { padding-left: 1px; }
.card.flush { margin-bottom: 16px !important; }
@media (max-width: 640px) { .grid2 { gap: 12px !important; } .content > .grid2, .kpis, .card.flush { margin-bottom: 12px !important; } }

/* ===== nástěnka · <style id="rezervace-aktivni"> (27/32) ===== */
/* 1. 10. Tereza: telefon nemá najetí → rezervace se rozsvítí linkami při doteku (:active) a po dobu otevřené nabídky (.rz-aktivni). Stejné linky jako najetí na PC. */
:root { --rz-line: oklch(0.80 calc(var(--c) * 0.55) var(--hue)); }
html[data-elem="vzduch"]:not([data-mode="dark"]) { --rz-line: oklch(0.30 0 0 / .35); }
html[data-mode="dark"]:not([data-elem="vzduch"]) { --rz-line: oklch(0.42 calc(var(--c) * 0.8) var(--hue)); }
html[data-mode="dark"][data-elem="vzduch"] { --rz-line: oklch(1 0 0 / .38); }
tbody tr.rz-aktivni td, tbody tr:active td { box-shadow: inset 0 1px 0 var(--rz-line), inset 0 -1px 0 var(--rz-line) !important; }
.resv-cards .rc.rz-aktivni, .resv-cards .rc:active { box-shadow: inset 0 1px 0 var(--rz-line), inset 0 -1px 0 var(--rz-line) !important; }
tbody tr.rz-aktivni, .resv-cards .rc.rz-aktivni { background: transparent !important; }
.resv-cards .rc { -webkit-tap-highlight-color: transparent; } /* bez šedého záblesku Safari – nese to linka */
/* dotyk: po ťuknutí nezůstává obtažení tlačítka (lepivý :hover na telefonu) */
@media (hover: none) { :is(.add, .dots, .mode-btn, .top-ic, .snav-item, .snav-group-label, .ap-row, .ap-salon, .row-pop button):hover:not(:focus-visible) { box-shadow: none !important; } }

/* ===== nástěnka · <style id="kontrola-1-10"> (28/32) ===== */
/* 1. 10. závěrečná kontrola */
.notif-badge { font-size: 11px !important; min-width: 17px; height: 17px; }                     /* nic pod 11 px */
html[data-mode="dark"] .tbl-scroll tbody tr.past .t-time .t-day { color: var(--muted) !important; } /* Minulé v noci: datum 2,9 → ≥ 4,5 : 1 */
html[data-mode="dark"] { --noshow: oklch(0.56 0.008 240); }                                     /* Nedostavil se v noci 4,3 → ≥ 4,5 : 1 */
html[data-mode="light"] .perm-add, html[data-mode="light"] .perm-none { color: var(--muted) !important; } /* pomlčka ve dne 3,2 → ≥ 4,5 : 1 */
:is(#resv, .rz-telo) .perm-add:focus-visible, :is(#resv, .rz-telo) .perm-edit:focus-visible, .pill .dot:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px; border-radius: 4px; }
.pill .dot { cursor: pointer; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .search kbd { border-color: oklch(0.30 calc(var(--c) * 0.5) var(--hue)); } /* ⌘K v noci zase s rámečkem */
/* štítek KPI se lámal na 381–400 px („Rezervace · čt 18. 6.“) → den v týdnu pryč už do 400 px */
@media (max-width: 400px) { .kpi .label .lbl-den { display: none; } .kpi .label { white-space: nowrap; } }
/* ikony v liště se na 641–1001 px smrskávaly (zvonek 21 px) → pevná velikost */
.topbar .top-ic, .topbar .mode-btn, .topbar #atmoBtn, .topbar #notifBtn { flex: none; }
@media (min-width: 641px) and (max-width: 720px) { .brand-block { width: auto !important; min-width: 0 !important; } .topbar { gap: 10px !important; padding-right: 16px !important; } } /* úzký tablet: místo pro ikony, vlnka zůstává na ose */

/* ===== nástěnka · <style id="telefon-plus"> (29/32) ===== */
/* 30. 9. Tereza: na telefonu bez spodní lišty (navigaci má levá lišta) – jen plovoucí „+“ jako na počítači;
   levá lišta, šuplík i ztmavení sahají až dolů, stránka se kvůli „+“ neprodlužuje (spodní mezera 40 px jako na PC) */
@media (max-width: 640px) {
  .botnav { display: none !important; }
  .sidebar, body.nav-open .sidebar { bottom: 0 !important; }
  .drawer-overlay { bottom: 0 !important; }
  .more-sheet { bottom: 0 !important; }
  .content { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
  .cta.fab-add { display: inline-flex !important; position: fixed; top: auto !important; bottom: calc(5px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 55;
    width: 42px; height: 42px; padding: 0; border-radius: 13px; justify-content: center; align-items: center; gap: 0;
    box-shadow: 0 8px 22px -10px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.06); }
  .cta.fab-add svg { width: 19px; height: 19px; margin: 0; }
}
/* nejužší telefony: „Nová rezervace“ v liště přečnívalo přes lupu (−8 px na 320) → užší tlačítko */
.cta-short { display: none; }
@media (max-width: 350px) { .topbar > .cta .cta-long { display: none; } .topbar > .cta .cta-short { display: inline; } }

/* ===== nástěnka · <style id="bez-useknuti"> (30/32) ===== */
/* 30. 9. Tereza: nic se neusekává. Tabulka jen tam, kde se vejde celá; užší okna = karty jako na telefonu
   (na tabletu ve dvou sloupcích), dlouhé texty v kartách i KPI se zalomí celými slovy */
.card.flush .nm-first { display: inline !important; }
.kpi .delta > span, .rows .name, .kpi .foot { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
@media (max-width: 1180px) {
  table { display: none; }
  .resv-cards { display: flex; flex-direction: column; }
}
/* 30. 9.: pod 761 px se řádek nevejde (lámala se jména) → karty jako na telefonu */
@media (max-width: 1180px) and (min-width: 1081px) {
  /* tablet: jeden klient = jeden řádek: čas · jméno / P permanentka · služba / terapeut · ⊕ · stav vpravo u ⋮ */
  /* sloupce svázané přes všechny řádky (subgrid) – vše stojí pod sebou jako v tabulce */
  .resv-cards { display: grid !important; grid-template-columns: repeat(5, auto); justify-content: space-between; column-gap: 24px; }
  .resv-cards .rc { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 2px; align-items: center; padding: 14px 0; }
  .resv-cards .rc-top, .resv-cards .rc-foot, .resv-cards .rc-metas, .resv-cards .rc-actions { display: contents; }
  .resv-cards .rc-time { grid-column: 1; grid-row: 1 / span 2; }
  .resv-cards .rc-name { grid-column: 2; grid-row: 1; margin: 0; }
  .resv-cards .rc-meta { grid-column: 3; grid-row: 1 / span 2; }
  .resv-cards .rc-sep { display: none; }
  .resv-cards .rc-ther { display: block; }
  .resv-cards .rc-comm { grid-column: 2; grid-row: 2; white-space: nowrap; }
  .resv-cards .rc-comm .rc-lbl { display: none; } /* tablet: pod jménem jen „0 + 5“ nebo „–“ (ťuknutím prodej) */
  .resv-cards .rc .add { grid-column: 4; grid-row: 1 / span 2; justify-self: center; }
  /* stav a ⋮ sdílí poslední sloupec: stav začíná na stejné svislici, ⋮ na kraji */
  .resv-cards .rc .pill { grid-column: 5; grid-row: 1 / span 2; justify-self: start; margin-right: 40px; }
  .resv-cards .rc .dots { grid-column: 5; grid-row: 1 / span 2; justify-self: end; }
}
/* 1. 10.: připnutá lišta na tabletu ubere místo → rezervace jako karty (telefon), ne zmačkané řádky */
@media (max-width: 1080px) and (min-width: 761px) {
  /* tablet: jeden klient = jeden řádek: čas · jméno / P permanentka · služba / terapeut · ⊕ · stav vpravo u ⋮ */
  /* sloupce svázané přes všechny řádky (subgrid) – vše stojí pod sebou jako v tabulce */
  body:not(.nav-pinned) .resv-cards { display: grid !important; grid-template-columns: repeat(5, auto); justify-content: space-between; column-gap: 24px; }
  body:not(.nav-pinned) .resv-cards .rc { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 2px; align-items: center; padding: 14px 0; }
  body:not(.nav-pinned) .resv-cards .rc-top, body:not(.nav-pinned) .resv-cards .rc-foot, body:not(.nav-pinned) .resv-cards .rc-metas, body:not(.nav-pinned) .resv-cards .rc-actions { display: contents; }
  body:not(.nav-pinned) .resv-cards .rc-time { grid-column: 1; grid-row: 1 / span 2; }
  body:not(.nav-pinned) .resv-cards .rc-name { grid-column: 2; grid-row: 1; margin: 0; }
  body:not(.nav-pinned) .resv-cards .rc-meta { grid-column: 3; grid-row: 1 / span 2; }
  body:not(.nav-pinned) .resv-cards .rc-sep { display: none; }
  body:not(.nav-pinned) .resv-cards .rc-ther { display: block; }
  body:not(.nav-pinned) .resv-cards .rc-comm { grid-column: 2; grid-row: 2; white-space: nowrap; }
  body:not(.nav-pinned) .resv-cards .rc-comm .rc-lbl { display: none; } /* tablet: pod jménem jen „0 + 5“ nebo „–“ (ťuknutím prodej) */
  body:not(.nav-pinned) .resv-cards .rc .add { grid-column: 4; grid-row: 1 / span 2; justify-self: center; }
  /* stav a ⋮ sdílí poslední sloupec: stav začíná na stejné svislici, ⋮ na kraji */
  body:not(.nav-pinned) .resv-cards .rc .pill { grid-column: 5; grid-row: 1 / span 2; justify-self: start; margin-right: 40px; }
  body:not(.nav-pinned) .resv-cards .rc .dots { grid-column: 5; grid-row: 1 / span 2; justify-self: end; }
}
@media (max-width: 960px) and (min-width: 761px) { .resv-cards { column-gap: 16px; } }
/* 30. 10. F12: volně psaný důvod zrušení ve štítku stavu rozšířil sdílený sloupec stavu (subgrid) a vytlačil stav všech řádků za okraj (tablet 820, telefon na šířku 844).
   Štítek v kartách má nejvyšší šířku, důvod jde na vlastní řádek pod stav, tečky stojí na jedné svislici (margin-left: auto z telefonu sem nepatří). */
@media (min-width: 761px) and (max-width: 1180px) {
  .resv-cards .rc .pill { margin-left: 0; flex-wrap: wrap; row-gap: 1px; max-width: 190px; white-space: normal; }
  .resv-cards .rc .pill .pill-duvod { flex-basis: 100%; margin-left: 14px; white-space: normal; }
  .resv-cards .rc .pill .pill-duvod .pp-t { display: none; }
}
@media (max-width: 760px) { .resv-cards .rc .pill { flex-wrap: wrap; max-width: 100%; } .resv-cards .rc .pill .pill-duvod { white-space: normal; min-width: 0; } }

  /* šuplík 641–1080: lišta se vytrhne do fixed → obsah držet na místě (jinak poskočil o 64 px doleva) */
  @media (min-width: 641px) and (max-width: 1080px) { body.nav-open .main { margin-left: 64px; } }

  /* LIŠTA (1. 10. – Tereza vybrala C: nahlédnutí + připnutí) – NAHLÉDNUTÍ + PŘIPNUTÍ (vzor: Notion, Arc, Windows/Figma „peek“).
     Myš na liště ~0,25 s → lišta se rozvine PŘES obsah (nic se nepřeskládá), odjetí → schová se.
     V patě rozvinuté lišty „Připnout menu“ → zůstane natrvalo vedle obsahu; „Odepnout“ ji vrátí.
     Klávesnice: Tab do lišty ji rozvine, Esc schová. Dotyk: ťuk na ikonu ji rozvine. */
  @media (min-width: 1081px) {
    body.nav-peek .sidebar { position: fixed; left: 0; top: 72px; height: calc(100vh - 72px); z-index: 70;
      box-shadow: 18px 0 40px -28px color-mix(in oklab, var(--ink) 40%, transparent); }
    body.nav-peek .main { margin-left: 64px; }
  }
  body.nav-peek .snav-group-label > span:not(.chev), body.nav-peek .snav > .snav-item > span, body.nav-peek .snav-top > .snav-item > span { animation: listaFade .18s ease both; }
  @keyframes listaFade { from { opacity: 0; } to { opacity: 1; } }
  /* 1. 10. Tereza: špendlík nahoře vedle Přehledu (pata lišty poskakovala); jen ikona, význam v tooltipu */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .snav-top { display: flex; align-items: center; gap: 4px; }
  .snav-top > .snav-item { flex: 1; min-width: 0; }
  body.nav-collapsed .snav-top .lista-pin { display: none; }
  body.nav-collapsed .snav-top { justify-content: center; gap: 0; } body.nav-collapsed .snav-top > .snav-item { flex: none; }
  /* rozvinutí lišty: ikony zůstanou na stejné výšce jako v pásu ikon (dřív poskočily o 10 px nahoru) */
  body:not(.nav-collapsed) .snav { padding-top: 10px; padding-bottom: 16px; }
  @media (max-width: 640px) { .snav-top .lista-pin { display: none; } } /* 1. 10.: špendlík i na tabletu (v šuplíku i připnuté liště) */
  @media (min-width: 641px) and (max-width: 1080px) { body.nav-open .snav-top .lista-pin, body.nav-pinned .snav-top .lista-pin { display: inline-flex; } }
  .lista-pin { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left;
    font: inherit; font-size: 12.5px; font-weight: 400; color: var(--muted); transition: background .15s, color .15s; }
  .lista-pin svg { width: 18px; height: 18px; flex: none; color: var(--faint); transition: transform .2s ease, color .15s; }
  .lista-pin[aria-pressed="true"] svg { color: var(--accent); }
  .lista-pin:hover { background: var(--row-line); color: var(--ink); }
  .lista-pin:hover svg { color: var(--accent); }
  .lista-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ===== nástěnka · <style id="kontrola-2-10"> (31/32) ===== */
/* 2. 10. – opravy z extrémní kontroly (barvy B, písmo T, šířky R, skoky S) */
.grid2 > .card { margin-bottom: 0 !important; }            /* R2: mezera mezi kartami jen gap (dřív gap + margin = 32) */
.grid2 { gap: 16px; }
@media (max-width: 640px) { .grid2 { gap: 12px; } }
.tbl-scroll { overflow-x: clip; }                          /* S12: žádný bleskový vodorovný posuvník při změně okna */
#revTip, .donut .d-total { font-variant-numeric: tabular-nums; } /* T9 */
.rz-meta { min-height: 18px; }                             /* S7 */
.rz-meta:empty { margin-top: 0; }
.row-pop .mi-ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; } /* T1: SVG místo systémových ✓ ✕ ○ */
.rz-akce .dt-btn[data-k="cancel"] { min-width: 10.5em; justify-content: flex-start; } /* S10: Stornovat ↔ Stornováno stejná šířka */
html[data-mode="light"] .pill.noshow { color: oklch(0.54 0.004 250); } /* B3: kontrast ≥ 4,5 */
/* B5 + B6: noc – linky viditelné, vybrané položky linkou, ne výplní */
html[data-mode="dark"]:not([data-elem="vzduch"]) :is(.acct .mono, .ap-langs, .palette-pop .pp-elems button, .palette-pop .pp-atmo) { border-color: oklch(0.25 calc(var(--c) * .5) var(--hue)) !important; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .ap-line { background: oklch(0.25 calc(var(--c) * .5) var(--hue)); }
html[data-mode="dark"] .ap-langs button.on { background: transparent !important; box-shadow: inset 0 0 0 1px var(--rz-akt); }
html[data-mode="dark"] .ap-mono { background: transparent; border: 1px solid var(--dt-line); }
.palette-pop .pp-elems button.on { background: transparent !important; box-shadow: inset 0 0 0 1px var(--rz-akt); } /* B4 */
/* B7: tooltip grafu v noci černý s linkou */
html[data-mode="dark"] .rev-tip { background: #000 !important; box-shadow: inset 0 0 0 1px var(--dt-line) !important; }
/* B9: hledání v noci – linka při najetí i fokusu */
html[data-mode="dark"] .search:is(:hover, :focus-within) { box-shadow: inset 0 0 0 1px var(--hover-line) !important; }
/* B11: rozvinutá lišta v noci bez stínu */
html[data-mode="dark"] body.nav-peek .sidebar { box-shadow: none !important; }
/* B12: Vrátit v hlášce – linka při najetí */
@media (hover: hover) { .dt-toast button:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 45%, transparent); text-decoration: none; } }
/* B13: přepínače z tokenů */
.seg button, [data-mode="dark"] .seg button { color: var(--muted); }
.seg button.on, [data-mode="dark"] .seg button.on { color: var(--ink); }
@media (hover: hover) { .seg button:hover:not(.on), [data-mode="dark"] .seg button:hover:not(.on) { color: var(--ink); } }
/* P2-8: fokus z klávesnice zřetelný (≥ 3 : 1) – najetí myší zůstává linkou */
:is(.snav a, .snav-item, .topbar button, .topbar a, .search, .seg button, .acct-pop button, .set-pop button, .palette-pop button, .lista-pin):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
:is(#resv, .rz-telo) > tr:focus-visible td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent) !important; }
:is(#resvCards, .rz-karty) > .rc:focus-visible { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent) !important; }
:is(#resvCards, .rz-karty) :is(.rc-name, .rc-ther), .dt-toast span, .rz-meta b { text-wrap: pretty; }
:is(#resvCards, .rz-karty) .rc-ther { white-space: nowrap; }
/* R9/R10 vědomě NE: Tereza – + je fixní a kvůli němu se stránka pod kartami neprodlužuje */

/* ===== nástěnka · <style id="rozbaleni-rezervace"> (32/32) ===== */
/* 1. 10. – VARIANTA B: klik/ťuk kamkoli na rezervaci (mimo zkratky) ji rozbalí v místě s velkými akcemi.
   Vždy jen jedna rozbalená; druhý klik, Esc nebo klik na jinou ji zavře. Ostatní rezervace se jen odsunou dolů.
   Zkratky: PC a tablet = tečka stavu a ∞; telefon = jen tečka stavu. Sloupec Prodej (⊕) a ⋮ zrušeny – Prodat, Upravit a Stornovat jsou v rozbalení. */
:root { --dt-line: var(--hairline); --rz-akt: oklch(0.62 calc(var(--c) * 1.1) var(--hue)); }
html[data-mode="dark"]:not([data-elem="vzduch"]) { --dt-line: oklch(0.30 calc(var(--c) * 0.6) var(--hue)); --rz-akt: oklch(0.54 calc(var(--c) * 1.1) var(--hue)); }
html[data-mode="dark"][data-elem="vzduch"] { --dt-line: oklch(1 0 0 / .22); --rz-akt: oklch(0.62 0 0); }
html[data-elem="vzduch"]:not([data-mode="dark"]) { --rz-akt: oklch(0.58 0 0); }

/* rezervace je celá klikací; otevřená = zřetelná linka nahoře a dole (nikdy výplň) */
:is(#resv, .rz-telo) tr, :is(#resvCards, .rz-karty) .rc { cursor: pointer; }
:is(#resv, .rz-telo) tr:focus-visible, :is(#resvCards, .rz-karty) .rc:focus-visible { outline: none; } /* 3. 11. F112: zaměření z klávesnice kreslí P2-8 výš (2 px barvou zvýraznění); bledá linka --rz-line ho přebíjela a ve „vzduchu“ je průhledná */
:is(#resv, .rz-telo) tr.rz-aktivni td { box-shadow: inset 0 1px 0 var(--rz-akt), inset 0 -1px 0 var(--rz-akt) !important; }
:is(#resvCards, .rz-karty) .rc.rz-aktivni { box-shadow: inset 0 1px 0 var(--rz-akt), inset 0 -1px 0 var(--rz-akt) !important; }
:is(#resv, .rz-telo) tr.rz-otevreno.rz-aktivni td { box-shadow: inset 0 1px 0 var(--rz-akt) !important; border-bottom-color: transparent !important; }
:is(#resv, .rz-telo) tr.rz-detail > td { padding: 4px 22px 18px !important; box-shadow: inset 0 -1px 0 var(--rz-akt) !important; cursor: default; text-align: left; white-space: normal; }
:is(#resv, .rz-telo) tr.rz-detail:hover > td { background: transparent !important; }
:is(#resvCards, .rz-karty) .rc .rz-in { contain: inline-size; grid-column: 1 / -1; cursor: default; padding-top: 12px; }
:is(#resvCards, .rz-karty) .rc-comm { min-height: 14px; }
.pill .pill-prodej { margin-left: -3px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; } /* tichá stopa: už se něco prodalo */
:is(#resv, .rz-telo) > tr:not(.rz-detail) > td { height: 57px; } /* výška řádku jako se sloupcem Prodej (dřív ji držel kroužek ⊕) – vzduch zůstává */ /* karta po prodeji permanentky neposkočí */

/* obsah rozbalení */
.rz-in { font-size: 12.5px; color: var(--ink-2); }
.rz-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }
.rz-meta b { color: var(--ink-2); font-weight: 450; }
.rz-akce { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-sub { display: contents; } /* položky navazují hned za tlačítkem a zalamují se jednotlivě – nic neskočí celé na další řádek */
.rz-sub .rz-sub-lbl { display: inline-flex; align-items: center; height: 42px; padding: 0 4px 0 0; font-size: 11.5px; color: var(--accent); white-space: nowrap; } /* popisek otevřené části v barvě živlu (den i noc) */
.rz-sub .rz-sub-lbl .dt-num { font-size: 12.5px; font-weight: 500; color: var(--ink); margin: 0 3px; font-variant-numeric: tabular-nums; } /* stejné písmo jako „0 + 5“ v řádku – žádná ozdobná čísla */

/* tlačítka akcí – najetí/fokus = jen linka; Dorazil = jediné plné (stejné jako Nová rezervace) */
.dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-width: 112px; padding: 0 16px; border-radius: 10px;
  border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hairline); }
:where(html[data-mode="dark"]) .dt-btn { box-shadow: inset 0 0 0 1px var(--dt-line); }
.dt-btn svg { width: 16px; height: 16px; flex: none; }
.dt-btn .ic-ok { color: var(--ok); } .dt-btn .ic-no { color: var(--muted); } .dt-btn .ic-conf { color: var(--accent); }
.dt-btn.primary { background: oklch(0.46 var(--c) var(--hue)); color: oklch(0.985 0 0); box-shadow: none; }
html[data-mode="dark"] .dt-btn.primary { background: oklch(0.40 var(--c) var(--hue)); color: oklch(0.95 0.008 var(--hue)); box-shadow: none; }
.dt-btn.primary .ic-ok { color: inherit; }
html[data-elem="vzduch"] .dt-btn.primary, html[data-elem="vzduch"][data-mode="dark"] .dt-btn.primary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dt-btn.danger { box-shadow: none; min-width: 0; color: var(--cancel); font-weight: 450; }
.dt-btn.on { box-shadow: inset 0 0 0 1.5px var(--rz-akt); color: var(--accent); font-weight: 500; } /* zamáčknuté = silnější linka a barva živlu (výraznější, ne slabší) */
.dt-btn.on[data-k="done"] { background: oklch(0.46 var(--c) var(--hue)); color: oklch(0.985 0 0); box-shadow: inset 0 0 0 1.5px oklch(0.32 var(--c) var(--hue)); }
html[data-mode="dark"] .dt-btn.on[data-k="done"] { background: oklch(0.40 var(--c) var(--hue)); color: oklch(0.95 0.008 var(--hue)); box-shadow: inset 0 0 0 1.5px oklch(0.62 var(--c) var(--hue)); }
.dt-btn.on[data-k="done"] .ic-ok { color: inherit; }
.rz-sub-storno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; } /* důvody pod tlačítky v jedné řadě, nic se nezalamuje uprostřed */
@media (max-width: 760px) { .rz-sub-storno { display: grid; } }
.rz-akce .dt-btn.rz-zavrit { margin-left: auto; min-width: 0; padding: 0 8px; box-shadow: none; color: var(--muted); font-weight: 450; gap: 6px; }
.rz-akce .dt-btn.rz-zavrit svg { width: 14px; height: 14px; }
@media (hover: hover) { .rz-akce .dt-btn.rz-zavrit:hover { box-shadow: inset 0 0 0 1px var(--hover-line); color: var(--ink); } }
@media (max-width: 760px) { .rz-akce .dt-btn.rz-zavrit { display: none; } } /* karty mají šipku v hlavičce */
.rz-sub-storno .dt-btn.rz-zpet { color: var(--muted) !important; box-shadow: none !important; font-weight: 450; }
@media (hover: hover) { .rz-sub-storno .dt-btn.rz-zpet:hover { box-shadow: inset 0 0 0 1px var(--hover-line) !important; color: var(--ink) !important; } }
/* PC: šipka ˄ u otevřené rezervace (jako u karet) v pravém okraji řádku */
:is(#resv, .rz-telo) > tr.rz-otevreno > td.t-end { position: relative; }
:is(#resv, .rz-telo) > tr.rz-otevreno > td.t-end::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -9px; background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 10 4.5-4.5 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 10 4.5-4.5 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.rz-sub.rz-sub-storno .dt-btn, .rz-sub .dt-btn.danger { color: var(--cancel); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 40%, transparent); }
.dt-btn.danger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 45%, transparent); color: var(--cancel); padding: 0 16px; }
.dt-btn.on.danger { color: var(--cancel); padding: 0 16px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 45%, transparent); } /* Stornováno zůstává červené */
html[data-elem="vzduch"] .dt-btn.on { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
html[data-elem="vzduch"] .dt-btn.on[data-k="done"], html[data-elem="vzduch"][data-mode="dark"] .dt-btn.on[data-k="done"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.dt-btn:disabled:not(.on) { opacity: .38; cursor: default; }
@media (hover: hover) { .dt-btn:disabled:not(.on):hover { box-shadow: inset 0 0 0 1px var(--hairline); } .dt-btn.danger:disabled:hover { box-shadow: none; } }
.rz-pole[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--cancel); }
.rz-akce > .dt-btn.danger:not(.on) { padding: 0 6px; } /* Stornovat bez linky: text na hraně jako ostatní */
:is(#resv, .rz-telo) > tr:has(+ tr.rz-otevreno) > td, :is(#resv, .rz-telo) > tr.rz-otevreno > td, :is(#resv, .rz-telo) tr.rz-detail > td { border-bottom-color: transparent !important; } /* jen jedna linka kolem otevřené */
.dt-btn.on .ic-ok, .dt-btn.on .ic-no, .dt-btn.on .ic-conf { color: var(--accent); }
.dt-btn.on:disabled { cursor: default; }
.dt-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--rz-line); color: var(--accent); }
.rz-sub .dt-btn { min-width: 0; padding: 0 14px; font-weight: 450; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rz-akt) 55%, transparent); } /* položky otevřené části: linka v barvě otevřeného tlačítka */
.rz-pole { height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rz-akt) 55%, transparent); color-scheme: light; }
html[data-mode="dark"] .rz-pole { color-scheme: dark; }
.rz-pole:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rz-sub .dt-btn .price { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .dt-btn:not(.primary):hover { box-shadow: inset 0 0 0 1px var(--hover-line); }
  .dt-btn.danger:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 45%, transparent); }
  .dt-btn.primary:hover { filter: brightness(1.1); }
  html[data-elem="vzduch"] .dt-btn.primary:hover { filter: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
}
.dt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .rz-akce { display: grid; grid-template-columns: 1fr 1fr; }
  .rz-akce .dt-btn { min-width: 0; padding: 0 10px; white-space: nowrap; }
  .rz-akce .dt-btn[data-k="done"] { order: -1; grid-column: 1 / -1; height: 48px; font-size: 14px; } /* Dorazil první a největší */
  .rz-akce .dt-btn[data-k="cancel"] { grid-column: 1 / -1; } /* Stornovat samostatně dole */
}
@media (max-width: 480px) {
  .rz-akce .dt-btn:not([data-k="done"]) { padding: 0 6px; white-space: normal; line-height: 1.2; text-align: center; }
  .rz-akce .dt-btn:not([data-k="done"]) svg { display: none; }
  .rz-sub .rz-pole { min-width: 0; width: 100%; }
}
@media (max-width: 360px) { .rz-sub:not(:has(.rz-pole)) { grid-template-columns: 1fr !important; } .rz-sub .rz-pole[type="date"] { grid-column: 1 / -1; } }
@media (max-width: 400px) {
  .rz-akce .dt-btn:not([data-k="done"]) { padding: 0 6px; }
  .rz-akce .dt-btn:not([data-k="done"]) svg { display: none; } /* úzký telefon: vedlejší akce jen slovem, ať se nic netlačí k okraji */

}
@media (max-width: 760px) { /* telefon: podčást jako mřížka přes celou šířku pod svým tlačítkem */
  .rz-sub { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rz-sub .rz-sub-lbl { height: auto; padding: 4px 2px 0; }
  .rz-sub:has(.price) { grid-template-columns: 1fr; }
  .rz-sub .dt-btn:has(.price) { justify-content: space-between; }
  .rz-sub .rz-sub-lbl { grid-column: 1 / -1; }
}

/* tablet a telefon: šipka napovídá, že karta jde rozbalit */
.rc-go { display: none; }
@media (max-width: 1180px) {
  :is(#resvCards, .rz-karty) .rc { position: relative; }
  :is(#resvCards, .rz-karty) .rc-go { display: block; position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--faint); transition: transform .2s; }
  :is(#resvCards, .rz-karty) .rc.rz-otevreno .rc-go { top: 22px; transform: rotate(90deg); }
}
/* telefon: na kartě zůstává jen tečka stavu (větší terč), ostatní je v rozbalení */
@media (max-width: 760px) {
  :is(#resvCards, .rz-karty) .rc { padding-right: 0; }
  :is(#resvCards, .rz-karty) .rc-go { display: none !important; } /* 2. 10. Tereza: šipky na telefonu ne – karta se rozbalí ťukem kamkoli */ /* rozbalení až k pravé lince karty (šipka je u otevřené nahoře) */
  body:has(:is(#resvCards, .rz-karty) .rz-in) .cta.fab-add { opacity: 0; pointer-events: none; } /* + nezakryje tlačítka rozbalení */
  :is(#resvCards, .rz-karty) .rc-inf-add { pointer-events: none; } /* telefon: bez permanentky jen ∞ (informace), prodej je v rozbalení */
  :is(#resvCards, .rz-karty) .perm-edit { pointer-events: none; }
  :is(#resvCards, .rz-karty) .pill .dot { position: relative; }
  :is(#resvCards, .rz-karty) .pill .dot::after { content: ""; position: absolute; inset: -20px; border-radius: 50%; } /* terč 45 px */
}

/* tiché hlášení po akci (+ Vrátit) */
.dt-toast { --tip-bg: var(--ink); --tip-ink: var(--surface); position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 95; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; border-radius: 10px;
  background: var(--tip-bg, var(--ink)); color: var(--tip-ink, #fff); font-size: 12.5px; transition: opacity .18s, transform .18s; }
html[data-mode="dark"] .dt-toast { --tip-bg: #000; --tip-ink: var(--ink); box-shadow: inset 0 0 0 1px var(--dt-line); } /* noc: černá s linkou, světlé písmo */
.dt-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dt-toast button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dt-toast button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ############################## ČÁST B – DOPLŇKY ############################## */
/* ============================================================================
   ČÁST B – DOPLŇKY ZÁKLADU (zdroj: _prace/zdroj/nove.css)
   Co nástěnka nemá. Všechno je ODVOZENÉ ze stejných tokenů a pravidel:
   – linka místo výplně (najetí, fokus, vybráno), barvu nese jen plné tlačítko,
   – rádiusy 12 (karta, okno) · 10 (tlačítko, pole) · 8 (malé položky),
   – písmo 11,5 / 12,5 / 14 px, váhy 400 / 450 / 500, nic pod 11 px,
   – výšky 42 (akce, pole) · 36 (hledání) · 32 (malé tlačítko),
   – noc: černé plochy, linky v tónu živlu (vzduch bílé), žádné stíny.
   Každý blok označený NOVÉ čeká na posouzení porotou (viz katalog.html).
   ============================================================================ */

:root {
  /* linka pole = přesně linka .rz-pole z nástěnky (pole termínu v rozbalení) */
  --pole-line: color-mix(in oklab, var(--rz-akt) 55%, transparent);
  /* výplň plného tlačítka (= .cta / .dt-btn.primary v nástěnce) – jen pro čtení v nových prvcích */
  --plne: oklch(0.46 var(--c) var(--hue));
}
html[data-mode="dark"] { --plne: oklch(0.40 var(--c) var(--hue)); }

/* ---------- B0. Zobecnění nástěnky (vzhled beze změny) ---------- */

/* B0.1 NOVÉ: aktivní skupina v liště – ikona skupiny v barvě živlu (stejně jako ikona aktivní položky „Přehled“) */
.snav-group.ma-aktivni > .snav-group-label > svg { color: var(--accent); }

/* B0.2 NOVÉ (neviditelné): dotyková plocha ≥ 40 px na telefonu – vzhled se nemění, zvětší se jen klikací pole */
@media (max-width: 640px) {
  body.nav-collapsed .snav-group-label, body.nav-collapsed .snav-top > .snav-item, .topbar .search, .topbar .top-set { position: relative; }
  body.nav-collapsed .snav-group-label::before, body.nav-collapsed .snav-top > .snav-item::before { content: ""; position: absolute; inset: -4px -9px; }
  .topbar .search::after, .topbar .top-set::after, #notifBtn::after { content: ""; position: absolute; inset: -4px; } /* 36 px → 42 px (počítá se od vnitřní hrany rámečku) */
  .topbar > .cta::after { content: ""; position: absolute; inset: -6px 0; }
}
@media (max-width: 760px), (pointer: coarse) {   /* 24. 10.: i tablet (dotyk) – neviditelné terče ≥ 40 px */
  .seg button, .dt-btn.maly, .str-cisla > *, .stitek button, .zalozky > *, .drobecky a, .th-tridit, .resv-more { position: relative; }
  .seg button::after { content: ""; position: absolute; inset: -9px -1px; }
  .dt-btn.maly::after { content: ""; position: absolute; inset: -4px 0; }
  .stitek button::after { content: ""; position: absolute; inset: -12px; }
  .drobecky a::after { content: ""; position: absolute; inset: -13px -10px; }
  .drobecky { padding: 8px 0; }
  .drobecky a:first-child { z-index: 1; }                        /* plocha dalšího odkazu (i se znakem ›) nepřekryje první */                                   /* místo pro dotykovou plochu odkazu zpět */
  .content .top-ic { position: relative; }
  .content .top-ic::after { content: ""; position: absolute; inset: -3px; }
  .dt-toast button { position: relative; }
  .dt-toast button::after { content: ""; position: absolute; inset: -5px -4px; }   /* „Vrátit“ 30 → 40 px, uvnitř hlášení */
}
/* pojistka pro nejužší telefon: stav s dlouhou stopou („Stornováno · klient pozdě“) se vedle data nevejde → sklouzne pod něj, nic nepřeteče */
@media (max-width: 380px) { .rc-top { flex-wrap: wrap; row-gap: 2px; } }

/* B0.3 obecná tabulka .tbl – stejná tabulka jako rezervace, jen bez typografie vázané na pořadí sloupců
   (v nástěnce jsou 3. a 4. sloupec = služba a terapeut tiše; tady to řídí třídy buněk) */
.tbl-scroll table.tbl td:nth-child(3), .tbl-scroll table.tbl td:nth-child(4) { font-size: 12.5px; color: var(--ink-2); }
.tbl-scroll table.tbl tbody tr:hover td:nth-child(3), .tbl-scroll table.tbl tbody tr:hover td:nth-child(4) { color: var(--ink-2); }
.tbl-scroll table.tbl td.t-name, .tbl-scroll table.tbl tbody tr:hover td.t-name { color: var(--ink); }
.tbl-scroll table.tbl td.t-time, .tbl-scroll table.tbl tbody tr:hover td.t-time { color: var(--muted); }
.tbl-scroll table.tbl td.t-perm, .tbl-scroll table.tbl tbody tr:hover td.t-perm { color: var(--muted); }
.tbl-scroll table.tbl td.t-vedl { font-size: 11.5px; color: var(--muted); }             /* vedlejší údaj (jako služba a terapeut v rezervacích) */
.tbl-scroll table.tbl tbody tr:hover td.t-vedl { color: var(--ink-2); }
.tbl-scroll table.tbl td:nth-child(5) { overflow: hidden; }
.tbl-scroll table.tbl td:has(.pill), .tbl-scroll table.tbl td.t-volne { overflow: visible; }
/* karty z tabulky bez sloupce s časem (tablet): jméno stojí na levé hraně, ne za prázdným sloupcem */
@media (min-width: 761px) and (max-width: 1180px) {
  .resv-cards.bez-casu .rc .rc-name, .resv-cards.bez-casu .rc .rc-comm { grid-column: 1; }
  .resv-cards.bez-casu .rc .rc-meta { grid-column: 2 / span 2; }
}
/* řádek bez rozbalení není klikací */
.rz-telo.bez-rozbaleni > tr, .rz-karty.bez-rozbaleni > .rc { cursor: default; }
/* stav, který se nemění klikem na tečku (mimo rezervace): tečka je jen znak */
.pill.ticha .dot { cursor: default; pointer-events: none; }
td .pill.ticha { padding-left: 0; }
/* karta s otevřeným oknem (filtr) leží nad sousedními kartami */
.content > *:has(.filtr-okno:not([hidden])) { z-index: 5; }

/* ---------- B1. NOVÉ: hlava stránky + drobečky ---------- */
.str-hlava { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; min-height: 32px; margin: 0 0 16px; }
.drobecky { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; font-size: 11.5px; color: var(--muted); }
.drobecky > * + *::before { content: "›"; margin: 0 9px; color: var(--muted); font-weight: 400; font-size: 11.5px; }
.drobecky a { color: inherit; text-decoration: none; border-radius: 6px; }
.drobecky a:hover { color: var(--ink); }
.drobecky a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.str-nadpis { margin: 0; font-size: 14px; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); } /* = .sect (jediný nadpisový styl nástěnky) */
.str-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) { .str-hlava { margin-bottom: 12px; } }

/* ---------- B2. NOVÉ: tlačítka – malá, tichá, jen ikona (odvozeno z .dt-btn a .cta) ---------- */
.dt-btn.maly { height: 32px; min-width: 0; padding: 0 12px; gap: 7px; font-size: 11.5px; letter-spacing: .01em; } /* rozměr = Nová rezervace (.cta) */
.dt-btn.maly svg { width: 14px; height: 14px; }
.dt-btn.jen-ikona { width: 42px; min-width: 0; padding: 0; }
.dt-btn.maly.jen-ikona { width: 32px; }
.dt-btn.tichy { min-width: 0; padding: 0 10px; box-shadow: none; color: var(--muted); font-weight: 450; } /* = „Zavřít“ a „Zpět“ v rozbalení */
@media (hover: hover) { .dt-btn.tichy:hover { box-shadow: inset 0 0 0 1px var(--hover-line); color: var(--ink); } }
a.dt-btn { text-decoration: none; }
/* ikonové tlačítko použité v obsahu (mimo horní lištu) má z klávesnice stejný obrys jako v liště */
.content :is(.top-ic, .mode-btn, .dots, .add):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.dt-btn:focus-visible { border-radius: 10px; }
.dt-btn.primary:disabled:not(.on) { opacity: .38; }

/* ---------- B3. NOVÉ: formulář ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form.jeden { grid-template-columns: minmax(0, 1fr); }
.form .cely { grid-column: 1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.pole-blok { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.popisek { font-size: 11.5px; font-weight: 400; letter-spacing: -.01em; line-height: 16px; color: var(--ink-2); } /* = štítek KPI */
.popisek .povinne { color: var(--cancel); margin-left: 2px; }
.napoveda { margin: 0; font-size: 11.5px; line-height: 16px; color: var(--muted); }
.chyba { margin: 0; font-size: 11.5px; line-height: 16px; color: var(--cancel); }
.form-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* pole = přesně .rz-pole z nástěnky (42 px, rádius 10, linka v tónu živlu, bez výplně) */
.pole { display: block; width: 100%; min-width: 0; height: 42px; padding: 0 12px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--pole-line); color-scheme: light;
  -webkit-appearance: none; appearance: none; transition: box-shadow .15s; }
html[data-mode="dark"] .pole { color-scheme: dark; }
.pole::placeholder { color: var(--muted); opacity: 1; }
@media (hover: hover) { .pole:hover:not(:disabled):not([aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--rz-akt); } }
.pole:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.pole[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--cancel); }
.pole:disabled { opacity: .38; cursor: default; }
.pole[readonly] { box-shadow: inset 0 0 0 1px var(--dt-line); color: var(--ink-2); }
textarea.pole { height: auto; min-height: 96px; padding: 11px 12px; line-height: 1.5; resize: vertical; }
.pole.maly { height: 32px; padding: 0 10px; font-size: 11.5px; }
html[data-elem="vzduch"] .pole:focus-visible { outline-color: var(--ink); }

/* pole s jednotkou vpravo (Kč, min, %) */
.pole-obal { position: relative; display: block; min-width: 0; }
.pole-obal > .pole { padding-right: 44px; }
.pole-jedn { position: absolute; right: 12px; top: 0; height: 42px; display: inline-flex; align-items: center; font-size: 11.5px; color: var(--muted); pointer-events: none; }

/* výběr (nativní select – seznam kreslí systém, na telefonu systémové kolečko) */
.vyber { position: relative; display: block; min-width: 0; }
.vyber > select.pole { padding-right: 34px; cursor: pointer; text-overflow: ellipsis; }
.vyber::after { content: ""; position: absolute; right: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; pointer-events: none; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.vyber:has(select:disabled)::after { opacity: .38; }
.vyber.maly > select.pole { height: 32px; padding: 0 28px 0 10px; font-size: 11.5px; }
.vyber.maly::after { right: 9px; }

/* zaškrtnutí a volba jedné možnosti: vybráno = silnější linka + znak v barvě živlu (nikdy plná výplň) */
.volba { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.volba input { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 0; border-radius: 5px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--pole-line); cursor: pointer; transition: box-shadow .15s; }
.volba input[type="radio"] { border-radius: 50%; }
.volba input::before { content: ""; width: 12px; height: 12px; background: var(--accent); transform: scale(0); transition: transform .12s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.volba input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; -webkit-mask: none; mask: none; }
.volba input:checked { box-shadow: inset 0 0 0 1.5px var(--rz-akt); }
.volba input:checked::before { transform: scale(1); }
@media (hover: hover) { .volba:hover input:not(:disabled):not(:checked) { box-shadow: inset 0 0 0 1px var(--rz-akt); } }
.volba input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.volba input[type="radio"]:focus-visible { border-radius: 50%; }
.volba input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--cancel); }
.volba input:disabled { opacity: .38; cursor: default; }
.volba:has(input:disabled) { cursor: default; color: var(--muted); }
.volba small { display: block; font-size: 11.5px; line-height: 16px; color: var(--muted); }
html[data-elem="vzduch"] .volba input:checked, html[data-elem="vzduch"] .prepinac input:checked { box-shadow: inset 0 0 0 1.5px var(--ink); }
.volby { display: flex; flex-direction: column; gap: 10px; }
.volby.vedle { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }

/* přepínač zapnuto / vypnuto: bez výplně – poloha + barva kolečka + silnější linka */
.prepinac { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 12.5px; line-height: 20px; color: var(--ink-2); }
.prepinac input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--pole-line); cursor: pointer; transition: box-shadow .15s; }
.prepinac input::before { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .15s, background-color .15s; }
.prepinac input:checked { box-shadow: inset 0 0 0 1.5px var(--rz-akt); }
.prepinac input:checked::before { transform: translateX(16px); background: var(--accent); }
@media (hover: hover) { .prepinac:hover input:not(:disabled):not(:checked) { box-shadow: inset 0 0 0 1px var(--rz-akt); } }
.prepinac input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.prepinac input:disabled { opacity: .38; cursor: default; }
.prepinac:has(input:disabled) { cursor: default; color: var(--muted); }
.prepinac small { display: block; font-size: 11.5px; line-height: 16px; color: var(--muted); }
@media (max-width: 760px) { .volba, .prepinac { min-height: 40px; align-items: center; } .volba::after, .prepinac::after { content: ""; position: absolute; inset: 0 -6px; } }

/* nahrání souboru */
.nahrani { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 104px; padding: 16px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--pole-line); text-align: center; cursor: pointer; font-size: 12.5px; line-height: 18px; color: var(--ink-2); transition: box-shadow .15s; }
.nahrani input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nahrani svg { width: 18px; height: 18px; margin-bottom: 4px; color: var(--muted); }
.nahrani b { font-weight: 500; color: var(--accent); }
.nahrani small { font-size: 11.5px; line-height: 16px; color: var(--muted); }
@media (hover: hover) { .nahrani:hover { box-shadow: inset 0 0 0 1px var(--rz-akt); } }
.nahrani.pretah { box-shadow: inset 0 0 0 1.5px var(--rz-akt); }
.nahrani:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.nahrani[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--cancel); }
.nahrani:has(input:disabled) { opacity: .38; cursor: default; }
.soubory { list-style: none; margin: 8px 0 0; padding: 0; }
.soubory li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--row-line); font-size: 12.5px; color: var(--ink-2); }
.soubory li:last-child { border-bottom: 0; }
.soubory li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.soubory li small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* hláška ve formuláři (shrnutí chyb, informace) – linka, ne plocha */
.upozorneni { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--dt-line); font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.upozorneni svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--muted); }
.upozorneni b { font-weight: 500; color: var(--ink); }
.upozorneni.je-chyba { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 45%, transparent); }
.upozorneni.je-chyba svg { color: var(--cancel); }
.upozorneni.je-ok svg { color: var(--ok); }

/* ---------- B4. NOVÉ: záložky stránky (větší sourozenec přepínače .seg) ---------- */
.zalozky { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 16px; box-shadow: inset 0 -1px 0 var(--row-line); }
.zalozky > * { display: inline-block; height: 36px; padding: 0 1px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 400; line-height: 36px;
  color: var(--muted); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; }
.zalozky > *::before { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 500; } /* drží šířku tučného textu – po přepnutí nic neposkočí */
.zalozky > [aria-selected="true"], .zalozky > [aria-current="page"] { color: var(--ink); font-weight: 500; box-shadow: inset 0 -1.5px 0 var(--rz-akt); }
@media (hover: hover) { .zalozky > *:hover { color: var(--ink); } }
.zalozky > *:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.zalozky > *:disabled { opacity: .38; cursor: default; }
html[data-elem="vzduch"] .zalozky > [aria-selected="true"], html[data-elem="vzduch"] .zalozky > [aria-current="page"] { box-shadow: inset 0 -1.5px 0 var(--ink); }
.zalozky .pocet { margin-left: 6px; vertical-align: 1px; }
@media (max-width: 760px) { .zalozky > * { min-width: 40px; height: 40px; line-height: 40px; } }
.zal-panel[hidden] { display: none; }

/* počet (odznak) – přesně odznak z levé lišty, jen bez jejího záporného okraje */
.pocet { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; white-space: nowrap; border-radius: 9px; font-size: 11px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent); background: color-mix(in oklch, var(--accent) 10%, transparent); }
html[data-mode="light"] .pocet { color: var(--accent-deep); } /* odznak lišty má ve dne kontrast jen 4,0–4,4 : 1 → tady o stupeň tmavší písmo (≥ 4,5 : 1) */

/* ---------- B5. NOVÉ: štítek (značka klienta, aktivní filtr) – jen linka ---------- */
.stitky { display: flex; flex-wrap: wrap; gap: 6px; }
.stitek { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 400; line-height: 1; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--dt-line); white-space: nowrap; }
.stitek b { font-weight: 500; color: var(--ink); }
.stitek button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0 -5px 0 -2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.stitek button svg { width: 10px; height: 10px; }
@media (hover: hover) { .stitek button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hover-line); } }
.stitek button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }
@media (max-width: 760px) { .stitky { gap: 8px 6px; } .stitek:has(button) { height: 32px; border-radius: 16px; } } /* telefon: štítek s křížkem vyšší, ať se křížky pod sebou nepřekrývají */

/* ---------- B6. NOVÉ: nástroje seznamu – hledání, filtr, řazení ---------- */
.nastroje { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px var(--pad-x) 4px; }
.nastroje .mezera { flex: 1; }
.card:not(.flush) > .nastroje { padding-left: 0; padding-right: 0; }
/* hledání v obsahu = pole Hledat z horní lišty (36 px, linka lišty) */
.hledani { display: flex; align-items: center; gap: 8px; width: 240px; max-width: 100%; min-width: 150px; height: 36px; padding: 0 11px; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface); color: var(--muted); cursor: text; }
.hledani svg { flex: none; width: 15px; height: 15px; }
.hledani input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 11.5px; -webkit-appearance: none; appearance: none; }
.hledani input::placeholder { color: var(--muted); opacity: 1; }
.hledani input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hledani:hover { box-shadow: inset 0 0 0 1px var(--hover-line); }
.hledani:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .hledani { border-color: oklch(0.38 calc(var(--c) * 0.6) var(--hue)); }
html[data-mode="dark"] .hledani { box-shadow: none; }
html[data-mode="dark"] .hledani:is(:hover, :focus-within) { box-shadow: inset 0 0 0 1px var(--hover-line); }
.nastroje > .hledani { flex: 0 1 240px; width: auto; }
@media (max-width: 760px) { .hledani { height: 42px; } .nastroje > .hledani { flex: 1 1 100%; } }
/* okno filtru – stejné okno jako nabídka řádku (.row-pop) */
.filtr-okno { position: absolute; z-index: 60; top: calc(100% + 2px); right: var(--pad-x); display: flex; flex-direction: column; gap: 12px; width: 288px; max-width: calc(100% - 2 * var(--pad-x)); padding: 14px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 12px 32px rgba(46,38,28,.16); }
.filtr-okno[hidden] { display: none; }
.card:not(.flush) > .nastroje > .filtr-okno { right: 0; }
html[data-mode="dark"] .filtr-okno { box-shadow: none; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .filtr-okno { border-color: oklch(0.25 calc(var(--c) * 0.5) var(--hue)); }
.filtr-pata { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
@media (max-width: 760px) { .filtr-okno { position: static; flex: 1 1 100%; width: auto; max-width: none; box-shadow: none; } }
/* řazení: hlavička sloupce jako tiché tlačítko, směr ukáže šipka */
.th-tridit { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; border-radius: 6px; }
.th-tridit svg { flex: none; width: 11px; height: 11px; opacity: 0; transition: opacity .15s, transform .15s; }
@media (hover: hover) { .th-tridit:hover { color: var(--ink); } .th-tridit:hover svg { opacity: 1; } }
th[aria-sort="ascending"] .th-tridit, th[aria-sort="descending"] .th-tridit { color: var(--ink); }
th[aria-sort="ascending"] .th-tridit svg, th[aria-sort="descending"] .th-tridit svg { opacity: 1; }
th[aria-sort="descending"] .th-tridit svg { transform: rotate(180deg); }
.th-tridit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
html[data-mode="dark"] th[aria-sort] .th-tridit { color: var(--ink); }

/* ---------- B7. NOVÉ: stránkování – pata seznamu ve výšce řádku „Zobrazit další“ ---------- */
.strankovani { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 44px; padding: 6px var(--pad-x); border-top: 1px solid var(--row-line);
  font-size: 11.5px; color: var(--muted); }
.card:not(.flush) > .strankovani { padding-left: 0; padding-right: 0; }
.str-kolik { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.str-cisla { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.str-cisla > * { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); text-decoration: none; cursor: pointer; }
.str-cisla > span { cursor: default; }
.str-cisla svg { width: 14px; height: 14px; }
.str-cisla > [aria-current="page"] { color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--rz-akt); cursor: default; }
html[data-elem="vzduch"] .str-cisla > [aria-current="page"] { box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) { .str-cisla > :is(a, button):not([aria-current="page"]):not(:disabled):hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hover-line); } }
.str-cisla > *:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 8px; }
.str-cisla > *:disabled, .str-cisla > [aria-disabled="true"] { opacity: .38; cursor: default; }
@media (max-width: 760px) {
  .strankovani { justify-content: center; padding-top: 4px; padding-bottom: 4px; }
  .str-cisla > * { flex: none; min-width: 40px; height: 40px; }
  .str-cisla > .jen-pc, .strankovani .jen-pc { display: none; }
  .resv-cards ~ .strankovani { margin: 0 var(--pad-x); padding-left: 0; padding-right: 0; }
}

/* ---------- B8. NOVÉ: okno (dialog) ---------- */
.dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-hover); overflow: auto; }
dialog.dialog::backdrop { background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* = ztmavení pod šuplíkem menu */
html[data-mode="dark"] .dialog { box-shadow: none; }
html[data-mode="dark"]:not([data-elem="vzduch"]) .dialog { border-color: oklch(0.25 calc(var(--c) * 0.5) var(--hue)); }
.dialog-in { display: flex; flex-direction: column; gap: 12px; padding: var(--pad-y) var(--pad-x); }
.dialog-h { margin: 0; font-size: 14px; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.dialog-t { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.dialog-akce { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media (max-width: 480px) { .dialog-akce .dt-btn { flex: 1 1 auto; white-space: nowrap; } }

/* ---------- B9. NOVÉ: prázdný stav ---------- */
.prazdno { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 16px 48px; text-align: center; }
.prazdno > svg { width: 28px; height: 28px; margin-bottom: 6px; color: var(--faint); stroke-width: 1.5; }
.prazdno-h { margin: 0; font-size: 12.5px; font-weight: 450; color: var(--ink); }
.prazdno-t { margin: 0 0 10px; max-width: 46ch; text-wrap: balance; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* ---------- B10. NOVÉ: klidná karta + sekce nastavení + popis (dvojice název – hodnota) ---------- */
/* karta s formulářem se při najetí nezvedá ani nemění okraj (psaní do polí pod pohyblivou kartou ruší) */
.card.klid:hover { transform: none; }
html[data-mode="light"] .card.klid:hover { box-shadow: 0 10px 30px rgba(46,38,28,.05); }
html[data-mode="dark"]:not([data-elem="vzduch"]) .card.klid:hover { border-color: oklch(0.25 calc(var(--c) * 0.5) var(--hue)) !important; }
html[data-mode="dark"][data-elem="vzduch"] .card.klid:hover { border-color: var(--hairline) !important; }
.card.klid > .card-head { margin-bottom: 14px; }
.nast-sekce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 40px; padding: 22px 0; border-bottom: 1px solid var(--row-line); }
.nast-sekce:first-child { padding-top: 4px; }
.nast-sekce:last-child { padding-bottom: 4px; border-bottom: 0; }
.nast-h { margin: 0 0 4px; font-size: 12.5px; font-weight: 450; line-height: 18px; color: var(--ink); }
.nast-t { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.nast-radek { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--row-line); }
.nast-radek:first-child { padding-top: 0; }
.nast-radek:last-child { padding-bottom: 0; border-bottom: 0; }
.nast-radek > div:first-child { min-width: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.nast-radek small { display: block; font-size: 11.5px; line-height: 16px; color: var(--muted); }
@media (max-width: 880px) { .nast-sekce { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 0; } }
.popis { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); margin: 0; }
.popis dt, .popis dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--row-line); line-height: 18px; }
.popis dt { padding-right: 16px; font-size: 11.5px; color: var(--muted); }
.popis dd { min-width: 0; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.popis > :nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 2px; }
@media (max-width: 480px) { .popis { grid-template-columns: minmax(0, 1fr); } .popis dt { padding: 10px 0 0; border-bottom: 0; } .popis dd { padding: 1px 0 10px; }
  .popis > :nth-last-child(2) { padding-bottom: 0; } }

/* ---------- B11. NOVÉ: časová osa – linka protékající tečkami (stejný znak jako podbody levé lišty) ---------- */
.osa { list-style: none; margin: 0; padding: 0; }
.osa > li { position: relative; padding: 0 0 18px 30px; }
.osa > li:last-child { padding-bottom: 0; }
.osa > li::before { content: ""; position: absolute; left: 5.5px; top: 6.5px; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 86%, var(--muted)); }
.osa > li::after { content: ""; position: absolute; left: 7.5px; top: 16px; bottom: -2px; width: 1px; background: color-mix(in oklab, var(--faint) 38%, transparent); }
.osa > li:last-child::after { display: none; }
.osa-kdy { display: block; font-size: 11.5px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.osa-co { display: block; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.osa-co b { font-weight: 450; color: var(--ink); }
.osa-pozn { display: block; font-size: 11.5px; line-height: 16px; color: var(--muted); }

/* ---------- B12. NOVÉ: kalendářní mřížka (měsíc); telefon = seznam dnů ---------- */
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-den-h { padding: 0 8px 10px; font-size: 11.5px; color: var(--muted); }
.kal-bunka { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 96px; margin: 0; padding: 8px 8px 10px;
  border: 0; border-top: 1px solid var(--row-line); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kal-bunka.mimo { cursor: default; }
.kal-cislo { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 21px; height: 21px; margin: -2px 0 1px -5px; padding: 0 5px; border-radius: 999px;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kal-cislo i { display: none; font-style: normal; }
.kal-bunka.dnes .kal-cislo { color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-deep) 45%, transparent); }
.kal-uda { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11.5px; line-height: 16px; color: var(--ink-2); }
.kal-uda b { flex: none; font-weight: 450; color: var(--accent); font-variant-numeric: tabular-nums; }
.kal-dalsi { font-size: 11.5px; line-height: 16px; color: var(--muted); }
@media (hover: hover) { .kal-bunka:not(.mimo):hover { box-shadow: inset 0 0 0 1px var(--hover-line); } }
.kal-bunka.vybrano { box-shadow: inset 0 0 0 1px var(--rz-akt); }
html[data-elem="vzduch"] .kal-bunka.vybrano { box-shadow: inset 0 0 0 1px var(--ink); }
.kal-bunka:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
@media (max-width: 760px) {
  .kal { grid-template-columns: minmax(0, 1fr); }
  .kal-den-h, .kal-bunka.mimo, .kal-bunka.prazdny { display: none; }
  .kal-bunka { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 8px; min-height: 44px; padding: 12px 0; }
  .kal-bunka:first-of-type { border-top: 0; }
  .kal-cislo { grid-row: 1 / span 6; justify-content: flex-start; margin: 0; padding: 0; }
  .kal-cislo i { display: inline; margin-right: 5px; }
  .kal-bunka.dnes .kal-cislo { box-shadow: none; }
  .kal-uda, .kal-dalsi { grid-column: 2; }
}

/* Tereza 22. 10.: nadpis karty s číslem = odkaz na rozpis (S42 z nástěnky); vzhled beze změny, při najetí jen linka */
.karta-odkaz { position: relative; color: inherit; text-decoration: none; border-radius: 4px; }
@media (hover: hover) { .karta-odkaz:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 55%, transparent); } }
.karta-odkaz:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .karta-odkaz::after { content: ""; position: absolute; inset: -13px -8px; } }

/* 22. 10. kontrola: atribut hidden musí skrýt vždy – .card / .upozorneni / .str-cisla s display:flex ho přebíjely (prázdné rámečky v Nastavení, Účtu, Widgetu, Uživatelích; stránkování u jedné strany) */
[hidden] { display: none !important; }

/* 22. 10. kontrola: .odkaz (odkaz v textu) byl jen v clients/doplnky.css – Služby, Místnosti, Vybavení, Terapeuti, Follow-up… ukazovaly holý modrý odkaz prohlížeče */
.odkaz { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--muted) 55%, transparent); border-radius: 4px; cursor: pointer; }
@media (hover: hover) { .odkaz:hover { text-decoration-color: var(--ink); } }
.odkaz:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-elem="vzduch"] .odkaz:focus-visible { outline-color: var(--ink); }

/* Tereza 23. 10.: řazení na telefonu (výběr nad kartami, viz zaklad.js) a záložky v jednom řádku s posunem do strany */
.razeni-tel[hidden], .razeni-tel-radek[hidden] { display: none !important; }
.razeni-tel-radek .razeni-tel { margin-left: auto; }
@media (max-width: 760px) {
  .zalozky { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .zalozky::-webkit-scrollbar { display: none; }
  .zalozky > * { flex: none; white-space: nowrap; }
}
@media (max-width: 760px) {   /* výběry v nástrojích (typ, řazení) se dělí o řádek rovným dílem, nepadají každý na vlastní řádek */
  .nastroje > .vyber { flex: 1 1 0; min-width: 0; }
  .nastroje > .vyber > .pole { width: 100%; min-width: 0; }
  .nastroje > .hledani + .mezera { display: none; }
}
@media (max-width: 760px) { .nastroje-bezne ~ .razeni-tel { flex-basis: 100%; grid-column: 1 / -1; } }   /* Klienti: tlačítka ve dvou sloupcích, řazení přes celou šířku pod nimi */
@media (max-width: 760px) { .nastroje > .razeni-tel { flex: 1 1 150px; } .nastroje > .razeni-tel > .pole { min-width: 150px; } }   /* „Datum ↑“ se nesmí useknout na „Datu…“ */

/* ===== Tereza 24. 10.: rozbalení „nic navíc“ – počítač i telefon stejně ===== */
.jen-dnes .t-day, .jen-dnes .th-slot { display: none; }
.rz-kompakt { display: flex; flex-direction: column; gap: 6px; }
.rz-kompakt .rz-ticho, .rz-kompakt .rz-pas { margin: 0; }
.rz-nepl { color: var(--danger, #b3261e); }
.jmeno-odkaz { position: relative; color: inherit; text-decoration: none; border-radius: 4px; }
@media (hover: hover) { .jmeno-odkaz:hover { text-decoration: underline; text-decoration-color: var(--hover-line); text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.jmeno-odkaz:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rz-kompakt, .rz-kompakt .rz-ticho, .rz-kompakt .rz-pas, .rz-kompakt .rz-pas > *, .rz-kompakt .rz-ticho > span { font-size: 12.5px; line-height: 18px; }
.rz-kompakt .rz-ticho > span { color: var(--ink-2); }
.rz-kompakt .rz-na-detail { font-size: 12px; }
@media (pointer: coarse) { .jmeno-odkaz::after { content: ""; position: absolute; inset: -12px -6px; } .rc .jmeno-odkaz { pointer-events: none; } .rc .jmeno-odkaz::after { content: none; } }   /* jako nástěnka: na kartě telefonu klepnutí rozbalí kartu */

/* Tereza 24. 10.: na telefonu bez ležaté osmičky – „x + z“ je jasná permanentka */
.rc .rc-inf-perm { display: none !important; }

/* ===== Tereza 24. 10.: DECENTNÍ ROZBALENÍ – „čisté, vzdušné, správná hierarchie“, telefon i počítač stejně =====
   1) nahoře jen podstatné: zdraví a alergie (červený popisek), přání z karty, poznámky, pár, lhůta schválení – 13 px, popisky tlumeně
   2) tlačítka: počítač jedna řada; telefon po dvou – stav · čas · prodej (Dorazil | Nedostavil se, Termín | Na příště, Prodat | Upravit)
   3) Stornovat rezervaci = tichý červený odkaz, Zavřít jen na počítači */
.rz-in .rz-info:has(.rv-tel) { margin: 6px 0 18px; }
.rz-in .rv-tel { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.rz-in .rv-tel:empty, .rz-in .rz-info:has(> .rv-tel:empty) { display: none; }
.rz-in .rv-tel-r { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.rz-in .rv-tel .rz-zdravi-text .rz-stit, .rz-in .rv-tel .je-zdravi .rz-stit, .rz-in .rv-tel .rz-zdravi .rz-stit { color: var(--cancel) !important; }
@media (max-width: 760px) {
  .rc .rz-in .rz-akce { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .rc .rz-in .rz-akce > .dt-btn, .rc .rz-in .rz-akce > a.dt-btn { grid-column: auto !important; height: 40px !important; min-height: 40px !important; font-size: 12.5px !important; font-weight: 450 !important; border-radius: 8px !important; padding: 0 10px !important; order: 20 !important; }
  .rc .rz-in .rz-akce > .dt-btn svg { width: 14px !important; height: 14px !important; }   /* Tereza 24. 10.: „tlačítka jsou obrovská – vzhledem k textu vyrovnat“ */
  .rc .rz-in .rz-akce > .rz-zavrit, .rc .rz-in .rz-proc { display: none !important; }
  .rc .rz-in .rz-akce > [data-k="ok"], .rc .rz-in .rz-akce > [data-k="schvalit"] { order: 0 !important; }
  .rc .rz-in .rz-akce > [data-k="dokoncit"], .rc .rz-in .rz-akce > [data-k="done"] { order: 1 !important; }
  .rc .rz-in .rz-akce > [data-k="noshow"], .rc .rz-in .rz-akce > [data-k="odmitnout"] { order: 2 !important; }
  .rc .rz-in .rz-akce > [data-k="termin"] { order: 3 !important; }
  .rc .rz-in .rz-akce > [data-k="pristi"] { order: 4 !important; }
  .rc .rz-in .rz-akce > [data-k="sale"], .rc .rz-in .rz-akce > [data-k="prodej"] { order: 5 !important; }
  .rc .rz-in .rz-akce > [data-k="cela"], .rc .rz-in .rz-akce > [data-k="upravit"] { order: 6 !important; }
  .rc .rz-in .rz-akce > [data-k="cancel"]:not(.on) { order: 30 !important; grid-column: 1 / -1 !important; height: 40px !important; min-height: 40px !important; justify-content: center !important; background: none !important; box-shadow: none !important; border: 0 !important; font-weight: 400 !important; font-size: 13px !important; color: var(--cancel) !important; }
  .rc .rz-in .rz-akce > .rz-sub, .rc .rz-in .rz-akce > .rz-zbozi { grid-column: 1 / -1 !important; }
}

/* připnutá lišta: rám se neukáže, dokud se lišta nerozbalí (jinak obsah po načtení uskočí) */
html.wb-lista-ceka .sidebar, html.wb-lista-ceka .main { visibility: hidden; }

/* Tereza 24. 10. („nejsem si jistá, zda by tam mělo být to číslo v různých fontech na podstránkách“): serifové velké číslo jen na nástěnce (tržby = hlavní číslo dne).
   Na podstránkách jsou KPI vedlejší počty → stejné písmo jako zbytek stránky, jen větší; „z 12“ ve stejném písmu. */

/* pár / skupina: dva řádky jedné rezervace bez čáry mezi sebou (Tereza 24. 10.) */
tr.par-spoj > td { border-bottom-color: transparent !important; }
.rc.par-spoj { border-bottom-color: transparent !important; }
.rz-in .rz-akce > .rz-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; order: 99; }   /* podčást (Prodat, Permanentka…) vždy pod řadou tlačítek – nic neposkočí */
.rz-in .rz-akce > .dt-btn.rz-zavrit { margin-left: auto !important; }
tr.par-spoj + tr.rz-detail > td { border-bottom-color: transparent !important; }
tr.par-spoj.rz-otevreno + tr.rz-detail + tr.rz-otevreno > td, tr.par-spoj + tr.rz-detail + tr > td { border-top-color: transparent !important; box-shadow: none !important; }

/* Tereza 24. 10. (telefon, karty s čísly nahoře): „musí být mnohem jemnější, decentnější“ – menší čísla, menší okraje, popisky drobněji */
@media (max-width: 760px) {
  .kpi { padding: 12px 14px !important; }
  .kpi .val { font-size: 22px !important; height: auto !important; margin: 6px 0 4px !important; line-height: 1.1 !important; }
  .kpi .label, .kpi .foot, .kpi .foot * { font-size: 11.5px !important; line-height: 16px !important; }
}

/* Tereza 24. 10.: „u telefonu vzdušnost, kterou PC nástěnka má – tady chybí, je to přeplácané“
   méně rámečků, víc místa mezi celky, menší a tlumenější vedlejší text; obsah a pořadí beze změny */
@media (max-width: 760px) {
  /* čísla nahoře: jeden klidný blok 2 × 2 místo čtyř karet, tenké linky mezi */
  .kpis, .kpi-row, .kpi-grid { gap: 0 !important; background: var(--surface); border-radius: 14px; box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 6%, transparent), inset 0 0 0 1px var(--hairline); overflow: hidden; margin-bottom: 20px !important; }
  .kpis > .kpi, .kpi-row > .kpi, .kpi-grid > .kpi { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 14px 16px 16px !important; }
  .kpis > .kpi:nth-child(odd), .kpi-row > .kpi:nth-child(odd), .kpi-grid > .kpi:nth-child(odd) { border-right: 1px solid var(--row-line) !important; }
  .kpis > .kpi:nth-child(n+3), .kpi-row > .kpi:nth-child(n+3), .kpi-grid > .kpi:nth-child(n+3) { border-top: 1px solid var(--row-line) !important; }
  .kpi .label { color: var(--muted) !important; }
  .kpi .foot { color: var(--muted) !important; }
  /* seznam rezervací: víc vzduchu mezi kartami, vedlejší řádky tlumeně */
  .resv-cards .rc, .rz-karty .rc { padding: 18px 0 !important; }
  .rc .rc-name { margin: 4px 0 2px !important; }
  .rc .rc-meta, .rc .rc-comm { font-size: 12px !important; line-height: 18px !important; }
  /* rozbalení: oddech od karty a mezi tlačítky */
  .rc .rz-in { margin-top: 14px !important; padding-bottom: 6px; }
  .rc .rz-in .rz-akce { gap: 10px !important; }
}

/* Tereza 24. 10. („pořád jsou ty tlačítka obrovská“): rozbalení na telefonu stejně jemné jako na PC – 34 px, ikona 13 px */
@media (max-width: 760px) {
  .rc .rz-in .rz-akce { gap: 8px !important; }
  .rc .rz-in .rz-akce > .dt-btn, .rc .rz-in .rz-akce > a.dt-btn { height: 34px !important; min-height: 34px !important; font-size: 12.5px !important; padding: 0 10px !important; gap: 6px !important; }
  .rc .rz-in .rz-akce > .dt-btn svg { width: 13px !important; height: 13px !important; }
  .rc .rz-in .rz-akce > [data-k="cancel"]:not(.on) { height: 32px !important; min-height: 32px !important; }
}

/* Tereza 24. 10. („změnil jsi typ, kterým jsme to psali“): písmo vráceno – rozbalení stejné jako řádek pod sloupci (12,5 px, popisky 11,5 px tlumeně), KPI na podstránkách zase serif */
.rz-in .rv-tel-r > * { font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.rz-in .rv-tel .rz-stit { font-size: 11.5px; color: var(--muted); margin-right: 4px; }
/* zabalený řádek: vykřičník u služby, když má klient alergii / zdraví nebo je u rezervace poznámka – v nápovědě co */
.rz-pozor { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; font-size: 10.5px; font-weight: 600; line-height: 1; vertical-align: 1px; color: var(--cancel); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 55%, transparent); cursor: help; }
.rz-pozor.jen-pozn { color: var(--muted); box-shadow: inset 0 0 0 1px var(--row-line); }

/* Tereza 24. 10. („na telefonu mnohem mnohem decentnější a menší“): čísla nahoře – malý tichý přehled, ne čtyři velké karty */
@media (max-width: 760px) {
  .kpis > .kpi, .kpi-row > .kpi, .kpi-grid > .kpi { padding: 10px 12px 11px !important; min-height: 0 !important; }
  .kpi .label { font-size: 11px !important; line-height: 15px !important; }
  .kpi .val { font-size: 18px !important; height: auto !important; margin: 4px 0 2px !important; line-height: 1.15 !important; }
  .kpi .delta, .kpi .foot { font-size: 11px !important; line-height: 15px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi .delta svg { width: 11px !important; height: 11px !important; }
  .kpi .spark, .kpi canvas, .kpi svg.spark { display: none !important; }
  .kpis, .kpi-row, .kpi-grid { margin-bottom: 14px !important; }
}
@media (max-width: 760px) {
  .kpi { display: flex !important; flex-direction: column; justify-content: flex-start !important; gap: 2px; }
  .kpi .label { margin: 0 !important; }
  .kpi .val { margin: 2px 0 0 !important; }
  .kpi .delta { display: flex; align-items: center; gap: 4px; }
  .kpi .delta > *:not(svg):not(:first-of-type), .kpi .delta .vs, .kpi .delta .proti { display: none !important; }   /* jen „+12 %“, bez „proti minulému týdnu“ */
}
@media (max-width: 760px) { .kpi .delta .ctx { display: none !important; } }
@media (max-width: 760px) {
  .kpi .label { height: auto !important; min-height: 0 !important; padding: 0 !important; }
  .kpi .val { padding: 0 !important; min-height: 0 !important; }
  .kpis > .kpi:not(:first-child):not(:nth-child(3)) { border-left: 1px solid var(--row-line) !important; }
  .kpis > .kpi:nth-child(odd) { border-right: 0 !important; }
}

/* Tereza 24. 10.: „Další v 17:00 · Král“ je hloupost (kdo je další, ukazuje seznam) – pryč všude */
#nextUp { display: none !important; }
/* telefon: čísla nahoře na jeden–dva řádky – jen popisek a číslo, bez trendu; zaměstnanci (recepce) mají jeden řádek, terapeut žádný */
@media (max-width: 760px) {
  .kpis > .kpi, .kpi-row > .kpi, .kpi-grid > .kpi { padding: 8px 12px !important; flex-direction: row !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; }
  .kpi .delta, .kpi .foot { display: none !important; }
  .kpi .label { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi .lbl-kdy { display: none !important; }
  .kpi .val { font-size: 14px !important; margin: 0 !important; white-space: nowrap; font-family: inherit !important; font-weight: 500 !important; background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ink) !important; }
  .kpis, .kpi-row, .kpi-grid { margin-bottom: 12px !important; }
}
@media (max-width: 760px) {
  .kpis > .kpi { align-items: center !important; }
  .kpis > .kpi:nth-child(n+3) .lbl-kdy { display: inline !important; }
  .kpis > .kpi:nth-child(n+3) .lbl-tecka { display: none; }
  body:not(.role-recepce) .kpis > .kpi:nth-child(-n+2) .label::after { content: " dnes"; }
}
@media (max-width: 760px) {   /* popisek nad číslem, nic se neuseká, všechno na jedné levé linii */
  .kpis > .kpi, .kpi-row > .kpi, .kpi-grid > .kpi { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 1px !important; padding: 9px 14px 10px !important; }
  .kpi .label { overflow: visible; }
  .kpi .val { font-size: 15px !important; line-height: 20px !important; }
}

.rez-dnes { display: none; }
@media (max-width: 760px) { #resvTitle .rez-dnes { display: none !important; } }
/* Tereza 24. 10. („pořád ohromné místo za textem tlačítka – jen kolem písma“): tlačítka jen tak široká jako text, v řadě za sebou */
@media (max-width: 760px) {   /* 25. 10.: tento řádek chyběl – pravidla pro telefon (mj. „čísla nahoře bez linek“) platila i na PC, v noci zmizely obrysy dlaždic */
  .rc .rz-in .rz-akce { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .rc .rz-in .rz-akce > .dt-btn, .rc .rz-in .rz-akce > a.dt-btn { width: auto !important; flex: 0 0 auto !important; padding: 0 12px !important; }
  .rc .rz-in .rz-akce > [data-k="cancel"]:not(.on) { flex: 0 0 auto !important; justify-content: flex-start !important; padding: 0 4px !important; }
  .rc .rz-in .rz-akce > .rz-sub, .rc .rz-in .rz-akce > .rz-zbozi { flex: 1 1 100% !important; }
  /* čísla nahoře: bez linek */
  .kpis > .kpi.kpi.kpi { border: 0 !important; }
  #resvTitle { white-space: nowrap; }
}
/* přepínač dne nad seznamem rezervací – jen telefon */
.den-vyber { display: none; }
@media (max-width: 760px) {
  .den-vyber { display: flex; gap: 6px; flex-basis: 100%; order: 5; margin: 10px 0 2px; }
  .den-vyber button { border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 999px; min-height: 32px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--row-line); }
  .den-vyber button span { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .den-vyber button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
  .rez-dnes { display: none !important; }
  .resv-more.den-skryj { display: none !important; }
}
/* Tereza 24. 10. („dej to dolů pod ty rezervace“): na telefonu jsou hlavní rezervace – čísla až pod seznamem */
@media (max-width: 760px) {
  body:not([data-aktivni]) .content { display: flex; flex-direction: column; }
  body:not([data-aktivni]) .content > .kpis { order: 2; margin: 0 0 18px !important; padding: 0 4px !important; }
  body:not([data-aktivni]) .content > .card.flush { order: 1; }
  body:not([data-aktivni]) .content > .card.flush ~ * { order: 3; }
}
@media (max-width: 760px) {
  .den-vyber { margin: 2px 0 6px; gap: 4px; }
  .den-vyber button { min-height: 28px; padding: 2px 10px; font-size: 12px; box-shadow: none; }
  .den-vyber button[aria-pressed="true"] { box-shadow: none; background: color-mix(in oklab, var(--accent) 9%, transparent); color: var(--ink); }
}
/* Tereza 24. 10. („byla řeč o těch 4 kartách, jak jsme teď upravovali ty nahoře“): pod rezervacemi zase všechny čtyři v jednom bloku 2 × 2 */
@media (max-width: 760px) {
  .kpis > .kpi.kpi.kpi:nth-child(odd) { border-right: 1px solid var(--row-line) !important; }
  .kpis > .kpi.kpi.kpi:nth-child(n+3) { border-top: 1px solid var(--row-line) !important; }
  .kpis > .kpi:not(:first-child):not(:nth-child(3)) { border-left: 0 !important; }
}
@media (max-width: 760px) {   /* Vše · Dnes · Zítra nahoře hned pod nadpisem, tiše */
  .den-vyber { order: 0 !important; flex-basis: auto !important; margin: -4px 0 8px !important; gap: 2px !important; }
  .den-vyber button { min-height: 30px; padding: 0 10px; font-size: 12px; background: none; box-shadow: none !important; color: var(--muted); }
  .den-vyber button span { margin-left: 4px; }
  .den-vyber button[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 8%, transparent) !important; color: var(--ink); }
}
/* Tereza 24. 10. („toto má mít vzhled jako na počítači“): pod rezervacemi čtyři karty jako na PC – popisek s datem, serifové číslo, trend */
@media (max-width: 760px) {
  body .content > .kpis { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
  body .content > .kpis > .kpi.kpi.kpi { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; padding: 14px 14px 13px !important; border: 0 !important; background: var(--surface) !important; border-radius: 14px !important; box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 6%, transparent), inset 0 0 0 1px var(--hairline) !important; }
  body .content > .kpis .kpi .label::after { content: none !important; }
  body .content > .kpis .kpi .lbl-kdy, body .content > .kpis .kpi .lbl-tecka { display: inline !important; }
  body .content > .kpis .kpi .lbl-den { display: none; }
  body .content > .kpis .kpi .label { font-size: 11.5px !important; color: var(--ink-2) !important; white-space: nowrap; }
  body .content > .kpis .kpi .val { font-family: "Newsreader", "Iowan Old Style", Georgia, serif !important; font-weight: 400 !important; font-size: 24px !important; line-height: 30px !important; margin: 8px 0 4px !important; color: var(--ink) !important; }
  body .content > .kpis .kpi .delta { display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11.5px !important; line-height: 16px !important; }
  body .content > .kpis .kpi .delta .ctx { display: block !important; flex-basis: 100%; color: var(--muted); }
  body .content > .kpis .kpi .foot:not(#nextUp) { display: block !important; font-size: 11.5px !important; }
}
/* čísla v hlavičce karet (jen telefon) – na telefonu místo čtyř karet čísel */
.karta-cisla { display: none; }
@media (max-width: 760px) {
  body:not([data-aktivni]) .content > .kpis { display: none !important; }
  .karta-cisla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--row-line); }
  .kc-pol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .kc-pop { font-size: 11.5px; color: var(--ink-2); }
  .kc-val { font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: 22px; line-height: 28px; color: var(--ink); }
  .kc-d { display: flex; align-items: center; gap: 4px; font-size: 11.5px; }
  .kc-d svg { width: 12px; height: 12px; }
  .kc-d.up { color: var(--ok, #2e7d4f); }
}
/* vyvážení čísel v hlavičce karet (Tereza: „ať je to estetické, ne že jsi jen plácnul text do karty“):
   jedna klidná řada pod nadpisem karty – dvě stejně široké buňky s jemnou svislou linkou, popisek drobně, číslo serif, trend malým tónovaným štítkem vedle čísla */
@media (max-width: 760px) {
  .karta-cisla { grid-template-columns: 1fr 1fr; gap: 0; margin: 12px 0 16px; padding: 0; border: 0; }
  .karta-cisla .kc-pol { padding: 2px 0 2px 0; }
  .karta-cisla .kc-pol + .kc-pol { padding-left: 16px; border-left: 1px solid var(--row-line); }
  .kc-pop { font-size: 11px; letter-spacing: .01em; color: var(--muted); }
  .kc-radek { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
  .kc-val { font-size: 22px; line-height: 26px; letter-spacing: -.01em; }
  .kc-d { font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 999px; color: var(--muted); background: color-mix(in oklab, var(--row-line) 45%, transparent); }
  .kc-d.up { color: color-mix(in oklab, var(--ok, #2e7d4f) 85%, var(--ink)); background: color-mix(in oklab, var(--ok, #2e7d4f) 10%, transparent); }
  .kc-d.down { color: var(--cancel); background: color-mix(in oklab, var(--cancel) 9%, transparent); }
}
@media (max-width: 760px) { .kc-radek { flex-direction: column; align-items: flex-start; gap: 6px; } .karta-cisla { margin-bottom: 4px; } }
/* platba v rozbalení (Dokončit i Prodat) – stejně malá tlačítka jako ostatní, ne přes celou šířku */
.rz-in .rz-sub .dt-btn { width: auto !important; flex: 0 0 auto !important; grid-column: auto !important; }
@media (max-width: 760px) { .rz-in .rz-sub { display: flex !important; flex-wrap: wrap; gap: 8px; } .rz-in .rz-sub .rz-sub-lbl { flex-basis: 100%; } .rz-in .rz-sub .dt-btn { height: 34px !important; min-height: 34px !important; font-size: 12.5px !important; padding: 0 12px !important; } }
/* Tereza 24. 10.: vykřičník bez kroužku, hned vedle jména klienta */
.rz-pozor, .rz-pozor.jen-pozn { width: auto; height: auto; margin-left: 5px; border-radius: 0; box-shadow: none !important; font-size: 13px; font-weight: 600; vertical-align: 0; }
/* Tereza 24. 10. („skok jak prase mezi permanentkou a zdravím“): rozbalení navazuje na kartu stejným rytmem jako její řádky */
@media (max-width: 760px) {
  .rc .rz-in { margin-top: 10px !important; padding-top: 0 !important; }
  .rc .rz-in .rz-info, .rz-in .rz-info:has(.rv-tel) { margin: 0 0 14px !important; }
}
/* Tereza 24. 10. („vidíš, že to není hezké“): čísla v kartě jako dva souměrné sloupce nad dvěma grafy – na střed, stejná výška, trend na řádku čísla, oddělené od grafu jemnou linkou */
@media (max-width: 760px) {
  .karta-cisla { grid-template-columns: 1fr 1fr; gap: 0; margin: 14px 0 18px !important; padding: 0 0 16px; border-bottom: 1px solid var(--row-line); }
  .karta-cisla .kc-pol, .karta-cisla .kc-pol + .kc-pol { align-items: center; text-align: center; padding: 0; border: 0; }
  .karta-cisla .kc-radek { flex-direction: row !important; align-items: baseline !important; justify-content: center; gap: 6px; margin-top: 4px; }
  .karta-cisla .kc-pop { font-size: 11.5px; }
  .karta-cisla .kc-val { font-size: 26px; line-height: 30px; }
  .karta-cisla .kc-d { padding: 0; background: none !important; font-size: 11.5px; }
}
@media (max-width: 760px) { .karta-cisla .kc-radek { flex-direction: column !important; align-items: center !important; gap: 2px; } .karta-cisla .kc-val { font-size: 24px; } .karta-cisla .kc-pol:not(:has(.kc-d)) .kc-radek::after { content: "\00a0"; font-size: 11.5px; line-height: 16px; } }

/* ===== 24. 10. noc · KPI na podstránkách: 2 řádky (popisek / číslo + dovětek), všechna čísla stejná velikost a účaří ===== */
/* Tereza: „hromada bílé zbytečně, vejde se to na dva řádky“ + vzor: velká čísla v řadě stejná, hlavní karta jen tónem */
@media (min-width: 641px) {
  body[data-aktivni] .kpi { flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: flex-start; justify-content: flex-start;
    column-gap: 12px; row-gap: 4px; padding-bottom: var(--pad-y); }
  body[data-aktivni] .kpi .label { flex: 0 0 100%; margin-bottom: 8px; }
  body[data-aktivni] .kpi .val, body[data-aktivni] .kpi.primary .val { font-size: 30px; height: auto; margin: 0; line-height: 1.1; letter-spacing: -.012em; }
  body[data-aktivni] .kpi .val::before { content: none; }
  body[data-aktivni] .kpi .delta, body[data-aktivni] .kpi .foot { display: inline-flex; align-items: baseline; height: auto; align-self: baseline; min-width: 0; }
}
@media (min-width: 641px) {
  body[data-aktivni] .kpis.kpi-pod .kpi .delta, body[data-aktivni] .kpis.kpi-pod .kpi .foot { flex-basis: 100%; }
}

/* 24. 10. noc: poznámka pod seznamem – na 14 stránkách bez stylu (14 px tmavě = víc než tabulka); jednotně jako ve Službách */
.pod-seznamem { margin: 18px 0 0; padding: 0; font-size: 11.5px; line-height: 18px; color: var(--muted); }
.pod-seznamem a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 2px; }

/* 24. 10. noc · tabulky podstránek jako vzor nástěnky: jméno tmavě, VŠECHNY ostatní údaje stejně (11,5 px tlumeně, při najetí ink-2)
   dřív: 3./4. sloupec a sloupce bez třídy 12,5 px tmavě vedle .t-vedl 11,5 px tlumeně → cena/sleva slabší než vedlejší text (pravidlo 1) */
body[data-aktivni] .tbl-scroll table.tbl td:not(.t-name):not(.t-end):not(.t-time):not(.t-perm):not(:has(.pill)) { font-size: 11.5px; color: var(--muted); }
body[data-aktivni] .tbl-scroll table.tbl tbody tr:hover td:not(.t-name):not(.t-end):not(.t-time):not(.t-perm):not(:has(.pill)) { color: var(--ink-2); }

/* 24. 10. noc · jedna výška řádku tabulky jako vzor nástěnky (57 px); Kampaně, Šablony notifikací a Seznam v kalendáři měly 44 px */
@media (min-width: 761px) { body[data-aktivni] .tbl-scroll table.tbl tbody tr:not(.rz-in):not([class*="rozb"]) { height: 57px; } }

/* 24. 10. noc · pata formuláře/detailu: nebezpečná akce dole pod obsahem (ne v hlavičce stránky) – sdílený základ */
.form-pata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.form-pata[hidden] { display: none; }

/* 24. 10. noc · lišta nad seznamem: hledání, výběr i Filtr jedna výška 32 px (bylo 34 / 42 / 32) */
@media (min-width: 641px) {
  body[data-aktivni] .hledani { height: 32px; }
  body[data-aktivni] :has(> .hledani) select.pole, body[data-aktivni] :has(> .hledani) > * > select.pole { height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: 11.5px; border-radius: 10px; }
}

/* 24. 10. noc · nadpis sekce (.sect h2) sdíleně jako text sekce – bez stylu měl na Šablonách notifikací výchozích 21 px tučně (víc než nadpis stránky) */
.sect h2 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }

/* 24. 10. noc · karta v kontejneru s mezerou (flex/grid gap) nemá navíc vlastní spodní okraj – jinak 32 px místo 16 px mezi kartami
   (Sloučení klientů, Nový terapeut, Úprava šablony notifikace) */
body[data-aktivni] .content :is(.slo, .nt-sloupec, .km-sloupec) > .card { margin-bottom: 0; }
body[data-aktivni] .content > div[style*="flex"] > .card { margin-bottom: 0; }   /* jen kontejner s flex+gap (Nový terapeut) */

/* 24. 10. noc · počet v záložce = tichý text (podbarvený .pocet jen tam, kde čeká práce: K vyřízení, Ke schválení, Ke kontrole, Čekající) */
.zal-kolik { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.zal-kolik[hidden] { display: none; }

/* 24. 10. noc · nápovědy, úvody a poznámky se lámou bez osiřelého slova na posledním řádku („v seznamu.“, „a pomlčka.“) */
body[data-aktivni] :is(.napoveda, .str-pozn, .str-uvod, .pod-seznamem, .card-sub, .prazdno-t, p) { text-wrap: pretty; }

/* 24. 10. noc · PC: tlačítka v Souhrnu a v kartách jen kolem textu (pravidlo 4 – žádné obří hlavní tlačítko, hlavní se liší barvou);
   telefon řeší vlastní pravidla (palec) – beze změny */
@media (min-width: 641px) {
  body[data-aktivni] .souhrn-akce .dt-btn, body[data-aktivni] #kf .souhrn-akce .dt-btn { flex: 0 0 auto !important; width: auto; }
  body[data-aktivni] .card > .dt-btn:only-child, body[data-aktivni] .card .dt-btn[style*="width:100%"] { width: auto; }
}
@media (min-width: 641px) { body[data-aktivni] #heslo.dt-btn { width: auto; align-self: flex-start; } }

/* 24. 10. noc · PC: tlačítka v pásu detailu a úpravy rezervace jako v rozbalení nástěnky – 34 px, okraj 12 px, šířka podle textu (bylo 42 px / 16 px / min. 112 px) */
@media (min-width: 641px) {
  body[data-aktivni] #blok .rz-akce > .dt-btn:not(.rz-zavrit), body[data-aktivni] #blok .rz-sub .dt-btn { height: 34px; min-height: 34px; padding: 0 12px; min-width: 0; }
  body[data-aktivni] #blok .rz-akce > .dt-btn.danger:not(.on) { padding: 0 6px; }
}

/* 24. 10. noc · nadpis karty = název záložky → schovat (zaklad.js); prázdná hlava karty pryč */
body[data-aktivni] .card-h.h-jako-zalozka { display: none; }
body[data-aktivni] .card-head.jen-zalozka { display: none; }

/* 24. 10. noc · PC podstránky: tlačítko jen kolem textu – bez minimální šířky 112 px („Uložit“ mělo 33 px textu ve 112 px); Stornovat drží svou šířku (S10) */
@media (min-width: 641px) { body[data-aktivni] .dt-btn:not([data-k="cancel"]) { min-width: 0; } }

/* 24. 10. noc · kolo 2 (designér + puntičkář, změřeno) */
@media (min-width: 641px) { body[data-aktivni] .kpis.kk-cisla .kpi.primary .val { font-size: 30px; letter-spacing: -.012em; } } /* karta klienta: první KPI 26 → 30 jako zbytek řady */
body[data-aktivni] .pill.kl-aktivni { color: var(--ok); }                       /* „Aktivní“ na Klientech zeleně jako všude */
body[data-aktivni] :is(.str-uvod, .fu-uvod, .str-pozn) { font-size: 12.5px; line-height: 1.55; color: var(--muted); } /* úvod pod nadpisem jedna velikost (bylo 11,5 / 13 / 13) */
body[data-aktivni] #kf .souhrn-akce .dt-btn.tichy.kf-zrusit-sam { margin-left: 0; } /* Zrušit se nedotýká Uložit */
body[data-aktivni] :is(.uziv-veta, .wg-navod), body[data-aktivni] .napoveda { font-size: 11.5px; color: var(--muted); }   /* pomocná věta všude stejně (bylo 12,5 ink-2 na Roli, Uživateli, Widgetu) */
body[data-aktivni] .uziv-veta { max-width: none; }
body[data-aktivni] .nast-h { font-size: 11.5px; font-weight: 400; letter-spacing: -.01em; }   /* nadpis karty v Nastavení jako .card-h a vzor nástěnky (bylo 12,5 / 450) */
body[data-aktivni] .souhrn-radky { grid-template-columns: minmax(78px, max-content) minmax(0, 1fr); column-gap: 12px; }   /* Souhrn všude stejně: popisek 78 px, hodnota vlevo (Služby a Místnost měly hodnotu vpravo) */
body[data-aktivni] .souhrn-radky dd { text-align: start; }
body[data-aktivni] .sect h2 { font-size: 12.5px; font-weight: 500; }   /* nadpis sekce (Masáže, pobočka…) pod nadpisem stránky 14 px – ne stejně velký */
body[data-aktivni] td .pill.ticha { padding-left: 8px; }   /* stav s tečkou v tabulce jako vzor nástěnky (tečka 8 px od kraje štítku), ne natvrdo na hraně */
/* stav v nadpisu stránky (detail/úprava rezervace) má barvu stavu jako v tabulce – nadpis ji přebíjel na ink-2 */
body[data-aktivni] .str-nadpis .pill.progress { color: color-mix(in oklab, var(--progress) 78%, var(--ink)); }
body[data-aktivni] .str-nadpis .pill.done { color: var(--ok); }
body[data-aktivni] .str-nadpis .pill.cancel { color: var(--cancel); }
/* telefon a e-mail klienta všude stejně: barva okolního textu, podtržení jen při najetí (pravidlo 5); dřív 3 podoby (seznam / karta / pás) */
body[data-aktivni] .content a:is([href^="tel:"], [href^="mailto:"]) { color: inherit; text-decoration: none; }
@media (hover: hover) { body[data-aktivni] .content a:is([href^="tel:"], [href^="mailto:"]):hover { text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); text-underline-offset: 3px; } }
body[data-aktivni] thead .th-tridit { display: inline-flex; align-items: center; gap: 5px; }   /* šipka řazení 5 px od textu všude (na Týmu, Štítcích, Polích byla nalepená) */
body[data-aktivni] .strankovani .vyber.maly > select.pole { box-shadow: none; color: var(--muted); }   /* „N na stránku“ všude tiché jako u Klientů */
/* řádek nastavení s přepínačem: přepínač PŘED textem jako na 9 dalších stránkách (Zpětná vazba, Follow-up, formuláře) – ne 900 px vpravo od svého textu */
body[data-aktivni] .nast-radek:has(> .prepinac) { justify-content: flex-start; gap: 12px; }
body[data-aktivni] .nast-radek > .prepinac { order: -1; flex: none; }
/* první sekce nastavení v kartě: nadpis 11 px od horní hrany jako .card-h ve vedlejších kartách (bylo 21 px → skok mezi kartami vedle sebe) */
body[data-aktivni] .card > .nast-sekce:first-child { padding-top: 0; margin-top: -6px; }
/* „Smazat …“ dole pod obsahem: tichý červený text na ose hrany karty (x 84 = nadpisy sekcí, poznámky) – dřív 2 odsazení (x 90 / x 100) */
body[data-aktivni] .form-pata > .dt-btn.danger { padding: 0 6px; margin-left: -6px; min-width: 0; box-shadow: none; background: transparent; }
/* písmo jen ze stupnice 11,5 / 12,5 / 14 (kolo 3, puntičkář) */
body[data-aktivni] .sl-kat-h { font-size: 11.5px; }
body[data-aktivni] .nt-kdy { font-size: 12.5px; }
body[data-aktivni] .nt-cip { font-size: 12.5px; }
body[data-aktivni] .slo-kroky { font-size: 11.5px; }
body[data-aktivni] .slo-kdo { font-size: 12.5px; }
body[data-aktivni] .slo-kdo b, body[data-aktivni] .slo-kdo strong { font-size: 12.5px; font-weight: 500; }
body.ap .ap-alt, body.ap .ap-alt .odkaz { font-size: 12.5px; }   /* přihlášení: „Salon ještě nemáte?“ ze stupnice (bylo 13) */
#fBarvaVzorek[style*="transparent"] { box-shadow: inset 0 0 0 1px var(--hairline); outline: 1px dashed color-mix(in oklab, var(--muted) 60%, transparent); outline-offset: -3px; }   /* barva zatím nevybraná = čárkovaný vzorník, ne bílý čtverec */
/* úvod pod nadpisem 12,5 px jen hned pod hlavičkou stránky; poznámka jinde (např. pod kartami na Pozvat uživatele) zůstává 11,5 */
body[data-aktivni] :is(.str-uvod, .fu-uvod, .str-pozn):not(.str-hlava + *) { font-size: 11.5px; }

/* ===== 24. 10. noc · TELEFON ===== */
/* lišta nad seznamem: prázdné štítky a mezera se na telefonu zalomily na začátek 2. řádku → počet „15 místností · 3 pobočky“ plaval 16 px od hrany.
   Teď: počet na hraně karet, Vybrat + Filtr vpravo na stejném účaří (Tereza: „ten řádek plave“) */
@media (max-width: 640px) {
  body[data-aktivni] .nastroje .stitky:empty, body[data-aktivni] .nastroje .mezera { display: none; }
  body[data-aktivni] .nastroje .nastroje-souhrn { margin-right: auto; }
  body[data-aktivni] .nastroje { align-items: center; }
}
/* záložky terapeuta na telefonu jako všude (Klient, Rezervace, Nastavení, Uživatelé): jeden řádek s posunem do strany, ne mřížka na 2 řádky */
@media (max-width: 760px) {
  body[data-aktivni] .zalozky.tm-zal { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0 22px; box-shadow: inset 0 -1px 0 var(--row-line); }
  body[data-aktivni] .zalozky.tm-zal > * { flex: none; box-shadow: none; }
  body[data-aktivni] .zalozky.tm-zal > [aria-selected="true"] { box-shadow: inset 0 -1.5px 0 var(--rz-akt); }
  html[data-elem="vzduch"] body[data-aktivni] .zalozky.tm-zal > [aria-selected="true"] { box-shadow: inset 0 -1.5px 0 var(--ink); }
}
/* detail a úprava rezervace na telefonu jako rozbalení nástěnky (Tereza: „tlačítka obrovská – zmenšit, vzhledem k textu“):
   34 px, šířka podle textu, za sebou; hlavní (Dorazil) jen barvou, ne 48 px přes celou šířku */
@media (max-width: 760px) {
  body[data-aktivni] #blok .rz-akce { display: flex !important; flex-wrap: wrap; gap: 8px !important; align-items: center; }
  body[data-aktivni] #blok .rz-akce > .dt-btn, body[data-aktivni] #blok .rz-akce > a.dt-btn { height: 34px !important; min-height: 34px !important; width: auto !important; flex: 0 0 auto !important; grid-column: auto !important; order: 0 !important; font-size: 12.5px !important; padding: 0 10px !important; gap: 6px !important; min-width: 0 !important; }
  body[data-aktivni] #blok .rz-akce > .dt-btn svg { width: 13px !important; height: 13px !important; }
  body[data-aktivni] #blok .rz-akce > .dt-btn.danger:not(.on) { padding: 0 6px !important; box-shadow: none !important; }
  body[data-aktivni] #blok .rz-akce > .rz-sub { flex: 1 1 100%; order: 99 !important; }
}
/* kolo 3 (komponenty) */
/* šipka řazení nezabírá místo (jako Klienti a Permanentky) – text hlavičky stojí na ose sloupce, ne 8 px vlevo */
body[data-aktivni] thead .th-tridit { position: relative; }
body[data-aktivni] thead .th-tridit > svg:not(.inf) { position: absolute; left: calc(100% + 5px); top: 0; bottom: 0; margin: auto 0; }
/* sloupec „Kdy“ (datum + čas) v protokolech jako ostatní vedlejší údaje 11,5 px (oprava 30 platí jen pro čistý čas) */
body:is([data-aktivni="activity-logs"], [data-aktivni="communication-logs"]) .tbl-scroll table.tbl td.t-time { font-size: 11.5px; }
/* Souhrn: vyplněná hodnota všude ink (Služba, Místnost měly ink-2) */
body[data-aktivni] .souhrn-radky dd:not(.je-prazdne):not(.kf-tise) { color: var(--ink); }
/* Nový klient / Úprava klienta na telefonu: Souhrn s hlavním tlačítkem až na konci formuláře jako u rezervace, série, hlídání, poukazu, služby (byl druhý ze 7) */
@media (max-width: 760px) { body[data-aktivni] .rez-sloupec > .rez-souhrn { order: 99; } }
/* lišta nad seznamem na telefonu – JEDEN vzor na všech stránkách: hledání přes celou šířku, pod ním jedna řada malých prvků podle textu
   (počet vlevo, tlačítka a řazení 34 px vpravo); dřív Klienti mřížka 4 tlačítek 129×32 + řazení 266×42, jinde řazení 191×42 */
@media (max-width: 640px) {
  body[data-aktivni] .nastroje:not([hidden]):has(.hledani, .dt-btn:not([hidden]), select) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; grid-template-columns: none !important; }
  body[data-aktivni] .nastroje[hidden] { display: none !important; }
  body[data-aktivni] .nastroje .hledani { flex: 1 1 100% !important; width: 100% !important; max-width: none; }
  body[data-aktivni] .nastroje .dt-btn { flex: 0 0 auto !important; width: auto !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; grid-column: auto !important; }
  body[data-aktivni] :is(.nastroje-bezne, .nastroje) > select.pole, body[data-aktivni] :is(.nastroje-bezne, .nastroje) > .vyber > select.pole { flex: 0 1 auto !important; width: auto !important; height: 40px !important; min-height: 40px !important; font-size: 12.5px !important; padding-top: 0; padding-bottom: 0; }
  body[data-aktivni] :is(.nastroje, .nastroje-bezne) > :is(.vyber, .razeni) { flex: 0 1 auto !important; width: auto !important; }
}
/* tlačítka formulářů a karet na telefonu jen kolem textu, 40 px (dotykový cíl), ne přes celou šířku – Tereza: „tlačítka obrovská, zmenšit vzhledem k textu“ */
@media (max-width: 640px) {
  body[data-aktivni] .content :is(.form-pata, .form-akce, .souhrn-akce, .card) > .dt-btn:not(.jen-ikona),
  body[data-aktivni] #kf .souhrn-akce .dt-btn { width: auto !important; flex: 0 0 auto !important; min-width: 0 !important; height: 40px; min-height: 40px; padding: 0 14px; }
  body[data-aktivni] .content :is(.form-pata, .form-akce, .souhrn-akce) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
}
@media (max-width: 640px) {
  body[data-aktivni] :is(.role-souhrn, .pole-rada) .dt-btn, body[data-aktivni] #heslo.dt-btn { width: auto !important; flex: 0 0 auto !important; min-width: 0 !important; height: 40px; padding: 0 14px; align-self: flex-start; }
}
@media (max-width: 640px) { body[data-aktivni] .role-souhrn > .dt-btn { justify-self: start; } }
/* telefon: stav s dlouhou stopou („Stornováno · klient včas“) se na 390 px nevešel vedle data a přetékal 25 px z karty → sklouzne pod datum (dřív jen do 380 px) */
@media (max-width: 440px) { body[data-aktivni] .rc-top { flex-wrap: wrap; row-gap: 2px; } body[data-aktivni] .rc-top .pill { max-width: 100%; white-space: normal; } }
@media (max-width: 640px) { body[data-aktivni] .kpi .foot > * + * { margin-left: .4em; } }   /* telefon: dovětek KPI je blok – „uživatel Upravit“ se slepoval bez mezery (Role) */
body[data-aktivni] .resv-cards .rc-meta .jen-tablet > .rc-sep { display: inline !important; }   /* tablet: karty z obecné tabulky (série…) „Král David · 450 Kč“, ne „Král David450 Kč“ */
@media (max-width: 640px) { body[data-aktivni] .editor-lista { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } body[data-aktivni] .editor-lista .dt-btn.maly.jen-ikona { flex: none; width: 40px; height: 40px; } }   /* editor popisu: jedna řada, ikona odkazu nezůstane sama na 2. řádku */
/* telefon: na seznamech nejdřív seznam, čísla až pod ním (pravidlo 3; jako Zpětná vazba) – Místnosti, Tým; detail terapeuta ne (čísla = souhrn profilu) */
@media (max-width: 640px) {
  body[data-aktivni] .content:has(> .kpis:not(.role-karty, .fa-karty) + :is(.nastroje, .card.flush)) { display: flex; flex-direction: column; }
  body[data-aktivni] .content:has(> .kpis:not(.role-karty, .fa-karty) + :is(.nastroje, .card.flush)) > .kpis { order: 1; margin: 16px 0 0 !important; }
  body[data-aktivni] .content:has(> .kpis:not(.role-karty, .fa-karty) + :is(.nastroje, .card.flush)) > .pod-seznamem { order: 2; }
}

/* telefon: tlačítka 34 px v pásu detailu/úpravy rezervace mají neviditelný terč 40 px (jako rozbalení nástěnky) */
@media (max-width: 760px) {
  body[data-aktivni] #blok .rz-akce > .dt-btn { position: relative; }
  body[data-aktivni] #blok .rz-akce > .dt-btn::after { content: ""; position: absolute; inset: -4px -2px; }
  body[data-aktivni] .nastroje .hledani { height: 40px; }
}
@media (max-width: 640px) { body[data-aktivni] .kpi .label { white-space: normal; overflow-wrap: anywhere; } }   /* telefon: popisek KPI („Dokončené návštěvy · září“) se zalomí, nepřeteče kartu */
@media (max-width: 640px) { body[data-aktivni] .kpi .label :is(a, span) { white-space: normal !important; } }
.rc-lbl-h { color: var(--muted); font-size: 11.5px; margin-right: 2px; }
/* živel Vzduch (den) na telefonu: přechod na číslech KPI se kreslil přes celý blok (černé obdélníky místo čísel – vada už před nocí) → zpět ořez do písma */
html[data-elem="vzduch"]:not([data-mode="dark"]) body[data-aktivni] .kpi .val, html[data-elem="vzduch"]:not([data-mode="dark"]) body[data-aktivni] .kpi .val small { -webkit-background-clip: text !important; background-clip: text !important; color: transparent; -webkit-text-fill-color: transparent; }
@media (max-width: 640px) { body[data-aktivni] :is(.form-akce, .form-pata, .souhrn-akce) > .dt-btn.tichy { padding: 0 6px !important; margin-left: -6px; } }   /* „Zrušit“ zalomené pod tlačítka stojí textem na jejich ose */
/* telefon: posuvné záložky na pravé hraně jemně vyblednou (24 px) – je vidět, že pokračují; dřív useknuté uprostřed slova („Vzhle…“) */
@media (max-width: 760px) {
  body[data-aktivni] .zalozky { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 16px; }
}
/* telefon: hlavička karty s přepínačem a tlačítkem (Blokace na Úpravě místnosti) se zalomí – „Nová blokace“ přetékala z obrazovky (409 px) */
@media (max-width: 640px) {
  body[data-aktivni] .card-head { flex-wrap: wrap; row-gap: 8px; }
  body[data-aktivni] .card-head-akce { flex-wrap: wrap; max-width: 100%; }
}
/* telefon: řazení v liště max. 130 px – vejde se na řádek s Vybrat a Filtr (padalo samo na 3. řádek) */
@media (max-width: 640px) { body[data-aktivni] :is(.nastroje-bezne, .nastroje) > select.pole, body[data-aktivni] :is(.nastroje-bezne, .nastroje) > .vyber > select.pole { max-width: 130px; } }
/* karta klienta na telefonu: nejdřív údaje a záložky s rezervacemi, čísla (Návštěvy, Utraceno…) až pod nimi – pravidlo 3 */
@media (max-width: 640px) {
  body[data-aktivni="clients"] .content:has(> .kpis.kk-cisla) { display: flex; flex-direction: column; }
  body[data-aktivni="clients"] .content:has(> .kpis.kk-cisla) > .kpis.kk-cisla { order: 1; margin: 16px 0 0 !important; }
}
/* neaktivní Uložit (nic se nezměnilo) všude stejně – plné s průhledností jako jinde, ne obrys (Úprava klienta) */
body[data-aktivni] #kf #ulozit.kf-ceka:disabled { opacity: .38; color: #fff; background: var(--accent-deep, var(--accent)); box-shadow: none; }
@media (max-width: 640px) {
  body[data-aktivni] .nastroje > .vyber.razeni-tel { max-width: 124px; flex: 0 1 124px !important; }
  body[data-aktivni] .nastroje > .vyber.razeni-tel > select.pole { width: 100% !important; max-width: none; }
  body[data-aktivni] .nastroje .dt-btn { padding: 0 10px !important; }
}
/* dotykové cíle ≥ 40 px (kontrola): tichý „Zrušit“ v patě/Souhrnu a odkaz v drobečcích – neviditelný terč */
@media (max-width: 760px) {
  body[data-aktivni] :is(.form-akce, .form-pata, .souhrn-akce) > .dt-btn.tichy { position: relative; }
  body[data-aktivni] :is(.form-akce, .form-pata, .souhrn-akce) > .dt-btn.tichy::after { content: ""; position: absolute; inset: -10px -2px; }
}
@media (max-width: 760px) { body[data-aktivni="employee-profiles"] .drobecky > a::after { inset: -26px -9px 0; } }   /* terč odkazu v drobečcích jako na ostatních detailech (≥ 40 px) */
/* dotykové terče (vady už před nocí): odkaz v popisku KPI (Zpětná vazba) a krátká volba přepínače pohledu (Permanentky na 320 px) */
@media (max-width: 760px), (pointer: coarse) {
  body[data-aktivni] .kpi .label .karta-odkaz { position: relative; }
  body[data-aktivni] .kpi .label .karta-odkaz::after { content: ""; position: absolute; inset: -10px -8px -20px; }   /* karta má overflow:hidden – terč roste dolů, ne nad hranu */
  body[data-aktivni] .seg button::after { inset: -9px -6px; }
}
/* telefon: popisek KPI vždy dva řádky „co“ / „kdy“ bez tečky (vzor z nejužších telefonů) – tečka už nezačíná řádek (Měsíční report, Fakturace) a všechny karty mají stejnou stavbu */
@media (max-width: 640px) {
  body[data-aktivni] .content .kpis .kpi .label .lbl-kdy { display: block !important; }
  body[data-aktivni] .content .kpis .kpi .label .lbl-tecka { display: none !important; }
}
@media (max-width: 760px), (pointer: coarse) { body[data-aktivni] .vl-nav .dt-btn.maly::after { inset: -6px 0; } }
@media (max-width: 640px) {
  body[data-aktivni] .nastroje > .vyber.razeni-tel { min-width: 0; }
  body[data-aktivni] .nastroje > .vyber.razeni-tel > select.pole { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}
@media (max-width: 760px), (pointer: coarse) { body[data-aktivni] .vl-nav .dt-btn.maly::after { inset: -6px -4px; } }
.rc-sep.sep-zlom { display: none; } .rc-sep.sep-zlom + * { display: block; }
body[data-aktivni] a[href^="tel:"] { white-space: nowrap; }   /* telefonní číslo se nikdy neláme uprostřed („+420 601 137 / 911“) */
body[data-aktivni] .card-head:has(> div > .card-h.h-jako-zalozka):not(:has(.card-sub:not(:empty))) { justify-content: flex-start; } body[data-aktivni] .card-head:has(> div > .card-h.h-jako-zalozka):not(:has(.card-sub:not(:empty))) > div:first-child { display: none; }   /* nadpis schovaný (= záložka) → přepínač stojí vlevo na jeho místě, ne osamocený vpravo nad prázdnem */
/* 24. 10. Tereza: „iniciály v kroužku jsou nepřípustné všude“ – kroužek jen s fotkou, bez fotky se neukazuje vůbec */
body[data-aktivni] :is(.tm-kruh, .ucet-avatar, .kk-av):not(:has(img)) { display: none !important; }

/* 24. 10.: skupina lišty bez dvojníka (Kalendář → Kalendář) – jen podstránky */
body[data-aktivni] .snav-item.snav-dvojnik { display: none !important; }
body[data-aktivni] .snav-group-label.je-aktivni { color: var(--accent-deep); font-weight: 500; }
body[data-aktivni] .snav-group-label .chev { cursor: pointer; }

/* D35: záložky na telefonu – zeslábnutí u okraje, kde pokračují (třídy nastavuje zaklad.js) */
@media (max-width: 760px) {
  .zalozky.vic-vpravo { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .zalozky.vic-vlevo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
  .zalozky.vic-vlevo.vic-vpravo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
}

/* D36: telefon – „ dnes“ u prvních dvou dlaždic je pravidlo nástěnky (tam jsou čísla za dnešek); na podstránkách (Zpětná vazba „Průměr · 30 dní“, Tým, Místnosti) nepravdivé → vypnout, období ukázat u všech */
@media (max-width: 760px) {
  body[data-aktivni] .kpis > .kpi .label::after { content: none !important; }
  body[data-aktivni] .kpis > .kpi .lbl-kdy { display: inline !important; }
  body[data-aktivni] .kpis > .kpi .lbl-tecka { display: none; }
}

/* D41: telefon – řazení podle obsahu (pevných 124 px usekávalo „Další termí…“); když místo nestačí, zúží se */
@media (max-width: 640px) {
  body[data-aktivni] .nastroje > .vyber.razeni-tel { max-width: 100%; flex: 0 1 auto !important; }
  body[data-aktivni] .nastroje > .vyber.razeni-tel > select.pole { width: auto !important; max-width: 100% !important; }
}

/* 25. 10. Tereza (snímek Tým na telefonu: „chybky v uspořádání a rozložení těch čísel, nepravidelné“): dlaždice na podstránkách
   na telefonu v pevném rytmu – štítek vždy 2 řádky (název / období), číslo na stejné lince v celé řadě, dovětek vždy 2 řádky */
@media (max-width: 640px) {
  body[data-aktivni] .content .kpis > .kpi { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 0 !important; padding: 12px 14px 12px !important; }
  body[data-aktivni] .content .kpis > .kpi .label { display: block; min-height: 32px !important; margin: 0 0 6px !important; line-height: 16px !important; white-space: normal !important; overflow: visible; }
  body[data-aktivni] .content .kpis > .kpi .label .lbl-kdy { display: block !important; }
  body[data-aktivni] .content .kpis > .kpi .val { height: 30px !important; margin: 0 0 6px !important; line-height: 30px; }
  body[data-aktivni] .content .kpis > .kpi .foot, body[data-aktivni] .content .kpis > .kpi .delta { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 30px; height: auto !important; line-height: 15px !important; overflow: hidden !important; white-space: normal !important; }
}

/* 25. 10. Tereza: permanentka všude „4 + 0“ bez ∞ (∞ jen v hlavičce sloupce). Karta telefonu: čísla / částka ne na vlastním řádku,
   ale vpravo na řádku služby – pod stavem, stejný sloupec jako ∞ v tabulce */
@media (max-width: 640px) {
  /* jen karty rezervací (permanentka / částka) – jiné karty (historie aktivit…) mají v .rc-comm vlastní text */
  .rc .rc-metas:has(> .rc-comm > :is(.perm-edit, .perm-b, .perm-add, .t-cena)) { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; width: 100%; }
  .rc .rc-metas:has(> .rc-comm > :is(.perm-edit, .perm-b, .perm-add, .t-cena)) > .rc-meta { flex: 1 1 auto; min-width: 0; }
  .rc .rc-metas > .rc-comm:has(> :is(.perm-edit, .perm-b, .perm-add, .t-cena)) { flex: none; margin: 0 0 0 auto !important; white-space: nowrap; }
}

/* ===== 25. 10. PANEL DETAILU (Tereza: „kde se to bude vždy otvírat… když kliknu dole, okénko se uřízne“; 4 pohledy + oponent):
   PC a tablet = panel vpravo přes celou výšku pod lištou, PŘEKRYV (tabulka se nezužuje, řádky neskáčou), vnitřní posun;
   telefon = panel zespodu, pevná výška. Zavírá ×, Esc, klik mimo; klik na jiný řádek panel jen přepíše. ===== */
body.rzp-otevreno .card:has(> .rz-panel) { transform: none !important; transition: none !important; z-index: auto !important; }   /* SKOKY: bez transition – karta pod myší by .2 s dojížděla z hover transformace a panel by se kreslil uvnitř karty */   /* jinak by fixed panel jezdil s kartou */
.rz-panel { position: fixed; z-index: 60; top: 72px; right: 0; bottom: 0; width: min(440px, 46vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-left: 1px solid var(--hairline); box-shadow: -18px 0 40px -28px rgba(46,38,28,.18);
  padding: 22px 26px 96px; animation: none; /* DROBNOSTI_FINAL6 (Tereza: „sekne se to a pak přeskočí“): panel se objeví rovnou v konečné podobě – bez vjezdu a průhlednosti (i na telefonu: délka 0) */ }
@keyframes rzpVjezd { from { transform: translateX(14px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .rz-panel { animation: none; } }
.rz-panel .rzp-x { /* OPRAVY_FINAL E4 (designér 5): dotyk 40 px, křížek na stejném místě (střed 32 px od rohu) */ position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.rz-panel .rzp-x svg { width: 15px; height: 15px; }
@media (hover: hover) { .rz-panel .rzp-x:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); } }
.rz-panel .rzp-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rz-panel .rzp-sek + .rzp-sek { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.rz-panel .rzp-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 40px; margin-bottom: 6px; }
.rz-panel .rzp-jm { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--ink); min-width: 0; }
.rz-panel .rzp-hlava .pill { flex: none; white-space: nowrap; }
.rz-panel .rzp-kdy { font-size: 14px; line-height: 20px; color: var(--ink); }
.rz-panel .rzp-kdy b { font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 8px; }
.rz-panel .rzp-kde { font-size: 12.5px; line-height: 18px; color: var(--muted); margin-top: 2px; }
.rz-panel .rz-in { margin-top: 16px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
/* v úzkém panelu vše pod sebou: údaje po jednom, tlačítka ve dvou stejných sloupcích, Storno a podčásti přes celou šířku */
body .rz-panel .rz-in .rv-tel-r { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
body .rz-panel .rz-in .rv-tel-r > *, body[data-aktivni] .rz-panel .rz-in .rv-tel-r > * { padding-top: 0 !important; max-width: none !important; }
.rz-panel .rz-in .rz-akce { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 18px !important; }
.rz-panel .rz-in .rz-akce > .dt-btn { width: 100%; min-width: 0; justify-content: center; }
.rz-panel .rz-in .rz-akce > :is([data-k="cancel"], [data-a="zavrit"], .rz-sub) { grid-column: 1 / -1; }
.rz-panel .rz-in .rz-akce > [data-a="zavrit"] { display: none !important; }   /* panel zavírá × nahoře */
.rz-panel .rz-in .rz-meta { margin-top: 18px; }
/* řádek, jehož detail je v panelu: zvýrazněný, bez linky „rozbalení“ pod sebou */
body.rzp-otevreno .rz-telo > tr.rz-otevreno > td { background: var(--row-line); }
@media (max-width: 1100px) and (min-width: 761px) { .rz-panel { width: min(400px, 62vw); } }
/* telefon: panel zespodu, pevná výška (nemění se podle obsahu), plovoucí + pod ním schované */
@media (max-width: 760px) {
  .rz-panel { z-index: 90; top: auto; left: 0; right: 0; width: auto; height: 86dvh; border-left: 0; border-top: 1px solid var(--hairline); border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 40px -24px rgba(46,38,28,.28); padding: 22px 18px calc(28px + env(safe-area-inset-bottom)); animation-name: rzpVjezdTel; }
  @keyframes rzpVjezdTel { from { transform: translateY(24px); opacity: .4; } }
  body.rzp-otevreno .cta.fab-add { opacity: 0; pointer-events: none; }
  body.rzp-otevreno::after { content: ""; position: fixed; inset: 0; z-index: 89; background: rgba(20,20,20,.18); }
}
/* lichý počet tlačítek: poslední přes celou šířku (ne osiřelé půl tlačítko) */
.rz-panel .rz-in .rz-akce > .dt-btn:not([data-k="cancel"], [data-a="zavrit"]):nth-last-child(1 of .dt-btn:not([data-k="cancel"], [data-a="zavrit"])):nth-child(odd of .dt-btn:not([data-k="cancel"], [data-a="zavrit"])) { grid-column: 1 / -1; }
/* panel má vlastní řád nad pravidly rozbalení stránek (:is(#…) = váha ID, jen tady) */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rv-tel-r { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rv-tel-r > * { padding-top: 0 !important; margin: 0 !important; grid-column: auto !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-info { margin-bottom: 0 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > * { grid-column: auto !important; order: 0 !important; }
/* podčást hned pod tlačítky (nad Stornem); důvod storna/odmítnutí až pod Stornem */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .rz-sub { order: 1 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > [data-k="cancel"] { order: 2 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .rz-sub:is(.rz-sub-storno, .rz-sub-odmitnout) { order: 3 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > :is([data-k="cancel"], .rz-sub) { grid-column: 1 / -1 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn:not([data-k="cancel"], [data-a="zavrit"]):nth-last-child(1 of .dt-btn:not([data-k="cancel"], [data-a="zavrit"])):nth-child(odd of .dt-btn:not([data-k="cancel"], [data-a="zavrit"])) { grid-column: 1 / -1 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn { height: 40px !important; min-height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rv-tel-r > :has(> .rz-stit) { margin-top: 6px !important; }
@media (max-width: 760px) { .rz-panel:is(#rzp-, .rz-panel) { height: auto; max-height: 86dvh; } }

/* 25. 10. večer Tereza: permanentka = JEDNO číslo (zbývá; vstupy navíc se přičítají). Pod nadpisem sloupce ∞ jen „4“,
   kde nadpis není (karty telefonu, kalendář, karta klienta, panel) „4 vstupy“. */
.perm-jed { display: none; }
:is(.rc, .kb-zn, .kr-pm, .kk-perm-radek, .kk-perm, .rz-panel, .kgv-b, .ktt-b) .perm-jed { display: inline; }
/* 25. 10.: tablet (karty, 641–1100 px) – řazení „Jméno ↑“ bylo 42 px vedle tlačítek 32 px a hledání 30 px; jedna výška lišty */
@media (min-width: 641px) and (max-width: 1100px) {
  body[data-aktivni] .nastroje > .vyber.razeni-tel > select.pole { height: 32px !important; min-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 30px; }
  body[data-aktivni] .nastroje > .vyber.razeni-tel { height: 32px; align-self: center; }
}
/* 25. 10. (ESTETIKA_PRAVIDLA §5 „podtržení jen u skutečných odkazů a jen při najetí“; kontrola kolo 1 – trvale podtržené odkazy v textu):
   odkaz v textu = barva živlu bez podtržení, podtržení až při najetí */
.odkaz { color: var(--accent-deep); text-decoration: none; }
@media (hover: hover) { .odkaz:hover { text-decoration: underline; text-decoration-color: currentColor; } }
html[data-elem="vzduch"] .odkaz { color: var(--ink); font-weight: 500; }

/* ===== 25. 10. opravy z nezávislé kontroly kola 1 (společné) ===== */
/* karta se seznamem nebo formulářem se při najetí myší nezvedá – celá tabulka poskočila o 1 px (KATALOG #3, #18) */
body[data-aktivni] .card:is(:has(table, .rz-karty, form, .form, .rz-in)):hover { transform: none; }
/* (hledání: rámeček label.hledani má 32 / 40 px jako tlačítka – kontrola měřila vnitřní input, nález neplatí) */
/* telefon: „Smazat“ ve formuláři v řádku nezůstane samo na dalším řádku – stojí vpravo vedle Uložit / Zrušit */
@media (max-width: 640px) {
  body[data-aktivni] .form-akce > .mezera { display: none; }
  body[data-aktivni] .form-akce > .dt-btn.danger:last-child { margin-left: auto; }
}
/* karta „Nový …“ nad seznamem: obsah na stejné ose jako text řádků tabulky pod ní (18 → 22 px; dřív 103 × 107 px) */
@media (min-width: 761px) { body[data-aktivni] .card:has(> div > .rz-forma) { padding-left: 22px; padding-right: 22px; } }
/* rozbalení na telefonu a tabletu (karty) mimo rezervace: tlačítka ve dvou stejně širokých sloupcích, nebezpečné přes celou šířku,
   „Zavřít“ jen na PC (na kartě zavírá ťuknutí na kartu) – dřív nestejné šířky a osiřelé „Zavřít“ na 768 px */
@media (max-width: 640px) {
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in .rz-akce:has(> .dt-btn ~ .dt-btn ~ .dt-btn) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in .rz-akce > .dt-btn { width: 100%; min-width: 0; justify-content: center; margin: 0 !important; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in .rz-akce > .rz-sub { grid-column: 1 / -1; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in .rz-akce > .rz-zavrit { display: none !important; }
}
/* odkazy v údajích rozbalení (Profil terapeuta, klient…) – jako odkaz v textu: barva živlu, podtržení jen při najetí (ESTETIKA §5) */
body[data-aktivni] .rz-meta a:not(.dt-btn) { color: var(--accent-deep); text-decoration: none; }
@media (hover: hover) { body[data-aktivni] .rz-meta a:not(.dt-btn):hover { text-decoration: underline; text-underline-offset: 3px; } }
html[data-elem="vzduch"] body[data-aktivni] .rz-meta a:not(.dt-btn) { color: var(--ink); font-weight: 500; }
/* údaje v kartě na tabletu: řádkování „normal“ (13,8 px) → 16 px, jako ostatní dvouřádkové údaje (KATALOG #20) */
@media (min-width: 641px) and (max-width: 1100px) { body[data-aktivni] .rc .rc-meta, body[data-aktivni] .rc .rc-meta > * { line-height: 16px; } }
.rc-par { white-space: normal; }
/* volba a přepínač s víceřádkovým popisem: kolečko / přepínač u PRVNÍHO řádku popisku, ne uprostřed bloku (kontrola kola 1) */
body[data-aktivni] .volba:has(small, .volba-t, p) { align-items: flex-start; }
body[data-aktivni] .volba:has(small, .volba-t, p) > input { margin-top: 1px; }
body[data-aktivni] .nast-radek:has(small) { align-items: flex-start; }
/* holé odkazy v textu (bez třídy) – jako .odkaz: barva živlu, podtržení jen při najetí (ESTETIKA §5) */
body[data-aktivni] .content :is(p, small, .napoveda, .nast-t, .rz-ticho, .pod-seznamem, li) a:not([class]) { color: var(--accent-deep); text-decoration: none; }
@media (hover: hover) { body[data-aktivni] .content :is(p, small, .napoveda, .nast-t, .rz-ticho, .pod-seznamem, li) a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; } }
html[data-elem="vzduch"] body[data-aktivni] .content :is(p, small, .napoveda, .nast-t, .rz-ticho, .pod-seznamem, li) a:not([class]) { color: var(--ink); font-weight: 500; }
body[data-aktivni] .odkaz { text-decoration-line: none !important; }
@media (hover: hover) { body[data-aktivni] .odkaz:hover { text-decoration-line: underline !important; } }
/* prázdný seznam (záložka bez záznamů): karta sahá k dolnímu okraji jako plný seznam, ne krátký ostrůvek (KATALOG #26) */
@media (min-width: 641px) { body[data-aktivni] .card:has(.prazdno):not(:has(tbody tr)) { min-height: calc(100dvh - 260px); } }
/* štítek stavu v řádku tabulky na stejné svislé ose jako text řádku (byl o 1,5 px níž) */
body[data-aktivni]:not([data-aktivni^="nastenka"]) .tbl td > .pill { position: relative; top: -1.5px; }
/* žádná karta ani dlaždice se při najetí myší nezvedá (mimo nástěnku) – kontrola kola 2 */
body[data-aktivni]:not([data-aktivni^="nastenka"]) :is(.card, .kpi):hover { transform: none !important; }
.rc-dot.sep-zlom { display: none; } .rc-dot.sep-zlom + * { display: block; }
/* hlavička stránky na telefonu: když se Zrušit / Uložit nevejdou vedle nadpisu, zalomí se, ale zůstanou vpravo jako všude jinde (kontrola kola 2) */
@media (max-width: 640px) { body[data-aktivni] .str-hlava > .str-akce { margin-left: auto; } }
/* odkazy v rozbaleném řádku (místnosti, služby…) – podtržení jen při najetí */
body[data-aktivni] :is(.rz-in, .rz-forma) a:not(.dt-btn):not(.odkaz) { text-decoration: none; color: var(--accent-deep); }
@media (hover: hover) { body[data-aktivni] :is(.rz-in, .rz-forma) a:not(.dt-btn):not(.odkaz):hover { text-decoration: underline; text-underline-offset: 3px; } }
html[data-elem="vzduch"] body[data-aktivni] :is(.rz-in, .rz-forma) a:not(.dt-btn):not(.odkaz) { color: var(--ink); font-weight: 500; }
/* rozbalení (karty) – lichý počet tlačítek: poslední přes celou šířku (ne 2 + 1 osiřelé) */
@media (max-width: 640px) {
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in :is(.rz-akce, .form-akce):has(> .dt-btn ~ .dt-btn ~ .dt-btn) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in :is(.rz-akce, .form-akce) > .dt-btn:not(.rz-zavrit):nth-last-child(1 of .dt-btn:not(.rz-zavrit)):nth-child(odd of .dt-btn:not(.rz-zavrit)) { grid-column: 1 / -1 !important; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in .rz-akce > .dt-btn:is(.danger, .rz-hlavni) { grid-column: auto !important; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in .form-akce > .dt-btn { width: 100%; justify-content: center; margin: 0 !important; }
}
/* záznamy na telefonu: oba výběry v liště vedle sebe stejně široké (jako Historie změn) */
@media (max-width: 640px) { body[data-aktivni$="logs"] .nastroje > .vyber { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } body[data-aktivni$="logs"] .nastroje > .vyber > select.pole { width: 100% !important; min-width: 0 !important; } }
/* tablet (641–1100, karty): tlačítka rozbalení jen kolem textu v jedné řadě (ESTETIKA §4), „Zavřít“ schované jako na telefonu */
@media (min-width: 641px) and (max-width: 1100px) {
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in :is(.rz-akce, .form-akce) { display: flex !important; flex-wrap: wrap; gap: 8px; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in :is(.rz-akce, .form-akce) > .dt-btn { width: auto !important; flex: 0 0 auto !important; }
  body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in .rz-akce > .rz-zavrit { display: none !important; }
}
/* ===== 26. 10. opravy z kontroly kola 3 ===== */
/* hlavička karty a lišta nad tabulkou na ose textu řádků (22 px, dřív 18 px – o 4 px vedle) */
@media (min-width: 1101px) { body[data-aktivni] .card:has(> .tbl-scroll table:not([hidden])) > :is(.card-head, .nastroje) { padding-left: 22px; padding-right: 22px; } }
/* ikony v tlačítkách jednotně 14 px */
body[data-aktivni] .dt-btn > svg { width: 14px; height: 14px; }
/* záznamy na telefonu: výběry vedle sebe podle obsahu (bez useknutí „Všechny ty…“) */
@media (max-width: 640px) { body[data-aktivni$="logs"] .nastroje > .vyber { flex: 1 1 auto !important; } }
/* karta „Nový …“: nahoře stejně vzduchu jako vlevo */
@media (min-width: 761px) { body[data-aktivni] .card:has(> div > .rz-forma) { padding-top: 20px; } }
/* telefon: všechna tlačítka v rozbalení karty stejně vysoká (Upravit 34 × Smazat 32) */
@media (max-width: 640px) { body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in :is(.rz-akce, .form-akce) > .dt-btn { height: 40px !important; min-height: 40px !important; } }
/* záznamy na telefonu: oba výběry stejně široké vedle sebe, šipka uvnitř rámečku */
@media (max-width: 640px) {
  body[data-aktivni$="logs"] .nastroje > .vyber { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; }
  body[data-aktivni$="logs"] .nastroje > .vyber > select.pole { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}
.rc-comm > .rc-cast { display: inline; }
/* telefon, mřížka tlačítek v rozbalení: text vždy na středu (i u „Smazat“, které má jinak styl textového odkazu) */
@media (max-width: 640px) { body[data-aktivni]:not([data-aktivni^="reservations"]):not([data-aktivni^="nastenka"]):not([data-aktivni^="calendar"]) .rz-karty .rz-in :is(.rz-akce, .form-akce) > .dt-btn { justify-content: center !important; padding-left: 8px !important; padding-right: 8px !important; margin: 0 !important; } }
/* ===== 26. 10. kolo 5 (k5c) ===== */
/* záznamy na telefonu: filtr i řazení přesně stejně široké, šipka blíž – „Všechny typy“ se vejde celé */
@media (max-width: 640px) {
  body[data-aktivni$="logs"] .nastroje > .vyber, body[data-aktivni$="logs"] .nastroje > .vyber.razeni-tel { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; }
  body[data-aktivni$="logs"] .nastroje > .vyber > select.pole { width: 100% !important; padding-right: 30px !important; background-position: right 10px center !important; }
}
/* prázdný seznam nahraných souborů nepřidává mezeru pod plochu nahrání (kolo 5: Fotografie dole 25 × 17 px) */
.soubory:empty { margin: 0; }
/* kolo 5: zalomený údaj za skrytou tečkou začne vždy nový řádek (pravidlo „.rc-comm > .rc-cast inline“ ho přebíjelo → „pobočky  Použito“ bez tečky) */
.rc-comm > .rc-dot.sep-zlom + .rc-cast { display: block; flex-basis: 100%; }
/* kolo 5: telefon – přepínač s vysvětlením pod názvem stojí na řádku názvu, ne na středu celého (víceřádkového) textu */
@media (max-width: 760px) { .prepinac:has(> span > small) { align-items: flex-start; } }
/* kolo 7: textová pole všude stejně – bez držadla, samy rostou podle textu (jako karta klienta); dřív někde držadlo, jinde ne */
body[data-aktivni] textarea.pole { resize: none; overflow: hidden; }
/* 26. 10. (živá data B2): telefon – záložky, které pokračují za okrajem, tam jemně vyblednou (48 px). Třídy D35 (vic-vpravo / vic-vlevo)
   dřív přebíjelo obecné pravidlo „body[data-aktivni] .zalozky“ (24 px), jehož přechod padl do vnitřního okraje 16 px – když záložka
   končila přesně u okraje („VIP 10“), nebylo nic vidět. Bez přetečení se nemění nic (platí dál pravidlo 24 px). */
@media (max-width: 760px) {
  body[data-aktivni] .zalozky.vic-vpravo { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  body[data-aktivni] .zalozky.vic-vlevo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  body[data-aktivni] .zalozky.vic-vlevo.vic-vpravo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 48px), transparent); }
}

/* 26. 10. Tereza („koukni na to množství pozadí, co má nástěnka vs. co má klienti“; „klienti do karty – na nástěnce nemáme název Nástěnka“):
   seznamy začínají kartou jako nástěnka. 1. řádek karty = nadpis stránky (h1, styl a místo jako „Rezervace“ v kartě nástěnky) + hlavní tlačítka vpravo,
   2. řádek = záložky (linka přes celou kartu), pak hledání / Vybrat / Filtr a tabulka. Markup: .card.flush.s-hlavou > .str-hlava.v-karte + .zalozky.v-karte.
   Srovnání „jen záložky v kartě“: ?karta=zalozky (zaklad.js WB.kartaJenZalozky). */
body[data-aktivni] .card > .str-hlava.v-karte { margin: 0; padding: 12px var(--pad-x) 0; min-height: 32px; gap: 8px 16px; }
body[data-aktivni] .card > .str-hlava.v-karte > .str-nadpis { font-size: 11.5px; font-weight: 400; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
body[data-aktivni] .card > .str-hlava.v-karte > .str-akce { margin-left: auto; }
body[data-aktivni] .card > .zalozky.v-karte { margin: 0; padding: 0 var(--pad-x); }
/* UX noc #22 (všude): záložky přestěhované do karty otevřené části (zaklad.js 7.12) – odstup od horní hrany; v kartě s okrajem (.klid)
   linka záložek přes celou šířku karty jako v kartě bez okraje */
body[data-aktivni] .zal-panel > .card.flush > .zalozky.v-karte:first-child { padding-top: 10px; }
body[data-aktivni] .zal-panel > .card:not(.flush) > .zalozky.v-karte:first-child { margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) var(--pad-y); padding: 10px var(--pad-x) 0; }
body[data-aktivni] .card > .str-hlava.v-karte + .zalozky.v-karte { margin-top: 6px; }
body[data-aktivni] .card > .str-hlava.v-karte + :not(.zalozky) { margin-top: 0; }
@media (min-width: 1101px) { body[data-aktivni] .card:has(> .tbl-scroll table:not([hidden])) > :is(.str-hlava, .zalozky).v-karte { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 760px) { body[data-aktivni] .card > .zalozky.v-karte { padding: 0 var(--pad-x); } }
@media (max-width: 640px) { body[data-aktivni] .card > .str-hlava.v-karte { padding-top: 12px; } }
html.karta-jen-zalozky body[data-aktivni] .str-hlava:has(+ .card.s-hlavou) { margin-bottom: 16px; }   /* 29. 10.: nadpis nad kartou i na seznamech – stejná mezera jako na formulářích a detailech (karta y 140) */
@media (max-width: 640px) { html.karta-jen-zalozky body[data-aktivni] .str-hlava:has(+ .card.s-hlavou) { margin-bottom: 12px; } }
/* nadpis stránky je v kartě → vlastní nadpis karty („Vydané poukazy“, „Prodané permanentky“) by stál hned pod ním podruhé; zůstane jen počet a přepínač (Nic dvakrát) */
body[data-aktivni] .card > .str-hlava.v-karte ~ .card-head.s-pohledem .card-h { display: none; }

/* 26. 10. noc · seskupený seznam celý v jedné kartě (Místnosti, Vybavení, Služby): .card.flush.s-hlavou.s-oddily > .str-hlava.v-karte + .nastroje + #oddily (.odd > .sect [+ .filtr-okno] + .card) + #misto.
   Majitelka: celý obsah seznamu v kartě jako na nástěnce, v noci žádné velké plochy holého pozadí. Oddíly (pobočky, kategorie) = mezititulky uvnitř karty stejným písmem jako dřív;
   vnitřní karty oddílů a prázdných stavů ztratí vlastní rámeček (žádná karta v kartě) – rozbalení řádků, karty na telefonu a akce zůstávají beze změny.
   Odstup a dělicí linka patří oddílu (--odd-pt), ne mezititulku – okno „Upravit“ kategorie se tak otevře pod svým tlačítkem na každé šířce. */
body[data-aktivni] .card.s-oddily { overflow: visible; }
body[data-aktivni] .card.s-oddily :is(.odd > .card, #misto .card) { background: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important; margin: 0 !important; transform: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-aktivni] .card.s-oddily .odd { --odd-pt: 18px; padding-top: var(--odd-pt); }
body[data-aktivni] .card.s-oddily .odd:not([hidden]) ~ .odd { --odd-pt: 22px; margin-top: 10px; }
body[data-aktivni] .card.s-oddily .odd:not([hidden]) ~ .odd::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--row-line); }
body[data-aktivni] .card.s-oddily .odd > .sect { margin: 0; padding: 0 var(--pad-x); }
body[data-aktivni] .card.s-oddily .odd > .filtr-okno { top: calc(var(--odd-pt) + 34px); right: var(--pad-x); }
body[data-aktivni] .card.s-oddily > #hlaska:not([hidden]) { padding: 12px var(--pad-x) 0; }
body[data-aktivni] .card.s-oddily > #hlaska .upozorneni { margin: 0 !important; }
body[data-aktivni] .card.s-oddily #misto .kostra-nadpis { margin-left: var(--pad-x); margin-right: var(--pad-x); }
body[data-aktivni] .card.s-oddily:has(.odd:not([hidden])) { padding-bottom: 0; }
@media (min-width: 1101px) { body[data-aktivni] .card.s-oddily > :is(.str-hlava.v-karte, .nastroje), body[data-aktivni] .card.s-oddily .odd > .sect { padding-left: 22px; padding-right: 22px; } body[data-aktivni] .card.s-oddily .odd > .filtr-okno { right: 22px; } }
@media (max-width: 1100px) { body[data-aktivni] .card.s-oddily .odd:not([hidden]) ~ .odd::before { left: var(--pad-x); right: var(--pad-x); } }   /* tablet: řádky jsou karty s linkou odsazenou o okraj karty → linka mezi oddíly stejně */
@media (max-width: 760px) {
  body[data-aktivni] .card.s-oddily .odd:not([hidden]) ~ .odd::before { left: 16px; right: 16px; }   /* telefon: linka mezi oddíly odsazená přesně jako linky mezi kartami řádků (16 px) */
  body[data-aktivni] .card.s-oddily .odd > .filtr-okno { width: auto; max-width: none; margin: 8px var(--pad-x) 4px; }   /* telefon: okno Upravit kategorie leží v toku pod mezititulkem, odsazené jako nástroje */
}
@media (max-width: 640px) {
  body[data-aktivni] .card.s-oddily .nastroje-bezne > .nastroje-souhrn { flex: 1 1 100%; }   /* v kartě je o 2 okraje užší řádek: „15 místností · 3 pobočky“ + Vybrat + Filtr se nevešly a Filtr osiřel → počet na vlastní řádek, tlačítka pod ním spolu vpravo jako dřív */
  body[data-aktivni] .card.s-oddily .nastroje-bezne > .nastroje-souhrn ~ .dt-btn:not([hidden]) { margin-left: auto; }
  body[data-aktivni] .card.s-oddily .nastroje-bezne > .nastroje-souhrn ~ .dt-btn:not([hidden]) ~ .dt-btn { margin-left: 0; }
}

/* 26. 10. noc (celková kontrola) · seznam bez nástrojů: tabulka hned pod nadpisem v kartě má stejný vzduch jako pod titulkem karty (8 px, .tbl-scroll výše) –
   jinak Kampaně a Šablony směn měly hlavičky sloupců o 8 px výš než Cenové kategorie, Štítky, Slevy… (tam je mezi nimi skrytý řádek řazení pro telefon). */
body[data-aktivni] .card > .str-hlava.v-karte + .tbl-scroll { margin-top: 8px; }

/* ============================================================================
   27. 10. k1 (kalendář+panel, porota k1 bod 6 – Tereza: „zásadně to chceme většinově stejně a nejjednodušeji“): ÚDAJE V PANELU DETAILU
   = jako Rezervace (reservations/doplnky.css 25. 10. – popisek nad hodnotou, telefon a e-mail barvou písma 12,5 px, zdraví červeně).
   Jeden vzhled pro Rezervace, kalendář (blok, kartička, Seznam) i nástěnku. Jen PŘIDÁNO na konec, nic stávajícího neměněno;
   Rezervace mají tytéž hodnoty s vyšší vahou (body[data-aktivni="reservations"]) – u nich se nic nezmění. Kalendář a nástěnka už nemají vlastní přepisy.
   ============================================================================ */
.rz-panel .rz-in .rv-tel-r > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; line-height: 18px; color: var(--ink); }
.rz-panel .rz-in .rv-tel-r > span > .rz-stit { margin: 0 !important; font-size: 11.5px; line-height: 16px; color: var(--muted); }
.rz-panel .rz-in .rv-tel-r > span.rz-zdravi-text, .rz-panel .rz-in .rv-tel-r > span.rz-zdravi-text > .rz-stit { color: var(--cancel) !important; }
body .rz-panel .rz-in .rv-tel-r a.rz-kontakt { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (hover: hover) { .rz-panel .rz-in .rv-tel-r a.rz-kontakt:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hover-line); } }
.rz-panel .rz-in .rv-tel-r a.rz-kontakt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 760px), (pointer: coarse) { .rz-panel .rz-in .rv-tel-r a.rz-kontakt { position: relative; } .rz-panel .rz-in .rv-tel-r a.rz-kontakt::after { content: ""; position: absolute; inset: -11px -4px; } }   /* dotyk 40 px */
.rz-panel .rz-in > .rz-info:has(.rv-tel) { margin-bottom: 18px !important; }
.rz-panel .rz-in .rz-info .rv-tel-r > span .kp-dluh, .rz-panel .rz-in .rv-tel-r > span.kp-dluh, .rz-panel .rz-in .rv-tel-r > span.kp-dluh > .rz-stit { color: var(--cancel); }   /* nezaplaceno (kalendář) */
/* důvod zakázaného tlačítka („Nedostavil se“ jde označit až po začátku termínu…) – v panelu vždy vidět, jednořádkově pod tlačítky (nástěnka ho v řádku ukazuje jen na dotyku) */
.rz-panel .rz-in .rz-proc { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 11.5px; line-height: 18px; color: var(--muted); order: 3; }
/* panel = sloupec jako Rezervace (reservations/doplnky.css .rz-in): údaje · poznámky a prodej · tlačítka · důvody; žádné slévání okrajů (dřív o 6 px těsněji než Rezervace) */
.rz-panel .rz-in { display: flex; flex-direction: column; }
.rz-panel .rz-in > .rz-info { order: 0; }
.rz-panel .rz-in > .rz-meta { order: 1; margin: 4px 0 14px; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.rz-panel .rz-in > .rz-meta:empty { display: none; }
.rz-panel .rz-in > .rz-akce { order: 2; }
.rz-panel .rz-in > :is(.rz-proc, .rz-omyl) { order: 3; }

/* ============================================================================
   27. 10. k2 (kalendář+panel, porota k2 – princip Terezy 27. 10. „zásadně většinově stejně a nejjednodušeji, aniž by to bylo nemilé“):
   PANEL DETAILU ZE ZÁKLADU – stejný na nástěnce, v Rezervacích, v kalendáři (blok, kartička, Seznam). Jen PŘIDÁNO na konec;
   panelová pravidla jsou omezená na .rz-panel (rozbalení v místě na nástěnce ?detail=rozbaleni a v106 se nemění).
   ============================================================================ */
/* 1) T110 (veto C): řádek „Platba · 450 Kč · zaplatí na místě“ – částka barvou zrušení jako sloupec ∞ (WB_ROZB.platbaRadek) */
.rz-panel .rz-in .rv-tel-r > span.rz-plat-radek > span:last-child { color: var(--ink); }
.rz-panel .rz-in .rv-tel-r > span.rz-plat-radek .rz-plat-castka { color: var(--cancel); font-variant-numeric: tabular-nums; }
/* T184 (veto B): recepce vidí místo zdraví jen odkaz na kartu klienta – stejně na všech místech (vzor Rezervace) */
.rz-panel .rz-in .rv-tel-r > a.rz-zdravi-odkaz { display: block; margin: 0; font-size: 12.5px; line-height: 18px; font-weight: 400; color: var(--accent-deep); text-decoration: none; }
@media (hover: hover) { .rz-panel .rz-in .rv-tel-r > a.rz-zdravi-odkaz:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hover-line); } }
/* „e-mail“ v textech panelu: spojovník běžnými číslicemi (tabulkové číslice ho dělaly široký – kontrolor k2), slovo se nedělí */
.rz-panel .spoj { font-variant-numeric: normal; white-space: nowrap; }

/* 2) otevřený řádek, jehož detail je v panelu (Z7, T126, §4): linka --rz-akt NAHOŘE I DOLE, žádná výplň – Rezervace, Seznam kalendáře, nástěnka (i na 1440) */
body.rzp-otevreno :is(#resv, .rz-telo) > tr.rz-otevreno > td, body.rzp-otevreno :is(#resv, .rz-telo) > tr.rz-otevreno.rz-aktivni > td { background: transparent !important; box-shadow: inset 0 1px 0 var(--rz-akt), inset 0 -1px 0 var(--rz-akt) !important; }
body.rzp-otevreno :is(#resv, .rz-telo) > tr.rz-otevreno { background: transparent !important; }
/* najetí na řádek rezervace v Rezervacích a v Seznamu kalendáře: jen linka (Z7), dřív šedá výplň (zaklad.css „tbody tr:hover“) */
:is(body[data-aktivni="reservations"], body[data-aktivni="calendar-page"]) .rz-telo > tr:hover { background: transparent; }
@media (hover: hover) { :is(body[data-aktivni="reservations"], body[data-aktivni="calendar-page"]) .rz-telo > tr:not(.rz-otevreno):not(.rz-detail):hover > td { box-shadow: inset 0 1px 0 var(--rz-line), inset 0 -1px 0 var(--rz-line); } }

/* 3) tablet (761–1180): pod panelem ztmavení jako na telefonu – useknutá slova tabulky pod ním nevypadají jako chyba (designér k2) */
@media (min-width: 761px) and (max-width: 1180px) {
  .rz-panel { z-index: 90; }
  body.rzp-otevreno::after { content: ""; position: fixed; inset: 0; z-index: 89; background: rgba(20,20,20,.18); }
}
/* telefon: hlášení (Dorazil … · Vrátit) při otevřeném panelu nahoře, ne přes „Zrušit rezervaci“ dole (designér, Hana k2) */
@media (max-width: 760px) { body.rzp-otevreno .dt-toast { top: calc(10px + env(safe-area-inset-top)); bottom: auto; } }

/* 4) „Zpět“ v podčástech panelu: text na levé ose ostatních voleb (telefon x = 18, dřív 32) */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-sub .dt-btn.rz-zpet { justify-content: flex-start; padding-left: 0 !important; padding-right: 0 !important; min-width: 0; box-shadow: none !important; color: var(--muted) !important; font-weight: 450; }
@media (hover: hover) { .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-sub .dt-btn.rz-zpet:hover { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hover-line); } }

/* 5) T178/T179 (veto D): Dokončit s platbou = nástěnka S65 (WB_ROZB.platbaHtml) – mřížka panelu:
   cena a „Přidat zboží“ na prvním řádku · Hotově | Kartou dvě stejné poloviny 40 px · QR kód (jen s účtem salonu) přes celou šířku · zboží pod tím. Nic osamělého. */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .rz-sub.rz-sub-platba { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 4px 0 0; margin: 0; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .rz-sub-lbl { grid-column: 1 !important; height: auto; min-height: 24px; padding: 0; font-size: 12.5px; line-height: 18px; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .rz-zbozi-odkaz { grid-column: 2 !important; justify-self: end; margin: 0 !important; font-size: 12.5px; line-height: 18px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-weight: 400; font-variant-numeric: normal; }   /* Rezervace dědí tabulkové číslice – „Přidat zboží“ bylo o 1 px užší */
@media (hover: hover) { .rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .rz-zbozi-odkaz:hover { color: var(--ink); text-decoration-color: currentColor; } }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .rz-platba-zlom { display: none !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .dt-btn { width: 100%; min-width: 0; height: 40px !important; min-height: 40px; padding: 0 10px; font-size: 13px; justify-content: center; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .dt-btn:not(.primary) { font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--dt-line); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > :is([data-k="pl-qr"], [data-k="pl-zaplaceno"], .rz-qr-box, .rz-zbozi, .rz-zbozi-rozpis) { grid-column: 1 / -1 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .rz-qr-box { display: flex; justify-content: flex-start; padding: 4px 0; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-qr { display: block; border-radius: 6px; outline: 1px solid var(--hairline); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi > .dt-btn { width: 100%; height: 40px; justify-content: space-between; padding: 0 14px; font-size: 13px; font-weight: 450; color: var(--ink); box-shadow: inset 0 0 0 1px var(--dt-line); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi > .dt-btn.on { box-shadow: inset 0 0 0 1.5px var(--rz-akt); font-weight: 500; }
html[data-elem="vzduch"] .rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi > .dt-btn.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi > .dt-btn .ic-ok { color: var(--ink); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi > .dt-btn .price { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi-rozpis { display: block; font-size: 11.5px; line-height: 18px; color: var(--muted); font-variant-numeric: normal; }

/* 6) T147 (veto E): „Na příště“ podle D3 přímo v panelu na všech místech (nástěnka doplnky.prace.js pristiHtml) – v úzkém panelu rozložení jako telefon:
   šipky a rozsah nad pásem, dny po sedmi (PC 2 × 7 = dva týdny), časy po třech, Objednat přes celou šířku; vzhled čipů = nástěnka S50/S59/S67 */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .rz-sub.rz-sub-pristi { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; padding: 4px 0 2px; margin: 0; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > * { flex: 0 0 auto !important; min-width: 0; max-width: 100%; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .rz-sub-lbl { height: auto !important; min-height: 0 !important; padding: 0; font-size: 12.5px; line-height: 18px; font-weight: 450; color: var(--accent); white-space: normal; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-cas, .pr-den, .pr-posun, .pr-navrh) { font: inherit; cursor: pointer; border: 0; background: transparent; color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-uz { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-uz b { font-weight: 500; color: var(--ink); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-pas { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-posun { width: 40px; height: 40px; order: 0; border-radius: 10px; font-size: 14px; line-height: 1; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--dt-line); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-posun:disabled { opacity: .38; cursor: default; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-rozsah { display: block; text-align: center; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-dny { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0; min-width: 0; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den { width: auto; height: 56px; margin: 0; justify-self: stretch; min-width: 0; padding: 0 1px; border-radius: 12px; display: grid; justify-items: center; align-content: center; gap: 1px; position: relative; box-shadow: inset 0 0 0 1px var(--dt-line); font-variant-numeric: tabular-nums; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den.pondeli::before { display: none; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den-t { font-size: 11.5px; color: var(--muted); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den-d { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den.plno .pr-den-d { color: var(--muted); font-weight: 400; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den:disabled { opacity: .38; cursor: default; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den-jeji { font-size: 11px; line-height: 1.1; color: var(--ink-2); margin-top: 2px; text-align: center; padding: 0 2px; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-casy-den { font-size: 11.5px; color: var(--ink-2); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-casy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-casy:empty { display: none; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-cas { position: relative; min-width: 0; height: 40px; padding: 0 4px; border-radius: 999px; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--dt-line); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-cas.obvykly::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .7; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-mezera { display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: 40px; padding: 0 4px; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.15; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-cas.vybran, .pr-den.vybran) { box-shadow: inset 0 0 0 2px var(--accent); color: var(--ink) !important; font-weight: 600; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den.vybran :is(.pr-den-t, .pr-den-d) { color: var(--ink); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den.vybran .pr-den-d { font-weight: 600; }
html[data-elem="vzduch"] .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-cas.vybran, .pr-den.vybran) { box-shadow: inset 0 0 0 2px var(--ink); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-jiny { font-size: 11.5px; line-height: 18px; color: var(--muted); margin: 0; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-jiny .rz-odkaz { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-souhrn { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-info { line-height: 1.5; color: var(--ink-2); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-termin { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 8px; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-pozn { color: var(--muted); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-kolize, .pr-chyba) { color: var(--cancel); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-chyba, .pr-otazka) { font-size: 11.5px; line-height: 18px; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-otazka { color: var(--ink); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-chyba, .pr-otazka):empty { display: none; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-navrh { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; margin: 6px 0 0; border-radius: 8px; font-size: 12.5px; color: var(--accent) !important; box-shadow: inset 0 0 0 1.5px var(--rz-akt); white-space: nowrap; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok { width: 100%; height: 40px !important; min-height: 40px; padding: 0 16px; font-size: 13px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rz-akt); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok svg { display: inline-block; width: 15px; height: 15px; color: var(--accent); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok.primary { background: oklch(0.46 var(--c) var(--hue)); color: oklch(0.985 0 0); box-shadow: none; }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok.primary svg { color: inherit; }
html[data-mode="dark"] .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok.primary { background: oklch(0.40 var(--c) var(--hue)); color: oklch(0.95 0.008 var(--hue)); }
html[data-elem="vzduch"] .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok:not(.pr-ztlumene), html[data-elem="vzduch"] .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok.primary { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink); }
html[data-elem="vzduch"] .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ok svg { color: var(--ink); }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi > .dt-btn.pr-ztlumene { color: var(--muted); box-shadow: inset 0 0 0 1px var(--dt-line); font-weight: 450; }
@media (hover: hover) { .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-cas:not(.vybran), .pr-den:not(.vybran):not(:disabled), .pr-posun:not(:disabled)):hover { box-shadow: inset 0 0 0 1px var(--hover-line); } }
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-cas, .pr-den, .pr-posun, .pr-navrh):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 400px) { .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-den-d { font-size: 11.5px; } }
/* 7) „Dokončit“ s otevřenou platbou: linka a barva živlu, bez výplně (plná jsou jen tlačítka platby) – jako nástěnka S60 na všech místech; na telefonu s ✓ jako nástěnka */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn[data-k="dokoncit"][aria-expanded="true"] { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--rz-line); }
@media (hover: hover) { .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn[data-k="dokoncit"][aria-expanded="true"]:hover { filter: none; box-shadow: inset 0 0 0 1px var(--hover-line); } }
@media (max-width: 480px) { .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn[data-k="dokoncit"] svg { display: inline; } }
/* 8) dotyk (T188, nástěnka S59/S60/S67): v panelu na všech místech stejně – čipy časů a šipky dnů 44 px, tiché odkazy „Přidat zboží“ a „Jiný čas nebo terapeut“ s plochou 44 px */
@media (pointer: coarse) {
  .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi :is(.pr-cas, .pr-posun) { min-height: 44px; }
  .rz-panel:is(#rzp-, .rz-panel) .rz-sub-pristi .pr-jiny .rz-odkaz, .rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .rz-zbozi-odkaz { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 480px) { .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn[data-k="dokoncit"] { line-height: normal; } }
/* 9) „Zpět“ v podčástech panelu vždy na vlastním řádku pod volbami (po zarovnání na osu se vešel natěsno za „Omluveno“) */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-sub > .dt-btn.rz-zpet { flex-basis: 100%; grid-column: 1 / -1 !important; width: 100% !important; }


/* ============================================================================
   k3 27. 10. (porota kalendáře + panelu, kolo 3 – ZMENY_K3): jen PŘIDÁNO na konec, omezeno na panel detailu (.rz-panel) – rozbalení v místě a v106 beze změny.
   ============================================================================ */
/* 1) Zrušit (WB_ROZB.stornoHtml – nástěnka, Rezervace, kalendář stejně): věty přes celou šířku · „Druh zrušení“ na vlastním řádku · druhy v mřížce 3 × 40 px
   (po lhůtě 2 × polovina, šéfova kulance přes celou šířku jako QR kód) · rozsah pár / série 2 × polovina · Zpět pod tím. Nic osamělého (designér 2, kontrolor 2). */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .rz-sub.rz-storno-k3 { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 4px 0 0; margin: 0; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > * { grid-column: 1 / -1 !important; min-width: 0; margin: 0; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .rz-veta { display: block; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .rz-veta + .rz-veta { margin-top: -4px; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .rz-veta .rz-odkaz { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .rz-sub-lbl { display: block; height: auto; min-height: 0; padding: 4px 0 0; font-size: 12.5px; line-height: 18px; color: var(--accent); white-space: normal; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > :is(.rz-zlom, .rz-sub-zlom) { display: none; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .dt-btn:not(.rz-zpet) { width: 100%; min-width: 0; height: 40px !important; min-height: 40px; padding: 0 6px !important; font-size: 13px; line-height: 1.2; justify-content: center; text-align: center; white-space: nowrap; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .dt-btn.rz-druh { grid-column: span 2 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3.rz-druhy-2 > .dt-btn.rz-druh, .rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .dt-btn[data-a^="rozsah"] { grid-column: span 3 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3.rz-storno-k3 > .dt-btn.rz-druh.rz-druh-kul { grid-column: 1 / -1 !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .dt-btn[data-a^="rozsah"] { color: var(--ink-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rz-akt) 55%, transparent); }
.rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .dt-btn[data-a^="rozsah"].on { color: var(--accent); font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--rz-akt); }
html[data-elem="vzduch"] .rz-panel:is(#rzp-, .rz-panel) .rz-storno-k3 > .dt-btn[data-a^="rozsah"].on { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
/* 2) hlášení (Dorazil … · Vrátit) při otevřeném panelu na PC a tabletu vystředěné na panel, 20 px nad jeho spodní hranou – nikdy přes hranu panelu ani přes řádek tabulky (designér 3, Lucie 4) */
@media (min-width: 761px) {
  body.rzp-otevreno { --rzp-w: min(440px, 46vw); }
  body.rzp-otevreno .dt-toast { left: auto; right: calc(var(--rzp-w) / 2); bottom: calc(20px + env(safe-area-inset-bottom)); max-width: calc(var(--rzp-w) - 32px); width: max-content; transform: translate(50%, 8px); }
  body.rzp-otevreno .dt-toast.show { transform: translate(50%, 0); }
}
@media (min-width: 761px) and (max-width: 1100px) { body.rzp-otevreno { --rzp-w: min(400px, 62vw); } }
/* 3) telefon: ikony u všech tlačítek panelu jako na 768–1440 (designér 4) – šířka tlačítka 173 px na to stačí */
@media (max-width: 480px) { .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce :is(.dt-btn, a.dt-btn) svg { display: inline; } }
/* 4) dvakrát částka (Lucie 2, Hana 2): když je otevřená platba „Zaplatit · 450 Kč“, řádek „Platba · 450 Kč · zaplatí na místě“ v údajích panelu se schová – všechna 4 místa */
.rz-panel:is(#rzp-, .rz-panel) .rz-in:has(.rz-sub-platba:not(.rz-perm-platba)) .rv-tel-r > .rz-plat-radek { display: none; }   /* k9 (kontrolor 4): při prodeji permanentky řádek Platba zůstává */
/* 5) „10 vstupů“ na kartách telefonu (nástěnka, Seznam kalendáře, Rezervace): mezi číslem a slovem jen pevná mezera, ne ještě mezera rozložení (kontrolor 3) */
.rc :is(.perm-b, .perm-edit):has(> .perm-jed) { column-gap: 0; }
/* k3b) zakázané „Dorazil“ (po Nedostavil se / Dokončeno) barvou jako nástěnka (S7 `.rz-akce > .dt-btn.primary:disabled` = --ink-2) – všechna 4 místa stejně */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn[data-k="done"]:disabled { color: var(--ink-2); }

/* ============================================================================
   k4 27. 10. (porota kalendáře + panelu, kolo 4) – připojeno, nic stávajícího neměněno
   ============================================================================ */
/* Hana 1: kolečko u plného „Potvrdit“ barvou písma tlačítka (bílé) – jako nástěnka a Rezervace (tam stejné pravidlo v doplnky.prace.css / reservations/doplnky.css) */
.rz-in .dt-btn.primary .ic-conf { color: inherit; }
/* VETO G: řádek „Zrušení nejde vzít zpět – při omylu: Obnovit jako novou“ pod tlačítky zrušené rezervace – stejné hodnoty jako nástěnka (.rz-omyl v doplnky.prace.css), teď i kalendář a Rezervace */
.rz-panel .rz-in .rz-omyl { margin-top: 8px; font-size: 11.5px; line-height: 18px; color: var(--muted); }
.rz-panel .rz-in .rz-omyl .rz-odkaz { font-size: 11.5px; }
.rz-panel .rz-in .rz-omyl button.rz-odkaz { padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); border-radius: 4px; }   /* = nástěnka .rz-odkaz (kalendář tlačítko-odkaz jinak nemá) */
/* VETO G: „Zrušeno“ po zrušení nejde kliknout – zašedlé jako ostatní zamčené stavy na nástěnce (S7 `.rz-akce > .dt-btn.on:disabled`), všechna 4 místa stejně; stav říká červená hlavička panelu */
.rz-panel .rz-in .rz-akce > .dt-btn.on.danger:disabled { background: transparent; color: var(--ink-2); font-weight: 500; box-shadow: inset 0 0 0 1px var(--dt-line); opacity: .38; }
/* VETO G: odkaz „Hlídání termínu“ v hlášení po zrušení – stejně jako nástěnka (doplnky.prace.css .dt-toast a): barva písma hlášení, podtržení; dotyk 45 px */
.dt-toast > span > a { position: relative; color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; border-radius: 4px; }
.dt-toast > span > a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
@media (pointer: coarse) { .dt-toast > span > a::after { content: ""; position: absolute; inset: -15px -6px; } }
/* k4b 27. 10.: věta „Zrušení nejde vzít zpět – při omylu: Obnovit jako novou“ i mimo panel (stránka Detail rezervace, blok akcí) – stejné hodnoty jako panel a nástěnka */
#blok .rz-omyl { margin-top: 8px; font-size: 11.5px; line-height: 18px; color: var(--muted); }
#blok .rz-omyl .rz-odkaz { font-size: 11.5px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); }
#blok .rz-omyl { order: 9; flex-basis: 100%; }   /* pod tlačítky jako v panelu */
#blok .rz-akce > .dt-btn.on.danger:disabled { background: transparent; color: var(--ink-2); font-weight: 500; box-shadow: inset 0 0 0 1px var(--dt-line); opacity: .38; }   /* zašedlé „Zrušeno“ = panel */

/* k5 27. 10. (ZMENY_K5 bod 1): řádek „Zaplaceno online – ruší šéf: [Co klient chce] Požádat šéfa o zrušení“ pod tlačítky panelu v kalendáři a Rezervacích –
   stejné hodnoty jako nástěnka (doplnky.prace.css S54 / S59: pole 300 × 30 px, 11,5 px; telefon 100 % × 42 px; dotyk 44 px). Nástěnka (#resv) má vlastní pravidla za kroky. */
body:not(:has(#resv)) .rz-panel .rz-in .rz-zadost-akce { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; vertical-align: middle; }
body:not(:has(#resv)) .rz-panel .rz-in .rz-omyl .rz-pole.rz-zadost-co { height: 30px; width: 300px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; }
body:not(:has(#resv)) .rz-panel .rz-in .rz-omyl .rz-pole.rz-zadost-co::placeholder { color: var(--muted); opacity: 1; }
@media (min-width: 761px) { body:not(:has(#resv)) .rz-panel .rz-in .rz-omyl:has(.rz-zadost, .rz-zadost-co) { min-height: 30px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 4px; } }
@media (max-width: 760px) { body:not(:has(#resv)) .rz-panel .rz-in .rz-zadost-akce { display: flex; margin-top: 6px; } body:not(:has(#resv)) .rz-panel .rz-in .rz-zadost-pomlcka { display: none; } body:not(:has(#resv)) .rz-panel .rz-in .rz-omyl .rz-pole.rz-zadost-co { flex: 1 1 100%; width: 100%; height: 42px; font-size: 12.5px; } }
@media (pointer: coarse) { body:not(:has(#resv)) .rz-panel .rz-in .rz-omyl .rz-pole.rz-zadost-co { height: 44px; } body:not(:has(#resv)) .rz-panel .rz-in .rz-zadost-akce .rz-odkaz { min-height: 44px; display: inline-flex; align-items: center; } }
/* T231 (Tereza 28. 10.): částka platby na místě před začátkem termínu – tlumeně (neutrální), po začátku nezaplacená červeně jako dosud; nástěnka, Rezervace, kalendář */
.t-cena.cena-predem, .kb-zn.kb-cena.cena-predem { color: var(--muted) !important; }

/* k10 (porota k10 – designér): potvrzení zrušení PLNĚ červené s bílým písmem (spouštěč „Zrušit rezervaci“ nad ním zůstává obrysový) –
   jedno jasné ostré tlačítko: „Zrušit rezervaci“ (bez druhů zrušení) i „Zrušit a vrátit … Kč“ (vratka); kalendář, Rezervace i panel nástěnky stejně */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-storno-k3 > .dt-btn.danger:not(.rz-zpet):not(:disabled) { background: var(--cancel); color: oklch(0.985 0 0) !important; box-shadow: none !important; font-weight: 500; }
html[data-mode="dark"] .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-storno-k3 > .dt-btn.danger:not(.rz-zpet):not(:disabled) { background: oklch(0.48 0.1 30); color: oklch(0.97 0.005 30) !important; }
@media (hover: hover) { .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-storno-k3 > .dt-btn.danger:not(.rz-zpet):not(:disabled):hover { filter: brightness(1.08); box-shadow: none !important; } }

/* k11 (designér): s otevřeným krokem vratky (.rz-vratka-k3, podčást „storno-platba“) zůstává spouštěč „Zrušit rezervaci“ obrysový jako s otevřenou podčástí Zrušit (obrys a barva jako .dt-btn.danger[aria-expanded="true"]; odsazení nechává panelu) */
.rz-akce:has(> .rz-vratka-k3) > .dt-btn.danger[data-k="cancel"]:not(:disabled) { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cancel) 45%, transparent); color: var(--cancel); }

/* 27. 10. – noc: pozadí plochy za kartami (voda / oheň / země). Jen pozadí, nic jiného.
   Jeden tlumený tón živlu, pak měkce do čisté černé (přechod 340 px).
   Černá začíná 220 px pod koncem poslední karty (přechod se rozjíždí už za kartou), NEJPOZDĚJI ale v 70 % výšky okna –
   u delších tabulek tak přechod začne už za kartou a černá přijde stejně brzy jako u krátkých.
   Konec karty a sílu nastavuje skript pozadi-podle-karty.js (--konec-karty, --sila);
   dlouhé stránky (nástěnka) se ztlumí až na polovinu. Bez skriptu: konec 420 px, plná síla.
   Denní režim a vzduch beze změny. Nahrazuje 3 řádky z 26. 10. ve stylu tma-tlumena
   (voda 0.155 / oheň 0.152 / země 0.142), případně musí stát AŽ ZA nimi. */
html[data-mode="dark"][data-atmo="on"][data-elem="voda"] { --canvas: oklch(0.105 0.030 258) !important; }
html[data-mode="dark"][data-atmo="on"][data-elem="ohen"] { --canvas: oklch(0.105 0.031 14)  !important; }
html[data-mode="dark"][data-atmo="on"][data-elem="zeme"] { --canvas: oklch(0.105 0.023 160) !important; }

html[data-mode="dark"][data-atmo="on"]:is([data-elem="voda"],[data-elem="ohen"],[data-elem="zeme"]) body {
  background-color: #000;
  background-image: linear-gradient(to bottom,
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 1 * 100%), #000) 0,
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 1 * 100%), #000) calc(min(var(--konec-karty, 420px) + 220px, 70vh) - 340px),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.972 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.1),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.896 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.2),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.784 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.3),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.648 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.4),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.5 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.5),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.352 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.6),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.216 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.7),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.104 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.8),
    color-mix(in srgb, var(--canvas) calc(var(--sila, 1) * 0.028 * 100%), #000) calc((min(var(--konec-karty, 420px) + 220px, 70vh) - 340px) + 340px * 0.9),
    #000 min(var(--konec-karty, 420px) + 220px, 70vh));
  background-repeat: no-repeat;
}

/* T233 (Tereza 28. 10.): „Bez platby – interní“ – výjimečná volba šéfa / manažera, tichý odkaz na vlastním řádku pod platbou (ne další plné tlačítko) */
.rz-sub-platba .rz-interni { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
/* porota K5 (Lucie): řádek „Platba · 450 Kč · zaplatí na místě“ před začátkem termínu tlumeně – stejně jako částka v bloku a řádku (T231) */
.rz-panel .rz-in .rv-tel-r > span.rz-plat-radek .rz-plat-castka.cena-predem { color: var(--muted); }
/* porota K5 (designér): v kalendáři měl odkaz systémový vzhled tlačítka – plný vzhled tichého odkazu ze základu, stejný jako na nástěnce */
.rz-sub-platba button.rz-interni { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 12.5px; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); }
.rz-sub-platba button.rz-interni:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
#zaZnameniPole[hidden], [data-cast="znameni"][hidden] { display: none !important; }   /* T232: pole znamení jen bez klienta */

/* OPRAVY_FINAL E4 (designér 5): telefon – „Zpět“ v podčástech panelu 40 px na dotyk (bylo 34), jako ostatní tlačítka panelu */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .dt-btn.rz-zpet { min-height: 40px !important; height: 40px !important; }   /* OPRAVY_FINAL2 7 (designér): i na PC 40 px */

/* OPRAVY_FINAL E6 (Lucie 5): pole „Doplnit klienta“ stejné jako pole Klient v okně Zamluvit termín (.pole) – jemná linka pole, bez nativní šipky seznamu (datalist ▼) */
.rz-sub-klient .rz-pole { box-shadow: inset 0 0 0 1px var(--pole-line); -webkit-appearance: none; appearance: none; }
.rz-sub-klient .rz-pole::-webkit-calendar-picker-indicator, .rz-sub-klient .rz-pole::-webkit-list-button { display: none !important; opacity: 0; }
.rz-sub-klient .rz-pole[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--cancel); }
/* OPRAVY_FINAL2 12 (Hana E): „Dokončeno“ během 10 s Vrátit obrysové jako na nástěnce (ne plné) – kalendář a Rezervace */
body:not(:has(#resv)) .rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn.on[data-k="done"] { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--hairline) !important; }

/* 29. 10. (majitelka: jednotně podle většiny; zámek: karty a tabulky bez max-width): formulářové karty na celou šířku jako ostatní formuláře */
body[data-aktivni] .main > .content :is(.uziv-form, .slo) { max-width: none; }
html.bez-fab #fabAdd { display: none !important; }
/* ============================================================================
   28. 10. noc – PANEL DETAILU = BUBLINA (porota _qa/kontrola/panel-a-vs-b/POROTA.md 3 : 0 pro A; Tereza: „jen bublina po ten text zhruba“,
   „když bude pár, otevřou se dva nad sebou“). PC a tablet: průhledná oblast vpravo pod lištou (karta od y 92 = první karta, 20 od kraje),
   v ní karta jen na výšku obsahu – u páru / skupiny jedna karta na osobu, mezera 16; nevejdou-li se, posouvá se oblast karet, ne stránka.
   Telefon: list zespodu jako dřív, u páru karty pod sebou v listu (mezera 12). Písmo a odsazení podle PRAVIDLA_ESTETIKY §2–3:
   jméno 14/450, čas 12,5/450 barvou živlu, služba 12,5/400, datum · délka · terapeut · místnost 11,5/400 tlumeně, tlačítka 12,5/500 × 42,
   vnitřek karty 16 × 18 (noc 18 × 20, telefon 16 × 16). Obsah ani tlačítka se nemění. Jen PŘIDÁNO na konec.
   ============================================================================ */
.rz-panel:is(#rzp-, .rz-panel) .rzp-jm { font-size: 14px; line-height: 20px; font-weight: 450; }
.rz-panel:is(#rzp-, .rz-panel) .rzp-kdy { font-size: 12.5px; line-height: 18px; font-weight: 400; }
.rz-panel:is(#rzp-, .rz-panel) .rzp-kdy b { font-weight: 450; color: var(--accent); }
.rz-panel:is(#rzp-, .rz-panel) .rzp-kde { font-size: 11.5px; line-height: 16px; font-weight: 400; color: var(--muted); }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn,
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba > .dt-btn,
.rz-panel:is(#rzp-, .rz-panel) .rz-sub-platba .rz-zbozi > .dt-btn { height: 42px !important; min-height: 42px !important; font-size: 12.5px !important; }
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rz-akce > .dt-btn { font-weight: 500; }
@media (min-width: 761px) {
  .rz-panel:is(#rzp-, .rz-panel) { top: 72px; bottom: auto; right: 0; width: calc(min(440px, 46vw) + 40px); max-height: calc(100dvh - 72px); padding: 20px;
    background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; }
  .rz-panel:is(#rzp-, .rz-panel) > :is(.rzp-x, .rzp-sek) { pointer-events: auto; }
  .rz-panel:is(#rzp-, .rz-panel) .rzp-sek { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: var(--pad-y) var(--pad-x);
    box-shadow: var(--shadow), inset 0 1px 0 var(--specular); }
  .rz-panel:is(#rzp-, .rz-panel) .rzp-sek + .rzp-sek { margin-top: 16px; padding-top: var(--pad-y); }
  /* křížek v první kartě: střed na ose jména, pravý okraj ikony na pravém okraji obsahu karty */
  .rz-panel:is(#rzp-, .rz-panel) > .rzp-x { top: calc(var(--pad-y) + 11px); right: calc(var(--pad-x) + 8.5px); }
}
@media (max-width: 1100px) and (min-width: 761px) { .rz-panel:is(#rzp-, .rz-panel) { width: calc(min(400px, 62vw) + 40px); } }
@media (max-width: 760px) {
  .rz-panel:is(#rzp-, .rz-panel) { padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
  .rz-panel:is(#rzp-, .rz-panel) > .rzp-x { top: 6px; right: 3.5px; }
  .rz-panel:is(#rzp-, .rz-panel):has(> .rzp-sek + .rzp-sek) .rzp-sek { border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; }
  .rz-panel:is(#rzp-, .rz-panel):has(> .rzp-sek + .rzp-sek) .rzp-sek + .rzp-sek { margin-top: 12px; }
  .rz-panel:is(#rzp-, .rz-panel):has(> .rzp-sek + .rzp-sek) > .rzp-x { top: 23px; right: 20.5px; }
}
/* údaj bez popisku (např. „Nemá e-mail – potvrzení ani připomínku nedostane“) = jedna věta v jednom toku, ne slovo pod slovem (noční kontrola U8) */
.rz-panel:is(#rzp-, .rz-panel) .rz-in .rv-tel-r > span:not(:has(> .rz-stit)) { display: block; }
/* otevřený řádek: výraznější linka --rz-akt 1,5 px (§4 „vybrané 1,5 px“, Z7 bez výplně) */
body.rzp-otevreno :is(#resv, .rz-telo) > tr.rz-otevreno > td, body.rzp-otevreno :is(#resv, .rz-telo) > tr.rz-otevreno.rz-aktivni > td { box-shadow: inset 0 1.5px 0 var(--rz-akt), inset 0 -1.5px 0 var(--rz-akt) !important; }

/* 29. 10. (Tereza: „po přepnutí pobočky musí být hned vidět, kde jsem“ – na každé šířce): vedle kolečka SR pobočka – tablet celý název,
   telefon bez úvodních slov shodných se salonem (.sr-pob-pred). Písmo jako název v tlačítku účtu na počítači; nic se neusekává. */
.top-set .sr-pob { display: none; }
@media (max-width: 1099px) {
  .top-set.s52-pob { width: auto; gap: 8px; padding: 0 4px 0 1px; }
  .top-set.s52-pob .sr-pob { display: inline; font-size: 11.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
  .top-set.s52-pob:hover .sr-pob { color: var(--ink-2); }
}
@media (max-width: 640px) {   /* telefon: „SR Medical“ vedle vycentrované „+ Nová rezervace“ vjede zvonek do tlačítka (WebKit 390) – do rozhodnutí Terezy jen „SR“ jako dřív; .sr-pob-pred je připravené */
  .top-set .sr-pob-pred { display: none; }
  .top-set.s52-pob { width: 36px; gap: 0; padding: 0; }
  .top-set.s52-pob .sr-pob { display: none; }
}