/* Match report: filters, header, shot comparison strip, and the games table.
   Palette mirrors the app (cool_grey #edf5f4, cool_blue #3a3e5b). */

/* --- filter panel ----------------------------------------------------------
   Compact fixed-width cells: the generic .filter-grid uses minmax(220px, 1fr),
   sized for the Skaters panel's ~12 controls. With only five controls each 1fr
   cell balloons to half the screen, so pin the tracks instead. */
/* Doubled class beats .filter-grid's own rule regardless of which stylesheet
   the bundler loads first (they tie on specificity otherwise). */
.filter-grid.mr-filter-grid {
  grid-template-columns: repeat(auto-fit, 260px);
}

/* The date-range input-group must stay one row: .filter-grid forces every
   .form-control to width:100%, which wraps the group's two inputs onto their
   own lines (stacked around the "to"). Flex the group and share the width. */
.mr-filter-grid .input-daterange {
  display: flex;
  align-items: center;
  width: 100%;
}
.mr-filter-grid .input-daterange .form-control {
  width: auto !important;
  flex: 1 1 0;
  min-width: 0;
  /* Match the selectize inputs beside it (bslib ~38px), which the default date
     input-group renders shorter than. */
  height: 38px;
}
.mr-filter-grid .input-daterange .input-group-addon,
.mr-filter-grid .input-daterange .input-group-text {
  height: 38px;
}
/* The "to" separator: stretch to the fields' height and centre its text
   (a bare padding box renders shorter than the inputs beside it). */
.mr-filter-grid .input-daterange .input-group-addon,
.mr-filter-grid .input-daterange .input-group-text {
  padding: 0 8px;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* --- Players tab: team toggle --------------------------------------------- */
.mr-players-toolbar {
  display: flex;
  justify-content: flex-start;   /* sit at the far left, under the tabs */
  padding: 8px 0 10px;
}
/* Reuses Team Overview's .to-seg segmented look; --to-ctl-h is defined there on
   a team-overview-scoped selector, so redeclare it here. Each option is a crest
   + club name, left-aligned. */
.mr-team-switch { --to-ctl-h: 40px; font-weight: 600; }
.mr-team-switch .radio-inline > span {
  justify-content: flex-start;
  gap: 8px;
  padding: 0 16px;
  min-width: 0;
  font-size: 13px;
}
.mr-switch-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}
.mr-switch-name { white-space: nowrap; }

/* --- Power Play tab: situation tiles --------------------------------------- */
/* The KPI strip reuses .pp-shotstats' tile anatomy (player_card.css), but it
   stands alone between the situation switch and the map card: no rink above
   it, so no separator rule, and the row hugs its content instead of
   space-betweening five tiles across the whole tab width. Compound selector,
   NOT .mr-pp-tiles alone: player_card.css loads after this file (alphabetical
   <link> order), so a same-specificity override would lose to .pp-shotstats'
   own space-between. */
.pp-shotstats.mr-pp-tiles {
  justify-content: flex-start;
  width: fit-content;
  gap: 6px 28px;
  margin: 0 2px 12px;
  padding-top: 0;
  border-top: none;
}
.pp-shotstats.mr-pp-tiles .pp-kpi { flex: 0 0 auto; }

/* --- "Report" button in the games table ----------------------------------- */
.mr-report-btn {
  font-size: 0.78rem;
  padding: 2px 12px;
  white-space: nowrap;
}

/* --- header card ---------------------------------------------------------- */
.mr-header-card {
  position: relative;
  margin-bottom: 1rem;
}
.mr-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.mr-header-grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "nameL logoL score logoR nameR"
    "meta  meta  meta  meta  meta";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.4rem;
  max-width: 900px;
  margin-inline: auto;
}
/* Flex so the name sits VERTICALLY CENTRED against the 60px crest (a plain
   block cell rode up to the logo's top), and so the colour dot lays out beside
   it. Home hugs the centre from the left (dot | name), away from the right
   (name | dot). */
.mr-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.mr-name-home { grid-area: nameL; justify-content: flex-end; }
.mr-name-away { grid-area: nameR; justify-content: flex-start; }
.mr-score     { grid-area: score; }
.mr-meta      { grid-area: meta;  text-align: center; }

.mr-team-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.mr-team-name {
  font-weight: 700;
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-logo-well {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f1f5f9;
  box-shadow: inset 0 0 0 1px #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mr-logo-well:first-of-type { grid-area: logoL; }
.mr-team-logo { max-width: 46px; max-height: 46px; display: block; }

.mr-score {
  display: flex;
  align-items: center;   /* centre the dash with the numbers, not on the baseline */
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mr-score-num { font-size: 2rem; font-weight: 700; color: #3a3e5b; line-height: 1; }
/* Loser's score recedes a touch so the winning score reads first. */
.mr-score-loser { color: #9aa2b4; }
/* Match the numbers' size so the dash's optical centre lands with theirs (a
   smaller dash rides high); lighten it instead of shrinking it. */
.mr-score-sep { font-size: 2rem; font-weight: 400; opacity: 0.45; line-height: 1; }

/* 3 columns so the league logo is centred (under the dash), date/Final flank. */
.mr-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.6rem;
}
.mr-meta-date  { justify-self: end; }
.mr-meta-badge { justify-self: center; display: flex; }
.mr-meta-final { justify-self: start; }
/* Inline league badge. Deliberately NOT .pc-league-badge: that class is
   absolutely positioned to overlap the player-card crest, and in this header it
   would anchor to the card and land in the bottom-right corner.
   FIXED SQUARE box + object-fit:contain, for the same reason .pc-league-badge
   does it: sizing a wordmark (SHL, wide) by height alone let it render ~2x the
   footprint of a compact mark (NL, near-square). The square letterboxes every
   league to one footprint without distortion. */
.mr-league-badge {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
/* The header never scrolls; anything that would overflow is a styling bug we
   want visible as clipping, not as stray scrollbars on the card. */
.mr-header-card .card-body { overflow: hidden; }

@media (max-width: 768px) {
  .mr-header-grid { column-gap: 0.5rem; }
  .mr-logo-well { width: 50px; height: 50px; }
  .mr-team-logo { max-width: 40px; max-height: 40px; }
  .mr-score-num { font-size: 1.6rem; }
}

/* --- shot comparison strip (futi style, centre-out) ------------------------
   Per metric: a centred label, then one line of
   [home value] [home half-track] [away half-track] [away value].
   The fills grow OUT FROM THE CENTRE, each side sized relative to the larger
   one; values sit on the same flex line as the bar, so nothing is offset. */
.mr-cmp {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem 0.25rem;
}
.mr-cmp-label {
  text-align: center;
  font-size: 0.8rem;
  color: #64707a;
  margin-bottom: 0.1rem;
}
.mr-cmp-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mr-cmp-val {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: #3a3e5b;
  font-variant-numeric: tabular-nums;
  flex: 0 0 3rem;
}
.mr-cmp-home { text-align: right; }
.mr-cmp-away { text-align: left; }
/* Each side is n_seg discrete pills with small gaps (futi style). The home half
   is reversed so its first pill sits at the centre and fills grow outward
   (leftward); the away half grows rightward. Each pill holds a fractional fill
   anchored to its centre-facing edge, so the fill reads as continuous. */
.mr-cmp-half {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 3px;
}
.mr-cmp-half-home { flex-direction: row-reverse; margin-right: 3px; }
.mr-cmp-half-away { flex-direction: row;         margin-left: 3px; }
.mr-cmp-seg {
  flex: 1 1 0;
  height: 9px;
  border-radius: 3px;
  background: #dfe7e6;   /* unlit track */
  overflow: hidden;
  display: flex;
}
/* fill hugs the centre side of each pill: right edge for home, left for away */
.mr-cmp-half-home .mr-cmp-seg { justify-content: flex-end; }
.mr-cmp-half-away .mr-cmp-seg { justify-content: flex-start; }
.mr-cmp-seg-fill { height: 100%; border-radius: 3px; }