/* ===========================================================
   GoGoDashboard — Reset Password Stylesheet
   -----------------------------------------------------------
   File: reset-password.css
   Loaded on: reset-password.html

   Purpose:
     Provides page-specific styling for the password reset flow.
     Complements landing.css (shared auth layout) with additional
     tone and spacing adjustments.

   Sections:
     1. Layout + Typography
     2. Form Enhancements
     3. Status Message
     4. Animations (fade-in, transitions)
   =========================================================== */


/* ===========================================================
   === SECTION 1: Layout + Typography
   =========================================================== */

body {
  background: #f9fafb;
  color: #111827;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif;
  margin: 0;
  padding: 0;
}

/* Smooth fade for form reveal (controlled via JS hidden/visible) */
#app.hidden {
  opacity: 0;
  visibility: hidden;
}

#app.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, transform 0.3s ease;
  transform: translateY(0);
}

/* Page headline */
.form-box h1 {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  color: #0f172a;
}

/* Supporting paragraph */
.form-box p {
  color: #4b5563;
  margin-top: 0;
  margin-bottom: 1.25rem;
  line-height: 1.45;
}


/* ===========================================================
   === SECTION 2: Form Enhancements
   =========================================================== */

/* Adjust spacing of the input and buttons specifically for reset form */
.input-group {
  margin-bottom: 1rem;
}

#resetEmail {
  text-align: left;
  font-size: 15px;
}

.button-group {
  margin-top: 1rem;
}

/* Primary button emphasis for clarity of action */
#reset-btn.btn.primary {
  background-color: #2563eb;
  transition: background 0.25s ease, transform 0.15s ease;
}

#reset-btn.btn.primary:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
}

/* Ghost secondary button consistency */
.btn.ghost {
  border: 1px solid #e5e7eb;
}


/* ===========================================================
   === SECTION 3: Status Message
   =========================================================== */

/* Inline feedback for success/error messages */
#status.message {
  font-size: 0.95rem;
  text-align: center;
  margin-top: 1rem;
  min-height: 1.2em; /* prevents layout shift */
}

/* Dynamic color classes (injected by JS later if desired) */
#status.success {
  color: #16a34a; /* green */
}

#status.error {
  color: #dc2626; /* red */
}


/* ===========================================================
   === SECTION 4: Animations (fade-in)
   =========================================================== */

.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===========================================================
   End of reset-password.css
   -----------------------------------------------------------
   Notes:
   - Complements landing.css for consistency.
   - Adds spacing, transitions, and feedback color classes.
   - Keeps the tone soft and trustworthy for a recovery page.
   =========================================================== */