/* ===== FORCED "MUST CHANGE PASSWORD" MODAL ===== */

.mcp-modal-content {
  border: none;
  border-radius: 18px;
  padding: 32px 30px 28px;
  position: relative;
}

.mcp-modal-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #EBFAF1, #d3f3e1);
  color: #27AE60; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}

.mcp-modal-title {
  font-size: 1.2rem; font-weight: 700; color: #1e293b;
  text-align: center; margin-bottom: 6px;
}

.mcp-modal-subtitle {
  font-size: 0.85rem; color: #6c757d;
  text-align: center; margin-bottom: 24px;
  line-height: 1.4;
}

/* Password field with an eye-toggle button docked inside the input */
.mcp-password-field { position: relative; }
.mcp-password-field .form-control { padding-right: 40px; }
/* Suppress the browser's built-in reveal/clear icon (Edge/IE) so it doesn't double up with our custom toggle */
.mcp-password-field input::-ms-reveal,
.mcp-password-field input::-ms-clear { display: none; }
.mcp-toggle-visibility {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: none; color: #9aa5a0;
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.mcp-toggle-visibility:hover { background: #f0f2f1; color: #555; }

.mcp-submit-btn {
  width: 100%; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
}
.mcp-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Generic, non-field-specific error (e.g. "Current password does not match"
   when it isn't attributed to one input, or an unexpected server error). */
.mcp-form-error { text-align: center; margin-bottom: 4px; }
.mcp-form-error:empty { display: none; }

/* ===== SUCCESS PANEL — shown in place of the form once the password change
   request succeeds. Same .wiz-flash-icon/.wiz-flash-message look used for
   every other "created/updated successfully" toast (site.css), duplicated
   here since the Login page renders standalone (Layout = null) and doesn't
   load site.css. ===== */
.wiz-flash-icon { font-size: 2.2rem; color: #27AE60; margin-bottom: 12px; text-align: center; }
.wiz-flash-message { margin: 0; font-size: 0.88rem; color: #1e293b; font-weight: 500; text-align: center; }
/* Narrower than the form panel's dialog width — matches .wiz-flash-card's own size
   (site.css: width 320px, max-width 92vw) so the success state is pixel-for-pixel the
   same card used for every other "created/deleted successfully" toast in the app. */
.mcp-modal-dialog-compact { width: 320px; max-width: 92vw; }

/* ===== FORGOT PASSWORD / OTP FLOW =====
   Sits inside .login-form-box on the Forgot Password page, so it reuses
   login.css's .wiz-title, .login-subtitle and .form-control-custom — only
   the step-switching and OTP-specific pieces live here. */

.fp-step-panel { display: none; }
.fp-step-panel.active { display: block; }

.fp-back-link {
  display: inline-flex; align-items: center; gap: 6px; color: #6c757d;
  font-size: 0.85rem; text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s;
}
.fp-back-link:hover { color: #27AE60; }

.fp-btn-row { display: flex; gap: 10px; margin-top: 6px; }
.fp-btn-row > * { flex: 1; }

.fp-btn-primary {
  padding: 12px; border: none; border-radius: 8px;
  background: linear-gradient(90deg, #38c863 0%, #27AE60 100%); color: #fff;
  font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.fp-btn-primary:hover:not(:disabled) { background: linear-gradient(90deg, #30b157 0%, #1e8449 100%); transform: translateY(-1px); color: #fff; }
.fp-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.fp-btn-full { width: 100%; }

.fp-btn-secondary {
  padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #333;
  font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: border-color 0.15s, color 0.15s;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.fp-btn-secondary:hover { border-color: #27AE60; color: #27AE60; }

.fp-sent-to { font-size: 0.85rem; color: #1e293b; margin-bottom: 1.25rem; }
.fp-sent-to strong { color: #27AE60; }

.fp-otp-row { display: flex; gap: 10px; margin-bottom: 0.4rem; }
.fp-otp-box {
  width: 100%; aspect-ratio: 1; text-align: center; font-size: 1.3rem; font-weight: 700;
  border: 1px solid #ddd; border-radius: 8px; outline: none; transition: border-color 0.15s; font-family: inherit;
}
.fp-otp-box:focus { border-color: #27AE60; box-shadow: 0 0 0 0.15rem rgba(39,174,96,0.2); }

.fp-otp-meta {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 0.8rem; color: #6c757d; margin-bottom: 1.25rem;
}
.fp-otp-meta .fp-timer { font-weight: 700; color: #1e293b; }
.fp-otp-meta .fp-timer.expiring { color: #dc3545; }

.fp-resend-link {
  border: none; background: none; padding: 0; font-size: 0.8rem; font-weight: 700;
  color: #27AE60; cursor: pointer;
}
.fp-resend-link:hover { text-decoration: underline; }
.fp-resend-link:disabled { color: #6c757d; cursor: not-allowed; text-decoration: none; }

.fp-success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #EBFAF1; color: #27AE60;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1.5rem;
}

/* Success/failure result modal — same classes as User Management's #resultModal
   (usermanagement.css), duplicated here since this page doesn't load that file. */
.confirm-modal-content { border: none; border-radius: 16px; padding: 30px 26px 26px; position: relative; }
.confirm-modal-close { position: absolute; top: 16px; right: 16px; }
.confirm-modal-icon {
  width: 56px; height: 56px; border-radius: 50%; font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.confirm-modal-icon-danger { background: #fde8e8; color: #dc3545; }
.confirm-modal-icon-success { background: #e6f7ec; color: #146c43; }
.confirm-modal-title { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.confirm-modal-text { font-size: 0.85rem; color: #6c757d; margin-bottom: 22px; }