/* =====================================================
   ZDVAL — /tactics + /antitactic — REDESIGN v4

   A maior parte deste arquivo (cards de pasta, tabs de lado, seletor de
   mapa/composição, botões "+") estilizava markup que não existe mais —
   /tactics migrou pro sistema tc-tree (ver tactics-tree.js) e /antitatico
   foi migrado atrás dele. O que sobra aqui é só o que ainda tem markup
   vivo: fundo de página, scrollbar, foco, dropdown da nav e os modais
   genéricos (app.createModal / showAddPlayerModal), que usam
   [class*="modal-body"] etc. e por isso ainda pegam essas regras.

   Override-first: carrega depois de style.css.
   ===================================================== */

#page-tactics,
#page-antitactic {
  --tc-red:       var(--zd-danger, #ff4655);
  --tc-red-soft:  rgba(255, 70, 85, 0.12);
  --tc-red-glow:  rgba(255, 70, 85, 0.30);
  --tc-red-ring:  rgba(255, 70, 85, 0.18);
  --tc-canvas:    var(--zd-canvas-grad, linear-gradient(160deg, #275146 0%, #0f1923 50%, #11434e 100%));
  --tc-canvas-flat: var(--zd-canvas, #0d3b3b);
  --tc-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --tc-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 0. Fundo da página ── */
#page-tactics#page-tactics,
#page-antitactic#page-antitactic {
  background: var(--zd-bg-page) !important;
  position: relative;
  /* Sem .tc-page (ex: estado "selecione um time" do antitatico) a
     pagina cai pro display:block generico e sua altura real fica curta
     — o fundo escuro do body aparece embaixo do card. Garante altura
     minima de viewport mesmo nesse estado. */
  min-height: calc(100vh - var(--topbar-height) - var(--horizontal-nav-height));
}
/* .empty-state-full p herda --text-secondary pensado pro tema escuro
   do resto do site — quase invisível sobre o fundo claro
   (--zd-bg-page) desta página. Usa o token de texto-sobre-claro. */
#page-tactics .empty-state-full p,
#page-antitactic .empty-state-full p {
  color: var(--zd-ink-2);
}

#page-tactics::before,
#page-antitactic::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255, 70, 85, 0.04), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(39, 81, 70, 0.05), transparent 55%);
  opacity: 0;
  animation: tc-ambient-in 1.1s var(--tc-ease) forwards;
}
@keyframes tc-ambient-in { to { opacity: 1; } }

@media (max-width: 480px) {
  #page-tactics, #page-antitactic { margin: -1rem; width: calc(100% + 2rem); }
}

/* ── Scrollbar ── */
#page-tactics ::-webkit-scrollbar,
#page-antitactic ::-webkit-scrollbar { width: 8px; height: 8px; }
#page-tactics ::-webkit-scrollbar-thumb,
#page-antitactic ::-webkit-scrollbar-thumb {
  background: var(--tc-canvas-flat);
  border-radius: 999px;
}
#page-tactics ::-webkit-scrollbar-track,
#page-antitactic ::-webkit-scrollbar-track { background: transparent; }

/* ── Focus ── */
#page-tactics button:focus-visible,
#page-tactics [role="button"]:focus-visible,
#page-antitactic [role="button"]:focus-visible,
#page-tactics a:focus-visible,
#page-antitactic a:focus-visible,
#page-antitactic button:focus-visible {
  outline: 2px solid var(--tc-red);
  outline-offset: 2px;
  border-radius: var(--zd-r-sm);
}

/* ── Dropdown "AntiTático" na nav — global ── */
.zdnav-tactics-item { position: relative; }
.zdnav-tactics-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 168px;
  background: var(--zd-surface, #fff);
  border: 1px solid var(--zd-line, rgba(0,0,0,0.08));
  border-radius: var(--zd-r-md, 10px);
  box-shadow: var(--zd-sh-card, 0 20px 50px rgba(15,15,30,0.14));
  padding: 4px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.zdnav-tactics-item:hover .zdnav-tactics-menu,
.zdnav-tactics-item:focus-within .zdnav-tactics-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.zdnav-tactics-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--zd-r-sm, 6px);
  color: var(--zd-ink, #12141a);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.zdnav-tactics-menu-item:hover { background: var(--zd-surface-sub, #f9fafb); }
.zdnav-tactics-menu-item i { width: 16px; text-align: center; color: var(--tc-red); }

/* ── Map hero — o container em si (o miolo, tc-tree/tc-row, vem do
   próprio tactics.css, sem escopo). ── */
#page-tactics .tc-map-hero-content ,
#page-antitactic .tc-map-hero-content {
  background: transparent !important;
  border-radius: 0;
  overflow: hidden;
}

/* ── Modais genéricos (app.createModal / showAddPlayerModal) ──
   Substring match em [class*="modal-body"] etc. — segue pegando
   qualquer modal que use essas classes, dentro ou fora de /antitatico. */
#page-tactics [class*="modal-content"],
#page-antitactic [class*="modal-content"],
#page-tactics [class*="modal-card"],
#page-antitactic [class*="modal-card"],
#page-tactics [class*="modal-body"] ,
#page-antitactic [class*="modal-body"] {
  background: var(--zd-surface) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: var(--zd-ink) !important;
  border-radius: var(--zd-r-xl);
  box-shadow: var(--zd-sh-modal);
  animation: tc-modal-in .32s var(--tc-ease-snap);
}
@keyframes tc-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#page-tactics .tc-modal-btn ,
#page-antitactic .tc-modal-btn {
  transition: transform .2s var(--tc-ease-snap), filter .2s;
}
#page-tactics .tc-modal-btn:hover ,
#page-antitactic .tc-modal-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
#page-tactics .tc-modal-btn:active ,
#page-antitactic .tc-modal-btn:active { transform: scale(0.96); }

/* Modal "Nova Composição" / showAddPlayerModal — fundo off-white, sem preto */
#page-tactics .modal-overlay [class*="modal-content"],
#page-antitactic .modal-overlay [class*="modal-content"],
#page-tactics .modal-overlay [class*="modal-card"],
#page-antitactic .modal-overlay [class*="modal-card"],
#page-tactics .modal-overlay [class*="modal-body"],
#page-antitactic .modal-overlay [class*="modal-body"],
#page-tactics .modal-overlay .modal-header,
#page-antitactic .modal-overlay .modal-header,
#page-tactics .modal-overlay .modal-body ,
#page-antitactic .modal-overlay .modal-body {
  background: var(--zd-bg-page, #f3f4f8) !important;
  color: var(--zd-ink) !important;
}
#page-tactics .modal-overlay .modal-header ,
#page-antitactic .modal-overlay .modal-header {
  border-bottom: 1px solid var(--zd-line) !important;
}
#page-tactics .modal-overlay .modal-header h3 ,
#page-antitactic .modal-overlay .modal-header h3 {
  color: var(--zd-ink) !important;
}
#page-tactics .modal-overlay .btn-icon i ,
#page-antitactic .modal-overlay .btn-icon i {
  color: var(--zd-ink-2) !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #page-tactics *,
  #page-antitactic * {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  #page-tactics::before,
  #page-antitactic::before { animation: none; opacity: 1; }
}