/*
 * user-management.css — what only the user-management screen looks like.
 *
 * The heading, the fields and the stacked form are the base stylesheet's.
 * This is the user rows and the small gap above the add-user form.
 */

.user-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-end: 24px;
}

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
}

.user-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.user-row__name { font-weight: 500; overflow-wrap: anywhere; }

.user-row__email {
  color: var(--text-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.user-row__role { flex: none; inline-size: auto; min-block-size: 40px; }

.user-add-form { padding-block-start: 4px; }

/* `tally:businesses` — take an account out of this business. */
.user-row__remove { flex: none; inline-size: auto; padding-inline: 12px; color: var(--neg); min-block-size: 40px; }
.user-row__body { flex: 1 1 auto; }