/* Společná vizuální vrstva recepce; stránkové styly následují za ní.

   Tvarosloví je přenesené z webu Prague Relax: karty jsou bílé desky bez rámu,
   které plavou na krémovém plátně a drží je jen široký měkký stín; tlačítka
   a štítky jsou pilulky; zlatá je dekor a peníze, espresso jsou nadpisy.
   Geometrie je v obou režimech stejná — noc mění barvy, ne tvary. */
.crm-ui {
  --ui-polomer: 12px;
  --ui-mezera: 1.25rem;
  --ui-sirka-panelu: 1280px;
  --bs-border-color: var(--ui-linka);
  --bs-secondary-color: var(--ui-tlumena);
  --bs-body-color: var(--ui-text);
}

/* Panel stránky už není deska, jen sloupec s odsazením — desky jsou karty
   uvnitř. Dvě vrstvy papíru přes sebe braly kartám stín i hloubku. */
.crm-ui .stranka-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.crm-ui.stranka-uzka .stranka-panel {
  max-width: var(--ui-sirka-panelu);
  margin-right: auto;
  margin-left: auto;
}

.crm-ui .text-muted {
  color: var(--ui-tlumena) !important;
}

/* Bootstrapovská utilita `.small` je `.875em`, takže se násobila po rodičích
   a dělala zlomky (12,25 px v nápovědě plánovače) — to je přesně příčina
   rozsypané škály z auditu T1. Element `<small>` schválně netrefujeme: nese
   „Kč“ u velkého čísla v přehledu, kde má zůstat poměrný k nadpisu. */
.crm-ui .small {
  font-size: var(--ui-pismo-s);
}

.crm-ui .ui-stranka {
  min-width: 0;
}

/* Jeden odstup mezi deskami stránky (audit K4). Karty měly šest různých
   `margin-bottom` podle toho, kdo stránku psal. Mezeru nese následník, ne
   předchůdce — poslední karta tak nikdy nedělá patu pod obsahem.

   Nulování je nutné: vendorovaný Modernize dává `.card { margin-bottom:
   var(--bs-card-group-margin) }` = 24 px. Dokud tu stálo vlastní
   `margin-bottom`, bylo to přebité; po přechodu na `+` by se obě mezery
   slily na max(24, 20) a stránka by měla 24px patu pod poslední kartou. */
.crm-ui .ui-stranka .card {
  margin-bottom: 0; /* i karty v mřížkách (přehled) — jinak tam zůstane 24 px vendoru */
}

.crm-ui .ui-stranka > .card + .card,
.crm-ui .ui-stranka > .card + .row,
.crm-ui .ui-stranka > .row + .card {
  margin-top: var(--ui-mezera-karet);
}

/* ==========================================================================
   Karty
   ========================================================================== */

.crm-ui .card {
  --bs-card-spacer-x: 1rem;
  --bs-card-spacer-y: 1rem;
  --bs-card-border-color: transparent;
  --bs-card-bg: var(--ui-papir);
  border: 0;
  border-radius: var(--ui-polomer);
  background: var(--ui-papir);
  box-shadow: var(--ui-stin-karta);
}

.crm-ui .card.deska-pisek {
  --bs-card-bg: var(--ui-plocha);
  background: var(--ui-plocha);
}

/* Karta zůstává celá bílá jako na webu; sekci oddělí název a vlasová linka.
   Krémový pruh si nechává jen hlavička tabulky — dva pruhy nad sebou dělaly
   z každé karty béžový blok. */
.crm-ui .card-header {
  padding: .85rem 1.1rem;
  background: transparent;
  border-bottom: 1px solid var(--ui-linka);
}

.crm-ui .card-header:first-child {
  border-radius: var(--ui-polomer) var(--ui-polomer) 0 0;
}

.crm-ui .card-header :is(h5, h6) {
  /* Nadpisy karet používají také velikostní utility tématu. */
  font-size: var(--ui-pismo-xl) !important;
  font-weight: 600;
  color: var(--ui-nadpis);
  letter-spacing: -.01em;
}

.crm-ui .card-body {
  padding: 1.1rem;
}

/* Hlavička karty s doplňkem vpravo („Celkem 12“, „Za zvolené období“).
   Sdílená podoba pro přehled i kartu zákazníka. */
.crm-ui .card-header.ui-sekce-hlavicka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem .75rem;
}

/* Doplněk je věta („Odkud chodí a kolik se jich promění v rezervaci"), ne
   popisek — ve verzálkách s prostrkáním se z něj stával dlouhý pruh. Verzálky
   nese eyebrow vedle něj. */
.crm-ui .card-header.ui-sekce-hlavicka > span {
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-s);
  font-weight: 400;
}

.crm-ui .card-footer {
  padding: .85rem 1rem;
  border-top-color: var(--ui-linka);
  background: var(--ui-plocha);
}

/* ==========================================================================
   Hlavička stránky
   ========================================================================== */

/* Nadpis vlevo, akce nebo filtr vpravo. Rozvržení je tady, ne v utilitách
   u každé šablony — dřív si ho každá stránka skládala sama. */
.crm-ui .ui-stranka-hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  min-height: 3.5rem;
  margin-top: 0 !important;
  margin-bottom: var(--ui-mezera) !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ui-linka);
}

.crm-ui .ui-stranka h4 {
  font-size: var(--ui-pismo-3xl);
  /* Web má všechny nadpisy v jedné váze (500); rozvrh měl 600 (audit K6).
     Šablony nesou utilitu .fw-semibold, a ta má !important — přebít ji jde
     jen stejnou zbraní, dokud ji stránkoví agenti z markupu nevyndají. */
  font-weight: 500 !important;
  color: var(--ui-nadpis);
  letter-spacing: -.03em;
  line-height: 1.2;
}

.crm-ui .ui-stranka-hlavicka p {
  font-size: var(--ui-pismo-m);
}

/* Popisek sekce (port .sub-title webu): čárkovaný rámeček a zlatá ikona.
   Sedí tam, kde by nadpis byl moc velký, ale text potřebuje váhu.

   Jediná podoba pro celou recepci (audit K1): rozvrh měl eyebrow o pětinu
   menší, o dvě váhy lehčí a šedý. Barva je akcentová zlatá — na webu je
   `.sub-title` jediný zlatý text v sekci (K2); ikona bere dekorativní.
   Čárkovaný rám je vědomá odchylka (specifikace §9e): nasazený web ho
   ztratil, ale v husté recepci popisek potřebuje ohraničit. */
/* Eyebrow v hlavičce stránky leží na krémovém plátně, ne na bílé kartě:
   --ui-akcent tam má 4,03:1 (13 px/700 potřebuje 4,5), tmavší zlatá 5,46:1. */
.crm-ui .ui-stranka-hlavicka .ui-eyebrow {
  color: var(--ui-zlata);
}

.crm-ui .ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px dashed var(--ui-linka-silna);
  border-radius: 4px;
  color: var(--ui-akcent);
  font-size: var(--ui-pismo-m);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.crm-ui .ui-eyebrow > i {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ui-zlata-svetla);
  font-size: var(--ui-pismo-xl);
  line-height: 1;
}

/* ==========================================================================
   Tlačítka
   ========================================================================== */

.crm-ui .btn {
  --bs-btn-border-radius: 50px;
  --bs-btn-focus-shadow-rgb: var(--ui-akcent-rgb);
  border-radius: 50px;
  min-height: 40px;
  /* Modernize dává `--bs-btn-font-size: 14` (bez jednotky, tedy neplatné)
     a tlačítko pak velikost dědilo po okolí. Tady ji nese token. */
  font-size: var(--ui-pismo-l);
  font-weight: 600;
  /* Modernize dává tlačítkům drobný stín; tlačítka webu ho nemají a stín
     je tu vyhrazený kartám a rozbalovacím nabídkám. */
  box-shadow: none;
}

.crm-ui .btn-sm {
  min-height: 34px;
  padding: .35rem .85rem;
  border-radius: 50px;
  font-size: var(--ui-pismo-s);
}

/* Kruhová ikonová tlačítka v řádcích tabule si rozměr nesou z tantra.css;
   společná minimální výška by z koleček udělala ovály. */
.crm-ui :is(.js-rez-plus, .js-smena-uprava, .js-rez-uprava) {
  min-height: 0;
}

html[data-bs-theme][data-color-theme]:root .crm-ui .btn-primary {
  --bs-btn-color: var(--ui-na-akcentu);
  --bs-btn-hover-color: var(--ui-na-akcentu);
  --bs-btn-active-color: var(--ui-na-akcentu);
  --bs-btn-disabled-color: var(--ui-na-akcentu);
  --bs-btn-bg: var(--ui-akcent);
  --bs-btn-border-color: var(--ui-akcent);
  --bs-btn-hover-bg: var(--ui-akcent-hover);
  --bs-btn-hover-border-color: var(--ui-akcent-hover);
  --bs-btn-active-bg: var(--ui-akcent-hover);
  --bs-btn-active-border-color: var(--ui-akcent-hover);
  --bs-btn-disabled-bg: var(--ui-akcent);
  --bs-btn-disabled-border-color: var(--ui-akcent);
}

/* Obrysové varianty jsou prázdné pilulky se silnější linkou; na hover se
   zalijí zlatou, jak to dělá kolečko u odkazových tlačítek webu. */
html[data-bs-theme][data-color-theme]:root .crm-ui :is(.btn-outline-primary, .btn-outline-secondary) {
  --bs-btn-border-color: var(--ui-linka-silna);
  --bs-btn-hover-color: var(--ui-na-akcentu);
  --bs-btn-hover-bg: var(--ui-akcent);
  --bs-btn-hover-border-color: var(--ui-akcent);
  --bs-btn-active-color: var(--ui-na-akcentu);
  --bs-btn-active-bg: var(--ui-akcent);
  --bs-btn-active-border-color: var(--ui-akcent);
}

html[data-bs-theme][data-color-theme]:root .crm-ui .btn-outline-primary {
  --bs-btn-color: var(--ui-zlata);
}

html[data-bs-theme][data-color-theme]:root .crm-ui .btn-outline-secondary {
  --bs-btn-color: var(--ui-tlumena);
}

/* Hlavní výzva stránky (port .tj-primary-btn): text v pilulce a vedle něj
   tmavé kolečko se šipkou, která se na hover narovná. Jedno na obrazovku —
   jinak z tabule bude leták. */
.crm-ui .btn-relax {
  --bs-btn-padding-y: 5px;
  --bs-btn-padding-x: 5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 5px 5px 22px;
  line-height: 1;
}

.crm-ui .btn-relax .btn-text {
  overflow: hidden;
}

.crm-ui .btn-relax .btn-ikona {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ui-nadpis);
  color: var(--ui-papir);
  font-size: var(--ui-pismo-xl);
  line-height: 1;
}

.crm-ui .btn-relax .btn-ikona > i {
  transform: rotate(-45deg);
  transition: transform .3s ease-in-out;
}

.crm-ui .btn-relax:is(:hover, :focus-visible) .btn-ikona > i {
  transform: rotate(0);
}

@media (prefers-reduced-motion: reduce) {
  .crm-ui .btn-relax .btn-ikona > i {
    transform: none;
    transition: none;
  }
}

/* Přepínač pohledů (Seznam | Den, Masérky | Administrátorky, posun po dnech):
   pilulka s tenkým rámečkem, aktivní volba vyplněná akcentem. Používají ho
   všechny stránky včetně rozvrhu — vlastní kopii už nikdo nemá. */
.crm-ui .ui-prepinac,
.crm-ui .btn-group.ui-prepinac {
  display: inline-flex;
  /* Jedna mezera mezi segmenty všude (audit R5): přehled ji měl nulovou. */
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ui-linka-silna);
  border-radius: 50px;
  background: var(--ui-papir);
}

.crm-ui .ui-prepinac .btn {
  min-height: 30px;
  padding: .25rem .9rem;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-m);
  font-weight: 600;
  box-shadow: none;
}

.crm-ui .ui-prepinac .btn:hover {
  color: var(--ui-nadpis);
  background: var(--ui-vstup);
}

.crm-ui .ui-prepinac .btn[aria-selected='true'],
.crm-ui .ui-prepinac .btn.active {
  color: var(--ui-na-akcentu);
  background: var(--ui-akcent);
}

.crm-ui .ui-prepinac .btn:focus-visible {
  outline: 2px solid var(--ui-akcent);
  outline-offset: 2px;
}

.crm-ui .btn-group {
  padding: 3px;
  border-color: var(--ui-linka);
  border-radius: 50px;
  background: var(--ui-plocha);
}

.crm-ui .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-papir);
  --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;
  /* Bootstrap krajním tlačítkům skupiny ořezává rohy pravidly s vyšší
     specificitou (.btn-group > .btn:not(:last-child)…) — pilulka by přišla o půlku. */
  border-radius: 50px !important;
}

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

.crm-ui .btn-group > .btn:focus-visible {
  outline: 2px solid var(--ui-zlata);
  outline-offset: 2px;
}

/* ==========================================================================
   Formuláře
   ========================================================================== */

/* Pole je vyplněná ploška s výrazným rámečkem (port .pr-input) — na bílé
   kartě je vidět, kam se píše, i bez stínu a bez vnitřní záře. */
.crm-ui .form-control,
.crm-ui .form-select {
  min-height: 40px;
  padding: .55rem .9rem;
  border: 1px solid var(--ui-linka-silna);
  border-radius: 8px;
  background-color: var(--ui-vstup);
  color: var(--ui-nadpis);
  font-size: var(--ui-pismo-l);
}

.crm-ui .form-control-sm,
.crm-ui .form-select-sm {
  min-height: 34px;
  padding: .3rem .7rem;
  font-size: var(--ui-pismo-s);
}

.crm-ui textarea.form-control {
  border-radius: 8px;
  line-height: 1.5;
}

.crm-ui .form-control::placeholder {
  color: var(--ui-tlumena);
  opacity: 1;
}

.crm-ui .form-control:focus,
.crm-ui .form-select:focus {
  border-color: var(--ui-zlata-svetla);
  box-shadow: 0 0 0 3px var(--ui-fokus);
}

.crm-ui .form-control.is-invalid,
.crm-ui .form-select.is-invalid {
  border-color: var(--ui-cihla);
}

.crm-ui .form-control:disabled,
.crm-ui .form-select:disabled,
.crm-ui .form-control[readonly] {
  background-color: var(--ui-plocha);
  color: var(--ui-tlumena);
}

.crm-ui .form-label {
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-s);
  font-weight: 500;
  margin-bottom: .35rem;
}

.crm-ui .form-text {
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-xs);
}

.crm-ui .form-check-input {
  border-color: var(--ui-linka-silna);
}

.crm-ui .form-check-input:checked {
  background-color: var(--ui-akcent);
  border-color: var(--ui-akcent);
}

.crm-ui .form-check-input:focus {
  border-color: var(--ui-zlata-svetla);
  box-shadow: 0 0 0 3px var(--ui-fokus);
}

/* ==========================================================================
   Štítky
   ========================================================================== */

/* Neutrální štítek nabídky (port .pr-tag): vyplněná pilulka s rámečkem
   a čitelným písmem — nese název masáže nebo služby, ne stav. */
.crm-ui .ui-stitek {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid var(--ui-linka-silna);
  border-radius: 30px;
  background: var(--ui-vstup);
  color: var(--ui-text);
  font-size: var(--ui-pismo-m);
  font-weight: 500;
  line-height: 1.3;
}

/* Stavové štítky (port .badge webu): drobné verzálky v pilulce. Barva nese
   význam — mosaz čeká na nás, šalvěj je hotovo, cihla je problém. */
.crm-ui .badge.stitek,
.crm-ui .badge.stitek--mosaz,
.crm-ui .badge.stitek--salvej,
.crm-ui .badge.stitek--cihla,
.crm-ui .stitek,
.crm-ui .stitek--mosaz,
.crm-ui .stitek--salvej,
.crm-ui .stitek--cihla {
  padding: .3rem .6rem;
  border-radius: 50px;
  font-size: var(--ui-pismo-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.crm-ui .stitek {
  background: var(--ui-plocha);
  color: var(--ui-tlumena);
}

/* Mosaz tlumeně: plná zlatá výplň je na webu jediný odznak („Nový"), v tabuli
   s dvěma „plánovaná" v každém řádku křičela. Význam nese odstín, ne váha. */
.crm-ui .stitek--mosaz {
  background: var(--ui-akcent-tlumena);
  color: var(--ui-zlata);
}

.crm-ui .stitek--salvej {
  background: var(--ui-salvej-plocha);
  color: var(--ui-salvej);
}

.crm-ui .stitek--cihla {
  background: var(--ui-cihla-plocha);
  color: var(--ui-cihla);
}

/* ==========================================================================
   Údaj s ikonou a ceníkový řádek
   ========================================================================== */

/* Port .pr-fact: kolečko s ikonou, nad hodnotou prostrkaný popisek. Tak web
   sází kontakty a otevírací dobu; v CRM nese telefon, pobočku, jazyk. */
.crm-ui .ui-fakt {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ui-text);
  font-size: var(--ui-pismo-l);
}

.crm-ui .ui-fakt-ikona {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-plocha);
  color: var(--ui-zlata);
  font-size: var(--ui-pismo-xl);
  line-height: 1;
}

.crm-ui .ui-fakt-popisek {
  display: block;
  margin-bottom: 2px;
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-s);
  letter-spacing: .8px;
  text-transform: uppercase;
}

.crm-ui .ui-fakt-hodnota {
  display: block;
  color: var(--ui-nadpis);
  font-size: var(--ui-pismo-xl);
  font-weight: 600;
}

/* ==========================================================================
   Tabulky
   ========================================================================== */

.crm-ui .table {
  --bs-table-bg: var(--ui-papir);
  --bs-table-color: var(--ui-text);
  --bs-table-hover-bg: var(--ui-vstup);
  --bs-table-hover-color: var(--ui-text);
  --bs-table-border-color: var(--ui-linka);
  --bs-table-striped-bg: var(--ui-vstup);
}

/* Jediný zdroj tvaru buněk (audit O3). Dřív byl tvar rozpočítaný mezi
   společné pravidlo a šest stránkových výjimek: hlavička měla dvě váhy
   a šest odsazení. Hlavička je pískový pruh s prostrkanými verzálkami —
   stejný zápis jako popisky údajů na webu, takže tabule i karta mluví
   jedním hlasem. */
.crm-ui .table > thead > tr > th {
  padding: .7rem .8rem;
  background: var(--ui-plocha);
  border-bottom-color: var(--ui-linka);
  color: var(--ui-tlumena);
  font-weight: 600;
  font-size: var(--ui-pismo-xs);
  letter-spacing: .6px;
  text-transform: uppercase;
  /* Modernize dovoluje `overflow-wrap: anywhere`, takže verzálky ve sloupci
     s pevnou šířkou lámaly popisek uprostřed slova („VYTÍŽENOS / T“). Popisek
     hlavičky je krátký; na mobilu se tabulka roluje stranou. */
  white-space: nowrap;
}

/* Tělo tabulky. `th` sem patří taky: tabule rozvrhu jím odděluje dny
   (`_rozvrh_tabulka.html`) a bez toho by mu zbylo bootstrapovské odsazení. */
.crm-ui .table > tbody > tr > :is(td, th) {
  padding: .6rem .8rem;
  border-bottom-color: var(--ui-linka);
  color: var(--ui-text);
  font-size: var(--ui-pismo-m);
}

/* Tlačítko řazení dědí celou typografii hlavičky: Bootstrap reboot dává
   <button> text-transform: none, takže bez toho by řaditelné sloupce jako
   jediné přišly o verzálky a prostrkání. */
.crm-ui .ui-razeni {
  padding: .15rem 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

.crm-ui .ui-razeni:hover {
  color: var(--ui-zlata);
}

.crm-ui .ui-razeni:focus-visible {
  outline: 2px solid var(--ui-zlata);
  outline-offset: 3px;
}

/* ==========================================================================
   Rozbalovací nabídky a seznamy
   ========================================================================== */

/* Nabídka je odlepená deska bez rámu (port .mainmenu .sub-menu): drží ji
   měkký stín dokola a položka se na hover pozlatí. */
.crm-ui .dropdown-menu {
  --bs-dropdown-bg: var(--ui-papir);
  --bs-dropdown-color: var(--ui-text);
  --bs-dropdown-link-color: var(--ui-text);
  --bs-dropdown-link-disabled-color: var(--ui-tlumena);
  --bs-dropdown-header-color: var(--ui-tlumena);
  --bs-dropdown-divider-bg: var(--ui-linka);
  --bs-dropdown-link-hover-bg: var(--ui-vstup);
  --bs-dropdown-link-hover-color: var(--ui-zlata);
  --bs-dropdown-link-active-bg: var(--ui-akcent-tlumena);
  --bs-dropdown-link-active-color: var(--ui-zlata);
  --bs-dropdown-item-padding-x: 20px;
  --bs-dropdown-item-padding-y: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--ui-papir);
  box-shadow: 0 0 15px var(--ui-stin);
}

.crm-ui .dropdown-item {
  padding: 10px 20px;
  font-size: var(--ui-pismo-l);
}

.crm-ui .profil-nabidka {
  width: 320px;
  max-width: calc(100vw - 2rem);
  padding: 0;
}

.crm-ui .profil-sekce {
  padding: 1.15rem;
}

.crm-ui .profil-identita {
  display: flex;
  align-items: center;
  gap: .85rem;
  border-bottom: 1px solid var(--ui-linka);
}

.crm-ui .profil-identita > div { min-width: 0; }
.crm-ui .profil-identita h6 { overflow-wrap: anywhere; }
.crm-ui .profil-jazyky { border-bottom: 1px solid var(--ui-linka); }

.crm-ui .list-group {
  --bs-list-group-bg: var(--ui-papir);
  --bs-list-group-color: var(--ui-text);
  --bs-list-group-action-color: var(--ui-text);
  --bs-list-group-action-active-color: var(--ui-text);
  --bs-list-group-action-active-bg: var(--ui-plocha-hover);
  --bs-list-group-active-color: var(--ui-na-akcentu);
  --bs-list-group-active-bg: var(--ui-akcent);
  --bs-list-group-active-border-color: var(--ui-akcent);
  --bs-list-group-border-color: var(--ui-linka);
  --bs-list-group-action-hover-bg: var(--ui-vstup);
  --bs-list-group-action-hover-color: var(--ui-text);
}

/* ==========================================================================
   Prázdné stavy a upozornění
   ========================================================================== */

/* Jedna podoba pro celou recepci (audit R4): rozvrh měl čárkovaný rám
   a rádius 8 px, konverzace holý odstavec bez rámu. Rám je tentýž zápis
   jako u eyebrow, takže prázdné místo vypadá rozdělané, ne rozbité. */
.crm-ui .empty-state {
  padding: 1.25rem 1rem;
  border: 1px dashed var(--ui-linka-silna);
  border-radius: 10px;
  background: transparent;
}

.crm-ui .empty-state-icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin: 0 auto .75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-plocha);
  color: var(--ui-zlata);
  font-size: var(--ui-pismo-xl);
  opacity: 1;
}

.crm-ui .empty-state-title {
  color: var(--ui-nadpis);
  font-size: var(--ui-pismo-xl);
  font-weight: 600;
}

.crm-ui .empty-state-text {
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-m);
}

/* Kompaktní varianta do tabulek a úzkých panelů: jeden řádek, bez kolečka
   s ikonou. Odsazení a případný rámeček si dodává kontext vlastní třídou. */
.crm-ui .empty-state--radek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-m);
  text-align: center;
}

.crm-ui .empty-state--radek .ti {
  flex-shrink: 0;
  font-size: var(--ui-pismo-xl);
}

.crm-ui .alert {
  border-radius: 10px;
  font-size: var(--ui-pismo-m);
}

/* `.ui-zakaznik-identita` a `.js-polozky-form` odsud zmizely: šablona emituje
   `.zakaznik-identita` bez předpony a formulář položek se nerenderuje vůbec
   (hlídají to test_cenik.py a test_customer_card.py) — audit (e). */
.crm-ui .ui-zakaznik details > summary {
  font-size: var(--ui-pismo-s);
  cursor: pointer;
}

/* Plánovač: tady zůstává jen rozměr a rozvržení. Barvy, rádiusy a zvýraznění
   obsazených i neúplných buněk vlastní `rozvrh.css` — jediná vrstva, která má
   v selektoru `.ui-planovac`, takže se specificitou (0,3,0) vždy vyhraje.
   Co se sem vrátí, bude mrtvá deklarace (audit §4c). */
.crm-ui .planovac-jmeno {
  background: var(--ui-papir);
  color: var(--ui-text);
}

.crm-ui .planovac-bunka {
  padding: .5rem;
  gap: .4rem;
  min-width: 132px;
}

.crm-ui .planovac-bunka .form-control,
.crm-ui .planovac-bunka .form-select {
  min-height: 32px;
  padding-top: .2rem;
  padding-bottom: .2rem;
  font-size: var(--ui-pismo-s);
}

.crm-ui .planovac-cas {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  align-items: center;
  gap: .3rem;
}

.crm-ui .planovac-cas > span {
  color: var(--ui-tlumena);
  font-size: var(--ui-pismo-xs);
  text-align: left;
}

/* Utilita .square-24 z Modernize má rozměr s !important — jinak to nejde. */
.crm-ui .planovac-jmeno :is(img, span.square-24) {
  width: 36px !important;
  height: 36px !important;
}

.crm-ui .ui-planovac .card-footer {
  justify-content: space-between;
  gap: 1rem;
}

.crm-ui .planovac-napoveda {
  max-width: 54rem;
  line-height: 1.5;
}

/* ==========================================================================
   Dialogy
   ========================================================================== */

/* Modal je tatáž deska jako karta — stejný poloměr i stín, takže dialog
   vypadá jako karta zvednutá nad stránku, ne jako jiný systém. */
.crm-ui .modal-content {
  --bs-modal-color: var(--ui-text);
  --bs-modal-bg: var(--ui-papir);
  /* Modernize má oba modálové rádiusy natvrdo na 7 px, takže hlavička i pata
     si braly ostřejší rohy než deska (audit K8). Dnes to není vidět (hlavička
     je průhledná), ale jakmile dostane výplň, rohy by se s dialogem rozešly.
     `--bs-modal-inner-border-radius` je ten, kterým se řídí hlavička — bez něj
     samotný `--bs-modal-border-radius` nic nespraví. Rám dialogu je nulový,
     takže vnitřní a vnější rádius se rovnají. */
  --bs-modal-border-radius: var(--ui-polomer);
  --bs-modal-inner-border-radius: var(--ui-polomer);
  border: 0;
  border-radius: var(--ui-polomer);
  background: var(--ui-papir);
  box-shadow: var(--ui-stin-karta);
}

.crm-ui .modal-header {
  padding: 1rem 1.1rem;
  border-bottom-color: var(--ui-linka);
}

.crm-ui .modal-title {
  color: var(--ui-nadpis);
  font-size: var(--ui-pismo-2xl);
  font-weight: 500;
  letter-spacing: -.03em;
}

.crm-ui .modal-body {
  padding: 1rem 1.1rem;
}

.crm-ui .modal-footer {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--ui-linka);
  background: var(--ui-papir);
  border-radius: 0 0 var(--ui-polomer) var(--ui-polomer);
}

/* ==========================================================================
   Přihlášení
   ========================================================================== */

.crm-ui .prihlaseni-karta {
  border-radius: var(--ui-polomer);
  box-shadow: var(--ui-stin-karta);
}

.crm-ui .prihlaseni-ramec {
  max-width: 26rem;
}

.crm-ui .prihlaseni-karta .card-body {
  padding: 2rem;
}

.crm-ui .prihlaseni-karta .btn {
  min-height: 44px;
}

.crm-ui .prihlaseni-karta .form-control {
  min-height: 44px;
}

@media (max-width: 767.98px) {
  .crm-ui .ui-stranka-hlavicka {
    padding-bottom: .8rem;
  }

  .crm-ui .ui-stranka h4 {
    font-size: var(--ui-pismo-2xl);
  }

  .crm-ui .card-header,
  .crm-ui .card-footer {
    padding: .7rem .8rem;
  }

  /* Zmenšení nadpisu karty tu bývalo z 1.05rem na 1rem; po přechodu na
     škálu je obojí 16 px, takže výjimka zanikla. */
  .crm-ui .table > thead > tr > th {
    padding: .55rem .5rem;
  }

  .crm-ui .table > tbody > tr > :is(td, th) {
    padding: .55rem .5rem;
    font-size: var(--ui-pismo-s);
  }

  .crm-ui .modal-header,
  .crm-ui .modal-body,
  .crm-ui .modal-footer {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .crm-ui .prihlaseni-karta .card-body {
    padding: 1.5rem;
  }
}

/* Dotyk (audit R2, R6; specifikace §9d): pod 576 px má každý ovládací prvek
   aspoň 40 px na výšku i šířku. Ikonová tlačítka v tabulích se renderovala
   36×36 ve 180 kusech na obrazovku; `tantra.css` k tomu měla komentář o 40 px
   a pravidlo na 38. Jediný zdroj je tenhle blok. Pořadí je záměrné: `.btn-sm`
   musí stát za `.btn`, obojí má stejnou specificitu. */
@media (max-width: 575.98px) {
  .crm-ui .btn {
    min-height: 44px;
  }

  .crm-ui .btn-sm,
  .crm-ui :is(.js-rez-plus, .js-smena-uprava, .js-rez-uprava) {
    min-height: 40px;
    min-width: 40px;
  }

  .crm-ui .ui-prepinac .btn {
    min-height: 40px;
  }

  /* Malá pole (filtry období) a řadicí tlačítka hlaviček jsou na telefonu
     stejný dotykový cíl jako tlačítka — 34 px a 21 px nestačí (§9d). */
  .crm-ui .form-control-sm,
  .crm-ui .form-select-sm {
    min-height: 40px;
  }

  .crm-ui .ui-razeni {
    min-height: 40px;
    padding: .4rem 0;
  }
}

/* Submenu sekce Administrace (Ceník | Šablony zpráv | Účty): tentýž segmentový
   přepínač jako Seznam|Den, jen ze <a> odkazů — třída .btn platí na obojím.
   Vlastní pruh pod hlavičkou stránky, proto potřebuje odsazení dolů.

   Česky se tři popisky i na 360 px vejdou, ukrajinsky ne („Шаблони
   повідомлень“ je dvakrát delší) — pruh se pak roluje stranou místo aby
   přetekl stránku. Rolovací plocha je obal, ne sám přepínač: jeho zaoblený
   rámeček by se jinak ořízl. */
.crm-ui .ui-podmenu {
  max-width: 100%;
  margin-bottom: var(--ui-mezera);
  overflow-x: auto;
  /* Vodorovná lišta by pod pilulkou jen překážela, rolovat jde i tahem. */
  scrollbar-width: none;
}

.crm-ui .ui-podmenu::-webkit-scrollbar {
  display: none;
}

.crm-ui .ui-podmenu .ui-prepinac {
  /* Inline-flex by se v rolovací ploše smrskl na šířku obalu a popisky by se
     zalomily; min-content ho drží roztažený a nechá ho vyrolovat. */
  min-width: min-content;
}

.crm-ui .ui-podmenu .btn {
  white-space: nowrap;
}