/* =============================================================================
   One look for every <select> in the app, including the ones dynamic forms
   create after load. Native element semantics are kept throughout.

   This stylesheet owns the caret. Bootstrap's .form-select supplies its own
   background-image plus padding-right: 2.25rem to clear it; because the base
   rule below outranks .form-select it must therefore carry both itself, or the
   caret ends up painted on top of the selected text.

   Multi-selects and list boxes get no caret and no reserved space, mirroring
   Bootstrap's own handling.
   ============================================================================= */

select:not([hidden]):not(.select2-hidden-accessible) {
    font-family: inherit;
    font-size: var(--fs-md, 14px);
    color: var(--color-text, #1e293b);
    background-color: var(--surface, #fff);
    border: 1px solid var(--border-color, #dbe2ea);
    border-radius: var(--radius-sm, 10px);
    max-width: 100%;

    /* The native arrow is replaced by the caret below. Without this, a browser
       that has not got customisable select draws its own arrow as well and the
       two sit on top of each other. */
    -webkit-appearance: none;
    appearance: none;

    /* Caret, and the inline-end room it needs. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: right .75rem center;

    /* Padding alone gives the control its height, which lands at about
       var(--control-height). Deliberately NOT min-height: min-height beats an
       author's `height` whatever the specificity or order, so a min-height here
       silently overrode every sized select in the app - the table length menus
       in css/app-table.css ask for height: 32px and were being rendered at 38. */
    padding: .5rem 2rem .5rem .75rem;
}

[dir="rtl"] select:not([hidden]):not(.select2-hidden-accessible) {
    background-position: left .75rem center;
    padding: .5rem .75rem .5rem 2rem;
}

/* A list box has no caret, so it needs no room for one. */
select[multiple]:not([hidden]),
select[size]:not([size="1"]):not([hidden]) {
    background-image: none;
    padding: .5rem .75rem;
}

select:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Account/Register draws its own arrow beside each select. The caret above
   replaces it, so hide it or the page shows two. This applies everywhere, not
   just where customisable select exists. */
.signup-select-arrow {
    display: none;
}

/* -----------------------------------------------------------------------------
   Customisable select (Chromium today). Progressive enhancement only: the
   rules above are the baseline every browser gets, and these restyle the
   popup where the engine allows it - so dropdowns, in pages and in dialogs,
   open the site's own list instead of the browser's default one.

   Every single-choice select takes part. Add .native-select to keep one on the
   browser picker. :where() keeps all of this at zero specificity, so a page
   that sizes or positions its own selects still wins.

   Earlier this was opt-in (.app-select) because legacy rules that force
   display (the DataTables length menus use inline-block !important) laid the
   selected text out wrongly. That came from the built-in picker icon and the
   flex layout set here. The icon is now hidden (this sheet draws the caret),
   the author's display is left alone, and align-content centres the text in
   block and inline-block selects alike. overflow: clip, not hidden: hidden
   would move an inline-block's baseline to its bottom edge and drop labels
   such as "Display _ lines" out of line.
   -------------------------------------------------------------------------- */
@supports (appearance: base-select) {
    /* The switch itself needs real specificity: the baseline rule above sets
       appearance: none, as do page styles such as Bootstrap's .form-select. */
    select:not([multiple]):not([size]):not([hidden]):not(.select2-hidden-accessible):not(.native-select),
    select:not([multiple]):not([size]):not([hidden]):not(.select2-hidden-accessible):not(.native-select)::picker(select) {
        appearance: base-select;
    }

    :where(select:not([multiple]):not([size]):not([hidden]):not(.select2-hidden-accessible):not(.native-select)) {
        align-content: center;
        white-space: nowrap;
        overflow: clip;
        text-overflow: ellipsis;
        min-width: 0;
    }

    :where(select:not(.native-select))::picker-icon {
        display: none;
    }

    :where(select:not(.native-select))::picker(select) {
        background: var(--surface, #fff);
        color: var(--color-text, #1e293b);
        border: 1px solid var(--border-color, #dbe2ea);
        border-radius: var(--radius-md, 12px);
        box-shadow: var(--shadow-md, 0 12px 32px rgba(15, 23, 42, .16));
        padding: 6px;
        margin-block: 5px;
        max-height: min(320px, 50dvh);
        overflow: auto;
        min-width: anchor-size(width);
        font-size: var(--fs-md, 14px);
    }

    :where(select:not(.native-select)) option {
        padding: .55rem .75rem;
        border-radius: 7px;
        white-space: normal;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    :where(select:not(.native-select)) option:hover,
    :where(select:not(.native-select)) option:focus-visible {
        background: var(--surface-muted, #f1f5f9);
        outline: none;
    }

    :where(select:not(.native-select)) option:checked {
        background: var(--theme-primary-subtle, #eff6ff);
        color: var(--color-primary-hover, #1d4ed8);
        font-weight: var(--fw-semibold, 600);
    }

    :where(select:not(.native-select)) option:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    :where(select:not(.native-select)) option::checkmark {
        color: var(--theme-primary-text, var(--color-primary, #2563eb));
    }

    :where(select:not(.native-select)) optgroup {
        font-weight: var(--fw-semibold, 600);
        color: var(--color-text-muted, #64748b);
    }
}

select[multiple] option,
select[size] option {
    padding: .5rem .75rem;
    border-radius: 6px;
}