/* ====== ESTILO DA TABELA ====== */

table {
  width: 60%; /* A tabela ocupa 60% da largura da tela */
  margin: 20px auto; /* Coloquei margem em cima/baixo e auto pros lados para centraliza a tabela na página. */
  border-collapse: collapse; /* Junta as bordas */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra bem levinha atrás da tabela, dá um ar 3D */
  background: white;
  border-radius: 8px; /* Bordas levemente arredondadas na tabela */
  overflow: hidden; /* Isso faz o arrendodado funcionar certinho */
}

th, td {
  padding: 12px 15px; /* Coloquei espaço interno (tipo "almofada") dentro das células, assim o texto não fica colado na borda */
  border: 1px solid #ddd; /* Bordas fininhas cinza claro, separando os itens */
}
 
 th {
  background-color: #0077b6; /* azul forte no cabeçalho */
  color: white;
  font-size: 1.2em; /* Letras do cabeçalho ficaram um pouquinho maiores */
}

tr:nth-child(even) {
  background-color: #caf0f8; /* azul clarinho nas linhas pares, chamado de efeito zebra */
}

tr:hover {
  background-color: #90e0ef; /* azul claro ao passar o mouse */
}

/* ====== DARK MODE TABELA ====== */
body.dark-mode table {
  background: #1e1e1e; /* fundo escuro da tabela */
  box-shadow: 0 0 10px rgba(225, 255, 255, 0.1); /* sombra clara */
  border-radius: 8px;
}

body.dark-mode th,
body.dark-mode td {
  border: 1px solid #444; /* bordas mais escuras */
  color: #f1f1f1; /* texto claro */
}

body.dark-mode th {
  background-color: #333; /* cabeçalho escuro */
  color: #fff; /* texto branco */
}

body.dark-mode tr:nth-child(even) {
  background-color: #2a2a2a; /* destaque ao passar o mouse */
}

body.dark-mode tr:hover {
  background-color: #444; /* destaque ao passar o mouse */
}