/* ==========================================================================
   GM SPORTS — KIT DE LAYOUT (composicao, nao decoracao)

   Regra unica: o conteudo define o tamanho. Nada de container grande para
   informacao pequena. Medido em 390, 768, 1280 e 1920.

   Carrega DEPOIS das folhas de tela e so define estrutura.
   Contrato completo em docs/DESIGN.md.
   ========================================================================== */

:root {
  --page-max: 1200px;
  --page-max-wide: 1320px;
  --kit-gap: 16px;
  --kit-gap-lg: 24px;
  --kit-field-min: 12rem;
  --kit-field-max: 22rem;
  --kit-void: 48px;
}

/* 1. Coluna de conteudo -------------------------------------------------- */
.stadium-app .board .main,
.modern-shell .board .main {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw, 32px);
}

.kit-wide .main {
  max-width: var(--page-max-wide);
}

/* 2. Faixa de metricas: tamanho vem do conteudo -------------------------- */
.kit-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--kit-gap-lg);
}

.kit-strip > * {
  flex: 0 1 auto;
  min-width: 0;
}

/* 3. Linha de campos: nunca esticada ------------------------------------ */
.kit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kit-field-min), max-content));
  justify-content: start;
  align-items: end;
  gap: var(--kit-gap);
}

.kit-fields select,
.kit-fields input {
  width: min(100%, var(--kit-field-max));
  min-width: var(--kit-field-min);
}

/* 4. Grupo: itens relacionados a no maximo 24px -------------------------- */
.kit-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-gap);
}

.kit-group--stack {
  flex-direction: column;
  align-items: stretch;
}

/* 5. Tabela: colunas com largura definida, sem coluna vazia -------------- */
.kit-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.kit-table th,
.kit-table td {
  padding-inline: 8px;
}

.kit-table .col-name { width: auto; }

.kit-table .col-num {
  width: 4.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kit-table .col-score {
  width: 5.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.kit-table .col-action {
  width: 6rem;
  text-align: center;
}

/* 6. Card so quando agrupa conteudo: sem altura minima artificial -------- */
.kit-card {
  display: flex;
  flex-direction: column;
  gap: var(--kit-gap);
  min-height: 0;
  height: auto;
  align-self: start;
  padding: clamp(16px, 1.6vw, 24px);
}

/* 7. Nada de vazio no meio ---------------------------------------------- */
.kit-start {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* 8. Grades de cards: cada card com a altura do seu conteudo ------------- */
.stadium-app .board .main .finance-columns,
.modern-shell .board .main .finance-columns {
  align-items: start;
}

/* 10. Barra superior: a busca tem o tamanho de um campo, nao da barra ----- */
.stadium-app header.topbar > .topbar-left > .search,
.modern-shell header.topbar > .topbar-left > .search {
  flex: 0 1 20rem;
  max-width: 20rem;
  min-width: 11rem;
}
@media (max-width: 900px) {
  .stadium-app header.topbar > .topbar-left > .search,
  .modern-shell header.topbar > .topbar-left > .search {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* 10b. Barra superior estreita: tres linhas, nao quatro ------------------ */
@media (max-width: 900px) {
  .stadium-app > header.topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    min-height: 0;
    padding: 10px 12px;
  }
  .stadium-app > header.topbar > .club-identity { grid-area: 1 / 1 / 2 / 2; }
  .stadium-app > header.topbar > .topbar-actions { display: contents; }
  .stadium-app > header.topbar > .topbar-actions .user-links {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: end;
    align-self: center;
  }
  .stadium-app > header.topbar > .topbar-left {
    display: flex;
    grid-area: 2 / 1 / 3 / 3;
  }
  .stadium-app > header.topbar > .topbar-actions .chips.club-chips {
    grid-area: 3 / 1 / 4 / 4;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* 9. Linha vazia no lugar de card vazio --------------------------------- */
.stadium-app .board .main .fin-empty-line,
.modern-shell .board .main .fin-empty-line {
  margin: 0;
  padding: 8px 0;
  color: var(--muted);
  font-size: .9rem;
}

/* 12. Fundo tematico por tela ------------------------------------------- */
/* A arte cobre o quadro externo (.board) de ponta a ponta com crop
   e degrade deliberados, mantendo o conteudo (.main) e cards na largura
   confortavel de 1200px, sem distorcer imagens nem gerar vazios laterais. */
.stadium-app > .board,
.modern-shell .board {
  position: relative;
  overflow: hidden;
  --view-photo: url('/assets/stadium-guache-900.webp');
  /* Some of the art (patrocinio, tatica, base) has a pale paper border painted into the file (about 3% at the sides, 5% at the top and bottom). The photo layer is
     therefore LARGER than the visible band by --photo-bleed on the top, left and right (the board's overflow: hidden cuts the excess), so cover scales the art up
     and that border falls outside the box; the visible band, its height and its gradient stay where they were. */
  --photo-bleed: clamp(28px, 4.5vw, 80px);
  --photo-band: clamp(360px, 40vw, 540px);
}

.stadium-app > .board::before,
.modern-shell .board::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--photo-bleed));
  left: calc(-1 * var(--photo-bleed));
  right: calc(-1 * var(--photo-bleed));
  height: calc(var(--photo-band) + var(--photo-bleed));
  background-image:
    linear-gradient(180deg,
      rgba(7, 25, 34, 0.40) var(--photo-bleed),
      rgba(7, 25, 34, 0.72) calc(var(--photo-bleed) + var(--photo-band) * 0.41),
      rgba(8, 29, 38, 0.94) calc(var(--photo-bleed) + var(--photo-band) * 0.74),
      #081d26 100%),   /* the stops follow the band (they were 220 / 400 px of a 540 px band), so on a phone the art also fades out to solid at the band's end */
    var(--view-photo);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

@media (max-width: 760px) {
  .stadium-app > header.topbar > .club-identity {
    justify-self: stretch;
    width: 100%;
  }
  .stadium-app > .board,
  .modern-shell .board { --photo-band: clamp(240px, 50vw, 340px); }
  .stadium-app > header.topbar > .club-identity > .club-details {
    flex: 1 1 0;
    text-align: center;
  }
  .stadium-app > header.topbar > .club-identity .club {
    text-align: center;
  }
}

.stadium-app > .board > .main,
.modern-shell .board > .main {
  position: relative;
  z-index: 1;
}

main.main[data-view],
main.main {
  background-image: none !important;
}

:is(.board[data-view="financas"], .board:has(> .main[data-view="financas"])) { --view-photo: url(/assets/themes/financas.webp); }
:is(.board[data-view="elenco"], .board:has(> .main[data-view="elenco"])) { --view-photo: url(/assets/themes/elenco.webp); }
:is(.board[data-view="tatica"], .board:has(> .main[data-view="tatica"])) { --view-photo: url(/assets/themes/tatica.webp); }
:is(.board[data-view="treino"], .board:has(> .main[data-view="treino"])) { --view-photo: url(/assets/themes/treino.webp); }
:is(.board[data-view="base"], .board:has(> .main[data-view="base"])) { --view-photo: url(/assets/themes/base.webp); }
:is(.board[data-view="mercado"], .board:has(> .main[data-view="mercado"])) { --view-photo: url(/assets/themes/mercado.webp); }
:is(.board[data-view="liga"], .board:has(> .main[data-view="liga"])) { --view-photo: url(/assets/themes/liga.webp); }
:is(.board[data-view="copa"], .board:has(> .main[data-view="copa"])) { --view-photo: url(/assets/themes/copa.webp); }
:is(.board[data-view="internacional"], .board:has(> .main[data-view="internacional"])) { --view-photo: url(/assets/themes/internacional.webp); }
:is(.board[data-view="mensagens"], .board:has(> .main[data-view="mensagens"])) { --view-photo: url(/assets/themes/mensagens.webp); }
:is(.board[data-view="estadio"], .board:has(> .main[data-view="estadio"])) { --view-photo: url(/assets/themes/estadio.webp); }
:is(.board[data-view="patrocinio"], .board:has(> .main[data-view="patrocinio"])) { --view-photo: url(/assets/themes/patrocinio.webp); }

/* 13. Sem rolagem horizontal no celular -------------------------------- */
/* Um bleed de 4px dentro de um cartao virava barra de rolagem na pagina
   inteira. clip nao cria contexto de rolagem, entao sticky continua vivo. */
main.main { overflow-x: clip; }

/* Painel: nome de time dentro de grid precisa poder encolher. */
.stadium-app .dashboard .results .result-teams > * { min-width: 0; }
.stadium-app .dashboard .results .result-teams .team-label { min-width: 0; }
.stadium-app .dashboard .results .rt-mark { flex: 0 0 auto; }
.stadium-app .dashboard .results .result-row { overflow: hidden; }

/* Elenco: a linha de nota, idade e salario quebra em vez de empurrar. */
.gm-squad .squad-card-meta { flex-wrap: wrap; min-width: 0; }
.gm-squad .squad-card-info { min-width: 0; }

/* Tatica: a borda do campo somava 6px a largura de 100%. */
.tactics-page .pitch { box-sizing: border-box; }

/* O nome era um item de grid com justify-self, entao crescia alem da
   coluna e empurrava a linha. max-width prende no trilho. */
.stadium-app .dashboard .results .team-label { max-width: 100%; }

/* (The phone rules of the pitch (width, disc and name sizes) moved into the grid pitch of styles-tactics.css: they sized an absolute-position field that no longer exists.) */

/* Mercado: "transferencias" numa palavra so nao cabia no titulo do hero. */
.gm-hero h1, .gm-hero h2 { overflow-wrap: anywhere; white-space: normal; }
.gm-hero { min-width: 0; }