/* user_management_html — the screen's own rules.
 *
 * Each rule is scoped `:where(.um-container)`, which adds zero specificity, so no rule can
 * change which one wins.
 *
 * The ROOT rule stays a bare class. `.um-container` IS the form root (the
 * template's single top-level node), so a scoped copy of it
 * would need the root to be its own descendant and would never match.
 *
 * `.loading-spinner` is NOT here: `theme/assets/spoke/spoke_shared.css` owns
 * it, because `main` declares it and three leaves consume it.
 *
 * No designer gate is needed. Nothing in this block hides content until
 * JavaScript runs, so the canvas renders the same skeleton the browser does.
 *
 * No `@keyframes`, no `url()`, no `@font-face`, and no `.px-*` selector, so
 * this head link ties with nothing: no other
 * spoke template declares a `.um-` class, and the dependency's runtime theme
 * injection names none of them.
 */

.um-container { max-width: 900px; margin: 0 auto; }
:where(.um-container) .um-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
:where(.um-container) .um-title { font-size: 22px; font-weight: 600; color: var(--px-accent-fg); }
:where(.um-container) .um-count { font-size: 13px; color: var(--px-text-secondary); }

/* Add user form */
:where(.um-container) .um-add-form {
  background: var(--px-bg-card); border: 1px solid var(--px-border); border-radius: 8px;
  padding: 16px 20px; margin-bottom: 16px;
  box-shadow: var(--px-shadow);
}
:where(.um-container) .um-add-form-title { font-size: 14px; font-weight: 600; color: var(--px-text-primary); margin-bottom: 12px; }
:where(.um-container) .um-add-form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
:where(.um-container) .um-add-field { display: flex; flex-direction: column; gap: 3px; }
:where(.um-container) .um-add-field label { font-size: 11px; font-weight: 600; color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
:where(.um-container) .um-add-field input, :where(.um-container) .um-add-field select {
  padding: 8px 12px; border: 1px solid var(--px-border-strong); border-radius: 4px; font-size: 14px;
  font-family: inherit; background: var(--px-bg-input); color: var(--px-text-primary);
}
:where(.um-container) .um-add-field input::placeholder { color: var(--px-text-muted); }
:where(.um-container) .um-add-field input:focus-visible, :where(.um-container) .um-add-field select:focus-visible { outline: 2px solid var(--px-focus-ring); outline-offset: 2px; }
:where(.um-container) .um-add-btn {
  background: var(--px-accent); color: var(--px-accent-on); border: none; padding: 8px 20px;
  border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
:where(.um-container) .um-add-btn:hover:not(:disabled) { background: var(--px-accent-deep); }
:where(.um-container) .um-add-btn:disabled {
  background: var(--px-bg-disabled); color: var(--px-text-disabled);
  box-shadow: inset 0 0 0 1px var(--px-border-disabled); cursor: not-allowed;
}

/* Users table */
:where(.um-container) .um-table-wrap { overflow-x: auto; }
:where(.um-container) .um-table { width: 100%; border-collapse: collapse; background: var(--px-bg-card); color: var(--px-text-primary); border: 1px solid var(--px-border); border-radius: 8px; overflow: hidden; }
:where(.um-container) .um-table th {
  text-align: left; padding: 10px 14px; background: var(--px-bg-elevated);
  font-size: 12px; font-weight: 600; color: var(--px-text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 2px solid var(--px-border);
}
:where(.um-container) .um-table td { padding: 10px 14px; border-bottom: 1px solid var(--px-border-subtle); font-size: 14px; }
:where(.um-container) .um-table tr:last-child td { border-bottom: none; }

:where(.um-container) .um-role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
}
:where(.um-container) .um-role-admin { background: var(--px-accent-soft); color: var(--px-accent-fg); }
:where(.um-container) .um-role-user { background: var(--px-bg-elevated); color: var(--px-text-secondary); }

:where(.um-container) .um-role-select {
  padding: 4px 8px; border: 1px solid var(--px-border-strong); border-radius: 4px;
  font-size: 13px; background: var(--px-bg-input); color: var(--px-text-primary);
}
:where(.um-container) .um-remove-btn {
  background: none; border: 1px solid var(--px-danger); color: var(--px-danger-ink);
  padding: 4px 12px; border-radius: 4px; font-size: 12px;
  cursor: pointer; font-weight: 500;
}
:where(.um-container) .um-remove-btn:hover { background: var(--px-danger-wash); }
/* No row opacity: the role picker and Remove stay live on disabled accounts. */
:where(.um-container) .um-row-deactivated td { color: var(--px-text-secondary); }

:where(.um-container) .um-empty { text-align: center; padding: 40px 20px; color: var(--px-text-muted); font-size: 15px; }
:where(.um-container) .um-readonly-note { font-size: 13px; color: var(--px-text-muted); font-style: italic; margin-bottom: 16px; }

:where(.um-container) .um-email-annot { font-size: 11px; }
:where(.um-container) .um-annot-muted { color: var(--px-text-muted); }
:where(.um-container) .um-annot-warn { color: var(--px-danger-ink); }

@media (max-width: 768px) {
  :where(.um-container) .um-add-form-row { flex-direction: column; }
  :where(.um-container) .um-add-field input { width: 100%; }
  :where(.um-container) .um-add-field input, :where(.um-container) .um-add-field select { font-size: 16px; }
  :where(.um-container) .um-table { font-size: 13px; }
  :where(.um-container) .um-table th, :where(.um-container) .um-table td { padding: 8px 10px; }
  /* Each annotation takes its own line so the email cell stays legible
     at 360px instead of pushing the row into the scroll wrapper. */
  :where(.um-container) .um-email-annot { display: block; }
  :where(.um-container) .um-role-select { min-height: 44px; font-size: 16px; padding: 8px 10px; }
  :where(.um-container) .um-remove-btn { min-height: 44px; font-size: 16px; padding: 8px 14px; }
}