/**
 * Fallback TomSelect para pesquisas modernas (HTMX).
 * Visual alinhado à produção (ex.: Jundiaí): borda/chrome do .form-select
 * ficam no wrapper; este arquivo só esconde o <select> nativo e evita
 * colapso de largura (width 1px) após hideNativeSelect.
 */
select.tomselected,
select.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  white-space: nowrap !important;
  resize: none !important;
  min-height: 0 !important;
  max-height: 1px !important;
}

/* Se o TomSelect criou o wrapper mas as classes falharam no nativo. */
select[multiple]:has(+ .ts-wrapper),
select.form-select:has(+ .ts-wrapper) {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  white-space: nowrap !important;
  resize: none !important;
  min-height: 0 !important;
  max-height: 1px !important;
}

/* Evita wrapper com ~1px herdado do <select> oculto. */
.ts-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Estado de carga (JS): placeholder até o JSON chegar. */
.ts-wrapper.sagl-ts-loading .ts-control > input::placeholder {
  color: #495057 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #495057 !important;
  font-style: italic;
}

/*
 * Acessibilidade (WAVE) — formulários de pesquisa:
 * placeholder/cinza Bootstrap (#6c757d) falha contraste; clear button e
 * rótulos .form-label-sm/.small precisam de tamanho e cor legíveis.
 */
.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper .ts-control .placeholder {
  color: #495057 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #495057 !important;
}

/* WAVE: #6c757d e × pequeno falham contraste / “Very small text”. */
.ts-wrapper.plugin-clear_button .clear-button,
.ts-wrapper .ts-control .clear-button {
  color: #495057 !important;
  opacity: 1 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  font-weight: 600;
}

#form-pesquisa .form-label-sm,
#form-pesquisa-emendas .form-label-sm,
.filtros-basicos-card .form-label-sm,
[data-sagl-pesquisa] .form-label-sm {
  font-size: 0.875rem;
  color: #212529;
}

#form-pesquisa .form-control::placeholder,
#form-pesquisa-emendas .form-control::placeholder,
.filtros-basicos-card .form-control::placeholder,
[data-sagl-pesquisa] .form-control::placeholder {
  color: #495057;
  opacity: 1;
}

#advancedSearch h3.h6,
#advancedSearchEmendas h3.h6,
[data-sagl-pesquisa] #advancedSearch h3.h6 {
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #495057;
}

.search-help-popover-btn {
  color: #0d6efd;
  font-size: 1rem;
  line-height: 1;
}

.pesquisa-ajuda-texto,
#form-pesquisa .pesquisa-ajuda-texto {
  color: #495057;
  font-size: 0.875rem;
}

/* WAVE “Very small text”: .badge do Bootstrap fica ~0.75em (~10px com html 13px). */
#badge-filtros,
#badge-filtros-emendas,
[id^="badge-filtros"],
#form-pesquisa #badge-filtros,
#btn-filtros-avancados #badge-filtros {
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.2;
  min-width: 1.5rem;
  padding: 0.35em 0.55em;
}

/*
 * clear_button: o CSS do Tom Select esconde o X (opacity:0) e só mostra em
 * hover/focus com .has-items. Regras das páginas com opacity:0.6 quebravam isso.
 */
.ts-wrapper.plugin-clear_button:not(.has-items) .clear-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ts-wrapper.plugin-clear_button.has-items .clear-button {
  visibility: visible;
  pointer-events: auto;
}

/* Enquanto o JS não inicializa, evita a caixa alta do <select multiple>. */
select.form-select[multiple]:not(.tomselected):not(.ts-hidden-accessible) {
  height: calc(1.5em + 0.75rem + 2px) !important;
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  max-height: calc(1.5em + 0.75rem + 2px) !important;
  overflow: hidden !important;
  resize: none !important;
}

/*
 * Formulários modernizados: o menu vai para document.body (saglSafeTomSelect).
 * Sem isso, card/tab-pane com overflow e o plugin dropdown_input aparecem como
 * uma caixinha vazia dentro do campo.
 * Em modal/offcanvas o JS força position:fixed; o z-index precisa ficar acima
 * do Bootstrap (--bs-modal-zindex ~1055).
 */
body > .ts-dropdown {
  z-index: 20000 !important;
  position: absolute;
}

body.modal-open > .ts-dropdown,
body:has(.offcanvas.show) > .ts-dropdown {
  position: fixed !important;
}

.modal > .ts-dropdown,
.offcanvas > .ts-dropdown {
  z-index: 1080 !important;
  position: absolute;
}

.ts-dropdown .dropdown-input,
.plugin-dropdown_input .dropdown-input {
  border: 1px solid var(--bs-border-color, #d0d0d0);
  border-width: 0 0 1px;
  display: block;
  padding: 0.375rem 0.75rem;
  width: 100%;
  background: transparent;
  box-sizing: border-box;
}

.plugin-dropdown_input.has-items .items-placeholder,
.plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.single.has-items .ts-control {
  flex-wrap: nowrap;
}

.ts-wrapper.single.has-items .ts-control > input {
  min-width: 0 !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  position: absolute;
}

.card.tml-form-card,
.tml-form-card.card {
  overflow: visible;
}

.card.tml-form-card:hover,
.tml-form-card.card:hover {
  transform: none;
}

/*
 * Campos de período (Flatpickr) — visual da pesquisa de matérias.
 * Hyper/Bootstrap pinta .form-control[readonly] de cinza (#e9ecef);
 * o input de data precisa do mesmo fundo branco dos demais filtros.
 */
.filtros-basicos-card .form-control.bg-white,
.filtros-basicos-card .form-control.bg-white[readonly],
#advancedSearch .form-control.bg-white,
#advancedSearch .form-control.bg-white[readonly],
#advancedSearchEmendas .form-control.bg-white,
#advancedSearchEmendas .form-control.bg-white[readonly],
.form-control.flatpickr-input.bg-white {
  background-color: #fff !important;
}

.filtros-basicos-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.filtros-basicos-presets .btn {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0.2rem 0.55rem;
  line-height: 1.2;
}