/* app/assets/stylesheets/components/games.css */

/* -- View switch (List / Matches) -- */

.games-view-switch {
  display: inline-flex;
  width: auto;
  gap: 0;
  margin-bottom: 0.75rem;
  border: 1px solid var(--ink-4);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}

.games-view-switch__btn {
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-3);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  min-width: 90px;
}

.games-view-switch__btn.is-active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: 700;
}

/* -- Filters: override schedule-filter width rules inside this page so the
   filter controls fill the grey container.
   schedule.css sets min-width: 150px on .schedule-filter__select, which the
   games container overrides with flex:1 on each filter group. -- */

.games-container .schedule-filters {
  align-items: stretch;
}
.games-container .schedule-filter {
  flex: 1 1 0;
  min-width: 140px;
}
.games-container .schedule-filter__select {
  width: 100%;
  min-width: 0;
}

/* Tighter pill for Clear action */
.games-container .schedule-actions__clear {
  min-width: 0;
  padding: 0.35rem 0.85rem;
  display: inline-block;
  align-self: flex-end;
}

/* -- Table --
   The wrapping .card normally clips overflow to keep its rounded
   corners crisp; for the games table specifically we let the card
   scroll horizontally so the wide table doesn't get cut off at narrow
   viewport widths. Vertical clipping is preserved. */

.games-container { overflow: visible; }
.games-container .card {
  overflow-x: auto;
  overflow-y: hidden;
}

.games-table {
  width: 100%;
  min-width: 1500px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1rem;
  margin: 0;
}

/* Canonical card-table header look (style guide). */
.games-table thead th {
  padding: 12px 14px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.games-table tbody td {
  border-top: 1px solid var(--line-2);
  padding: 10px 14px;
}
.games-table tbody tr:first-child td { border-top: 0; }
/* Bottom row gets extra space below the last cell so it doesn't sit
   flush against the card's bottom edge. */
.games-table tbody tr:last-child td { padding-bottom: 14px; }

/* Fixed widths chosen so static-width columns (Period/Date/Time/Game/Score)
   don't steal horizontal space from team/location columns. Widths sized
   to fit the column header label + a comfortable typical value. */
.games-table col.col-period   { width: 7rem;   }
.games-table col.col-date     { width: 8.5rem; }  /* fits "Sep 26, 2026" */
.games-table col.col-time     { width: 11rem;  }  /* fits "12:22 ~ 12:22pm" */
.games-table col.col-location { width: auto;   }
.games-table col.col-group    { width: 7rem;   }
.games-table col.col-game     { width: 5rem;   }
.games-table col.col-team     { width: auto;   }
.games-table col.col-score    { width: 6.5rem; }  /* fits header "Score B" */
.games-table col.col-ref      { width: auto;   }
.games-table col.col-status   { width: 7.5rem; }

.games-table tbody tr:hover {
  background: var(--bg-2);
}

.games-row {
  height: 2.5rem;
}

.games-table__empty {
  text-align: center;
  padding: 2rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}

/* -- Sort headers -- */

.games-table__sort {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.games-table__sort:hover {
  color: var(--accent);
}

.games-table__sort.is-active {
  font-weight: 700;
}

.games-table__sort sup {
  font-size: 0.6rem;
  font-weight: 700;
  margin-left: 0.15rem;
  color: var(--ink-3);
}

/* -- Cells -- */

.game-cell {
  position: relative;
  height: 100%;
  padding: 0 0.35rem;
  vertical-align: middle;
  white-space: nowrap;
  /* No overflow: hidden on the cell itself — the tooltip ::after would get
     clipped. Ellipsis clipping lives on the inner .game-cell__text wrapper. */
}

.game-cell--readonly {
  padding: 0 0.5rem;
  color: var(--ink);
}

/* Text wrapper — owns the ellipsis behavior so the cell itself can stay
   overflow:visible (required for tooltip rendering). */
.game-cell__text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Location: keep the <td> as a normal table cell (so it aligns with other
   columns) and put flex on an inner wrapper. Facility shrinks with ellipsis;
   location suffix (e.g. "(Court 3)") is always fully visible. */
.game-cell__location-inner {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
}

.game-cell__location-facility {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.game-cell__location-name {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink-3);
}

/* Tooltip styles for [data-tooltip] now live in base/base.css. */

/* Display link (click-to-edit target) */
.game-cell__display {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 0.1rem 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.5rem;
}

.game-cell__display:hover {
  background-color: var(--ink-4);
}

/* Score cell display */
.game-cell__score {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Empty score cell — show a bordered box */
.game-cell__score--empty {
  border: 1px solid var(--ink-4);
  border-radius: 8px;
  min-height: 1.6rem;
}

/* Input in edit state — padding/typography matches the display link so the
   text position is stable between the two states. */
.game-cell__input {
  width: 100%;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--surface);
  -moz-appearance: textfield;
}
.game-cell__input::-webkit-outer-spin-button,
.game-cell__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.game-cell__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* -- Winner / loser / tie coloring -- */

.game-cell--win {
  color: var(--green);
  font-weight: 700;
}

.game-cell--lose {
  color: var(--red);
}

.game-cell--tie {
  color: var(--warning);
  font-weight: 700;
}

/* -- Status filter --
   Uses the canonical .segmented control. Radio inputs are hidden
   visually but kept for form submission and accessibility; the label
   itself is the .segmented__btn click target. */
.segmented__radio { position: absolute; opacity: 0; pointer-events: none; }

/* -- Status pill -- */

.game-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink-3);
}

.game-status--scheduled {
  background: var(--bg-2);
  color: var(--ink-3);
}

.game-status--completed {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.game-status--finalized {
  background: var(--success-soft);
  color: var(--green);
}

/* -- Save button (score-save controller) -- */

.col-save { width: 56px; }

.game-cell__save-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: white;
  white-space: nowrap;
}
.game-cell__save-btn:hover {
  background: var(--accent-dark);
}
.game-cell__save-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.game-cell__input--dirty {
  border-color: var(--warning) !important;
}

.match-cell--save {
  padding: 0 2px;
  vertical-align: middle;
}

/* -- Score Status chip -- */

.score-status-chip {
  display: inline-block;
  padding: 1px 7px;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.score-status-chip--missing   { background: var(--bg-2); color: var(--ink-3); }
.score-status-chip--entered   { background: var(--accent-light); color: var(--accent-dark); }
.score-status-chip--submitted { background: var(--warning-soft); color: var(--amber-600); }
.score-status-chip--accepted  { background: var(--success-soft); color: var(--green-600); }
.score-status-chip--resolved  { background: var(--success-soft); color: var(--green-600); }


.conflict-icon { color: var(--amber-500); font-weight: 700; }
.conflict-icon--muted { color: var(--ink-4); }

.score-progression-link {
  text-decoration: none;
  margin-left: 4px;
  font-size: var(--text-sm);
}

/* -- Elo info icon -- */

.elo-info-icon {
  color: var(--accent);
  font-size: var(--text-base);
  text-decoration: none;
  cursor: pointer;
}
.elo-info-icon:hover { color: var(--accent-dark); }

/* -- Score Review modal -- */

.score-review__context {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-bottom: 1rem;
  font-weight: 600;
}

.score-review__empty {
  color: var(--ink-3);
  font-size: var(--text-sm);
  padding: 1rem 0;
}

.score-review__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  margin-bottom: 1rem;
}
.score-review__table th {
  text-align: left;
  padding: 6px 10px;
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.score-review__table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
}
.score-review__table .center { text-align: center; }

.score-review__row td:first-child {
  border-left: 3px solid transparent;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 8px 0 0 8px;
  padding-left: 7px;
}
.score-review__row td:last-child {
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  padding-right: 7px;
}
.score-review__row td:not(:first-child):not(:last-child) {
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.score-review__row--selectable {
  cursor: pointer;
}
.score-review__row--selectable:hover {
  background: var(--bg-2);
}

.score-review__row--active {
  background: var(--accent-subtle);
}

.score-review__row--selected td:first-child {
  border-left-color: var(--accent);
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
}
.score-review__row--selected td:last-child {
  border-right-color: var(--accent);
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
}
.score-review__row--selected td:not(:first-child):not(:last-child) {
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
}

.score-review__role-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  margin-left: 4px;
}
.score-review__role-chip--staff    { background: var(--accent-light); color: var(--accent-dark); }
.score-review__role-chip--player   { background: var(--success-soft); color: var(--green-600); }
.score-review__role-chip--referee  { background: var(--warning-soft); color: var(--amber-600); }

.score-review__notes {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
}

.score-review__delete-col { width: 4.5rem; text-align: right; }

.score-review__delete-btn {
  border: 1px solid var(--danger);
  background: var(--surface);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  cursor: pointer;
}
.score-review__delete-btn:hover {
  background: var(--danger);
  color: #fff;
}

/* -- Enter Scores modal -- */

.enter-scores__context {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.enter-scores__meta {
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.enter-scores__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.enter-scores__team {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.enter-scores__input {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 700;
}

.enter-scores__notes {
  margin-bottom: 1rem;
}
.enter-scores__optional {
  font-weight: 400;
  color: var(--ink-4);
}
.enter-scores__textarea {
  resize: vertical;
  min-height: 60px;
}

/* -- Elo Details modal -- */

/* Header — game info above the divider */
.elo-details__header {
  align-items: flex-start;
}
.elo-details__header-left {
  flex: 1;
}
.elo-details__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.elo-details__header-teams {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-top: 0.5rem;
}
.elo-details__header-teams strong {
  color: var(--ink);
  font-weight: 700;
}
.elo-details__header-line {
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

/* Team cards */
.elo-details__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.elo-details__card {
  border: 1px solid var(--gray-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.elo-details__card-header {
  background: var(--surface-2);
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border);
}

.elo-details__card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.5rem;
  padding: 0.75rem;
}

.elo-details__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elo-details__stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.elo-details__stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.elo-details__stat-after {
  display: inline-block;
  background: var(--gray-800);
  color: var(--white);
  font-size: var(--text-lg);
  font-weight: 800;
  padding: 1px 8px;
  border-radius: var(--r-md);
  font-variant-numeric: tabular-nums;
  width: fit-content;
  line-height: 1.6;
}

.elo-details__delta-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  width: fit-content;
  line-height: 1.6;
}
.elo-details__delta-badge.elo-pos {
  background: var(--success-soft);
  color: var(--green-600);
}
.elo-details__delta-badge.elo-neg {
  background: var(--danger-soft);
  color: var(--red-600);
}

.elo-details__card-footer {
  padding: 0.35rem 0.75rem;
  font-size: var(--text-xs);
  color: var(--ink-3);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.elo-details__prov-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-weight: 700;
  background: var(--warning-soft);
  color: var(--amber-600);
}

.elo-details__note {
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.elo-details__note strong {
  color: var(--ink-2);
}

/* Ruleset bar */
.elo-details__ruleset-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-md);
  overflow: hidden;
}

.elo-details__ruleset-item {
  flex: 1 1 0;
  min-width: 100px;
  padding: 0.5rem 0.75rem;
  text-align: center;
  border-right: 1px solid var(--border);
}
.elo-details__ruleset-item:last-child { border-right: none; }
.elo-details__ruleset-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  display: block;
  margin-bottom: 2px;
}
.elo-details__ruleset-value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

/* Scenarios card wrapper */
.elo-details__scenarios-card {
  border: 1px solid var(--gray-300);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.elo-details__scenarios-card-header {
  padding: 0.5rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

/* Butterfly chart */
.elo-butterfly {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.elo-butterfly thead th {
  padding: 0.5rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: bottom;
}
.elo-butterfly__th-bar {
  width: 130px;
  color: var(--ink-4);
  font-weight: 600;
}
.elo-butterfly__th-score { width: 70px; }
.elo-butterfly__th-mid { width: 0; padding: 0; }
.elo-butterfly__prior {
  display: inline-block;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 1px 8px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.elo-butterfly tbody td {
  padding: 0;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.elo-butterfly tbody tr:last-child td { border-bottom: none; }
.elo-butterfly__score {
  text-align: center;
  font-weight: 600;
  color: var(--ink-3);
  padding: 8px 4px;
}

/* Middle column for "Actual" label */
.elo-butterfly__mid-cell {
  padding: 0;
  text-align: center;
  overflow: visible;
  width: 0;
}
.elo-butterfly__actual-tag {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-dark);
  white-space: nowrap;
}

/* Bar cells */
.elo-butterfly__bar-cell { padding: 5px 8px; }
.elo-butterfly__bar-wrap {
  display: flex;
  align-items: center;
  height: 18px;
  gap: 5px;
}
.elo-butterfly__bar-wrap--left { flex-direction: row-reverse; }
.elo-butterfly__fill {
  height: 100%;
  min-width: 2px;
  border-radius: 3px;
  flex-shrink: 0;
}
.elo-butterfly__fill--pos { background: rgba(16, 185, 129, 0.30); }
.elo-butterfly__fill--neg { background: rgba(239, 68, 68, 0.25); }
.elo-butterfly__val {
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.elo-butterfly__val--pos { color: var(--green-600); }
.elo-butterfly__val--neg { color: var(--red-600); }

/* Actual result row */
.elo-butterfly tr.is-actual td { background: var(--accent-subtle); }
.elo-butterfly tr.is-actual .elo-butterfly__score { color: var(--ink); font-weight: 700; }
.elo-butterfly tr.is-actual .elo-butterfly__fill--pos { background: rgba(16, 185, 129, 0.45); }
.elo-butterfly tr.is-actual .elo-butterfly__fill--neg { background: rgba(239, 68, 68, 0.40); }

.elo-butterfly tbody tr:hover td { background: var(--accent-subtle); }

/* -- Bulk Finalize -- */

.bulk-finalize__warning {
  background: var(--warning-soft);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.7rem;
  font-size: var(--text-sm);
  margin-bottom: 0.8rem;
  color: var(--amber-600);
}