.searchable-select-wrapper { position: relative; } .searchable-select-wrapper:has(.searchable-select-dropdown.show) { z-index: 1105; } .searchable-select-input { cursor: pointer; font-family: var(--font-body, "Montserrat", sans-serif); font-size: var(--form-control-font-size, 1rem); font-weight: var(--form-control-font-weight, 500); line-height: var(--form-control-line-height, 1.5); background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.5rem; } .searchable-select-input::placeholder { font-family: var(--font-body, "Montserrat", sans-serif); font-size: var(--form-placeholder-font-size, 1rem); font-weight: var(--form-placeholder-font-weight, 400); } .searchable-select-input:focus { border-color: var(--color-primary, var(--primary)); box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb, 109, 40, 217), 0.15); } /* Modo sem filtro: dropdown puro (somente-leitura), sem cursor de texto e com fundo idêntico ao normal (readonly nativo não escurece como disabled). */ .searchable-select-input--no-filter { cursor: pointer; caret-color: transparent; background-color: var(--bs-body-bg, var(--color-surface-card)); } /* Variante "filter": adapta o componente às barras de filtro (mesmo visual dos antigos .filter-select — fundo suave, raio 8px, fonte compacta). */ .searchable-select-wrapper--filter { display: flex; align-items: center; } .searchable-select-input--filter { border: 1px solid var(--color-gray-200); border-radius: 8px; padding: 0.45rem 2.1rem 0.45rem 0.75rem; /* Mesma escala de fonte dos demais campos/placeholders (token único). */ font-size: var(--form-control-font-size, 1rem); color: var(--color-gray-700); background-color: var(--color-neutral-50); } .searchable-select-input--filter:focus { background-color: var(--color-surface-card); } .searchable-select-dropdown { position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 1105; display: none; max-height: 280px; overflow-y: auto; padding: 0.25rem; background: var(--color-surface-card, var(--color-surface-card)); border: 1px solid var(--color-border-default, var(--color-border-default)); border-radius: 10px; box-shadow: var(--shadow-dropdown); } .searchable-select-dropdown.show { display: block; } .searchable-select-dropdown--floating { position: fixed; top: var(--searchable-select-top); left: var(--searchable-select-left); right: auto; width: var(--searchable-select-width); max-height: var(--searchable-select-max-height); /* Quando aberto, o JS move o dropdown para o com position:fixed. Dentro de um modal (.modal z-index 20060 / .modal-backdrop 20050 em _dashboard-standard.css), um z-index menor faria o painel abrir ATRÁS do modal e suas opções ficarem inclicáveis. Precisa vencer o modal. */ z-index: 20070; } /* Enquanto um dropdown de select está aberto, permite que ele escape de contêineres com overflow oculto (cards/painéis), evitando que as opções fiquem cortadas ou atrás dos boxes seguintes. Vale para todos os selects componentizados de todas as áreas. */ .card:has(.searchable-select-dropdown.show), .card-body:has(.searchable-select-dropdown.show), .admin-edit-flow-shell:has(.searchable-select-dropdown.show), .admin-edit-flow-card:has(.searchable-select-dropdown.show), .admin-edit-step-content:has(.searchable-select-dropdown.show), .admin-edit-step-pane:has(.searchable-select-dropdown.show), .dashboard-page-stack:has(.searchable-select-dropdown.show) { overflow: visible !important; } .searchable-select-item, .searchable-select-no-results { width: 100%; border: 0; text-align: left; } .searchable-select-item { display: grid; min-height: 44px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; cursor: pointer; font-family: var(--font-body, "Montserrat", sans-serif); font-size: var(--form-option-font-size, 0.95rem); color: var(--color-text-main, var(--color-text-main)); background: transparent; border-radius: 7px; transition: background-color 0.15s ease, color 0.15s ease; } .searchable-select-item:hover, .searchable-select-item.highlighted { background: var(--color-surface-muted, var(--color-surface-muted)); } .searchable-select-item .item-name, .searchable-select-item .item-cnpj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .searchable-select-item .item-name { font-weight: 600; color: var(--color-text-main, var(--color-text-main)); } .searchable-select-item .item-cnpj { font-size: var(--form-option-meta-font-size, 0.8125rem); color: var(--color-text-muted, var(--color-gray-500)); } .searchable-select-no-results { display: block; padding: 0.75rem var(--spacing-sm); color: var(--color-text-muted, var(--color-gray-500)); font-family: var(--font-body, "Montserrat", sans-serif); font-size: var(--form-helper-font-size, 0.875rem); text-align: center; background: transparent; } .searchable-select-wrapper--sm .searchable-select-dropdown { max-height: 240px; } .searchable-select-wrapper--sm .searchable-select-item, .searchable-select-wrapper--sm .searchable-select-no-results { font-size: var(--form-compact-control-font-size, 0.95rem); }