/*
  Tantra CRM — vrstva značky nad šablonou Modernize.

  Načítá se AŽ ZA styles-tantra.css a blocks.css.

  DĚLBA PRÁCE — ať se barvy neudržují na dvou místech:
  - Přebarvení celé šablony (modrá → zlatá, studené šedé → espressová
    řada) řeší GENEROVANÝ styles-tantra.css, viz tools/prebarvi_modernize.py.
    Modernize si totiž barvy zapéká i mimo proměnné (.btn-outline-*, fokusy
    formulářů, stíny), kam by override proměnných nedosáhl.
  - Tenhle soubor drží jen to, co z přebarvení nevyplyne: podklad a plátno
    v barvě pilotu, písmo značky a vlastní třídy shellu.

  PÍSMO: Mona Sans, stejné jako praguerelax.cz — self-hostované, viz
  fonts/mona-sans.css. Dřív tu byl Jost z Google Fonts (písmo staré značky
  Tantra Prague); rozhraní recepce má vypadat jako web, na který zákazník
  kouká, a nemá při tom viset na cizím CDN.
*/

/* ==========================================================================
   Podklad — Modernize staví na chladné bílé, pilot na teplém krému
   ========================================================================== */

[data-bs-theme='light'][data-color-theme='Blue_Theme']:root,
[data-color-theme='Blue_Theme']:root {
  /* Jediné, co z přebarvení nevyplývá: plátno stránky. Modernize staví na
     bílé, pilot na krému — a krém musí být o odstín tmavší než karty, aby
     se karty vůbec odlepily od pozadí. */
  --bs-body-bg: var(--ui-pozadi);
  --bs-border-color: var(--ui-linka);
}

/* ==========================================================================
   Písmo
   ========================================================================== */

body {
  font-family: 'Mona Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

/* Mona Sans NEMÁ azbuku — Google ji nabízí jen v subsetech latin, latin-ext
   a vietnamese (ověřeno dotazem na fonts.googleapis.com). Ukrajinská směna by
   proto v jednom řádku četla dvě písma: latinku v Mona Sans a azbuku ze
   záložního systémového grotesku. Radši celé ukrajinské rozhraní jedním
   písmem — nekonzistence uvnitř věty ruší víc než jiné písmo než na webu. */
html[lang='uk'] body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

/* Nadpisy jako na webu: střední řez a stažené prostrkání. Mona Sans je
   variabilní, takže 500 není „skoro tučné", ale vlastní řez — v tabuli
   drží hierarchii, aniž by křičel. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ui-nadpis);
}

/* Číslice jsou ZÁMĚRNĚ proporcionální. Mona Sans má v sadě tabulkových číslic
   (`tnum`) škrtnutou nulu a žádný příznak (`zero`, `ss01`–`ss03`) ji nevypne —
   proměřeno v prohlížeči. Recepce salonu nemá vypadat jako terminál; šířkou se
   v Mona Sans liší jen jednička, takže sloupce čísel drží i bez tnum. Jediná
   výjimka je párovací kód na Testování, kde škrtnutá nula pomáhá.
   Hodiny v patě pruhu mají pevnou šířku, aby při změně číslic neposunuly přepínač. */
.topbar-hodiny {
  display: inline-block;
  min-width: 5ch;
  text-align: center;
}

/* ==========================================================================
   Značka — lotos, wordmark v bočním pruhu a v profilové nabídce
   ========================================================================== */

/* Výška 56 px je `.site_logo .pr-logo-img` z webu (přihlášení); v bočním
   pruhu je lotos menší, viz .bocni-znacka. */
.znacka-lotos {
  height: 56px;
  width: auto;
  flex: none;
}

/* Wordmark v profilové nabídce. Sytá váha 800 je z webu, velikost je menší
   než v patičce — v nabídce je značka popiskem provozu, ne titulkem. */
.znacka-hlavni {
  display: block;
  font-size: var(--ui-pismo-xl);
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.2;
  color: var(--ui-nadpis);
}

/* Vedlejší řádek unese i tři pobočky. V nabídce se smí zalomit — na výšku
   je tu místo a uříznutý název pobočky je horší než dva řádky. */
.znacka-vedlejsi {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--ui-pismo-xs);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-tlumena);
}

/* ==========================================================================
   Boční panel — hlavní menu vlevo jako v administraci Prague Relax

   Předloha je AdminLayout.astro webu (relaxprague-astro): espresso pruh
   248 px, nahoře značka, pod ní obrazovky se zlatým ukazatelem aktivní
   položky, dole profil. Vendor Modernize zůstává v režimu `horizontal`:
   jeho svislý layout posouvá .page-wrapper o 270 px a čeká vlastní
   #sidebarnav se skripty, které nenačítáme. Rám se proto skládá gridem
   tady a z horizontálního režimu se přebíjí jen odsazení obsahu.
   ========================================================================== */

:root {
  --bocni-sirka: 248px;
  --tantra-sirka-obsahu: 1720px;
}

/* Ne každá obrazovka chce stejnou šířku. Tabule rozvrhu a konverzace ji
   využijí; přehled, ceník a karta zákazníka se čtou a na plné šířce by se
   roztáhly do prázdna — ty dostanou užší plochu. */
body.stranka-uzka {
  --tantra-sirka-obsahu: calc(var(--ui-sirka-panelu) + 2.5rem);
}

/* Jen s třídou: přihlášení má vlastní #main-wrapper bez pruhu (login.html
   přebíjí blok shell) a grid by mu kartu sevřel do sloupce pruhu. */
#main-wrapper.bocni-rozlozeni {
  display: grid;
  grid-template-columns: var(--bocni-sirka) minmax(0, 1fr);
  min-height: 100vh;
}

/* Sloupec obsahu se nesmí roztáhnout podle tabule rozvrhu: minmax(0) v gridu
   a min-width tady drží rolování uvnitř stránky, ne přes celé okno. */
.page-wrapper {
  min-width: 0;
}

/* Šířka pracovní plochy. `!important` proto, že Modernize má na
   `[data-boxed-layout=full]` (což app.init.js zapíná) pravidlo
   `max-width: 100%` a na kontejneru `padding-top: 115px !important`
   (místo pro druhou řádku menu) se specificitou, kterou třída nepřebije. */
html[data-layout=horizontal] body .body-wrapper > .container-fluid {
  max-width: var(--tantra-sirka-obsahu) !important;
  margin: 0 auto !important;
  padding: 1.5rem 1.75rem 2rem !important;
}

[data-layout=horizontal] .body-wrapper {
  padding-top: 0 !important;
}

/* Rolovací lišty jsou tenké a teplé — jinak Windows nakreslí do panelu širký
   šedý pruh se šipkami, který v oblém rámu ruší. Obě vlastnosti se dědí,
   takže jedno místo obslouží stránku i všechny vnitřní rolovací plochy. */
body {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-linka-silna) transparent;
}

/* Pruh je přilepený k oknu a roluje jen stránka; při nízkém okně roluje
   sám, aby profil dole nezmizel. Barvy jsou vlastní tokeny --ui-bocni-*
   (vzhled.css): pruh je espresso i ve dne, kdy zbytek rozhraní je krémový. */
.bocni {
  position: sticky;
  top: 0;
  /* Sticky zakládá vrstvu; bez z-indexu by se nabídka profilu (Popper fixed
     uvnitř pruhu) kreslila pod tabulí rozvrhu. 100 je pod závěsem modálu
     (Bootstrap 1050), který pruh překrýt musí. */
  z-index: 100;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1.625rem 1.125rem;
  overflow-y: auto;
  background: var(--ui-bocni-pozadi);
  color: var(--ui-bocni-text);
  scrollbar-color: var(--ui-bocni-linka) transparent;
}

@supports (height: 100dvh) {
  .bocni { height: 100dvh; }
}

/* V noci je plátno samo espresso — pruh od něj oddělí linka, ne barva.
   Vedle obsahu je linka vpravo, v horní řádce (do 991,98 px) dole. */
html[data-bs-theme='dark'] .bocni {
  border-right: 1px solid var(--ui-linka);
}

@media (max-width: 991.98px) {
  html[data-bs-theme='dark'] .bocni {
    border-right: 0;
    border-bottom: 1px solid var(--ui-linka);
  }
}

/* Značka: lotos a vedle něj jméno provozu s podtitulem „Recepce" — jako
   `.sb-brand` předlohy (znak, tučný název, zlatý podtitul). */
.bocni-znacka {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 6px 10px 22px;
  border-bottom: 1px solid var(--ui-bocni-linka);
  color: inherit;
  text-decoration: none;
}

.bocni-znacka .znacka-lotos {
  height: 44px;
}

.bocni-znacka-text {
  line-height: 1.15;
}

.bocni-znacka-text b {
  display: block;
  font-size: var(--ui-pismo-xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ui-bocni-nadpis);
}

.bocni-znacka-text span {
  font-size: var(--ui-pismo-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ui-bocni-zlata);
}

/* Obrazovky. Třídy .lista-zalozky / .lista-zalozka zůstávají z horní lišty —
   hlídají je testy (test_cenik) i skript v base.html; přejmenovat je nesmí
   nikdo. Rozměry položky jsou `.sb-nav a` předlohy: 11×14 px, rádius 12. */
.lista-zalozky {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lista-zalozka {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ui-bocni-tlumena);
  font-size: var(--ui-pismo-l);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

/* Odznak čekajících zpráv u „Konverzace“: zlaté kolečko vpravo v řádku menu. */
.lista-pocet {
  margin-left: auto;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--ui-bocni-zlata);
  color: var(--ui-bocni-pozadi);
  font-size: var(--ui-pismo-xs);
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
}

.lista-pocet[hidden] {
  display: none;
}

/* Ikona je výjimka ze škály písma (dědí jako .ti všude jinde). */
.lista-zalozka .ti {
  font-size: 1.25rem;
  opacity: 0.9;
}

.lista-zalozka:hover {
  background: var(--ui-bocni-hover);
  color: var(--ui-bocni-nadpis);
}

/* Aktivní obrazovka: zlatý podklad 16 % a proužek na hraně pruhu — proužek
   sedí v levém odsazení panelu (left = −padding), přesně jako v předloze.
   Že barva není jediný nosič informace, hlídá aria-current v šabloně. */
.lista-zalozka.active {
  background: var(--ui-bocni-aktivni);
  color: var(--ui-bocni-nadpis);
}

.lista-zalozka.active::before {
  content: '';
  position: absolute;
  left: -1.125rem;
  top: 50%;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--ui-bocni-zlata);
  transform: translateY(-50%);
}

.lista-zalozka.active .ti {
  color: var(--ui-bocni-zlata);
  opacity: 1;
}

/* Fokus klávesnicí: vlastní zlatý prstenec místo `outline: auto` prohlížeče —
   ten si barvu volí sám a na espressu by mohl skončit skoro černý. */
.lista-zalozka:focus-visible,
.lista-profil:focus-visible,
.bocni-znacka:focus-visible {
  outline: 2px solid var(--ui-bocni-zlata);
  outline-offset: 2px;
}

/* Pata: hodiny a přepínač vzhledu v jedné řádce, pod nimi profil. */
.bocni-pata {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--ui-bocni-linka);
}

.bocni-stav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

/* Hodiny drží řez telefonního čísla z hlavičky webu (600), ale bez
   podtržení: není to odkaz, jen údaj, podle kterého recepce pracuje. */
.topbar-hodiny {
  color: var(--ui-bocni-nadpis);
  font-size: var(--ui-pismo-xl);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Přepínač vzhledu na espressu: pilulka a kolečka z vzhled.css (který
   nevlastníme) se přebíjejí jen uvnitř .bocni. Selektor je o třídu delší
   než noční pravidlo ve vzhled.css, jinak by ho v tmavém režimu nepřebil. */
.bocni .vzhled-prepinac {
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
}

.bocni .vzhled-tlacitko {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--ui-bocni-tlumena);
  font-size: var(--ui-pismo-2xl);
}

.bocni .vzhled-prepinac .vzhled-tlacitko:hover {
  background: var(--ui-bocni-hover);
  color: var(--ui-bocni-nadpis);
}

.bocni .vzhled-prepinac .vzhled-tlacitko[aria-pressed='true'],
html[data-bs-theme='dark'] .bocni .vzhled-prepinac .vzhled-tlacitko[aria-pressed='true'] {
  background: transparent;
  box-shadow: none;
  color: var(--ui-bocni-zlata);
}

/* vzhled.css zvětšuje přepínač na dotykových zařízeních na 38 px. Náš menší
   tvar v pruhu (0,2,0) by to pravidlo (0,1,0) přebil i pod prstem, proto ho
   tady vracíme zpátky. */
@media (pointer: coarse) {
  .bocni .vzhled-tlacitko {
    width: 38px;
    height: 38px;
  }
}

/* Profil = spoušť nabídky (`.sb-foot` předlohy): zlaté kolečko s iniciálou,
   jméno, role, šipka. Aktivní stav drží podklad, dokud je nabídka otevřená. */
.lista-profil {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 6px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
}

.lista-profil:hover,
.lista-profil[aria-expanded='true'] {
  background: var(--ui-bocni-hover);
  color: inherit;
}

.lista-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--ui-bocni-zlata);
  color: var(--ui-bocni-pozadi);
  font-size: var(--ui-pismo-l);
  font-weight: 700;
  text-transform: uppercase;
}

.lista-profil-jmeno {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.lista-profil-jmeno b {
  display: block;
  overflow: hidden;
  font-size: var(--ui-pismo-l);
  font-weight: 600;
  color: var(--ui-bocni-nadpis);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-profil-jmeno span {
  display: block;
  font-size: var(--ui-pismo-s);
  color: var(--ui-bocni-slaba);
}

.bocni-sipka {
  flex: none;
  color: var(--ui-bocni-slaba);
}

/* Avatar v rozbalené nabídce zůstává tichý: teplá plocha, zlaté písmeno. */
.lista-avatar-velky {
  background: var(--ui-plocha);
  color: var(--ui-zlata);
}

/* Tablet a telefon: pruh se položí nahoru jako jedna řádka — lotos,
   rolovací obrazovky, přepínač vzhledu a avatar. Hranice 992 px: pod ní by
   248 px vedle tabule rozvrhu ukrojilo třetinu displeje (iPad na výšku).
   Pruh při rolování odjíždí, jako dřív horní lišta — na telefonu je každý
   řádek tabule obsah. */
@media (max-width: 991.98px) {
  #main-wrapper.bocni-rozlozeni {
    display: block;
  }

  .bocni {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    height: auto;
    padding: 0.5rem 0.75rem;
    overflow: visible;
  }

  .bocni-znacka {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Web na telefonu stahuje logo na 42 px. */
  .bocni-znacka .znacka-lotos {
    height: 42px;
  }

  .bocni-znacka-text {
    display: none;
  }

  /* Krajní záložka se utne v půlce slova — prolnutí do ztracena na okraji
     řekne, že se dá rolovat. Vpravo vždy; vlevo jen když je pás posunutý
     (atribut data-posunuto nastavuje skript v base.html), jinak by na
     začátku vybledlo „R" v Rozvrh. Odsazení za poslední položkou je stejně
     široké jako prolnutí, ať dorolovaná poslední záložka nemizí v něm. */
  .lista-zalozky {
    --lista-prolnuti-vlevo: 0px;
    flex: 1 1 auto;
    flex-direction: row;
    gap: 0.25rem;
    min-width: 0;
    padding-inline-end: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--lista-prolnuti-vlevo),
      black calc(100% - 1.5rem),
      transparent
    );
  }

  .lista-zalozky::-webkit-scrollbar { display: none; }

  .lista-zalozky[data-posunuto] {
    --lista-prolnuti-vlevo: 1.5rem;
  }

  /* Jen slova — s ikonami se tři obrazovky na 390 px nevejdou. Pod prstem
     je záložka terč, ne odkaz v textu: 40 px na výšku je minimum, pod kterým
     se na tabletu recepce trefuje vedle. */
  .lista-zalozka {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    font-size: var(--ui-pismo-m);
  }

  .lista-zalozka .ti { display: none; }

  .lista-zalozka.active::before { display: none; }

  .bocni-pata {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }

  .bocni-stav { padding: 0; }

  .topbar-hodiny { display: none; }

  /* Z profilu zbude jen kolečko s iniciálou — jméno je v nabídce. */
  .lista-profil {
    gap: 0;
    padding: 0;
  }

  .lista-profil-jmeno,
  .bocni-sipka {
    display: none;
  }

  .lista-avatar {
    width: 38px;
    height: 38px;
  }
}

/* Telefon: čísla jsou naměřená (390 i 360 px) — tři obrazovky vedle lotosu,
   přepínače vzhledu a avataru; pod tím se pás roluje stranou. */
@media (max-width: 575.98px) {
  .bocni {
    gap: 0.45rem;
    padding: 0.4rem 0.45rem;
  }
}


/* ==========================================================================
   Chybové stránky

   404 dědí z base.html, takže má boční pruh, plátno i písmo jako zbytek recepce —
   je to jediné místo, kde rozhraní dřív přestávalo být Prague Relax. 500 je
   naopak samostatná stránka bez závislostí (templates/500.html): renderuje se
   ve chvíli, kdy aplikace spadla, a nesmí spoléhat ani na tenhle soubor.
   ========================================================================== */

.chyba-stranka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem 3.5rem;
  text-align: center;
}

.chyba-lotos {
  height: 72px;
  width: auto;
}

.chyba-nadpis {
  margin: 0.5rem 0 0;
  font-size: var(--ui-pismo-3xl);
}

/* Šířka na míru větě: delší řádek by se na široké obrazovce četl přes půl
   monitoru a chybová hláška má být jedním pohledem přečtená. */
.chyba-popis {
  margin: 0;
  max-width: 32rem;
  font-size: var(--ui-pismo-l);
  color: var(--ui-tlumena);
}

.chyba-stranka .btn {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Hustota — recepce potřebuje tabuli, ne vzdušný marketingový dashboard
   ========================================================================== */

/* Panel stránky je jen odsazený sloupec — desky jsou karty uvnitř a plavou
   na krémovém plátně jako na webu. Podklad, rám ani rádius tu nejsou
   záměrně: ui.css (.crm-ui .stranka-panel) je stejně nuluje. */
.stranka-panel {
  padding: 1.25rem 1.5rem;
}

.stranka-panel > main > .card:last-child,
.stranka-panel > main > .row:last-child { margin-bottom: 0 !important; }

/* Karta je bílá deska na krémovém plátně. Modernize má --bs-card-bg
   navázané na --bs-body-bg, takže by karta s pozadím splynula. */
.card {
  --bs-card-bg: var(--ui-papir);
  background-color: var(--ui-papir);
  border: 1px solid var(--ui-linka);
  border-radius: 16px;
  box-shadow: 0 1px 3px var(--ui-stin);
}

/* Písková deska — panel, který v návrhu sedí vedle bílého obsahu (seznam
   vláken, hlavička karty zákazníka). Karta se všemi vlastnostmi, jen podklad. */
.card.deska-pisek {
  --bs-card-bg: var(--ui-plocha);
  background-color: var(--ui-plocha);
  border-color: var(--ui-linka);
}

/* Hlavička karty. Modernize dává 15px/30px — dashboardová vzdušnost, kterou
   tabule recepce nepotřebuje. Hustota patří sem, ne do `py-2 px-3` u každé
   karty zvlášť: šablony tak píšou holé `card-header` a vypadají všude stejně. */
.card-header {
  padding: 0.6rem 1rem;
  background: transparent;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.6rem;
}

/* Hlavička tabulky nese pískový pruh — sloupce tak drží pohromadě i v dlouhé
   tabuli a nemusí je oddělovat linka navíc. */
.table > thead > tr > th {
  background: var(--ui-plocha);
  color: var(--ui-nadpis);
  border-bottom-color: var(--ui-linka);
  font-weight: 600;
}

/* Modernize dává .table-responsive `overflow-x: clip` — tabule se pak na
   telefonu nedá posunout stranou (osa končí v 16 h) a mobilní Chrome kvůli
   neuzavřenému přetečení roztáhne celé rozvržení na šířku tabulky, takže
   uteče i přilepený boční pruh. Zpátky na rolování. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Kontejner musí být i polohovaný: .visually-hidden popisky (sloupec Akce)
     jsou position:absolute a bez toho se kotví až ke kartě — sedí pak na
     pravém kraji široké tabulky mimo rolovací box a roztáhnou stránku. */
  position: relative;
}

/* Tabulka, která sedí přímo v kartě (card-body p-0 nebo rovnou .table-responsive),
   nesmí končit na rámečku — krajní buňky si drží odstup shodný s hlavičkou karty.
   Řeší se tady, ne třídou u každé tabulky: je to vlastnost karty, ne tabulky. */
.card-body.p-0 > .table-responsive > .table > :not(caption) > * > *:first-child,
.card > .table-responsive > .table > :not(caption) > * > *:first-child {
  padding-left: 1rem;
}

.card-body.p-0 > .table-responsive > .table > :not(caption) > * > *:last-child,
.card > .table-responsive > .table > :not(caption) > * > *:last-child {
  padding-right: 1rem;
}

/* ==========================================================================
   Denní tabule — všechny masérky na jedné časové ose
   ========================================================================== */

/* Jméno drží levý okraj i při rolování osy stranou. */
.rozvrh-den-jmeno {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bs-card-bg, var(--ui-papir));
  min-width: 210px;
}

.rozvrh-den-tabule td,
.rozvrh-den-tabule th {
  vertical-align: middle;
}

/* Osa dne. Mřížka po hodinách je v pozadí, aby šlo odhadnout čas i bez popisků. */
.rozvrh-osa {
  position: relative;
  height: 26px;
  min-width: 560px;
  border-radius: var(--bs-border-radius-sm);
  background: repeating-linear-gradient(
    90deg,
    var(--ui-plocha) 0,
    var(--ui-plocha) calc(100% / 19 - 1px),
    var(--ui-linka) calc(100% / 19 - 1px),
    var(--ui-linka) calc(100% / 19)
  );
}

.rozvrh-osa-hodina {
  position: absolute;
  top: 4px;
  font-size: var(--ui-pismo-xs);
  color: var(--ui-tlumena);
  transform: translateX(2px);
}

/* Podklad směny: kde masérka slouží. Rezervace leží nad ním. */
.rozvrh-osa-smena {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: var(--ui-plocha-hover);
  border-radius: var(--bs-border-radius-sm);
}

/* ==========================================================================
   Týdenní plánovač směn — mřížka masérky × dny
   ========================================================================== */

/* POZOR NA VRSTVY: barvy, rádiusy a rozměry plánovače vlastní rozvrh.css —
   jen ta vrstva má selektor `.crm-ui .ui-planovac .planovac-*` (0,3,0), takže
   vždy vyhraje. Zvýraznění obsazené a neúplné buňky je tam, ne tady; kdo ho
   odtamtud smaže s tím, že „to má ui.css", zruší ho úplně. Tady zůstává jen
   struktura, kterou nikdo jiný nepíše. */

/* Jméno drží levý okraj i při vodorovném rolování mřížky. */
.planovac-jmeno {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 180px;
}

/* Buňka drží dvojici časů od–do pod sebou, ne vedle sebe: při sedmi dnech je
   to rozdíl mezi „vejde se" a „roluje se". Rám je průhledný, aby ho zvýraznění
   v rozvrh.css jen přebarvilo a mřížka při tom neposkočila o dva pixely. */
.planovac-bunka {
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
}

.planovac-bunka .form-control,
.planovac-bunka .form-select {
  padding: 0.15rem 0.35rem;
  text-align: center;
}

/* Šipka roletky se musí vejít vedle zkráceného textu pobočky. */
.planovac-bunka .form-select {
  background-position: right 0.3rem center;
  padding-right: 1.2rem;
}

/* Sekundární tlačítka. Modernize má --bs-secondary zelenou, takže každý
   přepínač i „zpět" svítily do teplého krému cizí barvou. Přeladíme je na
   neutrální písek se zlatým aktivním stavem — barvy v aplikaci mají význam
   (viz štítky níže) a ovládací prvek žádný nenese. */
.btn-outline-secondary {
  --bs-btn-color: var(--ui-tlumena);
  --bs-btn-border-color: var(--ui-linka);
  --bs-btn-hover-color: var(--ui-nadpis);
  --bs-btn-hover-bg: var(--ui-plocha);
  --bs-btn-hover-border-color: var(--ui-linka-silna);
  --bs-btn-active-color: var(--ui-nadpis);
  --bs-btn-active-bg: var(--ui-plocha);
  --bs-btn-active-border-color: var(--ui-akcent);
  --bs-btn-focus-shadow-rgb: var(--ui-akcent-rgb);
  --bs-btn-disabled-color: var(--ui-tlumena);
  --bs-btn-disabled-border-color: var(--ui-linka);
}

/* ==========================================================================
   Tvarosloví z návrhu — pilulky, oblé desky, pískové pouzdro přepínačů

   Barvy zůstávají, mění se tvary, a to na jednom místě pro celou aplikaci:
   tlačítka a pole jsou pilulky, přepínače (btn-group) sedí v pískovém
   pouzdru s bílou aktivní volbou — stejně jako přepínač pohledu rozvrhu —
   a modaly i výstrahy mají stejné zaoblení jako karty.
   ========================================================================== */

.btn {
  --bs-btn-border-radius: 999px;
  border-radius: 999px;
}

.form-control,
.form-select {
  border-radius: 999px;
}

/* Víceřádkové pole pilulka být nemůže — oblé rohy jako karta. */
textarea.form-control {
  border-radius: 16px;
}

.form-control-sm,
.form-select-sm {
  padding-left: 0.85rem;
}

.form-select-sm {
  padding-right: 2.1rem;
}

.form-control:not(.form-control-sm),
.form-select:not(.form-select-sm) {
  padding-left: 1rem;
}

.btn-group {
  background: var(--ui-plocha);
  border: 1px solid var(--ui-linka);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

/* Proměnné Bootstrapu místo přebíjení tříd: platí pro každou variantu
   (outline-secondary v tabuli, outline-primary ve stavu rezervace). */
.btn-group > .btn {
  --bs-btn-color: var(--ui-tlumena);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ui-nadpis);
  --bs-btn-hover-bg: var(--ui-plocha);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ui-nadpis);
  --bs-btn-active-bg: var(--ui-papir);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: 0 1px 3px var(--ui-stin);
  border-radius: 999px !important;
  margin-left: 0 !important;
  font-weight: 500;
}

.btn-group > .btn.active {
  box-shadow: 0 1px 3px var(--ui-stin);
}

/* Na pískové desce (panel vláken) by pískové pouzdro splynulo s podkladem —
   tam se prosvětlí, stejně jako přepínač pohledu rozvrhu. */
.deska-pisek .btn-group {
  background: var(--ui-plocha);
  border-color: transparent;
}

.btn-group > .btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ui-fokus);
}

/* Ikonová tlačítka v řádcích tabule (tužka, plus) — kolečka jako akce
   v hlavičce vlákna, ne pilulky s ikonou uprostřed. */
.js-rez-plus,
.js-smena-uprava,
.js-rez-uprava {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Wordmark nad formulářem — 26px/800 jako lockup na webu, ne obyčejný nadpis.
   Selektor je záměrně přes obal lockupu: ui.css tvaruje `.prihlaseni-karta h1`
   jako nadpis stránky (500) a bez třídy navíc by ho značka nepřebila. */
.crm-ui .prihlaseni-znacka .prihlaseni-wordmark {
  font-size: var(--ui-pismo-3xl);
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--ui-nadpis);
}

/* ==========================================================================
   Štítky — jeden systém pro celou aplikaci

   Pravidlo: barva něco znamená, popis je neutrální. Bootstrapí paleta
   (primary/secondary/success/info/warning/danger) dávala na jednu obrazovku
   zelené pobočky, modré stavy, žlutá počítadla a červené „otevřená" — pět
   barev, které spolu nemluví a ani jedna nenesla informaci.

   Významy jsou tři, shodné s bloky rezervací na liště:
     mosaz  = čeká na nás / plánované / značka
     šalvěj = hotovo, v pořádku
     cihla  = problém, vyžaduje pozornost
   Všechno ostatní (pobočka, kanál, jazyk, datum, počet) je neutrální.
   ========================================================================== */

/* Barvy štítků drží ui.css — společná vrstva; tady zůstává jen řez písma,
   který se v ui.css nenastavuje. */
.stitek,
.stitek--mosaz,
.stitek--salvej,
.stitek--cihla {
  font-weight: 500;
}

/* ==========================================================================
   Tabule rozvrhu — hlavičkový řádek dne a proužek obsazenosti směny
   ========================================================================== */

.rozvrh-den th {
  background: var(--ui-plocha);
  color: var(--ui-tlumena);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--ui-pismo-xs);
}

/* Rozklikávací řádek směny. Kurzor a šipka říkají, že se dá otevřít;
   detail nese rezervace od–do včetně proběhlých masáží. */
.rozvrh-radek {
  cursor: pointer;
}

.rozvrh-sipka {
  transition: transform 0.15s ease;
}

.rozvrh-radek.je-otevreny .rozvrh-sipka {
  transform: rotate(90deg);
}

/* Detail sedí na tlumeném podkladu (o odstín tmavší krém, ne mosazný nádech
   --bs-primary-bg-subtle: ten se s okrovými bloky rezervací tluče) a nese
   svislou linku, aby bylo poznat, ke které směně patří. */
.rozvrh-detail {
  background: var(--ui-plocha);
  border-left: 3px solid var(--ui-linka-silna);
}

/* Tabulka detailu: šířka podle obsahu (roztažená přes celý řádek by mezi
   „10:00" a jménem nechala čtyři centimetry prázdna), ale v bílém rámečku —
   na tlumeném podkladu detailu jinak nejsou vidět okraje ani sloupce. */
.rozvrh-detail-ramecek {
  max-width: 100%;
  overflow-x: auto;
  background: var(--ui-papir);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.rozvrh-detail-tabulka {
  --bs-table-bg: transparent;
}

.rozvrh-detail-tabulka > :not(caption) > * > * {
  padding: 0.4rem 1.1rem;
  border-bottom-color: var(--bs-border-color);
}

/* Hlavička odsazená typograficky, ne linkou navíc — linka je až pod ní. */
.rozvrh-detail-tabulka thead th {
  font-size: var(--ui-pismo-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-tlumena);
}

/* Poslední řádek nekreslí linku na okraj rámečku. */
.rozvrh-detail-tabulka > tbody > tr:last-child > * {
  border-bottom-width: 0;
}

/* Řádek detailu je nosič, ne data: nesmí kreslit linku pod sbalenou směnou
   ani reagovat na hover jako samostatný řádek tabulky. */
.rozvrh-detail-radek > td {
  background: transparent;
}

.table-hover > tbody > tr.rozvrh-detail-radek:hover > * {
  --bs-table-bg-state: transparent;
}

/* Lišta směny s bloky rezervací. Šířka lišty = délka směny, blok sedí na
   procentuální pozici svého začátku — proto position: absolute a ne flex.
   Minimální šířka drží čitelnost i u hodinové rezervace na noční směně. */
.rez-linta {
  position: relative;
  height: 26px;
  min-width: 220px;
  border-radius: var(--bs-border-radius-sm);
  background: repeating-linear-gradient(
    90deg,
    var(--ui-plocha) 0,
    var(--ui-plocha) calc(100% / 19 - 1px),
    var(--ui-linka) calc(100% / 19 - 1px),
    var(--ui-linka) calc(100% / 19)
  );
}

.rez-blok {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 34px;
}

/* Blok je barevná výplň v čase, ne tlačítko s popiskem — jméno se do něj
   nevejde a zkratka „Mich O…" nikomu nepomůže. Bílý obrys odděluje dva
   bloky, které na sebe v čase navazují. */
.rez-blok-tlacitko {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--ui-papir);
  border-radius: var(--bs-border-radius-sm);
  cursor: pointer;
}

/* Paleta stavů. Drží se značky (mosaz, šalvěj, cihla z trychtýře) místo
   Bootstrapích bg-success/bg-warning/bg-danger — ty do teplého krému svítily
   jako semafor. Stavy jsou jen tři: rezervace po termínu bez zapsaného
   výsledku zůstává plánovaná, dokud jí recepce výsledek nedá. */
.rez-blok--planovana {
  background: var(--ui-akcent);
}

.rez-blok--probehlo {
  background: var(--ui-salvej);
}

.rez-blok--neprisel {
  background: var(--ui-cihla);
}

.rez-blok-tlacitko:hover,
.rez-blok-tlacitko:focus-visible {
  filter: brightness(1.1);
  outline: none;
  box-shadow: 0 0 0 2px var(--ui-fokus);
}

/* Proužek stojí vedle procent na stejné ose — dřív visel pod nimi zarovnaný
   doprava, takže číslo a pruh nebyly ve stejné výšce. */
.rozvrh-obsazenost {
  display: inline-flex;
  width: 72px;
  height: 5px;
  flex: none;
}

/* Notifikační kolečko s počtem nezodpovězených zpráv (avatar v seznamu
   konverzací, položka menu). Drobné a kulaté i pro dvojciferné číslo. */
.konv-ceka,
.menu-znacka {
  background-color: var(--ui-cihla) !important;
  color: var(--ui-na-akcentu) !important;
  min-width: 18px;
  padding: 2px 5px;
  font-size: var(--ui-pismo-xs);
  line-height: 1;
}

/* ==========================================================================
   Rezervační modal — sekce místo jedné dlouhé řady polí
   ========================================================================== */

.rez-modal .modal-header {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}

.rez-modal .modal-footer {
  border-top: 0;
  padding-top: 0.5rem;
}

/* Každá sekce má svůj pruh a nadpis — formulář se pak čte po blocích
   (kdo, kdy, v jakém stavu), ne jako sloupec polí bez hierarchie. */
.rez-sekce {
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  background: var(--ui-plocha);
}

.rez-sekce--posledni {
  margin-bottom: 0;
}

.rez-sekce-nadpis {
  font-size: var(--ui-pismo-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-tlumena);
  margin-bottom: 0.4rem;
}

.rez-sekce .form-label {
  font-size: var(--ui-pismo-s);
  margin-bottom: 0.2rem;
  color: var(--ui-tlumena);
}

.rez-sekce .form-text {
  font-size: var(--ui-pismo-xs);
}

/* Prevent accidental drag selection from making the modal look broken. */
.rez-modal .modal-header,
.rez-modal .rez-sekce-nadpis,
.rez-modal .form-label,
.rez-modal .form-text,
.rez-modal .form-check-label,
.rez-modal .rez-cena,
.rez-modal .rez-obcerstveni summary,
.rez-modal .rez-varianty .btn,
.rez-modal .modal-footer .btn {
  user-select: none;
}

.rez-modal input,
.rez-modal textarea {
  user-select: text;
}

.rez-modal input::selection,
.rez-modal textarea::selection {
  background: var(--ui-akcent-tlumena);
  color: var(--ui-nadpis);
}

.rez-modal .form-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.75rem;
  padding-left: 0;
}

.rez-modal .form-check .form-check-input {
  flex: 0 0 auto;
  margin: 0;
}

.rez-modal .form-check .form-check-label {
  line-height: 1.25;
}

/* ==========================================================================
   Mobil — recepce má telefon v ruce častěji než myš

   Pravidla jsou v jednom bloku na konci souboru, ne rozseté u jednotlivých
   komponent: mobilní chování se ladí jako celek („co se vejde na 390 px")
   a rozházené media dotazy se pak přebíjejí navzájem.
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Pruh s obrazovkami je nahoře (pravidla u .bocni výš) — tady jen obsah. */
  .stranka-panel {
    border-radius: 16px;
    padding: 0.75rem 0.5rem;
  }

  /* Plátno ubírá odsazení — na úzké obrazovce je každý pixel obsah. Půl remu
     plátna a půl remu panelu dá kartám 1 rem od kraje: sedí těsně uvnitř desky
     lišty (ta má 0,5 rem), jako na webu, kde je hlavička širší než obsah.
     Selektor i !important kopírují desktopové pravidlo výš — bez nich by tenhle
     přepis tiše prohrál a odsazení zůstalo 1,25 rem. */
  html[data-layout=horizontal] body .body-wrapper > .container-fluid {
    padding: 1rem 0.5rem 1.5rem !important;
  }

  .card-header {
    padding: 0.5rem 0.75rem;
  }

  .card-body {
    --bs-card-spacer-x: 0.75rem;
    --bs-card-spacer-y: 0.75rem;
  }

  /* Záhlaví stránky: nadpis a akce pod sebou, ať se tlačítka nemačkají. */
  main > .d-flex.justify-content-between > h4 {
    font-size: var(--ui-pismo-2xl);
  }

  /* Rozložení filtrů rozvrhu na telefonu vlastní rozvrh.css (mřížka 2×2). */
  .rozvrh-ovladani .btn-group { flex: 0 0 auto; }

  /* Tabulky drží hustotu, ale menší písmo a užší buňky. */
  .table > :not(caption) > * > * {
    padding: 0.45rem 0.4rem;
    font-size: var(--ui-pismo-m);
  }

  .card-body.p-0 > .table-responsive > .table > :not(caption) > * > *:first-child,
  .card > .table-responsive > .table > :not(caption) > * > *:first-child {
    padding-left: 0.6rem;
  }

  .card-body.p-0 > .table-responsive > .table > :not(caption) > * > *:last-child,
  .card > .table-responsive > .table > :not(caption) > * > *:last-child {
    padding-right: 0.6rem;
  }

  /* Denní tabule a plánovač se rolují stranou — jméno drží kraj, ale užší.
     Šířku buňky plánovače tu nezužujeme: vlastní ji ui.css a tenhle selektor
     by ji nepřebil, takže by pravidlo jen lhalo. */
  .rozvrh-den-jmeno,
  .planovac-jmeno {
    min-width: 140px;
  }

  .rozvrh-osa { min-width: 420px; }

}

/* Kde se dotýká prst, tam nesmí být hover-only ovládání — křížek u fotky
   v kompozici se na dotykových zařízeních ukazuje pořád. */
@media (hover: none) {
  .zk-tray-item .zk-tray-rm { opacity: 1; }
}

/* Form wrapper participates in Bootstrap's scrollable modal layout. */
.rez-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.rez-modal .modal-header, .rez-modal .modal-footer { flex-shrink: 0; }
.rez-varianty { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rez-varianty .btn { border-radius: 12px; padding: 0.4rem 0.65rem; line-height: 1.3; }
.rez-varianty .btn span { display: block; font-size: var(--ui-pismo-s); }
.rez-obcerstveni summary { cursor: pointer; color: var(--ui-zlata); font-size: var(--ui-pismo-m); }
.rez-obcerstveni-radek { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.5rem; }
.rez-obcerstveni-radek label { flex: 1; margin: 0; font-size: var(--ui-pismo-m); }
.rez-obcerstveni-radek input { width: 4.6rem; padding: 0.3rem 0.5rem; }
.rez-cena { border-top: 1px solid var(--bs-border-color); padding-top: 0.6rem; font-size: var(--ui-pismo-m); }

/* Zvoneček s oznámeními — vedle hodin v bočním panelu (operator/_zvonek.html). */
.zvonek {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
}

.zvonek:hover,
.zvonek:focus-visible {
  opacity: 1;
  color: inherit;
}

.zvonek--nove {
  opacity: 1;
}

.zvonek-pocet {
  position: absolute;
  top: -0.2rem;
  right: -0.35rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 0.55rem;
  background: var(--ui-cihla, #b5533c);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1rem;
  text-align: center;
}

/* Přepínač jazyka vedle hodin (operator/_jazyk.html). */
.jazyk-tlacitko {
  min-width: 2.1rem;
  height: 2rem;
  padding: 0 0.4rem;
  border: 1px solid currentColor;
  border-radius: 1rem;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

.jazyk-tlacitko:hover,
.jazyk-tlacitko:focus-visible,
.jazyk-tlacitko[aria-expanded="true"] {
  opacity: 1;
}

.jazyk-nabidka { min-width: 10rem; }

.jazyk-kod {
  display: inline-block;
  width: 2rem;
  font-weight: 600;
}