/* Manage (admin console) — page-specific styles. All selectors scoped to .pg-admin. */

/* ---- overview stats grid ---- */
.pg-admin .adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.pg-admin .adm-stats .stat { padding: 14px 16px; }
.pg-admin .adm-stats .stat-value { font-size: 23px; margin-top: 2px; }

.pg-admin .adm-cols { align-items: start; }
.pg-admin .adm-cols > .card { min-width: 0; } /* let cards shrink; tables scroll inside */
.pg-admin .adm-cols .table td { white-space: nowrap; }
.pg-admin .list-row .badge { text-transform: capitalize; }

/* ---- users toolbar ---- */
.pg-admin .adm-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pg-admin .adm-search { position: relative; flex: 1; min-width: 210px; max-width: 360px; }
.pg-admin .adm-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.pg-admin .adm-search input { padding-left: 36px; }

/* ---- users table cells ---- */
.pg-admin .adm-user { display: flex; gap: 10px; align-items: center; min-width: 200px; }
.pg-admin .adm-user .avatar { width: 32px; height: 32px; font-size: 11.5px; }
.pg-admin .adm-name { font-weight: 700; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pg-admin .adm-name .badge { font-size: 10px; padding: 2px 8px; text-transform: capitalize; }
.pg-admin .adm-email { font-size: 12px; color: var(--muted); word-break: break-all; }
.pg-admin .adm-joined { white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.pg-admin .adm-actions { white-space: nowrap; text-align: right; }
.pg-admin .adm-actions .btn + .btn { margin-left: 6px; }

/* ---- avatar colour swatches (edit modal) ---- */
.pg-admin .adm-swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.pg-admin .adm-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0; outline-offset: 2px;
}
.pg-admin .adm-swatch.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2.5px #fff inset;
}

/* ---- mobile ---- */
@media (max-width: 760px) {
  .pg-admin .adm-stats { grid-template-columns: 1fr 1fr; }
  .pg-admin .adm-search { max-width: none; }
  .pg-admin .adm-joined { font-size: 12px; }
}