/* sacm-search.v1.css — Tom Select: base essencial + tema SACM
 * Inclui todas as regras base necessárias para Tom Select funcionar corretamente.
 * Usa variáveis CSS do SACM definidas no index.html.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CRÍTICO: Ocultar o <select> original após Tom Select envolvê-lo
   Bootstrap 5 tem form-select { display: block } que concorre com [hidden].
   !important garante que o select original some.
   ═══════════════════════════════════════════════════════════════════════════ */
select.tomselected {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Tom Select cria um elemento de acessibilidade oculto */
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTRUTURA BASE — obrigatório para posicionamento correto
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-wrapper {
  position: relative;
  display: block;
  width: 100%;
  /* Herda o box-sizing do contexto */
  box-sizing: border-box;
}

/* Garantir que o wrapper substitua o select no fluxo do documento */
.ts-wrapper.form-select {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  height: auto !important;
  min-height: auto !important;
  /* Tom Select manage seu próprio layout */
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROL — o campo visual que o usuário vê e clica
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-control {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  width: 100%;
  /* Aparência idêntica ao form-select do Bootstrap/SACM */
  background-color: var(--input-bg, #FFFFFF);
  background-image: 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;
  border: 1px solid var(--input-border, #C6C9D5);
  border-radius: 0.375rem;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  min-height: 38px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary, #1F2937);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* Input de busca dentro do control */
.ts-control > input {
  flex: 1 1 auto;
  min-width: 20px;
  max-width: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-primary, #1F2937);
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.ts-control > input::placeholder {
  color: var(--input-placeholder, #888C9B);
}

/* Valor atualmente selecionado */
.ts-control > .item {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary, #1F2937);
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
  /* Quando há item selecionado, o input de busca fica invisível mas focável */
}

/* Quando o dropdown está aberto: esconder o item e mostrar cursor de busca */
.ts-wrapper.is-open .ts-control > .item {
  display: none !important;
}

/* ── Estados do control ──────────────────────────────────────────── */

/* Foco / Aberto */
.ts-wrapper.is-open .ts-control,
.ts-wrapper.focus .ts-control {
  border-color: var(--color-border-focus, #346CB0);
  box-shadow: 0 0 0 var(--focus-ring-width, 4px) var(--focus-ring-color, rgba(52, 108, 176, 0.25));
  outline: none;
}

/* Desabilitado */
.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control > input {
  background-color: var(--input-bg-readonly, #EEEEEE) !important;
  cursor: not-allowed !important;
  opacity: 0.65;
  pointer-events: none;
}

/* Placeholder quando nada selecionado */
.ts-control > input:only-child {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWN — lista suspensa de opções
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-dropdown {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 0.375rem;
  box-shadow: 0 4px 16px var(--shadow-color-md, rgba(20, 20, 31, 0.15));
  overflow: hidden;
  box-sizing: border-box;
}

/* Ocultar dropdown quando fechado */
.ts-wrapper:not(.is-open) .ts-dropdown {
  display: none;
}

/* Conteúdo rolável do dropdown */
.ts-dropdown-content {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 4px 0;
}

/* Barra de scroll personalizada */
.ts-dropdown-content::-webkit-scrollbar {
  width: 6px;
}
.ts-dropdown-content::-webkit-scrollbar-track {
  background: transparent;
}
.ts-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #52BCD3);
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPÇÕES — itens dentro do dropdown
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-dropdown [data-selectable],
.ts-dropdown .option {
  display: block;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--color-text-primary, #1F2937);
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: background-color 0.1s ease;
}

/* Hover / foco por teclado */
.ts-dropdown .option.active {
  background-color: var(--color-surface-hover, #F9FAFB);
  color: var(--color-text-primary, #1F2937);
}

/* Opção já selecionada */
.ts-dropdown .option.selected {
  background-color: var(--color-primary-light, rgba(52, 108, 176, 0.08));
  color: var(--color-primary, #346CB0);
  font-weight: 600;
}

/* Opção hover + selecionada */
.ts-dropdown .option.active.selected {
  background-color: var(--color-primary-subtle, rgba(52, 108, 176, 0.2));
}

/* Opção desabilitada */
.ts-dropdown .option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Opção vazia / placeholder */
.ts-dropdown .option[data-value=""] {
  color: var(--input-placeholder, #888C9B);
  font-style: italic;
}

/* Destaque do texto buscado */
.ts-dropdown .highlight,
.ts-dropdown mark {
  background-color: rgba(52, 108, 176, 0.15);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEM RESULTADOS
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-no-results {
  display: block;
  padding: 10px 14px;
  color: var(--color-text-secondary, #6B7280);
  font-size: 0.85rem;
  text-align: center;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRUPOS DE OPÇÕES (optgroup)
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-dropdown .optgroup-header {
  padding: 6px 14px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary, #9CA3AF);
  background: var(--color-surface-secondary, #F9FAFB);
  border-bottom: 1px solid var(--color-border-light, #ECEDF1);
  cursor: default;
}