/**
 * Vlastní doplňky pro Vuexy šablonu (Templates/studio-new.dwt.php) - centrální místo pro
 * všechny drobné CSS opravy/doplňky nad rámec Vuexy core.css/demo.css.
 * Analogie k /style/css/custom.css u staré Brailie šablony, ale pro novou Vuexy zónu.
 */

/* Poppins místo Vuexy defaultního Public Sans - přepis proměnné, core.css needitovat */
:root {
  --bs-font-sans-serif: 'Poppins', -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* Větší odstavcový text - Vuexy default 0.9375rem (15px) byl na mobilu drobný a málo čitelný
   v tmavém režimu. Jen proměnná (core.css needitovat), layout/radius/bordery beze změny. */
:root {
  --bs-body-font-size: 1.125rem;
}

/* .small (core.css řádek 333-335) je natvrdo 0.8125rem (13px), needěje se z --bs-body-font-size,
   takže zvětšení výše na ni nedopadlo - typicky popisky/empty-state texty (např. "Zatím klid...").
   Zvětšeno stejným poměrem (1.2x) jako základní text. */
small, .small {
  font-size: 0.975rem;
}

/* Tmavý režim - neutrální černá místo výchozí fialové Vuexy tóniny (nízký kontrast pozadí/karet
   byl špatně čitelný na mobilu). Přepisuje jen barevné CSS proměnné (core.css needitovat) -
   layout/border/radius/stíny beze změny. --bs-paper-bg pohání karty i navbar (core.css řádek
   8085, 8124). Menu (sidebar) má vlastní --bs-menu-bg natvrdo #2f3349 v core.css řádku 25755
   ([data-bs-theme=dark]) - needitovat, přepsáno níž o chlup světleji než karty. */
[data-bs-theme="dark"] {
  --bs-body-bg: #16161a;
  --bs-body-bg-rgb: 22, 22, 26;
  --bs-paper-bg: #202024;
  --bs-paper-bg-rgb: 32, 32, 36;
  --bs-body-color: #d4d4d8;
  --bs-body-color-rgb: 212, 212, 216;
  --bs-heading-color: #f5f5f7;
  --bs-base-color: #f5f5f7;
  --bs-menu-bg: #2a2a2f;
  --bs-menu-color: #d4d4d8;
  --bs-menu-hover-color: #f5f5f7;
  --bs-menu-sub-active-color: #f5f5f7;
}

/* lmsConfirm/lmsAlert (style/js/custom.js) - jen JS, CSS je normálně v style/css/custom.css
   (Brailie, needitovat), tu se needitovat nenačítá. Bez tohohle je dialog v DOM, ale neviditelný
   (žádné position:fixed/display:flex) - potvrzení mazání by šlo jen scrollem najít úplně dole na stránce.
   Btn modifikátory (.btn-full-rounded/.btn-xs/.btn-white/.bg-red) custom.js generuje natvrdo do JS,
   needitovat je (sdílené se starými Brailie stránkami) - jen dostylováno pro tmavý Vuexy vzhled. */
.lms-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 10500; padding: 20px; }
.lms-dialog-backdrop.lms-open { display: flex; }
.lms-dialog-box { background: var(--bs-paper-bg); color: var(--bs-body-color); border-radius: .75rem; max-width: 380px; width: 100%; padding: 30px 25px 25px; text-align: center; box-shadow: 0 15px 50px rgba(0,0,0,.4); animation: lmsDialogIn .15s ease-out; }
@keyframes lmsDialogIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lms-dialog-icon { font-size: 34px; margin-bottom: 12px; }
.lms-dialog-title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.lms-dialog-text { color: var(--bs-secondary-color); margin-bottom: 24px; white-space: pre-line; font-size: 14.5px; }
.lms-dialog-text:empty { display: none; }
.lms-dialog-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lms-dialog-actions .btn { min-width: 110px; margin: 0; }
@media (max-width: 420px) { .lms-dialog-actions { flex-direction: column-reverse; } .lms-dialog-actions .btn { width: 100%; } }
.btn-full-rounded { border-radius: 2rem; }
.btn-xs { padding: .25rem .9rem; font-size: .8125rem; }
.btn-white { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
.bg-red { background-color: var(--bs-danger) !important; }

/* Responzivní tabulka pro řádky s víc editovatelnými poli (input/stepper/obrázek) - obyčejný
   Bootstrap .table-responsive tu nestačí (jen horizontální scroll, na mobilu je pak polovina
   sloupců mimo obrazovku a musí se pořád scrollovat tam a zpátky). Pod 768px se řádek přelomí
   do karty (stejný trik jako stará Brailie .zak-cart-table v style/css/custom.css, jen přepsaný
   na Vuexy proměnné). Nad 768px beze změny (normální tabulka).

   Tři typy buněk podle obsahu - použij ten, který sedí:
   1) Prostá hodnota (text/badge/číslo) -> <td data-label="Popisek">hodnota</td>
      Vykreslí se jako řádek "popisek: hodnota" vedle sebe (label vlevo, hodnota vpravo).
   2) Bohatý obsah (jméno + odznaky + progress bar + víc řádků apod., typicky první sloupec) ->
      <td class="stack-block">...</td> (bez data-label - kontext je zřejmý z pozice v kartě).
      Vykreslí se jako normální blok pod sebou, přesně jak je markup napsaný, žádné vynucené
      řazení do řádku. Vždy první buňka v kartě (viz pořadí sloupců v markupu).
   3) Sloupec Akce (jen ikonky) -> <td class="stack-actions">...</td>. Vykreslí se jako řádek
      ikon oddělený linkou nahoře - malý toolbar na spodu karty, ne squeeznutý do rohu.

   Buňka bez data-label i bez modifikátoru (typicky prázdná/needitovatelná) se podle :empty
   schová sama - pro neprázdný obsah bez labelu vždy zvol stack-block/stack-actions, jinak
   se vykreslí jako flex řádek bez popisku (ošklivé zarovnání doprava). */
@media (max-width: 767.98px) {
  .table-stack-mobile thead { display: none; }
  .table-stack-mobile,
  .table-stack-mobile tbody,
  .table-stack-mobile tfoot,
  .table-stack-mobile tr,
  .table-stack-mobile tbody td,
  .table-stack-mobile tbody th,
  .table-stack-mobile tfoot td,
  .table-stack-mobile tfoot th {
    display: block;
    width: 100%;
  }
  .table-stack-mobile tbody tr,
  .table-stack-mobile tfoot tr {
    margin-bottom: .75rem;
    padding: .875rem 1rem;
    border-radius: .75rem;
    background: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
  }

  /* 1) Prostá hodnota - label vlevo, hodnota vpravo */
  .table-stack-mobile tbody td,
  .table-stack-mobile tbody th,
  .table-stack-mobile tfoot td,
  .table-stack-mobile tfoot th {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0 !important;
    border: none !important;
    text-align: right;
  }
  .table-stack-mobile tbody td[data-label]::before,
  .table-stack-mobile tbody th[data-label]::before,
  .table-stack-mobile tfoot td[data-label]::before,
  .table-stack-mobile tfoot th[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: .65;
    margin-right: .5rem;
    text-align: left;
    flex-shrink: 0;
  }
  .table-stack-mobile tbody td:empty,
  .table-stack-mobile tfoot td:empty {
    display: none;
  }

  /* 2) Bohatý obsah - normální blok, žádné vynucené řazení do řádku. Bez vlastní dělící čáry -
     tu má jen stack-actions (jedna linka nad ikonami akcí, ne dvě blízko sebe). Bez data-label
     (typicky první/titulní buňka karty - jméno apod.) žádný popisek, kontext je zřejmý z pozice.
     S data-label (typicky vedlejší bohatý obsah jako dlouhá poznámka) malá caption nad obsahem
     místo úzkého "popisek: hodnota" řádku - vejde se i delší text. */
  .table-stack-mobile td.stack-block,
  .table-stack-mobile th.stack-block {
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: .5rem;
  }
  .table-stack-mobile td.stack-block::before,
  .table-stack-mobile th.stack-block::before {
    content: none !important;
  }
  .table-stack-mobile td.stack-block[data-label]::before,
  .table-stack-mobile th.stack-block[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .65;
    margin-bottom: .2rem;
  }
  /* Prázdná bohatá buňka (např. nevyplněná poznámka) se schová stejně jako prostá - jinak by
     zůstala viset jen samotná caption bez obsahu. */
  .table-stack-mobile td.stack-block:empty,
  .table-stack-mobile th.stack-block:empty {
    display: none !important;
  }
  /* Progress bary (expirace náhledů/souborů apod.) - na desktopu úzké kvůli sloupci tabulky,
     na mobilu ať využijí celou šířku karty (vzExpiraceBar() dává inline max-width:220px). */
  .table-stack-mobile .progress {
    max-width: none !important;
  }

  /* 3) Akce - řádek ikon jako malý toolbar, oddělený jedinou linkou nahoře */
  .table-stack-mobile td.stack-actions,
  .table-stack-mobile th.stack-actions {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center;
    text-align: center !important;
    padding: .625rem 0 0 !important;
    margin-top: .25rem;
    border-top: 1px solid var(--bs-border-color) !important;
  }
  .table-stack-mobile td.stack-actions::before,
  .table-stack-mobile th.stack-actions::before {
    content: none !important;
  }
  /* Zarovnání ikon řeší jen flex (space-around) - potlač desktopové me-*/mr-* odsazení mezi
     ikonami, ať se rozestup nesčítá s dvojitým odsazením. */
  .table-stack-mobile td.stack-actions > *,
  .table-stack-mobile th.stack-actions > * {
    margin: 0 !important;
    padding: .25rem .5rem;
  }
  /* Prázdný toolbar akcí (žádná ikona k zobrazení) se celý schová, ne jen osiřelá linka */
  .table-stack-mobile td.stack-actions:empty,
  .table-stack-mobile th.stack-actions:empty {
    display: none !important;
  }

  /* Hover na mobilu zvýrazní celou kartu (tr) jako jeden zaoblený box, ne roztříštěně
     po jednotlivých buňkách/ikonkách - Bootstrap .table-hover totiž maluje zvýraznění
     zvlášť do každého přímého potomka <tr> (".table-hover > tbody > tr:hover > *"), což
     na mobilu, kde je každý <td> vlastní blok/flex box, vypadá jako hranaté flíčky. Zrušit
     to per-buňkové malování a místo něj přes inset box-shadow "podlít" barvou celý box
     karty (drží zaoblené rohy karty, na rozdíl od background-color nepřepisuje vlastní
     barvu karty, jen ji podbarví stejným odstínem, jaký by jinak šel jen do buněk). */
  .table-stack-mobile.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
  }
  .table-stack-mobile.table-hover > tbody > tr:hover {
    box-shadow: inset 0 0 0 999px var(--bs-table-hover-bg);
  }
}

/* Logo studia - dvě verze podle světlý/tmavý motiv (app-logo-dark/app-logo-light,
   viz Templates/studio-new.dwt.php $menu_logo_src_dark/$menu_logo_src_light). Obě verze
   se renderují vždy, CSS jen skryje tu nepasující k aktuálnímu [data-bs-theme] na <html>
   - řeší i "system" motiv, protože ten template-customizer.js hned při načtení přeloží
   na konkrétní "light"/"dark" hodnotu atributu, žádná třetí varianta v DOM nezůstává. */
[data-bs-theme="dark"] .app-logo-light { display: none; }
[data-bs-theme="light"] .app-logo-dark { display: none; }

/* Semi Dark (Template Customizer): menu má data-bs-theme="dark" při světlém <html>, takže by se obě
   pravidla výše sešla a logo zmizelo. Menu má přednost - tmavé pozadí = logo pro tmavý motiv. */
#layout-menu[data-bs-theme="dark"] .app-logo-dark { display: revert; }
#layout-menu[data-bs-theme="dark"] .app-logo-light { display: none; }

/* Klient/zakázka combobox (initKlientCombobox, style/js/custom.js) - JS je sdílená
   funkce napříč Brailie i Vuexy zónou, ale její CSS existovalo jen ve staré
   style/css/custom.css (Brailie .dark-wrapper třídy), ve Vuexy zóně se needitovala -
   combobox proto byl bez téhle stylistiky nepoužitelný a dřív se nahradil obyčejným
   <select> (viz [[project_vuexy_theme]]). Přepsáno na Bootstrap proměnné, funguje
   automaticky v obou motivech (světlý/tmavý), stejný vzor jako zbytek souboru. */
.klient-combobox-wrap { position: relative; }

.klient-combobox-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--bs-paper-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.klient-combobox-dropdown.kcb-open { display: block; }

.klient-combobox-item {
    padding: .375rem .75rem;
    font-size: .9375rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--bs-border-color);
}
.klient-combobox-item:last-child { border-bottom: none; }
.klient-combobox-item:hover,
.klient-combobox-item.kcb-active { background: var(--bs-tertiary-bg, rgba(128, 128, 128, .12)); }

.klient-combobox-item.kcb-empty { color: var(--bs-secondary-color); cursor: default; font-style: italic; }
.klient-combobox-item.kcb-empty:hover { background: transparent !important; }

.klient-combobox-input.kcb-has-value { font-weight: 600; }

/* DataTables search input (/admin-users a další) - na desktopu širší než defaultní malá
   šířka podle obsahu (core CSS input nemá žádnou explicitní width). Cílí JEN na input samotný,
   ne na .dt-search/.dt-layout-cell/-row kolem něj - to už core CSS řeší samo (display:flex na
   desktopu, display:block přes celou šířku na mobilu pod 767px) a nemá se do toho zasahovat,
   jinak se to rozpadne (viz zpětná vazba z předchozích pokusů). */
div.dt-container div.dt-search input.form-control {
  width: 320px;
  max-width: 100%;
}

/* Superadmin - Překlady (/superadmin-translations) - responsive NENÍ DataTables auto-detekce
   (ta opakovaně špatně vyhodnocovala sloupec se 3 textarea/input-group - viz zpětná vazba
   z produkce). Místo toho: natvrdo CSS breakpoint schová sloupce Hodnoty+Akce pod 768px
   a nechá jen "+" (.preklad-mobile-control), který ručním JS click handlerem (viz
   assets/js/superadmin-translations-datatable.js) otevře modal s obsahem řádku - stejný
   vzhled "+" jako DataTables Responsive na admin-previews/admin-files. */
table.datatables-translations th.preklad-mobile-control,
table.datatables-translations td.preklad-mobile-control {
  display: none;
}

/* Šířky sloupců na desktopu - DataTables JS width/autoWidth počítal sloupec Hodnoty
   (textarea) opakovaně špatně (zůstával úzký bez ohledu na autoWidth:false - viz zpětná
   vazba z produkce), takže šířky řídíme čistě CSS na <th>/<td> podle pořadí sloupce:
   1=Klíč pevná šířka, 2=Hodnoty zabere zbytek, 3=Akce pevná šířka. */
table.datatables-translations th:nth-child(2),
table.datatables-translations td:nth-child(2) {
  width: 240px;
}
table.datatables-translations th:nth-child(3),
table.datatables-translations td:nth-child(3) {
  width: auto;
}
table.datatables-translations th:nth-child(4),
table.datatables-translations td:nth-child(4) {
  width: 90px;
}

@media (max-width: 767.98px) {
  table.datatables-translations th.preklad-mobile-control,
  table.datatables-translations td.preklad-mobile-control {
    display: table-cell;
    position: relative;
    cursor: pointer;
    width: 40px;
  }
  table.datatables-translations td.preklad-mobile-control::before {
    position: absolute;
    box-sizing: content-box;
    border: 2px solid var(--bs-paper-bg);
    border-radius: 1rem;
    background-color: var(--bs-primary);
    block-size: 0.85rem;
    box-shadow: 0 0 3px var(--bs-gray-800);
    color: var(--bs-white);
    content: "+";
    font-family: "Courier New", Courier, monospace;
    font-weight: 500;
    inline-size: 0.85rem;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    line-height: 1em;
    text-align: center;
    transform: translate(-50%, -51%);
  }
  table.datatables-translations th.preklad-col-hodnoty,
  table.datatables-translations td.preklad-col-hodnoty,
  table.datatables-translations th.preklad-col-akce,
  table.datatables-translations td.preklad-col-akce {
    display: none;
  }
}

/* LMS logo podle motivu - "dark" varianta loga je pro světlý motiv (tmavé logo na světlém
   pozadí), "light" varianta je pro tmavý motiv (světlé logo na tmavém pozadí) */
.lms-brand-logo-light { display: none; }
html[data-bs-theme="dark"] .lms-brand-logo-dark { display: none; }
html[data-bs-theme="dark"] .lms-brand-logo-light { display: inline-block; }

/* Obrázky podle motivu aplikace (varianta -light / -dark v názvu souboru odpovídá motivu stránky) */
.lms-theme-img-dark { display: none; }
html[data-bs-theme="dark"] .lms-theme-img-dark { display: block; }
html[data-bs-theme="dark"] .lms-theme-img-light { display: none; }

/* Dvouřádkový pill badge na /jobs (sloupce Rezervace/Náhledy/Objednávky/Soubory) -
   viz ajax/admin_jobs_datatable.php (vzBadge2line). Přesunuto sem z inline <style>
   admin-jobs.php po převodu stránky na DataTables ([[project_...]] port /admin-previews vzoru). */
.badge2line { display: inline-block; min-width: 64px; padding: 5px 8px; text-align: center; text-decoration: none; border-radius: 6px; line-height: 1.3; }
.badge2line .b2l-sub { font-size: 0.72em; opacity: .85; }

/* ─── DUHOVÁ PALETA MODULŮ (menu ikony) ──────────────────────────────────────
   Vuexy má jen 6 pojmenovaných barev (primary/secondary/success/danger/warning/info),
   pro 13 modulů to nestačilo k odlišení sousedních položek v menu (viz $CISELNIKY['moduly']
   v klient_inc/klient_ciselniky.php, [[project_klient_menu_bs5_cleanup]]). Doplněno o
   plynulý duhový gradient (hue 0°→320° po ose modulů shora dolů v menu), stejný vizuální
   vzor jako Vuexy bg-label-* (jemné pozadí + sytý text), jen s vlastním odstínem místo
   Bootstrap proměnné. Světlý i tmavý režim sdílí stejný hue/sat, jen jinou světlost pozadí. */
:root {
  --lms-rainbow-l-bg: 90%;
  --lms-rainbow-l-fg: 45%;
}
:root:not([data-bs-theme="light"]) {
  --lms-rainbow-l-bg: 22%;
  --lms-rainbow-l-fg: 68%;
}
:root[data-bs-theme="dark"] {
  --lms-rainbow-l-bg: 22%;
  --lms-rainbow-l-fg: 68%;
}

.text-rainbow-1  { color: hsl(0,   75%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-2  { color: hsl(22,  85%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-3  { color: hsl(40,  85%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-4  { color: hsl(55,  80%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-5  { color: hsl(80,  65%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-6  { color: hsl(120, 55%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-7  { color: hsl(155, 55%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-8  { color: hsl(175, 60%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-9  { color: hsl(195, 70%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-10 { color: hsl(220, 75%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-11 { color: hsl(255, 65%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-12 { color: hsl(280, 60%, var(--lms-rainbow-l-fg)) !important; }
.text-rainbow-13 { color: hsl(320, 65%, var(--lms-rainbow-l-fg)) !important; }

/* Aktivní položka menu má vlastní oranžové/primary gradientové pozadí (core.css řádek 25996) -
   duhová barva ikony na něm často zanikne (podobný teplý odstín splývá s pozadím). Aktivní stav
   proto barvu modulu přebíjí na barvu textu položky (bílá), stejně jako zbytek řádku. */
.menu-item.active .menu-icon[class*="text-rainbow-"] {
  color: var(--bs-menu-active-color) !important;
}

.bg-label-rainbow-1  { background-color: hsl(0,   75%, var(--lms-rainbow-l-bg)) !important; color: hsl(0,   75%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-2  { background-color: hsl(22,  85%, var(--lms-rainbow-l-bg)) !important; color: hsl(22,  85%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-3  { background-color: hsl(40,  85%, var(--lms-rainbow-l-bg)) !important; color: hsl(40,  85%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-4  { background-color: hsl(55,  80%, var(--lms-rainbow-l-bg)) !important; color: hsl(55,  80%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-5  { background-color: hsl(80,  65%, var(--lms-rainbow-l-bg)) !important; color: hsl(80,  65%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-6  { background-color: hsl(120, 55%, var(--lms-rainbow-l-bg)) !important; color: hsl(120, 55%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-7  { background-color: hsl(155, 55%, var(--lms-rainbow-l-bg)) !important; color: hsl(155, 55%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-8  { background-color: hsl(175, 60%, var(--lms-rainbow-l-bg)) !important; color: hsl(175, 60%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-9  { background-color: hsl(195, 70%, var(--lms-rainbow-l-bg)) !important; color: hsl(195, 70%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-10 { background-color: hsl(220, 75%, var(--lms-rainbow-l-bg)) !important; color: hsl(220, 75%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-11 { background-color: hsl(255, 65%, var(--lms-rainbow-l-bg)) !important; color: hsl(255, 65%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-12 { background-color: hsl(280, 60%, var(--lms-rainbow-l-bg)) !important; color: hsl(280, 60%, var(--lms-rainbow-l-fg)) !important; }
.bg-label-rainbow-13 { background-color: hsl(320, 65%, var(--lms-rainbow-l-bg)) !important; color: hsl(320, 65%, var(--lms-rainbow-l-fg)) !important; }

/* Sloupec akcí v tabulkách: ikony zarovnané vpravo na konec řádku - poslední ikona nemá pravý odstup (me-2/me-3),
   jinak by byla odsazená od okraje buňky a ikony by nebyly srovnané pod záhlavím. */
td.text-end > a:last-child,
td.text-end > .d-flex.justify-content-end > a:last-child {
  margin-inline-end: 0 !important;
}

/* Hledací pole: vlastní křížek (lmsDecorateSearch v lms-custom.js) místo nativního křížku prohlížeče */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.lms-search-clear { border-left: 0; }

/* Mini kalendář rezervací: dny s termíny (barvu dává třída bg-label-* podle stavu) */
.app-calendar-sidebar .flatpickr-day.lms-has-event:not(.selected) {
  border-color: transparent;
  font-weight: 600;
}

/* Mobil: tabulky DataTables (/admin-users) - sloupec Klient je nowrap, takže ho Responsive měří podle
   nejdelšího e-mailu/telefonu v tabulce a na úzkém displeji schová úplně všechno kromě "+".
   Omezíme šířku buňky a dlouhý text oříznume (ellipsis), aby se do mobilu vždy vešla. */
@media (max-width: 767.98px) {
  table.datatables-users .user-name {
    max-width: 14rem;
  }
  table.datatables-users .user-name > .d-flex.flex-column {
    min-width: 0;
  }
  table.datatables-users .user-name small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hledací pole s lupou (lmsDecorateSearch) - input má na desktopu width:320px, v input-group by se
     na mobilu zalomil pod lupu; na mobilu ať vyplní zbytek řádku vedle lupy. */
  div.dt-container div.dt-search .input-group {
    flex-wrap: nowrap;
  }
  div.dt-container div.dt-search input.form-control {
    width: 1%;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Mobil: hlavní (2.) sloupec všech DataTables tabulek - Responsive ho měří jako nowrap podle nejdelšího
   obsahu v tabulce (e-mail, předmět, název úkolu, banner...); když je širší než displej, schová všechny
   sloupce kromě "+". Obsah buňky proto omezíme na šířku, která se vždy vejde. Překlady mají vlastní
   mobilní řešení (datatables-translations), ty se nedotýkáme. */
@media (max-width: 767.98px) {
  table.dataTable:not(.datatables-translations) > tbody > tr > td:nth-child(2) > * {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.dataTable:not(.datatables-translations) > tbody > tr > td:nth-child(2) > :is(a, strong, small, span) {
    display: inline-block;
    vertical-align: top;
  }
}

/* Lightbox náhledů: fotka se vždy celá vejde do okna (název i tlačítka jsou přes fotku) */
.lms-lightbox-img {
  max-height: calc(100vh - 4rem);
  width: auto;
  max-width: 100%;
}

/* ── Ceník: vizuální odlišení tarifů (Basic = zelenáč, Professional = zlatý třpytivý) ── */
.lms-plan-card { position: relative; overflow: hidden; }
.lms-plan-card .card-body { position: relative; z-index: 1; }

.lms-plan-basic { background: linear-gradient(160deg, rgba(113, 221, 55, .16) 0%, rgba(113, 221, 55, .04) 60%); border-color: rgba(113, 221, 55, .45) !important; }
.lms-plan-basic .lms-plan-icon { color: #71dd37; }

.lms-plan-professional { background: linear-gradient(145deg, rgba(255, 215, 120, .22) 0%, rgba(212, 160, 23, .10) 50%, rgba(255, 215, 120, .22) 100%); border: 1px solid #d4a017 !important; box-shadow: 0 0 16px rgba(212, 160, 23, .2) !important; }
.lms-plan-professional .lms-plan-icon { color: #d4a017; filter: drop-shadow(0 0 6px rgba(255, 200, 60, .6)); }
.lms-plan-professional .btn-gold { background: linear-gradient(135deg, #f6d365 0%, #d4a017 50%, #f6d365 100%); border: 0; color: #3b2a00; font-weight: 600; }
.lms-plan-professional .btn-gold:hover { color: #3b2a00; filter: brightness(1.08); }

/* třpyt – zlatá fólie: široký kovový přechod se pomalu přelévá po kartě (bez pevných bodů) */
.lms-plan-professional {
  background:
    linear-gradient(115deg, rgba(255, 205, 90, .20) 0%, rgba(212, 160, 23, .13) 20%, rgba(255, 210, 85, .27) 38%, rgba(212, 160, 23, .13) 55%, rgba(255, 205, 90, .19) 75%, rgba(255, 210, 85, .25) 90%, rgba(212, 160, 23, .13) 100%);
  background-size: 250% 250%;
  animation: lmsGoldFoil 28s ease-in-out infinite;
}
@keyframes lmsGoldFoil { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
@media (prefers-reduced-motion: reduce) { .lms-plan-professional { animation: none; } }

/* ceny v barvě plánu */
.lms-plan-basic .lms-plan-price { color: #71dd37; }
.lms-plan-professional .lms-plan-price { color: #e0b030; }

/* Free plán (ceník) */
.lms-plan-free { background: linear-gradient(160deg, rgba(0, 186, 209, .16) 0%, rgba(0, 186, 209, .04) 60%); border-color: rgba(0, 186, 209, .45) !important; }
.lms-plan-free .lms-plan-icon, .lms-plan-free .lms-plan-price { color: #00bad1; }

/* Odrážky plánů: kolečko v barvě textu, fajfka inverzní (všude stejné) */
.lms-plan-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.25rem; height: 1.25rem; margin-right: .5rem; border-radius: 50%; background: var(--bs-body-color); color: var(--bs-body-bg); font-size: .8rem; vertical-align: middle; }
.lms-plan-check .icon-base { font-size: inherit; }

/* Rámeček plánů: stejně silný a výrazný na všech kartách */
.lms-plan-card { border: 2px solid transparent !important; }
.lms-plan-free { border-color: #00bad1 !important; }
.lms-plan-basic { border-color: #71dd37 !important; }
.lms-plan-professional { border-color: #d4a017 !important; }

/* Název tarifu jako badge: pozadí jako panel plánu, text tučně v barvě plánu */
.lms-plan-badge { display: inline-block; padding: .3rem .75rem; border: 1px solid transparent; border-radius: .5rem; font-weight: 700; line-height: 1.2; }
.lms-plan-badge-free { background: linear-gradient(160deg, rgba(0, 186, 209, .16) 0%, rgba(0, 186, 209, .04) 60%); border-color: rgba(0, 186, 209, .45); color: #00bad1; }
.lms-plan-badge-basic { background: linear-gradient(160deg, rgba(113, 221, 55, .16) 0%, rgba(113, 221, 55, .04) 60%); border-color: rgba(113, 221, 55, .45); color: #71dd37; }
.lms-plan-badge-professional { background: linear-gradient(145deg, rgba(255, 205, 90, .20) 0%, rgba(212, 160, 23, .13) 50%, rgba(255, 205, 90, .19) 100%); border-color: #d4a017; color: #e0b030; }

/* Nenápadný textový odkaz v řádku tlačítek (např. Vypnout automatické prodlužování) */
.btn-link.lms-link-subtle { color: var(--bs-secondary-color); font-size: .875rem; text-decoration: none; }
.btn-link.lms-link-subtle:hover { color: var(--bs-body-color); text-decoration: underline; }

/* Pásek "Tvůj aktuální tarif" v horní části panelu plánu, barvy podle plánu */
.lms-plan-ribbon { padding: .45rem 1rem; text-align: center; font-weight: 700; letter-spacing: .02em; }
.lms-plan-basic .lms-plan-ribbon { background: #71dd37; color: #fff; }
.lms-plan-professional .lms-plan-ribbon { background: linear-gradient(135deg, #f6d365 0%, #d4a017 50%, #f6d365 100%); color: #3b2a00; }
.lms-plan-free .lms-plan-ribbon { background: #00bad1; color: #fff; }

/* Formuláře: popisek pole (label) větší než poznámka pod ním. Core.css má label 0.8125rem, ale poznámky
   (small) jsou po zvětšení výše 0.975rem, takže vycházely opačně (poznámka větší než label). */
.form-label, .col-form-label {
  font-size: 1.0625rem;
}
.form-label small, .form-label .small, .col-form-label small {
  font-size: .9em;
}
.form-control + small, .form-control + .small,
.form-select + small, .form-select + .small,
.input-group + small, .input-group + .small,
.form-check + small, .form-check + .small {
  font-size: .875rem;
}

/* Rezervace - zobrazení Seznam: jeden termín = jeden řádek (bez samostatných řádků s názvem dne) */
#reservations-calendar .fc-list-day { display: none; }
#reservations-calendar .fc-list-event-time { width: 1%; white-space: nowrap; }
#reservations-calendar .fc-list-event-title { white-space: normal; }

/* Trial pásek v horní liště (trialNavbarWidget) */
.lms-trial-bar { text-decoration: none; color: inherit; }
.lms-trial-bar-body { display: block; min-width: 70px; }
.lms-trial-bar-text { font-size: .75rem; line-height: 1.1; margin-bottom: 4px; color: var(--bs-body-color); white-space: nowrap; }
.lms-trial-bar .progress { display: block; height: 6px; min-width: 70px; background-color: rgba(0, 186, 209, .2); }
.lms-trial-bar .progress-bar { background-color: #00bad1; }
@media (min-width: 768px) { .lms-trial-bar-body { min-width: 150px; } }

/* Trial pásek – opravená verze (plnění = zbývající dny, viditelná dráha) */
.lms-trial-bar-body { color: inherit; min-width: 120px; }
.lms-trial-bar .progress { display: flex; height: 8px; min-width: 120px; background-color: rgba(0, 186, 209, .25); }
.lms-trial-bar .progress-bar { display: block; background-color: #00bad1; }
@media (min-width: 992px) { .lms-trial-bar-body { min-width: 170px; } }

/* Zlaté tlačítko globálně (mimo kartu Professional), např. Upgradovat v trial pásku */
.btn.btn-gold { background: linear-gradient(135deg, #f6d365 0%, #d4a017 50%, #f6d365 100%); border: 0; color: #3b2a00; font-weight: 600; box-shadow: 0 2px 6px rgba(212, 160, 23, .35); }
.btn.btn-gold:hover, .btn.btn-gold:focus { color: #3b2a00; filter: brightness(1.08); }

/* Seznam funkcí plánu na registraci: funkce mimo vybraný plán jsou ztlumené */
.lms-feature-item { transition: opacity .2s ease; }
.lms-feature-item.lms-feature-off { opacity: .4; }
.lms-sel-free .lms-plan-check { background: #00bad1; color: #000; }
.lms-sel-basic .lms-plan-check { background: #71dd37; color: #000; }
.lms-sel-professional .lms-plan-check { background: linear-gradient(135deg, #f6d365, #d4a017); color: #000; }
.lms-feature-item .lms-plan-check { margin-right: .5rem; }
.lms-feature-item.lms-feature-off .lms-plan-check { filter: grayscale(1); }

/* Přepínač jazyků: položky nezalamovat (Slovenčina se nevešla na řádek) */
.dropdown-language .dropdown-menu { min-width: 11rem; }
.dropdown-language .dropdown-item { white-space: nowrap; }

/* Karta klienta v přehledech (klientKartaHtml): kontakty menším písmem, vždy celé (bez ořezu) */
.klient-kontakty { font-size: .75rem; line-height: 1.4; }
.klient-kontakty .icon-base { font-size: 1rem; }
.klient-kontakty a { overflow-wrap: anywhere; }

/* Podpis smlouvy kreslením (client-job.php) */
.podpis-canvas { width: 100%; height: 180px; border: 1px dashed var(--bs-border-color); border-radius: .375rem; touch-action: none; background: #fff; cursor: crosshair; }

/* Seznam termínů (admin-reservations): typ | klient | zakázka+poznámka */
#reservations-calendar .rez-radek { display: grid; grid-template-columns: 9rem minmax(0, 1.4fr) minmax(0, 1fr); gap: .5rem 1.5rem; align-items: start; padding: .25rem 0; }
#reservations-calendar .rez-typ { color: var(--bs-secondary-color); }
#reservations-calendar .rez-zakazka a { overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
    #reservations-calendar .rez-radek { grid-template-columns: 1fr; gap: .25rem; }
}

/* Seznam termínů na mobilu: každý termín jako karta (čas nahoře, tečka stavu vpravo, pod tím typ / klient / zakázka) */
@media (max-width: 767.98px) {
    #reservations-calendar .fc-list-table,
    #reservations-calendar .fc-list-table tbody { display: block; width: 100%; }
    #reservations-calendar .fc-list-event { display: block; position: relative; padding: .75rem 2rem .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
    #reservations-calendar .fc-list-event > td { display: block; border: 0; padding: 0; }
    #reservations-calendar .fc-list-event-time { width: auto; font-weight: 600; margin-bottom: .35rem; }
    #reservations-calendar .fc-list-event-graphic { position: absolute; top: .85rem; right: 1rem; width: auto; }
    #reservations-calendar .rez-typ { font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; }
    #reservations-calendar .rez-zakazka { padding-top: .5rem; margin-top: .25rem; border-top: 1px dashed var(--bs-border-color); }
    #reservations-calendar .rez-zakazka:empty { display: none; }
}

/* Náhled obrázku banneru v nastavení (Aktuality) */
.banner-nahled { height: 44px; width: 44px; object-fit: cover; }

/* Záložky a pills bez automatických velkých písmen na začátku každého slova (Vuexy core má .nav-tabs/.nav-pills .nav-link { text-transform: capitalize }, v češtině/slovenštině špatně) - platí globálně */
.nav-tabs .nav-link, .nav-pills .nav-link { text-transform: none; }

/* Odznak plánu: ikona + varianta malá (odznak Professional u funkcí jen pro tento tarif) */
.lms-plan-badge i { vertical-align: -.125em; }
a.lms-plan-badge { text-decoration: none; }
.lms-plan-badge-sm { padding: .15rem .5rem; font-size: .75rem; border-radius: .375rem; vertical-align: middle; }

/* Poměr stran 3:2 (Bootstrap ratio má jen 1x1, 4x3, 16x9, 21x9) - náhledové obrázky karet nápovědy */
.ratio-3x2 { --bs-aspect-ratio: 66.6667%; }

.lms-info-tip { color: var(--bs-primary); cursor: pointer; }

/* Popover u informačních ikonek: světlý motiv = šedá pozadí stránky z tématu, tmavý = o něco světlejší šedá než karty */
.popover.lms-info-popover { --bs-popover-bg: var(--bs-body-bg); }
[data-bs-theme="dark"] .popover.lms-info-popover { --bs-popover-bg: color-mix(in srgb, var(--bs-body-color) 10%, var(--bs-paper-bg, var(--bs-body-bg))); }

/* Srovnávací tabulka tarifů (web-pricing): na mobilu se každý řádek změní na kartu funkce, plány pod sebou (bez posuvníku) */
@media (max-width: 767.98px) {
  .pricing-plans-comparison .table-responsive { overflow: visible; border: 0 !important; }
  .pricing-plans-comparison .table thead { display: none; }
  .pricing-plans-comparison .table,
  .pricing-plans-comparison .table tbody,
  .pricing-plans-comparison .table tr,
  .pricing-plans-comparison .table td { display: block; width: 100%; }
  .pricing-plans-comparison .table tr { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); margin-bottom: 1rem; padding: .75rem 1rem; text-align: start; }
  .pricing-plans-comparison .table tr > td:first-child { white-space: normal; padding: 0 0 .5rem; border: 0; font-weight: 600; }
  .pricing-plans-comparison .table tr > td:not(:first-child) { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border: 0; text-align: end; }
  .pricing-plans-comparison .table tr > td:not(:first-child)::before { content: attr(data-label); color: var(--bs-body-color); }
  .pricing-plans-comparison .table tfoot,
  .pricing-plans-comparison .table tfoot td { display: block; }
  .pricing-plans-comparison .table tfoot tr { border: 0; padding: 0; margin: 0; }
  .pricing-plans-comparison .table tfoot .lms-cta-first { display: none; }
  .pricing-plans-comparison .table tr > td.lms-cta-cell { display: block; padding: .5rem 0; }
  .pricing-plans-comparison .table tr > td.lms-cta-cell::before { content: none; }
}

/* Odznak tarifu uvnitř tlačítka "Vybrat plán": plné světlé pozadí, aby nesplýval s barvou tlačítka */
.lms-plan-cta .lms-plan-badge { background: #fff; color: #000; border-color: transparent; box-shadow: none; }

/* Výběr výchozí barvy studia (admin-settings): dlaždice s barevným čtvercem, barva přichází z číselníku přes --lms-swatch */
.lms-vzhled-barva { padding: .35rem; line-height: 0; }
.lms-vzhled-swatch { display: block; width: 1.75rem; height: 1.75rem; border-radius: var(--bs-border-radius); background: var(--lms-swatch); }
.btn-check:checked + .lms-vzhled-barva { border-color: var(--lms-swatch); box-shadow: 0 0 0 .125rem var(--lms-swatch); }
.btn-check:checked + .lms-vzhled-tema { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--bs-primary-contrast, #fff); box-shadow: 0 0 0 .125rem rgba(var(--bs-primary-rgb), .35); }

/* Náhled výchozího vzhledu studia (admin-settings): miniatura stránky ve zvoleném motivu a barvě; světlá/tmavá polovina, "system" ukáže obě */
.lms-vzhled-nahled { display: flex; max-width: 22rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden; }
.lms-vzhled-nahled-half { background: var(--bs-body-bg); --lms-n-line: rgba(var(--bs-body-color-rgb), .2); --lms-n-strong: var(--bs-heading-color); flex: 1 1 0; display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
.lms-vzhled-nahled[data-tema="light"] .lms-vzhled-nahled-dark,
.lms-vzhled-nahled[data-tema="dark"] .lms-vzhled-nahled-light { display: none; }
.lms-nahled-bar { display: flex; align-items: center; gap: .4rem; }
.lms-nahled-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--lms-swatch); }
.lms-nahled-line { display: block; height: .4rem; border-radius: .2rem; background: var(--lms-n-line); }
.lms-nahled-line-short { width: 55%; }
.lms-nahled-title { height: .6rem; width: 70%; background: var(--lms-n-strong); }
.lms-nahled-btn { display: block; width: 3.5rem; height: 1.25rem; border-radius: var(--bs-border-radius); background: var(--lms-swatch); }

/* Superadmin e-mailové šablony: vizuální editor (Quill) + živý náhled v iframe */
.mail-promenne-menu { max-height: 20rem; overflow-y: auto; }
.mail-nahled-ram { margin-inline: auto; max-width: 100%; transition: max-width .2s; }
.mail-nahled-ram.mail-nahled-mobil { max-width: 375px; }
.mail-nahled-iframe { display: block; width: 100%; height: 38rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: #fff; }
@media (min-width: 1200px) { .mail-nahled-card { position: sticky; top: 5.5rem; } }

/* Superadmin editor nápovědy: úchyt pro přetažení, náhled nahraného screenshotu */
.nap-ed-handle { cursor: grab; }
.nap-ed-podtemata { min-height: .5rem; }
.nap-ed-nahled { max-height: 4.5rem; max-width: 8rem; object-fit: cover; }

/* Sticky lišta s hlavičkou formuláře (admin-order-edit): na menších displejích by zabrala půl obrazovky, tam se nelepí */
@media (max-width: 991.98px) { .sticky-element.sticky-lg-only { position: static; } }

/* Zakázka (admin-job): panely modulů jsou sbalené, otevřou se klikem na hlavičku (JS přidá .is-open) */
.zak-panel > .card-body { display: none; }
.zak-panel.is-open > .card-body { display: block; }
.zak-panel > .card-header { cursor: pointer; }
.zak-panel .zak-panel-chevron { transition: transform .2s; }
.zak-panel.is-open .zak-panel-chevron { transform: rotate(180deg); }

/* Zakázka (admin-job): lišta - pole názvu/klienta nesmí být přes celou šířku; na mobilu jen jméno klienta bez avataru a kontaktů */
.zak-bar-title { min-width: 0; }
.zak-bar-title .input-group { max-width: 28rem; }
@media (max-width: 767.98px) {
    .zak-bar-klient .avatar, .zak-bar-klient .klient-kontakty { display: none !important; }
}
.zak-bar-title { flex: 1 1 0; min-width: 8rem; }

/* Lišta zakázky: multiselect "Tato zakázka obsahuje" */
.zak-bar-obsah { min-width: 14rem; max-width: 30rem; }
.zak-bar-obsah .select2-container { width: 100%; }