/* ══════════════════════════════════════════════════════════════
   PrepFlow — auth module theme
   Same colour system as the dashboard module (kept in sync by
   hand), scoped to what the auth pages actually use so this
   folder stays self-contained.
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:         #002653;
  --primary-mid:      #1a3c6e;
  --on-primary:       #ffffff;
  --bg:               #f2f4f7;
  --surface:          #ffffff;
  --surface-input:    var(--bg);
  --on-surface:       #191c1e;
  --on-surface-var:   #43474f;
  --outline:          #c4c6d0;
  --outline-focus:    var(--primary-mid);
  --accent-link:      var(--primary-mid);
  --secondary:        #006e25;
  --secondary-bg:     #e8f5ed;
  --secondary-light:  var(--secondary-bg);
  --on-secondary-bg:  #14532d;
  --error:            #ba1a1a;
  --error-bg:         #fdeaea;
  --error-light:      #ffdad6;
  --on-error-bg:      #7f1d1d;
  --warn:             #d97706;
  --warn-bg:          #fffbeb;
  --warn-light:       #fef3c7;
  --on-warn-bg:       #92400e;
}

[data-theme="dark"] {
  --primary:          #4a9eff;
  --primary-mid:      #6ab0ff;
  --on-primary:       #00132b;
  --bg:               #0f1117;
  --surface:          #1a1d27;
  --on-surface:       #e4e6eb;
  --on-surface-var:   #9aa0b0;
  --outline:          #2e3140;
  --secondary:        #4caf7d;
  --secondary-bg:     #0e2d1e;
  --on-secondary-bg:  #7ee2a8;
  --error:            #ff6b6b;
  --error-bg:         #2d0f0f;
  --on-error-bg:      #ffb4b0;
  --warn:             #ffb347;
  --warn-bg:          #2d1e00;
  --on-warn-bg:       #ffcf8b;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--on-surface);
}

/* ── Smooth theme transitions ── */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.spinner, .otp-box { transition: none !important; }

/* ── Shared icon button (theme toggle / exit) ── */
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--bg); color: var(--on-surface-var);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, color 0.15s; position: relative;
}
.icon-btn:hover { background: var(--outline); color: var(--primary); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle-icon { display: flex; align-items: center; justify-content: center; }
.theme-toggle-icon svg { width: 18px; height: 18px; }

/* ── Shared spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Shared toast ──
   No fixed/max width originally — a short message (login's "Welcome back!
   Redirecting…") happened to fit any screen, but a longer one (registration's
   "Account created! Sending you a verification code…") forced the nowrap pill
   wider than narrow phones, overflowing off both edges. Capping the width to
   the viewport and letting text wrap fixes every page that reuses this class,
   not just registration. */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--secondary); color: #fff;
  font-size: 14px; font-weight: 500;
  padding: 12px 20px; border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease;
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
/* A hidden toast is invisible but still sits on the page (pushed down over the
   mobile bottom nav) — it must never swallow taps meant for what's underneath. */
.toast { pointer-events: none; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.toast.error { background: var(--error); }

[data-theme="dark"] .login-alert { background: #2d0f0f; border-color: rgba(255,107,107,0.35); }
[data-theme="dark"] .bg-glow-1 { background: rgba(74,158,255,0.06); }

/* iPhone (Safari — and Chrome/every other iOS browser, which all use Safari's
   engine) zooms the whole page in when you tap a text box whose text is under
   16px, and doesn't zoom back out, leaving the layout looking broken. On touch
   phones, keep every form field at 16px so there's nothing to zoom for.
   (Deliberately NOT maximum-scale=1 in the viewport: that would also block
   pinch-zoom for people who need it.) */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select { font-size: 16px !important; }
}