/* =========================================================================
   KAWKOVÁ – mapování design tokenů na Bootstrap 5 a DevExpress Blazor
   Načítat VŽDY jako poslední stylesheet (po DX tématu i po bexmain.css).
   Nepoužívejte zde konkrétní hex hodnoty – pouze var(--bx-*).
   ========================================================================= */

/* =========================================================================
   1) Bootstrap 5 tokeny
   ========================================================================= */

:root {
    --bs-primary: var(--bx-accent);
    --bs-primary-rgb: 212, 159, 0;
    --bs-body-bg: var(--bx-bg-app);
    --bs-body-color: var(--bx-text);
    --bs-secondary-color: var(--bx-text-muted);
    --bs-border-color: var(--bx-border);
    --bs-border-radius: var(--bx-radius-sm);
    --bs-border-radius-lg: var(--bx-radius);
    --bs-font-sans-serif: var(--bx-font-body);
    --bs-emphasis-color: var(--bx-text);
    --bs-link-color: var(--bx-accent);
    --bs-link-hover-color: var(--bx-accent-hover);
    --bs-success: var(--bx-success);
    --bs-warning: var(--bx-warning);
    --bs-danger: var(--bx-danger);
    --bs-info: var(--bx-info);
}

/* Aplikacni plocha - DX GridLayout ma vlastni bile pozadi, ktere prekryva
   --bx-bg-app. Vynutime dedicnost pres cely shell. */
html,
body,
.page,
.page-layout,
.page-layout > .dxbl-gridlayout,
.page-layout > .dx-gridlayout-root,
.dxbl-gridlayout-item {
    background-color: var(--bx-bg-app);
}

.text-primary {
    color: var(--bx-accent) !important;
}

.bg-primary {
    background-color: var(--bx-accent) !important;
    color: var(--bx-text-on-accent) !important;
}

.border-primary {
    border-color: var(--bx-accent) !important;
}

.card {
    background-color: var(--bx-bg-surface);
    border: 1px solid var(--bx-border);
    border-radius: var(--bx-radius);
    box-shadow: var(--bx-shadow-sm);
    color: var(--bx-text);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bx-accent);
    color: var(--bx-text-on-accent);
}

.accordion-item {
    background-color: var(--bx-bg-surface);
    border: 1px solid var(--bx-border);
    color: var(--bx-text);
}

/* =========================================================================
   2) DevExpress – globální proměnné
   ========================================================================= */

:root {
    --dxbl-font-family: var(--bx-font-body);
    --dxbl-body-bg: var(--bx-bg-app);
    --dxbl-body-color: var(--bx-text);
    --dxbl-border-color: var(--bx-border);
    --dxbl-border-radius: var(--bx-radius-sm);
    --dxbl-primary: var(--bx-accent);
    --dxbl-focus-shadow-color: var(--bx-accent-focus);
}

/* --- Tlačítka: primary --------------------------------------------------- */
.dxbl-btn-primary,
.dxbl-btn-standalone.dxbl-btn-primary {
    --dxbl-btn-bg: var(--bx-accent);
    --dxbl-btn-color: var(--bx-text-on-accent);
    --dxbl-btn-border-color: var(--bx-accent);
    --dxbl-btn-hover-bg: var(--bx-accent-hover);
    --dxbl-btn-hover-color: var(--bx-text-on-accent);
    --dxbl-btn-hover-border-color: var(--bx-accent-hover);
    --dxbl-btn-active-bg: var(--bx-accent-active);
    --dxbl-btn-active-color: var(--bx-text-on-accent);
    --dxbl-btn-active-border-color: var(--bx-accent-active);
    --dxbl-btn-disabled-bg: var(--bx-border-strong);
    --dxbl-btn-disabled-color: var(--bx-text-disabled);
    --dxbl-btn-disabled-border-color: var(--bx-border-strong);
    --dxbl-btn-disabled-opacity: 1;
    --dxbl-btn-focus-bg: var(--bx-accent-hover);
    --dxbl-btn-focus-border-bg: var(--bx-accent-hover);
    --dxbl-btn-focus-outline-color: var(--bx-accent-focus);
    --dxbl-btn-focus-shadow-color: var(--bx-accent-focus);
    --dxbl-btn-focus-shadow-spread: 0.125rem;
    --dxbl-btn-focus-shadow-blur: 0rem;
    --dxbl-btn-box-shadow: var(--bx-shadow-sm);
    --dxbl-btn-border-radius: var(--bx-radius-sm);
}

/* --- Tlačítka: secondary ------------------------------------------------- */
.dxbl-btn-secondary,
.dxbl-btn-standalone.dxbl-btn-secondary {
    --dxbl-btn-bg: var(--bx-bg-surface);
    --dxbl-btn-color: var(--bx-text);
    --dxbl-btn-border-color: var(--bx-border-strong);
    --dxbl-btn-hover-bg: var(--bx-bg-hover);
    --dxbl-btn-hover-color: var(--bx-text);
    --dxbl-btn-hover-border-color: var(--bx-accent);
    --dxbl-btn-active-bg: var(--bx-bg-selected);
    --dxbl-btn-active-color: var(--bx-text);
    --dxbl-btn-active-border-color: var(--bx-accent);
    --dxbl-btn-disabled-bg: var(--bx-bg-surface-alt);
    --dxbl-btn-disabled-color: var(--bx-text-disabled);
    --dxbl-btn-disabled-border-color: var(--bx-border);
    --dxbl-btn-disabled-opacity: 1;
    --dxbl-btn-focus-shadow-color: var(--bx-accent-focus);
    --dxbl-btn-border-radius: var(--bx-radius-sm);
}

.dxbl-btn {
    --dxbl-btn-focus-shadow-color: var(--bx-accent-focus);
}

.dxbl-btn.dxbl-disabled {
    --dxbl-btn-disabled-color: var(--bx-text-disabled);
    --dxbl-btn-disabled-opacity: 0.6;
}

/* --- Textové editory ----------------------------------------------------- */
.dxbl-text-edit,
.dxbl-edit {
    --dxbl-text-edit-bg: var(--bx-bg-surface);
    --dxbl-text-edit-color: var(--bx-text);
    --dxbl-text-edit-border-color: var(--bx-border);
    --dxbl-text-edit-hover-border-color: var(--bx-border-strong);
    --dxbl-text-edit-focus-border-color: var(--bx-accent);
    --dxbl-text-edit-focus-shadow-color: var(--bx-accent-focus);
    --dxbl-text-edit-placeholder-color: var(--bx-text-muted);
    --dxbl-text-edit-disabled-bg: var(--bx-bg-surface-alt);
    --dxbl-text-edit-disabled-color: var(--bx-text-disabled);
    --dxbl-text-edit-border-radius: var(--bx-radius-sm);
}

/* Rozbalovaci sipka / spin tlacitka uvnitr editoru jsou samostatne .dxbl-btn
   (tridy .dxbl-edit-btn-dropdown, .dxbl-spin-btn-*) a jsou primymi potomky
   editoru. Musi splynout s editorem a drzet citelnou barvu ikony. */
.dxbl-text-edit > .dxbl-edit-btn-dropdown,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-edit-btn-dropdown,
.dxbl-text-edit > .dxbl-spin-btn-inc,
.dxbl-text-edit > .dxbl-spin-btn-dec,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-spin-btn-inc,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-spin-btn-dec,
.dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-spin-btn-inc,
.dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-spin-btn-dec,
.dxbl-text-edit > .dxbl-edit-btn-clear,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-edit-btn-clear {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-color: var(--bx-text-muted);
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-bg: var(--bx-bg-hover);
    --dxbl-btn-hover-color: var(--bx-text);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--bx-bg-selected);
    --dxbl-btn-active-color: var(--bx-text);
    --dxbl-btn-active-border-color: transparent;
    --dxbl-btn-disabled-bg: transparent;
    --dxbl-btn-disabled-color: var(--bx-text-disabled);
    --dxbl-btn-disabled-border-color: transparent;
    background-color: transparent;
    border-color: transparent;
    color: var(--bx-text-muted);
}

.dxbl-text-edit > .dxbl-edit-btn-dropdown:hover,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-edit-btn-dropdown:hover {
    color: var(--bx-text);
}

/* Ikona uvnitr techto tlacitek se vykresluje pres svg/i a nededila by barvu. */
.dxbl-text-edit > .dxbl-edit-btn-dropdown .dxbl-image,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-edit-btn-dropdown .dxbl-image,
.dxbl-text-edit > .dxbl-edit-btn-dropdown i,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-edit-btn-dropdown i,
.dxbl-text-edit > .dxbl-edit-btn-clear .dxbl-image,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-edit-btn-clear .dxbl-image {
    color: inherit;
    fill: currentColor;
}

.dxbl-text-edit > .dxbl-edit-btn-dropdown .dxbl-image > svg,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-edit-btn-dropdown .dxbl-image > svg {
    fill: currentColor;
    stroke: currentColor;
}

/* --- Checkbox / Radio / Switch ------------------------------------------- */
.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: var(--bx-accent);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--bx-accent-hover);
    --dxbl-checkbox-check-element-checked-border-color: var(--bx-accent);
    --dxbl-checkbox-switch-checked-bg: var(--bx-accent);
    --dxbl-checkbox-switch-checked-hover-bg: var(--bx-accent-hover);
    --dxbl-checkbox-switch-unchecked-bg: var(--bx-border-strong);
    --dxbl-checkbox-switch-unchecked-hover-bg: var(--bx-text-muted);
    --dxbl-checkbox-radio-button-check-bg: var(--bx-accent);
    --dxbl-checkbox-radio-button-checked-border-color: var(--bx-accent);
    --dxbl-checkbox-radio-button-checked-hover-bg: var(--bx-accent-hover);
    --dxbl-checkbox-radio-button-checked-hover-border-color: var(--bx-accent-hover);
    --dxbl-checkbox-checked-focus-shadow-color: var(--bx-accent-focus);
    --dxbl-checkbox-unchecked-focus-shadow-color: var(--bx-accent-focus);
}

/* --- Grid ---------------------------------------------------------------- */
.dxbl-grid {
    --dxbl-grid-bg: var(--bx-bg-surface);
    --dxbl-grid-color: var(--bx-text);
    --dxbl-grid-border-color: var(--bx-border);
    --dxbl-grid-header-bg: var(--bx-bg-surface-alt);
    --dxbl-grid-header-color: var(--bx-text);
    --dxbl-grid-footer-bg: var(--bx-bg-surface-alt);
    --dxbl-grid-row-hover-bg: var(--bx-bg-hover);
    --dxbl-grid-selected-row-bg: var(--bx-bg-selected);
    --dxbl-grid-selected-row-color: var(--bx-text);
    --dxbl-grid-focused-row-bg: var(--bx-bg-selected);
    --dxbl-grid-alt-row-bg: var(--bx-bg-surface-alt);
    --dxbl-grid-group-row-bg: var(--bx-bg-surface-alt);
    --dxbl-grid-border-radius: var(--bx-radius);
}

.dxbl-grid .dxbl-grid-selected-row > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: var(--bx-bg-selected);
}

/* --- TreeView ------------------------------------------------------------ */
.dxbl-treeview {
    --dxbl-treeview-bg: transparent;
    --dxbl-treeview-color: var(--bx-text);
    --dxbl-treeview-item-hover-bg: var(--bx-bg-hover);
    --dxbl-treeview-item-selection-bg: var(--bx-accent);
    --dxbl-treeview-item-selection-color: var(--bx-sidebar-active-fg);
}

.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(0px - var(--dxbl-border-width-with-scaling, 0px));
    top: calc(0px - var(--dxbl-border-width-with-scaling, 0px));
    right: calc(0px - var(--dxbl-border-width-with-scaling, 0px));
    bottom: calc(0px - var(--dxbl-border-width-with-scaling, 0px));
    border-radius: inherit;
    background-color: var(--bx-accent);
    opacity: 1;
}

/* Text vybrane polozky musi byt citelny na plne zlate plose.
   Globalni pravidlo (mimo scoped CSS), aby platilo i uvnitr DX komponenty. */
.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active .dxbl-treeview-item-text,
.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active .dxbl-image,
.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active i {
    color: var(--bx-sidebar-active-fg) !important;
    font-weight: 600;
}

/* --- Tlacitko hledani vedle vyhledavaciho pole nad gridem ----------------
   Ma ladit s ostatnimi ikonami toolbaru, proto bez vlastniho pozadi. */
.dxbl-btn.bx-search-btn {
    background-color: transparent;
    border-color: transparent;
    color: var(--bx-text-muted);
    box-shadow: none;
}

.dxbl-btn.bx-search-btn:hover,
.dxbl-btn.bx-search-btn:focus {
    background-color: var(--bx-bg-hover);
    border-color: transparent;
    color: var(--bx-text);
}

.dxbl-btn.bx-search-btn:active {
    background-color: var(--bx-bg-selected);
    border-color: transparent;
    color: var(--bx-text);
}

/* --- Chart ---------------------------------------------------------------
   DxChart vykresluje SVG s vlastni paletou nezavislou na DX tematu.
   Barvy serii se nastavuji v komponente, zde resime citelnost popisku. */
.dxbl-chart {
    background-color: transparent;
}

.dxbl-chart text {
    fill: var(--bx-text-muted);
    font-family: var(--bx-font-body);
}

.dxbl-chart .dxc-title text,
.dxbl-chart .dxc-legend text {
    fill: var(--bx-text);
}

.dxbl-chart .dxc-grids path,
.dxbl-chart .dxc-grids line {
    stroke: var(--bx-border);
}

.dxbl-chart .dxc-axes path,
.dxbl-chart .dxc-axes line {
    stroke: var(--bx-border-strong);
}

/* --- Pager --------------------------------------------------------------- */
.dxbl-pager {
    --dxbl-pager-bg: transparent;
    --dxbl-pager-color: var(--bx-text);
    --dxbl-pager-active-page-btn-bg: var(--bx-accent);
    --dxbl-pager-active-page-btn-color: var(--bx-text-on-accent);
    --dxbl-pager-page-btn-hover-bg: var(--bx-bg-hover);
}

/* --- Tabs ---------------------------------------------------------------- */
.dxbl-tabs {
    --dxbl-tabs-bg: transparent;
    --dxbl-tabs-color: var(--bx-text-muted);
    --dxbl-tabs-tab-selected-color: var(--bx-text);
    --dxbl-tabs-tab-selected-bg: unset;
    --dxbl-tabs-tab-hover-color: var(--bx-text);
    --dxbl-tabs-tab-hover-bg: var(--bx-bg-hover);
    --dxbl-tabs-tab-border-color: transparent;
    --dxbl-tabs-separator-border-color: var(--bx-border);
    --dxbl-tabs-content-color: var(--bx-text);
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after {
    background-color: var(--bx-accent);
}

/* Panel zalozek na editacnich formularich (drive inline background-color) */
.dxbl-tabs.bx-tabs-surface {
    --dxbl-tabs-bg: var(--bx-bg-surface-alt);
    background-color: var(--bx-bg-surface-alt);
    border-radius: var(--bx-radius);
}

/* --- Menu / Toolbar ------------------------------------------------------ */
.dxbl-menu {
    --dxbl-menu-bg: transparent;
    --dxbl-menu-color: var(--bx-text);
    --dxbl-menu-item-hover-bg: var(--bx-bg-hover);
    --dxbl-menu-item-selected-bg: var(--bx-accent-soft);
}

.dxbl-toolbar {
    --dxbl-toolbar-bg: transparent;
    --dxbl-toolbar-color: var(--bx-text);
    --dxbl-toolbar-border-color: transparent;
    border-color: transparent;
}

/* Polozky toolbaru se renderuji jako .dxbl-btn a dedily by barvu z DX tematu,
   ktere je svetle. Barvu proto odvozujeme od nasich tokenu. */
.dxbl-toolbar .dxbl-btn {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-color: var(--bx-text);
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-bg: var(--bx-bg-hover);
    --dxbl-btn-hover-color: var(--bx-text);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--bx-bg-selected);
    --dxbl-btn-active-color: var(--bx-text);
    --dxbl-btn-disabled-color: var(--bx-text-disabled);
    color: var(--bx-text);
}

.dxbl-toolbar .dxbl-btn .dxbl-image,
.dxbl-toolbar .dxbl-btn i {
    color: inherit;
}

.dxbl-toolbar .dxbl-btn.dxbl-disabled,
.dxbl-toolbar .dxbl-btn:disabled {
    color: var(--bx-text-disabled);
}

/* --- Dropdown / Popup / ListBox ----------------------------------------- */
.dxbl-dropdown,
.dxbl-popup,
.dxbl-listbox {
    --dxbl-dropdown-bg: var(--bx-bg-surface);
    --dxbl-dropdown-color: var(--bx-text);
    --dxbl-dropdown-border-color: var(--bx-border);
    --dxbl-popup-bg: var(--bx-bg-surface);
    --dxbl-popup-color: var(--bx-text);
    --dxbl-popup-border-color: var(--bx-border);
    --dxbl-popup-border-radius: var(--bx-radius);
    --dxbl-listbox-bg: var(--bx-bg-surface);
    --dxbl-listbox-color: var(--bx-text);
    --dxbl-listbox-item-hover-bg: var(--bx-bg-hover);
    --dxbl-listbox-item-selected-bg: var(--bx-bg-selected);
    --dxbl-listbox-item-selected-color: var(--bx-text);
}

/* --- Column chooser: vzdy vycentrovany pres stred okna ------------------- */
.dxbl-columnchooser.dxbl-popup,
.dxbl-popup.dxbl-grid-column-chooser {
    inset: 0 !important;
    margin: auto !important;
    max-height: min(70vh, 640px);
    transform: none !important;
}

    .dxbl-columnchooser.dxbl-popup > .dxbl-popup-body,
    .dxbl-popup.dxbl-grid-column-chooser > .dxbl-popup-body {
        overflow-y: auto;
    }

/* --- Karty / Panely DX --------------------------------------------------- */
.dxbl-card {
    background-color: var(--bx-bg-surface);
    border: 1px solid var(--bx-border);
    border-radius: var(--bx-radius);
    box-shadow: var(--bx-shadow-sm);
    color: var(--bx-text);
}

/* --- Kalendář / DateEdit ------------------------------------------------- */
.dxbl-calendar {
    --dxbl-calendar-bg: var(--bx-bg-surface);
    --dxbl-calendar-color: var(--bx-text);
    --dxbl-calendar-selected-day-bg: var(--bx-accent);
    --dxbl-calendar-selected-day-color: var(--bx-text-on-accent);
    --dxbl-calendar-day-hover-bg: var(--bx-bg-hover);
    --dxbl-calendar-today-border-color: var(--bx-accent);
}

/* --- Loading / Progress -------------------------------------------------- */
.dxbl-progress-bar {
    --dxbl-progress-bar-indicator-bg: var(--bx-accent);
}

.dxbl-loading-panel {
    --dxbl-loading-panel-bg: var(--bx-bg-surface);
    --dxbl-loading-panel-color: var(--bx-text);
}