/* ═══════════════════════════════════════════════════════════════════════
   oms-rd-select.css — themed <select> controls, every page.

   The owner: "all dropdowns better have themed styling rather than looking
   like normal no styling dropdowns."

   What this does to every native single-value <select>:
     • drops the OS chrome (appearance:none) and draws the redesign chevron
       (inline SVG — no external file, no third-party host);
     • leaves height, width, border, radius and font to the rules that
       already size selects per page — they were written to match the text
       inputs beside them, so a select keeps the size of its neighbours;
     • where nothing sizes it, gives it the redesign input look (9px radius,
       the line-2 border, white fill) at ZERO specificity, so any page rule
       still wins;
     • accent focus ring (same as .rd .input:focus), disabled state,
       a .sm variant (30px, matches .btn.sm), and a light chevron for any
       select that sits on the navy sidebar.
   The open option list stays native — it cannot be styled cross-browser.
   <select multiple> / size>1 list boxes keep their list rendering: they
   only get the border, radius and focus ring.

   !important is used ONLY on the chevron's background-* longhands and
   padding-right: inline style="background:…/padding:…" on a select (there
   are several in the admin portal) would otherwise wipe the chevron or
   run the text under it.

   Link LAST among a page's redesign stylesheets, ?v=N bumped on every edit.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --rd-sel-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2362678A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --rd-sel-chev-dis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4B8CC' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --rd-sel-chev-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CDD1F2' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* ── 1. Defaults, zero specificity — every existing page rule wins ─────── */
:where(select) {
    border: 1px solid var(--line-2, var(--of-line-strong, #D3D7E4));
    border-radius: var(--rd-radius-ctl, 9px);
    background-color: #fff;
    color: var(--ink, var(--of-ink, #1F2340));
    font-family: inherit;
    line-height: 1.3;
    max-width: 100%;
}
:where(select:not([multiple]):not([size]), select[size="1"]:not([multiple])) {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 11px;
}

/* ── 2. The control: OS chrome off, redesign chevron on ────────────────── */
select:not([multiple]):not([size]),
select[size="1"]:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--rd-sel-chev) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
    padding-right: 32px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
select::-ms-expand { display: none; }

/* ── 3. Focus — the accent ring every redesign input uses ──────────────── */
select:focus,
select:focus-visible {
    outline: none;
    border-color: var(--accent, var(--of-accent, #3D4EE8));
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(61, 78, 232, .16));
}

/* ── 4. Disabled ───────────────────────────────────────────────────────── */
select:disabled {
    cursor: not-allowed;
    color: var(--muted, var(--of-muted, #62678A));
    background-color: var(--sunk, var(--of-card-inset, #F7F8FB));
    border-color: var(--line, var(--of-line, #E4E7EF));
    opacity: 1;
}
select:not([multiple]):not([size]):disabled,
select[size="1"]:not([multiple]):disabled {
    background-image: var(--rd-sel-chev-dis) !important;
}

/* ── 5. Small variant — sits beside .btn.sm (30px) ─────────────────────── */
select.sm,
select.select-sm,
select.form-select-sm,
select.btn-sm {
    height: 30px;
    min-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 9px;
    font-size: 12.5px;
    border-radius: 8px;
}
select.sm:not([multiple]),
select.select-sm:not([multiple]),
select.form-select-sm:not([multiple]),
select.btn-sm:not([multiple]) {
    padding-right: 26px !important;
    background-position: right 8px center !important;
    background-size: 12px 12px !important;
}

/* ── 6. List boxes (multiple / size>1): keep the list, theme the frame ─── */
select[multiple],
select[size]:not([size="1"]) {
    padding: 4px;
    background-image: none;
    cursor: default;
}
select[multiple] option,
select[size]:not([size="1"]) option {
    padding: 5px 8px;
    border-radius: 6px;
}

/* ── 7. Navy surfaces (the portal sidebars) ────────────────────────────── */
.sidebar select,
.rd .side select {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: #FFFFFF;
}
.sidebar select:not([multiple]):not([size]),
.rd .side select:not([multiple]):not([size]) {
    background-image: var(--rd-sel-chev-light) !important;
}
.sidebar select:focus,
.rd .side select:focus {
    border-color: #8C97FF;
    box-shadow: 0 0 0 3px rgba(140, 151, 255, .28);
}
.sidebar select option,
.rd .side select option { color: #1F2340; background: #fff; }

/* ── 8. Tables: a select inside a dense data cell stays compact ────────── */
:where(td, th) > :where(select:not([multiple]):not([size])) {
    min-height: 30px;
}
:is(td, th) select:not([multiple]):not([size]) {
    padding-right: 24px !important;
    background-position: right 7px center !important;
    background-size: 12px 12px !important;
}

/* ── 9. Print: no chevrons on paper ────────────────────────────────────── */
@media print {
    select { background-image: none !important; padding-right: 4px !important; }
}

/* ── 10. Legacy toolbar filters had a black focus border (oms-design-system
   .table-toolbar .filter-select:focus, 0,3,0) — bring them onto the accent. */
.table-toolbar select.filter-select:focus {
    border-color: var(--accent, var(--of-accent, #3D4EE8));
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(61, 78, 232, .16));
}