/* user_management_html — the screen's own rules, moved out of its template.
 *
 * Every declaration is byte-for-byte what `client_code/user_management_html/
 * form_template.yaml:6-82` held. The only change is the prelude: 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 after
 * conversion (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
 * the move from a template block to a 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); }
:where(.um-container) .um-count { font-size: 13px; color: #666; }

/* Add user form */
:where(.um-container) .um-add-form {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 16px 20px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
:where(.um-container) .um-add-form-title { font-size: 14px; font-weight: 600; color: #333; 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: #888; 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 #ccc; border-radius: 4px; font-size: 14px;
  font-family: inherit;
}
:where(.um-container) .um-add-field input:focus, :where(.um-container) .um-add-field select:focus { border-color: var(--px-accent); outline: none; }
:where(.um-container) .um-add-btn {
  background: var(--px-accent); color: #fff; 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: #0d1642; }
:where(.um-container) .um-add-btn:disabled { opacity: 0.5; 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: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
:where(.um-container) .um-table th {
  text-align: left; padding: 10px 14px; background: #f5f7fa;
  font-size: 12px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 2px solid #e0e0e0;
}
:where(.um-container) .um-table td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; 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: #e8eaf6; color: var(--px-accent); }
:where(.um-container) .um-role-user { background: #f5f5f5; color: #666; }

:where(.um-container) .um-role-select {
  padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 13px; background: #fff;
}
:where(.um-container) .um-remove-btn {
  background: none; border: 1px solid #c62828; color: #c62828;
  padding: 4px 12px; border-radius: 4px; font-size: 12px;
  cursor: pointer; font-weight: 500;
}
:where(.um-container) .um-remove-btn:hover { background: #ffebee; }
:where(.um-container) .um-row-deactivated { opacity: 0.5; }

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

:where(.um-container) .um-email-annot { font-size: 11px; }
:where(.um-container) .um-annot-muted { color: #888; }
:where(.um-container) .um-annot-warn { color: #c62828; }

@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; }
}