/* ══════════════════════════════════════════════════════
   ALL TOURNAMENTS TABLE
   ══════════════════════════════════════════════════════ */
.all-tournaments { margin-bottom: var(--s-7); }
.tourney-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.tourney-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tourney-table th {
  text-align: left; font-size: var(--fs-1); color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tourney-table th.sortable { cursor: pointer; user-select: none; position: relative; }
.tourney-table th.sortable:hover { color: var(--blue); }
.tourney-table th.sortable::after {
  content: '\21F5'; /* ⇅ both arrows — sort affordance, always visible */
  font-size: var(--fs-1); opacity: .35; margin-left: 4px;
  vertical-align: middle;
}
.tourney-table th.sortable:hover::after { opacity: .7; }
.tourney-table th.sortable.asc::after { content: '\25B2'; opacity: 1; color: var(--blue); }
.tourney-table th.sortable.desc::after { content: '\25BC'; opacity: 1; color: var(--blue); }

/* Tournament table header + controls row (title, status filter
   buttons, free-text search) lives above the table itself. */
.tt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: 16px;
  flex-wrap: wrap;
}
.tt-controls {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
/* The status filter is a segmented control (controls.css .segmented). */
.tt-search {
  display: flex; align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--s-3);
  min-width: 220px;
  transition: border-color .15s, box-shadow .15s;
}
.tt-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.tt-search-icon { color: var(--muted); display: inline-flex; margin-right: 6px; }
.tt-search-icon svg { height: 15px; width: 15px; }
.tt-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: var(--fs-3);
  padding: 7px 0;
  min-height: 32px;
}
.tt-search input::placeholder { color: var(--muted); }
@media (max-width: 639px) {
  .tt-controls { width: 100%; }
  .tt-search { flex: 1; min-width: 0; }
}
.tourney-table td {
  padding: 10px; font-size: var(--fs-3);
  border-bottom: 1px solid var(--border-light); vertical-align: middle;
}
.tourney-table tr { cursor: pointer; transition: background .15s; }
.tourney-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--raised) 50%, transparent); }
.tourney-table tbody tr:hover td { background: var(--surface2); }
.tourney-table tbody tr:hover .t-name { color: var(--blue); }
.tourney-table tbody tr:active td { background: var(--blue-dim); transition: background 0s; }
/* v4 U5: row flash for chart click-to-highlight (app.js onClick adds the class
   for 2.5s on the matching table row). Existed as a classList call with no
   rule, so the highlight was invisible. */
.tourney-table tbody tr.chart-highlight td,
.comp-table tbody tr.chart-highlight td { background: var(--blue-dim); }
.tourney-table tr:last-child td { border-bottom: none; }
.t-name { font-weight: 600; }
.t-sub { font-size: var(--fs-1); color: var(--muted); margin-top: 2px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: var(--fs-1); font-weight: 700;
}
.pill-live { background: var(--green-dim); color: var(--green); border: 1px solid rgba(63,185,80,.3); }
.pill-complete { background: var(--surface3); color: var(--muted); border: 1px solid var(--border); }
.pill-hist { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(188,140,255,.3); }
.pace-bar-wrap {
  width: 60px; height: 5px; background: var(--surface3);
  border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px;
}
.pace-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }

/* ── Mobile card layout for tournament table (< 640px) ── */
@media (max-width: 639px) {
  .tourney-table-wrap { overflow-x: visible; margin: 0; padding: 0; }
  .tourney-table { display: block; min-width: 0; }
  .tourney-table thead { display: none; }
  .tourney-table tbody { display: block; }
  .tourney-table tr {
    display: block;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--s-3);
    padding: var(--s-3) var(--s-4);
  }
  .tourney-table tbody tr:nth-child(even) td,
  .tourney-table tbody tr:hover td,
  .tourney-table tbody tr:active td { background: transparent; }
  .tourney-table tr:active { background: var(--surface3); }
  .tourney-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--fs-3);
  }
  .tourney-table td::before {
    content: attr(data-label);
    font-size: var(--fs-1);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .tourney-table td:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 0;
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
    border-bottom: 1px solid var(--border);
  }
  .tourney-table td:first-child::before { display: none; }
  .tourney-table td:last-child { border-bottom: none; padding-bottom: 0; }
}

/* Recent finishes feed removed in iter 26 — the data table at the
   bottom of the predictions tab is the all-tournaments view, now
   sortable + filterable. Keep the placeholder block for the bracket
   match below. */
@media (max-width: 639px) {
  .rr-removed-placeholder { display: none; }
}