/* ============================================================
   PEPEBET — Design Tokens (fonte da verdade)
   Tema único: dark. Acento: verde-limão do mascote.
   Uso: <link rel="stylesheet" href="/static/css/pepebet.css">
   ============================================================ */

:root {
  /* ---------- Marca (verde-limão, extraído do logo) ---------- */
  --pb-brand-50:  #F0FDE7;
  --pb-brand-100: #DDFAC7;
  --pb-brand-200: #BBF391;
  --pb-brand-300: #93E857;
  --pb-brand-400: #6FDC2E;  /* hover, glow, número positivo */
  --pb-brand-500: #52C21C;  /* PRIMÁRIO — CTA, item ativo */
  --pb-brand-600: #3F9E14;  /* pressed */
  --pb-brand-700: #2F7712;
  --pb-brand-800: #265E14;
  --pb-brand-900: #1D4A13;
  --pb-brand-950: #0A2007;

  /* ---------- Superfícies (neutro com leve cast verde) ---------- */
  --pb-canvas:    #070907;  /* fundo da página, atrás do shell */
  --pb-shell:     #0F110F;  /* container do app */
  --pb-rail:      #141814;  /* barra lateral de ícones */
  --pb-surface-1: #161916;  /* card padrão */
  --pb-surface-2: #1C201C;  /* input, hover de card, nested */
  --pb-surface-3: #242A24;  /* chip, odds, hover de linha */

  --pb-line:        rgba(255, 255, 255, 0.06); /* borda padrão */
  --pb-line-strong: rgba(255, 255, 255, 0.11); /* borda em hover/foco */
  --pb-line-brand:  rgba(111, 220, 46, 0.28);  /* borda de destaque */

  /* ---------- Texto ---------- */
  --pb-text-hi:  #F1F5F1;  /* títulos, odds, valores */
  --pb-text-mid: #A2ADA2;  /* labels, secundário */
  --pb-text-lo:  #6B756B;  /* meta, desabilitado */
  --pb-text-on-brand: #06210A; /* texto sobre preenchimento verde */

  /* ---------- Semânticas ---------- */
  --pb-pos:  #6FDC2E;  /* lucro, CLV+, odd subindo  (= brand-400) */
  --pb-neg:  #FF5C5C;  /* prejuízo, CLV−, destrutivo */
  --pb-warn: #FFB020;  /* atenção, linha defasada, amostra curta */
  --pb-info: #4CC2FF;  /* informativo, mercado sharp */
  --pb-live: #FF7A1A;  /* AO VIVO (laranja — vermelho é só perda) */

  --pb-pos-bg:  rgba(111, 220, 46, 0.12);
  --pb-neg-bg:  rgba(255, 92, 92, 0.12);
  --pb-warn-bg: rgba(255, 176, 32, 0.12);
  --pb-info-bg: rgba(76, 194, 255, 0.12);
  --pb-live-bg: rgba(255, 122, 26, 0.14);

  /* ---------- Gradientes e brilho ---------- */
  --pb-grad-hero:  linear-gradient(118deg, #0C3013 0%, #175E22 48%, #2E9A32 100%);
  --pb-grad-brand: linear-gradient(180deg, #6FDC2E 0%, #45A616 100%);
  --pb-grad-fade:  linear-gradient(180deg, rgba(22,25,22,0) 0%, #161916 85%);
  --pb-ambient:    radial-gradient(70% 55% at 50% -8%, rgba(82,194,28,0.20), transparent 72%);
  --pb-glow-brand: 0 8px 30px -8px rgba(82, 194, 28, 0.45);
  --pb-glow-soft:  0 0 0 1px rgba(111, 220, 46, 0.25);

  /* ---------- Raios ---------- */
  /* O app é full-bleed: não existe raio de "shell". Raio grande só em overlay/modal. */
  --pb-r-modal: 20px;
  --pb-r-card:  18px;
  --pb-r-panel: 14px;
  --pb-r-input: 12px;
  --pb-r-chip:  10px;
  --pb-r-pill:  999px;

  /* ---------- Elevação ---------- */
  --pb-e1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --pb-e2: 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --pb-e3: 0 24px 60px -24px rgba(0, 0, 0, 0.85);

  /* ---------- Tipografia ---------- */
  --pb-font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --pb-font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---------- Movimento ---------- */
  --pb-t-fast: 140ms;
  --pb-t-base: 200ms;
  --pb-t-slow: 320ms;
  --pb-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Layout ---------- */
  --pb-rail-w:   72px;
  --pb-topbar-h: 68px;
  --pb-col-l:    280px;
  --pb-col-r:    380px;
  --pb-gap:      20px;
  --pb-pad:      24px;
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pb-canvas);
  color: var(--pb-text-hi);
  font-family: var(--pb-font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before { /* brilho ambiente verde no topo da tela */
  content: '';
  position: fixed;
  inset: 0;
  background: var(--pb-ambient);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, .pb-display {
  font-family: var(--pb-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Todo número (odd, linha, probabilidade, desvio, CLV) usa tabular-nums */
.pb-num, table td, input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.pb-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pb-text-lo);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--pb-canvas), 0 0 0 4px var(--pb-brand-400);
  border-radius: var(--pb-r-chip);
}

::selection { background: var(--pb-brand-700); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--pb-surface-3);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #37403700; background-color: #384038; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Estrutura — full-bleed (o app ocupa a tela inteira)
   Sem container arredondado, sem "card gigante", sem max-width:
   rail colado na esquerda, topbar colada no topo, conteúdo até as bordas.
   ============================================================ */

.pb-app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* Rail — coluna fixa de ícones, altura total da janela */
.pb-rail {
  position: sticky; top: 0;
  height: 100vh;
  width: var(--pb-rail-w);
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 0;
  background: var(--pb-shell);
  border-right: 1px solid var(--pb-line);
  z-index: 20;
}
.pb-rail__item {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--pb-r-chip);
  color: var(--pb-text-lo);
  transition: background var(--pb-t-fast) var(--pb-ease), color var(--pb-t-fast) var(--pb-ease);
}
.pb-rail__item:hover { background: var(--pb-surface-2); color: var(--pb-text-hi); }
.pb-rail__item--active { background: var(--pb-surface-2); color: var(--pb-text-hi); }
.pb-rail__item--active::before {
  content: ''; position: absolute; left: -14px;
  width: 3px; height: 24px; border-radius: 0 3px 3px 0;
  background: var(--pb-brand-500); box-shadow: var(--pb-glow-brand);
}
.pb-rail__spacer { margin-top: auto; }

/* Coluna principal */
.pb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar — largura total, colada no topo, logo completa à esquerda */
.pb-topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 24px;
  height: var(--pb-topbar-h);
  padding: 0 var(--pb-pad);
  background: color-mix(in srgb, var(--pb-shell) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pb-line);
}
@supports not (backdrop-filter: blur(10px)) { .pb-topbar { background: var(--pb-shell); } }

/* Conteúdo — sem max-width, respira até a borda */
.pb-content { flex: 1; padding: var(--pb-pad); }

/* Grid de 3 colunas */
.pb-grid {
  display: grid;
  grid-template-columns: var(--pb-col-l) minmax(0, 1fr) var(--pb-col-r);
  gap: var(--pb-gap);
  align-items: start;
}
.pb-grid > * { min-width: 0; }
.pb-col { display: flex; flex-direction: column; gap: var(--pb-gap); min-width: 0; }

/* Rodapé de compliance */
.pb-footnote { padding: 0 var(--pb-pad) var(--pb-pad); font-size: 12px; color: var(--pb-text-lo); }

/* Navegação inferior (mobile) */
.pb-bottomnav { display: none; }

@media (max-width: 1439px) { :root { --pb-col-r: 340px; } }
@media (max-width: 1279px) {
  .pb-grid { grid-template-columns: var(--pb-col-l) minmax(0, 1fr); }
  .pb-grid > .pb-col--right { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 1023px) {
  :root { --pb-pad: 16px; }
  .pb-rail { display: none; }
  .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-grid > .pb-col--left { order: 2; }
  .pb-content { padding-bottom: 84px; }
  .pb-bottomnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    display: flex; justify-content: space-around;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--pb-shell) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--pb-line);
  }
  .pb-bottomnav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 10px; font-size: 11px; color: var(--pb-text-lo); text-decoration: none;
  }
  .pb-bottomnav a.is-active { color: var(--pb-brand-400); }
}

/* ============================================================
   Componentes — classes .pb-*
   ============================================================ */

/* ---------- Card ---------- */
.pb-card {
  background: var(--pb-surface-1);
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-r-card);
  padding: 20px;
  box-shadow: var(--pb-e1);
}
.pb-card--interactive { transition: border-color var(--pb-t-fast) var(--pb-ease), transform var(--pb-t-fast) var(--pb-ease); cursor: pointer; }
.pb-card--interactive:hover { border-color: var(--pb-line-strong); transform: translateY(-1px); }
.pb-card--brand { border-color: var(--pb-line-brand); box-shadow: var(--pb-e1), var(--pb-glow-soft); }
.pb-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}

/* ---------- Botões ---------- */
.pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--pb-r-pill);
  font: 600 14px/1 var(--pb-font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--pb-t-fast) var(--pb-ease),
              box-shadow var(--pb-t-fast) var(--pb-ease),
              border-color var(--pb-t-fast) var(--pb-ease);
}
.pb-btn--primary {
  background: var(--pb-brand-500);
  color: var(--pb-text-on-brand);
}
.pb-btn--primary:hover { background: var(--pb-brand-400); box-shadow: var(--pb-glow-brand); }
.pb-btn--primary:active { background: var(--pb-brand-600); box-shadow: none; }

.pb-btn--secondary {
  background: var(--pb-surface-2);
  color: var(--pb-text-hi);
  border-color: var(--pb-line);
}
.pb-btn--secondary:hover { background: var(--pb-surface-3); border-color: var(--pb-line-strong); }

.pb-btn--ghost { background: transparent; color: var(--pb-text-mid); }
.pb-btn--ghost:hover { background: var(--pb-surface-2); color: var(--pb-text-hi); }

.pb-btn--danger { background: transparent; color: var(--pb-neg); border-color: rgba(255,92,92,0.35); }
.pb-btn--danger:hover { background: var(--pb-neg-bg); }

.pb-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.pb-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ---------- Input / busca ---------- */
.pb-input {
  width: 100%; height: 40px;
  padding: 0 14px;
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-r-input);
  color: var(--pb-text-hi);
  font: 400 14px/1 var(--pb-font-ui);
  transition: border-color var(--pb-t-fast) var(--pb-ease);
}
.pb-input::placeholder { color: var(--pb-text-lo); }
.pb-input:hover { border-color: var(--pb-line-strong); }
.pb-input:focus { border-color: var(--pb-brand-600); outline: none; box-shadow: 0 0 0 3px rgba(82,194,28,0.15); }
.pb-search { height: 44px; border-radius: var(--pb-r-pill); padding-left: 44px; }

/* ---------- Odd (chip de cotação) ---------- */
.pb-odd {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 84px; height: 36px; padding: 0 12px;
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-r-chip);
  cursor: pointer;
  transition: background var(--pb-t-fast) var(--pb-ease), border-color var(--pb-t-fast) var(--pb-ease);
}
.pb-odd__label { font-size: 12px; color: var(--pb-text-lo); }
.pb-odd__value { font-size: 14px; font-weight: 600; color: var(--pb-text-hi); font-variant-numeric: tabular-nums; }
.pb-odd:hover { background: var(--pb-surface-3); border-color: var(--pb-line-strong); }
.pb-odd--selected { background: rgba(82,194,28,0.14); border-color: var(--pb-brand-600); }
.pb-odd--selected .pb-odd__value { color: var(--pb-brand-300); }
.pb-odd--up   .pb-odd__value { color: var(--pb-pos); }
.pb-odd--down .pb-odd__value { color: var(--pb-neg); }

/* ---------- Badge de desvio modelo × mercado (3 níveis) ---------- */
.pb-edge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px;
  border-radius: var(--pb-r-pill);
  font: 700 12px/1 var(--pb-font-ui);
  font-variant-numeric: tabular-nums;
}
.pb-edge--low  { background: var(--pb-pos-bg); color: var(--pb-brand-300); }        /* +3% a +5% */
.pb-edge--mid  { background: var(--pb-brand-500); color: var(--pb-text-on-brand); } /* +5% a +8% */
.pb-edge--high { background: var(--pb-grad-brand); color: var(--pb-text-on-brand); box-shadow: var(--pb-glow-brand); } /* ≥ +8% */

/* DEPRECADO: `.pb-ev` era o nome anterior (badge de EV). Mantido só para não quebrar
   templates escritos antes da renomeação — migrar para `.pb-edge` e remover daqui. */
.pb-ev        { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px;
                border-radius: var(--pb-r-pill); font: 700 12px/1 var(--pb-font-ui);
                font-variant-numeric: tabular-nums; }
.pb-ev--low   { background: var(--pb-pos-bg); color: var(--pb-brand-300); }
.pb-ev--mid   { background: var(--pb-brand-500); color: var(--pb-text-on-brand); }
.pb-ev--high  { background: var(--pb-grad-brand); color: var(--pb-text-on-brand); box-shadow: var(--pb-glow-brand); }

/* ---------- Badge genérico ---------- */
.pb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--pb-r-pill);
  font: 600 12px/1 var(--pb-font-ui);
  background: var(--pb-surface-3); color: var(--pb-text-mid);
}
.pb-badge--live { background: var(--pb-live-bg); color: var(--pb-live); }
.pb-badge--pos  { background: var(--pb-pos-bg);  color: var(--pb-pos); }
.pb-badge--neg  { background: var(--pb-neg-bg);  color: var(--pb-neg); }
.pb-badge--warn { background: var(--pb-warn-bg); color: var(--pb-warn); }
.pb-badge--info { background: var(--pb-info-bg); color: var(--pb-info); }

.pb-dot-live {
  width: 6px; height: 6px; border-radius: 999px; background: var(--pb-live);
  box-shadow: 0 0 0 0 rgba(255,122,26,0.6);
  animation: pb-pulse 1.8s var(--pb-ease) infinite;
}
@keyframes pb-pulse {
  70%  { box-shadow: 0 0 0 6px rgba(255,122,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,122,26,0); }
}

/* ---------- Variação (pp, movimento de linha, CLV) ---------- */
.pb-delta { font-variant-numeric: tabular-nums; font-weight: 600; }
.pb-delta--pos { color: var(--pb-pos); }
.pb-delta--neg { color: var(--pb-neg); }
.pb-delta--flat { color: var(--pb-text-lo); }

/* ---------- Barra modelo × mercado ---------- */
.pb-bar { height: 6px; border-radius: 999px; background: var(--pb-surface-3); overflow: hidden; }
.pb-bar__fill { height: 100%; border-radius: 999px; background: var(--pb-grad-brand); transition: width var(--pb-t-slow) var(--pb-ease); }
.pb-bar__fill--market { background: var(--pb-info); opacity: 0.7; }

/* ---------- Aba / pill de navegação ---------- */
.pb-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: var(--pb-r-pill);
  font: 500 14px/1 var(--pb-font-ui);
  color: var(--pb-text-mid);
  cursor: pointer;
  transition: background var(--pb-t-fast) var(--pb-ease), color var(--pb-t-fast) var(--pb-ease);
}
.pb-tab:hover { background: var(--pb-surface-2); color: var(--pb-text-hi); }
.pb-tab--active { background: var(--pb-surface-3); color: var(--pb-text-hi); font-weight: 600; }

/* ---------- Linha de tabela ---------- */
.pb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pb-table th {
  text-align: left; padding: 10px 12px;
  font: 600 11.5px/1 var(--pb-font-ui);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-text-lo);
  border-bottom: 1px solid var(--pb-line);
}
.pb-table td { padding: 14px 12px; border-bottom: 1px solid var(--pb-line); font-size: 14px; }
.pb-table tbody tr { transition: background var(--pb-t-fast) var(--pb-ease); }
.pb-table tbody tr:hover { background: var(--pb-surface-2); }
.pb-table td.pb-num-right { text-align: right; }

/* ---------- Skeleton ---------- */
.pb-skeleton {
  background: linear-gradient(90deg, var(--pb-surface-2) 25%, var(--pb-surface-3) 37%, var(--pb-surface-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--pb-r-chip);
  animation: pb-shimmer 1.4s ease-in-out infinite;
}
@keyframes pb-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Logo ---------- */
/* O PNG do logo tem fundo preto: `screen` derruba o preto sobre superfícies escuras. */
.pb-logo { mix-blend-mode: screen; display: block; }

/* Lockup completo no canto superior esquerdo — ocupa o lugar que seria da busca.
   É a assinatura da tela: nada mais compete com ele nessa faixa. */
.pb-brandbar { display: flex; align-items: center; flex: 0 0 auto; }
.pb-brandbar .pb-logo { height: 40px; width: auto; }
@media (max-width: 1023px) { .pb-brandbar .pb-logo { height: 30px; } }

/* Busca vira botão-ícone (⌘K) para não roubar espaço do logo. */
.pb-searchbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px 0 14px;
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-r-pill);
  color: var(--pb-text-lo);
  font: 400 13px/1 var(--pb-font-ui);
  cursor: pointer;
  transition: border-color var(--pb-t-fast) var(--pb-ease), color var(--pb-t-fast) var(--pb-ease);
}
.pb-searchbtn:hover { border-color: var(--pb-line-strong); color: var(--pb-text-mid); }
.pb-searchbtn kbd {
  font: 600 11px/1 var(--pb-font-ui);
  padding: 4px 6px; border-radius: 6px;
  background: var(--pb-surface-3); color: var(--pb-text-lo);
}

/* ---------- Tabela ordenável ---------- */
/* Cabeçalho clicável: a seta só aparece na coluna ativa; nas demais fica um
   indicador fantasma que surge no hover, para dizer "isto é clicável" sem
   poluir a linha de cabeçalho com nove setas. */
.pb-sortable thead th[data-tipo] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--pb-t-fast) var(--pb-ease);
}
.pb-sortable thead th[data-tipo]:hover { color: var(--pb-text-mid); }

.pb-sortable thead th[data-tipo]::after {
  content: '↓';
  display: inline-block;
  margin-left: 6px;
  opacity: 0;
  transition: opacity var(--pb-t-fast) var(--pb-ease), transform var(--pb-t-fast) var(--pb-ease);
}
.pb-sortable thead th[data-tipo]:hover::after { opacity: 0.35; }
.pb-sortable thead th[aria-sort="descending"],
.pb-sortable thead th[aria-sort="ascending"] { color: var(--pb-brand-400); }
.pb-sortable thead th[aria-sort="descending"]::after { opacity: 1; }
.pb-sortable thead th[aria-sort="ascending"]::after { opacity: 1; transform: rotate(180deg); }

/* Linha sem valor na coluna ordenada: vai para o fim e perde destaque, para
   não competir visualmente com as linhas que têm dado. */
.pb-sortable tbody tr.pb-sem-valor { opacity: 0.5; }