/* =========================================================
   TFC Pickups — style.css (unified links, team colors, hovers)
   ========================================================= */

/* ---------- Dark theme is DEFAULT ---------- */
:root {
  --bg-color: #121417;
  --text-color: #e5e7eb;
  --chart-bg: #121417;
  --panel-bg: #171a21;
  --panel-border: #2b2f3a;

  --table-border: #2b2f3a;
  --table-header-bg: #171a21;

  --link-color: #4da6ff;      /* nav/link color in dark */
  --accent-color: #4da6ff;

  --hover-blue: rgba(77, 122, 255, .14);
  --hover-red:  rgba(255, 92, 92,  .14);
  --hover-tie:  rgba(200,200,200,  .10);

  --team-blue-text: #7fb3ff;
  --team-red-text:  #ff8a8a;

  --switch-bg: #4a4f57;
  --switch-checked-bg: #2196F3;

  --card-bg: #121417;
  --card-border: #2b2f3a;
}

/* ---------- Light theme override ---------- */
html.light-mode {
  --bg-color: #ffffff;
  --text-color: #0f1115;
  --chart-bg: #ffffff;
  --panel-bg: #f7f7f9;
  --panel-border: #e5e7eb;

  --table-border: #dddddd;
  --table-header-bg: #eeeeee;

  --link-color: #0d6efd;
  --accent-color: #0d6efd;

  --hover-blue: rgba(13, 110, 253, .10);
  --hover-red:  rgba(220, 53, 69,  .10);
  --hover-tie:  rgba(120,120,120,  .10);

  --team-blue-text: #0d6efd;
  --team-red-text:  #dc3545;

  --switch-bg: #cfcfcf;
  --switch-checked-bg: #2196F3;

  --card-bg: #fff;
  --card-border: #e5e7eb;
}


/* ---------- Base layout & typography ---------- */
html, body {
  height: 100%;
width: 100%;
}
body {
  margin: 0;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  transition: background-color .25s, color .25s;
  font-size: 12px;       /* downshift */
}

/* ---------- Header / nav ---------- */
header {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h1 {
  margin: 0;
  font-size: 24px;
}
nav a {
  margin: 0 12px;
}

/* Current tab (optional) */
.nav a.active {
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Unified link styles ---------- */
a, a:link, a:visited, a:active {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--link-color);
  text-decoration: underline;
}

/* ---------- Main ---------- */
main {
  max-width: 1200px;
  margin: 28px auto;
  padding: 0 16px;
}

h2 {
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-color);
  font-size: 22px;
}

/* ---------- Controls ---------- */
.controls { margin-bottom: 12px; }
select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--bg-color);
  color: var(--text-color);
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 12px;     /* downshift */
}
th, td {
  padding: 0.6rem;     /* tighter */
  text-align: left;
  border: 1px solid var(--table-border);
  vertical-align: top;
}
th {
  background: var(--table-header-bg);
  font-weight: 600;
}
.nowrap { white-space: nowrap; }

/* ---------- Matches & Player recent: winner-based hover ---------- */
#matches-table tbody tr.winner-blue:hover,
#recent-matches-table tbody tr.winner-blue:hover {
  background-color: var(--hover-blue);
  transition: background-color .15s linear;
}
#matches-table tbody tr.winner-red:hover,
#recent-matches-table tbody tr.winner-red:hover {
  background-color: var(--hover-red);
  transition: background-color .15s linear;
}
#matches-table tbody tr.winner-tie:hover,
#recent-matches-table tbody tr.winner-tie:hover {
  background-color: var(--hover-tie);
  transition: background-color .15s linear;
}
/* --- Map Page: winner-based hover --- */
#map-matches-table tbody tr.winner-blue:hover {
  background-color: var(--hover-blue);
  transition: background-color .15s linear;
}
#map-matches-table tbody tr.winner-red:hover {
  background-color: var(--hover-red);
  transition: background-color .15s linear;
}
#map-matches-table tbody tr.winner-tie:hover {
  background-color: var(--hover-tie);
  transition: background-color .15s linear;
}

/* Pending rows (subtle amber) */
.row-pending { background: rgba(234,179,8,.06); }
body.dark-mode .row-pending { background: rgba(234,179,8,.10); }
.row-pending:hover { filter: brightness(1.03); }

/* ---------- Team column colors ---------- */
/* Add class="team-blue" / class="team-red" to those <td> in script.js */
td.team-blue,
td.team-blue a, td.team-blue a:visited, td.team-blue a:active, td.team-blue a:hover {
  color: var(--team-blue-text);
}
td.team-red,
td.team-red  a, td.team-red  a:visited, td.team-red  a:active,  td.team-red  a:hover {
  color: var(--team-red-text);
}

/* ---------- Toggle switch ---------- */
.theme-toggle { display: flex; align-items: center; gap: 8px; }
.switch { position: relative; display: inline-block; width: 54px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--switch-bg); transition: .3s; border-radius: 30px;
}
.slider:before {
  position: absolute; content: ""; height: 24px; width: 24px; left: 3px; bottom: 3px;
  background: white; transition: .3s; border-radius: 50%;
}
input:checked + .slider {
  background: var(--switch-checked-bg, #2196F3);
}
input:checked + .slider:before {
  transform: translateX(24px); /* Move knob to the right, adjusted for 54px width */
}

/* ---------- Cards / KPI panels (Stats hub) ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px;
  transition: box-shadow .2s ease;
}

/* Subtle hover glow */
.stats-table:hover {
  box-shadow: 0 0 0 1px rgba(110,168,254,.25) inset;
}
.player-chart:hover {
  box-shadow: 0 0 0 1px rgba(110,168,254,.25) inset;
}

/* ---------- Player search box in header ---------- */
.player-search {
  margin-left: 12px; display: inline-flex; align-items: center;
}
.player-search input[type="text"] {
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  outline: none;
}
.player-search input[type="text"]::placeholder { opacity: .65; }

/* ---------- Player chart ---------- */
.player-chart {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px;
  background: var(--chart-bg);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
}
#elo-chart { width: 100%; height: 220px; display: block; }

/* ---------- Utility ---------- */
.hidden-id { display: none; }

/* Player header: ensure a single underline */
.player-bar { 
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 6px;
}

/* Kill the h2 underline when it's inside the player header row */
.player-bar h2 {
  border-bottom: none !important;
  margin: 0;           /* avoids a gap that can look like a 2nd line */
  padding-bottom: 0;
}

/* Small spacing so the chart doesn't visually fuse with the underline */
.player-chart { 
  margin-top: 10px; 
}

/* Two small columns inside the single "Team" cell on player page */
.twocol {
  display: flex;
  gap: 24px;
}
.twocol ul { margin: 0; padding-left: 18px; }

/* Player avatar next to name */
#player-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 10px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  object-fit: cover;
}

/* ---- Stats Hub layout ---- */
    .cards {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
      align-items: start;
    }
    .card {
      grid-column: span 12;
      border: 1px solid var(--card-border);
      background: var(--card-bg);
      border-radius: 12px;
      padding: 14px;
    }
    .card h2 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-color);
  font-size: 18px;
}
    .card table { width: 100%; border-collapse: collapse; }
    .card th, .card td { padding: 8px 10px; border-bottom: 1px solid var(--border, #2b2f3a); text-align: left; }
    .card tr:last-child td { border-bottom: 0; }
    .muted { opacity: .75 }
    .kpi-row {
      display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:12px;
    }
    .kpi {
      border:1px solid var(--card-border);
      border-radius:10px; padding:10px;
      background:var(--card-bg);
    }
    @media (min-width: 900px) {
      .span-6 { grid-column: span 6; }
      .span-4 { grid-column: span 4; }
      .span-8 { grid-column: span 8; }
    }

    /* search box in header */
    .player-search { margin-left: 12px; display: inline-flex; align-items: center; }
    .player-search input[type="text"]{
      padding: 6px 10px; border-radius: 8px;
      border: 1px solid var(--border, #2b2f3a);
      background: var(--panel, #0f1117); color: var(--text, #e5e7eb);
      min-width: 200px; outline: none;
    }
    html:not(.dark-mode) .player-search input[type="text"]{
      background: #fff; color:#111827; border-color:#e5e7eb;
    }
/* Search box theming (works on all pages) */
.player-search input {
  appearance: none;
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line, #2a2f3a);
  background: var(--surface, #f4f6f8);   /* light mode */
  color: var(--text, #0b0e14);
}

.dark-mode .player-search input {
  background: #111418;                  /* match your header bg */
  color: #e6edf3;
  border-color: #2b2f36;
}

.dark-mode .player-search input::placeholder { color: #9aa5b1; }

.player-search input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.35);
}

/* Stop Chrome autofill from painting it white */
.dark-mode .player-search input:-webkit-autofill {
  -webkit-text-fill-color: #e6edf3;
  -webkit-box-shadow: 0 0 0 1000px #111418 inset;
  caret-color: #e6edf3;
}
/* --- Stats Hub KPI row: force 4-up on desktop --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* four equal columns */
  gap: 16px;
  align-items: stretch;
}
.kpi {
  min-width: 0;     /* allow shrinking to fit 4 across */
  width: auto;      /* ignore any fixed widths */
}

/* Responsive fallbacks */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* (Optional) keep long values from blowing up the tile */
.kpi .kpi-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Accent line color (reuse across light/dark) */
:root { --accent-line: #6ea8fe; }           /* blue */
.dark-mode { --accent-line: #6ea8fe; }      /* same blue in dark */

/* KPI tiles: add the blue rule under the label */
.kpi { padding: 12px; }
.kpi .kpi-label {
  display: block;                 /* make the label span full width */
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--accent-line);
  font-weight: 600;
}

/* Optional: subtle hover pop */
.kpi:hover { box-shadow: 0 0 0 1px rgba(110,168,254,.25) inset; }

/* Stats Hub KPI values: centered + bold */
.kpi {
  display: flex;
  flex-direction: column;
}

.kpi .kpi-value {
  display: block;
  text-align: center;   /* centers 1, 8, —, blutopia (1) */
  font-weight: 700;     /* bold */
  font-size: 1.15rem;   /* bump size a touch; tweak if you want */
  margin-top: 6px;
}

.blue-text {
  color: #4da6ff;  /* light blue */
  font-weight: 500;
}

.red-text {
  color: #ff4d4d;  /* light red */
  font-weight: 500;
}

.blue-text { color: #3b82f6; }  /* Tailwind blue-500 */
.red-text  { color: #ef4444; }  /* Tailwind red-500 */

.self-player {
  font-weight: bold;
   /* or another highlight */
}

#player-name {
  font-size: 18x;
  font-weight: bold;
}

#player-elo-rank {
  font-size: 18px;
  font-weight: bold;
  color: #4da6ff; /* Discord blue */
  margin-top: 2px;
}

#player-record {
  font-size: 18px;
  font-weight: bold;
  margin-top: 2px;
}

.divider {
  border: none;
  border-top: 1px solid var(--panel-border);
  margin: 20px 0;
}

main section h2 {
  margin: 12px 0 10px;
  border-bottom: 2px solid var(--primary, #3b82f6);
  padding-bottom: 6px;
  font-size: 1.3em;
}
#map-players-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
#map-players-table th, #map-players-table td {
  padding: 6px 8px;
  text-align: center;
}
    /* ============ Player header bar ============ */
    .player-bar{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:16px;
      margin:12px 0 10px;
      border-bottom:2px solid var(--primary, #3b82f6);
      padding-bottom:6px;
      flex-wrap:wrap;            /* wrap on narrow screens */
    }
    .player-bar h2{
      margin:0;
      line-height:1.2;
    }
    .player-right{
      display:flex;
      align-items:center;
      gap:8px;
      margin-left:auto;
    }
    .player-right label{ white-space:nowrap; }
    /* hide but keep in DOM for JS */
    #player-id{ display:none; }

    /* Chart container */
    .chart-wrap{
      border:1px solid var(--border, #2b2f3a);
      border-radius:10px;
      padding:8px;
      background:var(--panel, #0f1117);
      margin:12px 0 18px;
    }
    #elo-chart{
      width:100%;     /* responsive */
      height:220px;   /* CSS height; JS sets pixel canvas for crispness */
      display:block;
    }

    @media (max-width:700px){
      .player-right{ margin-left:0; }
    }

/* Existing theme variables and base styles remain */

/* Stats Hub */
.stats-hub {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.stats-hub h1 {
  margin: 0 0 10px;
  font-size: 1.5em;
}
.powered-by {
  margin: 0 0 20px;
  font-style: italic;
  color: var(--text-color);
}

/* ---------- Stats Layout ---------- */
.stats-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;           /* keep KPI + table columns equal height */
}

/* ---------- KPI Column (left side of Stats Hub) ---------- */
.kpi-column {
  flex: 0 0 240px;                /* balanced width beside tables */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* distributes KPI cards evenly top-to-bottom */
  gap: 12px;                      /* moderate breathing space between boxes */
}

.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
  line-height: 1.45;
  min-height: unset;
  transition: box-shadow .2s ease;
}

.kpi-card2 {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.45;
  min-height: unset;
  transition: box-shadow .2s ease;
}

.kpi-card h3 {
  margin: 0 0 8px;
  font-size: 1.1em;
  color: var(--accent-color);
  border-bottom: 1px solid var(--accent-color);
  padding-bottom: 5px;
}

.kpi-card span {
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.35;
}

/* Subtle hover glow */
.kpi-card:hover {
  box-shadow: 0 0 0 1px rgba(110,168,254,.25) inset;
}

.kpi-card2:hover {
  box-shadow: 0 0 0 1px rgba(110,168,254,.25) inset;
}

/* --- Final top alignment polish --- */
.kpi-column {
  margin-top: 3px;   /* visually centers top KPI with table headers */
}

.stats-table th, .stats-table td {
  font-size: 11.5px;     /* matches tighter rhythm with KPI text */
}

.kpi-card h3 {
  font-size: 1.05em;     /* better proportional match with table headings */
  padding-bottom: 4px;
  margin-bottom: 6px;
}

/* Stats Column */
.stats-column {
  flex: 1; /* Takes remaining space */

}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  gap: 20px;
  margin-bottom: 20px;
}
.stats-table {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px;
}
.stats-table h2 {
  margin: 0 0 10px;
  font-size: 1.3em;
  border-bottom: 2px solid var(--primary, #3b82f6);
  padding-bottom: 6px;
}
.stats-table table {
  width: 100%;
  border-collapse: collapse;
}
.stats-table th, .stats-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--table-border);
}
.stats-table th {
  background: var(--table-header-bg);
}

/* Recent Gains */
.recent-gains {
  margin-top: 20px;
}
.recent-gains table {
  width: 100%;
  border-collapse: collapse;
}
.recent-gains th, .recent-gains td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--table-border);
}
.recent-gains th {
  background: var(--table-header-bg);
}

/* Responsive Design */
@media (min-width: 768px) {
  .stats-layout {
    flex-wrap: nowrap; /* Keep columns side-by-side */
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr; /* Two columns for tables */

  }
  .recent-gains {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .kpi-column {
    flex: 0 0 100%; /* Full width on mobile */
  }
  .stats-column {
    flex: 0 0 100%; /* Full width on mobile */
  }
}

/* --- Fix: prevent Map Winrates headers from wrapping --- */
#hub-map-winrates th {
  white-space: nowrap;        /* keeps "Win % (Blue)" on one line */
  font-size: 11px;            /* slightly smaller text for better fit */
  padding: 4px 6px;           /* tighter padding horizontally */
}

/* Optional: slightly expand table width so columns breathe */
#hub-map-winrates {
  table-layout: auto;
  min-width: 420px;           /* adjust if still tight */
}

/* --- Unify table header font size across Stats Hub --- */
.stats-table th {
  font-size: 11px;             /* match map winrates */
  white-space: nowrap;         /* prevent wrapping on long headers */
  padding: 4px 6px;            /* same tighter spacing */
  font-weight: 600;            /* consistent boldness */
  background: var(--table-header-bg);
}

/* Optional: make sure both tables align visually */
#hub-top-players th,
#hub-map-winrates th {
  text-align: center;
  vertical-align: middle;
}

/* --- KPI breakdown styling --- */
.kpi-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font-size: 0.95em;
}
.kpi-breakdown div {
  display: flex;
  justify-content: space-between;
}
.kpi-breakdown span {
  font-weight: 700;
  color: var(--accent-color);
}

/* ---------- Leaderboard Toggle Button ---------- */
.btn-toggle {
  background-color: var(--panel-bg);
  color: var(--text-color);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  transition: all 0.2s ease;
}

.btn-toggle:hover {
  background-color: var(--table-header-bg);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.btn-toggle.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 0 8px rgba(77, 166, 255, 0.35);
}

/* Light-mode tweaks */
html.light-mode .btn-toggle {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--panel-border);
}
html.light-mode .btn-toggle:hover {
  background-color: var(--table-header-bg);
  color: var(--accent-color);
  border-color: var(--accent-color);
}
html.light-mode .btn-toggle.active {
  background-color: var(--accent-color);
  color: #fff;
}

/* ---------- Compact scroll tables for player page ---------- */
.table-scroll {
  max-height: 260px;           /* fits about 10 rows */
  overflow-y: overlay;         /* modern thin scrollbar */
  overflow-x: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: var(--panel-bg);
}

/* Keep the header row fixed while scrolling */
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  z-index: 2;
  text-align: left;
}

/* Compact row and font styling */
#recent-matches-table,
#per-map-table {
  font-size: 11.5px;
  line-height: 1.3;
}

#recent-matches-table th,
#per-map-table th {
  padding: 5px 6px;
}

#recent-matches-table td,
#per-map-table td {
  padding: 4px 6px;
}

/* Sleeker scrollbar styling */
.table-scroll::-webkit-scrollbar {
  width: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* Optional polish: fade-out gradient at bottom of scroll areas */
.table-scroll {
  position: relative;
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}

/* Smooth scrollbar fade to invisible for overlay scrollbars */
.table-scroll::-webkit-scrollbar {
  width: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  transition: background 0.3s ease;
}
.table-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
}


/* ---------- Compact table styling for player page ---------- */
#recent-matches-table,
#per-map-table {
  font-size: 11.5px;            /* slightly smaller text */
  line-height: 1.3;             /* tighter vertical spacing */
}

#recent-matches-table th,
#per-map-table th {
  padding: 5px 6px;             /* tighter header cells */
}

#recent-matches-table td,
#per-map-table td {
  padding: 4px 6px;             /* tighter body cells */
}

#recent-matches-table tr,
#per-map-table tr {
  height: 24px;                 /* compact row height */
}

/* =========================================================
   Unified Table Look (Matches index.html aesthetic — solid rows)
   ========================================================= */

/* Base table containers */
.table-scroll {
  overflow-y: overlay;
  overflow-x: hidden;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: none;
  position: relative;
}

/* Player page height (~10 rows) */
body[data-page="player"] .table-scroll {
  max-height: 260px;
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}

/* Matches page height (~20 rows) */
body[data-page="matches"] .table-scroll {
  max-height: 400px;
  mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
}

/* Sticky header (match Stats Hub) */
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--table-header-bg);
  z-index: 2;
  border-bottom: 1px solid var(--table-border);
  color: var(--text-color);
  text-align: left;
}

/* Table body — solid background */
#matches-table, #recent-matches-table, #per-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.3;
  background: var(--card-bg);
}

/* Headers and cells */
#matches-table th, #recent-matches-table th, #per-map-table th {
  padding: 6px 8px;
  font-weight: 600;
}

#matches-table td, #recent-matches-table td, #per-map-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--table-border);
}

/* No alternating backgrounds — all rows use solid base */
#matches-table tbody tr,
#recent-matches-table tbody tr,
#per-map-table tbody tr {
  background: var(--card-bg);
}

/* Hover highlight (subtle blue tint only) */
#matches-table tbody tr:hover,
#recent-matches-table tbody tr:hover,
#per-map-table tbody tr:hover {
  background: rgba(77,166,255,0.10);
  transition: background-color .15s linear;
}

/* Sleek scrollbar (minimalistic) */
.table-scroll::-webkit-scrollbar {
  width: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  transition: background 0.3s ease;
}
.table-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
}

/* =========================================================
   Accent underline for Stats Hub headers (match player/matches)
   ========================================================= */
.stats-table h2,
.kpi-card h3,
.stats-hub h2 {
  position: relative;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-color);
  margin-bottom: 10px;
}

/* Optional: tiny spacing consistency tweak */
.stats-table {
  padding-top: 4px;
}

.mirv {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: space-between;
}

.mirv .card.half {
  flex: 1 1 calc(50% - 0.75rem);
  min-width: 420px;
  box-shadow: 0 0 0 1px rgba(110,168,254,.25) inset;
}