/* custom-select.css — themed dropdown overlay (light + dark via CSS vars) */ .cs-host { position: relative; width: 100%; } /* Native select kept for value/events, but visually removed. */ .cs-host > select.cs-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } /* Trigger reuses .form-control/.form-select look; just make it a flex button. */ .cs-trigger { display: flex; align-items: center; text-align: left; cursor: pointer; gap: 8px; } .cs-trigger[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.1); } .cs-host.cs-disabled .cs-trigger { cursor: not-allowed; opacity: 0.6; } .cs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-label.cs-placeholder { color: var(--text-muted); } /* Portaled menu (appended to , position:fixed). */ .cs-menu { position: fixed; z-index: 10050; min-width: 160px; max-width: 92vw; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 30px hsla(210, 50%, 10%, 0.18), 0 2px 8px hsla(210, 50%, 10%, 0.08); padding: 6px; transform-origin: top center; animation: csIn 0.12s ease; color: var(--foreground); } @keyframes csIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cs-search { padding: 2px 2px 6px; } .cs-search .form-control { min-height: 40px; font-size: 0.88rem; } .cs-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .cs-group { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 8px 12px 4px; } .cs-option { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--foreground); font-size: 0.9rem; line-height: 1.25; } .cs-opt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cs-opt-check { font-size: 1.1rem; color: var(--primary); } .cs-option.cs-active, .cs-option:hover { background: var(--primary-50); color: var(--primary); } .cs-option[aria-selected="true"] { font-weight: 600; } .cs-option[data-disabled="1"] { opacity: 0.45; cursor: not-allowed; } .cs-empty { padding: 14px 12px; text-align: center; color: var(--text-muted); font-size: 0.85rem; } /* Edit / delete on user-added options */ .cs-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; } .cs-act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 0.95rem; line-height: 1; cursor: pointer; } .cs-act:hover { background: var(--muted); color: var(--foreground); } .cs-act.cs-del:hover { background: var(--danger-light, hsl(0, 70%, 95%)); color: var(--destructive); } .cs-act.cs-save { color: var(--primary); } .cs-option.cs-editing { gap: 4px; } .cs-edit-input { flex: 1; min-width: 0; min-height: 34px; padding: 4px 8px; font-size: 0.88rem; }