/*
 * SLS grouped select — styled native <select> with colored <optgroup> cards.
 * Usage: <select class="sls-gselect"> ... <optgroup label="…"> <option>…</option> </optgroup> … </select>
 * Chrome/Edge 135+ get the full look via `appearance: base-select`; other browsers keep the
 * native popup with a light group tint. No JS required; options can be rebuilt dynamically.
 * Accent order cycles every 6 groups: indigo, teal, amber, pink, violet, sky.
 * Force a color on one group with data-tone="indigo|teal|amber|pink|violet|sky|slate".
 */

:where(.sls-gselect) {
    width: 100%;
    min-height: 38px;
    padding: .5rem .75rem;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    color: #334155;
    font-size: .875rem;
    font-weight: 600;
}

.sls-gselect optgroup { font-weight: 800; color: #4338ca; background: #eef2ff; }
.sls-gselect optgroup option { font-weight: 500; color: #334155; background: #fff; }

@supports (appearance: base-select) {
    /* Beat page rules like `.ja-field select { appearance: auto }` */
    select.sls-gselect,
    select.sls-gselect::picker(select) { appearance: base-select; }
    .sls-gselect, .sls-gselect::picker(select) { appearance: base-select; }

    .sls-gselect {
        display: flex; align-items: center; justify-content: space-between; gap: .5rem;
        cursor: pointer; transition: border-color .15s, box-shadow .15s;
    }
    .sls-gselect:hover { border-color: #a5b4fc; }
    .sls-gselect:focus-visible, .sls-gselect:open { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); outline: none; }
    .sls-gselect:disabled { cursor: not-allowed; opacity: .6; }
    .sls-gselect::picker-icon { color: #64748b; transition: rotate .2s; }
    .sls-gselect:open::picker-icon { rotate: 180deg; }

    .sls-gselect::picker(select) {
        margin-top: 6px; padding: .45rem; max-height: min(70vh, 540px);
        border: 1px solid #e2e8f0; border-radius: .85rem; background: #f8fafc;
        box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 10px -4px rgba(15, 23, 42, .08);
    }

    .sls-gselect option {
        display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; margin: 2px 0;
        border-radius: .5rem; font-size: 14px; font-weight: 600; color: #334155; background: transparent; cursor: pointer;
    }
    .sls-gselect option::checkmark { display: none; }
    .sls-gselect option:hover, .sls-gselect option:focus-visible { background: #eef2ff; color: #3730a3; outline: none; }
    .sls-gselect option:checked { background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff; }
    .sls-gselect option:disabled { color: #94a3b8; font-weight: 500; cursor: not-allowed; background: transparent; }
    .sls-gselect > option { background: #fff; border: 1px solid #e2e8f0; margin-bottom: .4rem; }

    .sls-gselect optgroup {
        --g: #4f46e5; --gb: #eef2ff; --gl: #c7d2fe;
        display: block; margin: .45rem 0; padding: .55rem .45rem .35rem;
        border-radius: .7rem; background: #fff; border: 1px solid var(--gl); border-inline-start: 4px solid var(--g);
        font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--g);
    }
    .sls-gselect optgroup:nth-of-type(6n+2) { --g: #0d9488; --gb: #f0fdfa; --gl: #99f6e4; }
    .sls-gselect optgroup:nth-of-type(6n+3) { --g: #d97706; --gb: #fffbeb; --gl: #fde68a; }
    .sls-gselect optgroup:nth-of-type(6n+4) { --g: #db2777; --gb: #fdf2f8; --gl: #fbcfe8; }
    .sls-gselect optgroup:nth-of-type(6n+5) { --g: #7c3aed; --gb: #f5f3ff; --gl: #ddd6fe; }
    .sls-gselect optgroup:nth-of-type(6n+6) { --g: #0284c7; --gb: #f0f9ff; --gl: #bae6fd; }

    .sls-gselect optgroup[data-tone="indigo"] { --g: #4f46e5; --gb: #eef2ff; --gl: #c7d2fe; }
    .sls-gselect optgroup[data-tone="teal"]   { --g: #0d9488; --gb: #f0fdfa; --gl: #99f6e4; }
    .sls-gselect optgroup[data-tone="amber"]  { --g: #d97706; --gb: #fffbeb; --gl: #fde68a; }
    .sls-gselect optgroup[data-tone="pink"]   { --g: #db2777; --gb: #fdf2f8; --gl: #fbcfe8; }
    .sls-gselect optgroup[data-tone="violet"] { --g: #7c3aed; --gb: #f5f3ff; --gl: #ddd6fe; }
    .sls-gselect optgroup[data-tone="sky"]    { --g: #0284c7; --gb: #f0f9ff; --gl: #bae6fd; }
    .sls-gselect optgroup[data-tone="slate"]  { --g: #475569; --gb: #f1f5f9; --gl: #cbd5e1; }

    .sls-gselect optgroup option { margin-top: 3px; text-transform: none; letter-spacing: 0; background: transparent; }
    .sls-gselect optgroup option:hover, .sls-gselect optgroup option:focus-visible { background: var(--gb); color: var(--g); }
    .sls-gselect optgroup option:checked { background: var(--g); color: #fff; }
    .sls-gselect optgroup option:disabled { color: #94a3b8; background: transparent; }
}