/**
 * 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%;
  padding: 32px;
  background: var(--color-bg-tertiary, #ECEDF2);
  box-sizing: border-box;
}

/**
 * Container de campos - Grid de 3 colunas (Figma)
 */
.ds-form-search .listing-layout__search-fields {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.ds-form-search .mdl-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !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 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/**
 * Row - Sistema de grid alternativo
 */
.ds-form-search .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.ds-form-search .row:last-child {
  margin-bottom: 0;
}

/**
 * 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;
}

/* ============================================================
   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 {
  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;
}

/**
 * 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: 44px !important;
  padding: 10px 40px 10px 16px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-regular, 400) !important;
  color: var(--color-text-primary, #12151F) !important;
  background-color: var(--color-text-light, #FFFFFF) !important;
  border: 1px solid var(--color-border, #CED3E2) !important;
  border-radius: var(--radius-md, 8px) !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' 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;
  cursor: pointer !important;
}

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

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

/**
 * Laminas Form Elements → DS
 */
.ds-form-search .form-control {
  height: 44px !important;
  padding: 10px 16px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: 24px !important;
  color: var(--color-text-primary, #12151F) !important;
  background-color: var(--color-text-light, #FFFFFF) !important;
  border: 1px solid var(--color-border, #CED3E2) !important;
  border-radius: var(--radius-md, 8px) !important;
  box-sizing: border-box !important;
  transition: all var(--transition-base, 200ms ease-in-out) !important;
  width: 100% !important;
}

.ds-form-search .form-control:hover:not(:disabled) {
  border-color: var(--color-neutral-600, #394360) !important;
}

.ds-form-search .form-control:focus {
  border-color: var(--color-primary, #3E68FB) !important;
  box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.1) !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
 */
.ds-form-search input.input-default,
.ds-form-search .input-default {
  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;
}

.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),
.ds-form-search .input-default:hover:not(:disabled) {
  border-color: #394360 !important;
}

.ds-form-search input.input-default:focus,
.ds-form-search .input-default:focus {
  border-color: var(--color-primary, #970707) !important;
  box-shadow: 0 0 0 3px rgba(151, 7, 7, 0.1) !important;
  outline: none !important;
}

/**
 * Select padrão - Figma specs
 */
.ds-form-search select,
.ds-form-search .ds-form-field select {
  height: 40px !important;
  padding: 12px 40px 12px 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;
  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' 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 12px center !important;
  background-size: 20px 20px !important;
  cursor: pointer !important;
}

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

.ds-form-search select:focus,
.ds-form-search .ds-form-field select:focus {
  border-color: var(--color-primary, #970707) !important;
  box-shadow: 0 0 0 3px rgba(151, 7, 7, 0.1) !important;
  outline: none !important;
}

/**
 * Label - Figma specs
 */
.ds-form-search label,
.ds-form-search .form-label {
  font-family: var(--font-body, 'Inter') !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #12151F !important;
  margin-bottom: 8px !important;
  display: block !important;
}

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

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

.ds-form-search select.form-control {
  padding-right: 40px !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' 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;
  cursor: pointer !important;
}

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

/**
 * Tablet (768px - 1024px): 2 campos por linha
 */
@media (max-width: 1024px) and (min-width: 768px) {
  .ds-form-search .col-4 {
    grid-column: span 6; /* 50% */
  }
  
  .ds-form-search .row {
    gap: 32px;
  }
}

/**
 * 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 {
  /* Área do formulário deve ter cor mais clara que o content base */
  /* Hierarquia: Sidebar (--color-bg-primary) < Content (--color-neutral-750) < Form (--color-neutral-650) */
  background: var(--color-neutral-650, #212533) !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;
}