/* Admin page — Users & roles.
   Card + field + button styles come from styles/components.css. */

.data-table select { font-size: 0.88rem; padding: 6px 10px; }

.admin-card { margin-bottom: var(--space-4); }
.admin-card__sub { margin: -4px 0 var(--space-3); color: var(--color-muted); font-size: 0.9rem; }

/* Permission checkbox grid, reused in "create admin" and each team row. */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
}
.perm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
}
.perm input { width: 16px; height: 16px; flex: none; accent-color: var(--color-primary); cursor: pointer; }

/* Team list */
.team { display: flex; flex-direction: column; gap: var(--space-2); }
.team-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}
.team-row.is-disabled { opacity: 0.6; }
.team-row__id { display: flex; flex-direction: column; gap: 2px; min-width: 160px; flex: 1; }
.team-row__id strong { font-size: 0.94rem; }
.team-row__id span { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-muted); }
.team-row .perm-grid { flex: 2; min-width: 220px; }
.team-row__actions { display: flex; gap: 8px; }
.team-row__remove { color: var(--status-out); }
.team-row__remove:hover { background: color-mix(in srgb, var(--status-out) 10%, transparent); }
.team-row__badge {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--status-healthy);
  background: color-mix(in srgb, var(--status-healthy) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-healthy) 30%, transparent);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

/* Recent activity (audit log) */
.activity { display: flex; flex-direction: column; gap: 6px; }
.activity__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  font-size: 0.88rem;
}
.activity__who { font-weight: 600; }
.activity__what { color: var(--color-muted); }
.activity__when { margin-left: auto; font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-faint); }
.activity__pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.activity__pager:empty { display: none; }
.activity__pager-info { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }