/* ==========================================================================
   Shared styles for all auth pages
   (passkey_login, password_login, username, sso, password_reset,
    new_oauth_mfa, login_totp, new_invited_user)
   ========================================================================== */

/* ---------- Layout ---------- */

.auth-card {
  align-self: stretch;
  padding: 48px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.auth-card--center {
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.auth-form {
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

/* ---------- Alerts ---------- */

.auth-alert {
  align-self: stretch;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  font-family: Inter, sans-serif;
}

.auth-alert--error {
  background: #FED7D7;
  color: #C53030;
  font-weight: 500;
}

.auth-alert--info {
  background: #BEE3F8;
  color: #2B6CB0;
}

.auth-alert--neutral {
  color: #173044;
}

/* ---------- Form fields ---------- */

.auth-field {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.auth-label-wrap {
  border-radius: 2px;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.auth-label {
  color: #173044;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  line-height: 14px;
  word-wrap: break-word;
  margin: 0;
}

.auth-input {
  align-self: stretch;
  width: 100%;
  padding: 8px 12px;
  background: white;
  border: none;
  border-radius: 10px;
  outline: 1px solid #E2E8F0;
  outline-offset: -1px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  line-height: 20px;
  color: #173044;
  box-sizing: border-box;
  transition: outline-color 0.15s ease;
}

.auth-input:hover:not(:disabled):not(:read-only):not(:focus) {
  outline-color: #CBD5E0;
}

.auth-input:focus:not(:disabled):not(:read-only) {
  outline-color: #90CDF4;
}

.auth-input--readonly {
  background: #F7FAFC;
  color: #4A5568;
  cursor: default;
}

.auth-input--has-toggle {
  padding-right: 40px;
}

/* Input row with side link (e.g. email + "Not You?") */
.auth-input-row {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-input-row .auth-input {
  flex: 1;
  width: auto;
}

/* Wrapper for password field + toggle button */
.auth-input-wrap {
  position: relative;
  width: 100%;
}

/* ---------- Password toggle ---------- */

.auth-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #718096;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ---------- Field messages ---------- */

.auth-field-error {
  color: #C53030;
  font-size: 12px;
  font-family: Inter, sans-serif;
  margin-top: 4px;
}

.auth-field-error--block {
  color: #C53030;
  margin-top: 8px;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
}

.auth-field-hint {
  color: #718096;
  font-size: 12px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  margin-top: 2px;
}

/* ---------- Password strength bar ---------- */

.auth-strength {
  align-self: stretch;
}

.auth-strength-bar {
  display: flex;
  gap: 4px;
}

.auth-strength-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
}

.auth-strength-label {
  text-align: right;
  font-size: 12px;
  font-family: Inter, sans-serif;
  margin-top: 4px;

  .strength-very-weak { color: #718096; }
  .strength-weak { color: #e74c3c; }
  .strength-fair { color: #f1c40f; }
  .strength-strong { color: #66CC99; }
  .strength-very-strong { color: #26A65B; }
}

/* ---------- Dividers ---------- */

.auth-divider {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.auth-divider--flush {
  margin: 0;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background: #E2E8F0;
}

.auth-divider-text {
  color: #718096;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
}

/* ---------- Links ---------- */

.auth-link {
  color: #0066CC;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.auth-link--not-you {
  white-space: nowrap;
}

.auth-link--learn-more {
  color: #2095F3;
  font-weight: 600;
  text-decoration: underline;
  line-height: 14px;
}

/* ---------- Text ---------- */

.auth-text {
  color: #173044;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  margin: 0;
}

.auth-text--center {
  align-self: stretch;
  text-align: center;
}

.auth-text--success {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 24px;
}

/* ---------- Footer ---------- */

.auth-signup-footer {
  align-self: stretch;
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #E2E8F0;
}

.auth-signup-footer span {
  color: #718096;
  font-size: 14px;
  font-family: Inter, sans-serif;
}

/* ---------- Success icon ---------- */

.auth-success-icon {
  width: 64px;
  height: 64px;
  background: #C6F6D5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-success-icon i {
  font-size: 28px;
  color: #38A169;
}

/* ---------- Checkbox (Remember me) ---------- */

.auth-checkbox-wrap {
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.auth-checkbox-label {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
  cursor: pointer;
  margin: 0;
}

.auth-checkbox-label input[type="checkbox"] {
  display: none;
}

.auth-checkbox-box {
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 6px;
  border: 1px solid #CBD5E0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-checkbox-box i {
  color: #0066CC;
  font-size: 14px;
}

.auth-checkbox-text {
  color: #718096;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  line-height: 16px;
  word-wrap: break-word;
}

/* ---------- Passkey promo box ---------- */

.auth-passkey-promo {
  align-self: stretch;
  padding: 16px;
  background: #FAFAFA;
  border-radius: 12px;
  outline: 1px solid #EAEAED;
  outline-offset: -1px;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.auth-passkey-promo-content {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.auth-passkey-promo-title {
  color: #173044;
  font-size: 20px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 24px;
}

.auth-passkey-promo-desc {
  color: #173044;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  line-height: 20px;
}

.auth-passkey-promo-icon {
  width: 48px;
  height: 48px;
  background: #EDF7FE;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Passkey icon in buttons ---------- */

.auth-passkey-img {
  height: 20px;
  vertical-align: middle;
}

.auth-passkey-img--white {
  filter: brightness(0) invert(1);
}

/* ---------- Email sent ---------- */

.auth-email-sent {
  align-self: stretch;
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.auth-email-sent-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- Throttle / countdown ---------- */

.auth-throttle-msg {
  align-self: stretch;
  padding: 10px;
  border-radius: 6px;
  color: #C53030;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
}

/* ---------- MFA specific ---------- */

.auth-cooldown-text {
  text-align: right;
  color: #b3b3b3;
}

.auth-resend-link {
  color: #3182ce;
  text-decoration: underline;
  cursor: pointer;
}

.auth-resend-wrap {
  margin-top: 0.75rem;
}

.sms-fallback-link {
  color: #2095F3;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  text-decoration: none;
}

.sms-fallback-link:hover {
  text-decoration: underline;
}

/* OTP input hover */
.otp-wrapper .otp-input:hover {
  border-color: #CBD5E0;
}

/* Authenticator image center */
.align-center {
  text-align: center;

  img {
    display: block;
    margin: 0 auto;
  }
}

/* ---------- Utility ---------- */

.auth-btn--full-width {
  width: 100%;
}

.auth-countdown-bold {
  font-weight: 700;
}

.auth-google-sso-wrap {
  display: inline-block;

  img {
    height: 40px;
    width: auto;
    max-width: 100%;
  }
}

.auth-passkey-promo-img {
  width: 28px;
  height: 28px;
}

.auth-text--center-spaced {
  align-self: stretch;
  text-align: center;
  margin-top: 4px;
}

/* ---------- Buttons ---------- */

.auth-btn {
  align-self: stretch;
  height: 38px;
  min-height: 36px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
  cursor: pointer;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  line-height: 14px;
  text-decoration: none;
  transition: background-color 0.15s ease, outline-color 0.15s ease, filter 0.1s ease;
}

a.auth-btn,
a.auth-btn:link,
a.auth-btn:visited,
a.auth-btn:hover,
a.auth-btn:focus,
a.auth-btn:active {
  text-decoration: none !important;
}

a.auth-btn-primary,
a.auth-btn-primary:link,
a.auth-btn-primary:visited,
a.auth-btn-primary:hover,
a.auth-btn-primary:focus,
a.auth-btn-primary:active {
  color: white !important;
}

a.auth-btn-outline,
a.auth-btn-outline:link,
a.auth-btn-outline:visited,
a.auth-btn-outline:hover,
a.auth-btn-outline:focus,
a.auth-btn-outline:active {
  color: #2095F3 !important;
}

.auth-btn:active:not(:disabled) {
  filter: brightness(0.85);
}

.auth-btn span {
  color: inherit;
}

/* Primary blue button (#2095F3) */
.auth-btn-primary {
  background: #2095F3;
  outline: 1px solid #2095F3;
  outline-offset: -1px;
  color: white;
}

.auth-btn-primary:hover:not(:disabled) {
  background: #1c84d9;
  outline-color: #1c84d9;
}

.auth-btn-primary:disabled {
  background: #8FCAF9;
  outline-color: #8FCAF9;
  cursor: not-allowed;
}

/* Passkey secondary button (lighter blue #64B5F6) */
.auth-btn-passkey {
  background-color: #64B5F6;
  outline: 1px solid #64B5F6;
  outline-offset: -1px;
  color: white;
}

.auth-btn-passkey:hover:not(:disabled) {
  background-color: #42A5F5;
  outline-color: #42A5F5;
}

.auth-btn-passkey:disabled {
  background-color: #BBDEFB;
  outline-color: #BBDEFB;
  cursor: not-allowed;
}

/* Reset link button (darker blue #0066CC) */
.auth-btn-reset {
  background: #0066CC;
  outline: 1px solid #0066CC;
  outline-offset: -1px;
  color: white;
}

.auth-btn-reset:hover:not(:disabled) {
  background: #0055AA;
  outline-color: #0055AA;
}

.auth-btn-reset:disabled {
  background: #8FCAF9;
  outline-color: #8FCAF9;
  cursor: not-allowed;
}

/* Outline button (white bg, blue border) */
.auth-btn-outline {
  background: white;
  outline: 1px solid #2095F3;
  outline-offset: -1px;
  color: #2095F3;
}

.auth-btn-outline:hover:not(:disabled) {
  background: #EDF7FE;
}

/* ---------- Invited user page (from invited_user.css) ---------- */

.invite-container {
  width: 480px;
  margin: 0 auto;
}

.invite-heading {
  line-height: 134%;
}

.form-panel {
  padding: 40px;
  border-radius: 12px;
  background: #fff;

  .input-label {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
  }

  .screen0 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .screen1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;

    .screen1-form-row {
      width: 100%;
    }

    div.iti {
      width: 100%;
    }

    color: #173044;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
  }


  .form-input {
    position: relative;
    width: 100%;

    input {
      width: 100%;
    }

    .auth-password-toggle {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      color: #718096;
      font-size: 16px;
      line-height: 1;
      display: flex;
      align-items: center;
    }
  }

  .name-row {
    display: flex;
    width: 100%;
    height: 58.5px;
    align-items: flex-start;
    gap: 12px;

    .input-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      flex: 1 0 0;
    }
  }

  .form-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    .input-group {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  }

  .form-button {
    display: flex;
    height: 38px;
    min-height: 36px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.1s ease;

    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px;

    &:active:not(:disabled) {
      filter: brightness(0.85);
    }

    &.next-button {
      border: 1px solid #2095f3;
      background-color: #2095f3;

      &:disabled {
        border: 1px solid #8fcaf9;
        background: #8fcaf9;
        cursor: not-allowed;
      }

      &:hover:not(:disabled) {
        background-color: #1c84d9;
        border-color: #1c84d9;
      }

      color: #fff;
    }

    &.back-button {
      border-radius: 10px;
      border: 1px solid #173044;
      background: #fff;

      &:hover:not(:disabled) {
        background-color: #f7fafc;
      }

      color: #173044;
    }
  }

  .resend-code {
    text-align: right;
    margin-top: 8px;
    color: #2095f3;
    font-size: 14px;
    cursor: pointer;

    &.disabled {
      color: #a0aec0;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}


/* Non-nested fallbacks for .form-panel (invited user page) */
.form-panel .form-button {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.1s ease;
}

.form-panel .form-button:active:not(:disabled) {
  filter: brightness(0.85);
}

.form-panel .form-button.next-button {
  border: 1px solid #2095f3;
  background-color: #2095f3;
  color: #fff;
}

.form-panel .form-button.next-button:disabled {
  border: 1px solid #8fcaf9;
  background: #8fcaf9;
  cursor: not-allowed;
}

.form-panel .form-button.next-button:hover:not(:disabled) {
  background-color: #1c84d9;
  border-color: #1c84d9;
}

.form-panel .form-button.back-button {
  border: 1px solid #173044;
  background: #fff;
  color: #173044;
}

.form-panel .form-button.back-button:hover:not(:disabled) {
  background-color: #f7fafc;
}

/* Form panel inputs - flat selectors (no nesting) */
.form-panel input {
  align-self: stretch;
  width: 100%;
  padding: 8px 12px;
  background: white;
  border: none;
  border-radius: 10px;
  outline: 1px solid #e2e8f0;
  outline-offset: -1px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  line-height: 20px;
  color: #173044;
  box-sizing: border-box;
  transition: outline-color 0.15s ease;
}

.form-panel input:disabled {
  background: #f5f7fa;
}

.form-panel input:hover:not(:disabled):not(:read-only):not(:focus) {
  outline-color: #CBD5E0;
}

.form-panel input:focus:not(:disabled):not(:read-only) {
  outline-color: #90CDF4;
}

.form-text {
  color: #173044;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
}

.errorMsg {
  align-self: stretch;
  padding: 10px;
  background: #fed7d7;
  border-radius: 6px;
  color: #c53030;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  margin-bottom: 16px;
}