/* Native lists render outside the page on some platforms. Set both text and
   surface colors, and tell the browser which system popup palette to use.
   These rules intentionally target HTML selects, not DevExpress list popups. */
:root,
body,
[data-bs-theme="light"] {
    --fta-select-scheme: light;
    --fta-select-bg: var(--taskmanager-light-input, color-mix(in srgb, var(--fta-theme-primary, #018574) 3%, #fff));
    --fta-select-text: var(--taskmanager-light-text, color-mix(in srgb, var(--fta-theme-primary, #018574) 30%, #111820));
    --fta-select-selected-bg: var(--taskmanager-light-hover, color-mix(in srgb, var(--fta-theme-primary, #018574) 14%, #fff));
    --fta-select-disabled-text: color-mix(in srgb, var(--fta-select-text) 65%, var(--fta-select-bg));
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]),
html:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) body:not([data-bs-theme="light"]) {
    --fta-select-scheme: dark;
    --fta-select-bg: var(--taskmanager-dark-input, color-mix(in srgb, var(--fta-theme-primary, #018574) 10%, #111c25));
    --fta-select-text: var(--taskmanager-dark-text, color-mix(in srgb, var(--fta-theme-primary, #018574) 5%, #fff));
    --fta-select-selected-bg: var(--taskmanager-dark-selection, color-mix(in srgb, var(--fta-theme-primary, #018574) 46%, #111820));
    --fta-select-disabled-text: var(--taskmanager-dark-muted, #a9b7c4);
}

/* Keep component sizing and layout; provide a safe default for every select. */
body select {
    color-scheme: var(--fta-select-scheme);
    background-color: var(--fta-select-bg);
    color: var(--fta-select-text);
}

body select :is(option, optgroup) {
    color-scheme: var(--fta-select-scheme);
    background-color: var(--fta-select-bg);
    color: var(--fta-select-text);
}

body select option:checked {
    background-color: var(--fta-select-selected-bg);
    color: var(--fta-select-text);
}

body select:disabled,
body select:disabled :is(option, optgroup),
body select option:disabled,
body select optgroup:disabled,
body select optgroup:disabled option {
    background-color: var(--fta-select-bg);
    color: var(--fta-select-disabled-text);
}

/* Allow Windows High Contrast to own the native list and selection colors. */
@media (forced-colors: active) {
    body select,
    body select :is(option, optgroup) {
        background-color: Canvas;
        color: CanvasText;
        forced-color-adjust: auto;
    }

    body select option:checked {
        background-color: Highlight;
        color: HighlightText;
    }

    body select:disabled,
    body select:disabled :is(option, optgroup),
    body select option:disabled,
    body select optgroup:disabled,
    body select optgroup:disabled option {
        background-color: Canvas;
        color: GrayText;
    }
}