/* --- Formulários Aprimorados --- */
@import "variables.css"; /* Importa as variáveis globais */

/* --- Container de Formulário --- */
/* Container principal para formulários */
.form-container {
  background-color: var(--neutral-card); /* Fundo branco */
  border-radius: var(--border-radius-md); /* Bordas arredondadas */
  box-shadow: var(--shadow-sm); /* Sombra sutil */
  margin-bottom: var(--spacing-lg);
  overflow: hidden; /* Garante que conteúdo não ultrapasse as bordas arredondadas */
}

/* --- Cabeçalho de Formulário --- */
/* Cabeçalho com título do formulário */
.form-header {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: rgba(25, 118, 210, 0.05); /* Fundo azul claro */
  border-bottom: 1px solid var(--neutral-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.form-header .icon {
  margin-right: var(--spacing-md);
  color: var(--primary-color);
  font-size: var(--font-size-lg);
}

.form-header h2 {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--primary-dark);
  margin: 0;
}


.form-header-status-badges {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.form-header-status-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.form-header-status-item small {
  font-size: var(--font-size-xs);
  color: var(--neutral-text-light);
}

.form-header-status-item .status-badge {
  width: auto;
}

/* --- Etapas do Formulário --- */
/* MELHORIA: Implementação de formulários em etapas para reduzir sobrecarga cognitiva */
.form-steps {
  display: flex; /* Layout horizontal */
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--neutral-border);
  overflow-x: auto; /* Permite rolagem horizontal se necessário */
}

.form-step {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-lg);
  color: var(--neutral-text-light); /* Cor cinza para etapas não ativas */
  cursor: pointer; /* Indica que é clicável */
}

/* Estilo da etapa ativa (atual) */
.form-step.active {
  color: var(--primary-color); /* Cor azul para etapa ativa */
  font-weight: 500;
}

/* Estilo da etapa concluída */
.form-step.completed {
  color: var(--success-color); /* Cor verde para etapa concluída */
}

/* Círculo numerado para cada etapa */
.form-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--neutral-bg); /* Fundo cinza para etapas não ativas */
  margin-right: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Círculo da etapa ativa */
.form-step.active .form-step-number {
  background-color: var(--primary-color);
  color: white;
}

/* Círculo da etapa concluída */
.form-step.completed .form-step-number {
  background-color: var(--success-color);
  color: white;
}

/* Texto da etapa */
.form-step-label {
  font-size: var(--font-size-sm);
}

/* --- Corpo do Formulário --- */
.form-body {
  padding: var(--spacing-lg);
}

/* --- Grupos de Campos --- */
/* MELHORIA: Agrupamento lógico de campos relacionados */
.form-section {
  margin-bottom: var(--spacing-lg);
  animation: fadeIn var(--transition-normal); /* Animação ao trocar de etapa */
}

/* Título da seção */
.form-section-title {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--primary-dark);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--neutral-border); /* Linha divisória */
}

/* --- Container Flexível para Campos --- */
/* MELHORIA: Layout flexível que se adapta a diferentes tamanhos de tela */
.inputBox {
  display: flex;
  flex-wrap: wrap; /* Permite quebra de linha */
  gap: var(--spacing-md); /* Espaçamento uniforme entre campos */
  margin-bottom: var(--spacing-md);
}

/* --- Campo Individual --- */
/* MELHORIA: Campos com larguras adaptáveis baseadas em importância */
.inputBoxData {
  flex: 1 0 calc(33.333% - var(--spacing-md)); /* Por padrão, 3 campos por linha */
  min-width: 250px; /* Largura mínima para evitar campos muito estreitos */
  margin-bottom: var(--spacing-md);
}

/* Campo de largura total */
.inputBoxData.full-width {
  flex: 1 0 100%;
}

/* Campo de meia largura */
.inputBoxData.half-width {
  flex: 1 0 calc(50% - var(--spacing-md));
}

.inputBoxData.one-fourth     { flex: 1 0 calc(25% - var(--spacing-md)); }
.inputBoxData.two-thirds     { flex: 1 0 calc(66.666% - var(--spacing-md)); }
.inputBoxData.one-fifth      { flex: 1 0 calc(20% - var(--spacing-md)); }
.inputBoxData.one-sixth      { flex: 1 0 calc(16.666% - var(--spacing-md)); }
.inputBoxData.two-sixth      { flex: 1 0 calc(41.666% - var(--spacing-md)); }
.inputBoxData.two-fifths     { flex: 1 0 calc(40% - var(--spacing-md)); }
.inputBoxData.three-fourths  { flex: 1 0 calc(75% - var(--spacing-md)); }

/* --- Labels --- */
/* MELHORIA: Labels mais claros e indicação de campos obrigatórios */
.inputBoxData label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--neutral-text);
  font-weight: 500; /* Peso médio para melhor legibilidade */
}

/* Indicador visual de campo obrigatório (*) */
.inputBoxData label.required::after {
  content: "*";
  color: var(--error-color);
  margin-left: var(--spacing-xs);
}

/* --- Campos de Entrada --- */
/* MELHORIA: Estilo consistente para todos os tipos de campos */
.inputBoxData input,
.inputBoxData select,
.inputBoxData textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--neutral-border); /* Borda visível (diferente do original) */
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-md);
  color: var(--neutral-text);
  background-color: white;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Estado de foco */
.inputBoxData input:focus,
.inputBoxData select:focus,
.inputBoxData textarea:focus {
  outline: none; /* Remove contorno padrão do navegador */
  border-color: var(--primary-color); /* Borda azul */
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2); /* Efeito de glow */
}

/* Estado desabilitado */
.inputBoxData input:disabled,
.inputBoxData select:disabled,
.inputBoxData textarea:disabled {
  background-color: var(--neutral-bg); /* Fundo cinza */
  cursor: not-allowed;
  opacity: 0.7;
}

/* Estado de erro */
.inputBoxData input.error,
.inputBoxData select.error,
.inputBoxData textarea.error {
  border-color: var(--error-color); /* Borda vermelha */
}

/* --- Mensagem de Erro --- */
/* MELHORIA: Feedback visual para validação de campos */
.input-error-message {
  color: var(--error-color);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  display: none; /* Oculto por padrão */
}

.input-error-message.visible {
  display: block;
}

/* --- Texto de Ajuda --- */
/* MELHORIA: Assistência contextual para preenchimento */
.input-help-text {
  color: var(--neutral-text-light);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
}

/* --- Seção Expansível --- */
/* MELHORIA: Seções expansíveis para informações secundárias */
.expandable-section {
  margin-bottom: var(--spacing-md);
}

.expandable-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  background-color: var(--neutral-bg);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.expandable-header:hover {
  background-color: rgba(25, 118, 210, 0.05);
}

.expandable-header .icon {
  margin-right: var(--spacing-md);
  transition: transform var(--transition-fast);
}

/* Gira o ícone quando a seção está aberta */
.expandable-header.open .icon {
  transform: rotate(90deg);
}

.expandable-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 500;
}

.expandable-content {
  max-height: 0; /* Inicialmente fechado */
  overflow: hidden;
  transition: max-height var(--transition-normal);
  padding: 0 var(--spacing-md);
}

/* Expande o conteúdo quando aberto */
.expandable-content.open {
  max-height: 1000px; /* Altura máxima arbitrária */
  padding: var(--spacing-md);
}

/* --- Botões de Formulário --- */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--neutral-border);
}

.form-actions-custom {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* --- Responsividade --- */
/* Ajustes para telas menores */
@media (max-width: 768px) {
  .form-body {
    padding: var(--spacing-md); /* Reduz o padding */
  }

  .inputBoxData {
    flex: 1 0 100%; /* Um campo por linha em telas pequenas */
  }

  .form-steps {
    padding: var(--spacing-sm);
  }

  .form-step {
    margin-right: var(--spacing-md);
  }

  .form-actions {
    flex-direction: column; /* Botões empilhados */
  }

  .form-actions button {
    width: 100%; /* Botões ocupam toda a largura */
  }
}



/* --- Estilos Específicos para Seções Dentro do Modal de Contato --- */
/* Garante que as seções dentro do modal sejam ocultadas por padrão,
   exceto a que o JS tornará visível com display: block (estilo inline). */
#modalcontato .form-section {
  /* display: none; */ /* Comentado pois o JS já aplica display: none/block via style inline */
  /* A animação pode ser mantida se desejado */
  animation: fadeIn var(--transition-normal);
}

/* Estilo para os indicadores de passo dentro do modal */
#modalcontato .modal-steps {
    /* Reutiliza estilos de .form-steps, mas pode precisar de ajustes */
    padding-bottom: var(--spacing-lg); /* Adiciona espaço abaixo dos indicadores */
    margin-bottom: var(--spacing-lg); /* Adiciona espaço antes da primeira seção */
}




/* --- Estilos Aprimorados para Checkboxes --- */
.checkbox-modern-container {
  display: flex; /* Alinha o checkbox e o label na mesma linha */
  align-items: center; /* Centraliza verticalmente */
  margin-bottom: var(--spacing-sm); /* Espaçamento inferior, pode ajustar conforme necessário */
}

.checkbox-modern-container input[type="checkbox"] {
  margin-right: var(--spacing-sm); /* Espaço entre o checkbox e o label */
  width: auto; /* Garante que o checkbox não ocupe largura desnecessária */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  position: relative;
  vertical-align: middle; /* Alinha com o texto do label */
}

.checkbox-modern-container input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.checkbox-modern-container input[type="checkbox"]:checked::before {
  content: '\2713'; /* Código para o símbolo de check (✓) */
  display: block;
  text-align: center;
  color: white;
  font-size: 12px; /* Ajustar tamanho do checkmark */
  line-height: 16px; /* Ajustar para centralizar o checkmark */
  position: absolute;
  top: 0px;
  left: 2px; /* Ajuste fino da posição do checkmark */
}

.checkbox-modern-container label {
  margin-bottom: 0; /* Remove a margem inferior padrão do label no inputBoxData */
  font-weight: normal; /* Ajusta o peso da fonte se necessário */
  cursor: pointer;
}

/* Ajuste para o container original .inputBoxData quando usado para checkboxes */
/* Se a classe .checkbox-container for usada diretamente no .inputBoxData */
.inputBoxData.checkbox-container {
    flex-basis: auto; /* Permite que o container do checkbox ocupe apenas o necessário */
    flex-grow: 0; /* Não cresce para preencher espaço extra */
    /* Mantém o display flex do .inputBoxData, mas o .checkbox-modern-container interno fará o alinhamento */
}

/* Para garantir que o label dentro de .inputBoxData.checkbox-container não cause problemas de layout */
.inputBoxData.checkbox-container > label {
    /* Se o label estiver diretamente dentro de .inputBoxData.checkbox-container e não dentro de .checkbox-modern-container */
    /* Pode ser necessário ajustar, mas a ideia é que o label esteja junto ao input dentro de .checkbox-modern-container */
}





/* Estilos específicos para o dropdown dinâmico */
.dynamic-dropdown {
    position: absolute;
    background-color: white;
    border: 1px solid var(--neutral-border, #ccc);
    width: 100%;
    z-index: 9999; /* Valor alto para garantir que fique acima de outros elementos */
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: var(--border-radius-sm, 4px);
}

.dropdown-item-selectable {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-item-selectable:hover {
    background-color: var(--neutral-bg-hover, #f0f0f0);
}

.dropdown-item-disabled {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    color: var(--neutral-text-light, #777);
}

/* Garante que o dropdown fique visível em tabelas */
table .dynamic-dropdown-component {
    position: relative;
}

/* Ajuste para quando o dropdown está dentro de uma célula de tabela */
table td .dynamic-dropdown {
    position: fixed; /* Será posicionado via JS */
}

.dropdown-highlight {
    background-color: #fff7b2;   /* amarelo pastel: boa visibilidade sem ofuscar */
    padding: 0 2px;
    border-radius: 2px;
}