/* CSS para alinhamento de label em formularios
   - Padrao (desktop): label a direita
   - Mobile  (max-width 672px): label a esquerda
*/

.form-group.row > label {
  text-align: right !important;
}

@media (max-width: 672px) {
  .form-group.row > label {
    text-align: left !important;
  }
}

/* Tipografia para mobile: letras maiores */
body {
  font-size: 16px !important;
}
body input,
body select,
body textarea,
body button {
  font-size: 16px !important;
}
body table {
  font-size: 15px !important;
}
body label {
  font-size: 16px !important;
}
@media (max-width: 800px) {
  body {
    font-size: 17px !important;
  }
  body input,
  body select,
  body textarea,
  body button {
    font-size: 17px !important;
  }
  body table {
    font-size: 16px !important;
  }
}

/* Tabelas mais amigaveis em mobile */
body table {
  width: 100% !important;
  border-collapse: collapse !important;
  /*margin-bottom: 1rem !important; */
}
body table td,
body table th {
  padding: 0.5rem !important;
  vertical-align: middle !important;
}
  body table input,
body table textarea {
  width: 100% !important;
  max-width: 100% !important;
}
body form table select { // select pagina em dataGrid ficava muito grande 
  width: 100% !important;
  max-width: 200px !important; // select pagina em dataGrid ficava muito grande
}


@media (max-width: 800px) {
  body table {
    font-size: 14px !important;
  }
  body table td,
  body table th {
    padding: 0.4rem !important;
  }
  body input[type="text"],
  body input[type="password"],
  body input[type="email"],
  body input[type="number"],
  body select,
  body textarea {
    font-size: 16px !important; /* evita zoom em iOS */
  }
}



/*  ABAIXO OS BOTOES DO TITULO DE NAVEGAÇÃO, ANTERIOR E PROXIMO   */
.btn-navigation {
  /* Alinhamento e tamanho */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  
  /* Formato e Bordas */
  background-color: #ffffff; /* Fundo branco */
  border: 2px solid #e0e0e0; /* Cor da borda */
  border-radius: 50%;        /* Deixa o botão redondo */
  
  /* Ícone interno */
  color: #333333;            /* Cor do chevron */
  font-size: 16px;
  
  /* Interação e Animação */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Efeito ao passar o mouse (Hover) */
.btn-navigation:hover {
  border-color: #5cb85c;     /* Muda a borda para o verde do seu 'check' */
  color: #5cb85c;            /* Muda o ícone para verde */
  background-color: #f9f9f9; /* Fundo ligeiramente cinza */
}

/* Efeito ao clicar (Active) */
.btn-navigation:active {
  transform: scale(0.95);    /* Efeito visual de afundar o botão */
}