/* ==========================================================================
   Tema Clássico — inspirado na tela de abertura do Elifoot 98: verde e
   amarelo, cantos retos, janelas quadriculadas. Requer base.css carregado
   antes deste arquivo. */
[data-theme="classico"] {
  --bg: #1c8a1c;
  --nav-bg: var(--bg);
  /* Conteúdo (cards, tabelas, caixas) sempre amarelo com texto preto;
     cabeçalhos (thead, barras de título) sempre verde com texto branco —
     visual "janela do Elifoot" em tudo, não só no elenco. */
  --surface: #f7e017;
  --surface-text: #000000;
  --text: #ffe600;
  --muted: #5c5c5c;
  --accent: #ffe600;
  --accent-2: #ffe600;
  --card-accent: #0b6e2e;
  --link-on-surface: #0b6e2e;
  --border: #0b6e2e;
  --font-body: Arial, Helvetica, sans-serif;
  --radius: 0px;
  /* Fundo amarelo claro (--surface) exige cores escuras e saturadas aqui,
     diferente dos outros temas — cores claras somem contra o amarelo. */
  --pos-goleiro: #7a4b00;
  --pos-zagueiro: #0b3d91;
  --pos-meio: #4a1a70;
  --pos-atacante: #8a1a1a;
}

/* --accent (amarelo) é pensado pra ler em cima do verde da página — dentro
   de uma caixa de conteúdo (agora amarela também) fica ilegível, então
   título dentro de card/caixa usa o texto preto do conteúdo. Fora de
   caixas claras, --muted também troca o cinza por um amarelo apagado. */
[data-theme="classico"] .text-muted {
  color: rgba(255, 230, 0, 0.75) !important;
}
[data-theme="classico"] .card-surface .text-muted,
[data-theme="classico"] .time-box .text-muted,
[data-theme="classico"] .trofeu-item .text-muted,
[data-theme="classico"] .trofeu-card .text-muted,
[data-theme="classico"] .table-mensal .text-muted,
[data-theme="classico"] .list-group .text-muted,
[data-theme="classico"] .modal-content .text-muted {
  color: var(--muted) !important;
}

/* Aviso de "jogador faltou" no Modo Carreira do simulador — o amarelo do
   Bootstrap (.text-warning) some em cima do fundo amarelo deste tema. */
[data-theme="classico"] .text-warning {
  color: var(--card-accent) !important;
}

/* Painel do simulador de partida (escalação, placar, feed de gols) — o
   preto padrão (--surface-text) some em cima do amarelo deste tema, então
   usa o mesmo verde escuro do --card-accent. */
[data-theme="classico"] .simulador-escalacao-painel {
  color: var(--card-accent);
}

/* Aviso de atraso ("Atraso de X min...") fica fora do card amarelo, direto
   em cima do fundo verde (--bg) da página — o mesmo verde escuro do resto
   do painel ficaria quase invisível ali, então usa um verde bem mais claro
   só nesse aviso específico. */
[data-theme="classico"] #simulador-aviso {
  color: #9dffc0;
}

/* Modo Carreira: "Começar Torneio" e os botões de marcar jogador ficam
   dentro de um card-surface (fundo amarelo) — o .btn-mensal (amarelo) e o
   .btn-outline-secondary (contorno amarelo) somem ali dentro. Padrão:
   fundo amarelo, texto e borda pretos (legível, combina com o resto do
   card). Selecionado ou com o mouse em cima: inverte pra fundo verde e
   texto branco, destacando a ação/quem já foi marcado. */
[data-theme="classico"] #btn-comecar-carreira {
  background: var(--surface);
  border-color: #111;
  color: #111;
}
[data-theme="classico"] #btn-comecar-carreira:hover {
  background: var(--card-accent);
  border-color: var(--card-accent);
  color: #fff;
}
[data-theme="classico"] #carreira-lista-jogadores .btn {
  background: var(--surface);
  border-color: #111;
  color: #111;
}
[data-theme="classico"] #carreira-lista-jogadores .btn:hover {
  background: var(--card-accent);
  border-color: var(--card-accent);
  color: #fff;
}
[data-theme="classico"] #carreira-lista-jogadores .btn-check:checked + .btn {
  background: var(--card-accent);
  border-color: var(--card-accent);
  color: #fff;
}

/* Card de carreira salva (tela de escolha de modo) — é um .card-surface
   (amarelo) dentro de outro .card-surface (também amarelo), então some no
   fundo. Branco pra se destacar do card de fora. */
[data-theme="classico"] .carreira-save-card {
  background: #fff;
}

/* Linha do jogador marcado como "você" nas tabelas do Modo Carreira
   (classificação, artilharia, ranking global) — o .table-warning padrão
   do Bootstrap é amarelo claro, que some em cima do fundo amarelo do
   tema. Verde claro contrasta e mantém o destaque visível. Fundo aplicado
   direto em cada célula (não só na variável --bs-table-bg) pra garantir
   que TODA a linha fique destacada igual, célula por célula, sem depender
   de cascata de variável CSS que `.table-mensal` também define. */
[data-theme="classico"] .table-warning,
[data-theme="classico"] .table-warning > td,
[data-theme="classico"] .table-warning > th {
  background-color: #b6f0c9 !important;
  color: #0b6e2e !important;
}

[data-theme="classico"] h1 {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
  text-decoration: underline;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

[data-theme="classico"] h2,
[data-theme="classico"] h3,
[data-theme="classico"] h4,
[data-theme="classico"] h5 {
  color: var(--accent);
  font-weight: 700;
}

[data-theme="classico"] .card-surface h2,
[data-theme="classico"] .card-surface h3,
[data-theme="classico"] .card-surface h4,
[data-theme="classico"] .card-surface h5,
[data-theme="classico"] .time-box h2,
[data-theme="classico"] .time-box h3,
[data-theme="classico"] .time-box h4,
[data-theme="classico"] .time-box h5,
[data-theme="classico"] .modal-content h2,
[data-theme="classico"] .modal-content h3,
[data-theme="classico"] .modal-content h4,
[data-theme="classico"] .modal-content h5 {
  color: var(--surface-text);
}

/* Cabeçalho de modal (ex.: lightbox de foto do troféu) segue a mesma barra
   verde com texto branco de .janela-elifoot__titulo e do thead das tabelas —
   vence a regra genérica ".modal-content h5" acima por especificidade. */
[data-theme="classico"] .modal-header {
  background: #0b6e2e;
  border-color: #0b6e2e;
}
[data-theme="classico"] .modal-header .modal-title {
  color: #ffffff;
}
[data-theme="classico"] .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="classico"] .navbar-mensal {
  border-bottom-width: 3px;
}

[data-theme="classico"] .card-surface {
  border-width: 2px;
}

/* Caixa verde (não creme) com só o cabeçalho de fora da tabela — o corpo
   (amarelo, por causa de .table-mensal) preenche o card até a borda,
   igual a .janela-elifoot, sem faixa verde ao redor. */
[data-theme="classico"] .destaque-card {
  background: var(--card-accent);
  color: #ffffff;
  border: none;
}
[data-theme="classico"] .destaque-card h5 {
  color: #ffffff;
}
[data-theme="classico"] .destaque-card__header {
  padding: 0.6rem 0.9rem;
}
[data-theme="classico"] .destaque-card__body {
  padding: 0;
}

/* Mesma janela amarela/verde do Elifoot (.janela-elifoot) em toda tabela
   do site, não só na lista de elenco. */
[data-theme="classico"] .table-mensal {
  --bs-table-bg: #f7e017;
  --bs-table-color: #000000;
  --bs-table-border-color: rgba(11, 46, 18, 0.15);
}

[data-theme="classico"] .table-mensal thead {
  --bs-table-bg: #0b6e2e;
  --bs-table-color: #ffffff;
}

[data-theme="classico"] .table-mensal thead th {
  border-bottom-width: 0;
}

[data-theme="classico"] .table-mensal tbody tr {
  font-weight: 600;
}

[data-theme="classico"] .table-mensal tbody tr:nth-child(even) {
  /* Sólido, não rgba: a linha não tem um "amarelo" por trás pra escurecer —
     um tom transparente aqui vaza pro fundo verde da página, não pro
     amarelo da linha ao lado (cada linha pinta o próprio fundo). */
  --bs-table-bg: #e6ce00;
}

[data-theme="classico"] .table-mensal tbody tr:hover {
  --bs-table-bg: #fff2a8;
}

[data-theme="classico"] .btn-mensal {
  background: var(--surface);
  border: 2px solid #111;
  color: #111;
}
[data-theme="classico"] .btn-mensal:hover {
  background: var(--accent);
  border-color: #111;
  color: #111;
}

[data-theme="classico"] .btn-outline-secondary {
  color: var(--text);
  border-color: var(--text);
}
[data-theme="classico"] .btn-outline-secondary:hover {
  background: var(--text);
  border-color: var(--text);
  color: #111;
}

[data-theme="classico"] .pagination .page-link {
  border-width: 2px;
  font-weight: 700;
}
[data-theme="classico"] .pagination .page-item.disabled .page-link {
  border-color: var(--border);
}

/* Botão "Sortear": outline-secondary padrão (amarelo em cima do amarelo do
   card-surface, ver .btn-outline-secondary acima) ficava ilegível aqui;
   preenchido verde com texto branco, igual ao "Titularizar" da escalação. */
[data-theme="classico"] .btn-sortear {
  background: #0b6e2e;
  border-color: #0b6e2e;
  color: #fff;
}
[data-theme="classico"] .btn-sortear:hover {
  background: #073c19;
  border-color: #073c19;
  color: #fff;
}

/* Botão de baixar imagem/tabela: preenchido amarelo, sem borda. */
[data-theme="classico"] .btn-download {
  background: #f7e017;
  border: none;
  color: #000000;
}
[data-theme="classico"] .btn-download:hover {
  background: #fff2a8;
  border: none;
  color: #000000;
}

/* Botão de mostrar dados do PIX: preenchido amarelo, texto e borda preta. */
[data-theme="classico"] .btn-pix {
  background: #f7e017;
  border-color: #000000;
  color: #000000;
}
[data-theme="classico"] .btn-pix:hover {
  background: #fff2a8;
  border-color: #000000;
  color: #000000;
}

/* Links dentro de caixas/tabelas cremes precisam de contraste próprio */
[data-theme="classico"] .card-surface a,
[data-theme="classico"] .table-mensal a,
[data-theme="classico"] .time-box a,
[data-theme="classico"] .trofeu-item a,
[data-theme="classico"] .list-group-item {
  color: var(--link-on-surface);
  font-weight: 700;
}
[data-theme="classico"] .card-surface a:hover,
[data-theme="classico"] .table-mensal a:hover,
[data-theme="classico"] .time-box a:hover,
[data-theme="classico"] .trofeu-item a:hover {
  color: #073c19;
}

[data-theme="classico"] .jogador-card {
  box-shadow: none;
  border-width: 2px;
}

/* Foto do card no perfil do jogador (tela dele) — maior e quadrada, em vez
   do círculo pequeno padrão, pra dar mais destaque à foto. */
[data-theme="classico"] .jogador-card--perfil .jogador-card__foto {
  width: 180px;
  height: 180px;
  border-radius: 4px;
}

/* Raridade por título (Jogador.tier_carta) — sobe um degrau a cada
   campeonato vencido: ferro (0, padrão) → bronze → prata → ouro →
   platina → safira (5+). Mesma paleta usada nos outros temas. */
[data-theme="classico"] .jogador-card--ferro {
  background: linear-gradient(180deg, #8a8f96 0%, #5a5f66 55%, #2e3136 100%);
  border-color: #2e3136;
  color: #fff;
}
[data-theme="classico"] .jogador-card--bronze {
  background: linear-gradient(180deg, #c99a68 0%, #8a5f3a 55%, #402c1c 100%);
  border-color: #402c1c;
  color: #fff;
}
[data-theme="classico"] .jogador-card--prata {
  background: linear-gradient(180deg, #c9d2da 0%, #99a3ad 55%, #5b636b 100%);
  border-color: #5b636b;
  color: #fff;
}
[data-theme="classico"] .jogador-card--ouro {
  background: linear-gradient(180deg, #f7c94f 0%, #d98a1f 55%, #8a4d10 100%);
  border-color: #8a4d10;
  color: #fff;
}
[data-theme="classico"] .jogador-card--platina {
  background: linear-gradient(180deg, #b8e8dc 0%, #7cc4b0 55%, #3f7a68 100%);
  border-color: #3f7a68;
  color: #fff;
}
[data-theme="classico"] .jogador-card--safira {
  background: linear-gradient(180deg, #5c9eea 0%, #2f6fd6 55%, #163f8a 100%);
  border-color: #163f8a;
  color: #fff;
}
/* Topo da progressão (6+ títulos) — carta branca/pérola com borda dourada.
   Fundo claro demais pro texto branco das outras raridades, usa texto
   escuro aqui. */
[data-theme="classico"] .jogador-card--brancadourada {
  background: linear-gradient(180deg, #ffffff 0%, #ededed 55%, #d6d6d6 100%);
  border-color: #ffffff;
  color: #1f1f1f;
  box-shadow: 0 0 0 2px #d4af37;
}

[data-theme="classico"] .jogador-card--ferro .jogador-card__posicao-sigla,
[data-theme="classico"] .jogador-card--bronze .jogador-card__posicao-sigla,
[data-theme="classico"] .jogador-card--prata .jogador-card__posicao-sigla,
[data-theme="classico"] .jogador-card--ouro .jogador-card__posicao-sigla,
[data-theme="classico"] .jogador-card--platina .jogador-card__posicao-sigla,
[data-theme="classico"] .jogador-card--safira .jogador-card__posicao-sigla {
  color: rgba(255, 255, 255, 0.85);
}
[data-theme="classico"] .jogador-card--brancadourada .jogador-card__posicao-sigla {
  color: #5c5c5c;
}

/* Card mini (tela da partida) — zoom maior que o padrão de base.css (0.7),
   mas reduzido de 1.4 pra 1.2 pra não ficar grande demais no campo. */
[data-theme="classico"] .jogador-card-wrap--mini > .jogador-card {
  zoom: 1.2;
}

/* Foto do card mini um pouco maior e quadrada (em vez do círculo pequeno
   padrão de base.css), mesmo tratamento do card do perfil acima. */
[data-theme="classico"] .jogador-card--mini .jogador-card__foto {
  width: 44px;
  height: 44px;
  border-radius: 4px;
}

[data-theme="classico"] .trofeu-item {
  border-width: 2px;
}

/* Abas "Detalhes de Atributos"/"Estatísticas Brutas" (perfil do jogador) —
   mesma barra verde com texto branco usada no cabeçalho da janela do
   Elifoot e no thead das tabelas, em vez de texto solto em cima do fundo. */
[data-theme="classico"] .atributos-tabs {
  background: #0b6e2e;
  border: none;
  padding: 0.5rem 0.5rem 0;
  gap: 0.25rem;
}
[data-theme="classico"] .atributos-tabs .nav-link {
  color: #fff;
  font-weight: 700;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.5rem 0.9rem;
}
[data-theme="classico"] .atributos-tabs .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: #f7e017;
}
[data-theme="classico"] .atributos-tabs .nav-link:not(.active):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

/* Abas do campeonato (Classificação / Seleção do Campeonato) — base.css
   fixa um verde-escuro genérico (visual "gramado") igual em todos os
   temas; aqui usa o mesmo verde/amarelo do site (idêntico às abas de
   Atributos acima), em vez do verde/dourado da grama. */
[data-theme="classico"] .campeonato-tabs {
  background: #0b6e2e;
}
[data-theme="classico"] .campeonato-tabs .nav-link.active {
  border-bottom-color: #f7e017;
}

/* Botões "Reserva"/"Titularizar" da escalação (tela da partida) — o
   outline-secondary padrão (amarelo em cima de amarelo, ver .text-muted
   acima) some dentro da linha da tabela; preto lê bem melhor aqui. O
   "Titularizar" vira um botão verde preenchido com texto branco, pra ficar
   claramente diferente da ação de mandar pro banco. */
[data-theme="classico"] .time-box .btn-outline-secondary {
  color: #000;
  border-color: #000;
}
[data-theme="classico"] .time-box .btn-outline-secondary:hover {
  background: #000;
  color: #f7e017;
  border-color: #000;
}
[data-theme="classico"] .time-box .btn-outline-success {
  background: #0b6e2e;
  border-color: #0b6e2e;
  color: #fff;
}
[data-theme="classico"] .time-box .btn-outline-success:hover {
  background: #073c19;
  border-color: #073c19;
  color: #fff;
}

/* Mesmo problema, agora dentro de qualquer modal (fundo amarelo também,
   ver .modal-content em base.css) — botões de ação do Modo Carreira
   (Treinar/Comprar/Equipar) ficavam amarelo-em-cima-de-amarelo. */
[data-theme="classico"] .modal-content .btn-outline-secondary {
  color: #000;
  border-color: #000;
}
[data-theme="classico"] .modal-content .btn-outline-secondary:hover {
  background: #000;
  color: #f7e017;
  border-color: #000;
}
[data-theme="classico"] .modal-content .btn-outline-success {
  background: #0b6e2e;
  border-color: #0b6e2e;
  color: #fff;
}
[data-theme="classico"] .modal-content .btn-outline-success:hover {
  background: #073c19;
  border-color: #073c19;
  color: #fff;
}

/* Abas do Modo Carreira (Habilidades/Inventário/Loja) dentro do modal —
   preto lê bem melhor que o azul padrão do Bootstrap em cima do amarelo. */
[data-theme="classico"] .modal-content .nav-tabs .nav-link {
  color: #000;
  border-color: transparent;
}
[data-theme="classico"] .modal-content .nav-tabs .nav-link.active {
  color: #000;
  font-weight: 700;
  background: #fff;
  border-color: #000 #000 #fff;
}

[data-theme="classico"] .trofeu-card {
  border-width: 2px;
}

[data-theme="classico"] .time-box {
  border-width: 2px;
}

/* ---------- Janela de elenco estilo Elifoot (lista de jogadores) ---------- */
.janela-elifoot {
  border: 3px solid #0b6e2e;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  margin-bottom: 1.5rem;
}

.janela-elifoot__titulo {
  background: #0b6e2e;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
}

.janela-elifoot__corpo {
  background: #f7e017;
  max-height: 520px;
  overflow-y: auto;
}

.janela-elifoot__linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  color: #0b2e12;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(11, 46, 18, 0.15);
}

.janela-elifoot__linha:nth-child(even) {
  background: rgba(11, 46, 18, 0.06);
}

.janela-elifoot__linha:hover {
  background: #fff2a8;
  color: #0b2e12;
}

.janela-elifoot__pos {
  width: 1.4em;
  font-weight: 800;
  color: #0b6e2e;
}

.janela-elifoot__bandeira {
  width: 1.2em;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.janela-elifoot__nome {
  flex: 1;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.janela-elifoot__overall {
  width: 2.2em;
  text-align: right;
  font-weight: 800;
  /* Sempre branco (só aparece pro admin, nessa tela) — não o preto padrão
     da linha, senão fica ilegível em cima do amarelo. */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.janela-elifoot__status {
  display: inline-block;
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #0b6e2e;
}

.janela-elifoot__status.inativo {
  background: #a33;
}