/* ─────────────────────────────────────────────────────────────────────────────
   Painel do administrador e tela de login.

   O jogo é cinematográfico: brilho laranja, relevo, fundo em movimento. O painel
   é o oposto de propósito. Quem entra aqui vem ler número, e número se lê melhor
   em superfície calma, com hierarquia feita de tipografia e fio de cabelo em vez
   de cor. É por isso que esta folha declara as próprias variáveis de papel e
   tinta em vez de reaproveitar as do jogo: as duas telas moram no mesmo site,
   mas não deviam parecer a mesma coisa.

   Layout de dashboard: barra lateral fixa à esquerda, conteúdo à direita. No
   celular a lateral vira uma faixa rolável no topo, que é o que cabe no polegar.
   ────────────────────────────────────────────────────────────────────────── */

.painel {
  /* ── Papel e tinta ─────────────────────────────────────────────────────── */
  /* O papel escuro é o mesmo #14101a com que as cores das séries do gráfico
     foram validadas no verificador de daltonismo. Mudar este valor invalida
     aquela conferência. */
  --papel: #14101a;
  --papel-fundo: #0a070d;
  --papel-2: #191424;
  --fio: #2a2338;
  --fio-forte: #3b3150;
  --tinta: #f1eef7;
  --tinta-suave: #a9a1bb;
  --tinta-fraca: #746b8a;
  --acento: var(--marca-laranja);

  /* Séries do gráfico e cromo do eixo. Os dois hexadecimais passaram nos seis
     testes do verificador de paleta contra esta superfície. */
  --serie-a: #e8690f;
  --serie-b: #3b82f6;
  --grade: #241d31;
  --eixo: #3b3150;

  --lateral: 224px;

  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  grid-template-areas:
    'lateral topo'
    'lateral corpo';
  column-gap: var(--e5);
  row-gap: var(--e4);
  align-items: start;
  margin: var(--e4) 0 var(--e7);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/*
 * O painel APAGA o cenário do jogo, em vez de cobri-lo.
 *
 * A primeira tentativa foi um `::before` fixo por cima de tudo. Não funciona:
 * `.tela` tem uma animação de entrada com `transform`, e um ancestral
 * transformado vira o bloco que contém os `fixed` de dentro dele, então a
 * camada ficava presa no tamanho do painel. Desligar as três camadas de cenário
 * direto no `body` é mais simples e não depende de empilhamento.
 *
 * `:has` não existe em navegador antigo. Lá o painel só aparece sobre o fundo
 * do jogo, que é exatamente o comportamento de antes desta folha.
 */
body:has(.painel),
body:has(.login) {
  background: #0a070d;
}

/*
 * `!important` aqui é deliberado, e não preguiça.
 *
 * O tema claro do site reforça as camadas de cenário com seletores mais
 * específicos (`:root[data-tema='claro'] body::before`). Sem a marca, o painel
 * ficava calmo no escuro e voltava a ter o degradê do jogo no claro. A
 * alternativa seria uma corrida de especificidade que a próxima regra de tema
 * venceria de novo.
 */
body:has(.painel)::before,
body:has(.painel)::after,
body:has(.login)::before,
body:has(.login)::after,
body:has(.painel) .grao,
body:has(.login) .grao {
  opacity: 0 !important;
}

/* Rodapé de marketing embaixo de um dashboard não faz sentido. */
body:has(.painel) .rodape,
body:has(.login) .rodape {
  display: none;
}

/* ─── Cabeçalho ───────────────────────────────────────────────────────────── */

.painel__topo {
  grid-area: topo;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--fio);
}

.painel__titulo {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.painel__quem {
  margin-left: auto;
  font-size: var(--texto-sm);
  color: var(--tinta-fraca);
}

.painel__sair {
  padding: var(--e2) var(--e4);
  border-radius: var(--r-sm);
  border: 1px solid var(--fio-forte);
  background: none;
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  font-weight: 500;
  transition:
    color var(--rapido),
    border-color var(--rapido),
    background var(--rapido);
}

@media (hover: hover) {
  .painel__sair:hover {
    color: var(--tinta);
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 12%, transparent);
  }
}

.painel__sair:active {
  background: color-mix(in srgb, var(--acento) 18%, transparent);
}

/* ─── Barra lateral ───────────────────────────────────────────────────────── */

.painel__abas {
  grid-area: lateral;
  position: sticky;
  top: calc(var(--altura-topo) + var(--e4));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e3);
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  background: var(--papel);
}

.painel__aba {
  position: relative;
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--tinta-suave);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: 500;
  text-align: left;
  transition:
    color var(--rapido),
    background var(--rapido);
}

/*
 * O item atual ganha um filete e um fundo de meio-tom, e não uma pílula
 * laranja cheia. Numa tela em que o laranja também é uma série do gráfico,
 * preencher o menu com ele faria a cor perder o significado que carrega ali.
 */
.painel__aba::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 0;
  border-radius: var(--r-full);
  background: var(--acento);
  transition: height var(--normal);
}

.painel__aba[aria-current='page'] {
  color: var(--tinta);
  background: var(--papel-2);
  font-weight: 600;
}

.painel__aba[aria-current='page']::before {
  height: 60%;
}

@media (hover: hover) {
  .painel__aba:hover {
    color: var(--tinta);
    background: var(--papel-2);
  }
}

.painel__aba:active {
  background: var(--papel-2);
}

/* ─── Seções ──────────────────────────────────────────────────────────────── */

.painel__secao {
  grid-area: corpo;
  display: grid;
  gap: var(--e5);
  align-content: start;
  min-width: 0;
}

/* ─── Cartões de métrica ──────────────────────────────────────────────────── */

.painel__cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e3);
}

.metrica {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--e4);
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  background: var(--papel);
}

/* Número em fonte de corpo, não na display: a Archivo Black tem peso de cartaz
   e transforma um relatório em pôster. O tamanho já dá a hierarquia. */
.metrica__valor {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.metrica__rotulo {
  font-size: var(--texto-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.metrica__nota {
  margin-top: var(--e1);
  font-size: var(--texto-xs);
  color: var(--tinta-fraca);
}

/* ─── Gráfico ─────────────────────────────────────────────────────────────── */

.painel__grafico {
  position: relative; /* âncora da dica, que é posicionada em pixel */
  padding: var(--e5) var(--e4) var(--e4);
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  background: var(--papel);
  min-width: 0;
}

.grafico__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--fonte-corpo);
  font-size: 11px;
  fill: var(--tinta-fraca);
}

.grafico__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  justify-content: center;
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
}

.grafico__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
}

.grafico__amostra {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 3px;
  background: var(--amostra-cor, var(--serie-a));
}

/* A dica recebe posição e grade por estilo em linha, no próprio módulo do
   gráfico. Aqui vai só a aparência. */
.grafico__dica {
  z-index: 2;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r-sm);
  background: var(--papel-2);
  box-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.9);
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  white-space: nowrap;
}

.grafico__dicaRotulo {
  color: var(--tinta);
  padding-bottom: 2px;
}

.grafico__dicaValor {
  color: var(--tinta);
}

/* ─── Botões de período ───────────────────────────────────────────────────── */

.painel__periodos {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--fio);
  border-radius: var(--r-sm);
  background: var(--papel);
}

.painel__periodo {
  padding: var(--e2) var(--e4);
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--tinta-suave);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: 500;
  transition:
    color var(--rapido),
    background var(--rapido);
}

.painel__periodo[aria-current='page'] {
  color: var(--tinta);
  background: var(--papel-2);
  box-shadow: inset 0 0 0 1px var(--fio-forte);
}

@media (hover: hover) {
  .painel__periodo:hover {
    color: var(--tinta);
  }
}

.painel__periodo:active {
  background: var(--papel-2);
}

/* ─── Tabela ──────────────────────────────────────────────────────────────── */

/*
 * A rolagem horizontal acontece AQUI DENTRO. Tabela larga solta na página
 * empurra o `body` e cria rolagem lateral no site inteiro, no celular.
 */
.painel__tabela {
  overflow-x: auto;
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  background: var(--papel);
}

.painel__tabela table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.painel__tabela caption {
  padding: var(--e4) var(--e4) var(--e2);
  text-align: left;
  font-size: var(--texto-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.painel__tabela th,
.painel__tabela td {
  padding: var(--e3) var(--e4);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--fio);
}

.painel__tabela th:first-child,
.painel__tabela td:first-child {
  text-align: left;
}

.painel__tabela thead th {
  font-size: var(--texto-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.painel__tabela tbody tr:last-child th,
.painel__tabela tbody tr:last-child td {
  border-bottom: 0;
}

.painel__tabela tbody td {
  color: var(--tinta-suave);
}

.painel__tabela tbody td:first-child,
.painel__tabela tbody th {
  color: var(--tinta);
  font-weight: 500;
}

/* ─── Filtros da lista de jogadores ───────────────────────────────────────── */

.painel__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
}

.painel__busca,
.painel__ordem {
  padding: var(--e3) var(--e4);
  border: 1px solid var(--fio);
  border-radius: var(--r-sm);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  transition: border-color var(--rapido);
}

.painel__busca {
  flex: 1 1 240px;
  min-width: 0;
}

.painel__busca::placeholder {
  color: var(--tinta-fraca);
}

.painel__busca:focus-visible,
.painel__ordem:focus-visible {
  outline: none;
  border-color: var(--acento);
}

.painel__ordem {
  cursor: pointer;
}

/* ─── Lista de jogadores ──────────────────────────────────────────────────── */

.jogadores {
  display: grid;
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  background: var(--papel);
  overflow: hidden;
}

.jogadores__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  border-bottom: 1px solid var(--fio);
  transition: background var(--rapido);
}

.jogadores__linha:last-child {
  border-bottom: 0;
}

@media (hover: hover) {
  .jogadores__linha:hover {
    background: var(--papel-2);
  }
}

.jogadores__quem {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jogadores__nome {
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O número em fonte monoespaçada: alinha na vertical quando a lista tem muitos,
   e deixa claro que é dado para copiar, não texto. */
.jogadores__zap {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
}

.jogadores__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e4);
  font-size: var(--texto-xs);
  color: var(--tinta-fraca);
}

.jogadores__numeros strong {
  color: var(--tinta-suave);
  font-weight: 600;
}

.jogadores__acoes {
  display: flex;
  gap: var(--e2);
}

.jogadores__acao {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r-sm);
  background: none;
  color: var(--tinta-suave);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-xs);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--rapido),
    border-color var(--rapido),
    background var(--rapido);
}

@media (hover: hover) {
  .jogadores__acao:hover {
    color: var(--tinta);
    border-color: var(--fio-forte);
    background: var(--papel-2);
  }
}

.jogadores__acao:active {
  background: var(--papel-2);
}

/* ─── Paginação ───────────────────────────────────────────────────────────── */

.painel__paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e4);
  font-size: var(--texto-sm);
  color: var(--tinta-fraca);
}

.painel__paginacao button {
  padding: var(--e2) var(--e4);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r-sm);
  background: none;
  color: var(--tinta-suave);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  transition:
    color var(--rapido),
    border-color var(--rapido);
}

.painel__paginacao button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (hover: hover) {
  .painel__paginacao button:not(:disabled):hover {
    color: var(--tinta);
    border-color: var(--acento);
  }
}

/* ─── Estados ─────────────────────────────────────────────────────────────── */

.painel__nota {
  font-size: var(--texto-xs);
  color: var(--tinta-fraca);
  max-width: 70ch;
}

.painel__vazio,
.painel__carregando {
  padding: var(--e7) var(--e4);
  text-align: center;
  color: var(--tinta-fraca);
  font-size: var(--texto-sm);
}

.painel__carregando::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto var(--e3);
  border-radius: 50%;
  border: 2px solid var(--fio-forte);
  border-top-color: var(--acento);
  animation: girar 900ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .painel__carregando::before {
    animation-duration: 3s;
  }
}

/* ─── Login ───────────────────────────────────────────────────────────────── */

.login {
  --papel: #14101a;
  --papel-fundo: #0a070d;
  --fio: #2a2338;
  --fio-forte: #3b3150;
  --tinta: #f1eef7;
  --tinta-suave: #a9a1bb;
  --tinta-fraca: #746b8a;

  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--altura-topo) - var(--e8));
  padding: var(--e6) 0;
}

.login__cartao {
  width: min(400px, 100%);
  display: grid;
  gap: var(--e4);
  padding: var(--e6);
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  background: var(--papel);
}

.login__marca {
  width: 132px;
  height: auto;
  margin: 0 auto var(--e2);
}

.login__titulo {
  margin-bottom: var(--e2);
  text-align: center;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--tinta);
}

.login__campo {
  display: grid;
  gap: var(--e2);
  position: relative;
}

.login__rotulo {
  font-size: var(--texto-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.login__entrada {
  width: 100%;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r-sm);
  background: var(--papel-fundo);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  transition: border-color var(--rapido);
}

.login__entrada::placeholder {
  color: var(--tinta-fraca);
}

.login__entrada:focus-visible {
  outline: none;
  border-color: var(--acento, var(--marca-laranja));
}

/* O olho fica dentro do campo, então o texto precisa de espaço à direita para
   não passar por baixo dele. */
.login__campo:has(.login__olho) .login__entrada {
  padding-right: var(--e7);
}

.login__olho {
  position: absolute;
  right: var(--e2);
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--tinta-fraca);
  transition: color var(--rapido);
}

.login__olho svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .login__olho:hover {
    color: var(--tinta);
  }
}

/* A caixa de erro fica no DOM desde o começo, para o leitor de tela anunciar a
   mensagem quando ela chegar. Vazia, ela não pode aparecer como uma barra
   vermelha em branco. */
.login__erro:empty {
  display: none;
}

.login__erro {
  padding: var(--e3) var(--e4);
  border: 1px solid color-mix(in srgb, var(--erro) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--erro) 12%, transparent);
  color: #ffc7d1;
  font-size: var(--texto-sm);
}

.login__rodape {
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--tinta-fraca);
}

/* ─── Celular ─────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /*
   * A lateral vira uma faixa no topo. Um menu vertical de 224px numa tela de
   * 375px comeria mais da metade da largura útil.
   */
  .painel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'topo'
      'lateral'
      'corpo';
    column-gap: 0;
  }

  .painel__abas {
    position: static;
    flex-direction: row;
    gap: var(--e1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: var(--e2);
  }

  .painel__aba {
    flex: 0 0 auto;
    padding: var(--e2) var(--e4);
    text-align: center;
  }

  /* Deitada, a marca do item atual vira um filete embaixo. */
  .painel__aba::before {
    left: 50%;
    top: auto;
    bottom: 0;
    translate: -50% 0;
    width: 0;
    height: 3px;
    transition: width var(--normal);
  }

  .painel__aba[aria-current='page']::before {
    width: 40%;
    height: 3px;
  }
}

@media (max-width: 640px) {
  .painel__cartoes {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--e2);
  }

  .metrica {
    padding: var(--e3);
  }

  .metrica__valor {
    font-size: var(--texto-xl);
  }

  .painel__grafico {
    padding: var(--e4) var(--e2) var(--e3);
  }

  /*
   * A linha de jogador vira cartão empilhado. Em três colunas, o nome fica com
   * uns 80px e some atrás das reticências.
   */
  .jogadores__linha {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e3);
  }

  .jogadores__acoes {
    justify-content: flex-start;
  }

  .jogadores__acao {
    flex: 1 1 auto;
    justify-content: center;
    padding: var(--e3);
  }

  .painel__periodos {
    width: 100%;
    justify-content: space-between;
  }

  .painel__periodo {
    flex: 1 1 auto;
    padding: var(--e2);
    text-align: center;
  }
}

/* ─── Tema claro ──────────────────────────────────────────────────────────── */

/*
 * Papel de verdade: branco puro, e não o creme do resto do site. Foi contra
 * este branco que as cores das séries passaram no verificador, e num relatório
 * o fundo neutro é o que deixa o número em primeiro plano.
 */
:root[data-tema='claro'] .painel,
:root[data-tema='claro'] .login {
  --papel: #ffffff;
  --papel-fundo: #f4f1ec;
  --papel-2: #f7f4f0;
  --fio: #e2dcd2;
  --fio-forte: #cec6b8;
  --tinta: #1c1620;
  --tinta-suave: #5d5566;
  --tinta-fraca: #857c8f;
  --serie-a: #ea580c;
  --serie-b: #2563eb;
  --grade: #ebe6de;
  --eixo: #cec6b8;
}

:root[data-tema='claro'] body:has(.painel),
:root[data-tema='claro'] body:has(.login) {
  background: #f4f1ec;
}

:root[data-tema='claro'] .grafico__dica {
  box-shadow: 0 12px 28px -16px rgb(60 45 30 / 0.5);
}

:root[data-tema='claro'] .login__erro {
  border-color: color-mix(in srgb, var(--erro) 40%, transparent);
  background: color-mix(in srgb, var(--erro) 8%, transparent);
  color: #9f1239;
}

:root[data-tema='claro'] .login__entrada {
  background: #ffffff;
}