/* ===== users_management_html (HTML form) =====
   The Users Management shell's own rules, moved out of the template's body
   style block, which the Anvil
   server strips on a converted form. Loaded eagerly from anvil.yaml
   native_deps.head_html, which is also what styles the form on the Anvil
   designer canvas. Every declaration is carried across in its original order,
   with none added, removed or reworded.

   THE ROOT RULE, .um-screen-root, is BARE because it is the form root, and it
   carries display: block and nothing else — no height, no flex, no overflow.
   .um-dashboard carries .px-screen-root, whose height: 100% and overflow-y:
   auto live in theme/assets/theme.css. Without this wrapper .um-dashboard
   would become a direct flex item of main's
   definite-height scrolling column, the percentage would bind and the scroll
   port would move off main's mount onto the screen — which also disarms main's
   modal background-scroll lock, because that rule names the mount div
   and not this screen, so the page
   would scroll behind the Add User dialog. The screen could not fix that inside
   .um-dashboard's own rule either: a screen must not re-declare any of the
   eight shared declarations, so height and
   overflow-y stay on the shared class and the wrapper is what neutralises them.
   The single declaration is written out rather than left to the browser default
   so a later reader can see the rule is deliberately empty of sizing.
   Same answer as nms_html and owings_management_html.

   SCOPING. .um-dashboard keeps its BARE rule, because the four accent custom
   properties must land on the element that had them — every child of this shell
   reads --accent through inheritance, and pxShowOverlay copies them off the
   computed style of an overlay before it portals it. Its dark restatement stays
   bare and unwrapped for the same reason: its subject is that element. Every
   other rule is scoped :where(.um-dashboard), which adds zero specificity and so
   cannot change which rule wins.

   ORDER AUDIT (guide: a head link loses a specificity tie on document
   order — against theme.css's own link, against the dependency theme
   the toolkit appends to the head at startup, and against any surviving form
   style block). One family ties and is promoted:

   - The two .px-page-title font-size overrides inside the media blocks. They
     were (0,1,0) against theme.css's .px-page-title { font-size: 1.75rem },
     also (0,1,0), and won only because a template style block sits later on the
     page than a head link (theme/assets/theme.css says so in its own
     words). They are written as .um-dashboard .px-page-title, a real second
     class rather than :where(), so each wins on specificity instead. Without
     that the page title would stay 1.75rem on a phone.
   - .um-header-actions .px-btn is already (0,2,0) against the dependency's
     .px-btn, so it keeps winning and is scoped normally.
   - Every other selector here is a private .um-* name that appears nowhere else
     in this app or in the dependency: .um-content, .um-header, .um-title-group,
     .um-title-row, .um-count-badge, .um-header-actions, .um-cards-container,
     .um-search-wrap, .um-search-input, .um-empty-state. No tie to lose.

   THE TWO CARDS-MOUNT RULES ARE NEW, and they are what keeps the card grid a
   grid. .um-cards-container is display: grid and the cards are its grid ITEMS
   today; after conversion the slot's runtime nodes sit between the grid and each
   card root. A box that computes display: contents generates nothing, so the
   card roots stay the grid items — the reference chain traced for the analytics
   shell is mount div > <anvil-dropzone> > child root, with the dropzone at
   display: contents (theme/assets/analytics/dashboards_html.css). These
   two rules state that for both node shapes the runtime can present, so the
   result is the same either way: without them a runtime that boxes either node
   collapses the responsive grid to one column and handle_search's display: none
   leaves empty grid cells. Designer cost, accepted rather than gated: the cards
   drop band may flatten on the canvas. Staff do not drag user cards in.

   .um-modal-mount carries no rule. The dialog it holds is a fixed-position
   .px-modal-overlay, so the mount is a zero-height out-of-flow box exactly as
   the bare slot div it replaces was; the class exists so the next reader can
   find the mount by name.

   DESIGNER GATE: none, and that is a decision rather than an omission.
   The only hiding rule here is .um-empty-state { display: none }
   with .um-empty-state.um-visible { display: block } — a state class, not a
   script gate. The designer canvas loads this head-linked asset, so the canvas
   shows what first paint shows. Nothing else waits for JavaScript.

   No url(), no @font-face, no :root, no html rule and no @keyframes, so there is
   nothing to rewrite or prefix. No .themed-scrollbar rule: that name is the
   dependency's. */

/* The form root. See the header: display: block and nothing else, on purpose. */
.um-screen-root {
  display: block;
}

.um-dashboard {
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-subtle: rgba(99,102,241,0.12);
  --px-loading-accent: #6366f1;
}

[data-theme="dark"] .um-dashboard {
  --accent: #818cf8;
  --accent-hover: #6366f1;
  --accent-subtle: rgba(129,140,248,0.15);
}

:where(.um-dashboard) .um-content {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:where(.um-dashboard) .um-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

:where(.um-dashboard) .um-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.um-dashboard) .um-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.um-dashboard) .um-count-badge {
  font-family: var(--px-mono);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 2px 10px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

:where(.um-dashboard) .um-header-actions {
  display: flex;
  gap: 10px;
}

:where(.um-dashboard) .um-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

/* The cards mount's slot nodes generate no box, so each card root goes on being
   a grid item of .um-cards-container. See the header. */
:where(.um-dashboard) .um-cards-mount > anvil-slot {
  display: contents;
}

:where(.um-dashboard) .um-cards-mount anvil-dropzone {
  display: contents;
}

:where(.um-dashboard) .um-search-wrap {
  max-width: 400px;
}

:where(.um-dashboard) .um-search-input {
  width: 100%;
  font-family: var(--px-font);
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-elevated);
  color: var(--px-text-primary);
  outline: none;
  transition: border-color 0.15s;
}

:where(.um-dashboard) .um-search-input:focus {
  border-color: var(--accent);
}

:where(.um-dashboard) .um-search-input::placeholder {
  color: var(--px-text-muted);
}

:where(.um-dashboard) .um-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--px-text-muted);
  font-family: var(--px-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: none;
}

:where(.um-dashboard) .um-empty-state.um-visible {
  display: block;
}

@media (max-width: 900px) {
  :where(.um-dashboard) .um-content { padding: 16px; gap: 16px; }
  /* A real second class, not :where(): a head link loses this tie on
     document order. See the header. */
  .um-dashboard .px-page-title { font-size: 1.5rem; }
  :where(.um-dashboard) .um-cards-container { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :where(.um-dashboard) .um-content { padding: 12px; gap: 12px; }
  .um-dashboard .px-page-title { font-size: 1.25rem; }
  :where(.um-dashboard) .um-header { flex-direction: column; gap: 12px; }
  :where(.um-dashboard) .um-header-actions { width: 100%; }
  :where(.um-dashboard) .um-header-actions .px-btn { flex: 1; justify-content: center; }
}