/*
 * Prediction History page + PredictionHistoryCard styles (Task 1.25).
 * Loaded only by templates/predictions/prediction_history.html, on top
 * of predictions-listing.css (reused for the shared header/filters/grid/
 * pagination layout - .predictions-listing__*). Built entirely from
 * existing tokens/primitives (.card, .badge, .pick-panel,
 * .result-card__header, .crest-badge, ...) - no new colors, no new
 * spacing scale.
 */

.prediction-history-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.prediction-history-card__match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.prediction-history-card__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  flex: 1;
  min-width: 0;
  text-align: center;
}

.prediction-history-card__team .text-body-sm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.prediction-history-card__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.prediction-history-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}

.prediction-history-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

/* "View Match" stays on the right when no source badge precedes it (ML predictions show none). */
.prediction-history-card__footer .btn {
  margin-left: auto;
}

/* Local stopgap: static/vendor/bootstrap/css/bootstrap.min.css defines
   its OWN `.text-body` utility class with `!important`
   (`color: rgba(var(--bs-body-color-rgb), ...) !important`), which
   silently wins over the design system's identically-named `.text-body`
   typography class (base.css) wherever it's used - a pre-existing,
   site-wide collision (flagged separately for a proper fix, not
   Task 1.25 scope). Scoped here only, so the selection-label text
   inside this card reads correctly against its dark surface. */
.prediction-history-card .pick-panel .text-body {
  color: var(--color-text-primary) !important;
}