/* Rosa Modern vzhled (spec docs/superpowers/specs/2026-09-27-modern-appearance-design.md, sekce "Tailwind pristup").
   Nacita se s DX theme RbModernTheme (AddFilePaths). Komponenty pouzivaji primo Tailwind utility
   (basecolor / primary / plna paleta); tady je jen to, co Tailwind utilitou nastavit nejde: most na
   DevExpress Fluent a skin DX gridu. Barvy bere z palet aplikace, ktere vzdy (pod html:root) vystavuje plugin
   Rosa.Tailwind (rb-modern-plugin.js) jako --rb-basecolor-<stupen> / --rb-primary-<stupen> ("R G B").
   Fallback = Tailwind gray / indigo (aplikace bez hex palety). Zatim jen svetly rezim (tmavy odlozen). */

/* --- Font: systemovy Segoe UI Variable jako spike RosaUiSpike (bez webfontu) --- */
html:root body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Zakladni velikost a radkovani textu: DX global.min.css (ApplyToPageElements) ho nastavuje, theme ho vypina
       (DX by prebijel odkazy a nadpisy Tailwindu) - bez toho by zdedeny text mel 16 px. */
    font-size: var(--dxds-font-size-base-md, 0.875rem);
    line-height: var(--dxds-line-height-base-md, 1.25rem);
}

/* --- Most na DevExpress Fluent (public API --dxds-*): neutralni plochy, text a okraje z basecolor aplikace.
       Primary skalu (--dxds-primary-*) generuje plugin z primary aplikace. --- */
html:root {
    --dxds-font-family-sans-serif: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --dxds-color-surface-neutral-default-hovered: rgb(var(--rb-basecolor-100, 243 244 246));
    --dxds-color-surface-neutral-subdued-rest: rgb(var(--rb-basecolor-50, 249 250 251));
    --dxds-color-surface-neutral-subdued-hovered: rgb(var(--rb-basecolor-100, 243 244 246));
    --dxds-color-content-neutral-default-rest: rgb(var(--rb-basecolor-900, 17 24 39));
    --dxds-color-content-neutral-subdued-rest: rgb(var(--rb-basecolor-500, 107 114 128));
    --dxds-color-border-neutral-default-rest: rgb(var(--rb-basecolor-300, 209 213 219));
    --dxds-color-border-neutral-subdued-rest: rgb(var(--rb-basecolor-200, 229 231 235));
    --dxds-color-border-neutral-default-hovered: rgb(var(--rb-basecolor-400, 156 163 175));
}

/* Editory (DxTextBox, DxComboBox, DxDateEdit, DxSpinEdit, ...): Fluent kresli spodni okraj tmavsi linkou
   (--dxbl-text-edit-underline-color = content-neutral-subdued). V klidu i pri najeti je okraj ciste sedy po celem
   obvodu, zvyraznujici linka v primary jen pri fokusu. :where() drzi specificitu na urovni vychozi deklarace DX
   (.dxbl-text-edit), takze stavy fokus / nevalidni / readonly / disabled ji dal prebiji. */
:where(html:root) .dxbl-text-edit {
    --dxbl-text-edit-underline-color: var(--dxbl-text-edit-border-color);
    --dxbl-text-edit-underline-hovered-color: var(--dxbl-text-edit-border-hovered-color);
}

/* Editory ve formulari (kazdy DxFormLayout / RbFormLayout - edit frameworku i vlastni stranky a popupy, stejny rozsah
   jako label pole nize) a ve filtracnim menu sloupce gridu (.rb-filter-menu, bez DxFormLayout): zaobleni 6 px jako
   RbButton (tw-rounded-md), o 3 px vyssi, fokus jako 1px ramecek v primary-700 (o stupen tmavsi nez
   DX fokus = primary-600) po celem obvodu s jemnou zari (2 px, primary-700 / 15 %) misto spodni linky. Jen pole
   formulare (.dxbl-fl) - editory child gridu (filtracni radek, inline edit) maji svuj vzhled. Readonly a disabled pole
   ramecek nedostanou. */
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit {
    --dxbl-text-edit-border-radius: 0.375rem;
    --dxbl-text-edit-padding-y: calc(var(--dxbl-text-edit-padding-y-m) + 1.5px);
}
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit:is(:focus-within, .dxbl-focused):not(.dxbl-readonly):not(.dxbl-disabled) {
    --dxbl-text-edit-underline-focused-height: 0px;
    /* Spodni hranu kresli DX barvou podtrzeni (pri fokusu = underline-focused-color). */
    --dxbl-text-edit-underline-focused-color: rgb(var(--rb-primary-700, 67 56 202));
    --dxbl-text-edit-border-color: rgb(var(--rb-primary-700, 67 56 202));
    --dxbl-text-edit-border-hovered-color: rgb(var(--rb-primary-700, 67 56 202));
    --dxbl-text-edit-border-active-color: rgb(var(--rb-primary-700, 67 56 202));
    box-shadow: 0 0 0 2px rgb(var(--rb-primary-700, 67 56 202) / .15);
}
/* Tlacitka editoru (sipka, kalendar, spin, krizek, +/... lookupu): bez svisle carky (DX jim dava border v barve ramecku)
   a s mensi ikonou - DX svg 14 px misto 16, material symbol lookupu 18 px misto 24. */
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit > .dxbl-btn,
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn,
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn { border-color: transparent !important; }
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit .dxbl-btn > .dxbl-image { --dxbl-image-width: 14px; --dxbl-image-height: 14px; }
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit .dxbl-btn > .material-symbols-rounded { font-size: 18px; }
/* Posledni ikona editoru (sipka comboboxu/lookupu/data, spin, krizek textoveho pole) 16 px od praveho okraje - DX ji ma
   13-14 px, tesne u hrany; ve sloupci formulare jsou ikony pod sebou. Tlacitka +/... lookupu (RbLookup) uzsi,
   aby rozestup ikon odpovidal krizku a sipce. */
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit .dxbl-btn:is(.dxbl-edit-btn-dropdown, .dxbl-spin-btn-inc, .dxbl-spin-btn-dec) { padding-right: 8px; }
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit > .dxbl-btn.dxbl-edit-btn-clear:not(:has(~ .dxbl-btn, ~ .dxbl-btn-group, ~ .dxbl-btn-group-vertical)) { margin-right: 6px; }
html:root :is(.dxbl-fl, .rb-filter-menu) .dxbl-text-edit .dxbl-btn.rb-lookup-btn { padding-left: 2px; padding-right: 2px; }
/* Tlacitka Zrusit / Pouzit filtracniho menu sloupce (DX patička dropdownu) se zaoblenim RbButton (tw-rounded-md). */
html:root .dxbl-filter-menu-dropdown-root .dxbl-dropdown-footer > .dxbl-btn { --dxbl-btn-border-radius: 0.375rem; border-radius: 0.375rem; }

/* Vyber vice polozek se seznamem (RbEditField.SetCheckList, RbEditFieldAccessEntity): seznam s checkboxy v dropdownu
   bez vlastniho ramecku (ramecek ma dropdown) a s omezenou vyskou - dlouhy seznam scrolluje uvnitr. */
.rb-check-list-box { border-width: 0; width: 100%; max-height: 20rem; }

/* Label pole ve formulari (DxFormLayoutItem) jako Refactoring UI formular: tmavy, normalni vaha. Velikost a
   radkovani zustavaji z DX (0.875rem / 1.25rem). Bez !important - vlastni CaptionCssClass pole
   (napr. !tw-text-primary-600) ho prebije; prebiji "color: inherit" z rosa-blazor.css. */
html:root .dxbl-fl .dxbl-fl-cpt {
    font-weight: 400;
    color: rgb(var(--rb-basecolor-800, 31 41 55));
}

/* ===== DevExpress internal - overit pri upgradu DevExpress (v26.2 "CSS Variable Rework") ===== */
/* Grid ve stylu Tailwind UI tabulky: bila karta s jemnym okrajem a stinem, jen vodorovne cary (slot Gridlines),
   hlavicka kapitalkami (text-xs, basecolor-500) na basecolor-50, vzdusne radky, hover basecolor-50, vyber primary-50.
   Orezavani textu na uzkych sloupcich resi sirky sloupcu ve frameworku (sloupcum nastavuj sirky). */
.rb-grid-modern {
    --dxbl-grid-bg: #fff;
    --dxbl-grid-row-bg: #fff;
    --dxbl-grid-color: rgb(var(--rb-basecolor-700, 55 65 81));
    --dxbl-grid-border-color: rgb(var(--rb-basecolor-200, 229 231 235));
    --dxbl-grid-outer-border-color: transparent;
    --dxbl-grid-border-radius: 0;
    --dxbl-grid-h-line-color: rgb(var(--rb-basecolor-200, 229 231 235));
    --dxbl-grid-header-bg: rgb(var(--rb-basecolor-50, 249 250 251));
    --dxbl-grid-header-color: rgb(var(--rb-basecolor-500, 107 114 128));
    --dxbl-grid-header-font-weight: 600;
    --dxbl-grid-hover-bg: rgb(var(--rb-basecolor-50, 249 250 251));
    --dxbl-grid-focus-bg: rgb(var(--rb-primary-50, 238 242 255));
    --dxbl-grid-selection-bg: rgb(var(--rb-primary-50, 238 242 255));
    --dxbl-grid-footer-bg: rgb(var(--rb-basecolor-50, 249 250 251));
    --dxbl-grid-footer-color: rgb(var(--rb-basecolor-700, 55 65 81));
    --dxbl-grid-footer-font-weight: 500;
    --dxbl-grid-highlighted-text-bg: rgb(var(--rb-primary-100, 224 231 255));
    --dxbl-grid-highlighted-text-color: inherit;
    border: 1px solid rgb(var(--rb-basecolor-200, 229 231 235)) !important;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    overflow: hidden;
    background: #fff;
}

/* Vzdusne radky (Tailwind UI: py-4 px-3) jen pro SizeMode.Medium; hustsi .dxbl-sm si necha padding DX. */
.rb-grid-modern:not(.dxbl-sm) {
    --dxbl-grid-text-cell-padding-x: 0.75rem;
    --dxbl-grid-text-cell-padding-y: 0.875rem;
}
/* Nizke radky (RbGridFrameworkOptions.RowSize = Small, trida rb-grid-modern-sm) nezavisle na DX SizeMode; Modern bunky
   se zmensi pres RbGridSize (avatar 28 px, dlazdice data 36 px, stitky 16 px). Specificita nad pravidlem vyse. */
.rb-grid-modern.rb-grid-modern-sm.dxbl-grid {
    --dxbl-grid-text-cell-padding-x: 0.625rem;
    --dxbl-grid-text-cell-padding-y: 0.375rem;
}

.rb-grid-modern.rb-grid-modern-attached { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rb-grid-modern .rb-th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
/* Tlacitko filtru ve sloupci: padding bunky + padding tlacitka + okraj ikony ho odsunuly od okraje a bralo misto
   textu. Mensi padding a zaporny okraj ho pritahnou k hrane; padding bunky zustava, aby hlavicky vpravo
   zarovnanych sloupcu sedely s daty. */
.rb-grid-modern .rb-th .dxbl-grid-filter-menu-funnel-btn {
    padding: 0.125rem;
    margin-inline-end: -0.5rem;
}

/* VisibleOnHover v DX bere i :focus-visible hlavicky, ktery muze zustat po resizu. U fokusu skryteho DX
   (ovladani mysi) rozhoduje jen hover; klavesnicovy fokus zustava. Nad uchytem a pri tazeni filtr schovat.
   Tlacitko sloupce s aktivnim filtrem tridu -visible-on-hover nema, zustava videt. Touch rezim nemeni. */
html:not(.dxTouchUI) .rb-grid-modern.dxbl-grid[data-dx-focus-hidden] .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(:hover) .dxbl-btn.dxbl-grid-filter-menu-funnel-btn-visible-on-hover,
html:not(.dxTouchUI) .rb-grid-modern.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:has(> .dxbl-grid-column-resize-anchor:hover) .dxbl-btn.dxbl-grid-filter-menu-funnel-btn-visible-on-hover,
body.dxbl-resize-cursor .rb-grid-modern.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th .dxbl-btn.dxbl-grid-filter-menu-funnel-btn-visible-on-hover {
    display: none;
}

/* DX nastavuje velikost pisma az na vnitrnim obsahu hlavicky - kapitalky text-xs proto i na potomcich. */
.rb-grid-modern .rb-th,
.rb-grid-modern .rb-th * { font-size: 0.75rem; }
/* Zmena sirky sloupcu: Modern ma jen vodorovne cary, takze hlavicka neukazuje, kde tahat. DX uchyt
   (.dxbl-grid-column-resize-anchor, 7px na pravem okraji hlavicky, opacity 0) dostane vlastni znacku:
   najeti na hlavicku = jemne oddelovace sloupcu, najeti na uchyt = vyrazny uchyt v primary. */
.rb-grid-modern.dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-column-resize-anchor { opacity: 1; }
.rb-grid-modern.dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-column-resize-anchor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 30%;
    bottom: 30%;
    width: 1px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgb(var(--rb-basecolor-300, 209 213 219));
    opacity: 0;
    transition: opacity 150ms ease, width 150ms ease, top 150ms ease, bottom 150ms ease, background-color 150ms ease;
    pointer-events: none;
}
.rb-grid-modern.dxbl-grid .dxbl-grid-table > thead:hover > tr > th > .dxbl-grid-column-resize-anchor:not(.dxbl-last)::after { opacity: 1; }
.rb-grid-modern.dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-column-resize-anchor:hover::after {
    opacity: 1;
    width: 3px;
    top: 18%;
    bottom: 18%;
    background: rgb(var(--rb-primary-500, 99 102 241));
}

.rb-grid-modern .rb-row { transition: background-color 120ms ease; }
.rb-grid-modern .rb-row td,
.rb-grid-modern .rb-footer { font-variant-numeric: tabular-nums; }
.rb-grid-modern .rb-footer { font-size: 0.75rem; }
/* Pozadi filtracniho radku sede jako hlavicka (basecolor-50) s carou pod nim - oddeli ho od dat. */
.rb-grid-modern.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td {
    background-color: rgb(var(--rb-basecolor-50, 249 250 251));
    border-bottom: 1px solid rgb(var(--rb-basecolor-200, 229 231 235));
}
/* Ukotvene sloupce (command column, vyber): hlavicka ma u DX pozadi gridu (--dxbl-grid-bg), ne hlavicky - sjednotit. */
.rb-grid-modern.dxbl-grid .dxbl-grid-table > thead > tr > th.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell) {
    background: var(--dxbl-grid-header-bg);
}
/* Hlavicka "Akce": DX dava obsahu hlavicky command column zaporny svisly margin (misto pro tlacitko New), text
   pak sedel vys nez titulky datovych sloupcu. RbGridCommandColumn ma vlastni HeaderTemplate bez tlacitka. */
.rb-grid-modern.dxbl-grid .dxbl-grid-table > thead > tr > th.dxbl-grid-command-cell > .dxbl-grid-header-content {
    margin-block: 0;
}
/* Oddelovac ukotvenych sloupcu: DX ho kresli tmavou --dxbl-grid-fixed-column-border-color (#767676) jen kdyz je pod
   sloupcem odscrollovany obsah (dynamicke pravidlo v adoptedStyleSheets), jinak chybi - cara blikala podle polohy
   scrollbaru. V Modern je stale videt a ma barvu vodorovnych car. */
.rb-grid-modern {
    --dxbl-grid-fixed-column-border-color: var(--dxbl-grid-h-line-color);
}
.rb-grid-modern.dxbl-grid .dxbl-grid-table > * > tr > :not(.dxbl-grid-fixed-cell) + .dxbl-grid-fixed-right-cell {
    border-left-color: var(--dxbl-grid-fixed-column-border-color);
}
.rb-grid-modern.dxbl-grid .dxbl-grid-table > * > tr > .dxbl-grid-last-fixed-left-cell {
    border-right-color: var(--dxbl-grid-fixed-column-border-color);
}
/* Filtracni radek (varianta C): editory jako mala pole formulare - tenky zaobleny ramecek v basecolor,
   bily podklad, pri najeti tmavsi, pri psani ramecek a jemna zare v primary. Bez lupy; vyber a datum maji svou ikonu. */
.rb-grid-modern .dxbl-grid-filter-row .dxbl-text-edit {
    --dxbl-text-edit-bg: #fff;
    --dxbl-text-edit-border-color: rgb(var(--rb-basecolor-200, 229 231 235));
    --dxbl-text-edit-border-hovered-color: rgb(var(--rb-basecolor-300, 209 213 219));
    --dxbl-text-edit-border-radius: 0.375rem;
}
.rb-grid-modern .dxbl-grid-filter-row .dxbl-text-edit:focus-within {
    border-color: rgb(var(--rb-primary-500, 99 102 241)) !important;
    box-shadow: 0 0 0 3px rgb(var(--rb-primary-100, 224 231 255)) !important;
}
/* Tlacitka editoru (sipka, kalendar, spin, krizek) bez vlastniho okraje: DX jim dava border v barve ramecku editoru,
   ktery se kreslil jako svisla carka vedle ikony. */
.rb-grid-modern .dxbl-grid-filter-row .dxbl-text-edit > .dxbl-btn,
.rb-grid-modern .dxbl-grid-filter-row .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn,
.rb-grid-modern .dxbl-grid-filter-row .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn { border-color: transparent !important; }
.rb-grid-modern td.dxbl-grid-empty-data-area { color: rgb(var(--rb-basecolor-500, 107 114 128)) !important; }
/* Panel toolbaru: padding a mezery mezi polozkami zustavaji z .rb-grid-toolbar-new (rosa-blazor.css). */
.rb-grid-modern .dxbl-grid-toolbar-container { background: #fff; border-bottom: 1px solid rgb(var(--rb-basecolor-200, 229 231 235)); }
/* Text switchu filtru tucne jako polozky toolbaru (RbButton tw-font-medium). !important kvuli globalnimu
   ".dx-blazor-checkbox label { font-weight: normal !important }" v rosa-blazor.css; selektor je specifictejsi, takze vyhraje. */
.rb-grid-toolbar-modern .dxbl-checkbox,
.rb-grid-toolbar-modern .dxbl-checkbox label { font-weight: 500 !important; }
/* Prepadove menu toolbaru ("...", adaptivita DX toolbaru): polozky pod sebou pres celou sirku se stejnymi mezerami,
   jako menu - ne tlacitka nalepena na sebe. Segmenty bez svisle cary z toolbaru a rovnym dilem, tlacitko jako radek
   menu (ikona + text vlevo, sipka podmenu vpravo), hledani pres celou sirku bez odsazeni z toolbaru. */
html:root .dxbl-toolbar-dropdown {
    min-width: 16rem;
    /* Zaobleni panelu jako menu akci editu (rb-edit-actions-dropdown). */
    --dxbl-dropdown-border-radius: 10px;
    --dxbl-toolbar-dropdown-border-radius: 10px;
    /* Sloupec textu polozek s ikonou (zacatek textu tlacitka, zmereno v menu): od nej zacinaji i polozky bez ikony
       (prepinace, volby segmentu), aby texty v menu byly pod sebou. */
    --rb-toolbar-menu-text-indent: 36px;
}
html:root .dxbl-toolbar-dropdown .dxbl-toolbar-dropdown-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
}
html:root .dxbl-toolbar-dropdown .dxbl-toolbar-dropdown-item { padding: 0 !important; margin: 0; }
html:root .dxbl-toolbar-dropdown .dxbl-toolbar-menu-item,
html:root .dxbl-toolbar-dropdown .dxbl-toolbar-item-tmpl { display: block; width: 100%; }
/* Segmentovy filtr (RbGridToolbarFilters): v toolbaru segmenty, v menu "..." misto nich radek s vybranou hodnotou
   a podmenu voleb (polozka rb-toolbar-overflow-only hned za segmenty). V toolbaru je ta polozka skryta - nulova sirka
   nic neuvolni, takze ji adaptivita DX (odebira polozky od konce) presune do menu nejpozdeji spolu se segmenty;
   v menu naopak chybi segmenty. */
.rb-grid-toolbar .dxbl-toolbar-item:has(.rb-toolbar-overflow-only) { display: none; }
html:root .dxbl-toolbar-dropdown .dxbl-toolbar-dropdown-item:has(.rb-toolbar-segments) { display: none; }
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item.rb-toolbar-overflow-only { box-shadow: none !important; }
/* Rozbalovaci filtr toolbaru (RbGridToolbarFilters, obsah polozky rb-filter-menu-item; i podmenu filtru v "..."):
   menu jako menu akci editu (rb-edit-actions-dropdown) - panel s okrajem 6 px a mekkym stinem, radky 36 px tesne
   pod sebou, polozka 0 10 px se zaoblenim 6 px, pri najeti basecolor-100. Barvy ikon a textu dava ModernStyle. */
html:root .dxbl-toolbar-dropdown:has(.dxbl-toolbar-dropdown-item-list > .dxbl-toolbar-dropdown-item > .dxbl-toolbar-menu-item > .dxbl-btn > .rb-filter-menu-item) {
    --dxbl-dropdown-border-width: 1px;
    --dxbl-dropdown-border-style: solid;
    --dxbl-dropdown-border-color: rgb(var(--rb-basecolor-200, 229 231 235));
    box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .25);
}
/* Primou cestou (struktura DX: polozka > menu-item > tlacitko), aby se nechytl i seznam menu "...", kdyby DX vnorilo
   podmenu filtru do nej. */
html:root .dxbl-toolbar-dropdown .dxbl-toolbar-dropdown-item-list:has(> .dxbl-toolbar-dropdown-item > .dxbl-toolbar-menu-item > .dxbl-btn > .rb-filter-menu-item) { gap: 0; padding: 6px; }
/* Pres celou sirku menu (DX tlacitko ma sirku obsahu) - hover podklad je cely radek a fajfka u praveho okraje. */
html:root .dxbl-toolbar-dropdown .dxbl-btn:has(> .rb-filter-menu-item) {
    width: 100%; justify-content: flex-start;
    height: 36px; min-height: 36px; padding: 0 10px !important; border: 0 !important; border-radius: 6px;
    background: transparent !important; box-shadow: none !important;
}
html:root .dxbl-toolbar-dropdown .dxbl-btn:has(> .rb-filter-menu-item):hover { background: rgb(var(--rb-basecolor-100, 243 244 246)) !important; }
html:root .dxbl-toolbar-dropdown .rb-filter-menu-item { gap: 10px; }
/* Prepinac filtru (RbGridToolbarFilters, switch) v menu: popisek ve sloupci textu, switch u praveho okraje, pismo
   jako ostatni polozky (v toolbaru ho dava .rb-grid-toolbar-modern, menu je mimo nej). */
/* -5 px: label DX checkboxu ma vlastni vnitrni odsazeni (zmereno), text by jinak zacinal za sloupcem textu. */
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item:has(.dxbl-checkbox) { padding-left: calc(var(--rb-toolbar-menu-text-indent) - 5px) !important; }
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item:has(.dxbl-checkbox) > div { flex: 1 1 auto; min-width: 0; }
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item .dxbl-checkbox { width: 100%; justify-content: space-between; gap: 0.75rem; }
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item .dxbl-checkbox,
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item .dxbl-checkbox label {
    font-size: 13px; font-weight: 500 !important; color: rgb(var(--rb-basecolor-700, 55 65 81));
}
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    border-color: transparent !important;
    background: transparent !important;
    color: rgb(var(--rb-basecolor-700, 55 65 81)) !important;
}
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item:hover { background: rgb(var(--rb-basecolor-100, 243 244 246)) !important; }
/* Plovouci tooltip (RbFloatingTooltipPopup): umisteni a sipka podle data-rb-placement z rb-floating-tooltip.js -
   vpravo svisle na stred se sipkou vlevo (u praveho okraje okna preklopeny doleva se sipkou vpravo), pod cilem
   vodorovne na stred se sipkou nahore (posunutou, kdyz se popup v okne posune, aby nepretekl). */
/* Zobrazena kopie v body je nad vsim, i nad DX menu (jinak by jeho okraj prekryl sipku tooltipu polozky). */
body > .rb-floating-tooltip { z-index: 100000; }
.rb-floating-tooltip { transform: translateY(-50%); }
.rb-floating-tooltip[data-rb-placement="bottom"] { transform: translateX(-50%); }
.rb-floating-tooltip-arrow { border-style: solid; border-width: 0 0 1px 1px; left: -4px; top: 50%; transform: translateY(-50%) rotate(45deg); }
.rb-floating-tooltip[data-rb-placement="left"] .rb-floating-tooltip-arrow { left: auto; right: -4px; border-width: 1px 1px 0 0; }
.rb-floating-tooltip[data-rb-placement="bottom"] .rb-floating-tooltip-arrow {
    border-width: 1px 0 0 1px; top: -4px; left: calc(50% + var(--rb-floating-tooltip-arrow-shift, 0px)); transform: translateX(-50%) rotate(45deg);
}
/* Text akce jen s ikonou (ShowTextInForm/ShowTextInGrid = false, IconText.ShowText = false): v toolbaru skryty,
   v prepadovem menu (i "⋯", kam polozku presune adaptivita toolbaru) vzdy viditelny. */
.rb-toolbar-text-menu-only { display: none; }
html:root .dxbl-toolbar-dropdown .rb-toolbar-text-menu-only { display: inline; }
/* Zakazana polozka: text (400) i ikona (300) vybledle jako v kontextovem menu, bez hover pozadi - jinak by vypadala
   stejne jako povolena. */
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item:is(:disabled, .dxbl-disabled),
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item:is(:disabled, .dxbl-disabled):hover {
    background: transparent !important; color: rgb(var(--rb-basecolor-400, 156 163 175)) !important;
}
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item:is(:disabled, .dxbl-disabled) .material-symbols-rounded { color: rgb(var(--rb-basecolor-300, 209 213 219)) !important; }
html:root .dxbl-toolbar-dropdown .dxbl-btn.rb-toolbar-item > .dxbl-toolbar-dropdown-toggle { margin-left: auto; }
html:root .dxbl-toolbar-dropdown .dxbl-text-edit { width: 100%; }
/* Kontextova menu (DxContextMenu - kontextove menu gridu, obrazku, ...) ve stylu popoveru navbaru (menu uzivatele,
   vyber vzhledu): bila karta se zaoblenim xl, jemny okraj a stin, zaoblene polozky s hoverem v basecolor, tlumena
   ikona. Pres verejne promenne DX (--dxbl-context-menu-*); velikostni varianty (-s/-m) prepsane obe, gridy pouzivaji
   SizeMode.Small. Obsah polozky kresli RbContextMenuItem (tridy rb-context-menu-item*). */
html:root .dxbl-context-menu,
html:root .dxbl-context-menu-submenu {
    --dxbl-context-menu-bg: #fff;
    --dxbl-context-menu-color: rgb(var(--rb-basecolor-700, 55 65 81));
    --dxbl-context-menu-border-width: 1px;
    --dxbl-context-menu-border-style: solid;
    --dxbl-context-menu-border-color: rgb(var(--rb-basecolor-200, 229 231 235) / 0.7);
    --dxbl-context-menu-border-radius: 0.75rem;
    --dxbl-context-menu-box-shadow: 0 20px 25px -5px rgb(var(--rb-basecolor-900, 17 24 39) / 0.1), 0 8px 10px -6px rgb(var(--rb-basecolor-900, 17 24 39) / 0.1);
    --dxbl-context-menu-padding: 0.375rem;
    --dxbl-context-menu-min-width: 15rem;
    --dxbl-context-menu-item-border-radius: 0.5rem;
    --dxbl-context-menu-item-color: rgb(var(--rb-basecolor-700, 55 65 81));
    --dxbl-context-menu-item-hover-bg: rgb(var(--rb-basecolor-100, 243 244 246));
    --dxbl-context-menu-item-hover-color: rgb(var(--rb-basecolor-900, 17 24 39));
    --dxbl-context-menu-item-active-bg: rgb(var(--rb-basecolor-100, 243 244 246));
    --dxbl-context-menu-item-active-color: rgb(var(--rb-basecolor-900, 17 24 39));
    --dxbl-context-menu-item-icon-hover-color: rgb(var(--rb-basecolor-700, 55 65 81));
    --dxbl-context-menu-item-icon-active-color: rgb(var(--rb-basecolor-700, 55 65 81));
    --dxbl-context-menu-disabled-color: rgb(var(--rb-basecolor-400, 156 163 175));
    --dxbl-context-menu-item-padding-x-s: 0.25rem;
    --dxbl-context-menu-item-padding-y-s: 0.0625rem;
    --dxbl-context-menu-item-padding-x-m: 0.25rem;
    --dxbl-context-menu-item-padding-y-m: 0.125rem;
    --dxbl-context-menu-separator-color: rgb(var(--rb-basecolor-100, 243 244 246));
    --dxbl-context-menu-separator-margin: 0.375rem 0;
}
html:root .rb-context-menu-item {
    gap: 0.625rem;
    padding: 0.375rem 0.25rem;
    font-weight: 500;
}
html:root .rb-context-menu-item-icon {
    margin-right: 0;
    font-size: 20px;
    color: rgb(var(--rb-basecolor-500, 107 114 128));
    transition: color 120ms ease;
}
html:root .dxbl-context-menu-item:hover .rb-context-menu-item-icon { color: rgb(var(--rb-basecolor-700, 55 65 81)); }
html:root .dxbl-context-menu-item.dxbl-disabled .rb-context-menu-item-icon { color: rgb(var(--rb-basecolor-300, 209 213 219)); }
html:root .rb-context-menu-item-text { font-size: 0.8125rem; }

.rb-grid-modern ::-webkit-scrollbar { width: 10px; height: 10px; }
.rb-grid-modern ::-webkit-scrollbar-thumb { background: rgb(var(--rb-basecolor-300, 209 213 219)); border-radius: 999px; border: 3px solid #fff; }
.rb-grid-modern ::-webkit-scrollbar-track { background: transparent; }

/* ===== Drawer: vyjeti zprava, zatmaveni pozadi, plynuly fullscreen (spec 2026-10-09-edit-form-redesign, sekce 3 a 4) ===== */
@keyframes rb-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes rb-drawer-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes rb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-fade-out { from { opacity: 1; } to { opacity: 0; } }
.rb-drawer-panel { animation: rb-drawer-in 250ms ease-out; transition: width 250ms ease, max-width 250ms ease; }
.rb-drawer-panel-closing { animation: rb-drawer-out 200ms ease-in forwards; }
.rb-drawer-overlay { animation: rb-fade-in 250ms ease-out; }
.rb-drawer-overlay-closing { animation: rb-fade-out 200ms ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
    .rb-drawer-panel, .rb-drawer-panel-closing, .rb-drawer-overlay, .rb-drawer-overlay-closing { animation: none; transition: none; }
}

/* ===== Kostra editu: sidebar zalozek + obsah + footer (spec 2026-10-09-edit-form-redesign, sekce 1, 5, 6) =====
   Container query: pod 640 px sirky obalu jde sidebar nad obsah jako vodorovny posuvny radek. */
.rb-edit-container { container: rb-edit / inline-size; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.rb-edit-layout { display: flex; flex: 1 1 auto; min-height: 0; }
.rb-edit-sidebar-host { flex: 0 0 220px; overflow-y: auto; border-right: 1px solid rgb(var(--rb-basecolor-200, 229 231 235)); background: rgb(var(--rb-basecolor-50, 249 250 251)); }
.rb-edit-main { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; }
.rb-edit-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fff; }
.rb-edit-footer { flex: none; background: #fff; }
.rb-edit-surface-gray-content .rb-edit-sidebar-host { background: #fff; }
.rb-edit-surface-gray-content .rb-edit-content,
.rb-edit-surface-gray-content .rb-edit-footer { background: rgb(var(--rb-basecolor-50, 249 250 251)); }
.rb-edit-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 16px; }
.rb-edit-sidebar-group { padding: 14px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--rb-basecolor-400, 156 163 175)); }
.rb-edit-sidebar-sep { display: none; }
.rb-edit-tab {
    display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0 12px; border: 0; border-radius: 0.375rem;
    background: none; font: inherit; font-weight: 400; text-align: left; color: rgb(var(--rb-basecolor-600, 75 85 99)); cursor: pointer;
    transition: background-color .15s, color .15s;
}
.rb-edit-tab[aria-current="page"] {
    background: #fff; color: rgb(var(--rb-primary-700, 67 56 202));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), inset 0 0 0 1px rgb(var(--rb-basecolor-200, 229 231 235));
}
/* UIOption.EditTabStyle = Flat: plocha aktivni zalozka bez stinu - na GraySidebar bila, na GrayContent primary-50
   (pravidlo gray-content nize ma stejnou specificitu a je pozdeji, takze na GrayContent vyhraje). */
.rb-edit-tabs-flat .rb-edit-tab[aria-current="page"] { background: #fff; box-shadow: none; }
.rb-edit-surface-gray-content .rb-edit-tab[aria-current="page"] { background: rgb(var(--rb-primary-50, 238 242 255)); box-shadow: none; }
/* Hover jako polozka sidebaru aplikace (AdminTwStyle.MenuItemPill: group-hover:tw-bg-basecolor-100) - aktivni i neaktivni
   zalozka vypada na hover stejne: sede pozadi a text basecolor-900. */
.rb-edit-tab:hover,
.rb-edit-tab[aria-current="page"]:hover,
.rb-edit-surface-gray-content .rb-edit-tab[aria-current="page"]:hover {
    background: rgb(var(--rb-basecolor-100, 243 244 246)); color: rgb(var(--rb-basecolor-900, 17 24 39)); box-shadow: none;
}
/* Badge u sidebar zalozky (spec 2026-10-12, sekce 6) - neutralni bez data-color, barevna nese tridy tw-bg/tw-text. */
.rb-edit-tab { gap: 8px; }
.rb-edit-tab-caption { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-edit-tab-badge { flex: none; min-width: 20px; padding: 0 6px; border-radius: 9999px; font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; }
.rb-edit-tab-badge:not([data-color]) { background: rgb(var(--rb-basecolor-100, 243 244 246)); color: rgb(var(--rb-basecolor-600, 75 85 99)); }
@container rb-edit (max-width: 639px) {
    .rb-edit-layout { flex-direction: column; }
    /* Ve sloupci by flex-basis 0 v popupu (vyska podle obsahu, ne pevna) srazil obsah na nulovou vysku. */
    .rb-edit-main { flex: 1 1 auto; }
    .rb-edit-sidebar-host { flex: none; overflow: visible; border-right: 0; border-bottom: 1px solid rgb(var(--rb-basecolor-200, 229 231 235)); position: relative; }
    .rb-edit-sidebar-host::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; pointer-events: none;
        background: linear-gradient(to right, transparent, rgb(var(--rb-basecolor-50, 249 250 251))); }
    .rb-edit-surface-gray-content .rb-edit-sidebar-host::after { background: linear-gradient(to right, transparent, #fff); }
    .rb-edit-sidebar { flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
    .rb-edit-sidebar-group { display: none; }
    .rb-edit-sidebar-sep { display: block; flex: none; width: 1px; margin: 8px 4px; background: rgb(var(--rb-basecolor-200, 229 231 235)); }
    .rb-edit-tab { flex: none; width: auto; white-space: nowrap; }
    .rb-edit-tab-caption { flex: none; }
}

/* Vnorene zalozky uvnitr zalozky sidebaru: vodorovne, podtrzena aktivni (spec sekce 5). */
.rb-edit-subtabs .dxbl-tabs-item { color: rgb(var(--rb-basecolor-500, 107 114 128)); font-weight: 500; }
.rb-edit-subtabs .dxbl-tabs-item.dxbl-active { color: rgb(var(--rb-primary-700, 67 56 202)); }
/* Podtrzeni aktivni zalozky kresli DX jako ::after s background-color var(--dxbl-tabs-tab-bg), ktery je u .dxbl-active
   var(--dxbl-tabs-tab-active-bg) (Fluent: primary DX). Promenne deklaruje .dxbl-tabs, proto je prepisujeme na nem
   (CssClass RbTabs je na korenu .dxbl-tabs). */
.dxbl-tabs.rb-edit-subtabs {
    --dxbl-tabs-tab-active-bg: rgb(var(--rb-primary-700, 67 56 202));
    --dxbl-tabs-tab-active-hover-bg: rgb(var(--rb-primary-700, 67 56 202));
    --dxbl-tabs-tab-active-color: rgb(var(--rb-primary-700, 67 56 202));
    --dxbl-tabs-tab-active-hover-color: rgb(var(--rb-primary-700, 67 56 202));
}

/* Karta detailu vedle gridu (RbGridDetail) s primym editem: bez vlastniho paddingu (Style.Grid.DetailPanel tw-p-3) -
   odsazeni dava edit sam jako drawer (hlavicka 60 px, titulek i pole 24 px od okraje), jinak by se okraje scitaly
   (12 + 24 px). Ostatni obsah detailu padding karty dal ma. */
.rb-grid-detail-panel:has(.rb-direct-edit) { padding: 0; }

/* Primy edit jako samostatny formular na strance (RbDirectEdit Card): bila karta s rameckem a jemnym stinem, vyska podle
   obsahu - scrolluje stranka, ne edit (vnitrni scroll s h-full by na strance bez pevne vysky uriznul konec formulare).
   overflow: clip orizne rohy obsahu do zaobleni a na rozdil od hidden nevytvori scroll kontejner, takze paticka muze byt
   sticky k spodnimu okraji okna. */
.rb-direct-edit-card {
    background: #fff; border-radius: 12px; overflow: clip;
    box-shadow: 0 0 0 1px rgb(var(--rb-basecolor-200, 229 231 235)), 0 1px 3px rgba(16, 24, 40, .06);
}
.rb-direct-edit-card .rb-edit-container { height: auto; }
.rb-direct-edit-card .rb-edit-content { overflow: visible; }
.rb-direct-edit-card .rb-edit-footer {
    position: sticky; bottom: 0; z-index: 1;
    border-top: 1px solid rgb(var(--rb-basecolor-200, 229 231 235));
}
/* Sticky drzi paticku nad spodnim paddingem scroll kontejneru layoutu (napr. 20 px) - v tom pruhu by pod ni prosvitala pole.
   Pozadi paticky proto pokracuje dolu; na konci formulare ho orizne karta (overflow: clip), takze nic nepresahuje. */
.rb-direct-edit-card .rb-edit-footer::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 64px; background: inherit; pointer-events: none;
}

/* Popup editu: plynula zmena velikosti pri prepnuti fullscreen. */
.rb-edit-popup { transition: width 250ms ease, max-width 250ms ease, height 250ms ease; }
/* Telo popupu bez paddingu DX (Fluent 1.5rem do stran, nahore/dole podle hlavicky) - sidebar, cara hlavicky i footer
   jdou od okraje jako v draweru. Selektor kopiruje DX pravidlo (.dxbl-modal>.dxbl-modal-root>.dxbl-popup>...) a pridava
   tridu popupu, takze ma vyssi specificitu bez !important. */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.rb-edit-popup > .dxbl-modal-content > .dxbl-modal-body { padding: 0; }
/* Fullscreen: bez zaobleni a okraje - radius i ramecek nese .dxbl-modal-content (a telo bez hlavicky/footeru), ne jen
   .dxbl-popup. Ramecek 2 x 1 px by navic pretekl 100vh (hlavicka 60 px + obsah calc(100vh - 60px)) a .dxbl-modal-root
   by ukazal scrollbar. Promenne DX se dedi z .dxbl-popup do obsahu i tela. */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.rb-edit-popup-fullscreen { --dxbl-popup-border-radius: 0; --dxbl-popup-border-width: 0; }
/* Pevne sirky popupu (EditOptions.PopupWidth, RbPopupWidthCss). rosa-blazor.css dava .dxbl-popup.rb-edit
   "max-width: initial !important" (2/3 okna), proto selektor s dalsi tridou a !important. */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.rb-edit.rb-edit-popup-narrow { width: 100% !important; max-width: 480px !important; }
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.rb-edit.rb-edit-popup-medium { width: 100% !important; max-width: 640px !important; }
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.rb-edit.rb-edit-popup-large { width: 100% !important; max-width: 960px !important; }
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.rb-edit.rb-edit-popup-wide { width: 100% !important; max-width: 1200px !important; }
/* Popup se zalozkami ma stalou vysku - jinak by pri prepinani zalozek skakal podle obsahu. Stejne popup s gridem
   SetFillHeight bez sidebaru: s pouhym max-h by mel obsah vysku podle obsahu a grid by nemel co vyplnit. */
.rb-edit-popup:not(.rb-edit-popup-fullscreen) .rb-edit-container.rb-edit-has-sidebar,
.rb-edit-popup:not(.rb-edit-popup-fullscreen) .rb-edit-container.rb-edit-has-fill { height: min(calc(90vh - 60px), 760px); }
@media (prefers-reduced-motion: reduce) {
    .rb-edit-popup { transition: none; }
}

/* ===== Sekce formulare: popisek vlevo v 1/3 nebo nahore s carou (spec sekce 8) ===== */
.rb-edit-group { width: 100%; box-sizing: border-box; }
/* Radek poli sekce je ve stromu editace primo polozkou flex radku DxFormLayout (.dxbl-row) - bez sirky by se smrstil na
   obsah a pole "pres celou sirku" (100 %) by byla jen tak siroka jako nejsirsi pole. */
.rb-edit-group-fields { width: 100%; }
.rb-edit-group-left { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 24px 0; }
/* min(..., 100%): RbEditGroup se kresli i mimo .rb-edit-container (UserAccount/RbDirectEditCard, RbPopupParamEdit,
   RbFrameworkPage), kde container query nize neplati - na telefonu by pevne minimum preteklo vodorovne. */
.rb-edit-group-left .rb-edit-group-caption { flex: 1 1 0; min-width: min(200px, 100%); }
.rb-edit-group-left .rb-edit-group-caption h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: rgb(var(--rb-basecolor-900, 17 24 39)); }
.rb-edit-group-left .rb-edit-group-caption p { margin: 4px 0 0; color: rgb(var(--rb-basecolor-500, 107 114 128)); }
.rb-edit-group-left .rb-edit-group-body { flex: 2 1 0; min-width: min(360px, 100%); }
.rb-edit-group-top { padding: 20px 0 8px; }
.rb-edit-group-title { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: rgb(var(--rb-basecolor-900, 17 24 39)); }
.rb-edit-group-title::after { content: ""; flex: 1; height: 1px; background: rgb(var(--rb-basecolor-200, 229 231 235)); }
.rb-edit-group-top p { margin: 4px 0 0; font-size: 13px; color: rgb(var(--rb-basecolor-500, 107 114 128)); }
.rb-edit-group-top .rb-edit-group-body { margin-top: 12px; }
/* Uzka plocha poli sekce (uzky drawer/popup, sekce s popiskem vlevo v draweru Large): pole pres celou sirku misto
   do pul - lookup, tagy i switch radek by se pod ~520 px do poloviny nevesly. Container query nad celym editem (rb-edit):
   vlastni kontejner na sekci nejde - container-type uvnitr flex polozek Chromium pocita jako pri nulove sirce a nafukne
   vysku. Sirka ploch poli W = sirka editu - sidebar 220 (jen od 640 px) - padding obsahu 48; popisek vlevo je v radku
   (pole 2/3 z W - 40) az od W 600 (min. 200 + 40 + 360), jinak se zalomi nad pole. */
@container rb-edit (max-width: 567px) {
    .rb-edit-group-fields > .dxbl-fl-item { flex: 0 0 100%; max-width: 100%; }
}
@container rb-edit (min-width: 648px) and (max-width: 867px) {
    .rb-edit-container:not(.rb-edit-has-sidebar) .rb-edit-group-left .rb-edit-group-fields > .dxbl-fl-item { flex: 0 0 100%; max-width: 100%; }
}
@container rb-edit (min-width: 640px) and (max-width: 787px) {
    .rb-edit-has-sidebar .rb-edit-group-fields > .dxbl-fl-item { flex: 0 0 100%; max-width: 100%; }
}
@container rb-edit (min-width: 868px) and (max-width: 1087px) {
    .rb-edit-has-sidebar .rb-edit-group-left .rb-edit-group-fields > .dxbl-fl-item { flex: 0 0 100%; max-width: 100%; }
}
/* Ve sloupci bez flex-grow - pomer 1:2 (popisek : pole) by jinak rozdelil vysku a nafoukl mezery mezi poli. */
@container rb-edit (max-width: 639px) {
    .rb-edit-group-left { flex-direction: column; }
    .rb-edit-group-left .rb-edit-group-caption,
    .rb-edit-group-left .rb-edit-group-body { flex: none; }
    .rb-edit-group-left .rb-edit-group-body { min-width: 0; }
}
/* Fallback mimo .rb-edit-container (container query tam nema kontejner): uzke okno = popisek nad poli. */
@media (max-width: 639px) {
    .rb-edit-group-left { flex-direction: column; }
    .rb-edit-group-left .rb-edit-group-caption,
    .rb-edit-group-left .rb-edit-group-body { flex: none; }
    .rb-edit-group-left .rb-edit-group-body { min-width: 0; }
}
/* Usek poli stromu editace (pole, AddComponent) zarovnany s nadpisem a carou sekce: polozky DxFormLayout maji vodorovny
   gutter (padding pul --dxbl-row-item-spacing-x) a radek ho zapornym okrajem nerusi - rosa-blazor.css nuluje margin
   .dxbl-row globalne. Bez toho by obsah mimo skupinu (AddHeader, pole primo v zalozce) zacinal 6 px vpravo od nadpisu
   skupiny a pole ve skupine koncila 6 px pred jeji carou. Jen primy radek useku - vnorene formulare komponent ne. */
[data-rb-edit-segment="fields"] > form > .dxbl-fl > .dxbl-row { margin-inline: calc(var(--dxbl-row-item-spacing-x) * -0.5); }

/* Child grid a carousel ve stromu editace (spec 2026-10-12, sekce 7): odstup jako mezi sekcemi; v tele skupiny bez nej. */
.rb-edit-childgrid { padding-top: 24px; }
.rb-edit-group-body .rb-edit-childgrid { padding-top: 0; }
.rb-edit-group-body > * + * { margin-top: 16px; }

/* SetFillHeight (spec 2026-10-12, sekce 7): flex sloupec od obsahu editu az ke gridu; grid vyplni zbytek a scrolluje uvnitr.
   Clanky retezce maji automaticke minimum (min-height: auto) = obsah pred gridem + minimalni vyska gridu (inline min-height
   obalu, vychozi 300 px): pri male vysce scrolluje obsah editu a grid nepretece pres okraj/caru skupiny. Aby minimum
   nebylo prirozena vyska gridu (vsechny radky), ma vnitrek obalu contain: size - jeho vlastni vyska se do minima nepocita. */
.rb-edit-content.rb-edit-content-fill { display: flex; flex-direction: column; }
.rb-edit-fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: auto; }
/* Skupina s popiskem vlevo v retezci: telo se natahuje do vysky. Radek (popisek | telo) jen tam, kde se popisek vejde
   vedle tela (plocha poli W >= 600, viz vypocet u sekci vyse) - zalomeny radek by si vysku delil se zalomenou casti.
   Jinak sloupec: popisek nad polem, telo vyplni zbytek. */
.rb-edit-group-left.rb-edit-fill { flex-direction: column; flex-wrap: nowrap; }
.rb-edit-group-left.rb-edit-fill > .rb-edit-group-caption { flex: none; }
.rb-edit-group.rb-edit-fill > .rb-edit-group-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: auto; min-width: 0; }
@container rb-edit (min-width: 648px) {
    .rb-edit-container:not(.rb-edit-has-sidebar) .rb-edit-group-left.rb-edit-fill { flex-direction: row; }
    .rb-edit-container:not(.rb-edit-has-sidebar) .rb-edit-group-left.rb-edit-fill > .rb-edit-group-caption { flex: 1 1 0; }
    .rb-edit-container:not(.rb-edit-has-sidebar) .rb-edit-group-left.rb-edit-fill > .rb-edit-group-body { flex: 2 1 0; min-width: min(360px, 100%); }
}
@container rb-edit (min-width: 868px) {
    .rb-edit-has-sidebar .rb-edit-group-left.rb-edit-fill { flex-direction: row; }
    .rb-edit-has-sidebar .rb-edit-group-left.rb-edit-fill > .rb-edit-group-caption { flex: 1 1 0; }
    .rb-edit-has-sidebar .rb-edit-group-left.rb-edit-fill > .rb-edit-group-body { flex: 2 1 0; min-width: min(360px, 100%); }
}
/* Obal fill gridu: DynamicComponent child frameworku -> RbGridPopup -> RbGrid (div) -> DxGrid; mezivrstvy se natahuji. */
.rb-edit-fill-grid { display: flex; flex-direction: column; flex: 1 1 auto; }
.rb-edit-fill-grid > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; contain: size; }
.rb-edit-fill-grid .dxbl-grid { flex: 1 1 auto; min-height: 0; height: 100%; }
/* Vodorovny pruh v retezci (jen pruh, jehoz obal nese rb-edit-fill - ne pruh mimo retezec uvnitr fill kontejneru):
   DxTabs, panel obsahu a obsah aktivni zalozky (DX: display block, flex 1 0 100 %) se natahuji. */
.rb-edit-fill > .dxbl-tabs.rb-edit-subtabs,
.rb-edit-fill > .dxbl-tabs.rb-edit-subtabs > .dxbl-tabs-content-panel,
.rb-edit-fill > .dxbl-tabs.rb-edit-subtabs > .dxbl-tabs-content-panel > .dxbl-tabs-content.dxbl-active {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: auto;
}

/* ===== Bool pole jako radek: popisek a popis vlevo, ovladac vpravo (spec sekce 10) ===== */
.rb-edit-switch-row { position: relative; width: 100%; padding: 12px 14px; border-radius: 0.375rem; background: rgb(var(--rb-basecolor-50, 249 250 251)); }
/* Klikaci je cela seda plocha: pseudo-element labelu ji prekryje, klik na nej je klik na label a prepne checkbox/switch
   (zakazany nebo readonly vstup label neprepne). */
.rb-edit-switch-row .dxbl-checkbox > label::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rb-edit-surface-gray-content .rb-edit-switch-row { background: #fff; }
/* DX checkbox ma vlastni padding 10px 0 a ovladac nahore - v radku je bez paddingu a ovladac je svisle na stredu. */
.rb-edit-switch-row .dxbl-checkbox { width: 100%; padding: 0; align-items: center; }
.rb-edit-switch-row-text { display: flex; flex-direction: column; }
.rb-edit-switch-row-caption { font-weight: 500; color: rgb(var(--rb-basecolor-900, 17 24 39)); }
.rb-edit-switch-row-hint { font-size: 13px; color: rgb(var(--rb-basecolor-500, 107 114 128)); }
/* Readonly / zakazane pole: popisek a popis trochu zasednou, plocha neni klikaci (RbEditSwitchRow). */
.rb-edit-switch-row-readonly .rb-edit-switch-row-caption { color: rgb(var(--rb-basecolor-500, 107 114 128)); }
.rb-edit-switch-row-readonly .rb-edit-switch-row-hint { color: rgb(var(--rb-basecolor-400, 156 163 175)); }
.rb-edit-switch-row-readonly .dxbl-checkbox > label,
.rb-edit-switch-row-readonly .dxbl-checkbox > label * { cursor: default !important; }
.rb-edit-hint { margin-top: 6px; font-size: 12px; line-height: 16px; color: rgb(var(--rb-basecolor-500, 107 114 128)); }

/* ===== Hlavicka editu (RbFormContainer, data-rb-form-header): jedna velikost ikon pro vsechna tlacitka - akce s textem
   i bez nej, "..." (svg DX), fullscreen a zavrit (Material Symbols). Menu akci (rb-edit-actions-dropdown) ma vlastni 16 px. ===== */
[data-rb-form-header] { --rb-edit-header-icon-size: 18px; }
[data-rb-form-header] .material-symbols-rounded { font-size: var(--rb-edit-header-icon-size); line-height: 1; }
/* Akce na zacatku hlavicky (prazdny titulek): tlacitko zacina 12 px od okraje jako fullscreen/zavrit vpravo (hlavicka
   tw-pl-6 / tw-pr-3), ne na okraji obsahu - ikona prvni akce (padding tlacitka 10 px) tak lici zhruba s obsahem. */
[data-rb-edit-title]:empty + [data-rb-header-actions] { margin-left: -12px; }
/* Svisla cara pred fullscreen/zavrit oddeluje akce: bez akci (zadne tlacitko v jejich slotu) se nekresli. */
[data-rb-header-actions]:not(:has(button)) + [data-rb-header-separator] { display: none; }
/* Hlavicka bez titulku a bez jedineho tlacitka (akce, fullscreen, zavrit) by byla jen prazdny pruh s carou - nekresli se. */
[data-rb-form-header]:has(> [data-rb-edit-title]:empty):not(:has(button)) { display: none; }

/* ===== Custom akce v hlavicce editu: textova tlacitka s ikonou, neutralni, prepad do "..." (spec sekce 2) ===== */
.rb-edit-actions { min-width: 0; }
.rb-edit-actions .dxbl-toolbar { background: transparent; padding: 0; }
.rb-edit-actions .dxbl-btn {
    height: 36px; padding: 0 10px; gap: 8px; border: 0 !important; background: transparent !important;
    color: rgb(var(--rb-basecolor-700, 55 65 81)) !important; font-weight: 500; border-radius: 0.375rem;
}
.rb-edit-actions .dxbl-btn:hover { background: rgb(var(--rb-basecolor-100, 243 244 246)) !important; color: rgb(var(--rb-basecolor-900, 17 24 39)) !important; }
.rb-edit-actions .dxbl-btn .material-symbols-rounded { font-size: var(--rb-edit-header-icon-size, 18px); color: rgb(var(--rb-basecolor-500, 107 114 128)); }
/* Akce jen s ikonou (ShowTextInForm = false, text jen pro menu) a tlacitko "⋯": ctverec 36 x 36 s ikonou na stredu -
   stejne jako fullscreen a zavrit v hlavicce. RbToolbarItem dava ikone na zacatku -3px (pocita s textem za ni) a !tw-px-3.
   Skupina akci (FormMenu) ma za ikonou sipku podmenu (svg) - ta ctverec nedostane. */
.rb-edit-actions .dxbl-btn:has(> .rb-toolbar-text-menu-only):not(:has(> svg)),
.rb-edit-actions .dxbl-btn:has(> svg:only-child) {
    width: 36px; min-width: 36px; padding: 0 !important; justify-content: center;
}
.rb-edit-actions .dxbl-btn:has(> .rb-toolbar-text-menu-only):not(:has(> svg)) > .material-symbols-rounded { margin: 0 !important; }
.rb-edit-actions .dxbl-btn:has(> svg:only-child) { color: rgb(var(--rb-basecolor-500, 107 114 128)) !important; }
.rb-edit-actions .dxbl-btn > svg:only-child { width: var(--rb-edit-header-icon-size, 18px); height: var(--rb-edit-header-icon-size, 18px); }
.rb-edit-actions .dxbl-btn:hover:has(> svg:only-child),
.rb-edit-actions .dxbl-btn:hover:has(> .rb-toolbar-text-menu-only):not(:has(> svg)) > .material-symbols-rounded { color: rgb(var(--rb-basecolor-900, 17 24 39)) !important; }
/* Zakazana akce: text i ikona (ma vlastni barvu) vybledle, najeti mysi nic nezvyrazni - stav je poznat bez hoveru.
   Polozky prepadoveho menu resi obecne pravidlo html:root .dxbl-toolbar-dropdown. */
.rb-edit-actions .dxbl-btn:is(:disabled, .dxbl-disabled),
.rb-edit-actions .dxbl-btn:is(:disabled, .dxbl-disabled):hover {
    background: transparent !important; color: rgb(var(--rb-basecolor-300, 209 213 219)) !important;
}
.rb-edit-actions .dxbl-btn:is(:disabled, .dxbl-disabled) .material-symbols-rounded { color: rgb(var(--rb-basecolor-300, 209 213 219)) !important; }
/* Prepadove menu akci ("⋯" a podmenu; RbToolbar DropDownCssClass="rb-edit-actions-dropdown"): bily panel, jemny okraj,
   zaobleni 10 px, radky 36 px. Panel kresli .dxbl-dropdown-dialog (s .dxbl-toolbar-dropdown) z promennych --dxbl-dropdown-*;
   selektory pokryvaji tridu primo na dialogu i na jeho obalu. Ostatni vzhled polozek dava html:root .dxbl-toolbar-dropdown. */
.rb-edit-actions-dropdown,
.rb-edit-actions-dropdown.dxbl-dropdown-dialog,
.rb-edit-actions-dropdown .dxbl-dropdown-dialog {
    --dxbl-dropdown-bg: #fff;
    --dxbl-dropdown-border-width: 1px;
    --dxbl-dropdown-border-style: solid;
    --dxbl-dropdown-border-color: rgb(var(--rb-basecolor-200, 229 231 235));
    --dxbl-dropdown-border-radius: 10px;
}
/* Kompaktni menu jako varianta A navrhu: panel 250 px s okrajem 6 px, radky 36 px tesne pod sebou (bez mezer obecneho
   menu toolbaru), polozka 0 10 px, ikona 16 px a 10 px od textu, zaobleni 6 px, mekci stin. */
html:root .rb-edit-actions-dropdown.dxbl-dropdown-dialog { min-width: 250px; box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .25); }
html:root .rb-edit-actions-dropdown .dxbl-dropdown-body { padding: 0; }
html:root .rb-edit-actions-dropdown .dxbl-toolbar-dropdown-item-list { gap: 0; padding: 6px; }
html:root .rb-edit-actions-dropdown .dxbl-btn.rb-toolbar-item {
    height: 36px; min-height: 36px; padding: 0 10px !important; gap: 10px; border-radius: 6px; font-size: 14px !important;
}
html:root .rb-edit-actions-dropdown .dxbl-btn.rb-toolbar-item > div { gap: 10px; }
html:root .rb-edit-actions-dropdown .dxbl-btn.rb-toolbar-item .material-symbols-rounded { margin: 0 !important; }
html:root .rb-edit-actions-dropdown .dxbl-btn.rb-toolbar-item:not(:disabled, .dxbl-disabled):hover { color: rgb(var(--rb-basecolor-900, 17 24 39)) !important; }
.rb-edit-actions-dropdown .material-symbols-rounded { font-size: 16px; color: rgb(var(--rb-basecolor-500, 107 114 128)); }

/* ===== Animovany fullscreen detailu v master-detail: prechod jen po dobu animace (RbGridDetail.SetFullscreenAnimatedAsync) =====
   DX pri Collapsed meni flex panelu (.dxbl-splitter>.dxbl-splitter-pane "flex: 1 0 0%" -> .dxbl-splitter-pane-collapsed
   "flex: 0 1 0; visibility: hidden"), panel se Size ma inline "flex: 0 0 <size>" - animuje se tedy cely shorthand flex.
   Sbalovany panel skryje obsah (visibility) az po dobehu prechodu; pri rozbalovani je videt hned. */
.rb-detail-animating .dxbl-splitter-pane { transition: flex 250ms ease, visibility 0s linear 0s; }
.rb-detail-animating .dxbl-splitter-pane.dxbl-splitter-pane-collapsed { transition: flex 250ms ease, visibility 0s linear 250ms; }
@media (prefers-reduced-motion: reduce) {
    .rb-detail-animating .dxbl-splitter-pane,
    .rb-detail-animating .dxbl-splitter-pane.dxbl-splitter-pane-collapsed { transition: none; }
}

/* ===== Nahrani souboru: dropzone a radek souboru (spec sekce 11) ===== */
.rb-edit-dropzone { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 1.5px dashed rgb(var(--rb-basecolor-300, 209 213 219));
    border-radius: 12px; background: rgb(var(--rb-basecolor-50, 249 250 251)); color: rgb(var(--rb-basecolor-700, 55 65 81)); }
.rb-edit-drop { width: 100%; border-radius: 12px; }
.rb-edit-drop-over .rb-edit-dropzone, .rb-edit-drop-over .rb-edit-file { border-color: rgb(var(--rb-primary-600, 79 70 229)); background: rgb(var(--rb-primary-50, 238 242 255)); }
.rb-edit-dropzone-readonly { color: rgb(var(--rb-basecolor-500, 107 114 128)); cursor: default; }
.rb-edit-dropzone-icon { font-size: 24px; color: rgb(var(--rb-primary-700, 67 56 202)); }
.rb-edit-dropzone-readonly .rb-edit-dropzone-icon { color: rgb(var(--rb-basecolor-400, 156 163 175)); }
.rb-edit-dropzone-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: rgb(var(--rb-primary-700, 67 56 202)); text-decoration: underline; cursor: pointer; }
.rb-edit-dropzone-hint { margin-top: 2px; font-size: 12px; color: rgb(var(--rb-basecolor-500, 107 114 128)); }
.rb-edit-file { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid rgb(var(--rb-basecolor-200, 229 231 235)); border-radius: 10px; background: #fff; }
.rb-edit-file-icon { color: rgb(var(--rb-basecolor-500, 107 114 128)); }
.rb-edit-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rb-edit-file-size { flex: none; font-size: 13px; color: rgb(var(--rb-basecolor-500, 107 114 128)); white-space: nowrap; }
.rb-edit-file-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: rgb(var(--rb-basecolor-500, 107 114 128)); cursor: pointer; }
.rb-edit-file-btn:hover { background: rgb(var(--rb-basecolor-100, 243 244 246)); }
/* Zona s fokusem je cil vlozeni ze schranky (Ctrl+V, RbFilePasteZone) - zvyrazneny okraj; klavesnice navic obrys. */
.rb-edit-drop:focus { outline: none; }
.rb-edit-drop:focus .rb-edit-dropzone, .rb-edit-drop:focus .rb-edit-file { border-color: rgb(var(--rb-primary-400, 129 140 248)); }
.rb-edit-drop:focus-visible { outline: 2px solid rgb(var(--rb-primary-600, 79 70 229)); outline-offset: 2px; }
/* Vic souboru (RbFileUploadList): dropzone a pod ni radky souboru. */
.rb-edit-files { display: flex; flex-direction: column; gap: 8px; width: 100%; }