/* ===========================================================
   COMPONENTS.CSS - FULL OTP MODAL STYLING (Updated & Integrated)
============================================================ */

/* ==============================
   GLOBAL MODAL
============================== */

/* Modal Overlay */
#global-modal.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

#global-modal.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Container */
#global-modal .modal {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  max-width: 480px;
  width: 90%;
  padding: 2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform: translateY(-40px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  box-sizing: border-box;
  text-align: center;
}

#global-modal.modal-overlay.active .modal {
  transform: translateY(0);
  opacity: 1;
}

/* Modal Title */
#global-modal .modal h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  text-align: center; /* Ensure title stays centered */
}

/* Modal Body */
#global-modal .modal-body {
  font-family: "Inter", sans-serif;
  font-size: 1rem; /*~16px, slightly bigger */
  font-weight: 400;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Modal Actions (Buttons) */
#global-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: nowrap;
  align-items: center;
}

/* Base Modal Button */
#global-modal .modal-btn {
  min-width: 80px;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  box-sizing: border-box;
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

#global-modal .modal-btn:hover {
  transform: translateY(-1px);
}

/* Confirm Button - Green pill style */
#global-modal .modal-btn.confirm,
#modal-submit-btn {
  background-color: #90a863;
  color: #fff;
  border: none;
}

#global-modal .modal-btn.confirm:hover,
#modal-submit-btn:hover {
  background-color: #7a9053;
}

/* Cancel Button */
#global-modal .modal-btn.cancel {
  background-color: #f3c677;
  color: #222;
  border: 1px solid #e0bc5c;
}

#global-modal .modal-btn.cancel:hover {
  background-color: #e0bc5c;
}

/* Close Button (X) */
#global-modal .modal-close {
  all: unset;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  color: #444;
  cursor: pointer;
  z-index: 9999;
}

#global-modal .modal-close:hover {
  color: #000;
  transform: scale(1.1);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* ===========================================================
   DANGER MODAL VARIANT
   --------------------------------
   Used for destructive actions such as Delete / Archive
=========================================================== */

/* Slightly wider modal for critical confirmations */
#global-modal .modal.danger {
  max-width: 520px;
}

/* Destructive action title emphasis */
#global-modal .modal h2.danger {
  color: #7a1c21;
}

/* ===========================================================
   OTP COMPONENT STYLES
=========================================================== */

/* OTP Email Notification Text */
.otp-header-text {
  margin-bottom: 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center; /* Center like modal title */
  line-height: 1.4;
  width: 100%;
}

/* Masked Email Highlight */
.masked-email {
  font-weight: lighter;
  color: #222;
}

/* Container for OTP boxes */
.otp-box-container {
  display: flex;
  justify-content: center; /* Center OTP boxes horizontally */
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  width: 100%;
}

/* Individual OTP input */
.otp-box {
  width: 3rem;
  height: 3rem;
  text-align: center;
  font-size: 1.3rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border 0.2s, background 0.2s;
}

/* Valid input */
.otp-box.valid {
  border-color: #58a86a;
  background: #eaf7ec;
}

/* Invalid input */
.otp-box.invalid {
  border-color: #d9534f;
  background: #fae2e3;
}

/* Timer aligned under OTP boxes */
#otp-timer {
  font-size: 0.875rem;
  color: #555;
  margin: 0.5rem 0 1rem 0; /* extra space before footer */
  text-align: center;
  width: 100%;
}

/* ===========================================================
   OTP FOOTER - RESEND + VERIFY BUTTON ALIGNMENT
=========================================================== */

/* Footer layout: center both the resend text and link */
.otp-footer {
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Align vertically */
  width: 100%;
  margin-top: 15px; /* Optional: to add some space between footer and other elements */
}

/* Center alignment for the resend text and link */
.otp-footer .otp-left {
  display: flex;
  align-items: center; /* Align text and link vertically */
  gap: 0.5rem; /* Space between "Didn't get the code?" and "Resend OTP" */
  font-size: 10px; /* Optional: adjust the font size for a nicer look */
}

/* Resend link */
#resend-otp-link {
  color: #7a1c21;
  font-weight: 200;
  text-decoration: none;
}

#resend-otp-link:hover {
  text-decoration: underline;
}

/* Bring Verify OTP button slightly up (~3%) */
#modal-submit-btn {
  margin-top: -2%;
}

/* ======================================
   EDIT USER DB MODAL FORM INPUT STYLES
========================================= */

/* -----------------------------
   Modal Form Layout
------------------------------- */
.modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 12px 16px; /* row-gap 12px, column-gap 16px */
  max-width: 480px;
  width: 100%;
}

/* -----------------------------
   Form cell (label + input)
------------------------------- */
.form-cell {
  display: flex;
  flex-direction: column;
}

/* -----------------------------
   Labels
------------------------------- */
.form-cell label {
  font-weight: 500;
  font-size: 0.78rem;
  color: #969494;
  margin-bottom: 4px;
  line-height: 1.4;
  text-align: left; /* Ensure left alignment */
}

/* -----------------------------
   Inputs & Selects
------------------------------- */
.form-cell input,
.form-cell select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color: #fafafa;
  font-size: 0.8rem;
  box-sizing: border-box;
  transition: border 0.25s, box-shadow 0.25s;
}

.form-cell input:focus,
.form-cell select:focus {
  border-color: #90a863;
  box-shadow: 0 0 0 2px rgba(144, 168, 99, 0.2);
  outline: none;
}

/* -----------------------------
   Error messages
------------------------------- */
.input-error {
  display: none;
  color: #d9534f;
  font-size: 0.75rem;
  margin-top: 2px;
}

.modal-form.show-errors .form-cell input:invalid + .input-error,
.modal-form.show-errors .form-cell select:invalid + .input-error {
  display: block;
}

/* Required field asterisk */
.required {
  color: #d9534f;
  margin-left: 2px;
}

/* -----------------------------
   Password Toggle
------------------------------- */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  flex: 1;
  padding-right: 35px; /* space for icon */
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 20px;
  height: 20px;
}

/* -----------------------------
   Status Colors
------------------------------- */
#edit-status option[value="active"] {
  background-color: #eaf7ec;
  color: #3e6b35;
}
#edit-status option[value="suspended"] {
  background-color: #fff4e5;
  color: #a67c2d;
}
#edit-status option[value="pending"] {
  background-color: #f0f0f0;
  color: #555;
}

/* ---------------------------------
   Delete User Modal – Text Refinement
---------------------------------- */
.delete-modal-text {
  font-size: 0.9rem; /* slightly smaller than default */
  line-height: 1.5;
}

.delete-modal-text p {
  margin: 0.6rem 0;
}

/* Intent colors */
.text-danger {
  color: #c0392b;
}

.text-archive {
  color: #6b8e6e;
}

/* Visual breathing space */
.delete-modal-text .spacer {
  margin: 12px 0;
}

/* -----------------------------
   Responsive
------------------------------- */
@media (max-width: 500px) {
  .modal-form {
    grid-template-columns: 1fr; /* stack fields */
    gap: 8px 8px;
  }
  .form-cell label {
    font-size: 0.75rem;
    margin-bottom: 2px;
  }
}

/* ===========================================================
   RESPONSIVE ADJUSTMENTS FOR SMALL SCREENS
=========================================================== */
@media (max-width: 480px) {
  /* Stack footer vertically for small screens */
  .otp-footer {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  #modal-submit-btn {
    margin-top: 0; /* Remove negative margin in stacked layout */
  }
}

@media (max-width: 400px) {
  .otp-footer {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ===========================================================
   FOOTNOTE: MODAL STYLING CHALLENGE & SOLUTION
   Earlier, the global modal system faced visual instability issues.
   The confirm, cancel, and support buttons occasionally reverted
   their colors due to JavaScript class timing, and the modal itself
   sometimes misaligned or flickered when opening. The close button
   could shift or lose its proper top-right placement, and flex
   spacing along with fade transitions were not always reliable.

   The current solution addresses these problems by enforcing stable
   styling with !important for buttons and critical elements, ensuring
   consistent colors, borders, and hover effects. The modal container
   is now always center-aligned with fixed shadow and border radius,
   while the overlay and flex layout are explicitly controlled. The
   close button’s position is secured, and fade/slide transitions work
   predictably. Overall, these adjustments make the modal visually
   consistent and resistant to JS reflows or DOM timing quirks.
=========================================================== */