/* ============================================================
   NATIVE SELECT THEME — native-select-theme.css
   ============================================================
   Gives a plain <select> the same skin select2-theme.css gives a
   select2 single: same pill shell, same height, same custom
   chevron, same gold focus ring, same disabled state.

   Opt in per element:  <select class="native-select"> … </select>

   Sizing comes from variables.css's --field-*

   ── One honest limitation ──────────────────────────────────
   The *open* list of a native select is drawn by the OS, not by
   the page, so it cannot be made to look like select2's panel in
   every browser. The @supports block at the bottom skins it in
   browsers that ship the new `appearance: base-select` (Chrome
   135+); everywhere else the closed field matches and the popup
   is the OS one. If a page needs the panel to match as well, run
   select2 on the element instead of using this class.
   ============================================================ */
:root {
    --nsel-placeholder:   #71717a;
    --nsel-selected-bg:   #FAF7EF;
    --nsel-accent-text:   #7C6A3B;
}

/* ── the closed shell ────────────────────────────────────── */
select.native-select {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: var(--field-h);
    min-height: var(--field-h);
    /* the right pad clears the chevron, exactly as select2 does */
    padding: 0 42px 0 12px;
    background-color: var(--color-surface-white);
    border: none !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none;
    outline: none;

    font-family: var(--font-body);
    font-size: 14px;
    line-height: normal;
    color: var(--color-text-primary);

    /* single-line, ellipsised — a native select clips silently otherwise */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;
    transition: box-shadow var(--transition-fast);

    /* drop the OS arrow so the data-URI chevron below is the only one.
       The stroke colour is --color-text-secondary's real hex (#71717a)
       hardcoded — var() can't be used inside an SVG data URI. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='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 16px center;
    background-size: 13px 13px;
}

/* the empty first option reads as a placeholder, same as select2's */
select.native-select:has(option[value=""]:checked) {
    color: var(--nsel-placeholder);
}

select.native-select:focus,
select.native-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(149,128,73,0.12) !important;
}

/* `:open` is ignored by browsers that don't know it — keep it in its
   own rule so nothing else is lost when that happens. */
select.native-select:open {
    box-shadow: 0 0 0 3px rgba(149,128,73,0.12) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23958049' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

select.native-select:disabled {
    background-color: var(--color-surface-inset);
    color: var(--nsel-placeholder);
    cursor: not-allowed;
}

/* ── the open list, where the browser lets us ─────────────
   Chrome 135+ hands the popup over once the select opts into the
   new base appearance. Everything here is inert elsewhere. */
@supports (appearance: base-select) {
    select.native-select,
    select.native-select::picker(select) {
        appearance: base-select;
    }

    /* base-select re-adds a built-in arrow — the data-URI one stays */
    select.native-select::picker-icon { display: none; }

    select.native-select::picker(select) {
        margin-top: 8px;
        margin-bottom: 8px;
        padding: 6px;
        background: var(--color-surface-white);
        border: none;
        border-radius: var(--field-radius);
        box-shadow: var(--shadow-pop);
        max-height: 232px;              /* 5 rows + a hint of the sixth */
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #d4d4d8 transparent;
    }

    select.native-select option {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 0 14px;
        border-radius: 10px;
        font-family: var(--font-body);
        font-size: 14px;
        line-height: 1.35;
        color: var(--color-text-primary);
        background: transparent;
        cursor: pointer;
    }
    select.native-select option::checkmark { display: none; }   /* ours is drawn below */

    select.native-select option:hover,
    select.native-select option:focus {
        background-color: var(--color-surface-inset);
        color: var(--color-text-primary);
    }

    select.native-select option:checked {
        background-color: var(--nsel-selected-bg);
        color: var(--nsel-accent-text);
        font-weight: 600;
    }
    select.native-select option:checked::after {
        content: "";
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
        margin-left: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23958049' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
    }

    select.native-select option:disabled {
        background-color: var(--color-surface-inset);
        color: var(--nsel-placeholder);
        cursor: not-allowed;
    }

    select.native-select::picker(select)::-webkit-scrollbar { width: 6px; }
    select.native-select::picker(select)::-webkit-scrollbar-track { background: transparent; }
    select.native-select::picker(select)::-webkit-scrollbar-thumb {
        background: #d4d4d8;
        border-radius: var(--radius-full);
    }
}