/**
 * Poupex Play 4.0 — Trade
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-trade
 *
 * FASE 1 da refatoração visual: este arquivo apenas ACRESCENTA. Nada
 * foi removido de `trade.php` — nem o <style> de 277 linhas, nem os 38
 * `style=`. A limpeza vem nas fases 3 e 4, depois da validação visual.
 *
 * ------------------------------------------------------------------
 * POR QUE UM ARQUIVO NOVO E NÃO EDITAR `trade-betbra.css`
 * ------------------------------------------------------------------
 * O original continua intacto e a mudança é reversível tirando uma
 * linha do registro em `_top.php`. Se algo sair errado em produção, o
 * rollback é essa linha — não um `git revert` de 277 regras.
 *
 * ------------------------------------------------------------------
 * A CASCATA CONTRA O <style> INLINE
 * ------------------------------------------------------------------
 * O <style> de `trade.php` fica no CORPO do documento, depois dos
 * <link> do <head>. Em empate de especificidade ele vence por ordem.
 * Por isso TODA regra aqui carrega `.pp4-trade` — o escopo sobe a
 * especificidade e dispensa `!important`.
 *
 * Onde o inline usa `!important`, a regra daqui repete o `!important`
 * e vence pela especificidade maior. Está anotado caso a caso.
 *
 * ------------------------------------------------------------------
 * O QUE NÃO PODE SER TOCADO
 * ------------------------------------------------------------------
 * A tela tem 29 ganchos `data-*`, 8 formulários, 3 blocos de <script>
 * e 2 `fetch`. Nenhum seletor daqui depende de `data-*` para casar, e
 * nenhuma classe lida pelo JavaScript foi renomeada.
 *
 * O JS controla painéis por CLASSE, nunca por `style` inline:
 *   classList.add('is-open') · classList.remove('bb-slip--open')
 * É isso que permite transformar o modal central em painel lateral
 * sem tocar numa linha de JavaScript — quem decide a posição é o CSS.
 */

/* ============================================================
   1 · CABEÇALHO
   ============================================================

   A referência de mercado (TradingView, BetBurger) abre com título,
   uma linha de contexto e nada mais. Aqui o topo acumulava título,
   subtítulo, três cards de instrução e um aviso de mock. */

.pp4-trade .trade-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp4-space-4);
  margin-bottom: var(--pp4-space-5);
}

.pp4-trade .trade-page__title-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pp4-trade .trade-page__title-row h1,
.pp4-trade .trade-page__head h1 {
  margin: 0;
  color: var(--pp4-color-text);
  font-size: 1.6rem;
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.pp4-trade .trade-page__head p {
  margin: 0;
  color: var(--pp4-color-text-muted);
  font-size: var(--pp4-text-sm);
  line-height: 1.5;
}

/* ============================================================
   2 · CARTÃO ÚNICO DE INSTRUÇÃO
   ============================================================

   Eram três cartões lado a lado com um passo cada. Três caixas para
   três frases curtas é ruído: o olho lê três blocos antes de entender
   que é uma sequência. Vira um cartão só, com os passos numerados em
   linha — mesma informação, um terço da área. */

.pp4-trade .trade-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp4-space-3) var(--pp4-space-5);
  margin: 0 0 var(--pp4-space-4);
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-trade .trade-steps > * {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pp4-color-text-muted);
  font-size: var(--pp4-text-sm);
  line-height: 1.4;
}

/* O número do passo já existe na marcação; aqui ele vira um disco. */
.pp4-trade .trade-steps > * > :first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp4-color-blue);
  color: #ffffff;
  font-size: 11px;
  font-weight: var(--pp4-weight-bold);
  line-height: 1;
}

/* ============================================================
   3 · FILTROS EM UMA LINHA
   ============================================================

   Estavam num cartão alto, com o rótulo "Mercado" acima do select, o
   checkbox quebrando em três linhas e o botão deslocado. Vira uma
   barra: tudo alinhado pela base, quebra só quando falta largura. */

.pp4-trade .trade-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp4-space-3);
  margin: 0 0 var(--pp4-space-4);
  padding: var(--pp4-space-3) var(--pp4-space-4);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-trade .trade-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--pp4-color-text-muted);
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  white-space: nowrap;
}

.pp4-trade .trade-filters select,
.pp4-trade .trade-filters input[type="text"],
.pp4-trade .trade-filters input[type="search"] {
  min-height: 36px;
  max-width: 100%;
  padding: 0 var(--pp4-space-3);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-surface-2);
  color: var(--pp4-color-text);
  font-family: inherit;
  font-size: var(--pp4-text-sm);
}

.pp4-trade .trade-filters select:focus-visible,
.pp4-trade .trade-filters input:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* O botão Filtrar encosta à direita quando sobra espaço. */
.pp4-trade .trade-filters button[type="submit"],
.pp4-trade .trade-filters .trade-btn {
  min-height: 36px;
  margin-left: auto;
  padding: 0 var(--pp4-space-4);
  border: 0;
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-blue);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  cursor: pointer;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-trade .trade-filters button[type="submit"]:hover { background: var(--pp4-color-blue-bright); }

/* ============================================================
   4 · GRADE DE OPORTUNIDADES
   ============================================================

   O pedido é "mais jogos visíveis, sem desperdício de espaço". A
   altura do card cai pelo padding e pela entrelinha, não por esconder
   informação: liga, tempo, times, odds e lucro continuam todos lá. */

.pp4-trade .trade-ops {
  display: grid;
  gap: var(--pp4-space-3);
  margin: 0 0 var(--pp4-space-4);
}

.pp4-trade .trade-ops > article,
.pp4-trade .trade-ops > li,
.pp4-trade .trade-ops > .trade-op {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: var(--pp4-space-3) var(--pp4-space-4);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-surface);
  transition:
    border-color var(--pp4-duration) var(--pp4-ease),
    background var(--pp4-duration) var(--pp4-ease);
}

.pp4-trade .trade-ops > article:hover,
.pp4-trade .trade-ops > li:hover {
  border-color: var(--pp4-color-border-blue);
  background: var(--pp4-color-surface-2);
}

/* Números de mercado em fonte tabular: sem isso as colunas de odd
   dançam a cada atualização do feed. */
.pp4-trade .trade-ops [class*="odd"],
.pp4-trade .trade-ops [class*="price"],
.pp4-trade .trade-ops [class*="lucro"],
.pp4-trade .trade-ops [class*="profit"] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   5 · ESTADO VAZIO
   ============================================================

   "Nenhum jogo aberto no Mock" ocupava um bloco de 90px de altura com
   uma frase centralizada e nenhuma saída. Passa a caixa contida, com
   a instrução mantida — o texto é o mesmo, o peso visual é menor. */

.pp4-trade .trade-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--pp4-space-4);
  padding: var(--pp4-space-6) var(--pp4-space-4);
  border: 1px dashed var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: transparent;
  color: var(--pp4-color-text-muted);
  font-size: var(--pp4-text-sm);
  text-align: center;
}

.pp4-trade .trade-empty strong { color: var(--pp4-color-text); }

/* ============================================================
   6 · PAINEL LATERAL EM VEZ DE MODAL CENTRAL
   ============================================================

   O pedido: "abrir painel lateral, nunca modal central".

   O JavaScript apenas alterna `bb-slip--open` e `is-open`. Não define
   posição, não anima, não mede. Então a conversão é inteiramente CSS:
   o painel passa a viver colado à direita e a entrar por `transform`.
   Nenhuma linha de JS mudou, nenhum handler, nenhum `data-*`.

   `transform` e `opacity` são as duas propriedades que o navegador
   anima sem recalcular layout — daí a escolha, em vez de `right`. */

.pp4-trade .bb-slip {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  max-height: 100vh;
  padding: var(--pp4-space-5);
  border-left: 1px solid var(--pp4-color-border);
  border-radius: 0;
  background: var(--pp4-color-surface);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 260ms cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear 260ms;
}

.pp4-trade .bb-slip.bb-slip--open,
.pp4-trade .bb-slip.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 260ms cubic-bezier(.4, 0, .2, 1),
    visibility 0s;
}

.pp4-trade .bb-slip > * { min-width: 0; }

/* Quem prefere menos movimento recebe o painel sem deslizamento —
   ele ainda aparece e some, só não viaja pela tela. */
@media (prefers-reduced-motion: reduce) {
  .pp4-trade .bb-slip { transition: none; }
}

/* ============================================================
   7 · FASE 2 — HIERARQUIA E ALINHAMENTO
   ============================================================

   Implementada INTEIRAMENTE em CSS. Zero alteração de HTML.

   A condição da aprovação era não envolver em container novo nenhum
   bloco de que o JavaScript dependa estruturalmente. A varredura
   encontrou `nextElementSibling` (2), `.children` (1) e `parentNode`
   (2) — todas operando sobre as linhas da tabela BetBra
   (`tr[data-bb-eid]`) e sua linha de expansão. Nenhuma toca cabeçalho,
   abas ou filtros.

   Ainda assim, o bloco dos filtros é um <form>, e formulários estão na
   lista de proibições. Em vez de pesar caso a caso, a Fase 2 dispensou
   HTML por completo: `order`, `grid` e `flex` reposicionam sem mexer
   numa linha da árvore. Risco eliminado, não mitigado. */

/* --- Cabeçalho: título à esquerda, carteiras à direita ------------- */

.pp4-trade .trade-page__head {
  align-items: center;
}

.pp4-trade .trade-page__wallets {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--pp4-space-3);
  min-width: 0;
}

/* --- Carteiras ------------------------------------------------------
   FASE 3, etapa 1: as sete regras que o <style> inline dedicava a este
   bloco foram reescritas aqui e removidas de lá.

   O bloco inteiro era construído sobre `#b8f000` e `rgba(184,240,0,…)`
   — o verde-limão que não pertence à identidade oficial, que tem cinco
   cores e nenhuma delas é essa. A reescrita adota a paleta:

     Carteira Poupex  superfície neutra, borda padrão
     Banca Trade      Verde Neon (--pp4-color-success), o destaque
                      oficial para valor positivo

   `text-align: right` do inline virou alinhamento à esquerda: rótulo e
   valor empilhados leem melhor da margem, e era o que a regra de 560px
   já forçava no celular. Uma decisão, não duas. */

.pp4-trade .trade-page__mini-bal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--pp4-space-3) var(--pp4-space-4);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-surface);
  text-align: left;
}

.pp4-trade .trade-page__mini-bal span {
  display: block;
  color: var(--pp4-color-text-subtle);
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
}

.pp4-trade .trade-page__mini-bal strong {
  color: var(--pp4-color-text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* A Banca Trade é o cartão de destaque: saldo operável. */
.pp4-trade .trade-page__mini-bal--trade {
  border-color: rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.08);
  box-shadow: none;
}

.pp4-trade .trade-page__mini-bal--trade span { color: var(--pp4-color-text-muted); }

.pp4-trade .trade-page__mini-bal--trade strong {
  color: var(--pp4-color-success);
  font-size: 1.15rem;
}

/* --- Abas: rolagem horizontal em vez de quebra --------------------
   `.trade-page__nav` traz `style="display:flex;flex-wrap:wrap"` no
   elemento. Atributo `style` vale 1,0,0,0 e nenhum seletor o alcança —
   `!important` aqui é a exceção tecnicamente inevitável prevista no
   briefing, e some na Fase 4, quando o inline sair.

   Abaixo de 500px as cinco abas quebravam em duas linhas e empurravam
   todo o conteúdo para baixo. Rolando na horizontal, ocupam uma faixa
   fixa e o polegar alcança todas. */

.pp4-trade .trade-page__nav {
  flex-wrap: nowrap !important;      /* TEMPORÁRIO - remover na Fase 4 */
  gap: var(--pp4-space-2) !important;   /* TEMPORÁRIO - remover na Fase 4 */
  margin: var(--pp4-space-4) 0 0 !important;  /* TEMPORÁRIO - remover na Fase 4 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pp4-trade .trade-page__nav::-webkit-scrollbar { height: 0; }

.pp4-trade .trade-page__nav > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Linha de contexto e atalho ------------------------------------ */

.pp4-trade .trade-page__eyebrow {
  margin: 0;
  color: var(--pp4-color-text-subtle);
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.pp4-trade .trade-page__jump { margin: 0 0 var(--pp4-space-3); }

/* --- Grade: a causa do estouro a 390px e 320px --------------------
   `.bb-shell` era sinalizado desde antes desta refatoração. Um filho
   de grid ou flex nasce com `min-width: auto`: seu mínimo é o conteúdo,
   e a tabela BetBra tem seis colunas de odd que não encolhem. Com
   `min-width: 0` o contêiner passa a poder encolher, e a rolagem fica
   onde deve estar — dentro da tabela, não na página. */

.pp4-trade .bb-shell,
.pp4-trade .trade-ops,
.pp4-trade .trade-page__head,
.pp4-trade .trade-filters { min-width: 0; }

.pp4-trade .bb-shell { overflow-x: auto; }

/* ============================================================
   8 · RESPONSIVIDADE — declarada por último
   ============================================================

   Media query NÃO aumenta especificidade: uma regra base escrita
   depois vence uma regra de media query de mesma especificidade
   escrita antes. Por isso este bloco fica no fim do arquivo. */

@media (max-width: 1023px) {
  .pp4-trade .trade-filters button[type="submit"] { margin-left: 0; }
}

@media (max-width: 767px) {
  .pp4-trade .trade-page__head h1 { font-size: 1.35rem; }
  .pp4-trade .trade-steps { gap: var(--pp4-space-3); }
  .pp4-trade .trade-steps > * { flex: 1 1 100%; }
  .pp4-trade .trade-filters { padding: var(--pp4-space-3); }
  .pp4-trade .trade-filters select,
  .pp4-trade .trade-filters input[type="text"],
  .pp4-trade .trade-filters input[type="search"] { flex: 1 1 100%; }
}

/* No celular o painel ocupa a largura toda: 420px numa tela de 390
   deixaria o conteúdo cortado à direita. */
@media (max-width: 480px) {
  .pp4-trade .bb-slip {
    width: 100vw;
    padding: var(--pp4-space-4);
  }
}

/* Fase 2 — as carteiras deixam de disputar a linha do título. */
@media (max-width: 767px) {
  .pp4-trade .trade-page__head { align-items: stretch; }
  .pp4-trade .trade-page__wallets { width: 100%; }
  .pp4-trade .trade-page__mini-bal { flex: 1 1 160px; }
}

@media (max-width: 414px) {
  .pp4-trade .trade-page__mini-bal { padding: var(--pp4-space-2) var(--pp4-space-3); }
  .pp4-trade .trade-steps { padding: var(--pp4-space-3); }
}

/* ── Confirmar Ancoragem (modal do usuário) ─────────────────────────── */
.ax-conf {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 16px;
}
.ax-conf[hidden] { display: none; }
.ax-conf__fundo { position: absolute; inset: 0; background: rgba(2,6,12,.78); backdrop-filter: blur(3px); }
.ax-conf__caixa {
  position: relative;
  width: min(440px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 16px;
  background: #0f1720;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  color: #e8eef7;
}
.ax-conf__topo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.ax-conf__topo h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #fff; }
.ax-conf__x {
  margin-left: auto; border: 0; background: transparent;
  color: #8b9bb4; font-size: 1rem; cursor: pointer; padding: 4px;
}
.ax-conf__x:hover { color: #e8eef7; }
.ax-conf__jogo { margin: 0 0 2px; color: #cbd5e1; font-size: .86rem; font-weight: 600; }
.ax-conf__linha { margin: 0 0 2px; color: #8b9bb4; font-size: .8rem; }
.ax-conf__linha strong { color: #e8eef7; font-weight: 700; }
.ax-conf__campo { display: block; margin: 14px 0 6px; }
.ax-conf__campo span { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 700; color: #fff; }
.ax-conf__campo input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(34,211,180,.55);
  background: rgba(15,23,32,.9);
  color: #5eead4;
  font-size: 1rem;
  font-weight: 700;
}
.ax-conf__campo input:focus-visible { outline: 2px solid rgba(34,211,180,.5); outline-offset: 1px; }
.ax-conf__hint { margin: 0 0 14px; color: #8b9bb4; font-size: .72rem; line-height: 1.45; }
.ax-conf__quadro {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.10);
}
.ax-conf__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: .82rem;
}
.ax-conf__row span { color: #cbd5e1; }
.ax-conf__row strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-conf__row--riscado span,
.ax-conf__row--riscado strong { color: #64748b; text-decoration: line-through; }
.ax-conf--verde { color: #34d399 !important; }
.ax-conf--ambar { color: #fbbf24 !important; }
.ax-conf__nota { margin: 2px 0 0; color: #8b9bb4; font-size: .7rem; font-style: italic; }
.ax-conf__sep { height: 1px; margin: 10px 0; background: rgba(148,163,184,.14); }
.ax-conf__erro {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(244,63,94,.12);
  border: 1px solid rgba(244,63,94,.3);
  color: #fca5a5;
  font-size: .76rem;
  line-height: 1.4;
}
.ax-conf__acoes { display: flex; gap: 10px; margin-top: 16px; }
.ax-conf__btn {
  flex: 1 1 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .86rem;
  font-weight: 750;
  cursor: pointer;
  border: 1px solid transparent;
}
.ax-conf__btn--ghost { background: rgba(148,163,184,.12); color: #e8eef7; border-color: rgba(148,163,184,.2); }
.ax-conf__btn--ghost:hover { background: rgba(148,163,184,.2); }
.ax-conf__btn--ok { background: #14b8a6; color: #05231f; }
.ax-conf__btn--ok:hover { background: #0d9488; color: #fff; }
.ax-conf__btn--ok:disabled { background: rgba(148,163,184,.2); color: #64748b; cursor: not-allowed; }
