/*
 * Select boxes, everywhere: one arrow, set in from the edge, with room for the text.
 *
 * The browser's own arrow sits hard against the right edge, and the template's .form-select pairs a
 * large right padding with an arrow placed 18px in, so neither looks padded. This draws the same chevron
 * on every single-choice <select> in all three layouts (staff, client portal, public pages): 14px in from
 * the edge, and 38px of padding so long text never runs under it. The selector is deliberately specific
 * so it wins over the template's .form-select and the pages' own field classes; multiple-choice and
 * list-box selects are left alone.
 */

select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%234a5c5f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

select:not([multiple]):not([size])::-ms-expand { display: none; }
select:not([multiple]):not([size]):disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%239aa7a8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }