/*
 * Poker dos Dogs — identidade visual
 * Paleta derivada do logo oficial (seção 2 do documento de requisitos).
 * O roxo de fundo do arquivo original do logo não é usado como cor da UI.
 */
:root {
  --pdd-bg: #121212;
  --pdd-bg-secondary: #1e1e1e;
  --pdd-bg-elevated: #262626;
  --pdd-accent: #b3241a;
  --pdd-accent-hover: #8f1d15;
  --pdd-gold: #cbb27b;
  --pdd-text: #f5f0e6;
  --pdd-text-secondary: #b5b0a6;
  --pdd-success: #2e7d32;
  --pdd-warning: #d4a017;
  --pdd-error: #c0392b;
  --pdd-border: #3a3630;
  --pdd-blue: #2e5c8a;
  --pdd-blue-hover: #24476b;
  --pdd-blue-light: #6fa8dc;
  --pdd-bg-blue: #16202e;
  --pdd-border-blue: #2a3b52;
  --pdd-orange: #e08a3c;
  --pdd-orange-hover: #c36f28;
  --pdd-brown: #8b5e34;
  --pdd-brown-hover: #6f4a29;
  --pdd-green-light: #6fbf6f;
  --pdd-green-light-hover: #59a659;
  --pdd-dark-green: #1b5e20;
  --pdd-dark-green-hover: #14471a;
  --pdd-blue-light-hover: #5691c4;
}

body {
  background-color: var(--pdd-bg);
  color: var(--pdd-text);
  min-height: 100vh;
}

a {
  color: var(--pdd-gold);
}
a:hover {
  color: var(--pdd-accent);
}

.pdd-navbar {
  background-color: var(--pdd-bg-secondary);
  border-bottom: 1px solid var(--pdd-border);
  padding-top: calc(0.5rem + env(safe-area-inset-top));
}

.pdd-logo {
  height: 44px;
  width: auto;
}

.pdd-card {
  background-color: var(--pdd-bg-secondary);
  border: 1px solid var(--pdd-border);
  border-radius: 0.75rem;
}

/* Botão que ocupa o card inteiro (ex.: card SN1 de navegação da
   Surpresinha) — o card fica com padding zero e o botão preenche todo
   o espaço, com os mesmos cantos arredondados do .pdd-card. */
.pdd-card-fill-btn {
  display: block;
  width: 100%;
  padding: 1.25rem;
  border-radius: 0.75rem;
  text-align: center;
  font-size: 1.1rem;
}

.pdd-card-surpresinha {
  background-color: var(--pdd-bg-blue);
  border: 1px solid var(--pdd-border-blue);
  border-radius: 0.75rem;
}

.pdd-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.pdd-auth-card {
  width: 100%;
  max-width: 26rem;
}

.btn-pdd-primary {
  background-color: var(--pdd-accent);
  border-color: var(--pdd-accent);
  color: var(--pdd-text);
}
.btn-pdd-primary:hover {
  background-color: var(--pdd-accent-hover);
  border-color: var(--pdd-accent-hover);
  color: var(--pdd-text);
}

.btn-pdd-gold {
  background-color: var(--pdd-gold);
  border-color: var(--pdd-gold);
  color: #1a1a1a;
}
.btn-pdd-gold:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  color: var(--pdd-text);
  opacity: 1;
}

.btn-pdd-success {
  background-color: var(--pdd-success);
  border-color: var(--pdd-success);
  color: var(--pdd-text);
}
.btn-pdd-success:hover {
  background-color: #256b29;
  border-color: #256b29;
  color: var(--pdd-text);
}

.btn-pdd-blue {
  background-color: var(--pdd-blue);
  border-color: var(--pdd-blue);
  color: var(--pdd-text);
}
.btn-pdd-blue:hover {
  background-color: var(--pdd-blue-hover);
  border-color: var(--pdd-blue-hover);
  color: var(--pdd-text);
}

.btn-pdd-brown {
  background-color: var(--pdd-brown);
  border-color: var(--pdd-brown);
  color: var(--pdd-text);
}
.btn-pdd-brown:hover {
  background-color: var(--pdd-brown-hover);
  border-color: var(--pdd-brown-hover);
  color: var(--pdd-text);
}

.btn-pdd-green-light {
  background-color: var(--pdd-green-light);
  border-color: var(--pdd-green-light);
  color: #1a1a1a;
}
.btn-pdd-green-light:hover {
  background-color: var(--pdd-green-light-hover);
  border-color: var(--pdd-green-light-hover);
  color: #1a1a1a;
}

.btn-pdd-dark-green {
  background-color: var(--pdd-dark-green);
  border-color: var(--pdd-dark-green);
  color: var(--pdd-text);
}
.btn-pdd-dark-green:hover {
  background-color: var(--pdd-dark-green-hover);
  border-color: var(--pdd-dark-green-hover);
  color: var(--pdd-text);
}

.btn-pdd-blue-light {
  background-color: var(--pdd-blue-light);
  border-color: var(--pdd-blue-light);
  color: #1a1a1a;
}
.btn-pdd-blue-light:hover {
  background-color: var(--pdd-blue-light-hover);
  border-color: var(--pdd-blue-light-hover);
  color: #1a1a1a;
}

.btn-pdd-orange {
  background-color: var(--pdd-orange);
  border-color: var(--pdd-orange);
  color: #1a1a1a;
}
.btn-pdd-orange:hover {
  background-color: var(--pdd-orange-hover);
  border-color: var(--pdd-orange-hover);
  color: #1a1a1a;
}

.btn-pdd-danger {
  background-color: var(--pdd-error);
  border-color: var(--pdd-error);
  color: var(--pdd-text);
}
.btn-pdd-danger:hover {
  background-color: #a12f21;
  border-color: #a12f21;
  color: var(--pdd-text);
}

/* Medalhas de ranking (ouro/prata/bronze) — substituem os emojis 🥇🥈🥉,
   dimensionadas pra ocupar o mesmo espaço visual que eles tinham. */
.pdd-medal {
  height: 1.15em;
  width: auto;
  vertical-align: -0.2em;
}

.pdd-medal-lg {
  height: 3.5rem;
  width: auto;
  vertical-align: middle;
}

.text-pdd-secondary {
  color: var(--pdd-text-secondary);
}

.text-pdd-gold {
  color: var(--pdd-gold);
}

.text-pdd-blue {
  color: var(--pdd-blue-light);
}

.text-pdd-orange {
  color: var(--pdd-orange);
}

.pdd-status-badge.pending { background-color: var(--pdd-warning); color: #1a1a1a; }
.pdd-status-badge.approved { background-color: var(--pdd-success); }
.pdd-status-badge.rejected,
.pdd-status-badge.blocked { background-color: var(--pdd-error); }

/* Campeonatos e rodadas */
.pdd-status-badge.planned,
.pdd-status-badge.scheduled { background-color: var(--pdd-bg-elevated); color: var(--pdd-text-secondary); }
.pdd-status-badge.open { background-color: var(--pdd-warning); color: #1a1a1a; }
.pdd-status-badge.in_progress { background-color: var(--pdd-success); }
.pdd-status-badge.closing { background-color: var(--pdd-warning); color: #1a1a1a; }
.pdd-status-badge.closed { background-color: var(--pdd-gold); color: #1a1a1a; }
.pdd-status-badge.cancelled { background-color: var(--pdd-error); }

.table th,
.table td {
  text-align: center;
}

/* Rebuy removido (soft-delete): continua listado no histórico, mas
   riscado e em cinza pra não parecer um lançamento ainda válido. */
.pdd-row-removed td {
  text-decoration: line-through;
  color: var(--pdd-text-secondary);
}

/* Jogador com saída antecipada: continua na tabela de participantes (fichas
   entram na conferência geral), mas em cinza pra mostrar que não está mais
   na rodada. Cinza mais escuro que --pdd-text-secondary (usado no rebuy
   removido acima), pra ficar visivelmente apagado em relação ao resto da
   tabela. */
.pdd-row-left-early td {
  color: #7d786e;
}

/* Cards com muitas linhas (Participação dos jogadores, Rodadas): rolagem
   interna mostrando ~8 linhas, com cabeçalho fixo durante o scroll. */
.pdd-table-scroll {
  max-height: 18.5rem;
  overflow-y: auto;
}

/* Ranking: mesma rolagem interna, só que mostrando as 10 primeiras linhas
   (cabeçalho fixo + 10 linhas de dados). */
.pdd-table-scroll.pdd-table-scroll-lg {
  max-height: 25.5rem;
}

.pdd-table-scroll thead th {
  position: sticky;
  top: 0;
  background-color: #212529;
  z-index: 1;
}

/* Coluna "Jogador" fixa durante o scroll horizontal do card de
   participantes (muitas colunas de rebuys/fichas). */
.pdd-col-sticky {
  position: sticky;
  left: 0;
  background-color: #212529;
  z-index: 1;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4);
}
thead .pdd-col-sticky {
  z-index: 2;
}

/* Código de identificação de card — só em UAT (DEBUG=True), ver
   `pdd_debug` em apps/core/context_processors.py e o script no
   base.html que insere o badge em cada .pdd-card. */
.pdd-card-id-host {
  position: relative;
}
.pdd-card-id-badge {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  background-color: var(--pdd-accent);
  color: var(--pdd-text);
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}

.pdd-toggle-password {
  background-color: var(--pdd-bg);
  border-color: var(--pdd-border);
  color: var(--pdd-text-secondary);
}
.pdd-toggle-password:hover,
.pdd-toggle-password:focus {
  background-color: var(--pdd-bg);
  border-color: var(--pdd-border);
  color: var(--pdd-text);
}

.pdd-player {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}

/* Gráfico de evolução (posição no ranking, mês a mês) — card do ranking
   (top 5) e da página inicial (jogador logado). Rótulos dos eixos são
   texto HTML posicionado por porcentagem sobre o gráfico, não `<text>`
   dentro do SVG — o SVG é escalado via viewBox pra caber na largura do
   card, então um font-size definido nele encolhe junto e nunca fica
   legível em telas estreitas. */
/* Duas linhas flex empilhadas (gráfico e eixo X), cada uma com o MESMO
   par [espaçador/eixo Y de largura fixa][área flexível] — garante que a
   área flexível da linha do eixo X tenha exatamente a mesma largura (e
   comece no mesmo x) que o SVG da linha de cima, senão os rótulos de mês
   não alinham com os pontos do gráfico. */
.pdd-evolution-graph-row,
.pdd-evolution-x-axis-row {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}
.pdd-evolution-y-axis,
.pdd-evolution-y-axis-spacer {
  width: 1.6rem;
  flex-shrink: 0;
}
.pdd-evolution-y-axis {
  position: relative;
}
.pdd-evolution-svg-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.pdd-evolution-svg {
  width: 100%;
  height: auto;
  display: block;
}
.pdd-evolution-gridline {
  stroke: var(--pdd-border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
/* Posição do jogador em cada ponto do gráfico (um por mês) — em HTML por
   cima do SVG, não como <text> dentro dele, pelo mesmo motivo dos rótulos
   dos eixos (ver comentário em evolution_chart.py): o SVG é escalado via
   viewBox, então font-size definido nele encolheria junto. */
.pdd-evolution-point-label {
  position: absolute;
  transform: translate(-50%, -170%);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--pdd-text);
  white-space: nowrap;
  pointer-events: none;
}
.pdd-evolution-tick-label {
  position: absolute;
  font-size: 0.65rem;
  color: var(--pdd-text-secondary);
  white-space: nowrap;
}
.pdd-evolution-y-axis .pdd-evolution-tick-label {
  right: 0.25rem;
  transform: translateY(-50%);
}
.pdd-evolution-x-axis {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 0.9rem;
}
.pdd-evolution-x-axis-row {
  margin: 0.2rem 0 0.6rem;
}
.pdd-evolution-x-axis .pdd-evolution-tick-label {
  top: 0;
  transform: translateX(-50%);
}
.pdd-evolution-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pdd-evolution-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.pdd-evolution-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.pdd-avatar-img,
.pdd-avatar-initial {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
}
.pdd-avatar-sm { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.pdd-avatar-md { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.pdd-avatar-lg { width: 5rem; height: 5rem; font-size: 1.75rem; }

.pdd-copy-pix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pdd-text-secondary);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pdd-copy-pix:hover,
.pdd-copy-pix:focus-visible {
  color: var(--pdd-text);
}

.pdd-photo-input .pdd-photo-filename {
  display: block;
  margin-top: 0.35rem;
}

.form-control, .form-select {
  background-color: var(--pdd-bg);
  border-color: var(--pdd-border);
  color: var(--pdd-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--pdd-bg);
  color: var(--pdd-text);
  border-color: var(--pdd-gold);
  box-shadow: 0 0 0 0.2rem rgba(203, 178, 123, 0.25);
}
.form-control::placeholder {
  color: var(--pdd-text-secondary);
}

/* Otimização mobile (FASE 8): telas pequenas usam muito botão/checkbox
   compacto (`btn-sm`, switches de tabela) — abaixo do alvo de toque
   recomendado (~44px). Alarga só a área clicável (padding/min-height),
   sem inflar o visual denso que o resto do app já usa em desktop. */
@media (max-width: 576px) {
  /* Reduz o font-size raiz: texto e tabelas usam rem, então escalam
     junto com o html sem precisar tocar em cada regra individualmente. */
  html {
    font-size: 87.5%;
  }
  .btn-sm,
  .pdd-toggle-password,
  .pdd-camera-btn,
  .pdd-gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .form-check-input[type="checkbox"] {
    width: 2.25rem;
    height: 1.25rem;
  }
  .form-check {
    padding: 0.5rem 0.5rem 0.5rem 2.5em;
    margin-bottom: 0.25rem;
  }
}