/**
 * CustomSelect panel — portal-rendered option list that replaces the native
 * <select> popup (which fails to render under Wine/Proton). Anchored & positioned
 * from JS (js/ui/customSelect.js); styled here to match the design system.
 */

.cs-panel {
    position: fixed;
    box-sizing: border-box;
    margin: 0;
    padding: 4px;
    /* Opaque: the panel is portaled onto <body>, so it needs a solid fill
       (--sect-surface-2 is a near-transparent overlay meant for opaque parents). */
    background: var(--sect-surface-1, #1a2332);
    border: 1px solid var(--sect-border-strong, #3a4656);
    border-radius: var(--r-sm, 6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--sect-text, #e6edf3);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
    -webkit-overflow-scrolling: touch;
}

.cs-option {
    box-sizing: border-box;
    padding: 8px 12px;
    min-height: 36px;
    display: flex;
    align-items: center;
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.08s ease, color 0.08s ease;
}

/* Hover (mouse) and keyboard-active share the same highlight. */
.cs-option:hover,
.cs-option--active {
    background: var(--sect-teal-dim, rgba(78, 224, 200, 0.18));
    color: var(--sect-text, #e6edf3);
}

.cs-option--selected {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
}
.cs-option--selected.cs-option--active,
.cs-option--selected:hover {
    background: var(--sect-teal-dim, rgba(78, 224, 200, 0.22));
}

.cs-option--disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Touch: larger hit targets so it behaves at least as well as the native picker. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .cs-panel { font-size: 14px; }
    .cs-option { min-height: 44px; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-option { transition: none; }
}
