/* Shared presentation overrides page and Blazor-isolated styles; pages retain
   control of field widths and layout. Keep native select keyboard behavior. */
html body select:not([multiple]):not([size]) {
    appearance: none;
    min-height: 2.7rem;
    max-width: 100%;
    padding: .6rem 2.4rem .6rem .75rem;
    border: 1px solid light-dark(#c7d0dc, var(--theme-control-line));
    border-radius: .5rem;
    background: var(--panel) var(--select-arrow) no-repeat right .75rem center / 1rem;
    color: light-dark(var(--brand), var(--theme-accent));
    font: 400 .85rem/1.4 var(--font-body);
    text-transform: none;
    letter-spacing: normal;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

html body select:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: var(--accent);
}

html body select:not([multiple]):not([size]):focus {
    border-color: var(--accent);
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

html body select:not([multiple]):not([size]):disabled {
    background-color: var(--canvas);
    color: var(--muted);
    border-color: var(--line);
    opacity: 1;
    cursor: not-allowed;
}

html body select option,
html body select optgroup {
    background: var(--panel);
    color: light-dark(var(--brand), var(--theme-accent));
    font: inherit;
}

/* Browsers with customizable native selects can theme the open menu too.
   Older browsers keep their accessible native option picker. */
@supports (appearance: base-select) {
    html body select:not([multiple]):not([size]),
    html body select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    html body select:not([multiple]):not([size])::picker-icon {
        display: none;
    }

    html body select:not([multiple]):not([size])::picker(select) {
        margin-block: .3rem;
        padding: .3rem;
        border: 1px solid light-dark(#c7d0dc, var(--theme-line));
        border-radius: .5rem;
        background: var(--panel);
        color: light-dark(var(--brand), var(--theme-accent));
        box-shadow: 0 8px 24px rgb(30 58 95 / 16%);
        font: 400 .85rem/1.4 var(--font-body);
        max-height: min(22rem, 60vh);
        overflow-y: auto;
    }

    html body select:not([multiple]):not([size]) option {
        min-height: 2.5rem;
        padding: .6rem .75rem;
        border-radius: .3rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html body select:not([multiple]):not([size]) option:checked,
    html body select:not([multiple]):not([size]) option:hover,
    html body select:not([multiple]):not([size]) option:focus {
        background: var(--brand-soft);
        color: light-dark(var(--brand), var(--theme-accent));
    }

    html body select:not([multiple]):not([size]) option:disabled {
        color: var(--muted);
    }
}

@media (forced-colors: active) {
    html body select:not([multiple]):not([size]) {
        appearance: auto;
        background-image: none;
        color: ButtonText;
        border-color: ButtonText;
    }
}