/* =========================================================
   Admin panel (in-dashboard)
   Everything here is scoped under #panel-admin / .nav-item-admin /
   .admin-* so it can never leak into or clash with the rest of the
   site's styling. Reuses the existing design tokens from style.css.
   ========================================================= */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.admin-stat-card { text-align: start; }
.admin-stat-num { font-family: var(--font-mono, monospace); font-size: 28px; font-weight: 700; color: var(--gold-dark); line-height: 1; }
.admin-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 6px; }

.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
@media (max-width: 720px) { .admin-two-col { grid-template-columns: 1fr; } }

.admin-section-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 26px 0 12px; }

.admin-breakdown-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--hairline); font-size: 13px; color: var(--ink); }
.admin-breakdown-row:last-child { border-bottom: none; }

.admin-search-row { display: flex; gap: 10px; margin-bottom: 14px; }
.admin-search-row .input { flex: 1; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: start; color: var(--muted); font-weight: 600; font-size: 11.5px; padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink); }
.admin-table tr:hover td { background: var(--cream); }

.admin-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.admin-pill.ok { background: rgba(27,156,134,0.12); color: var(--emerald); }
.admin-pill.banned { background: rgba(239,68,68,0.10); color: var(--coral); }

.admin-row-actions { white-space: nowrap; display: flex; gap: 6px; }
.admin-row-actions .btn { padding: 5px 10px; font-size: 12px; }