/* predictr - small overrides on top of Bootstrap 5.3 */

/* Team flag + name pair (used in games table). */
.team-flag {
  flex-shrink: 0;
  background-color: var(--bs-tertiary-bg);
  object-fit: cover;
}

/* Placeholder for unknown teams (knockout stage TBD) */
.placeholder-flag {
  width: 28px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  background-color: var(--bs-tertiary-bg);
}

.team-name {
  font-weight: 500;
}

/* Slight visual lift for the group header inside cards. */
.card-header .badge {
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

/* Anonymous home hero emblem.
 *
 * On >=sm viewports the emblem sits in a side column next to the CTAs and
 * uses its full 180px height. Below sm the two columns stack and the
 * emblem would otherwise dominate the (now full-width) card, so we cap it
 * at 110px. Bootstrap 5's `sm` breakpoint is 576px, so the max-width
 * threshold is 575.98px (matching their other "below sm" media queries).
 */
.home-hero-emblem {
  height: auto;
  max-height: 180px;
  width: auto;
}
@media (max-width: 575.98px) {
  .home-hero-emblem {
    max-height: 110px;
  }
}

/* Tighten table padding a touch on dense rows. */
.table > tbody > tr > td,
.table > tbody > tr > th {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* Fixtures tables (/games and /bets).
 *
 * Each group renders its own <table>, so with the default auto layout the
 * browser sizes every group's columns independently from that group's
 * content. That makes the columns drift out of alignment from one group to
 * the next. A fixed layout plus a shared <colgroup> pins every column to
 * the same width, so all groups line up identically down the whole page.
 *
 * The min-width keeps the columns legible on narrow viewports; the
 * surrounding .table-responsive wrapper turns the overflow into a
 * horizontal scroll rather than crushing the cells.
 */
.fixtures-table {
  table-layout: fixed;
  min-width: 48rem;
}
.fixtures-table--bets {
  min-width: 56rem;
}
.fixtures-table .col-num {
  width: 3.5rem;
}
.fixtures-table .col-kickoff {
  width: 9rem;
}
.fixtures-table .col-score {
  width: 6rem;
}
.fixtures-table .col-venue {
  width: 12rem;
}
.fixtures-table .col-bet {
  width: 8.5rem;
}
.fixtures-table .col-points {
  width: 5rem;
}
.fixtures-table .col-others {
  width: 4.5rem;
}
/* The two team columns carry no explicit width, so a fixed layout splits
 * the remaining space equally between home and away. */

/* Special-questions table (/questions). The answer column and its inline
 * text input need enough room on desktop; the phone media query below
 * relaxes both so the row can fit a narrow screen. */
.questions-table .col-answer {
  min-width: 12rem;
}
.answer-form .answer-input {
  min-width: 8rem;
}

/* Compact score inputs: two small number boxes joined by ':'. Scores run
 * 0-99 (see MIN_SCORE/MAX_SCORE), so the box only ever holds two digits
 * and can stay narrow. */
.bet-form .bet-score,
.admin-score {
  width: 2.75rem;
  padding-inline: 0.4rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.bet-form .bet-score::-webkit-outer-spin-button,
.bet-form .bet-score::-webkit-inner-spin-button,
.admin-score::-webkit-outer-spin-button,
.admin-score::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Compact fixtures on phones (below Bootstrap's md breakpoint, 768px).
 *
 * The desktop tables force a min-width (48rem/56rem) and scroll
 * horizontally on a phone, which is awkward. Below md we drop that
 * floor and let the table size to the viewport instead. The templates
 * collapse spelled-out team names to FIFA codes, trim the kickoff to
 * "weekday day month, time", and hide the # and venue columns (via
 * d-none/d-md-table-cell), so what is left fits a narrow screen without
 * a horizontal scroll.
 *
 * table-layout switches to auto so the now-tiny content drives the
 * column widths, and the fixed <colgroup> widths are reset to auto for
 * the same reason. Cross-group alignment is intentionally relaxed here:
 * each group is its own card on a phone, so any drift between cards is
 * not noticeable. Cell padding tightens a touch to claw back more room.
 *
 * The header row is dropped entirely on phones: with codes + flags, a
 * score, and the bet form, the columns read for themselves, and the
 * reclaimed vertical/horizontal room matters more than the labels.
 */
@media (max-width: 767.98px) {
  .fixtures-table,
  .fixtures-table--bets {
    table-layout: auto;
    min-width: 0;
    --bs-table-cell-padding-x: 0.4rem;
  }
  .fixtures-table thead {
    display: none;
  }
  .fixtures-table .col-num,
  .fixtures-table .col-kickoff,
  .fixtures-table .col-score,
  .fixtures-table .col-venue,
  .fixtures-table .col-bet,
  .fixtures-table .col-points,
  .fixtures-table .col-others {
    width: auto;
  }
  .bet-form .bet-score {
    width: 2.4rem;
  }

  /* The compact kickoff ("Mi 11. Jun, 21:00") can break at every space,
   * so in a squeezed column it collapses into three or four lines. A
   * min-width wide enough for two words per line caps it at two lines:
   * the date on the first, the time on the second. */
  .kickoff-compact {
    display: inline-block;
    min-width: 5.5rem;
  }

  /* /questions gets the same compact treatment: tighter padding, a
   * wrapping (rather than forced-wide) answer column, and a smaller
   * inline answer input, so the row fits a phone without scrolling. The
   * deadline, correct-answer, and "worth" columns are hidden or trimmed
   * via utilities in the template. */
  .questions-table,
  .home-upcoming-table {
    --bs-table-cell-padding-x: 0.4rem;
  }
  .questions-table .col-answer {
    min-width: 7rem;
  }
  .answer-form .answer-input {
    min-width: 5rem;
  }
}

/* "saved" badge: fade out after a few seconds without a JS hook. */
@keyframes bet-saved-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
.bet-saved-flag {
  animation: bet-saved-fade 3s ease-out forwards;
}

/* /info page - Markdown-rendered rules content.
 *
 * Bootstrap doesn't apply .table styles to bare <table> tags emitted by
 * markdown.py, so we re-add the borders/striping locally. The h2/h3
 * margins also need a bit more breathing room since the source is plain
 * Markdown ("## Heading\n\nbody...") rather than the structured cards
 * elsewhere on the site.
 */
.rules-content h2 {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.rules-content h2:first-child {
  margin-top: 0;
}
.rules-content h3 {
  font-size: 1.15rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.rules-content p,
.rules-content ul,
.rules-content ol {
  margin-bottom: 1rem;
}
.rules-content table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}
.rules-content table th,
.rules-content table td {
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--bs-border-color);
}
.rules-content table thead th {
  border-top: 0;
  border-bottom: 2px solid var(--bs-border-color);
  text-align: left;
  font-weight: 600;
}
.rules-content code {
  background-color: var(--bs-tertiary-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
}
.rules-content pre {
  background-color: var(--bs-tertiary-bg);
  padding: 0.75rem 1rem;
  border-radius: 0.4rem;
  overflow-x: auto;
}