/* * Searchable-select — site-wide replacement for Select2. * * Wraps a native stays in the DOM (display:none) so form submission keeps * working unchanged. Single + multi modes supported. * * Design constraints: * - The popover is an absolute child of .ss-wrap, anchored under the * trigger. It never portals to — Select2's portal pattern is * exactly what fought RTL layouts and card overflow on aggtime. * - Visual style matches the standard form controls: same border, * radius, focus ring. Designed neutral so it works in /control, * /back, automation forms, etc. * - RTL is handled via logical properties (inset-inline-start, etc.) * so an LTR install would render mirrored without rule changes. */ .ss-wrap { position: relative; width: 100%; font-family: inherit; } .ss-trigger { width: 100%; min-height: 40px; padding: 8px 12px; border: 1.5px solid #d6dde6; border-radius: 8px; background: #fff; color: #263238; font-size: 14px; font-family: inherit; text-align: start; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: border-color .12s, box-shadow .12s; } .ss-trigger:focus, .ss-wrap.ss-open .ss-trigger { outline: none; border-color: #b71c1c; box-shadow: 0 0 0 3px rgba(183,28,28,.10); } .ss-trigger[disabled] { background: #f1f3f5; color: #90a4ae; cursor: not-allowed; } .ss-trigger .ss-arrow { color: #90a4ae; transition: transform .15s; flex: 0 0 auto; } .ss-wrap.ss-open .ss-trigger .ss-arrow { transform: rotate(180deg); } .ss-trigger .ss-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-trigger .ss-label.is-placeholder { color: #90a4ae; } /* Multi-select pills inside the trigger */ .ss-trigger .ss-pills { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .ss-trigger .ss-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: #eceff1; border-radius: 999px; font-size: 12px; color: #37474f; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-trigger .ss-pill-x { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #b0bec5; color: #fff; line-height: 14px; text-align: center; font-size: 10px; cursor: pointer; } .ss-trigger .ss-pill-x:hover { background: #b71c1c; } /* The popover panel */ .ss-panel { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 4px); background: #fff; border: 1.5px solid #d6dde6; border-radius: 8px; box-shadow: 0 8px 22px rgba(20,30,60,.10); z-index: 1050; max-height: 320px; display: none; flex-direction: column; overflow: hidden; } .ss-wrap.ss-open .ss-panel { display: flex; } .ss-wrap.ss-dropup .ss-panel { top: auto; bottom: calc(100% + 4px); } .ss-search { padding: 8px; border-bottom: 1px solid #eceff1; background: #fafbfc; flex: 0 0 auto; } .ss-search input { width: 100%; padding: 7px 11px; border: 1.5px solid #e5e9f0; border-radius: 6px; font-size: 14px; color: #263238; font-family: inherit; } .ss-search input:focus { outline: none; border-color: #b71c1c; box-shadow: 0 0 0 3px rgba(183,28,28,.10); } .ss-list { flex: 1 1 auto; overflow-y: auto; min-height: 40px; } .ss-option { padding: 8px 12px; cursor: pointer; font-size: 14px; color: #263238; border-bottom: 1px solid #f4f6f9; display: flex; align-items: center; gap: 8px; } .ss-option:last-child { border-bottom: 0; } .ss-option:hover, .ss-option.is-cursor { background: #fdecea; color: #b71c1c; } .ss-option.is-selected { background: #fff1f0; font-weight: 600; } .ss-option.is-disabled { color: #b0bec5; cursor: not-allowed; } .ss-option.is-disabled:hover { background: transparent; color: #b0bec5; } .ss-option .ss-check { flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid #cfd8dc; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; } .ss-option.is-selected .ss-check { background: #b71c1c; border-color: #b71c1c; } .ss-empty { padding: 18px; text-align: center; color: #90a4ae; font-size: 13px; } /* When a select is migrated, hide the original — keep it in DOM so its value still POSTs with the form. */ select.searchable-select-bound { display: none !important; }