/* ==========================================================================
   AFL theme
   Palette: deep navy (navbar/structure), Sherrin red (links/actions), and
   light azure (hovers/highlights) - the same family of colours the league's
   own site lives in, with our own values rather than a copy. Red is kept to
   text and controls; headings and the navbar carry no red rule. Bootstrap
   defaults are overridden at the component level (not via --bs-primary)
   since Bootstrap 5.3's stock CSS hardcodes colours per-component rather
   than deriving them from the root variable.
   ========================================================================== */
:root {
  --afl-navy: #0d2240;
  --afl-navy-dark: #081831;
  --afl-red: #d2232a;
  --afl-red-dark: #a5181d;
  --afl-azure: #7db3e8;
  --afl-azure-dark: #4a8ed6;
}

body {
  background-color: #f7f9fc;
}

/* Bootstrap underlines every link by default; on pages that are mostly
   links (player names, teams, seasons) that is a lot of underline, so links
   are plain until hovered. */
a {
  color: var(--afl-red);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--afl-red-dark);
  text-decoration: underline;
}

/* Navbar: deep navy instead of stock Bootstrap black, azure hover accents,
   without touching markup. */
.navbar.bg-dark {
  --bs-bg-opacity: 1;
  background-color: var(--afl-navy) !important;
}

.navbar-dark .navbar-brand {
  color: #fff;
  font-weight: 700;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--afl-azure);
}

.btn-primary {
  --bs-btn-bg: var(--afl-red);
  --bs-btn-border-color: var(--afl-red);
  --bs-btn-hover-bg: var(--afl-red-dark);
  --bs-btn-hover-border-color: var(--afl-red-dark);
  --bs-btn-active-bg: var(--afl-red-dark);
  --bs-btn-active-border-color: var(--afl-red-dark);
}

.btn-secondary {
  --bs-btn-bg: var(--afl-navy);
  --bs-btn-border-color: var(--afl-navy);
  --bs-btn-hover-bg: var(--afl-navy-dark);
  --bs-btn-hover-border-color: var(--afl-navy-dark);
  --bs-btn-active-bg: var(--afl-navy-dark);
  --bs-btn-active-border-color: var(--afl-navy-dark);
}

.btn-outline-secondary {
  --bs-btn-color: var(--afl-navy);
  --bs-btn-border-color: var(--afl-navy);
  --bs-btn-hover-bg: var(--afl-navy);
  --bs-btn-hover-border-color: var(--afl-navy);
}

.badge.text-bg-secondary {
  background-color: var(--afl-navy) !important;
}

/* Tables: faint navy stripes, red-tinted hover. */
.table {
  --bs-table-striped-bg: rgba(13, 34, 64, 0.05);
  --bs-table-hover-bg: rgba(210, 35, 42, 0.06);
}

.table-warning {
  --bs-table-bg: rgba(125, 179, 232, 0.3);
}

.team-banner {
  height: 7px;
}

html {
  /* Without this, some browsers apply their own smooth-scroll animation to
     in-page anchor jumps (#top, #2026, etc.), and its duration scales with
     distance — on long pages (allgames tables, the season index) that makes
     a single click feel like it takes seconds. This forces the instant jump. */
  scroll-behavior: auto;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.allgames-table {
  font-size: 0.8rem;
}

.data-table th,
.data-table td {
  white-space: nowrap;
}

/* Bootstrap paints background-color on the individual td/th cells, which
   sits on top of and hides any background-color set on the tr itself - so
   the highlight has to be applied to the cells directly. */
.final-row > td,
.final-row > th {
  background-color: rgba(125, 179, 232, 0.15);
}

.grand-final-row > td,
.grand-final-row > th {
  background-color: rgba(125, 179, 232, 0.35);
}

.season-nav a {
  margin-right: 0.25rem;
}

.menu-section {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

.menu-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.menu-section-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.menu-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.menu-group-label {
  font-weight: 600;
  min-width: 4rem;
}

.menu-links-inline .menu-sep {
  color: #adb5bd;
}


table.sortable th {
  cursor: pointer;
  user-select: none;
}

table.sortable th:hover {
  background-color: rgba(210, 35, 42, 0.08);
}

table.sortable th[data-sort-dir="asc"]::after,
table.sortable th[data-sort-dir="desc"]::after {
  color: var(--afl-red);
}

table.sortable th[data-sort-dir="asc"]::after {
  content: "\25B2";
  margin-left: 0.35em;
  font-size: 0.7em;
}

table.sortable th[data-sort-dir="desc"]::after {
  content: "\25BC";
  margin-left: 0.35em;
  font-size: 0.7em;
}

/* Numeric-style columns (stats, totals, scores, etc.) all render centered -
   giving them a shared width keeps stat tables looking like grids instead of
   a ragged mix of column sizes. Excludes colspan cells (group headers like
   "Home & Away", milestone round-header rows) since those intentionally span
   multiple columns. Table auto-layout treats this as a minimum, not a hard
   cap, so wider content (e.g. quarter-by-quarter scoring lines) still grows
   the column instead of clipping. */
table td.text-center:not([colspan]),
table th.text-center:not([colspan]) {
  width: 100px;
}

.abbrev-key {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid #dee2e6;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  z-index: 10;
}

/* Player-compare search results dropdown. Needs an explicit z-index: the
   two search fields stack vertically on mobile, and Player B's
   position-relative column paints after Player A's in DOM order - without
   this, Player A's open results list renders UNDERNEATH the Player B field
   and its items can't be tapped. 1050 also clears the sticky abbrev-key
   footer (z-index 10) and Bootstrap's fixed elements (1030). */
.player-compare-results {
  z-index: 1050;
  max-height: 45vh;
  overflow-y: auto;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.175);
}

/* The results container is always in the DOM; when empty (closed) it must
   not paint its shadow as a stray hairline under the input. */
.player-compare-results:empty {
  display: none;
}

/* AI search answer text - model output is plain text with intentional line
   breaks (ranked lists one per line). */
.ai-answer {
  white-space: pre-wrap;
}