/* ============================================
   Two-factor authentication — challenge / enrollment / backup codes (Phase 2)
   Loaded globally via the :app glob (no view-level stylesheet_link_tag —
   Turbo full-reload gotcha). Design-system tokens only — no hardcoded colors.
   ============================================ */

.two-factor-intro {
  color: var(--muted);
  margin-bottom: 20px;
}

/* Centered logo header on the standalone challenge/enroll cards */
.two-factor-logo {
  text-align: center;
  margin-bottom: 8px;
}

/* Centered secondary link under the form (cancel / continue) */
.two-factor-footer-link {
  text-align: center;
  margin-top: 16px;
}

/* The 6-digit code input — monospace, spaced, large enough to read a phone code */
.two-factor-code-input {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 6px;
  text-align: center;
}

/* Enrollment QR + manual-entry secret */
.two-factor-qr {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.two-factor-qr svg {
  width: 200px;
  height: 200px;
}

.two-factor-secret {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  word-break: break-all;
  color: var(--ink);
}

.two-factor-step {
  margin-bottom: 20px;
}

.two-factor-step-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}

/* Backup codes reveal — shown exactly once, like the API-key plaintext */
.two-factor-backup-codes {
  border: 1px solid var(--green);
  background: var(--green-tint);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 24px;
}

.two-factor-backup-codes-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}

.two-factor-backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.two-factor-backup-code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  text-align: center;
  color: var(--ink);
}

.two-factor-backup-codes-warning {
  color: var(--amber);
  font-size: 12px;
  margin-top: 8px;
}

/* Method picker (D14) — TOTP recommended vs email */
.two-factor-method-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.two-factor-method-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface);
}

.two-factor-method-radio {
  margin-top: 3px;
}

.two-factor-method-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.two-factor-method-name {
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.two-factor-method-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-tint);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.two-factor-method-note {
  font-size: 13px;
  color: var(--muted);
}

/* Resend-code button row on the email challenge/enrollment forms */
.two-factor-resend-form {
  text-align: center;
  margin-top: 8px;
}

/* --- Welcome / account-claim flow (chunk C) --- */

/* Inline "(6 characters minimum)" hint beside the password label */
.welcome-hint-inline {
  margin-left: 6px;
}

/* Stacked action buttons on the one-time optional-mode 2FA offer */
.welcome-offer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

/* "Skip for now" row on the offer interstitial */
.welcome-offer-skip {
  text-align: center;
  margin-top: 4px;
}

/* New-user form: "Send welcome email" checkbox group */
.form-checkbox-group {
  margin-bottom: 16px;
}

.welcome-invite-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Hidden via the welcome-invite-toggle Stimulus controller (checked = user
   sets their own password, so the admin password fields collapse away). */
.is-hidden {
  display: none;
}

/* Users-index invite indicator (D24 pending / claimed states) */
.badge-warning {
  background: var(--amber-tint);
  color: var(--amber);
}

.badge-success {
  background: var(--green-tint);
  color: var(--green);
}

/* Deactivated user (is_active = false) — Users index status badge. */
.badge-danger {
  background: var(--red-tint);
  color: var(--red);
}

/* Dim the whole row of a deactivated user so it reads as disabled at a glance. */
.user-row-inactive td {
  opacity: 0.55;
}

/* Keep the deactivated badge itself at full strength inside a dimmed row. */
.user-row-inactive td .badge-danger {
  opacity: 1;
}

.invite-status-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Self-service 2FA management on User Settings: a row of buttons (regenerate /
   change method / turn off), each routing to its own code-prompt confirm page. */
.two-factor-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The code-prompt confirm page card (matches the Settings card width). */
.two-factor-confirm-card {
  max-width: 560px;
}