/* ==========================================================================
   Base — regras compartilhadas por todos os temas (Clássico, Deluxe,
   Moderno, Ultimate). Cada tema tem seu próprio arquivo (tema-*.css) com
   as variáveis de cor/fonte e os componentes que fogem do padrão genérico
   daqui. Carregar depois deste arquivo no base.html. */

:root {
  --verde-escuro: #0d2b1e;
  --verde: #1a4d33;
  --dourado: #d4af37;
  --branco: #f5f0e1;
  --preto: #111111;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  transition: background 0.2s ease, color 0.2s ease;
}

a {
  color: var(--accent-2);
}

.text-muted {
  color: var(--muted) !important;
}

.navbar-mensal {
  background: var(--nav-bg);
  border-bottom: 2px solid var(--accent-2);
}

.navbar-mensal .brand {
  font-weight: 700;
  color: var(--accent-2) !important;
  letter-spacing: 1px;
}

.navbar-mensal .nav-link,
.navbar-mensal .navbar-text {
  color: var(--text) !important;
  font-weight: 700;
}

/* Itens do menu (tema, usuário, perfil, sair/entrar) — no mobile o menu
   colapsado empilha cada item verticalmente com espaço entre eles; no
   desktop (>= lg) eles ficam lado a lado, alinhados ao centro. */
.navbar-nav-mensal .nav-item {
  margin: 0.4rem 0;
}

@media (min-width: 992px) {
  .navbar-nav-mensal .nav-item {
    margin: 0;
  }
}

.card-surface {
  background: var(--surface);
  color: var(--surface-text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Modais (ex.: lightbox de foto do troféu) usam as mesmas variáveis de tema
   do .card-surface — sem isso, o Bootstrap sempre mostra fundo branco,
   quebrando nos temas escuros (deluxe/moderno/ultimate). O ícone de fechar
   já se ajusta sozinho via data-bs-theme="dark|light" no elemento .modal. */
.modal-content {
  background: var(--surface);
  color: var(--surface-text);
  border: 1px solid var(--border);
}
.modal-header,
.modal-footer {
  border-color: var(--border);
}

/* Cards de "Recordes e Curiosidades" (halldafama/_destaque.html) — cabeçalho
   com título/botão de download, corpo com a tabela. */
.destaque-card__header {
  padding: 1rem 1rem 0.5rem;
}
.destaque-card__body {
  padding: 0 1rem 1rem;
}

.table-mensal {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--surface-text);
  --bs-table-border-color: var(--border);
}

.pagination {
  --bs-pagination-border-radius: var(--radius);
  --bs-pagination-color: var(--link-on-surface);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--link-on-surface);
  --bs-pagination-hover-bg: var(--border);
  --bs-pagination-hover-border-color: var(--border);
  --bs-pagination-focus-color: var(--link-on-surface);
  --bs-pagination-focus-bg: var(--border);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--branco);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-disabled-color: var(--muted);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-border-color: var(--border);
}

.icone-download {
  vertical-align: -2px;
}

.btn-mensal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--branco);
  font-weight: 700;
}
.btn-mensal:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--preto);
}

.badge-posicao {
  border: 1px solid var(--card-accent);
  color: var(--card-accent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
}

/* ---------- Jogador Card ---------- */
.jogador-card-wrap {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

/* No campo de escalação os cards mini ficam lado a lado numa linha flex —
   sem largura/max-width fixa aqui, o wrap encolhe pro tamanho do card
   (84px) em vez de reservar até 200px de espaço por jogador.

   O card é encolhido com `zoom` em vez de recalcular fonte/foto/clip-path
   de cada tema na mão — só nessa tela (o card mini só existe aqui), sem
   afetar o card grande. `zoom` (diferente de `transform:scale`) encolhe o
   espaço reservado no layout junto com o conteúdo — não precisa adivinhar
   a altura real do card (que varia por tema/conteúdo), então foto e texto
   não estouram pra fora da caixa. Cada tema define o próprio valor de
   zoom no seu arquivo. */
.jogador-card-wrap--mini {
  width: auto;
  max-width: none;
  margin: 0;
  /* Sem isso, uma carta arrastada (reparentada direto pra dentro de
     .campo-escalacao__campo, fora da .campo-escalacao__linha) fica no
     mesmo nível de empilhamento (z-index:auto) da linha central do campo
     (::after), que é sempre pintada por último — a linha aparecia por
     cima da carta arrastada. */
  position: relative;
  z-index: 2;
}
.jogador-card-wrap--mini > .jogador-card {
  zoom: 0.7;
}

.jogador-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  padding: 0.85rem 0.75rem;
  color: var(--surface-text);
  text-decoration: none;
}

.jogador-card__topo {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.jogador-card__overall {
  font-size: 2rem;
  font-weight: 800;
  color: var(--card-accent);
  line-height: 1;
}

/* Nível (overall) só aparece pro admin na tela principal do horário (ver
   `mostrar_nivel` em _card.html) — nas outras telas (perfil, sorteio) fica
   escondido. Onde aparece, é sempre branco, independente da raridade da
   carta ou do tema. */
.jogador-card__overall--horario {
  color: #fff;
}

.jogador-card__posicao-sigla {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.jogador-card__foto-wrap {
  display: flex;
  justify-content: center;
}

.jogador-card__foto {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--card-accent);
  margin: 0.4rem 0;
}

.jogador-card__nome {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.jogador-card__rodape {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 1.05rem;
}

.jogador-card__badge.fi {
  width: 1.3em;
  vertical-align: middle;
}

/* ---------- Ícone de "dá pra arrastar" (linhas de escalação arrastáveis:
   Ajustar times do sorteio, escalação real da partida, registrar placar,
   escalação do simulador) ---------- */
.arrastar-icone {
  color: var(--muted);
  cursor: grab;
  text-align: center;
  width: 1.5rem;
  flex: none;
}

/* ---------- Nome do jogador colorido por posição (tela de sorteio) ---------- */
.jogador-pos-nome {
  font-weight: 600;
}

.jogador-pos-nome--gol {
  color: var(--pos-goleiro, inherit);
}

.jogador-pos-nome--zag {
  color: var(--pos-zagueiro, inherit);
}

.jogador-pos-nome--mei {
  color: var(--pos-meio, inherit);
}

.jogador-pos-nome--ata {
  color: var(--pos-atacante, inherit);
}

.trofeu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--surface-text);
  border: 1px solid var(--border);
  margin-bottom: 0.5rem;
  min-height: 84px;
}

.trofeu-item .icone {
  font-size: 1.6rem;
}

/* Hall da Fama do jogador (perfil) — "vitrine de troféus" lado a lado, um
   card por TIPO (não por campeonato): quem foi artilheiro em 5 campeonatos
   diferentes vê um troféu só, com um contador "5x" no balãozinho, em vez
   do mesmo troféu repetido 5 vezes. */
.trofeu-card {
  position: relative;
  display: block;
  width: 108px;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--surface-text);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.trofeu-card:hover {
  color: var(--surface-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.trofeu-card__contador {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.trofeu-card__logo {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--card-accent);
  margin: 0 auto 0.4rem;
}

.trofeu-card__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  font-size: 1.4rem;
  background: none;
  margin: 0 auto 0.4rem;
}

.trofeu-card__titulo {
  font-weight: 700;
  font-size: 0.8rem;
}

.trofeu-card__data {
  font-size: 0.7rem;
}

.video-thumb {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
}

.video-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  pointer-events: none;
}

.time-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--surface-text);
  padding: 1rem;
  /* Bootstrap já estica a coluna (.col-md-6) pra igualar com a vizinha,
     mas essa caixa só herda essa altura se ela mesma disser 100% — senão
     ela encolhe pro tamanho do conteúdo e o Time A/B com menos linhas
     fica visivelmente mais baixo que o outro. */
  height: 100%;
}

/* ---------- Card mini (usado no campo de escalação, tela da partida) ----------
   Base do card compacto (foto pequena e redonda) — Clássico e Deluxe só
   aumentam e quadram a foto por cima disso (ver tema-classico.css/
   tema-deluxe.css). Moderno e Ultimate usam o layout "carta cheia" (foto
   de corpo inteiro), inteiramente definido nos próprios arquivos pra não
   vazar pros outros temas. */
.jogador-card--mini {
  width: 84px;
  min-height: 112px;
  padding: 0.4rem 0.3rem 0.3rem;
}

.jogador-card--mini .jogador-card__foto-wrap {
  margin-top: 0.15rem;
}

.jogador-card--mini .jogador-card__foto {
  width: 32px;
  height: 32px;
  margin: 0.15rem 0;
}

.jogador-card--mini .jogador-card__nome {
  font-size: 0.55rem;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jogador-card--mini .jogador-card__rodape {
  margin-top: 0.1rem;
  font-size: 0.75rem;
  gap: 0.35rem;
}

.jogador-card--mini .jogador-card__posicao-sigla {
  font-size: 0.75rem;
}

.jogador-card--mini .jogador-card__badge.fi {
  width: 1.1em;
  flex-shrink: 0;
}

/* ---------- Campo de escalação (formação tática) ----------
   Visual do gramado é fixo (verde listrado) em todos os temas, de propósito. */
.campo-escalacao {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  /* Mesma lógica do .time-box: sem isso o Time A e o Time B do sorteio
     ficam com alturas diferentes sempre que um time tem mais jogadores
     numa linha (quebra pra segunda linha) do que o outro. */
  height: 100%;
}

.campo-escalacao__titulo {
  background: #0d2b1e;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-heading, inherit);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid rgba(212, 175, 55, 0.5);
  padding: 0.6rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.campo-escalacao__campo {
  position: relative;
  background:
    repeating-linear-gradient(
      to bottom,
      #2f9e44 0,
      #2f9e44 40px,
      #278c3b 40px,
      #278c3b 80px
    );
  padding: 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 720px;
  justify-content: space-between;
}

.campo-escalacao__campo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.campo-escalacao__campo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.campo-escalacao__linha {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Detalhes de Atributos (perfil do jogador) ---------- */
.atributos-tabs .nav-link {
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
}

.atributos-tabs .nav-link.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  background: transparent;
}

/* ---------- Abas do campeonato (Classificação / Seleção do Campeonato) ----------
   Fundo fixo (mesmo verde-escuro do campo de escalação) em todos os temas,
   de propósito — texto branco sempre legível, independente do tema estar
   claro (Clássico) ou escuro (Deluxe/Moderno/Ultimate). */
.campeonato-tabs {
  background: #0d2b1e;
  border: none;
  border-radius: 10px 10px 0 0;
  padding: 0.4rem 0.6rem 0;
  gap: 0.25rem;
}

.campeonato-tabs .nav-link {
  color: rgba(255, 255, 255, 0.7);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  font-weight: 600;
}

.campeonato-tabs .nav-link:hover {
  color: #fff;
}

.campeonato-tabs .nav-link.active {
  color: #fff;
  border-bottom-color: rgba(212, 175, 55, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.atributo-categoria {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  height: 100%;
}

.atributo-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.atributo-gauge {
  position: relative;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atributo-gauge::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--surface);
}

.atributo-gauge span {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--surface-text);
}

.atributo-gauge--boa {
  background: conic-gradient(#2fbf71 calc(var(--pct) * 1%), rgba(127, 127, 127, 0.25) 0);
}
.atributo-gauge--media {
  background: conic-gradient(#e8b93b calc(var(--pct) * 1%), rgba(127, 127, 127, 0.25) 0);
}
.atributo-gauge--baixa {
  background: conic-gradient(#d9534f calc(var(--pct) * 1%), rgba(127, 127, 127, 0.25) 0);
}

.atributo-categoria__titulo {
  font-weight: 700;
  color: var(--surface-text);
}

.atributo-barra {
  display: grid;
  grid-template-columns: 1fr 90px 32px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
  color: var(--surface-text);
}

.atributo-barra__trilho {
  height: 6px;
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.25);
  overflow: hidden;
}

.atributo-barra__fill {
  height: 100%;
}
.atributo-barra__fill--boa {
  background: #2fbf71;
}
.atributo-barra__fill--media {
  background: #e8b93b;
}
.atributo-barra__fill--baixa {
  background: #d9534f;
}

.atributo-barra__valor {
  text-align: right;
  font-weight: 700;
}