/* =====================
   TABS & LAYOUT (MOBILE-FIRST)
   ===================== */
:root{
  --bg:#0f1115;         /* fundo geral escuro neutro */
  --card:#151923;       /* cartões / containers */
  --muted:#8a93a6;      /* texto auxiliar */
  --on:#eaeff7;         /* texto principal */
  --brand:#4bb4ff;      /* cor de ação */
  --brand-2:#00d18f;    /* cor secundária */
  --danger:#ff5d5d;     /* erros/derrotas */
  --win:#00d18f;        /* vitórias/positivo */
  --draw:#f0c24b;       /* empate/aviso */

  /* Se você tem NAVBAR fixa no topo, ajuste a altura real aqui */
  :root { --navbar-h: 56px; } /* troque para 64/72px se sua navbar for maior */
}

body{ background:#0b0e13; color:var(--on); }


/* NAVBAR fixa (opcional, só para referência de z-index do Bootstrap) */
.navbar.fixed-top { z-index: 1030; }



.tabs-container{
  max-width:1100px;
  margin: 18px auto;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
}

/* HEADER das tabs vira uma *pílula* rolável no mobile */
.tabs-header{
  display:flex; gap:8px;
  padding:10px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; z-index:5;
  overflow:auto hidden; /* rolagem horizontal no mobile */
  scroll-snap-type:x proximity;
}
/*
.tab-btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none; border:0; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--on);
  padding:12px 16px; border-radius:999px;
  min-width: max(42%, 180px);
  font-weight:600; letter-spacing:.2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35) inset;
  border:1px solid rgba(255,255,255,.08);
  scroll-snap-align:center;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
*/

.tab-btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none; border:0; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--on);
  padding:8px 12px; /* antes era 12px 16px */
  border-radius:999px;
  min-width: auto; /* removendo largura mínima exagerada */
  font-size: 0.9rem; /* fonte um pouco menor */
  font-weight:600; letter-spacing:.2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35) inset;
  border:1px solid rgba(255,255,255,.08);
  scroll-snap-align:center;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

.tab-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.tab-btn:hover{ transform: translateY(-1px); }

.tab-btn.active{
  background: linear-gradient(180deg, rgba(75,180,255,.22), rgba(75,180,255,.10));
  border-color: rgba(75,180,255,.55);
}

/* pequeno led de estado */
.tab-btn[data-tab="tab1"].active::before{ content:""; width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; background:var(--brand); box-shadow:0 0 0 4px rgba(75,180,255,.15); }
.tab-btn[data-tab="tab2"].active::before{ content:""; width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; background:var(--brand-2); box-shadow:0 0 0 4px rgba(0,209,143,.15); }
.tab-btn[data-tab="tab3"].active::before{ content:""; width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; background:#f08b1d; box-shadow:0 0 0 4px rgba(240,139,29,.18); }

.tabs-content{ padding:18px; }

.tab-content{ display:none; animation:fadeIn .2s ease; }
.tab-content.active{ display:block; }

@keyframes fadeIn{ from{opacity:.65; transform: translateY(2px);} to{opacity:1; transform:none;} }

/* Listas e cartões de jogos */
.list-group .list-group-item{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  color:var(--on); border-color:rgba(255,255,255,.08);
  border-radius:12px; margin-bottom:10px; padding:14px 16px;
}

.badge{ border-radius:8px; padding:6px 10px; font-weight:700; letter-spacing:.3px; }
.badge-cs{ background:rgba(240,139,29,.18); color:#ffc884; border:1px solid rgba(240,139,29,.4); }
.badge-win{ background:rgba(0,209,143,.14); color:#a4f1dc; border:1px solid rgba(0,209,143,.45); }
.badge-draw{ background:rgba(240,194,75,.16); color:#ffe29c; border:1px solid rgba(240,194,75,.45); }
.badge-loss{ background:rgba(255,93,93,.16); color:#ffb5b5; border:1px solid rgba(255,93,93,.45); }

/* Tabelas densas: zebra + sticky head no mobile */
.table{ color:var(--on); border-color:rgba(255,255,255,.08); }
.table thead th{ position: sticky; top:0; background: #0f1320; z-index:1; }
.table-striped>tbody>tr:nth-of-type(odd){ background-color: rgba(255,255,255,.02); }
.table-hover>tbody>tr:hover{ background-color: rgba(75,180,255,.08); }

/* Grid de cards para relatórios (opcional) */
.grid-cards{ display:grid; grid-template-columns: repeat(12,1fr); gap:12px; }
.grid-12{ grid-column: span 12; }
.grid-6{ grid-column: span 6; }
.grid-4{ grid-column: span 4; }
.grid-3{ grid-column: span 3; }
@media (max-width: 992px){ .grid-6{grid-column:span 12;} .grid-4{grid-column:span 6;} .grid-3{grid-column:span 6;} }
@media (max-width: 540px){ .grid-4, .grid-3{grid-column:span 12;} }

/* Input de busca */
#filtro-jogos{ background:#0f1320; color:var(--on); border:1px solid rgba(255,255,255,.10); }
#filtro-jogos::placeholder{ color:var(--muted); }

/* HEADER das tabs: sólido, acima do conteúdo e logo abaixo de modais */
.tabs-header{
  position: sticky;
  top: var(--navbar-h);       /* evita ficar por baixo da navbar fixa */
  z-index: 1040;              /* > conteúdo e navbar, < modal (1050+) */
  background-color: #0f1320;  /* sólido, sem transparência */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Evita que o conteúdo “brigue” pelo topo */
.tabs-content{ position: relative; z-index: 1; }

/* Garante que cards normais não ultrapassem o header */
.card{ position: relative; z-index: 1; }