/* ==========================================================================
   THEME-FUTESUL.CSS
   Piloto de reskin: aplica a identidade visual do portal "futesul" (areia /
   verde-azulado / dourado, tipografia Anton + Inter + Space Mono, cantos
   retos) por cima da "casca" do FUTMGR — barra lateral, card de perfil,
   barra de acesso rápido e a tela inicial (dashboard).

   Estratégia: como style.css/menu.css/dashboard.css já são quase todos
   orientados a tokens (var(--bg-*), var(--pitch), var(--gold), var(--text-*),
   var(--radius) etc.), a maior parte do reskin acontece só redefinindo esses
   tokens aqui embaixo. As poucas regras que usavam cor "cravada" (não-token)
   ganham overrides pontuais na segunda metade do arquivo.

   Escopo original do piloto: barra lateral (.sidebar/.profile-card/
   .sidebar-nav-card), barra de acesso rápido (.quick-menu-bar/
   .quick-menu-card) e a tela inicial (.fm-home e afins, em dashboard.css).

   Pilot aprovado — reskin espalhado pro resto do app: além dos overrides
   pontuais abaixo, style.css/club.css/dashboard.css/menu.css/ticker.css
   tiveram as cores "cravadas" do tema antigo (verde, dourado antigo,
   vermelho antigo, magenta "live" antigo, painel cinza #5a6068, borda
   cinza) substituídas DIRETAMENTE nas próprias fontes pela paleta futesul,
   já que eram literais em rgba() e não tokens — não dava pra sobrepor só
   com var(). career.css não tinha nenhuma cor cravada (100% tokens). Ficou
   de fora de propósito: o verde do gramado no editor de escalação
   (club.css) e as cores de categoria de atributo (goleiro=azul,
   físico=laranja) — são representacionais/funcionais, não fazem parte da
   "casca" visual.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- paleta futesul ---- */
  --teal-deep: #0B3D3A;
  --teal-mid: #145C52;
  --teal-line: #1E7369;
  --sand: #F3ECDD;
  --sand-2: #EAE0CB;
  --white: #FFFDF8;
  --gold: #E3A73A;
  --gold-dark: #C98B1F;
  --gold-glow: rgba(227, 167, 58, 0.30);
  --coral: #D6553F;
  --ink: #16211F;
  --ink-soft: #4B564F;

  /* ---- remapeamento dos tokens que o resto do CSS já consome ---- */
  --bg-0: var(--sand);
  --bg-1: var(--white);
  --bg-2: var(--white);
  --bg-3: var(--sand);
  --bg-4: var(--sand-2);
  --line: rgba(11, 61, 58, 0.18);
  --line-bright: rgba(11, 61, 58, 0.38);

  --pitch: var(--teal-mid);
  --pitch-dark: var(--teal-deep);
  --pitch-glow: rgba(20, 92, 82, 0.25);

  --live: var(--coral);
  --live-dark: #B8402C;
  --live-glow: rgba(214, 85, 63, 0.28);

  --blue: #1B3E8C;
  --blue-dark: #14316E;

  --danger: #C4222C;
  --danger-dark: #9C1B23;

  --text-0: var(--ink);
  --text-1: var(--ink-soft);
  --text-2: #6B6F6C;

  --radius: 2px;
  --radius-lg: 4px;
  --cut: 0px; /* zera o corte diagonal dos botões (assinatura antiga) */

  --font-hero: 'Anton', sans-serif;
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ---- fundo: fora a foto de estádio à noite, dentro a areia do portal ---- */
html { background: var(--sand); }
body,
body.bg-onboard,
body.bg-game,
body.bg-match {
  background: var(--sand);
  background-image: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-hero);
}

/* ---- botões: flat, cantos quase retos, sem glow neon ---- */
.btn { box-shadow: none; }
.btn:hover { filter: none; background-position: 0 0; }
.btn-primary {
  background: var(--teal-deep);
  color: var(--white);
}
.btn-gold {
  background: var(--gold);
  color: var(--teal-deep);
}
.btn-live {
  background: var(--coral);
  color: var(--white);
}
.btn-ghost {
  background: var(--white);
  border: 1px solid var(--line-bright);
  color: var(--ink-soft);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--teal-mid); }
.btn-danger {
  background: var(--white);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* ---- pills: as cores eram rgba cravadas (verde/magenta antigos), não tokens ---- */
.pill { background: var(--sand-2); color: var(--ink-soft); }
.pill.gold { background: rgba(227, 167, 58, 0.18); color: var(--gold-dark); border-color: rgba(227, 167, 58, 0.4); }
.pill.pitch { background: rgba(20, 92, 82, 0.14); color: var(--teal-mid); border-color: rgba(20, 92, 82, 0.3); }
.pill.danger { background: rgba(196, 34, 44, 0.12); color: var(--danger); border-color: rgba(196, 34, 44, 0.28); }
.pill.live { background: rgba(214, 85, 63, 0.14); color: var(--coral); border-color: rgba(214, 85, 63, 0.3); }

/* ---- card-title: eyebrow em Space Mono, como o futesul usa em legendas ---- */
.card-title,
.fm-section-head > span,
.fm-widget-head > span,
.fm-link {
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.06em;
}
.card-title .dot { box-shadow: none; }

/* ==========================================================================
   BARRA LATERAL / CARD DE PERFIL (menu.css)
   ========================================================================== */
.club-tag { background: var(--white); border-color: var(--line); }
.club-tag::before { background: none; }

.profile-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
}
.profile-card-xp { border-top-color: rgba(227, 167, 58, 0.4); }

.sidebar-nav-card {
  background: var(--white);
  border-color: var(--line);
}
.sidebar-nav-card:hover { border-color: var(--teal-line); }
.sidebar-nav-card.active {
  border-color: var(--teal-mid);
  color: var(--teal-deep);
  background: linear-gradient(90deg, rgba(20, 92, 82, 0.10), var(--white));
}

/* ---- barra de acesso rápido: vira uma "topbar" sólida cor teal-deep,
   ecoando o header.main do futesul (faixa escura, texto claro, sublinhado
   dourado no item ativo) em vez dos cards soltos translúcidos ---- */
.quick-menu-bar {
  background: var(--teal-deep);
  border-bottom: 4px solid var(--gold);
}
.quick-menu-card {
  background: transparent;
  border: none;
  border-top: 2px solid transparent;
  color: rgba(255, 253, 248, 0.75);
}
.quick-menu-card:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
  transform: none;
}
.quick-menu-card.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}
.quick-menu-card-label { text-transform: uppercase; }

/* ==========================================================================
   TELA INICIAL / DASHBOARD (dashboard.css) — várias regras usavam cor
   cravada (#5a6068, rgba(200,210,216,.35)) em vez de var(), então precisam
   de override explícito aqui.
   ========================================================================== */
.fm-club-banner,
.fm-section-card,
.fm-widget,
.card {
  background: var(--white);
  border: 1px solid var(--line);
}
.fm-club-banner::before {
  background: linear-gradient(90deg, var(--teal-mid), var(--gold) 50%, var(--coral));
}
.fm-badge-division { color: var(--teal-mid); border-color: var(--teal-mid); }

.fm-link {
  color: var(--teal-mid);
  border-color: rgba(20, 92, 82, 0.3);
}
.fm-link:hover {
  background: rgba(20, 92, 82, 0.10);
  border-color: var(--teal-mid);
}

.fm-quick-card {
  background: var(--sand);
  border-color: var(--line);
}
.fm-quick-card:hover {
  border-color: var(--gold);
  background: rgba(227, 167, 58, 0.10);
}
.fm-quick-ic { color: var(--gold-dark); }

.fm-match-card .btn-gold { color: var(--teal-deep); }

.view-header h2::before {
  background: linear-gradient(180deg, var(--teal-mid), var(--gold));
}