/* ===== add_user_popup (HTML form, scoped) =====
   Loaded from anvil.yaml native_deps.head_html.

   The root is <div class="ch-add-user-container ch-add-user-popup-root">. Every rule scopes on
   the private class at zero specificity, so no rule changes weight; the root rule is bare on it.
   .ch-form-group ties with theme.css at the same value, so link order does not matter. */

.ch-add-user-popup-root {
  padding: var(--ch-space-md);
  font-family: var(--ch-font-primary);
  min-width: 320px;
}

:where(.ch-add-user-popup-root) .ch-form-group {
  margin-bottom: var(--ch-space-md);
}

:where(.ch-add-user-popup-root) .ch-form-group:last-of-type {
  margin-bottom: var(--ch-space-lg);
}

:where(.ch-add-user-popup-root) .ch-form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ch-text-primary);
  margin-bottom: 6px;
}

:where(.ch-add-user-popup-root) .ch-form-input,
:where(.ch-add-user-popup-root) .ch-form-select {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--ch-font-primary);
  color: var(--ch-text-primary);
  background: var(--ch-bg-input);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  outline: none;
  transition: border-color var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
  box-sizing: border-box;
  min-height: 44px;
}

html[data-theme='light'] :where(.ch-add-user-popup-root) input.ch-form-input[type='email'] {
  color-scheme: light;
}

html[data-theme='dark'] :where(.ch-add-user-popup-root) input.ch-form-input[type='email'] {
  color-scheme: dark;
}

:where(.ch-add-user-popup-root) input.ch-form-input[type='email'] {
  -webkit-text-fill-color: var(--ch-text-primary);
  caret-color: var(--ch-text-primary);
}

:where(.ch-add-user-popup-root) .ch-form-input:focus,
:where(.ch-add-user-popup-root) .ch-form-select:focus {
  border-color: var(--ch-border-focus);
  box-shadow: 0 0 0 3px var(--ch-focus-shadow, rgba(246, 139, 31, 0.15));
}

/* Shown ONLY when the admin has no live home to add somebody to. The
   text is the estate's deactivation sentence, handed in by Python; the
   element is empty (and display:none) at every other time. */
:where(.ch-add-user-popup-root) .ch-disabled-tooltip {
  display: none;
  font-size: 12px;
  color: var(--ch-text-muted);
  margin-top: 8px;
}

:where(.ch-add-user-popup-root) .ch-form-input::placeholder {
  color: var(--ch-text-muted);
}

:where(.ch-add-user-popup-root) input.ch-form-input[type='email']:-webkit-autofill,
:where(.ch-add-user-popup-root) input.ch-form-input[type='email']:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ch-text-primary);
  caret-color: var(--ch-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--ch-bg-input) inset;
  box-shadow: 0 0 0 1000px var(--ch-bg-input) inset;
  border: 1px solid var(--ch-border);
}

:where(.ch-add-user-popup-root) input.ch-form-input[type='email']:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ch-text-primary);
  caret-color: var(--ch-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--ch-bg-input) inset, 0 0 0 3px var(--ch-focus-shadow, rgba(246, 139, 31, 0.15));
  box-shadow: 0 0 0 1000px var(--ch-bg-input) inset, 0 0 0 3px var(--ch-focus-shadow, rgba(246, 139, 31, 0.15));
  border: 1px solid var(--ch-border-focus);
}

:where(.ch-add-user-popup-root) input.ch-form-input[type='email']:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--ch-bg-input) inset;
  -moz-text-fill-color: var(--ch-text-primary);
  caret-color: var(--ch-text-primary);
}

:where(.ch-add-user-popup-root) .ch-form-input.invalid {
  border-color: var(--ch-danger);
}

/* Why the server refused an email change. Empty and hidden otherwise. */
:where(.ch-add-user-popup-root) .ch-edit-refusal {
  display: none;
  font-size: 13px;
  color: var(--ch-danger);
  margin-bottom: var(--ch-space-md);
}

:where(.ch-add-user-popup-root) .ch-button-row {
  display: flex;
  gap: var(--ch-space-sm);
  justify-content: flex-end;
}

:where(.ch-add-user-popup-root) .ch-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--ch-font-primary);
  border: none;
  border-radius: var(--ch-radius-md);
  cursor: pointer;
  transition: opacity var(--ch-transition-fast), transform var(--ch-transition-fast), background-color var(--ch-transition-fast), color var(--ch-transition-fast), border-color var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
  min-height: 44px;
}

:where(.ch-add-user-popup-root) .ch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.ch-add-user-popup-root) .ch-btn-primary {
  background: var(--ch-accent-primary);
  color: var(--ch-text-inverse);
}

:where(.ch-add-user-popup-root) .ch-btn-primary:hover:not(:disabled) {
  background: var(--ch-accent-primary-hover);
}

:where(.ch-add-user-popup-root) .ch-btn-secondary {
  background: var(--ch-bg-secondary);
  color: var(--ch-text-primary);
  border: 1px solid var(--ch-border);
}

:where(.ch-add-user-popup-root) .ch-btn-secondary:hover:not(:disabled) {
  background: var(--ch-border);
}

@media (max-width: 480px) {
  .ch-add-user-popup-root {
    min-width: auto;
  }

  :where(.ch-add-user-popup-root) .ch-button-row {
    flex-direction: column;
  }

  :where(.ch-add-user-popup-root) .ch-btn {
    width: 100%;
  }
}