/* ─────────────────────────────────────────────────────────────────────────
   Tournament Management (#manage/{id}) — Keelo Tournament Control Center.
   Route-scoped dark theme: every rule here lives under .mgmt so it can never
   bleed into the public (light) site. Palette matches the mobile organizer
   manager screen's own dark tokens exactly (app/(app)/tournament/manager/
   [id].tsx) — this is a redesign of the same product, not a new one.
   ───────────────────────────────────────────────────────────────────────── */

/* Tokens live on :root, not on .mgmt, even though every consumer of them is
   scoped under .mgmt-* classes. Reason: #mgmtModalRoot (index.html), where
   every confirmation/error/override dialog is injected, is a sibling of the
   .mgmt page container — NOT a descendant of it — so a modal rendered there
   sits outside any element carrying these as custom properties. With the
   vars declared on .mgmt itself, every var(--mgmt-*) used by .mgmt-modal*
   was invalid at computed-value time inside a modal: non-inherited
   properties (background, border-color) fell back to their initial value
   (background → transparent; border-color → currentColor), and inherited
   properties (color) fell back to whatever the surrounding page supplied —
   the public site's near-black body text color. That combination is exactly
   the "modal panel invisible, text near-black-on-black" bug: a transparent
   .mgmt-modal over the dark overlay, with dark-on-dark text and a
   see-through primary button. Declaring the tokens on :root instead makes
   them resolve everywhere regardless of DOM position, with no visible
   effect on the public (light) site — nothing outside .mgmt-* rules
   references a --mgmt-* custom property (verified: grep across styles/).
   The result-picker buttons (.mgmt-modal-btn.result) never had this bug
   because they use literal rgba()/hex values instead of var(--mgmt-*). */
:root {
  --mgmt-bg:        #0A0A0A;
  --mgmt-card:      #161616;
  --mgmt-card2:     #1E1E1E;
  --mgmt-border:    #2A2A2A;
  --mgmt-text:      #FFFFFF;
  --mgmt-muted:     #8A8A8A;
  --mgmt-dim:       #4B5563;
  --mgmt-dim-label: #6B7280;  /* .mgmt-btn text when disabled/not-yet-wired — brighter than --mgmt-dim, still clearly de-emphasized */
  --mgmt-green:     #22C55E;
  --mgmt-green-dim: rgba(34, 197, 94, 0.15);
  --mgmt-blue:      #3B82F6;
  --mgmt-blue-dim:  rgba(59, 130, 246, 0.15);
  --mgmt-red:       #EF4444;
  --mgmt-red-dim:   rgba(239, 68, 68, 0.12);
  /* Deeper red for solid danger-button fills: white text on --mgmt-red
     (#EF4444) is only ~3.8:1, under the 4.5:1 AA floor for normal-size
     button labels. --mgmt-red-strong gives ~4.8:1. --mgmt-red itself stays
     unchanged since it's also used as *foreground* text/icon/border color
     (badges, outline buttons, danger titles) where it already reads well
     against the dark surfaces — only the solid white-on-red fill needed a
     different shade. */
  --mgmt-red-strong: #DC2626;
  /* Brighter red for text — used for modal danger titles/icons, where plain
     --mgmt-red is a marginal ~4.4:1 against the modal's card2 surface. */
  --mgmt-red-bright: #F87171;
  --mgmt-amber:     #F59E0B;
  --mgmt-amber-dim: rgba(245, 158, 11, 0.15);
  --mgmt-purple:    #A78BFA;
  --mgmt-purple-dim: rgba(167, 139, 250, 0.15);
  --mgmt-radius:    14px;

  /* Modal-specific surfaces — kept distinct from the general-purpose tokens
     above so tuning modal legibility never touches card/row/badge styling
     used throughout the rest of the management dashboard. */
  --mgmt-modal-border:   rgba(255, 255, 255, 0.16);
  --mgmt-modal-msg:      #D3D6DA;  /* body copy — bright, comfortable to read */
  --mgmt-modal-ghost:    #D3D6DA;  /* cancel/secondary button label */
  --mgmt-warn-text:      #FCD34D;  /* inline warning callouts (e.g. "replacing an existing result") */
  --mgmt-warn-bg:        rgba(245, 158, 11, 0.14);
  --mgmt-warn-border:    rgba(245, 158, 11, 0.45);
}

.mgmt {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(34, 197, 94, 0.10), transparent 60%),
    var(--mgmt-bg);
  color: var(--mgmt-text);
  min-height: 82vh;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
.mgmt a { color: inherit; }
.mgmt-shell { max-width: 1400px; margin: 0 auto; }

/* ── Management-loading transition (Club Competitions polish task) — the
   brief moment between clicking into a tournament and the real (dark-
   themed) .mgmt dashboard above being ready. Deliberately its OWN light,
   site-consistent treatment, not `.mgmt` — showing almost-empty dark theme
   for that split second read as a broken/black screen, not a normal loading
   state. Same spinner language as the wizard's own .ct-spinner (create.css,
   @keyframes ct-spin — reused, not redefined), just larger and green-
   accented to read clearly as a standalone loading state rather than an
   inline button spinner. ───────────────────────────────────────────────── */
.mgmt-opening {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(20, 122, 61, 0.10), transparent 60%),
    var(--bg);
}
.mgmt-opening-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--green-tint);
  border-top-color: var(--green);
  animation: ct-spin 0.8s linear infinite;
}
.mgmt-opening-text { font-size: var(--text-base); font-weight: 700; color: var(--text-strong); margin: 0; }
.mgmt-opening-hint { font-size: var(--text-sm); color: var(--muted); margin: 0; }

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

.mgmt-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--mgmt-border);
  margin-bottom: var(--space-5);
}
.mgmt-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(--mgmt-green); margin-bottom: 8px;
}
.mgmt-eyebrow svg { width: 13px; height: 13px; stroke: currentColor; }
.mgmt-title { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.5px; margin: 0 0 8px; color: var(--mgmt-text); }
.mgmt-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mgmt-meta-item { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--mgmt-muted); }
.mgmt-meta-item svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.mgmt-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Actions / Information tabs — large, obvious, directly under the header ── */
.mgmt-tabbar {
  display: flex; gap: 26px;
  border-bottom: 1px solid var(--mgmt-border);
  margin-bottom: var(--space-5);
}
.mgmt-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 2px; margin-bottom: -1px;
  font-size: 0.98rem; font-weight: 800; color: var(--mgmt-muted);
  border-bottom: 2.5px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mgmt-tab svg { width: 17px; height: 17px; stroke: currentColor; }
.mgmt-tab:hover { color: var(--mgmt-text); }
.mgmt-tab.active { color: var(--mgmt-green); border-bottom-color: var(--mgmt-green); }

/* Actions tab: a single, linear, readable column of grouped cards — a flow
   to work through, as opposed to Information's scan-friendly 2-col grid. */
.mgmt-actions-col { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.mgmt-section-title {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mgmt-muted); margin: var(--space-4) 0 2px;
}
.mgmt-section-title:first-child { margin-top: 0; }

/* Net-new ideas not yet represented anywhere on mobile — visually distinct
   from the "read-only for now" disabled buttons above, which mirror real
   mobile capabilities. These are plain, non-interactive rows. */
.mgmt-planned-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--mgmt-border);
  color: var(--mgmt-dim); font-size: 0.85rem; font-weight: 600;
}
.mgmt-planned-row:last-child { border-bottom: none; }
.mgmt-planned-row svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }
.mgmt-planned-badge {
  margin-inline-start: auto;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--mgmt-card2); color: var(--mgmt-dim);
}

/* ── Status badges ────────────────────────────────────────────────────────── */
.mgmt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap;
}
.mgmt-badge .live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mgmtPulse 1.4s ease-in-out infinite; }
@keyframes mgmtPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.mgmt-badge.green  { background: var(--mgmt-green-dim);  color: var(--mgmt-green); }
.mgmt-badge.blue   { background: var(--mgmt-blue-dim);   color: var(--mgmt-blue); }
.mgmt-badge.purple { background: var(--mgmt-purple-dim); color: var(--mgmt-purple); }
.mgmt-badge.amber  { background: var(--mgmt-amber-dim);  color: var(--mgmt-amber); }
.mgmt-badge.red    { background: var(--mgmt-red-dim);    color: var(--mgmt-red); }
.mgmt-badge.gray   { background: var(--mgmt-card2);      color: var(--mgmt-muted); }

/* ── Dashboard grid ───────────────────────────────────────────────────────── */
.mgmt-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .mgmt-grid { grid-template-columns: 1.65fr 1fr; } }
.mgmt-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.mgmt-card {
  background: var(--mgmt-card);
  border: 1px solid var(--mgmt-border);
  border-radius: var(--mgmt-radius);
  padding: var(--space-4);
}
.mgmt-card.mgmt-card-danger { border-color: var(--mgmt-red-dim); }
.mgmt-card-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.92rem; font-weight: 800; color: var(--mgmt-text);
  margin: 0 0 12px;
}
.mgmt-card-title svg { width: 16px; height: 16px; stroke: currentColor; }
.mgmt-card-title-main { display: flex; align-items: center; gap: 8px; }
.mgmt-card-sub { font-size: var(--text-sm); color: var(--mgmt-muted); margin: -6px 0 12px; }

/* ── Overview stat strip ──────────────────────────────────────────────────── */
.mgmt-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.mgmt-stat { text-align: center; padding: 12px 6px; background: var(--mgmt-card2); border-radius: 10px; }
.mgmt-stat b { display: block; font-size: 1.35rem; font-weight: 900; color: var(--mgmt-text); line-height: 1.2; }
.mgmt-stat span { font-size: 0.64rem; color: var(--mgmt-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Rows (players, prizes, lifecycle) ────────────────────────────────────── */
.mgmt-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--mgmt-border); }
.mgmt-row:last-child { border-bottom: none; }
.mgmt-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--mgmt-dim); }
.mgmt-row-dot.on { background: var(--mgmt-green); }
.mgmt-row-body { flex: 1; min-width: 0; }
.mgmt-row-name { font-weight: 700; font-size: 0.88rem; color: var(--mgmt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgmt-row-sub { font-size: 0.75rem; color: var(--mgmt-muted); margin-top: 2px; }

/* Israeli Chess Federation export — missing-federation-id state (migration
   184 / mgmtIcfExportCard). Reuses the existing --mgmt-amber* tokens
   (already used by .mgmt-badge.amber) rather than a new hardcoded color,
   for the same "clearly warn, never block" treatment across every row
   and its own summary line. */
.mgmt-row-warning .mgmt-row-sub,
.mgmt-empty.mgmt-empty-warning { color: var(--mgmt-amber); }
.mgmt-icf-fedid-input {
  background: var(--mgmt-card2);
  border: 1px solid var(--mgmt-border);
  border-radius: 8px;
  color: var(--mgmt-text);
  padding: 6px 10px;
  font-size: 0.85rem;
  width: 120px;
}
.mgmt-icf-fedid-input:focus { outline: 2px solid var(--mgmt-blue); outline-offset: 1px; }

.mgmt-empty { text-align: center; color: var(--mgmt-dim); padding: var(--space-4) 0; font-size: 0.85rem; }
.mgmt-empty svg { width: 26px; height: 26px; stroke: currentColor; margin-bottom: 6px; }

/* ── Buttons — .live ones are real, wired organizer actions; a bare
   .mgmt-btn with no .live is still a disabled preview (e.g. "Edit details",
   which has no RPC yet — see the "IMPORTANT" block comment further down).
   Its label uses --mgmt-dim-label rather than --mgmt-dim: --mgmt-dim itself
   stays reserved for small decorative marks (the off-state row dot, a
   card's inline-start accent) where WCAG text-contrast minimums don't
   apply; a button label is real text an organizer has to read, so it gets
   its own, brighter, still-clearly-"quiet" tone (~3.4:1 on this card
   background instead of ~2.2:1). ── */
.mgmt-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 14px; margin-top: 8px;
  border-radius: 10px; border: 1.5px solid var(--mgmt-border);
  background: var(--mgmt-card2); color: var(--mgmt-dim-label);
  font-size: 0.85rem; font-weight: 800;
  cursor: not-allowed;
}
.mgmt-btn svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }
.mgmt-btn.green  { border-color: rgba(34, 197, 94, 0.35);  color: var(--mgmt-green); }
.mgmt-btn.blue   { border-color: rgba(59, 130, 246, 0.35); color: var(--mgmt-blue); }
.mgmt-btn.amber  { border-color: rgba(245, 158, 11, 0.35); color: var(--mgmt-amber); }
.mgmt-btn.red    { border-color: rgba(239, 68, 68, 0.35);  color: var(--mgmt-red); }
/* A visibly-real secondary button (e.g. the pairing editor's Cancel) — the
   base .mgmt-btn text color (--mgmt-dim-label) is deliberately muted for the
   "not yet wired" preview case, which is wrong here: this button is fully
   live, just not the primary action. */
.mgmt-btn.neutral { border-color: var(--mgmt-modal-border); color: var(--mgmt-text); }
.mgmt-btn.small  { width: auto; margin-top: 0; padding: 6px 12px; font-size: 0.72rem; }
.mgmt-btn.live   { cursor: pointer; opacity: 1; background: var(--mgmt-card2); }
.mgmt-btn.live:hover { transform: translateY(-1px); border-color: var(--mgmt-green); }
/* Scoped to .live: these are the real action buttons JS disables mid-
   mutation (mgmtBeginActionLoading), so this overrides both the base
   not-allowed cursor and .live's pointer for that moment. The permanently-
   disabled "not yet wired" preview button (bare .mgmt-btn, e.g. "Edit
   details") is excluded — it's never toggled, and stacking this opacity on
   top of its already-dim --mgmt-dim-label text pushed it under readable
   contrast. 0.62 (not the previous 0.5) keeps a still-labeled sibling
   button's text and the in-flight button's spinner legible against the
   dark card behind them. */
.mgmt-btn.live:disabled { opacity: 0.62; cursor: wait !important; pointer-events: none; transform: none; }

.mgmt-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.28); border-top-color: currentColor;
  border-radius: 50%; animation: mgmtSpin 0.7s linear infinite;
}
@keyframes mgmtSpin { to { transform: rotate(360deg); } }

.mgmt-soon {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; color: var(--mgmt-dim); font-weight: 600;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mgmt-border);
}
.mgmt-soon svg { width: 12px; height: 12px; stroke: currentColor; flex-shrink: 0; }

/* ── Board / pairings grid ────────────────────────────────────────────────── */
.mgmt-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mgmt-board {
  background: var(--mgmt-card2);
  border: 1px solid var(--mgmt-border);
  border-inline-start: 3px solid var(--mgmt-dim);
  border-radius: 10px; padding: 10px 12px;
}
.mgmt-board.done { border-inline-start-color: var(--mgmt-green); }
.mgmt-board.live { border-inline-start-color: var(--mgmt-blue); }
.mgmt-board-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mgmt-board-num { font-size: 0.7rem; font-weight: 800; color: var(--mgmt-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mgmt-board-result { font-size: 0.7rem; font-weight: 800; }
.mgmt-board-player { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--mgmt-text); padding: 2px 0; }
.mgmt-board-player span:first-child { flex-shrink: 0; opacity: 0.7; }
.mgmt-board-player .mgmt-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgmt-board-elo { color: var(--mgmt-muted); font-size: 0.72rem; }
.mgmt-bye-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mgmt-border); font-size: 0.78rem; }
.mgmt-bye-row b { color: var(--mgmt-muted); font-weight: 700; }

/* ── Team Round Robin — round/match/board cards (Actions + Information) ──── */
.mgmt-trr-match {
  border: 1px solid var(--mgmt-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
}
.mgmt-trr-match .mgmt-row:last-of-type { border-bottom: none; }
.mgmt-trr-result-btns { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.mgmt-trr-result-btns .mgmt-btn.small { margin-top: 0; padding: 6px 10px; font-weight: 800; }
.mgmt-trr-sel { border-color: var(--mgmt-green) !important; color: var(--mgmt-green) !important; background: var(--mgmt-green-dim) !important; }
.mgmt-trr-result-label { font-size: 0.78rem; font-weight: 700; color: var(--mgmt-muted); flex-shrink: 0; }
.mgmt-trr-score {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mgmt-border);
  font-size: 0.85rem; color: var(--mgmt-muted); text-align: center;
}
.mgmt-trr-score b { color: var(--mgmt-text); font-size: 1rem; }
.mgmt-trr-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; color: var(--mgmt-text); font-weight: 800; font-size: 0.85rem;
  cursor: pointer; padding: 2px 0;
}
.mgmt-trr-chevron { color: var(--mgmt-muted); font-size: 0.9rem; }
.mgmt-trr-round-sub { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mgmt-border); }
.mgmt-trr-round-sub:first-of-type { margin-top: 10px; }

/* ── Search (Add player) ──────────────────────────────────────────────────── */
.mgmt-search { position: relative; margin-bottom: 10px; }
.mgmt-search input {
  width: 100%; background: var(--mgmt-card2); border: 1px solid var(--mgmt-border);
  border-radius: 10px; padding: 10px 12px; color: var(--mgmt-text); font-size: 0.85rem;
  font-family: inherit;
}
.mgmt-search input::placeholder { color: var(--mgmt-dim); }
.mgmt-search input:focus { outline: none; border-color: var(--mgmt-green); }
.mgmt-search-results { margin-top: 8px; }

/* ── Pairing editor (Edit pairings) ───────────────────────────────────────── */
.mgmt-pe-problems {
  background: var(--mgmt-warn-bg); border: 1px solid var(--mgmt-warn-border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
  color: var(--mgmt-warn-text); font-size: 0.83rem; line-height: 1.5;
}
.mgmt-pe-problems ul { margin: 6px 0 0; padding-inline-start: 18px; }
.mgmt-pe-problems li { margin: 2px 0; }

.mgmt-pe-rows { display: flex; flex-direction: column; gap: 10px; }
.mgmt-pe-row {
  display: grid; grid-template-columns: 76px 1fr 32px 1fr;
  gap: 8px; align-items: end;
  padding: 10px; background: var(--mgmt-card2);
  border: 1px solid var(--mgmt-border); border-radius: 10px;
}
.mgmt-pe-field label {
  display: block; font-size: 0.64rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--mgmt-muted); margin-bottom: 4px;
}
.mgmt-pe-field select, .mgmt-pe-field input[type="number"] {
  width: 100%; background: var(--mgmt-card); border: 1px solid var(--mgmt-border);
  border-radius: 8px; padding: 8px 10px; color: var(--mgmt-text);
  font-size: 0.85rem; font-family: inherit;
}
.mgmt-pe-field select:focus, .mgmt-pe-field input:focus { outline: none; border-color: var(--mgmt-green); }
.mgmt-pe-swap {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 34px; border-radius: 8px; border: 1px solid var(--mgmt-border);
  background: var(--mgmt-card); color: var(--mgmt-text); font-size: 1rem; cursor: pointer;
}
.mgmt-pe-swap:hover:not(:disabled) { border-color: var(--mgmt-green); color: var(--mgmt-green); }
.mgmt-pe-swap:disabled { opacity: 0.4; cursor: not-allowed; }

.mgmt-pe-actions { display: flex; gap: 10px; margin-top: 16px; }
.mgmt-pe-actions .mgmt-btn { width: auto; flex: 1; margin-top: 0; }

@media (max-width: 620px) {
  .mgmt-pe-row { grid-template-columns: 1fr 1fr; }
  .mgmt-pe-row .mgmt-pe-swap { grid-column: 1 / -1; width: 100%; }
}

/* ── Standings table ──────────────────────────────────────────────────────── */
.mgmt-table-wrap { overflow-x: auto; }
.mgmt-standings { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.mgmt-standings th {
  text-align: start; color: var(--mgmt-muted); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0 8px 8px 0; font-weight: 700;
}
.mgmt-standings td { padding: 7px 8px 7px 0; border-top: 1px solid var(--mgmt-border); color: var(--mgmt-text); white-space: nowrap; }
.mgmt-standings tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.02); }

/* ── Swiss standings table (TRR-parity redesign) — a distinct class from
   .mgmt-standings above so Knockout's own table (still rendered by the
   unchanged mgmtStandingsCard) is completely unaffected; values copied
   from trr-manage.css's .trrmgmt-standings-table, remapped to the --mgmt-*
   tokens .mgmt--swiss already points at the same light palette. ─────────── */
.mgmt-standings-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.mgmt-standings-table th {
  text-align: start; color: var(--mgmt-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;
}
.mgmt-standings-table td { padding-block: 9px; padding-inline-end: 10px; border-top: 1px solid var(--mgmt-border); color: var(--mgmt-text); white-space: nowrap; }
.mgmt-standings-table tr.top3 td { background: var(--mgmt-green-dim); }
.mgmt-standings-rank { font-size: 1rem; font-weight: 900; color: var(--mgmt-text); }
.mgmt-standings-name { font-weight: 700; color: var(--mgmt-text); white-space: normal; }
.mgmt-standings-score { font-size: 1.05rem; font-weight: 900; color: var(--mgmt-green); }

/* ── Champion card ─────────────────────────────────────────────────────────── */
.mgmt-champ { display: flex; align-items: center; gap: 14px; }
.mgmt-champ-glyph { font-size: 1.8rem; flex-shrink: 0; }
.mgmt-champ-name { font-size: 1.05rem; font-weight: 800; color: var(--mgmt-text); }
.mgmt-champ-sub { font-size: var(--text-sm); color: var(--mgmt-muted); margin-top: 2px; }

/* ── Cancelled / unauthorized-or-not-found state ─────────────────────────── */
/* Shared by both — neutral dim icon by default; the cancelled screen alone
   tints it red, since that one really is a "this was cancelled" signal. */
.mgmt-cancelled { text-align: center; max-width: 420px; margin: 10vh auto; }
.mgmt-cancelled svg { width: 40px; height: 40px; stroke: var(--mgmt-dim); margin-bottom: 12px; }
.mgmt-cancelled h1 { font-size: 1.3rem; margin: 0 0 6px; }
.mgmt-cancelled p { color: var(--mgmt-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.mgmt-cancelled.danger svg { stroke: var(--mgmt-red); }

/* ── Confirmation / error / result-override modal ────────────────────────── */
/* A self-contained dark dialog (not the public site's light #overlay/#sheet)
   for every organizer confirmation: end-round-with-unreported-boards,
   result override, finish, and cancel. Injected into #mgmtModalRoot. */
.mgmt-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.mgmt-modal {
  background: var(--mgmt-card);
  /* A bright hairline border (not --mgmt-border, which is too close in
     luminance to both the panel and the backdrop to read as an edge) plus a
     two-layer shadow — a soft ambient spread and a crisp 1px outer ring — is
     what actually separates a near-black panel from a near-black overlay;
     raising the fill luminance alone can't do it without washing out the
     "dark management UI" look the rest of the page uses. */
  border: 1px solid var(--mgmt-modal-border);
  border-radius: var(--mgmt-radius); padding: var(--space-5);
  max-width: 420px; width: 100%; color: var(--mgmt-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.mgmt-modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; font-weight: 900; margin: 0 0 10px;
  color: var(--mgmt-text);
}
.mgmt-modal-title svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; }
.mgmt-modal-title.danger { color: var(--mgmt-red-bright); }
.mgmt-modal-msg {
  font-size: 0.88rem; color: var(--mgmt-modal-msg); margin: 0 0 18px;
  white-space: pre-line; line-height: 1.55;
}
/* An inline warning callout inside an otherwise-neutral modal — e.g. the
   "this board already has a result — choosing again will replace it" notice
   in the Edit result dialog, which isn't itself a danger-titled modal, so it
   needs its own visual flag to read as consequential rather than as plain
   body copy. */
.mgmt-modal-msg.warn {
  color: var(--mgmt-warn-text);
  background: var(--mgmt-warn-bg);
  border: 1px solid var(--mgmt-warn-border);
  border-radius: 10px; padding: 10px 12px; font-weight: 600;
}
.mgmt-modal-board {
  background: var(--mgmt-card2); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 14px; font-size: 0.85rem; font-weight: 700;
  color: var(--mgmt-text);
}
/* A labeled text input inside a modal — e.g. the "Add guest" name field.
   Mirrors .mgmt-pe-field's label/input visual language so a form control
   inside a dark modal reads consistently with one inside a card. */
.mgmt-modal-field { margin-bottom: 16px; }
.mgmt-modal-field label {
  display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--mgmt-muted); margin-bottom: 6px;
}
.mgmt-modal-field input {
  width: 100%; background: var(--mgmt-card2); border: 1px solid var(--mgmt-border);
  border-radius: 10px; padding: 10px 12px; color: var(--mgmt-text);
  font-size: 0.9rem; font-family: inherit;
}
.mgmt-modal-field input::placeholder { color: var(--mgmt-dim); }
.mgmt-modal-field input:focus { outline: none; border-color: var(--mgmt-green); }
/* A <select> inside a dark modal field — same box as the input above (the
   TRR Add Player Guest form's Gender dropdown is the first dark-modal
   field to need one). */
.mgmt-modal-field select {
  width: 100%; background: var(--mgmt-card2); border: 1px solid var(--mgmt-border);
  border-radius: 10px; padding: 10px 12px; color: var(--mgmt-text);
  font-size: 0.9rem; font-family: inherit;
}
.mgmt-modal-field select:focus { outline: none; border-color: var(--mgmt-green); }
/* Two fields per row — same purpose as teams.css's own .tm-modal-field-row
   (the fuller field set doesn't turn into a very long single-column form). */
.mgmt-modal-field-row { display: flex; gap: 10px; }
.mgmt-modal-field-row .mgmt-modal-field { flex: 1; min-width: 0; }
/* A wider variant of .mgmt-modal for content that needs more room than the
   default 420px (the TRR Add Player Guest/Club Player steps). */
.mgmt-modal-wide { max-width: 480px; }
.mgmt-modal-actions { display: flex; flex-direction: column; gap: 8px; }
.mgmt-modal-actions.row { flex-direction: row; }
.mgmt-modal-actions.row .mgmt-modal-btn { flex: 1; }
.mgmt-modal-btn {
  padding: 11px 16px; border-radius: 10px; font-weight: 800; font-size: 0.85rem;
  border: 1.5px solid var(--mgmt-border); background: var(--mgmt-card2); color: var(--mgmt-text);
}
.mgmt-modal-btn:hover { border-color: var(--mgmt-green); }
.mgmt-modal-btn.primary { background: var(--mgmt-green); border-color: var(--mgmt-green); color: #05170C; }
.mgmt-modal-btn.primary:hover { filter: brightness(1.08); border-color: var(--mgmt-green); }
/* --mgmt-red-strong (a deeper red than the --mgmt-red used for text/icon
   accents elsewhere) so white button text clears 4.5:1 — see the :root
   comment above. */
.mgmt-modal-btn.danger { background: var(--mgmt-red-strong); border-color: var(--mgmt-red-strong); color: #fff; }
.mgmt-modal-btn.danger:hover { filter: brightness(1.12); border-color: var(--mgmt-red-strong); }
.mgmt-modal-btn.danger:disabled,
.mgmt-modal-btn.primary:disabled,
.mgmt-modal-btn.ghost:disabled { opacity: 0.62; cursor: wait; pointer-events: none; }
/* A dedicated, brighter-than-muted label — .mgmt-muted (#8A8A8A) reads fine
   for routine meta text elsewhere on the page, but next to a solid green
   primary and a solid red danger button in the same row, it was faint
   enough to look disabled. Still visibly the "quiet" choice, never the
   invisible one. */
.mgmt-modal-btn.ghost { background: transparent; color: var(--mgmt-modal-ghost); border-color: var(--mgmt-border); }
.mgmt-modal-btn.ghost:hover { color: var(--mgmt-text); }

/* ── Result-choice buttons (Edit result dialog only — White/Draw/Black) ──
   Scoped to .result so it never touches .primary/.danger/.ghost, used by
   every other modal (confirm/finish/cancel/error). The plain .mgmt-card2
   fill those shared classes fall back to reads as near-invisible against
   this modal's own near-black background — these need their own, much
   higher-contrast treatment: a visibly tinted (not solid-fill) surface, a
   strong colored border, and near-white text instead of dark-on-green. */
.mgmt-modal-btn.result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; font-size: 0.92rem;
  background: var(--mgmt-card2);
  border-width: 1.5px;
  color: #FFFFFF;
}
.mgmt-modal-btn.result .mgmt-modal-score { font-weight: 900; font-size: 0.95rem; letter-spacing: 0.02em; color: #FFFFFF; }
.mgmt-modal-btn.result.win {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.6);
}
.mgmt-modal-btn.result.win:hover { background: rgba(34, 197, 94, 0.28); border-color: var(--mgmt-green); }
.mgmt-modal-btn.result.win:active { background: rgba(34, 197, 94, 0.4); }
.mgmt-modal-btn.result.draw {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.6);
}
.mgmt-modal-btn.result.draw:hover { background: rgba(245, 158, 11, 0.28); border-color: var(--mgmt-amber); }
.mgmt-modal-btn.result.draw:active { background: rgba(245, 158, 11, 0.4); }

@media (max-width: 620px) {
  .mgmt { padding: var(--space-4) var(--space-3) var(--space-5); }
  .mgmt-title { font-size: 1.4rem; }
  .mgmt-modal-field-row { flex-direction: column; gap: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SWISS MANAGEMENT — light "control center" theme, visually matched to the
   Team Round Robin manager (trr-manage.css's .trrmgmt) per that redesign
   task: same page background formula, same card language (white card,
   var(--border) hairline, --radius-lg, --shadow-sm), same tokens.css-driven
   palette, same light header/tab treatment. TRR itself is never touched —
   it has its own separate root (.trrmgmt-shell) and its own separate
   classes (.trrmgmt-*) in trr-manage.css; nothing here can reach it. This
   is a READ-ONLY visual reference: every color/radius/shadow value below is
   copied from trr-manage.css's literal rules, not re-derived.
   ───────────────────────────────────────────────────────────────────────── */
/* .mgmt--swiss is added by renderManageTournament() only when
   t.format === 'swiss' (Knockout shares this same renderManageTournament
   path and stays on the default dark theme; Team Round Robin has its own
   root, .trrmgmt-shell in trr-manage.css, and never sees this class or any
   rule below). Every --mgmt-* token above is declared on :root — see that
   block's own comment for why (the confirmation-dialog modal is a sibling
   of .mgmt, not a descendant, so it needs the tokens findable regardless of
   DOM position). Re-declaring the *same* var names here, scoped to
   .mgmt--swiss, overrides them only for elements inside the Swiss shell:
   every existing .mgmt-card/.mgmt-btn/.mgmt-badge/etc. rule already reads
   these tokens via var(--mgmt-*), so this block re-themes the whole Swiss
   dashboard light without touching a single one of those selectors — and
   the modal (outside .mgmt--swiss) keeps resolving the original dark :root
   values, unaffected on purpose: Team Round Robin's own confirmation
   dialogs already reuse that same shared dark .mgmt-modal (see trr-
   manage.css's own header comment), so a dark confirmation dialog over a
   light manager page is the existing, expected pattern for BOTH formats,
   not a regression introduced here. */
.mgmt--swiss {
  /* Card/surface tokens now point at the site's own light design tokens —
     the exact same ones trr-manage.css's .trrmgmt-card/.trrmgmt-row use —
     so every --mgmt-card/--mgmt-card2/--mgmt-border consumer in this file
     re-themes automatically to match. */
  --mgmt-card:       var(--card);      /* #FFFFFF — same as .trrmgmt-card */
  --mgmt-card2:      var(--bg-sunk);   /* #F2EFE6 — same secondary tint .trrmgmt uses (chips, step-dots, bye rows) */
  --mgmt-border:     var(--border);    /* #E7E3DA — same as .trrmgmt-card's border */
  --mgmt-text:       var(--text);      /* #1F1F1F */
  --mgmt-muted:      var(--muted);     /* #7A7A7A */
  --mgmt-dim:        var(--faint);     /* #A6A29A */
  --mgmt-dim-label:  var(--muted);

  /* Accent colors — the same hues trr-manage.css's own badges/buttons use,
     not re-derived: --green/--green-dark/--blue/--red come straight from
     tokens.css; the *-dim tints below are the literal rgba/hex values
     .trrmgmt-badge.* already uses for its own tinted chip backgrounds. */
  --mgmt-green:      var(--green);
  --mgmt-green-dim:  var(--green-lite);       /* #DDEFE4 — .trrmgmt-badge.green's own bg */
  --mgmt-blue:       var(--blue);
  --mgmt-blue-dim:   #E6F1FA;                 /* .trrmgmt-badge.blue's own bg */
  --mgmt-red:        var(--red);
  --mgmt-red-dim:    #FBE4E4;                 /* .trrmgmt-badge.red's own bg */
  --mgmt-red-strong: var(--red);              /* already AA-compliant as a solid white-text fill — no separate darker shade needed */
  --mgmt-red-bright: var(--red);
  --mgmt-amber:      #9A6B12;                 /* .trrmgmt-badge.amber's own text color */
  --mgmt-amber-dim:  #FCF1DC;                 /* .trrmgmt-badge.amber's own bg */
  /* trr-manage.css has no purple in its palette (nothing there needed it) —
     kept as a same-hue, WCAG-AA-on-white shade so Swiss's own purple badge
     (used elsewhere in this file) stays legible on the new light card. */
  --mgmt-purple:     #6D28D9;
  --mgmt-purple-dim: rgba(109, 40, 217, 0.08);

  --mgmt-radius: var(--radius-lg); /* 18px — matches .trrmgmt-card/.trrmgmt-lifecycle exactly (was the shared, flatter 14px) */

  /* Same background formula as .trrmgmt in trr-manage.css, literally copied
     (a subtle green-tinted radial glow over the site's own --bg), not an
     approximation. */
  background:
    radial-gradient(1000px 480px at 10% -10%, rgba(20, 122, 61, 0.08), transparent 60%),
    var(--bg);
}

/* ── Header / tabs — now sitting on the same light shell as every card, so
   (unlike the old dark-green-gradient theme) they need no separate "light
   text on a saturated background" token set: the base .mgmt-back/.mgmt-
   eyebrow/.mgmt-title/etc rules already read var(--mgmt-muted)/var(--mgmt-
   green)/var(--mgmt-text), which the remap above already points at the
   right light-mode colors. Only the handful of spacing/structural details
   below still need a Swiss-scoped nudge to match trr-manage.css's own
   numbers exactly (its header has no divider line; its tabs are tighter). */
.mgmt--swiss .mgmt-head    { border-bottom: none; padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.mgmt--swiss .mgmt-eyebrow { margin-bottom: 4px; }
.mgmt--swiss .mgmt-tabbar  { gap: 4px; }
.mgmt--swiss .mgmt-tab     { padding: 10px 14px; font-size: 0.88rem; }
.mgmt--swiss .mgmt-tab.active { color: var(--green-dark); }

/* ── Cards — trr-manage.css's .trrmgmt-card adds a shadow, tighter own
   padding, and its own inter-card spacing that the shared .mgmt-card rule
   (used by the dark theme too) doesn't have; add them only for Swiss. ── */
.mgmt--swiss .mgmt-card    { box-shadow: var(--shadow-sm); padding: 16px 18px; }
.mgmt--swiss .mgmt-actions-col { gap: 14px; max-width: 860px; }

/* ── Small literal-color fixes — the handful of rules in this file that
   hardcode an rgba() tuned for the dark theme instead of reading a
   --mgmt-* token, so the automatic re-theme above can't reach them. ── */
.mgmt--swiss .mgmt-standings tr:nth-child(odd) td { background: rgba(15, 123, 62, 0.05); }
.mgmt--swiss .mgmt-spinner { border-color: rgba(0, 0, 0, 0.15); }
.mgmt--swiss .mgmt-pe-problems { color: #92400E; }

/* ─────────────────────────────────────────────────────────────────────────
   Swiss tournament manager — TRR-parity redesign (own components). These
   classes only ever appear inside .mgmt--swiss (Knockout still uses the
   original dark .mgmt-* markup above, completely untouched), so they read
   the --mgmt-* tokens directly rather than the raw --green/--card/etc. site
   tokens — same indirection the rest of this file already uses, so a
   future retune of --mgmt-* automatically reaches these too. Every value
   below is copied from trr-manage.css's equivalent selector (not
   re-derived), same convention the .mgmt--swiss remap above already
   established, so this reads as the same organizer product rather than a
   third design.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Persistent lifecycle bar (see mgmtSwissLifecycleHeaderHtml) — values
   copied from trr-manage.css's .trrmgmt-lifecycle/.trrmgmt-step*. ───────── */
.mgmt-swiss-lifecycle {
  background: var(--mgmt-card); border: 1px solid var(--mgmt-border);
  border-radius: var(--mgmt-radius); padding: 14px 16px; margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
/* The steps row itself — split out from .mgmt-swiss-lifecycle so the
   dual rating-source Round-1 readiness warning (mgmtSwissLifecycleHeaderHtml,
   migration 189 — not yet deployed) can sit below it, inside the same
   card, without disturbing this row's own flex layout. */
.mgmt-swiss-lifecycle-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.mgmt-swiss-lifecycle .mgmt-notice { margin: 10px 0 0; }
.mgmt-swiss-step { display: flex; align-items: center; gap: 9px; padding: 7px 6px; }
.mgmt-swiss-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(--mgmt-border); background: var(--mgmt-card2); color: var(--mgmt-dim);
}
.mgmt-swiss-step.done .mgmt-swiss-step-dot { border-color: var(--mgmt-green-dim); background: var(--mgmt-green-dim); color: var(--mgmt-green); }
.mgmt-swiss-step.active .mgmt-swiss-step-dot { border-color: var(--mgmt-green); background: var(--mgmt-green); color: #fff; box-shadow: 0 0 0 4px var(--mgmt-green-dim); }
.mgmt-swiss-step-label { font-size: 0.85rem; font-weight: 800; color: var(--mgmt-dim); white-space: nowrap; }
.mgmt-swiss-step.done .mgmt-swiss-step-label { color: var(--mgmt-muted); }
.mgmt-swiss-step.active .mgmt-swiss-step-label { color: var(--mgmt-text); }
.mgmt-swiss-step-connector { width: clamp(18px, 3vw, 40px); height: 2px; background: var(--mgmt-border); flex-shrink: 0; margin: 0 2px; }
.mgmt-swiss-step-connector.done { background: var(--mgmt-green-dim); }
.mgmt-swiss-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(--mgmt-green); color: #fff; box-shadow: var(--shadow-cta);
}
.mgmt-swiss-step-btn:hover { transform: translateY(-1px); }
.mgmt-swiss-step-btn.danger { background: var(--mgmt-red); box-shadow: none; }
@media (max-width: 640px) {
  .mgmt-swiss-lifecycle { gap: 8px; }
  .mgmt-swiss-step-connector { display: none; }
}

/* ── Check-in tab hero (see mgmtSwissCheckinHeroHtml — kept unchanged by the
   arrival-management redesign below) — values copied from trr-manage.css's
   .trrmgmt-checkin-*. ────────────────────────────────────────────────────── */
.mgmt-swiss-checkin-hero { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.mgmt-swiss-checkin-hero-main { flex: 1 1 160px; min-width: 140px; }
/* Counter-order fix (Check-in UX task 3): flexbox layout, not plain
   inline text — flex item order is a LAYOUT concept, immune to the
   Unicode bidi algorithm that was reordering the plain "{checked} / {total}"
   text run inside this RTL page. dir="ltr" (set on the element in markup)
   additionally pins flex's own main-axis start/end to a fixed physical
   left/right regardless of page language, so DOM-first (arrived) always
   renders at the visual LEFT edge and DOM-last (total) always at the
   visual RIGHT edge — deterministic in both languages, not dependent on
   bidi resolution. Font styling unchanged from before (still one visual
   size/weight for the whole summary; only the layout mechanism changed). */
.mgmt-swiss-checkin-summary-main {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 1.5rem; font-weight: 900; color: var(--mgmt-text);
}
.mgmt-swiss-checkin-hero-lists { flex: 2 1 320px; display: flex; gap: 18px; min-width: 260px; }
.mgmt-swiss-checkin-hero-list { flex: 1; min-width: 0; }
.mgmt-swiss-checkin-hero-list-title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--mgmt-muted); margin-bottom: 7px;
}
.mgmt-swiss-checkin-hero-names { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; max-height: 150px; overflow-y: auto; padding-inline-end: 4px; }
.mgmt-swiss-checkin-hero-name {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--mgmt-card2); font-size: 0.74rem; font-weight: 600; color: var(--mgmt-text);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.mgmt-swiss-checkin-hero-names.arrived .mgmt-swiss-checkin-hero-name { background: var(--mgmt-green-dim); color: var(--mgmt-green); }
.mgmt-swiss-checkin-hero-empty { font-size: 0.76rem; color: var(--mgmt-dim); }
@media (max-width: 640px) {
  .mgmt-swiss-checkin-hero { flex-direction: column; gap: 16px; }
  .mgmt-swiss-checkin-hero-lists { flex-direction: column; width: 100%; }
}

/* ── Check-in tab — "find player, mark arrived" arrival-management redesign
   (see mgmtSwissCheckinRosterHtml/mgmtSwissArrivalGridHtml/mgmtSwissNot
   ArrivedItemHtml/mgmtSwissArrivedItemHtml/mgmtSwissCheckinPromotedHtml).
   Column-major grid: each .mgmt-swiss-arrival-block is one row of up to 5
   .mgmt-swiss-arrival-col columns (35 players max per block — a 36th player
   starts a new block/row entirely, computed in JS, never CSS auto-
   placement); each column stacks up to 7 items vertically. CSS Grid with a
   FIXED explicit track count (never flex-grow) controls the column count
   per breakpoint — desktop 5, tablet 3, mobile 1 — so every column always
   has the exact width it would have in a fully-populated row, regardless
   of how many of that row's columns actually contain players (column-
   resizing bug fix — flex-grow:1 on a partially-empty flex row used to
   stretch the few present columns to fill the leftover space; a grid's
   explicit tracks reserve their width unconditionally and simply sit
   empty instead). A block with more populated columns than the current
   breakpoint's track count (e.g. 5 columns at the 3-column tablet
   breakpoint) wraps onto additional implicit grid rows automatically, in
   the same DOM order — never horizontal scroll, and since each column is
   already a contiguous alphabetical chunk, stacking them in order
   reproduces the exact same overall reading sequence. ────────────────── */
.mgmt-swiss-arrival-title {
  font-size: 1rem; font-weight: 800; color: var(--mgmt-text);
  margin: 22px 0 10px;
}
.mgmt-swiss-arrival-title.arrived { color: var(--mgmt-muted); margin-top: 28px; }
.mgmt-swiss-arrival-search {
  display: block; width: 100%; box-sizing: border-box;
  padding: 16px 18px; margin-bottom: 16px;
  border: 2px solid var(--mgmt-border); border-radius: 14px;
  background: var(--mgmt-card2); color: var(--mgmt-text);
  font-size: 1.05rem; font-weight: 600; font-family: inherit;
}
.mgmt-swiss-arrival-search::placeholder { color: var(--mgmt-dim); }
.mgmt-swiss-arrival-search:focus { outline: none; border-color: var(--mgmt-green); }

/* Select All/Deselect All + Mark Arrived(N) — bulk-selection follow-up
   task. Deliberately lightweight (two small pill buttons, no toolbar
   chrome/border/background) so this never reads as the old admin-heavy
   management bar the arrival-management redesign specifically removed. */
.mgmt-swiss-arrival-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }

.mgmt-swiss-arrival-grid-wrap { margin-bottom: 4px; }
.mgmt-swiss-arrival-block {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 16px;
  margin-bottom: 12px;
}
.mgmt-swiss-arrival-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1000px) {
  .mgmt-swiss-arrival-block { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .mgmt-swiss-arrival-block { grid-template-columns: 1fr; }
  .mgmt-swiss-arrival-search { padding: 14px 16px; font-size: 1rem; }
}

.mgmt-swiss-arrival-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--mgmt-card2); border: 1px solid var(--mgmt-border);
}
.mgmt-swiss-arrival-name {
  font-weight: 700; font-size: 0.86rem; color: var(--mgmt-text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgmt-swiss-arrival-item .mgmt-btn.small { flex-shrink: 0; }
/* Selected state (bulk-selection follow-up task) — subtle, not loud (task
   requirement: "a subtle but obvious selected visual state"). */
.mgmt-swiss-arrival-item.selected { background: var(--mgmt-green-dim); border-color: transparent; }
.mgmt-swiss-arrival-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Checkbox — same visual language as TRR's own trrmgmt-checkin-checkbox
   (small rounded square, filled green when checked), reused via the
   .mgmt--swiss light-theme token remap rather than duplicated wholesale.
   Never rendered for an unresolved row (task requirement — it simply
   isn't part of that branch's markup) or while check-in is closed (hidden
   entirely by its caller). */
.mgmt-swiss-arrival-checkbox {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--mgmt-border); background: var(--mgmt-card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
}
.mgmt-swiss-arrival-checkbox svg { width: 13px; height: 13px; stroke: currentColor; }
.mgmt-swiss-arrival-checkbox.checked { background: var(--mgmt-green); border-color: var(--mgmt-green); }
/* Unresolved Official Rating (dual rating-source, migration 189, NOT YET
   DEPLOYED) — same amber tint as mgmt-swiss-roster-row-unresolved
   elsewhere, stacked (not one line) since it carries a status line + an
   action, unlike a normal item's single button. Only affected players ever
   look like this — every other item stays the plain, simple shape above. */
.mgmt-swiss-arrival-item.unresolved {
  flex-direction: column; align-items: stretch; gap: 6px;
  background: var(--mgmt-amber-dim); border-color: transparent;
}
.mgmt-swiss-arrival-item.unresolved .mgmt-swiss-arrival-name { white-space: normal; }
/* Arrived section — calmer/lower-emphasis than Not-arrived (task
   requirement): no solid card background, a muted checkmark+name, and a
   plain underlined text Undo action (mgmt-swiss-checkin-undo, reused
   as-is) instead of a colored button, so it never competes visually with
   the primary Not-arrived/Arrived workflow above it. */
.mgmt-swiss-arrival-item.arrived {
  background: transparent; border-style: dashed;
}
.mgmt-swiss-arrival-item.arrived .mgmt-swiss-arrival-name {
  display: flex; align-items: center; gap: 6px;
  color: var(--mgmt-muted); font-weight: 600;
}
.mgmt-swiss-arrival-item.arrived .mgmt-swiss-arrival-name svg { width: 14px; height: 14px; color: var(--mgmt-green); flex-shrink: 0; }

/* Live-search promoted result — the single best match, shown large with one
   immediate action, above both grids (task: "type player name → see player
   immediately → click Arrived", no second selection step). */
.mgmt-swiss-arrival-promoted {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 16px;
  border: 2px solid var(--mgmt-green); border-radius: 16px;
  background: var(--mgmt-green-dim);
}
.mgmt-swiss-arrival-promoted.arrived { border-color: var(--mgmt-border); background: var(--mgmt-card2); }
.mgmt-swiss-arrival-promoted-name { font-size: 1.3rem; font-weight: 900; color: var(--mgmt-text); }
.mgmt-swiss-arrival-promoted-status { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--mgmt-muted); font-size: 1rem; }
.mgmt-swiss-arrival-promoted-status svg { width: 18px; height: 18px; color: var(--mgmt-green); }
.mgmt-swiss-arrival-promoted .mgmt-btn { font-size: 1rem; padding: 12px 26px; }
/* Checkbox + Arrived button together (bulk-selection follow-up task —
   task section 9: the promoted card exposes the same selection toggle the
   grid item has, not a separate control). */
.mgmt-swiss-arrival-promoted-actions { display: flex; align-items: center; gap: 12px; }

/* ── Compact sort bar / filter chips — Participants tab only now (Check-in
   redesign removed its own equivalent controls — arrival-management
   simplification task). Values copied from trr-manage.css's
   .trrmgmt-checkin-sortbar/.trrmgmt-sort-btn/.trrmgmt-chip-filter. ────── */
.mgmt-swiss-filters { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.mgmt-swiss-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mgmt-swiss-filter-chip {
  padding: 5px 11px; border-radius: var(--radius-pill); border: 1.5px solid var(--mgmt-border);
  background: var(--mgmt-card); color: var(--mgmt-muted); font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.mgmt-swiss-filter-chip.active { border-color: var(--mgmt-green); background: var(--mgmt-green-dim); color: var(--mgmt-green); }
.mgmt-swiss-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.mgmt-swiss-sortbar-label { font-size: 0.72rem; font-weight: 700; color: var(--mgmt-dim); margin-inline-end: 2px; }
.mgmt-swiss-sort-btn {
  padding: 5px 11px; border-radius: var(--radius-pill); border: 1.5px solid var(--mgmt-border);
  background: var(--mgmt-card); color: var(--mgmt-muted); font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.mgmt-swiss-sort-btn:hover { border-color: var(--mgmt-green-dim); }
.mgmt-swiss-sort-btn.active { border-color: var(--mgmt-green); background: var(--mgmt-green-dim); color: var(--mgmt-green); }

/* ── Shared compact roster row — Check-in AND Participants tabs both
   render their rows with these exact classes (task requirement: one
   roster density, not two). Bug fix: the previous markup put name/
   metadata inside a flex:1 body (Check-in) or gave the name itself flex:1
   (Participants), which grows to consume all of a wide card's leftover
   width and shoves status/action to the far edge — visually identical to
   justify-content:space-between even though neither tab ever set it
   explicitly. Nothing here grows: every piece sizes to its own content and
   the row simply clusters at the start, exactly like a compact tournament
   list/table row, with any unused width left as plain trailing space
   instead of being distributed between fields. ─────────────────────────── */
.mgmt-swiss-roster-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 3px 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--mgmt-border);
  line-height: 1.3;
}
.mgmt-swiss-roster-row:last-child { border-bottom: none; }
.mgmt-swiss-roster-name {
  font-weight: 700; font-size: 0.88rem; color: var(--mgmt-text);
  flex-shrink: 1; min-width: 0; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgmt-swiss-roster-meta { font-size: 0.78rem; color: var(--mgmt-muted); font-weight: 700; flex-shrink: 0; }
.mgmt-swiss-roster-status { font-size: 0.76rem; color: var(--mgmt-muted); flex-shrink: 0; }
.mgmt-swiss-roster-status.checked-in { color: var(--mgmt-green); font-weight: 700; }
/* Dual rating-source (migration 189, NOT YET DEPLOYED) — unresolved-row
   status/badge, both tabs. */
.mgmt-swiss-roster-status.unresolved { display: flex; align-items: center; gap: 4px; color: var(--mgmt-amber); font-weight: 700; }
.mgmt-swiss-roster-row-unresolved { background: var(--mgmt-amber-dim); border-radius: 8px; }
.mgmt-swiss-roster-action { flex-shrink: 0; }

/* ── Participants tab (TRR-parity redesign) — this tab's cards now use
   trr-manage.css's own .trrmgmt-participant/-grid/-name/-team/-now classes
   directly (same file, same page — nothing here needed to duplicate them).
   .mgmt-swiss-roster-row-unresolved above is reused as-is for the card's
   own amber background. This is the one genuinely new piece: the bottom
   action row (Set Official Rating / Mark as left), styled as a divider-
   topped strip matching trrmgmt-participant-now's own top-border pattern,
   since TRR's own participant card has no action button in this position
   to copy verbatim (its Mark Arrived button is a full-width single action,
   not a 1-or-2-button row). ────────────────────────────────────────────── */
.mgmt-swiss-participant-actions {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mgmt-border);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.mgmt-swiss-participant-actions .mgmt-btn { flex: 1; justify-content: center; }

.mgmt-swiss-checkin-undo { border: none; background: none; padding: 0; font-size: 0.68rem; font-weight: 700; color: var(--mgmt-muted); text-decoration: underline; cursor: pointer; flex-shrink: 0; }
.mgmt-swiss-checkin-undo:hover { color: var(--mgmt-red); }

@media (max-width: 640px) {
  /* Narrow screens: let the row wrap (name/meta/status stay on the first
     line as long as they fit; "now playing" and the action button are the
     first to drop to their own line) rather than forcing everything onto
     one unreadable squeezed row or growing back into a tall stacked card. */
  .mgmt-swiss-roster-action { flex-basis: 100%; }
  .mgmt-swiss-roster-name { max-width: 60vw; }
}

/* ── Informational notice banner (Live tab's "not yet published" notice) —
   copied from trr-manage.css's .trrmgmt-notice/.trrmgmt-notice.info. ────── */
.mgmt-notice {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--mgmt-radius); padding: 12px 16px; margin-bottom: 14px;
  font-size: 0.82rem; line-height: 1.45;
}
/* Missing this rule was the actual root cause of a huge blue rectangle
   under the Check-in tab's "not currently open" notice (and every other
   .mgmt-notice instance): icon('flag') returns a bare <svg viewBox="0 0 24
   24" ...> with no width/height attribute, and with no CSS constraint a
   browser falls back to the classic replaced-element default size
   (~300×150px) for it — .mgmt-notice's own flex layout then grows to fit
   that oversized icon, and the notice's colored background fills the
   result. Copied from trr-manage.css's own .trrmgmt-notice svg rule, which
   this file's version of the notice was missing. */
.mgmt-notice svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; margin-top: 1px; }
.mgmt-notice.info { background: var(--mgmt-blue-dim); color: var(--mgmt-blue); }
.mgmt-notice.warning { background: var(--mgmt-amber-dim); color: var(--mgmt-amber); }
.mgmt-notice .mgmt-swiss-checkin-undo { color: inherit; margin-inline-start: 6px; }

/* ── Official Rating resolution club-player picker (dual rating-source,
   migration 189 — NOT YET DEPLOYED) — a whole-row <button> (unlike the
   plain-div .mgmt-row this reuses for its base flex/padding), so it needs
   its own resets for the browser's default button chrome. ──────────────── */
.mgmt-resolve-cp-row {
  width: 100%; text-align: inherit; font: inherit; color: inherit;
  background: none; border: 1.5px solid transparent; border-radius: 10px;
  cursor: pointer; padding: 8px 10px; margin-bottom: 4px;
}
.mgmt-resolve-cp-row:hover:not(:disabled) { border-color: var(--mgmt-green-dim); }
.mgmt-resolve-cp-row.selected { border-color: var(--mgmt-green); background: var(--mgmt-green-dim); }
.mgmt-resolve-cp-row:disabled { cursor: not-allowed; opacity: 0.7; }
.mgmt-resolve-cp-row svg { flex-shrink: 0; color: var(--mgmt-green); }