/* ==========================================================================
   CSS MATERIAL DESIGN (APENAS FORMULÁRIOS - SEM BOTÕES)
   ========================================================================== */

/* 1. CONTAINER DO GRUPO */
.form-group {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Remove sujeira antiga se houver */
.form-group .bar { display: none; }


/* 2. ESTILO DOS CAMPOS (INPUT, SELECT, TEXTAREA)
   Aplica o visual Material, Borda e Altura correta apenas nos campos de dados. */
.form-group input,
.form-group select,
.form-group textarea,
.form-group input.form-control,
.form-group select.form-control,
.form-group textarea.form-control {
  display: block;
  width: 100%;
  background: transparent;
  
  /* Dimensões */
  padding: 10px 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  
  /* Altura Mínima para alinhar Selects e Inputs de Data */
  min-height: 45px;      
  
  /* Borda Cinza Fixa (1px) */
  border: 1px solid #999 !important; 
  border-radius: 4px;
  
  /* Reseta estilos do Bootstrap */
  box-shadow: none !important;
  height: auto !important; 
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Reset específico para Selects aparecerem a seta corretamente */
.form-group select,
.form-group select.form-control {
  appearance: auto !important; 
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  padding-right: 25px;
}

/* Ajuste específico para área de texto */
.form-group textarea,
.form-group textarea.form-control {
  resize: vertical;
  min-height: 100px;
}


/* 3. ESTILO DA LABEL (FIXA NO TOPO - CORTANDO A LINHA) */
.form-group .control-label {
  position: absolute;
  top: -10px;            /* Sempre acima da linha */
  left: 10px;
  
  font-size: 0.85rem;    
  font-weight: bold;
  color: #999;           
  
  background-color: #fff; /* Fundo branco para apagar a linha da borda */
  padding: 0 5px;        
  z-index: 10;
  pointer-events: none;  
}


/* 4. ESTADO DE FOCO (QUANDO CLICA) */
/* Muda a borda do input para Azul */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group input.form-control:focus,
.form-group select.form-control:focus,
.form-group textarea.form-control:focus {
  outline: none !important;
  border: 1px solid #337ab7 !important; 
  /* Sombra sólida azul de 1px para destacar */
  box-shadow: 0 0 0 1px #337ab7 !important; 
}

/* Muda a cor da label para azul */
.form-group input:focus ~ .control-label,
.form-group select:focus ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group input.form-control:focus ~ .control-label,
.form-group select.form-control:focus ~ .control-label,
.form-group textarea.form-control:focus ~ .control-label {
  color: #337ab7;
}


/* 5. CORREÇÃO DO FUNDO AZUL (AUTOCOMPLETE DO CHROME) 
   Garante que o fundo continue branco mesmo com preenchimento automático */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover, 
.form-group input:-webkit-autofill:focus, 
.form-group textarea:-webkit-autofill,
.form-group textarea:-webkit-autofill:hover,
.form-group textarea:-webkit-autofill:focus,
.form-group select:-webkit-autofill,
.form-group select:-webkit-autofill:hover,
.form-group select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   SISTEMA DE INPUTS COM ÍCONES (GENÉRICO)
   Use: <div class="input-icon-group left"> ou <div class="input-icon-group right">
   ========================================================================== */

/* 1. Wrapper que segura o input e o ícone */
.input-icon-group {
    position: relative;
    width: 100%;
}

/* 2. Estilo Genérico do Ícone (funciona para .fa, .glyphicon, etc.) */
.input-icon-group i,
.input-icon-group .fa,
.input-icon-group .glyphicon,
.input-icon-group span.icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente exato */
    z-index: 5;
    color: #999;
    pointer-events: none; /* O clique passa pelo ícone e vai pro input */
    text-align: center;
    width: 40px; /* Largura fixa para alinhar o centro */
    font-size: 1rem;
    transition: color 0.2s ease;
}

/* 3. VARIANTE: ÍCONE NA ESQUERDA (LEFT) */
.input-icon-group.left i,
.input-icon-group.left .fa {
    left: 0;
}
/* Empurra o texto do input para a direita */
.input-icon-group.left input,
.input-icon-group.left select {
    padding-left: 40px !important; 
}

/* 4. VARIANTE: ÍCONE NA DIREITA (RIGHT) */
.input-icon-group.right i,
.input-icon-group.right .fa {
    right: 0;
}
/* Empurra o texto do input para a esquerda */
.input-icon-group.right input,
.input-icon-group.right select {
    padding-right: 40px !important; 
}

/* 5. EFEITO DE FOCO INTELIGENTE
   Quando o input focar, pinta o ícone vizinho de azul também */
.input-icon-group input:focus + i,
.input-icon-group input:focus ~ i, 
/* Inverte a seleção caso o ícone venha antes no HTML */
.input-icon-group:focus-within i {
    color: #337ab7;
}

/* ==========================================================================
   ESTILO DE ERRO DO WEB2PY (MATERIAL DESIGN)
   ========================================================================== */

/* 1. ESTILO DO TEXTO DE ERRO
   O Web2py gera uma <div class="error"> automaticamente abaixo do input */
.form-group .error {
    display: block;
    color: #dc3545;        /* Vermelho padrão de erro */
    font-size: 0.75rem;    /* Fonte pequena */
    font-weight: 500;
    margin-top: 5px;       /* Afastamento do input */
    padding-left: 12px;    /* Alinhado com o texto interno do input */
    line-height: 1.2;
    
    /* Animação suave de entrada */
    animation: fadeIn 0.3s ease-in-out;
}

/* 2. MUDA A COR DO INPUT/TEXTAREA PARA VERMELHO QUANDO TIVER ERRO
   Usa o seletor :has() para detectar se existe uma div .error dentro do grupo */
.form-group:has(.error) input,
.form-group:has(.error) select,
.form-group:has(.error) textarea,
.form-group:has(.error) input.form-control,
.form-group:has(.error) select.form-control,
.form-group:has(.error) textarea.form-control {
    border-color: #dc3545 !important;
    
    /* Opcional: Sombra vermelha para destacar ainda mais */
    box-shadow: 0 0 0 1px #dc3545 !important; 
}

/* 3. MUDA A COR DA LABEL PARA VERMELHO TAMBÉM */
.form-group:has(.error) .control-label {
    color: #dc3545 !important;
}

/* 4. ANIMAÇÃO SIMPLES (FADE IN) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}