/* --- In-page dropdown lists for single selects ---
   Draws the option list inside the page instead of in the browser's popup window,
   which some setups render blank and misplaced. Styled to look like the browser's own list.
   Mouse/trackpad only; unsupported browsers keep the native list. */

@supports (appearance: base-select) {
    @media (pointer: fine) {

        /* !important: several stacks set appearance: none on every select (style-guide.css, members/main.css) */
        select:not([multiple]):not(.SelectClass),
        select:not([multiple]):not(.SelectClass)::picker(select) {
            appearance: base-select !important;
        }

        /* text-indent: native fields sit their text ~3px further in; the list rows inherit it so they stay aligned */
        :where(select:not([multiple]):not(.SelectClass)) {
            position: relative;
            font-family: inherit;
            align-items: center;
            align-content: center;
            text-indent: 3px;
        }

        /* --- Closed arrow: the browser's chevron, pinned right (page styles often make selects display: block) --- */
        :where(select:not([multiple]):not(.SelectClass))::picker-icon {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            position: absolute;
            top: 50%;
            right: 3px;
            translate: 0 -50%;
            line-height: 0;
        }

        /* --- Selects that draw their own arrow (background image) and were already appearance: none ---
           No second arrow, no native text gap, and not position: relative, which would paint over icons laid beside them */
        :where(
            select.form-select,
            .users-list-side select.form-control,
            .email-log-filter select.form-control,
            .email-compose select,
            #userForm .fieldRow select,
            .complaint-lhs .fieldRow select,
            .operator-page .fieldRow select,
            .case-list-side .fieldRow select,
            .members-list .filter-field select.light-filter
        ) {
            position: static;
            text-indent: 0;
        }

        :where(
            select.form-select,
            .users-list-side select.form-control,
            .email-log-filter select.form-control,
            .email-compose select,
            #userForm .fieldRow select,
            .complaint-lhs .fieldRow select,
            .operator-page .fieldRow select,
            .case-list-side .fieldRow select,
            .members-list .filter-field select.light-filter
        )::picker-icon {
            display: none;
        }

        /* --- The open list: below the field, its width, the field's background, a thin grey border --- */
        :where(select:not([multiple]):not(.SelectClass))::picker(select) {
            position-try-order: normal;
            margin: 5px 0 0;
            padding: 0;
            background-color: inherit;
            color: inherit;
            border: 1px solid #767676;
            border-radius: 0;
            box-shadow: none;
        }

        :where(select:not([multiple]):not(.SelectClass)) option {
            padding-block: 3px;
            padding-inline: 0.75rem;
            font-size: inherit;
            outline: none;
        }

        :where(select:not([multiple]):not(.SelectClass)) option::checkmark {
            display: none;
        }

        /* One highlighted row, dark grey with white text: the focused one, or the one under the mouse */
        :where(select:not([multiple]):not(.SelectClass)) option:focus,
        :where(select:not([multiple]):not(.SelectClass)) option:hover {
            background-color: #767676;
            color: #fff !important;
        }

        :where(select:not([multiple]):not(.SelectClass)):has(option:hover) option:focus:not(:hover) {
            background-color: transparent;
            color: inherit !important;
        }

        :where(select:not([multiple]):not(.SelectClass)) option:disabled {
            color: #b3b9c1;
        }
    }
}