/* ============================================================================ * Global modern-select component — css/components/select.css * * Pairs with js/ui/select.js (UI.select). The native reads as a focused control (brand ring) and the chevron flips. Scoped to selects we actually enhanced so untouched / multi selects are never affected. The [data-uiselect] attribute (set by UI.select on enhance) is specific enough (0,1,1) to beat per-tool single-class field rules — including ones that use a `background:` shorthand (which resets background-repeat to `repeat` and would otherwise TILE the chevron across the field). So the component owns the chevron outright: one glyph, right-aligned, no repeat, in both the closed and open states. */ select[data-uiselect="1"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2.5' 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 13px center; background-size: 15px; } select[data-uiselect="1"].ui-select-open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(229, 57, 53, .15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E53935' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); } /* The floating menu is portalled to and positioned with fixed coords, so it never clips inside cards/overflow containers and sits above modals. */ .ui-select-menu { position: fixed; z-index: 100000; min-width: 140px; max-height: 280px; overflow-y: auto; padding: 5px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08); font-family: var(--font); font-size: .9rem; color: var(--text); -webkit-overflow-scrolling: touch; animation: ui-select-pop .12s ease; } @keyframes ui-select-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ui-select-option { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--radius-xs, 7px); cursor: pointer; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s ease, color .12s ease; } /* Leading check column keeps labels aligned whether selected or not. */ .ui-select-option::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: 15px; opacity: 0; } .ui-select-option.is-selected { color: var(--primary); font-weight: 600; } .ui-select-option.is-selected::before { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E53935' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } /* Hover (mouse) and active (keyboard) share one highlight so the two input modes feel identical. */ .ui-select-option:hover, .ui-select-option.is-active { background: var(--gray-100, #f1f3f5); } .ui-select-option.is-selected:hover, .ui-select-option.is-selected.is-active { background: rgba(229, 57, 53, .08); } .ui-select-option.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } /* heading. */ .ui-select-group-label { padding: 9px 11px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500, #868e96); } .ui-select-group-label:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; } .ui-select-empty { padding: 10px 11px; color: var(--gray-500, #868e96); font-size: .85rem; } /* Compact menu for the small filter selects (debug status/type, etc.). */ .ui-select-menu.ui-select-menu--sm { font-size: .82rem; } .ui-select-menu.ui-select-menu--sm .ui-select-option { padding: 7px 10px; }