/* Schedule matrix — the shared times × locations grid used by BOTH the
   scheduler's step-2 preview and the schedule page's cards view (epic 0030).
   Grid only: game cards are deliberately separate per surface —
   .scheduler-gamecard* (scheduler.css) vs .schedule-card* (below) — so the
   schedule card can evolve toward primary-view status independently. */

/* Card frame around the grid. */
.schedule-matrix-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.schedule-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0; /* an inherited table margin painted white bars inside the frame */
}

.schedule-matrix thead th {
  padding: 0.5rem 0.6rem;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  text-align: center;
  white-space: nowrap;
}
.schedule-matrix thead th:first-child { border-left: 0; }
.schedule-matrix thead th:last-child { border-right: 0; }
.schedule-matrix thead tr th { border-top: 0; }

.schedule-matrix tbody td {
  border: 1px solid var(--line-2);
  padding: 0.5rem;
  vertical-align: top;
  /* Floor per location column before the matrix scrolls horizontally —
     narrower and the two team sides squish into per-letter wrapping. */
  min-width: 320px;
  /* Header grey behind the cells so the white cards stand out slightly. */
  background: var(--surface-2);
  /* height acts as min-height on table cells; lets full-height cell
     children (the scheduler's drop zones) stretch to the row. */
  height: 1px;
}
.schedule-matrix tbody td:first-child { border-left: 0; }
.schedule-matrix tbody td:last-child { border-right: 0; }
.schedule-matrix tbody tr:last-child td { border-bottom: 0; }

/* Just wide enough for "11:55 AM ~ 12:25 PM"; sticky while the matrix
   scrolls horizontally. The tbody selector must outrank the generic
   `.schedule-matrix tbody td` min-width or 320px wins. */
.schedule-matrix thead th.schedule-matrix__time-head,
.schedule-matrix tbody td.schedule-matrix__time {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
}
.schedule-matrix__time {
  text-align: center;
  vertical-align: middle;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-2);
}
.schedule-matrix__time-head { background: var(--surface-2); }

/* Full-width date section header — periods can span days (Sun/Tue leagues). */
.schedule-matrix th.schedule-matrix__date-divider {
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 0.3rem 0.75rem;
  /* Only the standard grid line above; no heavier bottom edge. */
  border: 0;
  border-top: 1px solid var(--line-2);
}

/* The row spans the full scrollable width; the sticky span keeps the date
   text in view while scrolling horizontally (like the time column). */
.schedule-matrix__date-divider-text {
  display: inline-block;
  position: sticky;
  left: 0.75rem;
}

/* === SCHEDULE CARD (games page cards view) === */

.schedule-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 0.6rem 0.6rem 0.4rem;
  margin-bottom: 0.4rem;
  transition: box-shadow 0.15s;
}
.schedule-card:last-child { margin-bottom: 0; }
.schedule-card:hover { box-shadow: var(--shadow); }

.schedule-card__game-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 0.25rem;
}

.schedule-card__teams {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.schedule-card__side {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.schedule-card__side--a { justify-content: flex-end; }
.schedule-card__side--b { justify-content: flex-start; }

.schedule-card__side-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.schedule-card__side--a .schedule-card__side-text { align-items: flex-end; text-align: right; }
.schedule-card__side--b .schedule-card__side-text { align-items: flex-start; text-align: left; }

.schedule-card__name {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.schedule-card__scores {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.schedule-card__scores .game-cell__input { width: 44px; text-align: center; }
.schedule-card__dash { color: var(--ink-3); font-size: 0.8rem; }
.schedule-card__score { display: inline-flex; }

.schedule-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line-2);
  font-size: 0.72rem;
  color: var(--ink-2);
}

.schedule-card__ref {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-card__foot-right {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.schedule-card__status {
  display: inline-block;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--bg-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.schedule-card__status--completed { background: var(--accent-light); color: var(--accent); }
.schedule-card__status--finalized { background: var(--success-soft); color: var(--success); }

/* Games missing a time or location — never dropped, listed below the grid. */
.schedule-matrix__unscheduled {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0.6rem 0.75rem;
  margin-top: 0.6rem;
}

.schedule-matrix__unscheduled-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}

.schedule-matrix__unscheduled-item { max-width: 480px; margin-bottom: 0.5rem; }
.schedule-matrix__unscheduled-item:last-child { margin-bottom: 0; }

.schedule-matrix__unscheduled-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-bottom: 0.2rem;
}