/* ============================================================
   selects.css — global styling for native <select> dropdowns.
   Replaces the browser chevron with a custom one positioned with
   consistent right spacing, so the arrow never hugs the border
   and the text never collides with it.
   Linked from: _LayoutHeadDependencies (Learn/Teacher),
                _LayoutAdmin, _Layout, _LayoutLanding.
   ============================================================ */

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b5a78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 16px 16px;

    /* Guaranteed breathing room between text and the chevron,
       regardless of the padding utilities used on each element. */
    padding-right: 2.5rem !important;
}

select:not([multiple])::-ms-expand {
    display: none;
}