/**
 * Design System - Search Form Components
 *
 * Sistema de padronização para formulários de pesquisa
 * Suporta grid de 3 colunas (Figma) e skin MDL→DS
 *
 * @version 2.0.0
 * @date 2025-12-11
 * @author SIDASP Design System Team
 *
 * Figma Specs (Input.css):
 * - Grid: 3 colunas, gap 32px
 * - Input height: 40px
 * - Background: #F6F6F9
 * - Border: 1px solid #CED3E2
 * - Border-radius: 6px
 */

/* ============================================================
   GRID SYSTEM - 3 COLUNAS (Figma)
   ============================================================ */

/**
 * Container principal do formulário de pesquisa
 */
.ds-form-search {
  width: 100%;
  background: transparent;
  box-sizing: border-box;
  height: auto !important; /* override height: 100% do listar.css (arquitetura antiga — segurança) */
  flex-shrink: 0; /* não encolhe dentro do painel */
}

/* ============================================================
   SKELETON DO PESQUISAR
   Reutiliza o keyframe gales-shimmer definido em listar.css
   ============================================================ */

/* Esconde o form do pesquisar enquanto o skeleton carrega.
   Escopado à classe listing-layout__search-form para não afetar
   outros formulários com id="formPesquisar" em outras telas. */
form.listing-layout__search-form {
  display: none;
}

form.listing-layout__search-form.pesquisar-revealed {
  display: flex;
  flex-direction: column;
  animation: pesquisar-fade-in 0.3s ease forwards;
}

@keyframes pesquisar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ds-form-search__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--arenito-spacing-8, 40px);
}

.pesquisar-skeleton__header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pesquisar-skeleton__bar {
  border-radius: 4px;
  background: var(--color-bg-tertiary, #E6E8EF);
  animation: gales-shimmer 1.5s ease-in-out infinite;
}

.pesquisar-skeleton__bar--title {
  width: 120px;
  height: 30px;
}

.pesquisar-skeleton__bar--subtitle {
  width: 340px;
  height: 14px;
  margin-top: 8px;
}

.pesquisar-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--arenito-spacing-6, 24px);
  row-gap: var(--arenito-spacing-6, 24px);
}

.pesquisar-skeleton__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: gales-shimmer 1.5s ease-in-out infinite;
  animation-delay: var(--sk-delay, 0s);
}

.pesquisar-skeleton__label {
  height: 12px;
  width: 55%;
  border-radius: 4px;
  background: var(--color-bg-tertiary, #E6E8EF);
}

.pesquisar-skeleton__input {
  height: 40px;
  width: 100%;
  border-radius: 6px;
  background: var(--color-bg-tertiary, #E6E8EF);
  opacity: 0.6;
}

/**
 * Seções de categoria dentro do formulário de pesquisa
 */
.ds-form-search .pesquisar-section {
  display: flex;
  flex-direction: column;
  gap: var(--arenito-spacing-2, 8px);
}

.ds-form-search .pesquisar-section__title {
  font-family: var(--arenito-p6-family, 'Inter', sans-serif);
  font-size: var(--arenito-p6-size, 12px);
  line-height: var(--arenito-p6-line-height, 22px);
  font-weight: var(--arenito-p6-weight, 400);
  color: var(--arenito-text-base-neutral-subtle, #7A839F);
  margin: 0;
}

/**
 * Cabeçalho do formulário de pesquisa
 */
.ds-form-search__header {
  margin-bottom: var(--arenito-spacing-8, 40px);
}

.ds-form-search__title {
  font-family: var(--arenito-h2-family, 'Space Grotesk', sans-serif);
  font-size: var(--arenito-h2-size, 20px);
  line-height: var(--arenito-h2-line-height, 30px);
  font-weight: var(--arenito-h2-weight, 500);
  color: var(--arenito-text-base-neutral-default, #12151F);
  margin: 0;
}

.ds-form-search__subtitle {
  font-family: var(--arenito-p4-family, 'Inter', sans-serif);
  font-size: var(--arenito-p4-size, 14px);
  line-height: var(--arenito-p4-line-height, 24px);
  font-weight: var(--arenito-p4-weight, 400);
  color: var(--arenito-text-base-neutral-secondary, #394360);
  margin: 0;
}

/**
 * Container de campos - Grid de 3 colunas (Figma)
 */
.ds-form-search .listing-layout__search-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--arenito-spacing-7, 32px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 var(--arenito-spacing-6, 24px) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important; /* override flex:1 do listar.css — scroll no .listing-layout__content, não aqui */
  overflow: visible !important; /* evita segundo scroll interno; overflow-x:hidden do listar.css forçaria overflow-y:auto (CSS2) */
}

.ds-form-search .mdl-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  column-gap: var(--arenito-spacing-6, 24px) !important;
  row-gap: var(--arenito-spacing-4, 16px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  /* Reset MDL flexbox */
  flex-wrap: unset !important;
}

/**
 * Células MDL - ocupam 100% da coluna do grid
 */
.ds-form-search .mdl-cell,
.ds-form-search .mdl-cell--4-col,
.ds-form-search .mdl-cell--6-col,
.ds-form-search .mdl-cell--12-col {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--arenito-spacing-4, 16px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Células de largura total devem atravessar as 3 colunas do grid */
.ds-form-search .mdl-cell--12-col {
  grid-column: 1 / -1 !important;
}

/* Células de meia largura ocupam 2 de 3 colunas */
.ds-form-search .mdl-cell--6-col {
  grid-column: span 2 !important;
}

/**
 * Row - Sistema de grid alternativo
 */
.ds-form-search .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--arenito-spacing-6, 24px);
  row-gap: var(--arenito-spacing-6, 24px);
  width: 100%;
  box-sizing: border-box;
}

/**
 * Colunas - Variações de largura
 */
.ds-form-search .col-1 { grid-column: span 1; }
.ds-form-search .col-2 { grid-column: span 2; }
.ds-form-search .col-3 { grid-column: span 3; }
.ds-form-search .col-4 { grid-column: span 1; }   /* 1/3 - PADRÃO */
.ds-form-search .col-6 { grid-column: span 2; }   /* 2/3 */
.ds-form-search .col-8 { grid-column: span 2; }
.ds-form-search .col-12 { grid-column: span 3; }  /* 100% */

/**
 * Garantir que colunas não quebrem o layout
 */
.ds-form-search [class*="col-"] {
  min-width: 0;
  box-sizing: border-box;
}

/**
 * Alertas dentro do grid de pesquisa — sempre full width
 * e estilo consistente com o Design System
 */
.ds-form-search .alert,
.ds-form-search .alert-info,
.ds-form-search .alert-warning,
.ds-form-search .alert-success,
.ds-form-search .alert-error,
.ds-form-search .alert-neutral {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box;
}

.ds-form-search .mdl-grid .alert,
.ds-form-search .mdl-grid .alert-info,
.ds-form-search .mdl-grid .alert-warning,
.ds-form-search .mdl-grid .alert-success,
.ds-form-search .mdl-grid .alert-error,
.ds-form-search .mdl-grid .alert-neutral {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* ============================================================
   TEXTOS INFORMATIVOS → ALERT
   Células mdl-cell--12-col sem campos de formulário são
   estilizadas como alerts e sobem ao topo do container.
   Seletor :has() detecta células puramente textuais (sem input/select).
   ============================================================ */

/* Grid de texto puro sobe ao topo da lista de campos */
.ds-form-search .listing-layout__search-fields > .mdl-grid:not(:has(input, select, [data-upgraded])) {
  order: -1 !important;
}

/* Cada célula de texto vira um alert informativo */
.ds-form-search .mdl-cell--12-col:not(:has(input, select, [data-upgraded])) {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: var(--arenito-spacing-3, 12px) !important;
  gap: var(--arenito-spacing-3, 12px) !important;
  background: var(--color-bg-tertiary, #E6E8EF) !important;
  border-radius: var(--arenito-radius-default, 6px) !important;
  font-family: var(--arenito-p4-family, 'Inter', sans-serif) !important;
  font-size: var(--arenito-p4-size, 14px) !important;
  font-weight: var(--arenito-p4-weight, 400) !important;
  line-height: var(--arenito-p4-line-height, 24px) !important;
  color: var(--arenito-text-base-neutral-default, #12151F) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Ícone info - Icon Park 18×18, stroke 1.5, alinhado ao topo do texto */
.ds-form-search .mdl-cell--12-col:not(:has(input, select, [data-upgraded]))::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='20' stroke='%2312151F' stroke-width='4'/%3E%3Cpath stroke='%2312151F' stroke-width='4' stroke-linecap='round' d='M24 13 L24 15'/%3E%3Cpath stroke='%2312151F' stroke-width='4' stroke-linecap='round' d='M24 20 L24 36'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

/* ============================================================
   MDL → DESIGN SYSTEM SKIN
   ============================================================
   
   Faz inputs MDL parecerem com Design System
   Scoped apenas para formulários de pesquisa
   ============================================================ */

/**
 * MDL Textfield → DS Input
 */
.ds-form-search .mdl-textfield,
.ds-form-search .mdl-textfield__input,
.ds-form-search [data-upgraded*="MaterialTextfield"],
.ds-form-search [data-upgraded*="MaterialTextfield"] input {
  width: 100% !important;
  box-sizing: border-box !important;
}

.ds-form-search .mdl-textfield {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important; /* Arenito: spacing-2 (8px) entre label e field */
}

/**
 * MDL Label → DS Label
 */
.ds-form-search .mdl-textfield__label {
  position: static !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-medium, 500) !important;
  line-height: 24px !important;
  color: var(--color-text-primary, #12151F) !important;
  margin-bottom: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  width: auto !important;
  left: 0 !important;
  top: 0 !important;
}

/**
 * MDL Input → DS Input (Figma specs)
 */
.ds-form-search .mdl-textfield__input {
  height: 40px !important;
  padding: 12px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: 24px !important;
  color: var(--color-text-primary, #12151F) !important;
  background-color: #F6F6F9 !important;
  border: 1px solid #CED3E2 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  transition: all var(--transition-base, 200ms ease-in-out) !important;
  width: 100% !important;
}

/**
 * Placeholder
 */
.ds-form-search .mdl-textfield__input::placeholder {
  color: var(--color-neutral-500, #7A839F) !important;
  opacity: 1 !important;
}

/**
 * Hover State
 */
.ds-form-search .mdl-textfield__input:hover:not(:disabled) {
  border-color: var(--color-neutral-600, #394360) !important;
}

/**
 * Focus State
 */
.ds-form-search .mdl-textfield__input:focus {
  border-color: var(--color-primary, #3E68FB) !important;
  box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.1) !important;
  outline: none !important;
}

/**
 * Disabled State
 */
.ds-form-search .mdl-textfield__input:disabled {
  background-color: var(--color-neutral-100, #F6F6F9) !important;
  color: var(--color-neutral-500, #7A839F) !important;
  border-color: var(--color-neutral-300, #ECEDF2) !important;
  cursor: not-allowed !important;
}

/**
 * Remove underline do MDL
 */
.ds-form-search .mdl-textfield__label::after,
.ds-form-search .mdl-textfield::after {
  display: none !important;
}

/**
 * MDL Select → DS Select
 */
.ds-form-search select.mdl-textfield__input,
.ds-form-search .mdl-selectfield select {
  height: 40px !important;
  padding: 0 40px 0 12px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: 24px !important;
  color: var(--color-text-primary, #12151F) !important;
  background-color: #F6F6F9 !important;
  border: 1px solid #CED3E2 !important;
  border-radius: 6px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23394360' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18L24 30L36 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}

.ds-form-search select.mdl-textfield__input:hover:not(:disabled),
.ds-form-search .mdl-selectfield select:hover:not(:disabled) {
  background-color: #ECEDF2 !important;
  border-color: #CED3E2 !important;
}

.ds-form-search select.mdl-textfield__input:focus,
.ds-form-search .mdl-selectfield select:focus {
  border-color: #7A839F !important;
  background-color: #F6F6F9 !important;
  box-shadow: none !important;
  outline: none !important;
}

/**
 * Laminas Form Elements → DS
 */
.ds-form-search .form-control {
  height: 40px !important;
  padding: 0 12px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #12151F !important;
  background-color: #F6F6F9 !important;
  border: 1px solid #CED3E2 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out !important;
  width: 100% !important;
}

.ds-form-search select.form-control {
  padding: 0 40px 0 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23394360' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18L24 30L36 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}

.ds-form-search .form-control:hover:not(:disabled):not(:focus) {
  background-color: #ECEDF2 !important;
  border-color: #CED3E2 !important;
}

.ds-form-search .form-control:focus {
  border-color: #7A839F !important;
  background-color: #F6F6F9 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ============================================================
   INPUT-DEFAULT - Classe usada pelo sistema (Figma specs)
   ============================================================ */

/**
 * Input padrão do sistema - Figma specs
 * height: 40px, background: #F6F6F9, border: #CED3E2, radius: 6px
 */
/* Input padrão - Arenito tokens */
.ds-form-search input.input-default,
.ds-form-search .input-default {
  height: 40px !important;
  padding: 0 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #12151F !important;
  background-color: #F6F6F9 !important;
  border: 1px solid #CED3E2 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out !important;
  width: 100% !important;
}

/* Select com classe input-default - Arenito tokens */
.ds-form-search select.input-default {
  padding: 0 40px 0 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23394360' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18L24 30L36 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}

.ds-form-search input.input-default::placeholder,
.ds-form-search .input-default::placeholder {
  color: #7A839F !important;
  opacity: 1 !important;
}

.ds-form-search input.input-default:hover:not(:disabled):not(:focus),
.ds-form-search .input-default:hover:not(:disabled):not(:focus) {
  background-color: #ECEDF2 !important;
  border-color: #CED3E2 !important;
}

.ds-form-search input.input-default:focus,
.ds-form-search .input-default:focus {
  border-color: #7A839F !important;
  background-color: #F6F6F9 !important;
  box-shadow: none !important;
  outline: none !important;
}

/**
 * Select padrão - Arenito tokens
 */
.ds-form-search select,
.ds-form-search .ds-form-field select {
  height: 40px !important;
  padding: 5px 40px 5px 12px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #12151F !important;
  background-color: #F6F6F9 !important;
  border: 1px solid #CED3E2 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23394360' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18L24 30L36 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}

/* Esconder ícone Material Icons - chevron já é via background-image */
.ds-form-search .select-icon {
  display: none !important;
}

.ds-form-search select:hover:not(:disabled),
.ds-form-search .ds-form-field select:hover:not(:disabled) {
  background-color: #ECEDF2 !important;
  border-color: #CED3E2 !important;
}

.ds-form-search select:focus,
.ds-form-search .ds-form-field select:focus {
  border-color: #7A839F !important;
  background-color: #F6F6F9 !important;
  box-shadow: none !important;
  outline: none !important;
}

/**
 * Label - Figma specs
 */
.ds-form-search label,
.ds-form-search .form-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #12151F !important;
  margin-bottom: 0 !important;
  display: block !important;
  cursor: default !important;
}

/* Cursores - Arenito */
.ds-form-search select,
.ds-form-search button,
.ds-form-search a {
  cursor: pointer !important;
}

.ds-form-search input[type="text"],
.ds-form-search input[type="number"],
.ds-form-search input[type="email"],
.ds-form-search input[type="tel"],
.ds-form-search input[type="search"],
.ds-form-search input[type="password"],
.ds-form-search input.input-default,
.ds-form-search textarea {
  cursor: text !important;
}

/**
 * Campo container - Figma specs
 */
.ds-form-search .ds-form-field,
.ds-form-search .div-input,
.ds-form-search .agr-m-b-10,
.ds-form-search .input-group,
.ds-form-search .select-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
  width: 100% !important;
}

/**
 * Label - Garantir alinhamento à esquerda
 */
.ds-form-search .input-label,
.ds-form-search .input-city-label {
  text-align: left !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

/**
 * Control container - garantir 100% width
 */
.ds-form-search .ds-form-field__control {
  width: 100% !important;
  display: block !important;
}

/* Removido: regra duplicada de select.form-control — já definida acima (linha 267) */

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

/**
 * Tablet (768px - 1024px): 2 campos por linha
 */
@media (max-width: 1024px) and (min-width: 768px) {
  .ds-form-search .row {
    grid-template-columns: repeat(2, 1fr);
  }

  .ds-form-search .col-4 {
    grid-column: span 1;
  }

  .ds-form-search .col-12 {
    grid-column: span 2;
  }
}

/**
 * Mobile (<768px): 1 campo por linha
 */
@media (max-width: 767px) {
  .ds-form-search {
    padding: 20px;
  }
  
  .ds-form-search .row {
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .ds-form-search .col-1,
  .ds-form-search .col-2,
  .ds-form-search .col-3,
  .ds-form-search .col-4,
  .ds-form-search .col-6,
  .ds-form-search .col-8,
  .ds-form-search .col-12 {
    grid-column: span 12; /* 100% */
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */

html.dark .ds-form-search,
html.dark-mode .ds-form-search,
html[data-theme="dark"] .ds-form-search,
.dark .ds-form-search,
.dark-mode .ds-form-search,
[data-theme="dark"] .ds-form-search {
  /* Removido: cor cinza diferenciada - agora usa a mesma cor do content */
  background: transparent !important;
}

.dark .ds-form-search .mdl-textfield__label,
[data-theme="dark"] .ds-form-search .mdl-textfield__label {
  color: var(--color-neutral-300, #CED3E2) !important;
}

.dark .ds-form-search .mdl-textfield__input,
.dark .ds-form-search .form-control,
[data-theme="dark"] .ds-form-search .mdl-textfield__input,
[data-theme="dark"] .ds-form-search .form-control {
  color: var(--color-neutral-300, #CED3E2) !important;
  background-color: var(--color-neutral-700, #262B3B) !important;
  border-color: var(--color-neutral-600, #394360) !important;
}

.dark .ds-form-search .mdl-textfield__input::placeholder,
.dark .ds-form-search .form-control::placeholder,
[data-theme="dark"] .ds-form-search .mdl-textfield__input::placeholder,
[data-theme="dark"] .ds-form-search .form-control::placeholder {
  color: var(--color-neutral-500, #7A839F) !important;
}

.dark .ds-form-search .mdl-textfield__input:hover:not(:disabled),
.dark .ds-form-search .form-control:hover:not(:disabled),
[data-theme="dark"] .ds-form-search .mdl-textfield__input:hover:not(:disabled),
[data-theme="dark"] .ds-form-search .form-control:hover:not(:disabled) {
  border-color: var(--color-neutral-500, #7A839F) !important;
}

.dark .ds-form-search .mdl-textfield__input:focus,
.dark .ds-form-search .form-control:focus,
[data-theme="dark"] .ds-form-search .mdl-textfield__input:focus,
[data-theme="dark"] .ds-form-search .form-control:focus {
  border-color: var(--color-primary, #3E68FB) !important;
  box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.15) !important;
}

.dark .ds-form-search .mdl-textfield__input:disabled,
.dark .ds-form-search .form-control:disabled,
[data-theme="dark"] .ds-form-search .mdl-textfield__input:disabled,
[data-theme="dark"] .ds-form-search .form-control:disabled {
  background-color: var(--color-neutral-800, #1A1D2E) !important;
  color: var(--color-neutral-500, #7A839F) !important;
  border-color: var(--color-neutral-700, #262B3B) !important;
}

/* Dark mode select arrow */
.dark .ds-form-search select.mdl-textfield__input,
.dark .ds-form-search select.form-control,
[data-theme="dark"] .ds-form-search select.mdl-textfield__input,
[data-theme="dark"] .ds-form-search select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%237A839F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   DARK MODE - INPUTS GENERICOS (.input-default, input, select)
   ============================================================

   Sobrescreve regras do emergency-overrides.css que usam
   --color-bg-secondary (#141926) para inputs.

   Inputs devem usar --color-neutral-700 (#1D2333) para
   criar contraste com o fundo do content area.
   ============================================================ */

/* Labels dentro do form-search */
html.dark .ds-form-search label,
html.dark .ds-form-search .ds-form-field__label,
.dark .ds-form-search label,
.dark .ds-form-search .ds-form-field__label {
  color: var(--color-neutral-300, #E0E2EB) !important;
}

/* Inputs genericos - Dark Mode */
html.dark .ds-form-search input,
html.dark .ds-form-search input.input-default,
html.dark .ds-form-search select,
html.dark .ds-form-search textarea,
.dark .ds-form-search input,
.dark .ds-form-search input.input-default,
.dark .ds-form-search select,
.dark .ds-form-search textarea {
  color: var(--color-neutral-300, #E0E2EB) !important;
  background-color: var(--color-neutral-700, #1D2333) !important;
  border-color: var(--color-neutral-600, #2A2F41) !important;
}

/* Placeholder - Dark Mode */
html.dark .ds-form-search input::placeholder,
html.dark .ds-form-search input.input-default::placeholder,
html.dark .ds-form-search textarea::placeholder,
.dark .ds-form-search input::placeholder,
.dark .ds-form-search input.input-default::placeholder,
.dark .ds-form-search textarea::placeholder {
  color: var(--color-neutral-500, #7A839F) !important;
  opacity: 1 !important;
}

/* Hover - Dark Mode */
html.dark .ds-form-search input:hover:not(:disabled),
html.dark .ds-form-search input.input-default:hover:not(:disabled),
html.dark .ds-form-search select:hover:not(:disabled),
html.dark .ds-form-search textarea:hover:not(:disabled),
.dark .ds-form-search input:hover:not(:disabled),
.dark .ds-form-search input.input-default:hover:not(:disabled),
.dark .ds-form-search select:hover:not(:disabled),
.dark .ds-form-search textarea:hover:not(:disabled) {
  border-color: var(--color-neutral-500, #7A839F) !important;
}

/* Focus - Dark Mode */
html.dark .ds-form-search input:focus,
html.dark .ds-form-search input.input-default:focus,
html.dark .ds-form-search select:focus,
html.dark .ds-form-search textarea:focus,
.dark .ds-form-search input:focus,
.dark .ds-form-search input.input-default:focus,
.dark .ds-form-search select:focus,
.dark .ds-form-search textarea:focus {
  border-color: var(--color-primary, #970707) !important;
  box-shadow: 0 0 0 3px rgba(151, 7, 7, 0.15) !important;
  outline: none !important;
}

/* Disabled - Dark Mode */
html.dark .ds-form-search input:disabled,
html.dark .ds-form-search input.input-default:disabled,
html.dark .ds-form-search select:disabled,
html.dark .ds-form-search textarea:disabled,
.dark .ds-form-search input:disabled,
.dark .ds-form-search input.input-default:disabled,
.dark .ds-form-search select:disabled,
.dark .ds-form-search textarea:disabled {
  background-color: var(--color-neutral-800, #10141D) !important;
  color: var(--color-neutral-500, #7A839F) !important;
  border-color: var(--color-neutral-700, #1D2333) !important;
  cursor: not-allowed !important;
}

/* Select arrow - Dark Mode */
html.dark .ds-form-search select,
html.dark .ds-form-search select.input-default,
.dark .ds-form-search select,
.dark .ds-form-search select.input-default {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%237A839F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 20px 20px !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* ============================================================
   COMPATIBILIDADE COM TAILWIND
   ============================================================
   
   Remove conflitos com classes Tailwind existentes
   ============================================================ */

.ds-form-search .flex {
  display: flex !important;
}

.ds-form-search .flex-wrap {
  flex-wrap: wrap !important;
}

.ds-form-search .gap-4 {
  gap: 1rem !important;
}

.ds-form-search .p-4 {
  padding: 1rem !important;
}

.ds-form-search .flex-1 {
  flex: 1 1 0% !important;
}

.ds-form-search .min-w-\[200px\] {
  min-width: 200px !important;
}