@import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(230, 230, 232);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e6e6e8;
  border-bottom: 3px solid #ababac;
  color: #707070;
  padding: 0px 20px;
  height: 110px;
}

.navbar a {
  text-decoration: none;
  color: #707070;
  font-family: "Roboto Condensed", serif;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.nav-links a {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0px 10px;
  cursor: pointer;
  text-decoration: none;
  color: #707070;
  font-weight: 600;
  font-size: 1.2rem;
}

.nav-links a:hover,
.nav-btn {
  background-color: #e1f32c;
  transition: all 0.2s;
}

.nav-links a:hover,
.nav-btn:hover {
  background-color: #4c444b;
}

.nav-links a:hover,
.nav-btn:hover li {
  color: white;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle .bar {
  background-color: #333;
  height: 3px;
  width: 25px;
  margin: 3px 0;
}

.mainContent{
  margin: 50px;
}

#adminBtn{
  display: none;
}

.titlePage{
  font-size: 3rem;
  color: #453e47;
  font-family: "Kdam Thmor Pro", serif;
}

/* table */

.divSearch{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.buttonSearch{
  width: 100px;
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 10%;
  cursor: pointer;
  background-color: white;
  border: 2px solid #ababac;
  border-radius: 5px;
}

.searchInput{
  padding: 10px;
  border-radius: 5px;
  outline: none;
  border: 1px transparent;
  width:  95%;
  

}

/* Estilo geral da tabela */
.userTable {
  margin-top: 20px;
  width: 100%; /* Faz a tabela ocupar todo o espaço do container */
  border-collapse: collapse;
  background-color: white;

  table-layout: fixed;
   /* Cor de texto padrão para bom contraste com o fundo escuro */
   /* Fundo base da tabela */
  border-radius: 8px; /* Cantos arredondados para um visual moderno */
  overflow: hidden; /* Garante que os cantos das linhas internas não escapem do border-radius */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil para dar profundidade */
}

/* Células do cabeçalho e do corpo */
.userTable th,
.userTable td {
  padding: 1em; /* Aumenta o espaçamento interno para melhor leitura */
  text-align: left; /* Alinhamento padrão à esquerda (start) */
  border-bottom: 1px solid #d3d3d3; /* Linha sutil para separar as linhas */
  vertical-align: middle; /* Alinha o conteúdo verticalmente ao centro */
}


/* Estilo específico para o cabeçalho (thead) */
.userTable thead th {
  /* Cor de fundo um pouco diferente para o cabeçalho */
  font-weight: 600; /* Deixa o texto do cabeçalho mais forte */
  text-transform: uppercase; /* Estilo comum para cabeçalhos de tabela */
  font-size: 0.85em;
  letter-spacing: 0.5px;
}

/* Remove a borda da última linha para um acabamento limpo */
.userTable tbody tr:last-child td {
  border-bottom: none;
}

/* Efeito "Zebra" para legibilidade */
.userTable tbody tr:nth-child(even) {
  background-color: #f8f8f8; /* Cor levemente diferente para linhas pares */
}

/* Efeito de hover para feedback visual ao passar o mouse */


/* --- Estilos dos Botões de Ação --- */

/* Base comum para ambos os botões (Princípio DRY - Don't Repeat Yourself) */
.action-btn {
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 3px; /* Cantos mais suaves */
  color: white;
  cursor: pointer; /* ESSENCIAL: Muda o cursor para indicar que é clicável */
  transition: all 0.2s ease-in-out; /* Transição suave para o efeito de hover */
  font-size: 1.1em; /* Deixa o ícone um pouco maior */
}


/* Cores específicas para cada botão */
.editBtn {
  background-color: #ffa500; /* Laranja */
}

.deleteBtn {
  background-color: #dc3545; /* Vermelho (um tom menos agressivo que 'red') */
}

/* Célula que contém os botões para dar espaçamento */
.actions-cell {
  text-align: center; /* Centraliza os botões na célula */
  display: flex;
  gap: 0.5em; /* Adiciona um espaço entre os botões */
  justify-content: center;
}

.theadRow th{
  text-align: start;
}

.tr{
  width: 100%;
}

#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none; /* Escondido por padrão */
  justify-content: center;
  align-items: center;
}

/* Estado ativo do overlay (quando um modal está aberto) */
#modal-overlay.active {
  display: flex;
}

/* Estilo base para ambos os modais */
.modal {
  background-color: #ffffff;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 500px;
  z-index: 1001;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #453e47;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5em;
}

.close-modal-btn {
  background: none;
  border: none;
  font-size: 2em;
  cursor: pointer;
}

.modal-body p {
  line-height: 1.6;
}

.modal-body label {
  display: block;
  margin: 15px 0 10px 0;
  font-weight: 600;
}

.modal-body select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #666;
    font-size: 1em;
}

.modal-body input{
   width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #666;
    font-size: 1em;
    box-sizing: border-box;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

.modal-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.editUserForm{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.btn-confirm {
  background-color: #28a745; /* Verde */
  color: white;
  font-size: 1rem;
  
}
.btn-confirm:hover {
  filter: brightness(1.2);
}

.btn-delete {
  background-color: #dc3545; /* Vermelho */
  color: white;
}
.btn-delete:hover {
  filter: brightness(1.2);
}

.btn-cancel {
  background-color: #e7e7e7; /* Cinza */
  font-size: 1rem;
  color: black;
}
.btn-cancel:hover {
  filter: brightness(1.2);
}

footer {
  background-color: #453e47;
  color: #fff;
  padding: 20px 10px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.footer-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  margin: 30px 0;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-section h2 {
  margin-bottom: 10px;
}

.footer-section p {
  margin: 5px 0;
}

.footer-section a {
  color: #fff;
  text-decoration: none;
}

.footer-section a:hover {
  cursor: pointer;
  color: #d6ff32;
}

.bi-whatsapp {
  margin-right: 10px;
}