/* ===================================================================
   Recent Matches — additive stylesheet
   Reuses existing tokens from style.css / superposition.css:
   --sp-green, --sp-red, --sp-yellow, --sp-purple, --cyan, --magenta,
   --ink, --ink-dim, --ink-faint, --border, --radius-sm, --font-display,
   --font-mono, and the existing .badge / .badge-* classes.
   Nothing in style.css or superposition.css is modified or overridden.
   =================================================================== */

.rm-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}

.rm-refresh-btn {
  min-height: 36px;
  padding: 6px 16px;
  font-size: 0.8rem;
}

.rm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.recent-match-row {
  display: grid;
  grid-template-columns: 110px 70px 1fr 130px 130px 150px 150px 60px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.recent-match-row:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
}

.recent-match-headerrow {
  background: none;
  border: none;
  padding: 0 16px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

.recent-match-headerrow:hover {
  background: none;
}

/* Left accent bar per outcome — colors match the existing badge system */
.recent-match-won     { border-left: 3px solid var(--sp-green); }
.recent-match-lost    { border-left: 3px solid var(--sp-red); }
.recent-match-voided  { border-left: 3px solid var(--sp-red); opacity: 0.85; }
.recent-match-pending { border-left: 3px solid var(--sp-yellow); }

.rm-opponent { color: var(--ink-dim); }
.rm-stake { color: var(--ink-dim); }
.rm-date { color: var(--ink-faint); font-size: 0.78rem; }

.rm-net { font-weight: 700; font-family: var(--font-display); }
.recent-match-won .rm-net  { color: var(--sp-green); }
.recent-match-lost .rm-net { color: var(--sp-red); }

.rm-link a {
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.78rem;
}
.rm-link a:hover { text-decoration: underline; }

/* Extra outcome badges — same visual language as the existing
   .badge-awaiting-deposit / .badge-awaiting-reveal / .badge-voided
   classes already defined in superposition.css. Pending rows reuse
   those existing classes directly (see recent-matches.js); Won/Lost
   need two new color variants added here. */
.badge-won {
  color: var(--sp-green);
  background: rgba(0, 255, 170, 0.08);
  border-color: rgba(0, 255, 170, 0.25);
}

.badge-lost {
  color: var(--sp-red);
  background: rgba(255, 60, 105, 0.08);
  border-color: rgba(255, 60, 105, 0.25);
}

/* Self-serve settle action (Reclaim Deposit / Finalize Match) */
.rm-action-btn {
  background: rgba(255, 207, 92, 0.1);
  border: 1px solid rgba(255, 207, 92, 0.4);
  color: var(--sp-yellow);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.rm-action-btn:hover:not(:disabled) {
  background: rgba(255, 207, 92, 0.2);
  box-shadow: 0 0 14px rgba(255, 207, 92, 0.25);
}

.rm-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.rm-waiting-note {
  color: var(--ink-faint);
  font-size: 0.76rem;
  font-style: italic;
}

.recent-match-error {
  color: var(--sp-red);
  padding: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.rm-empty {
  color: var(--ink-faint);
  text-align: center;
  padding: 28px 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Stack columns on narrow screens rather than compressing 8 into one row */
@media (max-width: 760px) {
  .recent-match-headerrow { display: none; }

  .recent-match-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "outcome matchid"
      "opponent opponent"
      "stake net"
      "date date"
      "action action"
      "link link";
    row-gap: 8px;
  }

  .rm-outcome  { grid-area: outcome; }
  .rm-matchid  { grid-area: matchid; text-align: right; color: var(--ink-faint); }
  .rm-opponent { grid-area: opponent; }
  .rm-stake    { grid-area: stake; }
  .rm-net      { grid-area: net; text-align: right; }
  .rm-date     { grid-area: date; }
  .rm-action   { grid-area: action; }
  .rm-link     { grid-area: link; }
}