/*
  ==================
  STANDINGS LAYOUT
  ==================
*/

.standings-scroll {
  overflow-x: auto;
  position: relative;
}

/* Standings header tooltips would otherwise be clipped by the card's
   top edge. Flip them to appear BELOW the header (overlapping the
   first body row briefly on hover) so they stay visible. */
.standings thead th[data-tooltip]:hover::after,
.standings thead th[data-tooltip]:focus-visible::after {
  bottom: auto;
  top: calc(100% + 4px);
}

.standings-scroll .standings {
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
}

/*
  Canonical card-table look (see docs/style-guide.html#table):
  uppercase letter-spaced headers on tinted bg, hairline row borders,
  no margin (lives flush inside .card).
*/
.standings { margin: 0; }

/* Default cell alignment: standings are number-heavy, so cells center
   unless a more specific rule (e.g. dashboard's per-column rules,
   .standings-col--team below) opts them to left. Moved here from
   list.css where a stale companion rule was wiping single-row-header
   tables' padding. */
.standings th,
.standings td {
  text-align: center;
}

.standings thead th {
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: bottom;
}
/* The standings page has a two-row header: an outer group-span row
   (RANKINGS / MATCHES PLAYED IN / MATCH RESULTS) sitting above the
   per-column labels. The outer row gets extra top padding and no
   bottom border so it reads as part of the column-label row below.

   `tr:first-of-type:not(:last-of-type)` ensures we only zero out the
   first row when there is actually a second row beneath it. Single-row
   header tables that share .standings styling — e.g. the dashboard's
   compact standings — keep their normal header padding. */
.standings thead tr:first-of-type:not(:last-of-type) th {
  padding: 0 12px;
  padding-top: 14px;
  border-bottom: none;
}

/* Team column always reads left even though numerics center. */
.standings .standings-col--team { text-align: left; }

/* Subtle grey chip beside team name when the team has withdrawn from
   the season but their match history still shows in past standings. */
.standings-withdrawn-chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--bg-2);
  color: var(--ink-3);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.standings tbody td {
  border-top: 1px solid var(--line-2);
  padding: 12px;
  vertical-align: middle;
}
.standings tbody tr:first-child td { border-top: 0; }
.standings tbody tr:hover {
  background: var(--bg-2);
}
/* Sticky team column gets the same hover tint so the row reads as a
   single hover band. (The two duplicate `tr:hover .standings-col--team`
   rules that previously set conflicting bg colours were consolidated
   into this single rule.) */
.standings tbody tr:hover .standings-col--team {
  background: var(--bg-2);
}

/*
  Team column — sized, truncated, and sticky-locked when scrolling horizontally.
  Sticky bg matches the surrounding card so the column blends as it locks.
*/
.standings .standings-col--team {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  font-weight: 700;
}

.standings thead .standings-col--team {
  z-index: 3;
  background: var(--surface-2);
}

/*
  Toolbar above the table
*/
.standings-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}

/*
  Aggregation toggle pill group (Periodic vs Cumulative).
  Visually the canonical .segmented control — kept under existing
  class names to avoid HTML+JS churn.
*/
.standings-aggregation-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.ruleset-pill--inline {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-3);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.ruleset-pill--inline:hover { color: var(--ink); }
.ruleset-pill--inline.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/*
  In-header variant of the aggregation toggle: sits beside the MATCH RESULTS
  group label inside its <th>. Sized down so the header row height is
  unchanged; PERIODIC/CUMULATIVE are uppercased and one notch smaller than
  the surrounding group label.
*/
.standings-group-header--match-results {
  white-space: nowrap;
}
.standings-group-header__label {
  vertical-align: middle;
  margin-right: 0.5rem;
}
.standings-group-header--match-results .standings-aggregation-toggle {
  vertical-align: middle;
}
.ruleset-pill--header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.6rem;
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  line-height: 1.2;
}

/*
  Filter bar layout overrides for the standings page: top-align so labels
  line up regardless of which filter is taller, and let the right-side
  group (Ruleset + Apply Ruleset + Adjust Manually) push to the right edge
  of the grey container.
*/
.standings-filters {
  align-items: flex-start;
}
/* Sit naturally in the flex flow rather than getting pinned with
   margin-left: auto. Pinning right kept the cluster anchored to the
   end of its line even after wrapping, which made it look misaligned
   with the left-side filters; without the auto margin it follows the
   row when there's room and left-aligns when it wraps.
   flex-end so the short Adjust Manually wrapper bottom-aligns with the
   Apply Ruleset button instead of riding up to the Ruleset label row. */
.standings-filters__right {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.standings-filters__right .schedule-filter-actions {
  margin-left: 0;
}

/*
  Ruleset form: keep the dropdown labelled with "Ruleset" stacked above the
  select, but place the Apply Ruleset submit button inline to its right.
*/
.standings-recalc-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
/* Match the .schedule-filter gap (4px) so the Ruleset label+select stack
   ends up the same height as the Team / Columns cells beside it — without
   this override the form's own larger gap pushed the Ruleset control a
   few pixels lower than its neighbours. */
.standings-recalc-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/*
  Ensure the Cancel button stays hidden when the `hidden` attribute is set
  — without this the schedule-actions__rank-cancel `display: block` rule
  would override the UA `[hidden]` default.
*/
.schedule-actions__rank-cancel[hidden] {
  display: none;
}

/*
  Lock the slot widths so the buttons don't snap narrower when their text
  swaps in adjust mode (Adjust Manually → Save Ranks). Mins are sized to the
  longer label so the smaller text simply gets extra whitespace inside an
  unchanged box. Cancel adopts --adjust to match the Save Ranks slot width.
*/
.schedule-actions__rank--ruleset {
  min-width: 9.5rem;
}
.schedule-actions__rank--adjust,
.schedule-actions__rank-cancel--adjust {
  min-width: 11rem;
}

/*
  Apply Ruleset stays in the layout while the user is adjusting manually,
  but is visually muted and unclickable. Distinct from .schedule-actions__rank-cancel,
  which is grey-but-clickable: this variant has no border, no hover, and a
  not-allowed cursor so it reads as disabled rather than as an alternate action.
*/
.schedule-actions__rank--disabled,
.schedule-actions__rank--disabled:hover {
  background: var(--bg-2);
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 0.7;
}

/*
  Column visibility picker uses the schedule-filter dropdown look
*/
.standings-columns-picker {
  position: relative;
}

.standings-columns-picker__summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.standings-columns-picker__summary::-webkit-details-marker {
  display: none;
}

.standings-columns-picker__chevron {
  margin-left: 0.5rem;
  color: var(--ink-3);
  font-size: 0.75rem;
}

.standings-columns-picker[open] .standings-columns-picker__summary {
  border-color: var(--ink-3);
}

.standings-columns-picker__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.5rem;
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.standings-columns-picker__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
}

.standings-columns-picker__item:hover {
  background: var(--bg-2);
}

.standings-columns-picker__item--locked {
  color: var(--ink-3);
  cursor: not-allowed;
}

.standings-columns-picker__item--locked:hover {
  background: transparent;
}

/* Footer row inside the picker menu — currently hosts the
   "Apply league defaults" button which clears the user's saved
   view_preference for this picker so the season-level default takes over. */
.standings-columns-picker__footer {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

.standings-columns-picker__reset {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.standings-columns-picker__reset:hover {
  background: var(--bg-2);
  color: var(--ink);
}

/*
  Column visibility — applied dynamically by Stimulus controller
*/
.standings .column-hidden {
  display: none;
}

.standings tbody tr.filter-hidden {
  display: none;
}

/*
  Sortable column headers — pointer cursor (click-to-sort), arrows + position
  superscript when stacked sort is active.
*/
.standings thead th[data-column-key]:not([data-no-sort]) {
  cursor: pointer;
  user-select: none;
}
.standings thead th[data-column-key]:not([data-no-sort]):hover {
  color: var(--ink);
}
.standings-sort-indicator {
  font-size: 0.75em;
  margin-left: 0.2em;
  color: var(--ink-3);
}
.standings-sort-position {
  font-size: 0.65em;
  color: var(--ink-3);
  vertical-align: super;
  margin-left: 0.1em;
}

/*
  Ruleset modal
*/
.ruleset-modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: min(640px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ruleset-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bg-2);
}
.ruleset-modal__title {
  margin: 0;
  font-size: 1.25rem;
}
.ruleset-modal__close {
  font-size: 1.25rem;
  color: var(--ink-3);
  text-decoration: none;
}
.ruleset-modal__form {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}
.ruleset-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bg-2);
}

.ruleset-tiebreaker-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.ruleset-tiebreaker-table th,
.ruleset-tiebreaker-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--bg-2);
}
.ruleset-tiebreaker-summary {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* .form-help / .form-help--subtle now live in base/forms.css. */

/*
  Section: rulesets list with sport-tile-style "default" toggle per row
*/
.ranking-rulesets-section__actions {
  margin-bottom: 0.75rem;
}
.ranking-ruleset-default-toggle {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background: white;
  border: 1px solid var(--bg-2);
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08rem;
}
.ranking-ruleset-default-toggle:hover {
  border-color: var(--silver);
}
.ranking-ruleset-default-toggle.is-default {
  background-color: var(--gold-light);
  color: var(--ink);
  border-color: var(--gold);
}

/*
  Season Rank cell — three fixed-width slots so current rank, arrow, and
  prior rank line up vertically across rows regardless of which states are
  populated. Order: current → arrow → prior.
*/
.standings-rank-cell {
  white-space: nowrap;
}

.standings-rank-cell__current,
.standings-rank-cell__arrow,
.standings-rank-cell__prior {
  display: inline-block;
  vertical-align: baseline;
}

.standings-rank-cell__current {
  width: 1.8em;
  text-align: right;
}

.standings-rank-cell__arrow {
  width: 1.2em;
  text-align: center;
}

.standings-rank-cell__prior {
  width: 1.8em;
  text-align: left;
  font-size: 0.85em;
  color: var(--ink-3);
  text-decoration: line-through;
}

.rank-arrow {
  font-size: 0.9em;
}
.rank-arrow--up {
  color: var(--green);
}
.rank-arrow--down {
  color: var(--red);
}

/*
  Group color pill — used wherever a group identity needs to be visually
  carried (standings table, rank-mapping modal, configurations).
*/
.group-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  font-size: inherit;
  color: var(--ink);
  white-space: nowrap;
}
.group-pill--unassigned {
  background: var(--bg-2);
  color: var(--ink-3);
}


/* Tooltip styles for [data-tooltip] now live in base/base.css.
   Standings table headers keep cursor: pointer for click-to-sort —
   that rule is set on the .table-sort element separately, not here. */