/* NOTE: :root moved to css/common.css — remove any :root / html / body global overrides here */

/* Scoped styles for stats page */

/* Optional page variables (fall back to common.css variables) */
.stats-page{ 
  --panel: rgba(255,255,255,0.03);
  --text: var(--text);
  --muted: var(--muted);
  --border: rgba(255,255,255,0.04);
  --primary: var(--accent);
  --danger: #ef4444;
  --shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Box sizing only once (kept safe) */
*{ box-sizing:border-box; }

/* Keep global html/body alone in common.css; scope layout to .stats-page */
.stats-page .topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.stats-page .brand{ display:flex; gap:10px; align-items:center }
.stats-page .topbar h1{ font-size:18px; margin:0 }
.stats-page .actions{ display:flex; gap:8px; align-items:center }

/* Use common button styles, only tweak if necessary (prefer common.css) */
.stats-page .btn, .stats-page a.btn, .stats-page button.btn{
  /* inherit most from common.css */
}

/* Main container */
.stats-page .wrap{ max-width:1200px; margin:18px auto; padding:0 16px }

.stats-page .top-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.stats-page .kpi{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; min-width:160px; }
.stats-page .kpi .title{ color:var(--muted); font-size:12px; }
.stats-page .kpi .value{ font-size:20px; font-weight:700; margin-top:6px; }

.stats-page .grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.stats-page .card{ background:var(--card); border-radius:10px; border:1px solid var(--panel); padding:12px; }
.stats-page .card h3{ margin:0 0 8px; font-size:16px }

.stats-page .table{
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.stats-page .table .row{ display:grid; grid-template-columns: 1fr 140px; border-bottom:1px solid var(--border); }
.stats-page .table .row:last-child{ border-bottom:0 }
.stats-page .table .cell{ padding:10px }
.stats-page .table .head{ background:transparent; font-weight:600 }
.stats-page .table .num{ text-align:right; font-variant-numeric: tabular-nums }

.stats-page .empty{ color:var(--muted); text-align:center; padding:24px; }
.stats-page .empty a{ color:var(--primary); text-decoration:none }

/* Keep accessibility focus styles handled in common.css */