/* ===== um_user_card_html (HTML form) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what
   styles the form on the Anvil designer canvas. Every rule is carried across
   from the form's old body style block,
   in its original order, with no
   declaration added, removed or reworded.

   SCOPING. Two groups, and the split is not cosmetic.

   1. The card. Every rule is scoped :where(.um-card-wrapper), which adds zero
      specificity and so cannot change which rule wins. The root rule itself
      stays bare and first, because its subject IS the root.

   2. The delete-confirm dialog. Its rules are scoped on .um-delete-confirm,
      the overlay's own private class, NOT on the card root. pxShowOverlay moves
      a .px-modal-overlay out of the form subtree into #px-modal-portal
      (px-shared-dependencies-anvil/client_code/px_theme/_px_shared_js.py),
      so a rule scoped on an ancestor inside the card stops matching the moment
      the dialog opens.

   This form is NOT a screen. It is a grid item in the shell's cards mount, so
   the root rule gets no position: relative, no flex: 1 0 auto and no
   min-height; it keeps exactly the one declaration it had.

   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). Nothing in this file ties:

   - The four .um-card-permissions .px-checkbox-wrap rules all lead with a
     private class, so they sit at (0,2,0) or better against theme.css's
     .px-checkbox-wrap at (0,1,0) and keep winning. :where() adds nothing, so
     the margin is unchanged.
   - .px-modal.um-delete-confirm-dialog replaces an inline style attribute that
     beat everything. It is written as a COMPOUND on purpose: a bare
     .um-delete-confirm-dialog at (0,1,0) would tie the dependency's .px-modal
     (_px_theme_css.py) and lose on order, and the dialog would stop being
     400px wide.
   - Every other selector here is a private .um-* name with no competitor
     anywhere in this app or in the dependency.

   DESIGNER GATE: none, and that is a decision rather than an omission.
   This form hides nothing until JavaScript runs. The dialog is
   invisible on the canvas for the same reason it was before conversion: the
   opacity and pointer-events that hide it are the dependency theme's, injected
   by Python the designer does not run.

   No url(), no @font-face, no :root, no html rule and no @keyframes, so there
   is nothing to rewrite or prefix. */

.um-card-wrapper {
  width: 100%;
}

:where(.um-card-wrapper) .um-card {
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  border: 1px solid var(--px-border);
  box-shadow: var(--px-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.2s ease;
}

:where(.um-card-wrapper) .um-card:hover {
  box-shadow: var(--px-shadow-md);
}

:where(.um-card-wrapper) .um-card.um-disabled {
  background: var(--px-bg-elevated);
  opacity: 0.8;
}

:where(.um-card-wrapper) .um-card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.um-card-wrapper) .um-card-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(.um-card-wrapper) .um-card-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.um-card-wrapper) .um-card-label {
  font-family: var(--px-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--px-text-muted);
}

:where(.um-card-wrapper) .um-card-input {
  font-family: var(--px-font);
  font-size: 0.9rem;
  padding: 8px 12px;
  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-card-wrapper) .um-card-input:focus:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(.um-card-wrapper) .um-card-input:disabled {
  background: var(--px-bg-elevated);
  cursor: not-allowed;
  opacity: 0.7;
}

:where(.um-card-wrapper) .um-card-meta {
  font-family: var(--px-mono);
  font-size: 0.7rem;
  color: var(--px-text-muted);
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid var(--px-border);
  border-bottom: 1px solid var(--px-border);
}

:where(.um-card-wrapper) .um-card-meta-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

:where(.um-card-wrapper) .um-expiry-date {
  color: var(--px-danger);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 6px;
}

:where(.um-card-wrapper) .um-permanent-access {
  color: var(--px-success);
  font-weight: 600;
}

:where(.um-card-wrapper) .um-card-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:where(.um-card-wrapper) .um-card-permissions .px-checkbox-wrap {
  font-size: 12px;
  background: var(--px-bg-elevated);
  padding: 4px 10px;
  border-radius: var(--px-radius-sm);
  border: 1px solid var(--px-border);
  transition: border-color 0.15s ease;
}

:where(.um-card-wrapper) .um-card-permissions .px-checkbox-wrap:hover {
  border-color: var(--accent);
}

:where(.um-card-wrapper) .um-card-permissions .px-checkbox-wrap input:disabled {
  cursor: not-allowed;
}

:where(.um-card-wrapper) .um-card-permissions .px-checkbox-wrap input:disabled + span {
  opacity: 0.6;
}

:where(.um-card-wrapper) .um-card-caps-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:where(.um-card-wrapper) .um-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

:where(.um-card-wrapper) .um-card-delete-btn {
  align-self: flex-end;
}

:where(.um-card-wrapper) .um-card-disabled-reason {
  font-family: var(--px-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--px-text-muted);
  text-align: center;
  padding: 8px;
  background: var(--px-bg-elevated);
  border-radius: var(--px-radius-sm);
}

/* The dialog. Scoped on the overlay's own class, and the dialog width written
   as a compound - both reasons are in the ORDER AUDIT at the top of this file. */

.px-modal.um-delete-confirm-dialog {
  max-width: 400px;
  width: 100%;
}

:where(.um-delete-confirm) .um-delete-confirm-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--px-text-secondary);
}