/* DevExpress 25.2 renders elevation on the dropdown dialog, not its body. */
.dxbl-dropdown,
.dxbl-itemlist-dropdown,
.dxbl-dropdown > .dxbl-dropdown-dialog,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
    --dxbl-dropdown-box-shadow: var(--shadow-8);
    --dxbl-edit-dropdown-box-shadow: var(--shadow-8);
}

.dxbl-dropdown > .dxbl-dropdown-dialog,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
    box-shadow: var(--shadow-8) !important;
    border-radius: var(--radius-default, 2px) !important;
    border: 0 !important;
    background-color: var(--surface-primary) !important;
}

.dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body {
    box-shadow: none !important;
    border-radius: inherit;
    background-color: var(--surface-primary) !important;
}

.dxbl-popup-cell:has(.dxbl-dropdown) {
    z-index: 3000 !important;
}

.dxbl-dropdown-body .dxbl-listbox-item,
.dxbl-dropdown-body .dxbl-list-box-item,
.dxbl-dropdown-body .dxbl-list-editor-item {
    color: var(--text-primary) !important;
}

.dxbl-dropdown-body .dxbl-listbox-item *,
.dxbl-dropdown-body .dxbl-list-box-item *,
.dxbl-dropdown-body .dxbl-list-editor-item * {
    color: inherit !important;
}

/*
    DxSearchBox inside a dropdown popover (e.g. DepartmentsInput/
    PositionsInput's search field, CssClass="cw-320") renders in its own DOM
    subtree outside .tts-select-field's ".dxbl-text-edit" scope (see app.css
    — that block explicitly leaves popover content untouched), so it never
    picked up the brand-colored focus ring and kept DevExpress's stock
    purple focus border/shadow instead. Same variable overrides as
    tts-select-field's focus state, just rescoped to the popover body.
*/
.dxbl-dropdown-body .dxbl-text-edit {
    --dxbl-text-edit-focus-border-color: var(--brand-primary);
    --dxbl-text-edit-focus-shadow-color: transparent;
    --dxbl-text-edit-focus-shadow-spread: 0px;
    --dxbl-text-edit-focus-shadow-blur: 0px;
}

.dxbl-dropdown-body .dxbl-listbox-item:hover,
.dxbl-dropdown-body .dxbl-list-box-item:hover,
.dxbl-dropdown-body .dxbl-list-editor-item:hover {
    background-color: var(--surface-hover) !important;
    color: var(--text-primary) !important;
}

/*
    A checked list item (checkbox ticked) doesn't get its own highlighted
    row background/text color in our style guide — the tts-checkbox's blue
    fill is the only "checked" indicator. Only strip DevExpress's own
    selected-row decoration (image/shadow), not recolor the row.

    BUT: DevExpress's default theme sets --dxbl-list-box-item-selected-color
    to #fff (white), meant to sit on a colored --dxbl-list-box-item-selected-bg
    that DevExpress would normally supply — since we intentionally don't
    give selected rows a background, that left the row's own text white on
    white, i.e. invisible. This bites single-select dropdowns hardest (e.g.
    SelectListGeneric's DefaultItemText placeholder, which starts out as the
    "selected" row with no checkbox to fall back on for a visible affordance).
    Force the text back to normal reading color while still leaving the
    background alone.
*/
.dxbl-dropdown-body .dxbl-list-box-item-selected,
.dxbl-dropdown-body .dxbl-listbox-item-selected,
.dxbl-dropdown-body .dxbl-list-editor-item-selected,
.dxbl-dropdown-body [aria-selected="true"] {
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

.dxbl-dropdown-body .dxbl-list-box-item-selected::before,
.dxbl-dropdown-body .dxbl-list-box-item-selected::after,
.dxbl-dropdown-body .dxbl-listbox-item-selected::before,
.dxbl-dropdown-body .dxbl-listbox-item-selected::after,
.dxbl-dropdown-body .dxbl-list-editor-item-selected::before,
.dxbl-dropdown-body .dxbl-list-editor-item-selected::after {
    background: transparent !important;
}