/* ws-select — dashboard dropdowns.
 *
 * Native <select> renders its option list with the operating system's widget
 * (grey Windows list, translucent macOS sheet), which is the one piece of the
 * dashboard that never matched the product's own styling. ws-select.js keeps the
 * native <select> as the value holder — every existing `.value` read/write and
 * `change` listener keeps working — and only suppresses the OS popup, drawing the
 * list below with these rules.
 *
 * The closed control keeps whatever sizing its own page CSS gives it; the rules
 * here are element-level (lowest specificity) so any existing `.filter-select`
 * style still wins. Opt a select out entirely with `data-native-select`.
 */

/* `!important` here is load-bearing, not laziness: the filter selects on the
 * games / my-builds / showcase pages carry an inline
 * `style="...background:#fff;padding:0 12px"`, and inline styles beat any
 * stylesheet selector. Suppressing `appearance` without winning the arrow back
 * would leave a dropdown with no affordance at all, so the chevron and its
 * gutter are forced. */
select:not([multiple]):not([data-native-select]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235f6570' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 15px 15px !important;
    padding-right: 32px !important;
    cursor: pointer;
}

select.wsel-open {
    border-color: #1a73e8 !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.wsel-panel {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 20, 30, 0.16), 0 2px 6px rgba(16, 20, 30, 0.08);
    font-size: 0.9rem;
    color: #1f2430;
    /* Thin scrollbar standard (dashboard-frontend rule). */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    animation: wselIn 0.12s ease-out;
}

@keyframes wselIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wsel-panel::-webkit-scrollbar { width: 7px; }
.wsel-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); border-radius: 4px; }
.wsel-panel::-webkit-scrollbar-track { background: transparent; }

.wsel-group {
    padding: 8px 10px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a909b;
}

.wsel-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsel-opt .wsel-check {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    opacity: 0;
    color: #1a73e8;
}

.wsel-opt[aria-selected="true"] { font-weight: 600; }
.wsel-opt[aria-selected="true"] .wsel-check { opacity: 1; }
.wsel-opt.wsel-active { background: rgba(26, 115, 232, 0.1); }
.wsel-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.wsel-opt[aria-disabled="true"].wsel-active { background: transparent; }
.wsel-opt.wsel-indent { padding-left: 20px; }

.wsel-empty { padding: 10px; color: #8a909b; }

@media (max-width: 640px) {
    .wsel-panel { font-size: 0.95rem; max-height: 60vh; }
    .wsel-opt { padding: 11px 10px; }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wsel-panel {
        background: #1b1f27;
        border-color: rgba(255, 255, 255, 0.12);
        color: #e6e9ef;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    }
    :root:not([data-theme="light"]) .wsel-group { color: #9aa1ac; }
    :root:not([data-theme="light"]) .wsel-opt.wsel-active { background: rgba(255, 255, 255, 0.08); }
}

:root[data-theme="dark"] .wsel-panel {
    background: #1b1f27;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e6e9ef;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .wsel-group { color: #9aa1ac; }
:root[data-theme="dark"] .wsel-opt.wsel-active { background: rgba(255, 255, 255, 0.08); }