/*
  Athlete Match Review Center -- Version 3.

  Loaded alongside styles/v3-app-shell.css in v3.html (after it, so the
  --v3-* custom properties it defines are already in scope) -- this file
  never redefines them, never declares a new one, and never touches
  css/styles.css, the legacy Phase 9.7 stylesheet. Every rule is scoped
  under [data-match-review-root] or a .v3-mr-* class that no other Version 3
  surface uses (.v3-roster-*, .v3-roster-import-*, .v3-fm-*,
  .v3-import-*), so this page and the ones already shipped are styled
  independently and neither can bleed into the other or into the app shell.

  Responsive strategy: the filter bar and summary cards are auto-fitting
  grids that collapse to a single column on narrow viewports; the review
  table scrolls horizontally inside its own wrapper rather than forcing the
  page body to scroll sideways; and the table/detail split becomes a single
  stacked column below 1080px.
*/

[data-match-review-root] {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-5);
}

/* ------------------------------------------------------------------ */
/* Summary cards                                                       */
/* ------------------------------------------------------------------ */

.v3-mr-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--v3-space-3);
  margin: 0;
}

.v3-mr-summary-card {
  padding: var(--v3-space-4);
  background: var(--v3-surface-muted);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-md);
  border-left: 4px solid var(--v3-maroon);
}

.v3-mr-summary-card--ambiguous {
  border-left-color: #9a6700;
}

.v3-mr-summary-card--unmatched {
  border-left-color: var(--v3-maroon-light);
}

.v3-mr-summary-card--ignored {
  border-left-color: var(--v3-border-strong);
}

.v3-mr-summary-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-mr-summary-value {
  margin: var(--v3-space-1) 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--v3-text);
}

/* ------------------------------------------------------------------ */
/* Filter bar                                                          */
/* ------------------------------------------------------------------ */

.v3-mr-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--v3-space-3);
  align-items: end;
  padding: var(--v3-space-4);
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-md);
}

.v3-mr-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
  min-width: 0;
}

.v3-mr-filter-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--v3-text-muted);
}

.v3-mr-filter-field input,
.v3-mr-filter-field select {
  width: 100%;
  padding: var(--v3-space-2) var(--v3-space-3);
  font: inherit;
  color: var(--v3-text);
  background: var(--v3-surface);
  border: 1px solid var(--v3-border-strong);
  border-radius: var(--v3-radius-sm);
}

.v3-mr-filter-actions {
  display: flex;
  align-items: flex-end;
}

/* ------------------------------------------------------------------ */
/* Status region                                                       */
/* ------------------------------------------------------------------ */

.v3-mr-status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--v3-text-muted);
}

.v3-mr-status:focus-visible {
  outline: 2px solid var(--v3-focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Table + detail layout                                               */
/* ------------------------------------------------------------------ */

.v3-mr-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--v3-space-4);
  align-items: start;
}

@media (max-width: 1080px) {
  .v3-mr-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.v3-mr-table-wrap {
  overflow-x: auto;
  /* P12, and the same containment class P11 closed on `.v3-roster-table-wrap`
     and `.v3-vbt-table-wrap`. This box already scrolled its own table -- 336px
     around 981px at a 420px viewport -- but its scrollable overflow still
     counted into the root scroll area, so the page scrolled sideways from
     900px down: 374px of excess at 900, 582px at 420, 627px at 375.

     P11 could not see it. The seed dataset resolves every athlete, so the
     unresolved-identity table was empty and the wrapper had nothing to
     overflow with; `layoutContainment.test.js` C1 pinned this selector as an
     unbounded risk for exactly that reason. It took a dataset with duplicate
     full names -- 25 unresolved rows -- to populate it.

     Measured at 420px: `min-width: 0`, `max-width: 100%`, `width: 100%` and
     `contain: inline-size` all left document.scrollWidth at 1002.
     `overflow-x: hidden` did not fix it either, which is worth recording --
     masking would not even have worked here. `contain: layout` and
     `contain: paint` both bounded it to 420; paint is used because it is the
     narrower statement of intent (this box's overflow does not escape) and
     because it keeps one containment vocabulary across the three wrappers. */
  contain: paint;
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-md);
}

.v3-mr-table-wrap:focus-visible {
  outline: 2px solid var(--v3-focus-ring);
  outline-offset: 2px;
}

.v3-mr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.v3-mr-th {
  position: sticky;
  top: 0;
  padding: var(--v3-space-3);
  text-align: left;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
  background: var(--v3-surface-muted);
  border-bottom: 1px solid var(--v3-border-strong);
}

.v3-mr-td {
  padding: var(--v3-space-3);
  vertical-align: top;
  border-bottom: 1px solid var(--v3-border);
}

.v3-mr-row:last-child .v3-mr-td {
  border-bottom: 0;
}

.v3-mr-row--selected .v3-mr-td {
  background: var(--v3-surface-muted);
  box-shadow: inset 3px 0 0 0 var(--v3-maroon);
}

.v3-mr-td--importDate,
.v3-mr-td--system {
  white-space: nowrap;
}

/* Row selection control -- a real button, so keyboard users reach it. */
.v3-mr-select {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--v3-maroon);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--v3-radius-sm);
  cursor: pointer;
}

.v3-mr-select:hover {
  text-decoration: underline;
}

.v3-mr-select:focus-visible {
  outline: 2px solid var(--v3-focus-ring);
  outline-offset: 2px;
}

.v3-mr-select[aria-current="true"] {
  color: var(--v3-maroon-dark);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Confidence + status badges                                          */
/* ------------------------------------------------------------------ */

.v3-mr-confidence,
.v3-mr-status-badge {
  display: inline-block;
  padding: 2px var(--v3-space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid var(--v3-border-strong);
  border-radius: 999px;
  background: var(--v3-surface-muted);
  color: var(--v3-text-muted);
}

.v3-mr-confidence--medium {
  color: #6b4700;
  border-color: #d9b26a;
  background: #fdf3df;
}

.v3-mr-confidence--low {
  color: var(--v3-maroon-dark);
  border-color: #d8b3bf;
  background: #fbeef2;
}

.v3-mr-status-badge--ambiguous {
  color: #6b4700;
  border-color: #d9b26a;
  background: #fdf3df;
}

.v3-mr-status-badge--unmatched {
  color: var(--v3-maroon-dark);
  border-color: #d8b3bf;
  background: #fbeef2;
}

.v3-mr-status-badge--ignored {
  text-decoration: line-through;
}

/* ------------------------------------------------------------------ */
/* Row actions (disabled placeholders this milestone)                  */
/* ------------------------------------------------------------------ */

.v3-mr-td--actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v3-space-1);
}

.v3-mr-action {
  padding: var(--v3-space-1) var(--v3-space-2);
  font: inherit;
  font-size: 0.78rem;
  color: var(--v3-text-muted);
  white-space: nowrap;
  background: var(--v3-surface-muted);
  border: 1px solid var(--v3-border-strong);
  border-radius: var(--v3-radius-sm);
}

.v3-mr-action[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Detail panel                                                        */
/* ------------------------------------------------------------------ */

.v3-mr-detail-panel {
  position: sticky;
  top: var(--v3-space-4);
  padding: var(--v3-space-4);
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-md);
  max-height: calc(100vh - var(--v3-header-height) - var(--v3-space-6));
  overflow-y: auto;
}

@media (max-width: 1080px) {
  .v3-mr-detail-panel {
    position: static;
    max-height: none;
  }
}

.v3-mr-detail-panel-heading {
  margin: 0 0 var(--v3-space-3);
  font-size: 1rem;
  font-weight: 700;
}

.v3-mr-detail-placeholder {
  margin: 0;
  font-size: 0.9rem;
  color: var(--v3-text-muted);
}

.v3-mr-detail {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-4);
}

.v3-mr-detail-section + .v3-mr-detail-section {
  padding-top: var(--v3-space-4);
  border-top: 1px solid var(--v3-border);
}

.v3-mr-detail-heading {
  margin: 0 0 var(--v3-space-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-mr-detail-list {
  margin: 0;
  display: grid;
  gap: var(--v3-space-1);
}

.v3-mr-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--v3-space-2);
  font-size: 0.85rem;
}

.v3-mr-detail-label {
  margin: 0;
  color: var(--v3-text-muted);
}

.v3-mr-detail-value {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--v3-text);
}

.v3-mr-detail-reason {
  margin: 0 0 var(--v3-space-3);
  font-size: 0.88rem;
  line-height: 1.5;
}

.v3-mr-detail-empty {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--v3-text-muted);
}

.v3-mr-alias-list,
.v3-mr-candidate-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
}

.v3-mr-alias-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--v3-space-2);
}

.v3-mr-alias {
  padding: 2px var(--v3-space-2);
  font-size: 0.78rem;
  background: var(--v3-surface-muted);
  border: 1px solid var(--v3-border);
  border-radius: 999px;
}

.v3-mr-candidate {
  display: flex;
  flex-direction: column;
  padding: var(--v3-space-2);
  background: var(--v3-surface-muted);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
}

.v3-mr-candidate-name {
  font-size: 0.88rem;
  font-weight: 600;
}

.v3-mr-candidate-meta {
  font-size: 0.78rem;
  color: var(--v3-text-muted);
}

/* ------------------------------------------------------------------ */
/* Empty states + pagination                                           */
/* ------------------------------------------------------------------ */

.v3-mr-empty {
  padding: var(--v3-space-6) var(--v3-space-4);
  text-align: center;
  background: var(--v3-surface);
  border: 1px dashed var(--v3-border-strong);
  border-radius: var(--v3-radius-md);
}

.v3-mr-empty-title {
  margin: 0 0 var(--v3-space-2);
  font-size: 1rem;
  font-weight: 700;
}

.v3-mr-empty-body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--v3-text-muted);
}

.v3-mr-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v3-space-3);
}

.v3-mr-page-label {
  margin: 0;
  margin-right: auto;
  font-size: 0.9rem;
  color: var(--v3-text-muted);
}

.v3-mr-page-label:focus-visible {
  outline: 2px solid var(--v3-focus-ring);
  outline-offset: 2px;
}