/* ====================================================
   AUTH PAGES — "The Sovereign Architect" Design System
   Uses shared tokens from sovereign-tokens.css
   ==================================================== */

@import '../../styles/sovereign-tokens.css';

/* ── Auth page wrapper ──────────────────────────────── */
/* Same surface token as the collabdt.org hero. AnimatedBackground is loaded
   with ssr:false, so this is what shows for the first frame — keeping it on
   --hp-surface means no color pop when the canvas layer mounts. */
.auth-page {
  background: var(--hp-surface);
  color: var(--hp-on-surface);
  font-family: 'Inter', sans-serif;
}

/* ── Reset heading sizes inside auth ─────────────────── */
.auth-page h1, .auth-page h2, .auth-page h3 {
  font-size: revert-layer;
  font-weight: revert-layer;
  line-height: revert-layer;
}

/* ── Tonal Card — for the form panel ─────────────────── */
/* Vertical gradient: starts at the page-bg color at the top (so the top edge
   blends into the page) and transitions to reCAPTCHA's fixed widget color
   (#f9f9f9 light / #222222 dark) by ~75% down, where the captcha sits — that
   way the captcha tile lands on a solid color match with no seam. */
.auth-card {
  background: linear-gradient(
    180deg,
    rgba(230, 224, 234, 0.78) 0%,
    rgba(235, 229, 234, 0.8) 18%,
    rgba(240, 234, 239, 0.82) 40%,
    rgba(245, 241, 243, 0.84) 60%,
    rgba(249, 249, 249, 0.86) 78%
  );
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Auth input fields ──────────────────────────────── */
.auth-card input {
  background: #ffffff !important;
  color: #000000 !important;
}

.auth-card input::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}

.auth-page.dark .auth-card input {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--hp-on-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.auth-page.dark .auth-card input::placeholder {
  color: var(--hp-on-surface-variant) !important;
  opacity: 0.6;
}

/* Browser autofill (Chrome/Edge/Safari) overrides input bg & text colors with
   its own yellow/white. Pin them back to the auth-card tokens.
   - background-color via inset box-shadow (the only way to defeat autofill bg)
   - text-fill-color, since autofill sets -webkit-text-fill-color (not `color`) */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-page.dark .auth-card input:-webkit-autofill,
.auth-page.dark .auth-card input:-webkit-autofill:hover,
.auth-page.dark .auth-card input:-webkit-autofill:focus,
.auth-page.dark .auth-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #222222 inset !important;
  -webkit-text-fill-color: var(--hp-on-surface) !important;
  caret-color: var(--hp-on-surface);
}

/* ── Google sign-in square button ───────────────────── */
.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background: var(--hp-mid);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.auth-google-btn:hover:not(:disabled) {
  background: var(--hp-high);
  border-color: rgba(0, 0, 0, 0.2);
}

.auth-google-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-page.dark .auth-google-btn {
  border-color: rgba(255, 255, 255, 0.12);
}

.auth-page.dark .auth-google-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.2);
}

.auth-input {
  background: var(--hp-lowest) !important;
  border: 1px solid transparent !important;
  color: var(--hp-on-surface) !important;
  border-radius: 0.5rem;
  transition: background 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
}

.auth-input::placeholder {
  color: var(--hp-on-surface-variant);
  opacity: 0.4;
}

.auth-input:focus {
  background: var(--hp-high) !important;
  border-color: rgba(192, 85, 32, 0.2) !important;
  box-shadow: 0 0 0 3px rgba(192, 85, 32, 0.1) !important;
  outline: none !important;
}

/* ── Primary auth button ────────────────────────────── */
.auth-btn-primary {
  background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-container) 100%) !important;
  color: var(--hp-on-primary-ctr) !important;
  font-weight: 700 !important;
  font-family: 'Geist', sans-serif;
  border: none !important;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  letter-spacing: -0.01em;
}

.auth-btn-primary:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(239, 145, 97, 0.35) !important;
}

.auth-btn-primary:active {
  transform: scale(0.98) !important;
}

.auth-btn-primary:disabled {
  opacity: 0.6;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Secondary / outline auth button ─────────────────── */
.auth-btn-outline {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--hp-on-surface) !important;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.auth-btn-outline:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(192, 85, 32, 0.3) !important;
  transform: scale(1.02) !important;
}

/* ── Beta button (orange accent) ─────────────────────── */
.auth-btn-beta {
  background: rgba(239, 145, 97, 0.12) !important;
  border: 1px solid rgba(239, 145, 97, 0.35) !important;
  color: var(--hp-on-surface) !important;
  font-weight: 600;
  font-family: 'Geist', sans-serif;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.auth-btn-beta:hover {
  background: rgba(239, 145, 97, 0.2) !important;
  transform: scale(1.02) !important;
}

/* ── Auth labels ─────────────────────────────────────── */
.auth-label {
  color: var(--hp-on-surface-variant) !important;
  font-family: 'Geist', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Auth links ──────────────────────────────────────── */
.auth-page a {
  color: var(--hp-primary-container);
  transition: color 0.15s ease;
}

.auth-page a:hover {
  color: var(--hp-primary);
}

/* ── Password error ──────────────────────────────────── */
.auth-pw-error {
  background: rgba(255, 75, 75, 0.07);
  border: 1px solid rgba(220, 50, 50, 0.2);
  border-radius: 0.375rem;
  color: #c0392b;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}

/* ── Separator / divider ─────────────────────────────── */
.auth-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 50%, transparent 100%);
  border: none;
}

/* ── Theme toggle button ─────────────────────────────── */
.auth-theme-toggle {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--hp-on-surface-variant) !important;
  border-radius: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.auth-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(192, 85, 32, 0.25) !important;
  transform: scale(1.08) !important;
}

/* ── reCAPTCHA wrapper ───────────────────────────────── */
.auth-captcha-wrapper {
  background: transparent!important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.5rem;
  overflow: hidden;
  width: 100%;
  height: 76px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Scale the captcha to fill the card width (300px → ~380px).
   transform creates its own stacking context, so mix-blend-mode goes here —
   the whole scaled block blends against the card behind it.
   multiply: white × card-color = card-color  (white bg disappears in light mode) */
.auth-captcha-wrapper > div {
  transform: scale(1.0);
  transform-origin: center center;
  flex-shrink: 0;
  mix-blend-mode: multiply;
  /* clip the widget's own border + drop-shadow on all sides so the wrapper's
     border reads as the only visible border. The right edge needs more inset
     because the widget's drop-shadow falls further on that side. */
  clip-path: inset(2px 6px 3px 3px);
}

@media (max-width: 767px) {
  .auth-captcha-wrapper {
    height: 82px;
    padding: 0.5rem;
  }

  .auth-captcha-wrapper > div {
    transform: scale(0.86);
  }
}

/* Narrow phones — the card's p-10 padding leaves <200px of inner width, so
   the widget needs a tighter scale to avoid being clipped by overflow:hidden. */
@media (max-width: 480px) {
  .auth-captcha-wrapper {
    height: 68px;
    padding: 0.25rem;
  }

  .auth-captcha-wrapper > div {
    transform: scale(0.7);
  }
}

@media (max-width: 360px) {
  .auth-captcha-wrapper {
    height: 60px;
  }

  .auth-captcha-wrapper > div {
    transform: scale(0.6);
  }
}

/* Dark mode: reCAPTCHA's dark theme paints itself on #222222 and the widget's
   background cannot be themed, so match the wrapper to that exact color —
   the seam between wrapper and widget disappears. */
.dark .auth-captcha-wrapper {
  background: #222222 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .auth-captcha-wrapper > div {
  mix-blend-mode: normal;
}

/* ── Left-side vignette — softens globe visible behind form area ── */
.auth-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to right,
    var(--hp-mid) 0%,
    rgba(230, 224, 234, 0.6) 60%,
    transparent 100%
  );
}

.dark .auth-map-overlay {
  background: linear-gradient(
    to right,
    var(--hp-mid) 0%,
    rgba(35, 32, 45, 0.6) 60%,
    transparent 100%
  );
}

/* ====================================================
   DARK MODE — overrides for hardcoded light values
   ==================================================== */

.dark .auth-card {
  background: linear-gradient(
    180deg,
    rgba(35, 32, 45, 0.78) 0%,
    rgba(37, 35, 48, 0.8) 18%,
    rgba(37, 35, 43, 0.82) 40%,
    rgba(35, 34, 38, 0.84) 60%,
    rgba(34, 34, 34, 0.86) 78%
  );
  box-shadow: none;
}

.dark .auth-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 50%);
}

.dark .auth-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark .auth-btn-outline:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(239, 145, 97, 0.3) !important;
}

.dark .auth-pw-error {
  background: rgba(255, 75, 75, 0.08);
  border-color: rgba(255, 75, 75, 0.2);
  color: #ff8a8a;
}

.dark .auth-separator {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
}

.dark .auth-theme-toggle {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark .auth-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(239, 145, 97, 0.25) !important;
}

.dark .auth-captcha-wrapper {
  border-color: rgba(255, 255, 255, 0.06);
}