/* =============================================================================
   auth.css — Soultrob authentication pages (sign-up, sign-in, password reset)
   =============================================================================

   Structure:
     1.  CSS custom properties (design tokens)
     2.  Reset / base
     3.  Body & page layout  ← fixes the cut-off / scroll problem
     4.  Auth card container
     5.  Headings
     6.  Django message banners
     7.  Form layout & labels
     8.  Input fields (text, email, number, password)
     9.  Password wrapper + visibility toggle
     10. Password strength meter
     11. Select / dropdown
     12. Field-level error text
     13. Inline hint text
     14. Submit button + loader spinner
     15. Footer links
     16. Entrance animation
     17. Mobile responsive overrides  (@media ≤ 480 px)
   ============================================================================= */


/* ── 1. Design tokens ────────────────────────────────────────────────────────
   All colours, shadows, and radii live here.  Change once, updates everywhere.
   --------------------------------------------------------------------------- */
:root {
  /* Background gradient — dark violet */
  --bg-grad-start : #12002e;   /* deep near-black violet */
  --bg-grad-end   : #2a0a5e;   /* rich dark purple */

  /* Card */
  --card-bg       : #ffffff;
  --card-radius   : 18px;
  --card-shadow   : 0 20px 60px rgba(0, 0, 0, 0.45);

  /* Brand / accent */
  --accent        : #7c5cfc;   /* violet accent — readable on white */
  --accent-hover  : #6344e8;
  --accent-ring   : rgba(124, 92, 252, 0.28);

  /* Text */
  --text-heading  : #1a1a2e;
  --text-label    : #374151;
  --text-body     : #4b5563;
  --text-muted    : #9ca3af;
  --text-link     : #7c5cfc;
  --text-link-hov : #6344e8;

  /* Inputs */
  --input-border       : #d1d5db;
  --input-border-focus : #7c5cfc;
  --input-bg           : #fafafa;
  --input-text         : #1f2937;
  --input-placeholder  : #9ca3af;
  --input-radius       : 9px;

  /* Status colours */
  --color-success : #0d9488;
  --color-error   : #dc2626;
  --color-warning : #d97706;
  --color-info    : #2563eb;

  /* Status background tints */
  --bg-success    : #f0fdfa;
  --bg-error      : #fff1f2;
  --bg-warning    : #fffbeb;
  --bg-info       : #eff6ff;

  /* Status border tints */
  --border-success: #99f6e4;
  --border-error  : #fecaca;
  --border-warning: #fde68a;
  --border-info   : #bfdbfe;

  /* Strength meter colours */
  --meter-weak    : #ef4444;
  --meter-fair    : #f59e0b;
  --meter-good    : #eab308;
  --meter-strong  : #22c55e;

  /* Spacing */
  --gap           : 1.25rem;   /* standard vertical gap between form rows */
  --card-pad-x    : 2.5rem;
  --card-pad-y    : 2.5rem;
}


/* ── 2. Reset / base ─────────────────────────────────────────────────────────
   Minimal reset targeting only elements used on auth pages.
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── 3. Body & page layout ───────────────────────────────────────────────────
   ROOT FIX for the "form cut off at the top" bug:

   Old code used:
     body { height: 100vh; align-items: center; }

   Problem: when the card is taller than the viewport (many form fields on a
   phone) the flex container clips the overflow — there is nothing to scroll
   because the body itself does not grow beyond 100 vh.

   Fix:
     • min-height: 100vh  — body is AT LEAST the viewport; grows taller if needed.
     • overflow-y: auto   — body itself can scroll when content overflows.
     • align-items: flex-start + padding — card sits at the top with breathing
       room; on tall viewports the padding auto-centres it visually.
   --------------------------------------------------------------------------- */
body {
  margin          : 0;
  padding         : 2.5rem 1rem;       /* top/bottom space; 1 rem left/right on mobile */
  font-family     : "Inter", system-ui, -apple-system, sans-serif;
  background      : linear-gradient(145deg, var(--bg-grad-start), var(--bg-grad-end));
  /* min-height instead of height — body grows with content */
  min-height      : 100vh;
  /* scroll lives on the body (the default), not on a fixed-height container */
  overflow-y      : auto;
  display         : flex;
  flex-direction  : column;
  justify-content : flex-start;        /* card starts at top + padding; never clipped */
  align-items     : center;
}


/* ── 4. Auth card container ──────────────────────────────────────────────────
   The white rounded card that holds the form.
   width: 100% + max-width gives fluid behaviour on mobile while capping
   desktop width.  The margin: auto centres it horizontally inside the body
   flex column when the card is narrower than the viewport.
   --------------------------------------------------------------------------- */
.auth-container {
  background    : var(--card-bg);
  padding       : var(--card-pad-y) var(--card-pad-x);
  border-radius : var(--card-radius);
  box-shadow    : var(--card-shadow);
  width         : 100%;
  max-width     : 460px;              /* slightly wider than before for comfort */
  margin        : 0 auto;            /* horizontal centering in flex column */
  animation     : fadeIn 0.5s ease-out both;
}


/* ── 5. Headings ─────────────────────────────────────────────────────────────
   --------------------------------------------------------------------------- */
.auth-container h2 {
  text-align    : center;
  color         : var(--text-heading);
  margin-bottom : 1.75rem;
  font-size     : 1.75rem;
  font-weight   : 700;
  letter-spacing: -0.02em;
  line-height   : 1.2;
}


/* ── 6. Django message banners ───────────────────────────────────────────────
   Used for form-level success / error / warning / info messages rendered by
   the Django messages framework and by auth.js for client-side errors.
   --------------------------------------------------------------------------- */
.messages {
  margin-bottom : 1rem;
  padding       : 0.75rem 1rem;
  border-radius : 8px;
  font-size     : 0.9rem;
  font-weight   : 500;
  line-height   : 1.45;
  border        : 1px solid transparent;
}

.messages.success {
  background : var(--bg-success);
  color      : var(--color-success);
  border-color: var(--border-success);
}

.messages.error {
  background : var(--bg-error);
  color      : var(--color-error);
  border-color: var(--border-error);
}

.messages.warning {
  background : var(--bg-warning);
  color      : var(--color-warning);
  border-color: var(--border-warning);
}

.messages.info {
  background : var(--bg-info);
  color      : var(--color-info);
  border-color: var(--border-info);
}


/* ── 7. Form layout & labels ─────────────────────────────────────────────────
   flex-direction: column keeps every label–input pair stacked vertically.
   --------------------------------------------------------------------------- */
.auth-form {
  display        : flex;
  flex-direction : column;
  gap            : 0;               /* individual rows control their own spacing */
}

.auth-form label {
  display       : block;
  margin-bottom : 0.4rem;
  font-size     : 0.875rem;
  font-weight   : 600;
  color         : var(--text-label);
  letter-spacing: 0.01em;
}

/* Muted "(optional)" tag inside a label */
.hint-inline {
  font-size  : 0.78rem;
  color      : var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}


/* ── 8. Input fields ─────────────────────────────────────────────────────────
   Applies to: text, email, number, password inputs inside .auth-form.
   margin-bottom provides the vertical rhythm between rows.
   --------------------------------------------------------------------------- */
.auth-form input {
  width         : 100%;
  padding       : 0.75rem 1rem;
  border        : 1.5px solid var(--input-border);
  border-radius : var(--input-radius);
  margin-bottom : var(--gap);
  font-size     : 1rem;
  font-family   : inherit;
  color         : var(--input-text);
  background    : var(--input-bg);
  transition    : border-color 0.2s ease, box-shadow 0.2s ease,
                  background 0.2s ease;
  /* Prevent mobile zoom-in on tap (iOS zooms when font-size < 16 px) */
  -webkit-text-size-adjust: 100%;
}

.auth-form input::placeholder {
  color: var(--input-placeholder);
}

.auth-form input:focus {
  outline      : none;
  border-color : var(--input-border-focus);
  box-shadow   : 0 0 0 3.5px var(--accent-ring);
  background   : #ffffff;
}

/* Number input — hide browser spin arrows (they're ugly and redundant for age) */
.auth-form input[type="number"]::-webkit-inner-spin-button,
.auth-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.auth-form input[type="number"] {
  -moz-appearance: textfield;
}


/* ── 9. Password wrapper + visibility toggle ─────────────────────────────────
   The wrapper is position:relative so the toggle can be absolutely positioned
   inside it without affecting form layout.
   The extra padding-right on the input keeps typed text from sliding under
   the toggle icon.
   --------------------------------------------------------------------------- */
.password-wrapper {
  position      : relative;
  display       : block;          /* block, not flex — avoids stretch artefacts */
  margin-bottom : var(--gap);     /* matches regular input margin */
}

/* Input inside the wrapper fills the wrapper; its own margin-bottom is
   removed because the wrapper itself provides the spacing. */
.password-wrapper input {
  width         : 100%;
  margin-bottom : 0;
  padding-right : 3rem;           /* room for the toggle icon */
}

/* Toggle icon — absolutely positioned inside the wrapper */
.toggle-password {
  position   : absolute;
  right      : 12px;
  top        : 50%;
  transform  : translateY(-50%);
  cursor     : pointer;
  font-size  : 1.1rem;
  color      : var(--text-muted);
  transition : color 0.2s ease;
  user-select: none;
  line-height: 1;
  /* Ensure the icon never overflows the wrapper on narrow screens */
  flex-shrink: 0;
}

.toggle-password:hover {
  color: var(--accent);
}


/* ── 10. Password strength meter ─────────────────────────────────────────────
   The meter track is a grey bar; the fill (#meter-bar) width and colour are
   controlled by auth.js based on password score.
   --------------------------------------------------------------------------- */
.password-strength {
  margin-top    : -0.6rem;        /* pull up slightly — sits below the wrapper margin */
  margin-bottom : var(--gap);
}

.meter {
  height        : 5px;
  background    : #e5e7eb;        /* grey track */
  border-radius : 99px;
  overflow      : hidden;
  margin-bottom : 0.35rem;
}

/* Fill bar — width and background-color set by auth.js */
.meter span {
  display       : block;
  height        : 100%;
  width         : 0%;
  border-radius : 99px;
  transition    : width 0.35s ease, background-color 0.35s ease;
}

/* Hint text beneath the meter */
#password-help {
  display    : block;
  font-size  : 0.78rem;
  color      : var(--text-muted);
  line-height: 1.4;
}


/* ── 11. Select / dropdown (gender field) ────────────────────────────────────
   Matches the text input styling exactly so the form looks consistent.
   The custom SVG arrow replaces the browser default arrow.
   --------------------------------------------------------------------------- */
.select-input {
  width             : 100%;
  padding           : 0.75rem 2.25rem 0.75rem 1rem; /* right padding for arrow icon */
  border            : 1.5px solid var(--input-border);
  border-radius     : var(--input-radius);
  margin-bottom     : var(--gap);
  font-size         : 1rem;
  font-family       : inherit;
  color             : var(--input-text);
  background-color  : var(--input-bg);
  /* Remove browser default arrow */
  appearance        : none;
  -webkit-appearance: none;
  /* Custom dropdown arrow (inline SVG — no extra HTTP request) */
  background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat : no-repeat;
  background-position: right 14px center;
  cursor            : pointer;
  transition        : border-color 0.2s ease, box-shadow 0.2s ease;
}

.select-input:focus {
  outline      : none;
  border-color : var(--input-border-focus);
  box-shadow   : 0 0 0 3.5px var(--accent-ring);
  background-color: #ffffff;
}


/* ── 12. Field-level error text ──────────────────────────────────────────────
   Shown below an individual field when Django form validation fails.
   Negative margin-top pulls it up close to the field it belongs to, then
   the bottom margin re-establishes the row gap before the next label.
   --------------------------------------------------------------------------- */
.field-error {
  display       : block;
  margin-top    : -0.85rem;       /* close the gap left by the input's margin-bottom */
  margin-bottom : var(--gap);
  font-size     : 0.8rem;
  font-weight   : 500;
  color         : var(--color-error);
  line-height   : 1.4;
}


/* ── 13. Inline hint text ────────────────────────────────────────────────────
   Used for the real-time username validation hint (#username-hint).
   auth.js updates textContent and style.color dynamically.
   --------------------------------------------------------------------------- */
.hint {
  display       : block;
  margin-top    : -0.85rem;
  margin-bottom : var(--gap);
  font-size     : 0.78rem;
  color         : var(--text-muted);
  line-height   : 1.4;
  transition    : color 0.2s ease;
}


/* ── 14. Submit button + loader spinner ──────────────────────────────────────
   Two class selectors targeting the button:
     .auth-form button  — applied by the form context (specificity fallback)
     .auth-button       — explicit class on the element (preferred)
   Both point to the same rules so neither the old nor new markup breaks.

   Internal structure expected by auth.js:
     <button type="submit" class="auth-button">
       <span class="btn-text">Create Account</span>
       <span class="btn-loader hidden"></span>
     </button>
   --------------------------------------------------------------------------- */
.auth-form button,
.auth-button {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.5rem;
  width          : 100%;
  padding        : 0.875rem 1rem;
  margin-top     : 0.5rem;
  background     : linear-gradient(135deg, var(--accent), var(--accent-hover));
  color          : #ffffff;
  border         : none;
  border-radius  : var(--input-radius);
  font-size      : 1rem;
  font-weight    : 700;
  font-family    : inherit;
  letter-spacing : 0.01em;
  cursor         : pointer;
  transition     : transform 0.15s ease, box-shadow 0.15s ease,
                   opacity 0.15s ease;
  box-shadow     : 0 4px 14px rgba(124, 92, 252, 0.38);
}

.auth-form button:hover:not(:disabled),
.auth-button:hover:not(:disabled) {
  transform  : translateY(-2px);
  box-shadow : 0 8px 22px rgba(124, 92, 252, 0.48);
}

.auth-form button:active:not(:disabled),
.auth-button:active:not(:disabled) {
  transform  : translateY(0);
  box-shadow : 0 2px 8px rgba(124, 92, 252, 0.3);
}

.auth-form button:disabled,
.auth-button:disabled {
  opacity: 0.65;
  cursor : not-allowed;
  transform: none;
}

/* Spinner — hidden by default via .hidden; shown by auth.js on submit */
.btn-loader {
  display      : inline-block;
  width        : 17px;
  height       : 17px;
  border       : 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation    : btn-spin 0.65s linear infinite;
  flex-shrink  : 0;
}

.btn-loader.hidden {
  display: none;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}


/* ── 15. Footer links ────────────────────────────────────────────────────────
   --------------------------------------------------------------------------- */
.auth-footer {
  margin-top : 1.25rem;
  text-align : center;
  font-size  : 0.9rem;
  color      : var(--text-body);
  line-height: 1.5;
}

.auth-footer a {
  color          : var(--text-link);
  font-weight    : 600;
  text-decoration: none;
  transition     : color 0.2s ease;
}

.auth-footer a:hover {
  color          : var(--text-link-hov);
  text-decoration: underline;
}


/* ── 16. Entrance animation ──────────────────────────────────────────────────
   --------------------------------------------------------------------------- */
@keyframes fadeIn {
  from {
    opacity  : 0;
    transform: translateY(18px);
  }
  to {
    opacity  : 1;
    transform: translateY(0);
  }
}


/* ── 17. Mobile responsive overrides ─────────────────────────────────────────
   Targets viewports ≤ 480 px (most phones in portrait mode).

   Key adjustments:
   • Reduce card padding so content doesn't feel cramped.
   • Reduce heading font-size.
   • Ensure inputs and buttons have comfortable 44 px+ tap targets.
   • body padding-top reduced so the card doesn't start too far down.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body {
    padding: 1.25rem 0.75rem;    /* less top space; narrower side gutters */
    align-items: stretch;         /* card stretches to fill available width */
  }

  .auth-container {
    padding      : 1.75rem 1.25rem;
    border-radius: 14px;
    /* On very small screens remove the margin gap so card fills edge-to-edge */
    max-width    : 100%;
  }

  .auth-container h2 {
    font-size    : 1.5rem;
    margin-bottom: 1.25rem;
  }

  /* Slightly larger tap target on mobile */
  .auth-form input,
  .select-input {
    padding      : 0.8rem 0.9rem;
    font-size    : 1rem;           /* must stay ≥ 16 px to prevent iOS zoom */
  }

  .auth-form button,
  .auth-button {
    padding      : 0.9rem 1rem;
    font-size    : 1rem;
  }

  /* Ensure the toggle icon stays inside the wrapper on narrow screens */
  .toggle-password {
    right: 10px;
  }
}

/* Extra-small — very narrow phones (< 360 px, e.g. Galaxy A01) */
@media (max-width: 360px) {
  .auth-container {
    padding: 1.5rem 1rem;
  }

  .auth-container h2 {
    font-size: 1.35rem;
  }
}