/*
 * "Glory Days" gridiron theme for every non-admin page (see layouts/main.html.erb
 * and shared/_gridiron_header.html.erb). Admin pages stay on the plain layout -
 * scoped entirely under body.gridiron-body so nothing here can leak there.
 *
 * Colors pulled directly from the real league crest (app/assets/images/
 * glory_days_crest.png), not invented: navy #1E2850, crimson #DC1432,
 * near-black #141414. Brass/gold is the one color NOT in the crest - reserved
 * for earned moments only (weekly high score, playoff wins), not primary UI.
 *
 * Bootstrap's stylesheet double-loads on every page (stylesheet_link_tag :app
 * globs vendor/bootstrap.min.css a second time after application.css) and its
 * utility classes carry !important, so overrides of Bootstrap class names need
 * matching !important + a two-class-deep selector to reliably win regardless
 * of load order - same pattern already used for .draft-order-table and the
 * War Room page elsewhere in this file.
 */

body.gridiron-body {
  --gr-night: #0D1220;
  --gr-navy: #1E2850;
  --gr-navy-light: #283563;
  --gr-crimson: #DC1432;
  --gr-crimson-dark: #A80F26;
  --gr-chalk: #F5F3EC;
  --gr-steel: #8A8F9C;
  --gr-brass: #C9A227;
  --gr-line: #2A3358;
  --gr-win-green: #2F9E44;

  background: var(--gr-night);
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.012) 0px,
    rgba(255, 255, 255, 0.012) 60px,
    transparent 60px,
    transparent 120px
  );
  color: var(--gr-chalk);
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
}

body.gridiron-body a {
  color: var(--gr-crimson);
}

body.gridiron-body h1,
body.gridiron-body h2,
body.gridiron-body h3 {
  font-family: "Anton", "Barlow", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gr-chalk);
}

body.gridiron-body .text-muted {
  color: var(--gr-steel) !important;
}

/* ---------- Header ---------- */

.gr-header {
  background: var(--gr-navy);
  border-bottom: 3px solid var(--gr-crimson);
}

.gr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.gr-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--gr-chalk) !important;
}

.gr-crest {
  width: 44px;
  height: 44px;
}

.gr-wordmark {
  font-family: "Anton", sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gr-wordmark small {
  display: block;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--gr-crimson);
  font-weight: 600;
}

.gr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.gr-nav-link {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gr-chalk) !important;
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
}

.gr-nav-link:hover {
  background: var(--gr-crimson);
}

.gr-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--gr-line);
  border-radius: 2px;
  cursor: pointer;
}

.gr-nav-toggle-bar {
  display: block;
  height: 2px;
  margin: 0 7px;
  background: var(--gr-chalk);
}

/* Phone-size only: hide the full nav behind a hamburger toggle instead of
 * letting it wrap onto several lines under the brand (.gr-nav's flex-wrap
 * still handles tablet-width squeeze above this breakpoint just fine). The
 * open nav drops into its own full-width row via flex-basis rather than an
 * absolutely-positioned overlay, since .gr-header-inner is already a
 * wrapping flex row - one less thing to keep in sync with header height.
 */
@media (max-width: 767.98px) {
  .gr-nav-toggle {
    display: flex;
  }

  .gr-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    order: 3;
  }

  .gr-nav.gr-nav-open {
    display: flex;
  }

  .gr-nav .gr-nav-link {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--gr-line);
  }
}

/* ---------- Generic Bootstrap component reskin ---------- */

body.gridiron-body .card {
  background: var(--gr-navy);
  border: 1px solid var(--gr-line);
  color: var(--gr-chalk);
}

body.gridiron-body .card-header {
  background: rgba(0, 0, 0, 0.2);
  border-bottom-color: var(--gr-line);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

body.gridiron-body .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
  --bs-table-color: var(--gr-chalk);
  --bs-table-striped-color: var(--gr-chalk);
  --bs-border-color: var(--gr-line);
}

/*
 * Matchup detail page (starters vs bench). Bootstrap's .table-active sets
 * --bs-table-color-state to --bs-table-active-color, which gridiron.css
 * never overrides (only --bs-table-color/--bs-table-striped-color above),
 * so relying on that class rendered starter rows in the default dark
 * Bootstrap text color instead of this theme's chalk white - custom classes
 * instead, set directly on the cells rather than through Bootstrap's table
 * CSS-variable chain.
 */
body.gridiron-body .mp-starter td {
  color: var(--gr-chalk) !important;
  font-weight: 700;
}

body.gridiron-body .mp-bench td {
  color: var(--gr-steel) !important;
}

body.gridiron-body .table thead th {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gr-steel);
  border-bottom-width: 2px;
  border-bottom-color: var(--gr-crimson);
}

body.gridiron-body .form-control,
body.gridiron-body .form-select {
  background: var(--gr-navy);
  border-color: var(--gr-line);
  color: var(--gr-chalk);
}

body.gridiron-body .form-control:focus,
body.gridiron-body .form-select:focus {
  background: var(--gr-navy);
  color: var(--gr-chalk);
  border-color: var(--gr-crimson);
  box-shadow: 0 0 0 0.2rem rgba(220, 20, 50, 0.25);
}

body.gridiron-body .form-control::placeholder {
  color: var(--gr-steel);
}

body.gridiron-body .nav-pills .nav-link {
  color: var(--gr-chalk);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}

body.gridiron-body .nav-pills .nav-link.active {
  background: var(--gr-crimson);
}

body.gridiron-body .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.6);
}

body.gridiron-body .modal-content {
  background: var(--gr-navy);
  border: 1px solid var(--gr-line);
  color: var(--gr-chalk);
}

body.gridiron-body .modal-header {
  border-bottom-color: var(--gr-line);
}

body.gridiron-body .list-group-item {
  background: transparent;
  border-color: var(--gr-line);
  color: var(--gr-chalk);
}

body.gridiron-body .data-table-clickable-row:hover {
  background: rgba(220, 20, 50, 0.12) !important;
}

/*
 * .draft-order-table (teams-as-columns draft grid, shared with the admin
 * Draft Board) hardcodes a plain black border in application.css, which is
 * invisible against this page's dark background - override to the theme's
 * line color instead.
 */
body.gridiron-body table.draft-order-table th,
body.gridiron-body table.draft-order-table td {
  border-color: var(--gr-line);
}

/* Filled cells get a light Bootstrap "*-subtle" position background (see
 * ApplicationHelper#draft_position_bg_class) - force dark text there since
 * this page's default chalk-white text is unreadable on a light background. */
body.gridiron-body table.draft-order-table td[class*="bg-"] {
  color: #212529 !important;
}

/*
 * Tabulator tables (Players/Leagues/Teams listings). The vendored theme
 * (tabulator_bootstrap5.min.css) hardcodes white backgrounds on several
 * DISTINCT selectors, not just .tabulator itself - .tabulator-table and
 * .tabulator-header have their own #fff, and .tabulator-row / .tabulator-
 * calcs-holder carry that background with !important already in the base
 * theme. Every override here needs !important + a two-class-deep selector
 * to reliably win, or the white background (with our chalk-white text on
 * top of it) silently survives - this bit us once already, see commit
 * history. Every distinct element the theme paints white gets its own rule.
 */

body.gridiron-body .tabulator,
body.gridiron-body .tabulator-table,
body.gridiron-body .tabulator-tableholder {
  background-color: var(--gr-navy) !important;
  border-color: var(--gr-line) !important;
  color: var(--gr-chalk) !important;
  font-family: "Barlow", sans-serif !important;
}

body.gridiron-body .tabulator-header {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border-bottom: 2px solid var(--gr-crimson) !important;
  color: var(--gr-steel) !important;
  font-family: "Barlow Semi Condensed", sans-serif !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

body.gridiron-body .tabulator-col {
  background-color: transparent !important;
  border-right-color: var(--gr-line) !important;
  color: var(--gr-steel) !important;
}

body.gridiron-body .tabulator-row {
  background-color: var(--gr-navy) !important;
  color: var(--gr-chalk) !important;
  border-bottom: 1px solid var(--gr-line) !important;
}

body.gridiron-body .tabulator-row.data-table-bold-row {
  /* Lighter than --gr-win-green - that shade reads too dark against this
     table's navy row background, unlike its other (light-background) uses. */
  color: #6FC784 !important;
}

body.gridiron-body .tabulator-row.tabulator-row-even {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

body.gridiron-body .tabulator-row:hover {
  background-color: rgba(220, 20, 50, 0.15) !important;
}

body.gridiron-body .tabulator-cell {
  border-right-color: var(--gr-line) !important;
  background-color: transparent !important;
  color: inherit !important;
}

body.gridiron-body .tabulator-footer,
body.gridiron-body .tabulator-calcs-holder {
  background-color: rgba(0, 0, 0, 0.25) !important;
  color: var(--gr-steel) !important;
  border-color: var(--gr-line) !important;
}

body.gridiron-body .tabulator-page,
body.gridiron-body .tabulator-page-size {
  background-color: transparent !important;
  border-color: var(--gr-line) !important;
  color: var(--gr-chalk) !important;
}

body.gridiron-body .tabulator-paginator {
  color: var(--gr-steel) !important;
}

body.gridiron-body .tabulator-placeholder-contents {
  color: var(--gr-steel) !important;
}

/* ---------- Scoreboard (signature element - weekly matchup cards) ---------- */

.gr-scoreboard {
  background: var(--gr-navy);
  border: 1px solid var(--gr-line);
  border-radius: 4px;
  overflow: hidden;
}

.gr-scoreboard-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.5rem;
}

.gr-scoreboard-team {
  text-align: center;
  border-radius: 3px;
  padding: 0.5rem 0.4rem;
}

.gr-scoreboard-team.gr-win {
  box-shadow: inset 0 0 0 2px var(--gr-win-green);
  background: rgba(47, 158, 68, 0.14);
}

.gr-team-name {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--gr-chalk);
  text-decoration: none;
  display: inline-block;
}

.gr-score {
  font-family: "Anton", sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gr-chalk);
  font-variant-numeric: tabular-nums;
}

.gr-scoreboard-team.gr-win .gr-score {
  color: var(--gr-win-green);
}

.gr-proj {
  font-size: 0.7rem;
  color: var(--gr-steel);
  font-family: "Barlow Semi Condensed", sans-serif;
}

.gr-crest-divider {
  width: 57px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gr-crest-divider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gr-star-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--gr-brass);
  vertical-align: middle;
  margin-left: 0.25rem;
}

.gr-scoreboard-lineup {
  border-top: 1px solid var(--gr-line);
}

/* ---------- Standings ---------- */

.gr-standings {
  background: var(--gr-navy);
  border: 1px solid var(--gr-line);
  border-radius: 4px;
  overflow: hidden;
}

.gr-standings-num {
  font-family: "Anton", sans-serif;
  font-size: 0.95rem;
  color: var(--gr-steel);
}

.gr-record {
  font-family: "Anton", sans-serif;
  font-variant-numeric: tabular-nums;
}

.gr-division-label {
  font-family: "Anton", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gr-brass);
  border-bottom: 2px solid var(--gr-brass);
  display: inline-block;
  padding-bottom: 0.1rem;
  margin-bottom: 0.75rem;
}

/* ---------- Playoff bracket ---------- */

/*
 * Cards are positioned absolutely (inline top/left/width/height, computed
 * server-side in _bracket.html.erb from PlayoffMatchup.bracket_layout) so an
 * SVG overlay sharing the same coordinate space can draw real elbow
 * connectors between a match and whatever later match its winner/loser
 * advances to - not just round columns with no visual relationship.
 */

.gr-bracket-labels {
  position: relative;
  height: 1.4rem;
  margin-bottom: 0.25rem;
}

.gr-bracket-round-label {
  position: absolute;
  top: 0;
  text-align: center;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gr-steel);
}

.gr-bracket-scroll {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.gr-bracket {
  position: relative;
}

.gr-bracket-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.gr-bracket-connector {
  fill: none;
  stroke: var(--gr-line);
  stroke-width: 2;
}

.gr-bracket-connector--loser {
  stroke-dasharray: 4 3;
  opacity: 0.65;
}

.gr-bracket-match {
  position: absolute;
  background: var(--gr-navy);
  border: 1px solid var(--gr-line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.gr-bracket-match-header {
  background: rgba(0, 0, 0, 0.25);
  color: var(--gr-brass);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
}

.gr-bracket-team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  color: var(--gr-chalk);
  border-top: 1px solid var(--gr-line);
}

.gr-bracket-team-row:first-of-type {
  border-top: none;
}

.gr-bracket-team-row--winner {
  color: var(--gr-win-green);
  font-weight: 700;
}

.gr-bracket-team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gr-bracket-team-points {
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  opacity: 0.75;
  flex-shrink: 0;
}

/* ---------- Footer ---------- */

body.gridiron-body footer.border-top {
  background: var(--gr-night);
  border-top-color: var(--gr-line) !important;
}

body.gridiron-body footer.border-top a {
  color: var(--gr-steel);
}

body.gridiron-body footer.border-top a:hover {
  color: var(--gr-crimson);
}

/* ---------- Live score ticker (shared/_score_ticker, score_ticker_controller.js) ---------- */

.score-ticker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.score-ticker-strip {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--gr-navy);
  border: 1px solid var(--gr-line);
  border-radius: 4px;
  padding: 0.4rem 0;
}

.score-ticker-strip.is-scrollable {
  overflow-x: auto;
}

.score-ticker-track {
  display: flex;
  width: max-content;
}

.score-ticker-track.is-animated {
  animation: score-ticker-scroll 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .score-ticker-track.is-animated {
    animation: none;
  }
}

@keyframes score-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.score-ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--gr-chalk);
  padding: 0 1.1rem;
  border-right: 1px solid var(--gr-line);
  white-space: nowrap;
}

.score-ticker-detail {
  color: var(--gr-steel);
  font-weight: 400;
  font-size: 0.72rem;
}

/* Emoji render noticeably larger than surrounding text by default - used for
   the possession indicator both here and on the Matchup Details page. */
.football-icon {
  font-size: 0.75em;
}

/* Matchup Details possession indicator - empty span takes no space until
   live_plays_controller.js fills it in, so it never shifts layout on load. */
[data-live-plays-target="ball"]:not(:empty) {
  margin-right: 0.25rem;
}

.score-ticker .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gr-crimson);
  box-shadow: 0 0 0 0 rgba(220, 20, 50, 0.6);
  animation: score-ticker-pulse 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .score-ticker .live-dot {
    animation: none;
  }
}

@keyframes score-ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 20, 50, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(220, 20, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 20, 50, 0); }
}

.score-ticker-toggle {
  flex: none;
  white-space: nowrap;
}

body.gridiron-body .score-ticker-toggle .form-check-label {
  color: var(--gr-steel);
}

@media (max-width: 576px) {
  .score-ticker {
    display: none;
  }
}