/**
 * Matches page — StatsNexus surfaces (black canvas, elevated competition cards).
 * Also applied on My Nexus Events so competition cards match Matches / Live list UI.
 * Density pass: tighter headers/rows; flat fixture rows with hairline dividers.
 */

body.page-matches,
body.page-my-nexus {
  --match-dark-bg: #000000;
  --match-card-bg: #1a1a1a;
  --match-border: #2a2a2a;
  --card-bg: var(--match-card-bg);
  background-color: var(--match-dark-bg) !important;
}

[data-theme="light"] body.page-matches,
[data-theme="light"] body.page-my-nexus {
  --match-dark-bg: #f0f0f0;
  --match-card-bg: #ffffff;
  --match-border: #e2e8f0;
  background-color: var(--match-dark-bg) !important;
}

body.page-matches .card,
body.page-matches .match-card,
body.page-my-nexus .card,
body.page-my-nexus .match-card {
  background-color: var(--match-card-bg) !important;
  border-color: var(--match-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 12px;
}

[data-theme="light"] body.page-matches .card,
[data-theme="light"] body.page-matches .match-card,
[data-theme="light"] body.page-my-nexus .card,
[data-theme="light"] body.page-my-nexus .match-card {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

body.page-matches .calendar-slideshow,
body.page-matches .match-control-bar {
  background-color: var(--match-card-bg);
  border-color: var(--match-border);
}

body.page-matches .calendar-day,
body.page-matches .day-nav-arrow,
body.page-matches .day-pill,
body.page-matches .filter-container {
  background-color: var(--match-card-bg);
}

body.page-matches .filter-select {
  background-color: var(--match-card-bg);
  border-color: var(--match-border);
}

body.page-matches .league-header-row,
body.page-my-nexus .league-header-row {
  background-color: transparent;
}

/* Flat fixture rows (no nested sub-cards) — shared with My Nexus */
body.page-matches .match-card .enhanced-table tbody tr,
body.page-my-nexus .match-card .enhanced-table tbody tr {
  border-radius: 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transform: none !important;
}

body.page-matches .match-card .enhanced-table tbody tr:last-child,
body.page-my-nexus .match-card .enhanced-table tbody tr:last-child {
  border-bottom: none;
}

body.page-matches .match-card .enhanced-table tbody tr:hover,
body.page-my-nexus .match-card .enhanced-table tbody tr:hover {
  background: var(--table-hover-bg, rgba(74, 124, 89, 0.10)) !important;
  box-shadow: inset 3px 0 0 var(--table-hover-accent, rgba(74, 124, 89, 0.65));
  transform: none !important;
}

[data-theme="light"] body.page-matches .match-card .enhanced-table tbody tr,
[data-theme="light"] body.page-my-nexus .match-card .enhanced-table tbody tr {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 1133px) {
  body.page-matches .league-header-row,
  body.page-my-nexus .league-header-row {
    margin: 0 !important;
    padding: 7px 10px;
    border-radius: 12px 12px 0 0;
    min-height: 0;
  }

  body.page-matches .league-info-link,
  body.page-matches .league-info-link.disabled,
  body.page-my-nexus .league-info-link,
  body.page-my-nexus .league-info-link.disabled {
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    min-width: 0;
  }

  body.page-matches .league-info-link > span,
  body.page-my-nexus .league-info-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page-matches .league-logo-large,
  body.page-my-nexus .league-logo-large {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  body.page-matches .card-toggle-btn,
  body.page-my-nexus .card-toggle-btn {
    font-size: 12px;
    padding: 4px 6px;
    min-width: 28px;
    min-height: 28px;
    opacity: 0.65;
  }

  body.page-matches .league-header-row .favourite-toggle--compact,
  body.page-my-nexus .league-header-row .favourite-toggle--compact {
    width: 26px;
    height: 26px;
    opacity: 0.75;
  }

  body.page-matches .match-card.compact,
  body.page-my-nexus .match-card.compact {
    padding: 0 !important;
    overflow: hidden;
    margin-bottom: 10px;
  }

  body.page-matches .match-card .enhanced-table,
  body.page-my-nexus .match-card .enhanced-table {
    padding: 0 0 2px;
    box-sizing: border-box;
  }

  body.page-matches .match-card .enhanced-table tbody tr,
  body.page-my-nexus .match-card .enhanced-table tbody tr {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.page-matches .follow-match-toggle,
  body.page-my-nexus .follow-match-toggle {
    width: 26px;
    height: 26px;
    min-width: 26px;
    opacity: 0.7;
  }

  body.page-matches .follow-bell-icon,
  body.page-my-nexus .follow-bell-icon {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 767px) {
  body.page-matches .league-header-row,
  body.page-my-nexus .league-header-row {
    padding: 6px 8px;
  }

  body.page-matches .league-info-link,
  body.page-matches .league-info-link.disabled,
  body.page-my-nexus .league-info-link,
  body.page-my-nexus .league-info-link.disabled {
    gap: 6px;
    font-size: 10.5px;
  }

  body.page-matches .league-logo-large,
  body.page-my-nexus .league-logo-large {
    width: 14px;
    height: 14px;
  }

  body.page-matches .card-toggle-btn,
  body.page-my-nexus .card-toggle-btn {
    font-size: 11px;
    min-width: 28px;
    min-height: 28px;
    padding: 4px 5px;
  }

  body.page-matches .match-card.compact,
  body.page-my-nexus .match-card.compact {
    margin-bottom: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Phase 1 — Live Matches UI refinement (mobile + tablet)
   Desktop (≥1134px) unchanged. Matches page only.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1133px) {
  body.page-matches .league-header-row {
    background: rgba(0, 0, 0, 0.22) !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  [data-theme="light"] body.page-matches .league-header-row {
    background: #f1f5f9 !important;
    border-bottom: none !important;
  }

  body.page-matches .match-card .enhanced-table tbody tr.match-row,
  body.page-matches .match-card .enhanced-table tbody tr.match-live,
  body.page-matches .match-card .enhanced-table tbody tr[data-status="ongoing"],
  body.page-matches .match-card .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) {
    border-bottom: none !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 38px;
    box-shadow: none !important;
  }

  body.page-matches .match-card .enhanced-table tbody tr.match-row:hover,
  body.page-matches .match-card .enhanced-table tbody tr.match-live:hover,
  body.page-matches .match-card .enhanced-table tbody tr[data-status="ongoing"]:hover {
    box-shadow: inset 3px 0 0 var(--table-hover-accent, rgba(74, 124, 89, 0.65)) !important;
  }

  /* .live-pill hidden on all viewports: shared live-fixture-status.css */

  /* Follow bell removed on mobile/tablet — follow from match detail header */
  body.page-matches .enhanced-table tbody tr td.match-follow-cell,
  body.page-matches .enhanced-table tbody tr.match-row td.match-follow-cell,
  body.page-matches .enhanced-table tbody tr.match-live td.match-follow-cell,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.match-follow-cell,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-follow-cell {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Same structure as desktop:
   * [time/minute] [home] [score] [away] [FT/status]
   * Fixed left + right lanes so every row aligns.
   */
  body.page-matches .enhanced-table tbody tr.match-row,
  body.page-matches .enhanced-table tbody tr.match-live,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"],
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) {
    grid-template-columns: 42px minmax(0, 1fr) 48px minmax(0, 1fr) 36px !important;
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.page-matches .enhanced-table tbody tr.match-row td.match-time,
  body.page-matches .enhanced-table tbody tr.match-live td.match-time,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.match-time,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-time {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.page-matches .enhanced-table tbody tr.match-row td.home-team,
  body.page-matches .enhanced-table tbody tr.match-live td.home-team,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.home-team,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.home-team {
    grid-column: 2 !important;
  }

  body.page-matches .enhanced-table tbody tr.match-row td.score-cell,
  body.page-matches .enhanced-table tbody tr.match-live td.score-cell,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.score-cell,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.score-cell {
    grid-column: 3 !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  body.page-matches .enhanced-table tbody tr.match-row td.away-team,
  body.page-matches .enhanced-table tbody tr.match-live td.away-team,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.away-team,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.away-team {
    grid-column: 4 !important;
  }

  /* Desktop status column stays on the right (FT / PEN / empty for live) */
  body.page-matches .enhanced-table tbody tr.match-row td.match-ft-status,
  body.page-matches .enhanced-table tbody tr.match-live td.match-ft-status,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.match-ft-status,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-ft-status {
    grid-column: 5 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
    align-self: center !important;
    text-align: right !important;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
  }

  /* Non-live mobile: kickoff stays out of the left lane (score cell shows kickoff) */
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-time .match-date,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-time .match-year,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-time .match-time-val {
    display: none !important;
  }

  /* Timer as supporting metadata — keep green, dial back weight/size */
  body.page-matches .live-minute-cell {
    gap: 3px;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body.page-matches .live-minute-cell .rndfx-live-dot {
    width: 5px;
    height: 5px;
    background: #22c55e;
    box-shadow: none;
  }

  body.page-matches .live-minute-cell .live-minute-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #4ade80;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
  }

  [data-theme="light"] body.page-matches .live-minute-cell .live-minute-badge {
    color: #16a34a;
  }

  [data-theme="light"] body.page-matches .live-minute-cell .rndfx-live-dot {
    background: #16a34a;
    box-shadow: none;
  }

  body.page-matches .match-row[data-stale="1"] .live-minute-badge {
    color: #f59e0b;
  }

  body.page-matches .match-row[data-stale="1"] .live-minute-cell .rndfx-live-dot {
    background: #f59e0b;
    box-shadow: none;
  }

  body.page-matches .enhanced-table .team-name {
    font-size: 11.5px;
    font-weight: 500;
  }

  body.page-matches .team-logo img {
    width: 16px;
    height: 16px;
  }

  body.page-matches .enhanced-table td.team {
    gap: 4px;
  }

  body.page-matches .match-score {
    font-size: 13.5px;
    font-weight: 700;
  }
}

@media (max-width: 480px) {
  body.page-matches .enhanced-table tbody tr.match-row,
  body.page-matches .enhanced-table tbody tr.match-live,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"],
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) {
    grid-template-columns: 40px minmax(0, 1fr) 46px minmax(0, 1fr) 34px !important;
    gap: 5px !important;
    padding: 5px 6px !important;
    min-height: 36px;
  }

  body.page-matches .enhanced-table tbody tr.match-row td.match-time,
  body.page-matches .enhanced-table tbody tr.match-live td.match-time,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.match-time,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-time {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  body.page-matches .enhanced-table tbody tr.match-row td.match-ft-status,
  body.page-matches .enhanced-table tbody tr.match-live td.match-ft-status,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.match-ft-status,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.match-ft-status {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  body.page-matches .live-minute-cell .live-minute-badge {
    font-size: 0.65625rem;
  }

  body.page-matches .enhanced-table .team-name {
    font-size: 11px;
  }

  body.page-matches .match-score {
    font-size: 13px;
  }

  body.page-matches .enhanced-table tbody tr.match-row td.score-cell,
  body.page-matches .enhanced-table tbody tr.match-live td.score-cell,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.score-cell,
  body.page-matches .enhanced-table tbody tr:not(.match-live):not([data-status="ongoing"]) td.score-cell {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
  }
}

/* Desktop: keep live minute lane compact and aligned */
@media (min-width: 1134px) {
  body.page-matches .enhanced-table tbody tr.match-row.match-live td.match-time,
  body.page-matches .enhanced-table tbody tr.match-row[data-status="ongoing"] td.match-time,
  body.page-matches .enhanced-table tbody tr.match-live td.match-time,
  body.page-matches .enhanced-table tbody tr[data-status="ongoing"] td.match-time {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.page-matches .live-minute-cell {
    gap: 3px;
  }

  body.page-matches .live-minute-cell .rndfx-live-dot {
    width: 5px;
    height: 5px;
    box-shadow: none;
  }

  body.page-matches .live-minute-cell .live-minute-badge {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }
}