/* ============================================================
   RESET GLOBAL — Remove margens/paddings padrão do navegador
   ============================================================ */

/* 
   * = seletor universal (todos os elementos)
   margin: 0 e padding: 0 = elimina espaçamentos padrão
   box-sizing: border-box = faz com que padding e borda sejam 
   incluídos no tamanho total do elemento (facilita cálculos de layout)
*/
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   ESTILO BASE DO BODY
   ============================================================ */

body {
  /* 
     Fontes do sistema: prioriza fontes nativas de cada SO
     -apple-system = macOS/iOS
     BlinkMacSystemFont = Chrome no macOS
     Segoe UI = Windows
     Roboto = Android/ChromeOS
     sans-serif = fallback genérico
  */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  background: #0f0f1a;     /* Fundo escuro azulado (quase preto) */
  color: #e0e0e0;           /* Cor do texto: cinza claro (não branco puro para não cansar) */
  min-height: 100vh;        /* Mínimo da altura = 100% da viewport (ocupa a tela toda) */
}

/* ============================================================
   CONTAINER — Centraliza e limita a largura do conteúdo
   ============================================================ */

.container {
  max-width: 1400px;   /* Largura máxima de 1400px (telas grandes) */
  margin: 0 auto;      /* Centraliza horizontalmente */
  padding: 20px;       /* Espaçamento interno nas laterais */
}

/* ============================================================
   HEADER — Cabeçalho da página (título + descrição)
   ============================================================ */

header {
  text-align: center;           /* Centraliza o texto */
  margin-bottom: 20px;          /* Espaço abaixo do header */
  padding: 24px 16px;           /* 24px vertical, 16px horizontal */
  
  /* Fundo com gradiente diagonal: de azul escuro para azul médio */
  background: linear-gradient(135deg, #0a0a1a, #1a1a3a);
  
  border-radius: 12px;          /* Cantos arredondados */
  border: 1px solid #2323FF;    /* Borda azul vibrante */
}

header h1 {
  font-size: 1.5em;        /* Tamanho do título: 1.5x do tamanho base */
  color: #FFF224;           /* Amarelo vibrante (destaque) */
  margin-bottom: 6px;       /* Espaço entre título e subtítulo */
}

header p {
  color: #807D52;           /* Amarelo acinzentado (menos destaque) */
  font-size: 0.85em;        /* Fonte menor que o padrão */
}

/* ============================================================
   CARD — Caixas de conteúdo (seções config, notificações, etc.)
   ============================================================ */

.card {
  background: #12122a;         /* Fundo um pouco mais claro que o body */
  border-radius: 12px;         /* Cantos arredondados */
  padding: 20px;               /* Espaçamento interno */
  border: 1px solid #2a2a50;   /* Borda sutil roxa escura */
  margin-bottom: 16px;         /* Espaço entre cards */
}

.card h2 {
  margin-bottom: 14px;     /* Espaço abaixo do título do card */
  color: #FFBD24;          /* Amarelo alaranjado (diferente do amarelo do header) */
  font-size: 1em;          /* Tamanho normal */
}

/* ============================================================
   FORMULÁRIOS — Inputs, textareas e labels
   ============================================================ */

.form-group {
  margin-bottom: 14px;     /* Espaço entre cada grupo de formulário */
}

.form-group label {
  display: block;          /* Label ocupa linha inteira (fica acima do input) */
  margin-bottom: 6px;      /* Espaço entre label e input */
  color: #807D52;          /* Amarelo acinzentado */
  font-size: 0.85em;       /* Fonte menor */
  font-weight: 500;        /* Meio-negrito (sem ser totalmente bold) */
}

/* 
   Inputs de texto e textareas compartilham os mesmos estilos
   O seletor agrupado com vírgula aplica a ambos
*/
.form-group input,
.form-group textarea {
  width: 100%;             /* Ocupa 100% da largura do container */
  padding: 10px 14px;      /* 10px vertical, 14px horizontal */
  background: #0a0a1a;     /* Fundo escuro (quase preto) */
  border: 1px solid #2a2a50;  /* Borda roxa escura */
  border-radius: 8px;      /* Cantos arredondados */
  color: #fff;             /* Texto branco */
  font-size: 16px;         /* 16px = previne zoom automático no iOS */
}

/* 
   Estado de foco: quando o usuário clica/tab no campo
   outline: none = remove o contorno padrão do navegador
   Em vez disso, usamos borda azul + brilho externo (box-shadow)
*/
.form-group input:focus,
.form-group textarea:focus {
  outline: none;                           /* Remove outline padrão */
  border-color: #2323FF;                   /* Borda fica azul */
  box-shadow: 0 0 0 2px rgba(35, 35, 255, 0.2); /* Brilho externo sutil */
}

/* 
   textarea específico: redimensionável apenas na vertical
   font-family: inherit = usa a mesma fonte do body (padrão de textarea é monoespaçada)
*/
.form-group textarea {
  resize: vertical;
  font-family: inherit;
}

/* ============================================================
   BOTÕES — Primário (principal) e Secundário
   ============================================================ */

/* 
   Estilos COMPARTILHADOS entre btn-primary e btn-secondary
   O que for diferente fica em cada um separadamente
*/
.btn-primary,
.btn-secondary {
  padding: 12px 20px;     /* 12px vertical, 20px horizontal */
  border: none;            /* Remove borda padrão */
  border-radius: 8px;      /* Cantos arredondados */
  font-size: 0.95em;       /* Ligeiramente menor que o padrão */
  font-weight: 600;        /* Negrito */
  cursor: pointer;         /* Mãozinha ao passar o mouse */
}

/* BOTÃO PRIMÁRIO — Ação principal (ex: "Iniciar Monitoramento") */
.btn-primary {
  background: linear-gradient(135deg, #2323FF, #1a1acc); /* Gradiente azul */
  color: #fff;             /* Texto branco */
  width: 100%;             /* Largura total (botão ocupa toda a linha) */
}

.btn-primary:hover {
  filter: brightness(1.15); /* Efeito: mais brilhante ao passar o mouse */
}

/* BOTÃO SECUNDÁRIO — Ações secundárias (ex: "Forçar agora", "Testar e-mail") */
.btn-secondary {
  background: #2a2a50;        /* Fundo roxo escuro */
  color: #FFBD24;             /* Texto amarelo */
  padding: 8px 16px;          /* Menor que o primário */
  font-size: 0.85em;          /* Fonte menor */
  border: 1px solid #807D52;  /* Borda amarela acinzentada */
}

.btn-secondary:hover {
  background: #3a3a60;   /* Fundo mais claro ao passar o mouse */
}

.btn-secondary:disabled {
  opacity: 0.4;            /* Fica transparente quando desabilitado */
  cursor: not-allowed;     /* Cursor de "não permitido" */
}

/* ============================================================
   NOTIFICAÇÕES — Checkboxes de som e e-mail
   ============================================================ */

.notif-grid {
  display: flex;
  flex-direction: column;     /* Um toggle abaixo do outro */
  gap: 10px;                  /* Espaço entre os toggles */
  margin-bottom: 14px;        /* Espaço abaixo da grid */
}

.notif-toggle {
  display: flex;              /* Checkbox + label lado a lado */
  align-items: center;        /* Alinhados verticalmente */
  gap: 10px;                  /* Espaço entre checkbox e texto */
  cursor: pointer;            /* Clicável (o label todo) */
  padding: 8px 12px;          /* Espaçamento interno */
  border-radius: 8px;         /* Cantos arredondados */
  background: #0a0a1a;        /* Fundo escuro */
}

.notif-toggle:hover {
  background: #1a1a30;   /* Fundo mais claro ao passar o mouse */
}

/* Checkbox dentro do toggle */
.notif-toggle input[type="checkbox"] {
  width: 20px;            /* Largura do checkbox */
  height: 20px;           /* Altura do checkbox */
  accent-color: #2323FF;  /* Cor do checkbox quando marcado (azul) */
  cursor: pointer;        /* Mãozinha */
  flex-shrink: 0;         /* Não encolhe (mantém o tamanho mesmo em telas pequenas) */
}

.toggle-label {
  font-size: 0.88em;     /* Texto do lado do checkbox */
  color: #ccc;           /* Cinza claro */
  cursor: pointer;       /* Clicável */
}

/* 
   Configuração de e-mail (aparece quando o checkbox de e-mail é marcado)
   Inicialmente oculto via style="display:none" no HTML, exibido pelo JS
*/
.email-config {
  padding: 14px;               /* Espaçamento interno */
  background: #0a0a1a;         /* Fundo escuro */
  border-radius: 8px;          /* Cantos arredondados */
  margin-top: 8px;             /* Espaço acima */
  border: 1px solid #2a2a50;   /* Borda roxa */
}

/* Observação sobre WhatsApp (texto de dica) */
.notif-obs {
  margin-top: 10px;           /* Espaço acima */
  font-size: 0.78em;          /* Fonte bem pequena */
  color: #807D52;             /* Amarelo acinzentado */
  font-style: italic;         /* Itálico (tom de dica/disclaimer) */
}

/* ============================================================
   BARRA DE STATUS — Informações ao vivo (torneio, atletas, timer)
   ============================================================ */

.status-bar {
  display: flex;              /* Itens lado a lado (flexível) */
  flex-wrap: wrap;            /* Quebra linha se não couber */
  align-items: center;        /* Alinhados verticalmente */
  gap: 10px;                  /* Espaço entre itens */
  background: #12122a;        /* Fundo roxo escuro */
  border-radius: 10px;        /* Cantos arredondados */
  padding: 12px 16px;         /* Espaçamento interno */
  border: 1px solid #2a2a50;  /* Borda roxa */
  margin-bottom: 16px;        /* Espaço abaixo da barra */
}

.status-item {
  font-size: 0.82em;    /* Fonte dos itens de status */
}

.status-label {
  color: #807D52;        /* Label "Torneio:", "Status:", etc. */
  margin-right: 4px;     /* Espaço entre label e valor */
}

/* 
   Cores dos status:
   Parado = vermelho, Rodando = amarelo, Erro = laranja
   O JS alterna as classes conforme o estado
*/
.status-parado { color: #f87171; font-weight: 600; }  /* Vermelho */
.status-ativo  { color: #FFF224; font-weight: 600; }  /* Amarelo */
.status-erro   { color: #FFBD24; font-weight: 600; }  /* Laranja */

/* ============================================================
   RESULTADOS — Tabela principal de acompanhamento
   ============================================================ */

.resultados { margin-bottom: 16px; }

.resultados h2 {
  margin-bottom: 12px;
  color: #FFBD24;        /* Amarelo alaranjado */
  font-size: 1em;
}

/* Container da tabela com scroll horizontal (para telas pequenas) */
#tabelaContainer {
  overflow-x: auto;    /* Cria barra de rolagem horizontal se necessário */
}

/* ============================================================
   TABELA — Dados dos atletas
   ============================================================ */

table {
  width: 100%;                 /* Largura total */
  border-collapse: collapse;   /* Remove espaços entre células */
  background: #12122a;         /* Fundo roxo escuro */
  border-radius: 10px;         /* Cantos arredondados */
  overflow: hidden;            /* Esconde bordas do arredondamento */
  border: 1px solid #2a2a50;   /* Borda roxa */
  min-width: 700px;            /* Largura mínima (força scroll em telas pequenas) */
}

/* Cabeçalho da tabela */
thead th {
  background: linear-gradient(135deg, #0a0a2a, #1a1a44); /* Gradiente escuro */
  padding: 10px 12px;        /* Espaçamento interno */
  text-align: left;           /* Alinhado à esquerda */
  font-size: 0.75em;          /* Fonte pequena */
  color: #FFBD24;             /* Amarelo */
  text-transform: uppercase;  /* TUDO MAIÚSCULO */
  letter-spacing: 0.5px;      /* Espaçamento entre letras */
}

/* Células do corpo da tabela */
tbody td {
  padding: 10px 12px;              /* Espaçamento interno */
  border-bottom: 1px solid #1a1a3a; /* Linha separadora entre linhas */
  font-size: 0.85em;
}

/* Efeito hover: destaca a linha ao passar o mouse */
tbody tr:hover {
  background: #1a1a40;
}

/* Última linha da tabela: remove a borda inferior (evita borda dupla) */
tbody tr:last-child td {
  border-bottom: none;
}

/* Classe para estado vazio (ex: "Configure o torneio...") */
.vazio {
  color: #807D52;                  /* Texto acinzentado */
  text-align: center;              /* Centralizado */
  padding: 30px 12px !important;   /* Espaçamento grande com !important para sobrescrever */
}

/* ============================================================
   STATUS TAGS — Badges de status dos atletas
   ============================================================ */

.status-tag {
  display: inline-block;    /* Fica na mesma linha, mas com padding */
  padding: 3px 10px;        /* 3px vertical, 10px horizontal */
  border-radius: 20px;      /* Totalmente arredondado (pill) */
  font-size: 0.76em;        /* Fonte pequena */
  font-weight: 600;         /* Negrito */
}

/* Variações de cores conforme o estado da luta */
.status-aguardando { background: #1a2a1a; color: #FFF224;  border: 1px solid #FFBD24; } /* Verde escuro + amarelo */
.status-proxima   { background: #2a2a0a; color: #FFBD24;   border: 1px solid #FFBD24; } /* Amarelo escuro */
.status-venceu    { background: #0a1a2a; color: #2323FF;   border: 1px solid #2323FF; } /* Azul escuro + azul */
.status-eliminado { background: #2a1a1a; color: #f87171;   border: 1px solid #f87171; } /* Vermelho escuro + vermelho */
.status-final     { background: #1a0a2a; color: #c084fc;   border: 1px solid #c084fc; } /* Roxo escuro + roxo claro */

/* ============================================================
   HISTÓRICO — Resultados anteriores do atleta
   ============================================================ */

.historico-cell {
  font-size: 0.78em;    /* Fonte menor */
  color: #807D52;       /* Texto acinzentado */
}

.historico-vitoria { color: #FFF224; }  /* Vitória = amarelo */
.historico-derrota { color: #f87171; }  /* Derrota = vermelho */

/* ============================================================
   LOG — Painel de eventos/atualizações
   ============================================================ */

.log-section { margin-top: 8px; }

.log-section h3 {
  margin-bottom: 10px;
  color: #807D52;        /* Amarelo acinzentado */
  font-size: 0.9em;
}

/* Container do log com altura máxima e scroll */
#logContainer {
  background: #08081a;         /* Fundo quase preto */
  border-radius: 8px;          /* Cantos arredondados */
  padding: 10px 14px;          /* Espaçamento interno */
  max-height: 180px;           /* Altura máxima (se exceder, aparece scroll) */
  overflow-y: auto;            /* Scroll vertical */
  border: 1px solid #2a2a50;   /* Borda roxa */
  font-size: 0.78em;           /* Fonte pequena */
  font-family: 'Courier New', monospace; /* Fonte monoespaçada (estilo terminal) */
}

/* Cada entrada do log */
.log-entry {
  padding: 3px 0;          /* Espaçamento vertical entre entradas */
  color: #807D52;          /* Cor padrão */
}

/* Hora do log (ex: [14:35:22]) */
.log-entry .log-time {
  color: #555;    /* Cinza escuro (menos destaque que a mensagem) */
}

/* Cores por tipo de mensagem */
.log-entry .log-warn  { color: #FFBD24; }  /* Aviso = amarelo */
.log-entry .log-info  { color: #FFF224; }  /* Info = amarelo claro */
.log-entry .log-error { color: #f87171; }  /* Erro = vermelho */

/* ============================================================
   SCROLLBAR PERSONALIZADA (Chrome/Edge/Safari)
   ============================================================ */

/* Largura da scrollbar */
::-webkit-scrollbar {
  width: 8px;     /* Vertical */
  height: 8px;    /* Horizontal */
}

/* Fundo da scrollbar */
::-webkit-scrollbar-track {
  background: #0a0a1a;   /* Quase preto */
}

/* A parte que desliza (o "polegar") */
::-webkit-scrollbar-thumb {
  background: #2a2a50;   /* Roxo escuro */
  border-radius: 4px;    /* Arredondado */
}

/* ============================================================
   RESPONSIVIDADE — Tablet (max 768px)
   ============================================================ */

@media (max-width: 768px) {
  .container { padding: 12px; }          /* Reduz espaçamento lateral */
  header { padding: 18px 12px; }         /* Reduz padding do header */
  header h1 { font-size: 1.3em; }        /* Fonte um pouco menor */
  .card { padding: 16px; }               /* Reduz padding dos cards */
  table { min-width: 600px; }            /* Reduz largura mínima da tabela */
  thead th, tbody td {
    padding: 8px 10px;                   /* Reduz padding das células */
    font-size: 0.75em;                   /* Reduz fonte */
  }
}

/* ============================================================
   RESPONSIVIDADE — Mobile (max 480px)
   ============================================================ */

@media (max-width: 480px) {
  .container { padding: 8px; }                             /* Padding mínimo */
  
  header {
    padding: 14px 10px;                                    /* Padding compacto */
    margin-bottom: 12px;                                   /* Espaço menor */
    border-radius: 8px;                                    /* Cantos menos arredondados */
  }
  header h1 { font-size: 1.1em; }                          /* Título menor */
  header p { font-size: 0.75em; }                          /* Subtítulo menor */
  
  .card {
    padding: 12px;                                         /* Padding compacto */
    margin-bottom: 10px;                                   /* Espaço menor */
    border-radius: 8px;                                    /* Cantos menos arredondados */
  }
  .card h2 { font-size: 0.9em; }                           /* Título do card menor */
  
  .form-group input,
  .form-group textarea {
    font-size: 16px;    /* 16px no mobile = NUNCA mudar (evita zoom no iOS) */
  }
  
  /* Barra de status: de horizontal vira vertical */
  .status-bar {
    flex-direction: column;    /* Itens empilhados */
    align-items: stretch;      /* Cada item ocupa a largura toda */
    gap: 6px;                  /* Espaço menor entre itens */
    padding: 10px 12px;        /* Padding menor */
  }
  .status-item {
    display: flex;                      /* Label de um lado, valor do outro */
    justify-content: space-between;      /* Espalha nas pontas */
    font-size: 0.78em;                  /* Fonte menor */
  }
  
  /* Botão secundário ocupa a linha toda no mobile */
  .btn-secondary {
    width: 100%;
    text-align: center;
  }
  
  table { min-width: 550px; }           /* Tabela um pouco menor */
  thead th {
    padding: 8px 8px;                   /* Padding mínimo */
    font-size: 0.7em;                   /* Fonte bem pequena */
  }
  tbody td {
    padding: 8px 8px;                   /* Padding mínimo */
    font-size: 0.72em;                  /* Fonte bem pequena */
  }
  
  .status-tag {
    font-size: 0.7em;                   /* Badge menor */
    padding: 2px 8px;                   /* Padding menor */
  }
  
  #logContainer {
    font-size: 0.7em;                   /* Log com fonte menor */
    padding: 8px 10px;                  /* Padding compacto */
    max-height: 150px;                  /* Altura máxima menor */
  }
}