/*
  Velocity-Based Training dashboard -- 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 and never touches css/styles.css, the legacy Phase 9.7
  stylesheet. Every rule is scoped under [data-perch-dashboard-root] or a
  .v3-vbt-* class that no other Version 3 surface uses, so this dashboard, the
  Perch *import* panel's .v3-perch-import-* namespace, the Roster Management
  page's .v3-roster-*, Match Review's .v3-mr-*, and Force Measurement's
  .v3-fm-* are all styled independently and none can bleed into another.

  Responsive strategy: the filter bar, KPI cards, and analytics cards are
  auto-fitting grids that collapse to fewer columns as the viewport narrows;
  the table and the detail panel sit in a two-column grid that becomes a
  single column below 1100px; and every table scrolls horizontally inside its
  own wrapper rather than forcing the page body to scroll sideways.

  Velocity zone colours are keyed off the *default* standard's zone keys. A
  team that configures its own standard still gets a fully working dashboard:
  unmatched keys simply fall through to the neutral default swatch, because no
  layout or behaviour depends on a zone colour existing.
*/

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

/* ------------------------------------------------------------------ */
/* Top filter bar                                                      */
/* ------------------------------------------------------------------ */

.v3-vbt-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 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-vbt-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
  min-width: 0;
}

.v3-vbt-filter-field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-vbt-filter-field input,
.v3-vbt-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-vbt-filter-actions {
  display: flex;
  align-items: end;
}

.v3-vbt-filter-actions .v3-button {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Status line and empty states                                        */
/* ------------------------------------------------------------------ */

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

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

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

.v3-vbt-empty-body {
  margin: 0;
  color: var(--v3-text-muted);
}

/* ------------------------------------------------------------------ */
/* Phase 1 -- KPI cards                                                */
/* ------------------------------------------------------------------ */

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

.v3-vbt-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
  padding: var(--v3-space-4);
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-left: 4px solid var(--v3-maroon);
  border-radius: var(--v3-radius-md);
}

.v3-vbt-kpi-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-vbt-kpi-value {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--v3-text);
  font-variant-numeric: tabular-nums;
}

.v3-vbt-kpi-hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--v3-text-muted);
}

.v3-vbt-kpi-card--personalRecordsToday {
  border-left-color: var(--v3-maroon-light);
}

/* ------------------------------------------------------------------ */
/* Phase 4 -- Session analytics                                        */
/* ------------------------------------------------------------------ */

.v3-vbt-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--v3-space-3);
  margin: 0 0 var(--v3-space-4);
}

.v3-vbt-analytics-card {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
  padding: var(--v3-space-3) var(--v3-space-4);
  background: var(--v3-surface-muted);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
}

.v3-vbt-analytics-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-vbt-analytics-value {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.v3-vbt-analytics-context {
  margin: 0;
  font-size: 0.78rem;
  color: var(--v3-text-muted);
}

.v3-vbt-analytics-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--v3-space-2) var(--v3-space-4);
  margin: 0 0 var(--v3-space-4);
}

.v3-vbt-analytics-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--v3-space-2);
  padding: var(--v3-space-2) 0;
  border-bottom: 1px solid var(--v3-border);
}

/* ------------------------------------------------------------------ */
/* Phase 5 -- Velocity zones                                           */
/* ------------------------------------------------------------------ */

.v3-vbt-zone-wrap {
  overflow-x: auto;
}

.v3-vbt-zone-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.v3-vbt-zone-table th,
.v3-vbt-zone-table td {
  padding: var(--v3-space-2) var(--v3-space-3);
  text-align: left;
  border-bottom: 1px solid var(--v3-border);
}

.v3-vbt-zone-table thead th {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
  background: var(--v3-surface-muted);
}

.v3-vbt-zone-name {
  display: flex;
  align-items: center;
  gap: var(--v3-space-2);
  font-weight: 600;
  white-space: nowrap;
}

.v3-vbt-zone-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--v3-border-strong);
}

.v3-vbt-zone-swatch--absolute-strength {
  background: #4b2c3f;
}
.v3-vbt-zone-swatch--accelerative-strength {
  background: #7a3b57;
}
.v3-vbt-zone-swatch--strength-speed {
  background: #b4693f;
}
.v3-vbt-zone-swatch--speed-strength {
  background: #1f7a6a;
}
.v3-vbt-zone-swatch--starting-strength {
  background: #1a5fb4;
}

.v3-vbt-zone-note {
  margin: var(--v3-space-2) 0 0;
  font-size: 0.8rem;
  color: var(--v3-text-muted);
}

/* ------------------------------------------------------------------ */
/* Phase 6 -- Table + detail panel layout                              */
/* ------------------------------------------------------------------ */

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

.v3-vbt-table-wrap {
  overflow-x: auto;
  /* Without this the wrapper is sized by its own content, so `overflow-x`
     never engages and a wide table pushes the whole page sideways instead of
     scrolling inside its box. The Sprint 1080, Readiness, Reports, and System
     Health wrappers already declare it; these two did not. */
  max-width: 100%;
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-md);
  /* P11. `overflow-x: auto` makes this box scroll its own content, and it does
     -- the wrapper measures ~338px at a 420px viewport while its table is over
     1000px wide. What it did *not* do is stop that scrollable overflow being
     counted into the root scroller, so the page itself still scrolled sideways
     by ~620px with nothing visibly outside the viewport.

     Measured, not guessed: at 420px every other candidate left
     `document.scrollWidth` at 1043 -- `min-width: 0` on the wrapper and on its
     flex parent, `width: 100%`, `flex: 1 1 0%`, `display: block` on the parent,
     `overflow: hidden` on the parent, `overflow-x: clip` on the parent and on
     the panel, and `contain: inline-size`. Only paint containment brought it to
     420. It makes this box a paint boundary, so its overflow can no longer
     contribute to an ancestor's scrollable area.

     Safe here specifically: nothing inside is absolutely positioned, and the
     sticky table header stays sticky because it positions against this
     wrapper, which is the scroll container either way. */
  contain: paint;
}

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

/* ------------------------------------------------------------------ */
/* Phase 2 -- Athlete table                                            */
/* ------------------------------------------------------------------ */

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

.v3-vbt-th {
  padding: 0;
  text-align: left;
  white-space: nowrap;
  background: var(--v3-surface-muted);
  border-bottom: 1px solid var(--v3-border-strong);
}

.v3-vbt-th--numeric {
  text-align: right;
}

.v3-vbt-th--actions {
  padding: var(--v3-space-3);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-vbt-sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--v3-space-1);
  width: 100%;
  padding: var(--v3-space-3);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.v3-vbt-th--numeric .v3-vbt-sort-button {
  justify-content: flex-end;
}

.v3-vbt-sort-button:hover {
  color: var(--v3-maroon);
  text-decoration: underline;
}

.v3-vbt-sort-button.is-sorted {
  color: var(--v3-maroon);
}

.v3-vbt-sort-indicator {
  font-size: 0.7rem;
}

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

.v3-vbt-td--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.v3-vbt-row:hover {
  background: var(--v3-surface-muted);
}

.v3-vbt-row.is-selected {
  background: #f3e8ed;
  box-shadow: inset 3px 0 0 var(--v3-maroon);
}

.v3-vbt-select-button {
  padding: var(--v3-space-1) var(--v3-space-3);
  font: inherit;
  font-size: 0.82rem;
  color: var(--v3-maroon);
  background: var(--v3-surface);
  border: 1px solid var(--v3-border-strong);
  border-radius: var(--v3-radius-sm);
  cursor: pointer;
}

.v3-vbt-select-button:hover {
  background: var(--v3-surface-muted);
}

.v3-vbt-select-button[aria-pressed="true"] {
  color: #fff;
  background: var(--v3-maroon);
  border-color: var(--v3-maroon);
}

/* ------------------------------------------------------------------ */
/* Phase 3 -- Athlete detail panel                                     */
/* ------------------------------------------------------------------ */

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

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

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

.v3-vbt-detail-header {
  padding-bottom: var(--v3-space-3);
  border-bottom: 1px solid var(--v3-border);
}

.v3-vbt-detail-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.v3-vbt-detail-position {
  margin: 0;
  font-size: 0.85rem;
  color: var(--v3-text-muted);
}

.v3-vbt-detail-note {
  margin: var(--v3-space-3) 0 0;
  padding: var(--v3-space-2) var(--v3-space-3);
  font-size: 0.82rem;
  background: var(--v3-surface-muted);
  border-left: 3px solid var(--v3-maroon-light);
  border-radius: var(--v3-radius-sm);
}

.v3-vbt-detail-section {
  margin-top: var(--v3-space-4);
}

.v3-vbt-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-vbt-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--v3-space-2);
  margin: 0;
}

.v3-vbt-detail-item {
  padding: var(--v3-space-2);
  background: var(--v3-surface-muted);
  border-radius: var(--v3-radius-sm);
}

.v3-vbt-detail-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-vbt-detail-value {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.v3-vbt-exercise-list,
.v3-vbt-set-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-vbt-exercise {
  margin-top: var(--v3-space-4);
  padding-top: var(--v3-space-3);
  border-top: 1px solid var(--v3-border);
}

.v3-vbt-exercise-heading {
  margin: 0 0 var(--v3-space-2);
  font-size: 1rem;
  font-weight: 700;
  color: var(--v3-maroon);
}

.v3-vbt-set {
  margin-top: var(--v3-space-3);
  padding: var(--v3-space-3);
  background: var(--v3-surface-muted);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
}

.v3-vbt-set-heading {
  margin: 0 0 var(--v3-space-2);
  font-size: 0.85rem;
  font-weight: 700;
}

.v3-vbt-rep-table-wrap {
  margin-top: var(--v3-space-2);
  overflow-x: auto;
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
}

.v3-vbt-rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.v3-vbt-rep-th {
  padding: var(--v3-space-2);
  text-align: left;
  white-space: nowrap;
  font-size: 0.68rem;
  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-vbt-rep-td {
  padding: var(--v3-space-2);
  white-space: nowrap;
  border-bottom: 1px solid var(--v3-border);
}

.v3-vbt-rep-row.is-best-rep {
  background: #f3e8ed;
}

.v3-vbt-best-rep {
  color: var(--v3-maroon);
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

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

.v3-vbt-page-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--v3-text-muted);
}

.v3-vbt-pagination .v3-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

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

  .v3-vbt-detail-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  .v3-vbt-kpi-grid,
  .v3-vbt-analytics-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .v3-vbt-kpi-value {
    font-size: 1.35rem;
  }

  .v3-vbt-pagination {
    justify-content: space-between;
  }
}