/* um_add_user_modal_html — the add-user dialog's own rules, kept here because
 * the server strips a template's <style> block.
 *
 * SCOPED ON THE OVERLAY'S PRIVATE CLASS, NEVER ON THE FORM ROOT (blueprint
 * D6). pxShowOverlay moves .px-modal-overlay into #px-modal-portal, so
 * .um-add-root stops being an ancestor of everything styled here the moment
 * the dialog opens; a :where(.um-add-root) scope would stop matching exactly
 * when the rules are needed. .um-add-modal travels with the subtree, so it is
 * the scope. :where() adds zero specificity, so every .um-add-* rule keeps the
 * weight it has today.
 *
 * NO RULE FOR .um-add-root. It is an invisible wrapper around a
 * position: fixed overlay (the dependency's .px-modal-overlay), so it is a
 * zero-height out-of-flow box.
 *
 * Three @media rules and two hidden-state rules are written as COMPOUNDS
 * rather than bare classes. A head link is earlier on the page than both
 * theme.css and the dependency's runtime-injected theme, so it loses a tie on
 * specificity. The second class is what makes them win on specificity
 * instead.
 *
 * No designer gate: nothing here is hidden until JavaScript runs. On the
 * canvas the dialog renders open, because the dependency's .px-modal-overlay
 * rule is injected from Python at runtime and the designer runs no Python.
 */

/* Was the inline max-width / width pair on the .px-modal div. Compound,
   because a bare .um-add-dialog would tie the dependency's .px-modal rule and
   lose on order, where the inline style beat everything. */
.px-modal.um-add-dialog {
  max-width: 540px;
  width: 100%;
}

/* Was the inline flex-wrap on the footer. The dependency already declares
   flex-wrap: wrap on .px-modal-footer, so this is a no-op today; carried
   across anyway, because a conversion is not a cleanup. */
.px-modal-footer.um-add-footer {
  flex-wrap: wrap;
}

:where(.um-add-modal) .um-add-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:where(.um-add-modal) .um-add-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:where(.um-add-modal) .um-add-field-label {
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--px-text-primary);
}

:where(.um-add-modal) .um-add-field-input {
  font-family: var(--px-font);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

:where(.um-add-modal) .um-add-field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(.um-add-modal) .um-add-field-input::placeholder {
  color: var(--px-text-muted);
}

:where(.um-add-modal) .um-add-section-title {
  font-family: var(--px-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--px-text-primary);
  margin-bottom: 4px;
}

:where(.um-add-modal) .um-add-permissions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* (0,2,0) against theme.css's .px-checkbox-wrap at (0,1,0), so it wins on
   specificity whatever the document order. */
:where(.um-add-modal) .um-add-permissions-container .px-checkbox-wrap {
  font-size: 12px;
  background: var(--px-bg-elevated);
  padding: 6px 12px;
  border-radius: var(--px-radius-sm);
  border: 1px solid var(--px-border);
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(.um-add-modal) .um-add-permissions-container .px-checkbox-wrap:hover {
  border-color: var(--accent);
}

:where(.um-add-modal) .um-add-expiry-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.um-add-modal) .um-add-expiry-help {
  font-family: var(--px-mono);
  font-size: 0.7rem;
  color: var(--px-text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  /* All three take .um-add-modal as a real second class, not a :where()
     scope: the first two tie the dependency's own .px-modal-body and
     .px-modal-footer rules at (0,1,0) and would lose on order, and the
     third moves with its parent. */
  .um-add-modal .px-modal-body {
    padding: 16px;
  }

  .um-add-modal .px-modal-footer {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .um-add-modal .px-modal-footer .px-btn {
    width: 100%;
    justify-content: center;
  }
}