/* assets/css/schedule-grid.css */

/* ==========================
   Page shell
   ========================== */

.page-schedule .schedule-grid-page {
  max-width: 1100px;
  margin: 24px auto 32px;
  padding: 0 16px;
}

.schedule-grid-page__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.schedule-grid-page__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.schedule-grid-page__range {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Desktop vs mobile labels (text + range) */
.schedule-grid-page__title--mobile,
.schedule-grid-page__range--mobile {
  display: none;
}

/* ==========================
   Legend
   ========================== */

.schedule-grid-page__legend {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.82rem;
}

.schedule-grid-page__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.schedule-grid__badge {
  /* width: 12px;
  height: 12px; */
}

/* Back-to-back = strong accent-secondary border color */
.schedule-grid__badge--b2b {
  background: var(--accent-secondary);
  box-shadow: 0 0 6px var(--accent-secondary);
}

/* Goalie injured = softer accent-secondary-soft fill */
.schedule-grid__badge--goalie {
  padding: 1px 3px;
  font-size: x-small;
  background: var(--danger-border);
  box-shadow: 0 0 6px var(--danger-border);
  border-radius: 999px;
  display: block;
}

/* ==========================
   Wrapper & table
   ========================== */

.schedule-grid-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(circle at 0% 0%,
      rgba(255, 255, 255, 0.02),
      transparent 55%
    ),
    color-mix(in srgb,
      var(--accent-primary-soft) 20%,
      #020617
    );
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
}

/* Core table */
.schedule-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.86rem;
  color: var(--text-main);
  background: transparent;
}

/* ==========================
   Header row
   ========================== */

.schedule-grid thead th {
  padding: 8px 10px;
  font-weight: 600;
  text-align: center;
  background-color: color-mix(in srgb,
    var(--accent-secondary) 75%,
    #020617
  );
  border-bottom: 1px solid var(--shark-deep);
}

/* First header cell: "TEAM" */
.schedule-grid__col-team {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 80px;
  background: color-mix(in srgb,
    var(--accent-secondary) 80%,
    #020617
  );
  border-right: 1px solid var(--accent-secondary);
}

.schedule-grid__dow {
  display: block;
  font-weight: 700;
}

.schedule-grid__date {
  display: block;
  font-size: 0.75rem;
}

/* ==========================
   Body rows & team column
   ========================== */

/* Row striping – shades of accent-primary */
.schedule-grid tbody tr:nth-child(odd) {
  background: color-mix(in srgb,
    var(--accent-primary-soft) 18%,
    #020617
  );
}

.schedule-grid tbody tr:nth-child(even) {
  background: color-mix(in srgb,
    var(--accent-primary-soft) 8%,
    #020617
  );
}

/* Left column cells: ANA, BOS, BUF... */
.schedule-grid__team-label {
  font-weight: 600;
  padding: 6px 10px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: color-mix(in srgb,
    var(--accent-secondary) 45%,
    #020617
  );
  border-right: 1px solid var(--accent-secondary);
}

/* Cells */
.schedule-grid__cell {
  padding: 6px 8px;
  height: 56px;
  vertical-align: top;
  text-align: center;
}

/* ==========================
   Dynamic highlights
   ========================== */

/* Any game – light border */
.schedule-grid__cell--game {
  border: solid 1px var(--border-subtle);
}

/* Back-to-back – accented outline */
.schedule-grid__cell--b2b {
  box-shadow: 0 0 0 2px var(--accent-secondary) inset;
}

/* Both combined – keep the strong outline + soft fill */
.schedule-grid__cell--b2b.schedule-grid__cell--goalie {
  box-shadow: 0 0 0 2px var(--accent-secondary) inset;
}

/* ==========================
   Goalie pill inside cell
   ========================== */

.schedule-grid__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.schedule-grid__pill--goalie {
  background: color-mix(in srgb,
    var(--accent-secondary-soft) 80%,
    #020617
  );
  color: var(--text-main);
  border: 1px solid var(--accent-secondary);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 8px var(--accent-secondary-soft);
}

/* ==========================
   Matchup content
   ========================== */

.schedule-grid__matchup + .schedule-grid__matchup {
  margin-top: 4px;
}

.schedule-grid__matchup-primary {
  display: block;
  font-weight: 600;
}

.schedule-grid__time {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================
   Responsive tweaks
   ========================== */

@media (max-width: 900px) {
  .schedule-grid {
    font-size: 0.8rem;
  }

  .schedule-grid__col-team {
    width: 64px;
  }

  .schedule-grid__date {
    font-size: 0.7rem;
  }
}

/* Mobile: 5-day view + looser layout */
@media (max-width: 700px) {
  /* Swap desktop/mobile labels */
  .schedule-grid-page__title--desktop,
  .schedule-grid-page__range--desktop {
    display: none;
  }

  .schedule-grid-page__title--mobile,
  .schedule-grid-page__range--mobile {
    display: inline;
  }

  /* Show only 5 days on mobile (hide last 2 day columns)
     Col 1 = Team, cols 2–8 = days, so hide 7 & 8 */
  .schedule-grid thead th:nth-child(n+7),
  .schedule-grid tbody td:nth-child(n+7) {
    display: none;
  }

  /* Let the grid go full-width and hug the edges on mobile */
  .page-schedule .schedule-grid-page {
    max-width: unset;
    margin: 16px 0 24px;
    padding: 0 8px;
  }
}