/* /assets/css/app.css */

/* ===== Reset básico ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#0b1024;
  --card:#0e1430;
  --text:#e6e8ef;
  --muted:#a8b0c3;
  --accent:#335cff;
  --accent-2:#1e2646;
  --chip:#1c2a64;
  --danger:#ef4444;
  --ok:#22c55e;
  --line:#121b3f;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

body.bg{
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial
}

/* ===== Topbar ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#0d1433,#0a112b);
  padding:14px 16px;border-bottom:1px solid #11193a
}
.brand{font-weight:700;font-size:18px}
.hamb{
  display:none;appearance:none;border:1px solid var(--accent-2);
  background:#0f1631;color:var(--text);border-radius:10px;
  padding:8px 12px;cursor:pointer
}
.links{display:flex;gap:10px;margin-left:auto}
.links a{
  color:#cfd7ff;text-decoration:none;padding:8px 12px;border-radius:10px;display:inline-block
}
.links a:hover{background:#10183b}
.links a.on{background:#17235a;color:#fff}

/* ===== Drawer (menu lateral) ===== */
.drawer{
  position:fixed;inset:0 auto 0 0;width:290px;background:#0d1433;
  border-right:1px solid #11193a;transform:translateX(-100%);transition:.25s ease;
  z-index:60;box-shadow:var(--shadow)
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #11193a}
.brand-sm{font-weight:700}
.drawer a{display:block;color:#dbe1ff;text-decoration:none;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.04)}
.drawer a:hover{background:#10183b}

/* ===== Container ===== */
.container{max-width:1100px;margin:16px auto;padding:0 16px}

/* ===== PWA banner (dentro do container) ===== */
.pwa-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#2756ff;color:#fff;border-radius:14px;padding:12px 14px;
  box-shadow:var(--shadow);margin:8px 0 12px 0
}
.pwa-banner.hidden{display:none}
.pwa-actions button{appearance:none;border:0;border-radius:12px;padding:10px 14px;cursor:pointer}
#btnInstall{background:#fff;color:#1b2b6e}
#btnClose{background:#2a396f;color:#fff}

/* ===== Títulos ===== */
h1,h2,h3{margin:0 0 14px}
h1{font-size:34px}
h2{font-size:22px;color:#cfd7ff}

/* ===== Botões ===== */
.btn{
  appearance:none;border:0;border-radius:14px;background:var(--accent);
  color:#fff;padding:12px 16px;font-weight:600;cursor:pointer;display:inline-block
}
.btn.ghost{background:#0f1631;border:1px solid var(--accent-2);color:#dbe1ff}
.btn.sm{padding:8px 10px;border-radius:10px;font-size:14px}
.btn.danger{background:var(--danger)}

/* ===== Tabela genérica ===== */
.table-wrap{overflow:auto;border:1px solid #11193a;border-radius:14px}
.tbl{border-collapse:collapse;width:100%;min-width:760px;background:var(--card)}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl thead th{position:sticky;top:0;background:#0f1738;text-align:left;color:#cfd7ff}
.nowrap{white-space:nowrap}

/* ===== Chips ===== */
.chip{
  display:inline-block;background:var(--chip);border:1px solid #263a8a;color:#dbe1ff;
  padding:6px 10px;border-radius:12px;font-size:13px
}

/* ===== Cartões e formulários ===== */
.card{background:var(--card);border:1px solid var(--accent-2);border-radius:14px;padding:16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:14px;color:#cfd7ff}
.field small{color:#98a2b3}
input,select{
  width:100%;background:#0f1631;color:#e6e8ef;border:1px solid var(--accent-2);
  border-radius:10px;padding:10px
}

/* ===== Rodapé ===== */
.foot{border-top:1px solid #11193a;margin-top:24px;padding:18px 16px;color:#a8b0c3;text-align:center}

/* ===== Responsivo ===== */
@media (max-width:768px){
  .links{display:none}
  .hamb{display:inline-block}
  .grid{grid-template-columns:1fr}
  h1{font-size:28px}
  .pwa-banner{padding:10px 12px}
}
@media (min-width:769px){
  .drawer{display:none!important}
}

/* ====== Tabela de CLASSIFICAÇÃO ====== */
.table{overflow-x:auto}
.table .rank{
  width:100%;
  min-width:720px;              /* garante espaço mínimo no mobile */
  border-collapse:collapse;
  table-layout:auto;            /* <<< chave para NÃO colar as colunas */
  background:var(--card)
}
.table .rank th,.table .rank td{
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  vertical-align:middle;
  font-size:15px;
  line-height:1.25;
}
.table .rank th{
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;           /* títulos em linha única, sem “colar” letras */
  letter-spacing:0;
  word-spacing:0;
  text-align:center;
}
.table .rank th.pos,.table .rank td.pos{width:48px;text-align:center}
.table .rank th.team,.table .rank td.team{
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;       /* nomes longos quebram bonito */
  word-break:normal;
}
.table .rank th.num,.table .rank td.num{
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.table .rank td.pontos b{display:inline-block;min-width:2ch}

/* Mobile */
@media (max-width:720px){
  .table .rank{min-width:680px}
  .table .rank th,.table .rank td{font-size:14px;padding:10px 6px}
}