/* Variáveis globais do CSS, ":" > indica pseudo-classe, root é o elemento raiz do (<html>), tudo definido aqui é global */
:root {
  --ui: 42px; /* Variável CSS usada para tamanho padrão do botões*/
  --icon: 22px; /* Tamanho padrão dos ícones (SVG) */
  --radius: 50%; /* Raio da borda > 50% = cículo perfeito */
  --bg: #efefef; /* Cor de fundo geral (background) */
  --fg: #222; /* Cor do texto (foreground) */
  --card: #fff; /* Cor dos "cards" (tabela, inputs) */
  --accent: #222; /* Cor principal dos botões, header (cabeçalho) da tabela */
  --accent-hover: #333; /* Cor quando passa o mouse (houver) */
}
/* Tema escuro (dark mode) */
body.dark {
  --bg: #111;
  --fg: #fff;
  --card: #1c1c1c;
  --accent: #0a4dff;
  --accent-hover: #1c62ff;
}
/* Estilo geral do corpo - Se aplica ao site inteiro */
body {
  margin: 0; /* Remove a margem padrão do navegador */
  padding: 40px; /* Espaçamento interno do site */
  background: var(--bg); /* Usa a variável de fundo */
  color: var(--fg); /* Usa a variável da cor do texto*/
  font-family: "Archivo", sans-serif; /* Fonte importada do Google Fonts */
  transition: 0.25s ease; /* Suaviza mudanças, como a do dark mode), (ease) > modo de transição que suaviza início e fim */
}
#content {
  padding-right: calc(var(--ui) + 32px);
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
}
/* Cabeçalho (header) */
#header {
  /* Seleciona <div id="header"> */
  margin-bottom: 25px;
  display: flex; /* Ativa flexbox - alinha os elementos, centraliza e distribui espaço automaticamente*/
  justify-content: space-between; /* Elementoss vão para extremos opostos */
  align-items: center; /* Alinha verticalmente */
}
/* Título */
#title {
  font-size: 32px; /* Tamanho do texto - grande */
  font-weight: 600; /* Semi-negrito */
  /* Ícone e texto alinhados com espaço */
  display: flex;
  align-items: center;
  gap: 12px; /* Cria expaço entre os itens, nesse caso, é a distância entre o ícone ⚿ e o texto "Projeto Engine..." */
}
#title .icon {
  font-size: 36px; /* Aumenta o tamanho do ícone ⚿ */
}
/* Área de busca (lupa) */
#search-area {
  position: fixed; /* Fica fixo na tela */
  /* Posição no canto superior direito */
  top: 40px;
  right: 32px;
  /* Alinha input + botão */
  display: flex;
  align-items: center;
  z-index: 1000; /* Garante que fique acima de tudo */
}
/* Botão da lupa */
#search-btn {
  /* Busca a variável do tamanho padrão dos botões */
  width: var(--ui);
  height: var(--ui);
  border-radius: var(--radius); /* Buscar a variável do cículo */
  background: var(--accent); /* Cor principal dos botões */
  /* Centraliza o SVG */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* Mãozinha ao passar o mouse */
  transition: 0.25s; /* Animação suave */
}
/* Define tamanho e cor do ícone */
#search-btn svg {
  width: var(--icon);
  height: var(--icon);
  fill: white;
}
/*  Campo de busca (input escondido) */
#buscar {
  /* Fica "atrás" do botão */
  position: absolute; /* O #buscar se posiciona em relação ao #search-area, não à tela */
  right: 100%; /* Coloca o input 42px + 12px à esquerda do botão*/
  margin-right: 12px;
  /* Começa invisível */
  width: 0px;
  opacity: 0;
  /* Alinha texto verticalmente */
  height: var(--ui);
  line-height: var(--ui);
  /* Remove borda padrão */
  border-radius: 22px;
  border: none;
  padding: 0 14px; /* Espaço interno lateral */
  /* Cores adaptáveis ao tema */
  background: var(--card);
  color: var(--fg);
  /* Estilo visual */
  font-style: italic;
  font-size: 15px;
  /* animação ao aparecer */
  transition: 0.25s ease;
  z-index: 2; /* Faz o elemento B ficar na frente do elemento A */
}
/* Remove a borda preta do campo de busca */
#buscar:focus {
  outline: none;
  box-shadow: none;
}
/* Quando passa o mouse ou foca no input, o input aparece animado */
#search-area:hover #buscar,
#search-area:focus-within #buscar {
  width: 121px;
  opacity: 1;
}
/* Estilo de texto fantasma */
#buscar::placeholder {
  /* Texto leve e discreto */
  font-family: "Archivo", sans-serif;
  font-weight: 200;
  color: #00000040;
  font-style: normal;
}
/* Botões verticais */
#vertical-buttons {
  /* Posição no canto inferior direito */
  position: fixed;
  bottom: 32px;
  right: 32px;
  /* Empilhados verticalmente */
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Classe Reutilizável */
.vbtn {
  /* Botão Circular */
  width: var(--ui);
  height: var(--ui);
  border-radius: 50%;
  background: var(--accent); /* Cor principal dos botões */
  /* Centraliza o ícone */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Interatividade entre usuário e botão */
  cursor: pointer;
  transition: 0.25s;
}
/* O seletor - Seleciona todo o <svg> que esteja dentro de um elemento com classe vbtn */
.vbtn svg {
  width: var(--icon); /* Largura do SVG */
  height: var(--icon); /* Altura do SVG */
  fill: white; /* Define a cor do SVG, funciona pois SVG está inline no HTML - colore os elementos internos (<path>) */
}
.vbtn:hover {
  /* Efeito de zoom ao passar o mouse */
  transform: scale(1.12);
  background: var(--accent-hover);
}
/* Tabela Centralizada */
#table-wrapper {
  margin-top: 20px;
}
/* Seleciona todas tabelas dentro do wrapper e da página */
table {
  width: 100%; /* A tabela ocupa 100% da largura do wrapper */
  border-radius: 12px; /* Arredonda os cantos da tabela */
  border-collapse: collapse; /* Une as bordas das células. (Sem isso, cada <td> teria borda separada) */
  overflow: hidden; /* Corta qualquer conteúdo que ultrapasse as bordas. Necessário para o border-radius funcionar direito */
  background: var(--card); /* Define a cor de fundo da tabela usando variável CSS */
}
/* Seleciona todas as células de cabeçalho da tabela (<th>) */
th {
  background: var(--accent); /* Cor de fundo para o cabeçalho */
  color: #fff; /* Texto branco */
  padding: 14px; /* Espaço interno entre as células para melhorar a leitura */
  font-size: 18px; /* Texto maior para o cabeçalho */
  letter-spacing: 0.6px; /* Espaçamento entre letras */
  text-align: center; /* Centraliza o texto dentro da célula */
}
/* Seleciona as células de dados da tabela (<td>) */
td {
  padding: 12px 18px; /* 12px > cima e baixo, 18px > esquerda e direita */
  text-align: center; /* Centraliza o conteúdo dos dados */
  border-bottom: 1px solid #00000015; /* Cria uma leve linha separadora entre os registros */
}
/* Efeito visual ao selecionar a linha da tabela quando o mouse passa por cima */
tr:hover {
  background: #00000010; /* Fundo suave ao passar o mouse */
}