/* ─────────────────────────────────────────────────────────────────────────
   Team Round Robin Tournament Manager (#manage/{id} when format ===
   'team_round_robin') — the newer light Keelo organizer workspace style,
   deliberately SEPARATE from Swiss/Knockout's own dark `.mgmt-*` theme
   (manage.css). Everything here lives under `.trrmgmt` so it can never
   affect the Swiss manager, which keeps using manage.css entirely
   unchanged. Reuses the site's own light design tokens (tokens.css —
   --card/--green/--border/--text/--space-*/--radius-*), the same tokens
   My Teams (teams.css) and Create Tournament (create.css) already use, so
   this reads as one consistent "newer organizer surface" rather than a
   third, unrelated design.

   mgmtRunRpc's shared double-click guard (mgmtBeginActionLoading/
   mgmtEndActionLoading in app.js) was extended to also match
   `.trrmgmt-btn.live` alongside the existing `.mgmt-btn.live` — a two-line,
   additive change to shared infra, not a Swiss behavior change.
   ───────────────────────────────────────────────────────────────────────── */

.trrmgmt {
  background:
    radial-gradient(1000px 480px at 10% -10%, rgba(20, 122, 61, 0.08), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 82vh;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
.trrmgmt a { color: inherit; }
.trrmgmt-shell { max-width: 1400px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────────────────────────── */
.trrmgmt-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: 700; color: var(--muted);
  margin-bottom: var(--space-4);
}
.trrmgmt-back svg { width: 15px; height: 15px; stroke: currentColor; }
.trrmgmt-back:hover { color: var(--text); }

.trrmgmt-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}
.trrmgmt-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--green);
  margin-bottom: 4px;
}
.trrmgmt-eyebrow svg { width: 14px; height: 14px; stroke: currentColor; }
.trrmgmt-title { font-size: 1.7rem; font-weight: 900; color: var(--text-strong); margin: 0 0 8px; }
.trrmgmt-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.trrmgmt-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--muted); }
.trrmgmt-meta-item svg { width: 14px; height: 14px; stroke: currentColor; }

.trrmgmt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 800;
}
.trrmgmt-badge .live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mgmtPulse 1.4s ease-in-out infinite; }
.trrmgmt-badge.green  { background: var(--green-lite);  color: var(--green-dark); }
.trrmgmt-badge.blue   { background: #E6F1FA; color: var(--blue); }
.trrmgmt-badge.amber  { background: #FCF1DC; color: #9A6B12; }
.trrmgmt-badge.red    { background: #FBE4E4; color: var(--red); }
.trrmgmt-badge.gray   { background: var(--bg-sunk); color: var(--muted); }

.trrmgmt-head-actions { flex-shrink: 0; }
.trrmgmt-btn.small.trrmgmt-share { width: auto; }

/* ── Permanent lifecycle/workflow bar — visible above the tabs regardless
   of which one is active (rendered once, in the persistent shell, never
   touched by mgmtSwitchTab). Reads as a horizontal process timeline: a
   step is either already done (checkmark, subdued), the one valid action
   right now (green, clickable), or not reachable yet (gray, disabled) —
   computed straight from mgmtDeriveTrr's existing showStartRound/
   showCompleteRound/showFinishBtn, never a client-invented state. ────── */
.trrmgmt-lifecycle {
  display: flex; align-items: center; gap: 0;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.trrmgmt-lifecycle-note {
  font-size: var(--text-sm); color: var(--muted); padding: 4px 2px;
}
.trrmgmt-step {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 6px;
}
.trrmgmt-step-dot {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 0.72rem; font-weight: 900;
  border: 2px solid var(--border);
  background: var(--bg-sunk); color: var(--faint);
}
.trrmgmt-step.done .trrmgmt-step-dot { border-color: var(--green-lite); background: var(--green-lite); color: var(--green-dark); }
.trrmgmt-step.active .trrmgmt-step-dot { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 0 0 4px var(--green-lite); }
.trrmgmt-step-label { font-size: 0.85rem; font-weight: 800; color: var(--faint); white-space: nowrap; }
.trrmgmt-step.done .trrmgmt-step-label { color: var(--muted); }
.trrmgmt-step.active .trrmgmt-step-label { color: var(--text-strong); }
.trrmgmt-step-connector { width: clamp(18px, 3vw, 40px); height: 2px; background: var(--border-soft); flex-shrink: 0; margin: 0 2px; }
.trrmgmt-step-connector.done { background: var(--green-lite); }
.trrmgmt-step-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: var(--radius-pill);
  padding: 7px 14px; font-size: 0.8rem; font-weight: 800;
  cursor: pointer;
  background: var(--green); color: #fff;
  box-shadow: var(--shadow-cta);
}
.trrmgmt-step-btn svg { width: 13px; height: 13px; stroke: currentColor; }
.trrmgmt-step-btn:hover { transform: translateY(-1px); }
.trrmgmt-step-btn:disabled { opacity: 0.55; cursor: wait; pointer-events: none; transform: none; }
.trrmgmt-step-btn.danger { background: var(--red); box-shadow: none; }

/* ── Tab bar — 7 distinct organizer workspaces ──────────────────────── */
.trrmgmt-tabbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.trrmgmt-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; margin-bottom: -1px;
  border: none; border-bottom: 2.5px solid transparent;
  background: none; color: var(--muted);
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer;
}
.trrmgmt-tab svg { width: 15px; height: 15px; stroke: currentColor; }
.trrmgmt-tab:hover { color: var(--text); }
.trrmgmt-tab.active { color: var(--green-dark); border-bottom-color: var(--green); }

/* ── Generic cards/rows — this tab's equivalent of .mgmt-card/.mgmt-row,
   deliberately not shared with Swiss's dark versions. ─────────────────── */
.trrmgmt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.trrmgmt-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.trrmgmt-card-title-main { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; color: var(--text-strong); }
.trrmgmt-card-title-main svg { width: 16px; height: 16px; stroke: currentColor; color: var(--green); }
.trrmgmt-card-sub { font-size: var(--text-sm); color: var(--muted); margin: -4px 0 10px; }
.trrmgmt-section-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.trrmgmt-section-title:first-child { margin-top: 0; }

.trrmgmt-empty { text-align: center; color: var(--faint); padding: var(--space-5) 0; font-size: 0.9rem; }
.trrmgmt-empty svg { width: 30px; height: 30px; stroke: currentColor; margin-bottom: 8px; }

.trrmgmt-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.trrmgmt-row:last-child { border-bottom: none; }
.trrmgmt-row-body { flex: 1; min-width: 0; }
.trrmgmt-row-name { font-weight: 700; font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trrmgmt-row-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.trrmgmt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted);
  font-size: 0.8rem; font-weight: 800;
  padding: 8px 13px;
  cursor: not-allowed;
}
.trrmgmt-btn svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.trrmgmt-btn.live { cursor: pointer; color: var(--text); }
.trrmgmt-btn.live:hover { border-color: var(--green); transform: translateY(-1px); }
.trrmgmt-btn.small { padding: 6px 11px; font-size: 0.72rem; }
.trrmgmt-btn.green  { border-color: var(--green-lite); color: var(--green-dark); background: var(--green-tint); }
.trrmgmt-btn.neutral { border-color: var(--border); color: var(--text); }
.trrmgmt-btn.red { border-color: #F3C6C6; color: var(--red); }
.trrmgmt-btn.live:disabled { opacity: 0.55; cursor: wait !important; pointer-events: none; transform: none; }
.trrmgmt-btn .mgmt-spinner { border-color: rgba(0, 0, 0, 0.15); border-top-color: currentColor; }

/* ── TAB 2 — Teams: one card per team, members as compact chips ───────── */
.trrmgmt-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.trrmgmt-team-score {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 8px 12px;
  background: var(--green-tint); border-radius: var(--radius-md);
  font-size: 0.78rem; font-weight: 700; color: var(--green-dark);
}
.trrmgmt-team-score b { font-size: 1rem; font-weight: 900; }
.trrmgmt-team-score.unavailable { background: var(--bg-sunk); color: var(--faint); font-weight: 600; justify-content: center; }
.trrmgmt-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.trrmgmt-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 6px 10px 6px 6px;
  min-width: 0; max-width: 100%;
}
[dir="rtl"] .trrmgmt-chip { padding: 6px 6px 6px 10px; }
.trrmgmt-chip-order {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-lite); color: var(--green-dark);
  font-size: 0.68rem; font-weight: 900;
}
.trrmgmt-chip-body { min-width: 0; }
.trrmgmt-chip-name { font-size: 0.82rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.trrmgmt-chip-sub { font-size: 0.65rem; color: var(--muted); white-space: nowrap; }
.trrmgmt-chip-checkin { display: flex; align-items: center; flex-shrink: 0; color: var(--green); }
.trrmgmt-chip-checkin svg { width: 13px; height: 13px; stroke: currentColor; }

/* Drag/drop (migration 166 — TOURNAMENT roster movement between team
   cards). Only rendered draggable when roster edits are allowed (see
   mgmtTrrMemberChipHtml/mgmtDeriveTrr's canEditRoster). */
.trrmgmt-chip-draggable { cursor: grab; }
.trrmgmt-chip-draggable:active { cursor: grabbing; }
.trrmgmt-dragging { opacity: 0.4; }
.trrmgmt-card[data-mgmt-trr-dropzone] { transition: box-shadow 0.12s ease, border-color 0.12s ease; }
.trrmgmt-card.trrmgmt-drop-hover { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-lite); }

/* ── TAB 3/5 — Rounds / Live Now: round → team match → board games ────── */
.trrmgmt-round-block { margin-bottom: 18px; }

/* Rounds tab accordion — collapsed by default (task requirement: an
   overview/history browser, never every board from every round expanded
   at once). The card itself supplies the outer chrome; the header is a
   plain full-width button so the whole row toggles, not just the chevron. */
.trrmgmt-round-accordion { padding: 0; }
.trrmgmt-round-header {
  width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: start;
}
.trrmgmt-round-header-main { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; color: var(--text-strong); }
.trrmgmt-round-header-main svg { width: 16px; height: 16px; stroke: currentColor; color: var(--green); }
.trrmgmt-round-header-stats { flex: 1 1 160px; min-width: 0; font-size: 0.8rem; color: var(--muted); text-align: end; }
.trrmgmt-round-header-chevron { flex-shrink: 0; display: flex; color: var(--muted); transition: transform 0.15s ease; }
.trrmgmt-round-header-chevron svg { width: 15px; height: 15px; stroke: currentColor; }
.trrmgmt-round-header-chevron.expanded { transform: rotate(90deg); }
.trrmgmt-round-accordion-body { padding: 0 18px 16px; }
@media (max-width: 640px) {
  .trrmgmt-round-header-stats { text-align: start; flex-basis: 100%; }
}
/* Live Now — 2-column matchup grid (task: "organizer can see and update
   more games at once"). ONLY renders inside mgmtTrrRoundBlock, which is
   ONLY used by the Live Now tab — the Rounds tab accordion builds its own
   match list directly (renderTrrRoundsTab) and never gets this wrapper, so
   this stays scoped to the one tab the task asked for. Explicit 2-column
   breakpoint (not auto-fill) to match this file's own existing pattern for
   a 2-column panel (.trrmgmt-grid below, same 900px threshold) rather than
   inventing a second convention; minmax(0,1fr) avoids grid blowout from an
   unbreakable long team name. Cards inside the grid supply their own
   spacing via `gap` — their normal margin-top (used elsewhere, e.g. the
   Rounds tab's plain stacked cards) is zeroed out only here so it doesn't
   double up with the grid gap. */
.trrmgmt-matches-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.trrmgmt-matches-grid .trrmgmt-match,
.trrmgmt-matches-grid .trrmgmt-bye-row {
  margin-top: 0;
}
@media (max-width: 900px) {
  .trrmgmt-matches-grid { grid-template-columns: 1fr; }
}

.trrmgmt-match {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--card-tint);
}
.trrmgmt-match-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.trrmgmt-match-title { font-weight: 800; font-size: 0.92rem; color: var(--text-strong); }
.trrmgmt-bye-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 0.82rem; color: var(--muted);
  background: var(--bg-sunk);
}
.trrmgmt-bye-row b { color: var(--text); font-weight: 800; }
.trrmgmt-match .trrmgmt-row:last-of-type { border-bottom: none; }
.trrmgmt-score { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 0.82rem; color: var(--muted); text-align: center; }
.trrmgmt-score b { color: var(--text-strong); font-size: 0.95rem; }
.trrmgmt-standings-line { margin-top: 4px; font-size: 0.74rem; color: var(--faint); text-align: center; }
.trrmgmt-result-btns { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.trrmgmt-result-btns .trrmgmt-btn.small { font-weight: 800; }
.trrmgmt-result-btns .trrmgmt-btn.small.sel { background: var(--green); color: #fff; border-color: var(--green); }
.trrmgmt-result-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.trrmgmt-progress { font-size: var(--text-sm); color: var(--muted); margin: -2px 0 12px; }
.trrmgmt-progress b { color: var(--text-strong); }

/* Compact board row (Live Now / Rounds) — one tight scan line per board so
   the Update Result action is never visually separated from its board:
   [Board N] White — status/vs — Black [action]. Substantially tighter than
   the old .trrmgmt-row (9px vertical padding → 6px, no wrapping card). */
.trrmgmt-board-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 2px; border-bottom: 1px solid var(--border-soft);
}
.trrmgmt-board-row:last-child { border-bottom: none; }
.trrmgmt-board-num {
  flex-shrink: 0; min-width: 46px;
  font-size: 0.66rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.02em;
}
/* Groups white/status/black into one centered cluster instead of letting
   each name flex-grow to fill half the row — that old behavior is exactly
   what pushed the two names apart (task: "bring the two opposing player
   names noticeably closer together"). min-width:0 lets the cluster shrink
   inside a narrow 2-column grid card without overflowing. */
.trrmgmt-board-matchup {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.trrmgmt-board-name {
  flex: 0 1 auto; max-width: 40%; min-width: 0;
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trrmgmt-board-matchup .trrmgmt-board-name:last-of-type { text-align: start; }
.trrmgmt-board-status {
  flex-shrink: 0; min-width: 40px; text-align: center;
  font-size: 0.7rem; font-weight: 700;
}
.trrmgmt-board-status.muted { color: var(--faint); }
.trrmgmt-board-status.result { color: var(--text-strong); font-weight: 800; }
.trrmgmt-board-action { flex-shrink: 0; }
.trrmgmt-board-action .trrmgmt-result-btns { margin: 0; }

/* ── TRR pre-start board draft editor (migration 186) — reuses the exact
   same .trrmgmt-card/.trrmgmt-match/.trrmgmt-match-head/.trrmgmt-board-row/
   .trrmgmt-board-num/.trrmgmt-board-status shapes above; the only new
   pieces are the two per-board <select>s (replacing the plain read-only
   .trrmgmt-board-name text) and the Save/Cancel action rows. ──────────── */
.trrmgmt-draft-note { font-size: var(--text-sm); color: var(--muted); margin: -4px 0 4px; line-height: 1.5; }
.trrmgmt-draft-row .trrmgmt-board-status { min-width: 28px; }
.trrmgmt-draft-select {
  flex: 1 1 0; min-width: 0;
  padding: 6px 9px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
  font-size: 0.84rem; font-weight: 700; font-family: inherit;
}
.trrmgmt-draft-select:focus { outline: none; border-color: var(--green); }
/* Duplicate-player highlighting (TRR active-lifecycle polish task) — a
   player currently assigned to more than one board in this same match is
   allowed (temporarily, while the organizer rearranges the lineup), but
   every <select> currently holding that duplicated id is marked red so the
   invalid state is impossible to miss. */
.trrmgmt-draft-select-invalid { border-color: var(--red); background: #FBE4E4; color: var(--red); }
.trrmgmt-draft-match-invalid { border-color: #F3C6C6; }
.trrmgmt-draft-unassigned { font-size: 0.78rem; color: var(--muted); margin: 8px 0 0; }
.trrmgmt-draft-match-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.trrmgmt-draft-editor-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ── TAB 4 — Participants: flat searchable list ─────────────────────── */
.trrmgmt-search {
  width: 100%; padding: 9px 13px; margin-bottom: 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font-size: 0.86rem; background: var(--card); color: var(--text);
}
.trrmgmt-search:focus { outline: none; border-color: var(--green); }
.trrmgmt-participant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.trrmgmt-participant {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 11px 13px; background: var(--card);
}
.trrmgmt-participant-name { font-weight: 800; font-size: 0.9rem; color: var(--text-strong); }
.trrmgmt-participant-team { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.trrmgmt-participant-now {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft);
  font-size: 0.78rem; font-weight: 700; color: var(--green-dark);
  display: flex; align-items: center; gap: 5px;
}
.trrmgmt-participant-now.muted { color: var(--faint); font-weight: 600; }
.trrmgmt-participant-now svg { width: 12px; height: 12px; stroke: currentColor; }
.trrmgmt-participant-checkin-btn {
  margin-top: 8px; width: 100%; padding: 6px 10px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--text);
  font-size: 0.74rem; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.trrmgmt-participant-checkin-btn:hover { border-color: var(--green); }
.trrmgmt-participant-checkin-btn.arrived { border-color: var(--green-lite); background: var(--green-tint); color: var(--green-dark); }
.trrmgmt-participant-checkin-btn svg { width: 12px; height: 12px; stroke: currentColor; }

/* ── TAB 6 — Standings (migration 165): the one official ranked table ── */
.trrmgmt-standings-tiebreak { margin-top: 6px; font-size: 0.7rem; color: var(--faint); letter-spacing: 0.01em; }
.trrmgmt-table-wrap { overflow-x: auto; }
.trrmgmt-standings-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.trrmgmt-standings-table th {
  text-align: start; color: var(--muted); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.03em; padding-inline-end: 10px; padding-block-end: 8px; font-weight: 700; white-space: nowrap;
}
.trrmgmt-standings-table td { padding-block: 9px; padding-inline-end: 10px; border-top: 1px solid var(--border-soft); color: var(--text); white-space: nowrap; }
.trrmgmt-standings-table tr.top3 td { background: var(--green-tint); }
.trrmgmt-standings-rank { font-size: 1rem; font-weight: 900; color: var(--text-strong); }
.trrmgmt-standings-team { font-weight: 700; color: var(--text-strong); white-space: normal; }
.trrmgmt-standings-score { font-size: 1.05rem; font-weight: 900; color: var(--green-dark); }
.trrmgmt-standings-h2h {
  margin-top: 2px; font-size: 0.68rem; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 4px; white-space: normal;
}
.trrmgmt-standings-h2h svg { width: 11px; height: 11px; stroke: currentColor; }

/* ── TAB 7 — General: calm info grid ───────────────────────────────── */
.trrmgmt-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.trrmgmt-col { min-width: 0; }
.trrmgmt-scoring-mode { font-size: 1.05rem; font-weight: 900; color: var(--green-dark); margin-bottom: 4px; }
.trrmgmt-stat-row { display: flex; flex-wrap: wrap; gap: 18px; }
.trrmgmt-stat { display: flex; flex-direction: column; }
.trrmgmt-stat b { font-size: 1.3rem; font-weight: 900; color: var(--text-strong); line-height: 1.15; }
.trrmgmt-stat span { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.trrmgmt-prize-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.86rem; }
.trrmgmt-prize-row:last-child { border-bottom: none; }
.trrmgmt-prize-place { font-weight: 900; color: var(--accent); flex-shrink: 0; }

/* ── TAB 1 — Check-in (migration 166): summary, filters, multi-select rows,
   Add Player action. Also used by the roster-lock/pre-draw notices shared
   with the Teams tab. ─────────────────────────────────────────────────── */
.trrmgmt-checkin-summary { display: flex; flex-direction: column; gap: 2px; }
.trrmgmt-checkin-summary-main { font-size: 1.5rem; font-weight: 900; color: var(--text-strong); }

/* ── Check-in top summary "hero" (TRR pre-start polish task) — primary
   arrived-count on the reading-order START side (right under this app's
   default RTL, left under LTR — plain flex order, no hardcoded left/right),
   two compact read-only name lists on the other side. Deliberately just
   name pills, not full rows — this block is a fast "who's missing" glance,
   not another place to act (the team-grouped section and the full list
   below are where check-in actions actually live). ──────────────────────── */
.trrmgmt-checkin-hero { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.trrmgmt-checkin-hero-main { flex: 1 1 160px; min-width: 140px; }
.trrmgmt-checkin-hero-lists { flex: 2 1 320px; display: flex; gap: 18px; min-width: 260px; }
.trrmgmt-checkin-hero-list { flex: 1; min-width: 0; }
.trrmgmt-checkin-hero-list-title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px;
}
.trrmgmt-checkin-hero-names {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px;
  max-height: 150px; overflow-y: auto; padding-inline-end: 4px;
}
.trrmgmt-checkin-hero-name {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--bg-sunk); font-size: 0.74rem; font-weight: 600; color: var(--text);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.trrmgmt-checkin-hero-names.arrived .trrmgmt-checkin-hero-name { background: var(--green-tint); color: var(--green-dark); }
.trrmgmt-checkin-hero-empty { font-size: 0.76rem; color: var(--faint); }
@media (max-width: 640px) {
  .trrmgmt-checkin-hero { flex-direction: column; gap: 16px; }
  .trrmgmt-checkin-hero-lists { flex-direction: column; width: 100%; }
}

/* ── Team-grouped check-in section (TRR pre-start polish task) — one card
   per tournament team, same `.trrmgmt-card`/`.trrmgmt-row` language the
   Teams tab already uses, so this reads as "the Teams tab's check-in
   sibling" rather than a third visual system. ─────────────────────────── */
.trrmgmt-checkin-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.trrmgmt-checkin-team-mark-all { margin-bottom: 10px; }
.trrmgmt-checkin-team-rows { margin-top: 4px; }
.trrmgmt-checkin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.trrmgmt-checkin-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.trrmgmt-checkin-toolbar .trrmgmt-search { width: auto; flex: 1; min-width: 180px; margin-bottom: 0; }
.trrmgmt-chip-filter {
  padding: 6px 13px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.trrmgmt-chip-filter.active { border-color: var(--green); background: var(--green-tint); color: var(--green-dark); }

/* Sorting (task requirement) — a row of small toggle buttons rather than a
   literal <table> header, so it reuses the existing card-row layout
   unchanged (checkbox/undo/badges keep working exactly as before) instead
   of a parallel table-based rewrite. */
.trrmgmt-checkin-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.trrmgmt-checkin-sortbar-label { font-size: 0.72rem; font-weight: 700; color: var(--faint); margin-inline-end: 2px; }
.trrmgmt-sort-btn {
  padding: 5px 11px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.trrmgmt-sort-btn:hover { border-color: var(--green-lite); }
.trrmgmt-sort-btn.active { border-color: var(--green); background: var(--green-tint); color: var(--green-dark); }

.trrmgmt-checkin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.trrmgmt-checkin-counter { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }

.trrmgmt-checkin-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--border-soft);
}
.trrmgmt-checkin-row:last-child { border-bottom: none; }
.trrmgmt-checkin-row.selected { background: var(--green-tint); border-radius: var(--radius-md); }
.trrmgmt-checkin-checkbox {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
}
.trrmgmt-checkin-checkbox svg { width: 13px; height: 13px; stroke: currentColor; }
.trrmgmt-checkin-checkbox.checked { background: var(--green); border-color: var(--green); }
span.trrmgmt-checkin-checkbox { border-style: dashed; background: var(--bg-sunk); cursor: default; }
.trrmgmt-checkin-body { flex: 1; min-width: 0; }
.trrmgmt-checkin-name { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.9rem; color: var(--text-strong); }
.trrmgmt-checkin-keelo { display: flex; color: var(--green); flex-shrink: 0; }
.trrmgmt-checkin-keelo svg { width: 13px; height: 13px; stroke: currentColor; }
.trrmgmt-checkin-sub { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
/* Compact 2x2 metadata micro-grid — same pattern as My Chess Club's own
   Club Players row (.tm-club-meta), reused here for visual consistency
   across the two features. Rating/Age/Gender show "Not defined" for every
   row today — see mgmtTrrCheckinSortValue's own comment for the audited
   reason (no safe source on the tournament snapshot), not an omission. */
.trrmgmt-checkin-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px;
  font-size: 0.66rem; color: var(--muted); margin-top: 4px; max-width: 320px;
}
.trrmgmt-checkin-meta-cell b { color: var(--text); font-weight: 700; margin-inline-end: 4px; }
.trrmgmt-checkin-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.trrmgmt-checkin-undo { border: none; background: none; padding: 0; font-size: 0.68rem; font-weight: 700; color: var(--muted); text-decoration: underline; cursor: pointer; }
.trrmgmt-checkin-undo:hover { color: var(--red); }

/* ── Shared informational/warning/lock notices (Check-in + Teams tabs) ── */
.trrmgmt-notice {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 14px;
  font-size: 0.82rem; line-height: 1.45;
}
.trrmgmt-notice svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; margin-top: 1px; }
.trrmgmt-notice.info { background: #E6F1FA; color: var(--blue); }
.trrmgmt-notice.warning { background: #FCF1DC; color: #9A6B12; }
.trrmgmt-notice.lock { background: var(--bg-sunk); color: var(--muted); }
.trrmgmt-notice .trrmgmt-row-sub { color: inherit; opacity: 0.8; }

/* ── Add Player modal (migration 166) — team, then Guest/Keelo ────────── */
.trrmgmt-addplayer-teams { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.trrmgmt-addplayer-team-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius-md); border: 1.5px solid var(--border);
  background: var(--card); color: var(--text); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; text-align: start;
}
.trrmgmt-addplayer-team-btn:hover { border-color: var(--green); }
.trrmgmt-addplayer-team-btn svg { width: 16px; height: 16px; stroke: currentColor; color: var(--green); }
.trrmgmt-addplayer-back {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: none;
  color: var(--muted); font-size: 0.78rem; font-weight: 700; cursor: pointer; margin-bottom: 8px; padding: 0;
}
.trrmgmt-addplayer-back:hover { color: var(--text); }
.trrmgmt-addplayer-back svg { width: 13px; height: 13px; stroke: currentColor; }

/* ── "Add Club Player" picker (migration 168) — each row is its own
   self-contained light card (background: var(--card)), same as the
   sibling .trrmgmt-addplayer-team-btn buttons above, since this content
   renders inside the DARK .mgmt-modal: the light/dark-neutral tokens
   (--text/--muted/--green) only read correctly against a card of their
   own, never directly against the modal's own dark background. ────────── */
.trrmgmt-addplayer-club-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; margin: 12px 0; }
.trrmgmt-addplayer-cp-row {
  display: block; width: 100%; text-align: start;
  padding: 10px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--border);
  background: var(--card); cursor: pointer;
}
.trrmgmt-addplayer-cp-row:hover { border-color: var(--green); }
.trrmgmt-addplayer-cp-row.disabled { opacity: 0.55; cursor: not-allowed; }
.trrmgmt-addplayer-cp-name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 0.88rem; color: var(--text-strong); margin-bottom: 4px;
}
.trrmgmt-addplayer-cp-keelo { display: flex; color: var(--green); flex-shrink: 0; }
.trrmgmt-addplayer-cp-keelo svg { width: 13px; height: 13px; stroke: currentColor; }
.trrmgmt-addplayer-cp-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
  font-size: 0.72rem; color: var(--muted);
}
.trrmgmt-addplayer-cp-meta-cell b { color: var(--text); font-weight: 700; margin-inline-end: 4px; }
.trrmgmt-addplayer-cp-conflict { margin-top: 6px; font-size: 0.72rem; font-weight: 700; color: var(--red); }
/* Small "this Keelo search result is already a canonical Club Player"
   hint, shown inline in the Keelo search results (mgmtTrrKeeloResultsHtml)
   — that list is .tm-search-row/.tm-search-results (teams.css, already a
   self-contained light row), so this badge only needs its own color. */
.trrmgmt-addplayer-cp-badge {
  display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--green-tint); color: var(--green-dark); font-size: 0.65rem; font-weight: 800; vertical-align: middle;
}

/* ── Drag/drop move-confirmation modal (migration 166) ─────────────────── */
.trrmgmt-move-rosters { display: flex; gap: 14px; margin: 12px 0; }
.trrmgmt-move-roster { flex: 1; text-align: center; background: var(--bg-sunk); border-radius: var(--radius-md); padding: 10px; }
.trrmgmt-move-roster-name { font-weight: 800; font-size: 0.86rem; color: var(--text-strong); }
.trrmgmt-move-roster-count { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

/* ── Start Round board-count preview (migration 167) — the zero-player
   hard-block list and the reduced-boards confirmation's per-match list.
   Scrollable past a handful of rows (several reduced matches is an
   explicit test case) rather than letting the modal grow past the
   viewport; long team names wrap instead of overflowing. ───────────────── */
.trrmgmt-blockmatch-list, .trrmgmt-reduced-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 320px; overflow-y: auto; margin: 12px 0;
}
.trrmgmt-blockmatch-row {
  background: var(--bg-sunk); border-radius: var(--radius-md); padding: 10px 12px;
  font-weight: 800; font-size: 0.86rem; color: var(--text-strong); overflow-wrap: anywhere;
}
.trrmgmt-reduced-row { background: var(--bg-sunk); border-radius: var(--radius-md); padding: 10px 12px; }
.trrmgmt-reduced-teams { font-weight: 800; font-size: 0.86rem; color: var(--text-strong); overflow-wrap: anywhere; }
.trrmgmt-reduced-boards, .trrmgmt-reduced-avail {
  display: flex; flex-wrap: wrap; gap: 2px 10px;
  font-size: 0.78rem; color: var(--muted); margin-top: 4px;
}

@media (max-width: 900px) {
  .trrmgmt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .trrmgmt-team-grid, .trrmgmt-participant-grid { grid-template-columns: 1fr; }
  .trrmgmt-lifecycle { gap: 8px; }
  .trrmgmt-step-connector { display: none; }
  .trrmgmt-standings-table { font-size: 0.78rem; }
  .trrmgmt-standings-table th, .trrmgmt-standings-table td { padding-inline-end: 7px; }
  .trrmgmt-checkin-toolbar { flex-direction: column; align-items: stretch; }
  .trrmgmt-move-rosters { flex-direction: column; }
  /* Board row on a narrow phone: [Board N] + names + the 3-button result
     picker no longer fit on one line without crushing the names down to a
     couple of characters each. Wrapping the action onto its own full-width
     line (instead of shrinking .trrmgmt-board-matchup further) gives the
     names the rest of the first line's width — same fix direction as the
     rest of this task (avoid clipping), just needed at this width only;
     desktop/tablet keep the original single-line row untouched. */
  .trrmgmt-board-row { flex-wrap: wrap; row-gap: 4px; }
  .trrmgmt-board-action { flex-basis: 100%; display: flex; justify-content: center; }
  .trrmgmt-board-name { max-width: 34vw; }
}