/* Admin console styles (Phase 4). Tokens only — no hardcoded hex here.
 * The base shell (topbar, sidebar, cards, tables, buttons, notices) comes
 * from app.css + app-shell.css; this file adds only admin-specific bits:
 * tabs, badges, and the support thread. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-btn {
  background: var(--surface-inset);
  color: var(--tx);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 1rem;
}

.tab-btn.active {
  background: var(--ink);
  color: var(--surface-raised);
  border-color: var(--ink);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--border-default);
  background: var(--surface-inset);
  color: var(--tx);
}

.badge-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.thread {
  margin-top: 16px;
  border-top: 1px solid var(--border-default);
  padding-top: 16px;
}

.msg {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--surface-raised);
}

.msg.admin {
  background: var(--surface-inset);
}

.msg .tm {
  font-size: 0.8125rem;
  color: var(--tx-3);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.stat {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.stat strong {
  display: block;
  font-size: 24px;
}

.stat span {
  color: var(--tx-3);
  font-size: 0.8125rem;
}