/* ============================================================================
   auth.css — login + register redesign (premium fintech, split-screen)
   Loaded ONLY by login.html and register.html.

   Theming: theme.css defines CSS custom properties ONLY for [data-theme="dark"].
   Light mode has no token set, so every themeable surface uses
   var(--token, <light-fallback>) — dark uses tokens, light uses the fallback.
   The left brand panel is a fixed brand gradient (identical in both themes)
   driven by local --auth-* design vars.

   All selectors use unique .auth-* class names so the base admin-template CSS
   (loaded after this file) cannot override the design via specificity/order.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root,
[data-theme='dark'] {
  /* Fixed brand identity (Stocks Developer blue #1f56e6) — same in both themes */
  --auth-brand: #1f56e6;
  --auth-brand-bright: #4f7cff;
  --auth-brand-deep: #0a1a52;
  --auth-brand-ink: #060d2b;
  --auth-indigo: #4f46e5;
  --auth-cyan: #38bdf8;
  --auth-on-brand: #eaf0ff;
  --auth-on-brand-soft: #aec0f0;
}

/* ---- Layout shell ---------------------------------------------------------- */
.auth-shell {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  color: var(--text-primary, #0f1729);
  background: var(--bg-base, #ffffff);
  overflow: hidden;
}

/* ---- Brand panel (left) ---------------------------------------------------- */
.auth-brand {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem);
  color: var(--auth-on-brand);
  background:
    radial-gradient(120% 120% at 12% 18%, rgba(79, 124, 255, 0.55) 0%, transparent 55%),
    radial-gradient(110% 110% at 88% 12%, rgba(56, 189, 248, 0.30) 0%, transparent 50%),
    radial-gradient(130% 130% at 75% 100%, rgba(79, 70, 229, 0.55) 0%, transparent 55%),
    linear-gradient(155deg, var(--auth-brand-deep) 0%, var(--auth-brand-ink) 100%);
}

/* faint grid + drifting glow + grain, all behind content */
.auth-brand__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.auth-brand__bg::before {
  /* faint engineering grid */
  content: '';
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 30% 30%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 90% at 30% 30%, #000 35%, transparent 80%);
}
.auth-brand__bg::after {
  /* slow drifting glow */
  content: '';
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  top: -20vmax;
  left: -10vmax;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.35) 0%, transparent 62%);
  filter: blur(10px);
  animation: authDrift 22s ease-in-out infinite alternate;
}
@keyframes authDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(18vmax, 14vmax) scale(1.25); }
}

/* live sparkline ribbon */
.auth-spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  width: 100%;
  height: 120px;
  opacity: 0.5;
  z-index: -1;
}
.auth-spark path {
  fill: none;
  stroke: var(--auth-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: authDraw 3.4s ease-out 0.4s forwards;
}
@keyframes authDraw {
  to { stroke-dashoffset: 0; }
}

.auth-brand__inner {
  position: relative;
  max-width: 30rem;
}
.auth-brand__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  color: #fff;
}
.auth-brand__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--auth-on-brand-soft);
  margin: 0 0 2rem;
}
.auth-brand__sub :is(b, strong) { color: #fff; font-weight: 600; }

.auth-brand__pills {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.auth-brand__pills li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--auth-on-brand);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.auth-brand__pills li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-cyan);
  box-shadow: 0 0 8px var(--auth-cyan);
}

.auth-brand__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--auth-on-brand-soft);
}
.auth-brand__contact span { white-space: nowrap; }
.auth-brand__contact a { color: inherit; text-decoration: none; }
.auth-brand__contact a:hover { color: #fff; }

/* ---- Form panel (right) ---------------------------------------------------- */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--bg-base, #f7f9fc);
}
.auth-card {
  width: 100%;
  max-width: 26rem;
}
.auth-card__brandline {
  display: none; /* shown only on mobile, see media query */
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}
.auth-card__brandline img { height: 30px; width: auto; }

.auth-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary, var(--auth-brand));
  margin: 0 0 0.4rem;
}
.auth-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0f1729);
  margin: 0 0 0.45rem;
}
.auth-card__lead {
  font-size: 0.95rem;
  color: var(--text-secondary, #5b6577);
  margin: 0 0 1.9rem;
}

/* ---- Floating-label fields ------------------------------------------------- */
.auth-form { display: grid; gap: 1.05rem; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.auth-field { position: relative; }
.auth-input {
  width: 100%;
  height: 56px;
  padding: 1.35rem 1rem 0.45rem;
  font: inherit;
  font-size: 0.975rem;
  color: var(--text-primary, #0f1729);
  background: var(--bg-elevated, #ffffff);
  border: 1.5px solid var(--border-subtle, #dce1ea);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.auth-input::placeholder { color: transparent; }
.auth-input[readonly] { color: var(--text-secondary, #5b6577); cursor: default; background: var(--bg-base, #f4f6fa); }
.auth-input:hover { border-color: var(--border-strong, #c2cad8); }
.auth-input:focus {
  border-color: var(--accent-primary, var(--auth-brand));
  box-shadow: 0 0 0 4px rgba(31, 86, 230, 0.14);
}
/* Browser autofill: repaint the yellow fill to match the input in both themes,
   and keep the typed/restored value the correct colour. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text-primary, #0f1729);
  caret-color: var(--text-primary, #0f1729);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated, #ffffff) inset;
  box-shadow: 0 0 0 1000px var(--bg-elevated, #ffffff) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-input:-webkit-autofill:focus {
  border-color: var(--accent-primary, var(--auth-brand));
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated, #ffffff) inset, 0 0 0 4px rgba(31, 86, 230, 0.14);
  box-shadow: 0 0 0 1000px var(--bg-elevated, #ffffff) inset, 0 0 0 4px rgba(31, 86, 230, 0.14);
}
.auth-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.975rem;
  color: var(--text-muted, #8a93a3);
  pointer-events: none;
  transition: transform 0.16s ease, font-size 0.16s ease, color 0.16s ease;
}
.auth-input:focus + .auth-label,
.auth-input:not(:placeholder-shown) + .auth-label {
  transform: translateY(-150%) scale(0.86);
  font-weight: 600;
  color: var(--accent-primary, var(--auth-brand));
}
/* Float the label when the browser autofills saved credentials (Chrome does not
   reflect autofilled values to :placeholder-shown until the user interacts, so
   these states are matched separately — kept apart so an unknown pseudo-class
   in one engine cannot invalidate the whole rule). */
.auth-input:-webkit-autofill + .auth-label {
  transform: translateY(-150%) scale(0.86);
  font-weight: 600;
  color: var(--accent-primary, var(--auth-brand));
}
.auth-input:autofill + .auth-label {
  transform: translateY(-150%) scale(0.86);
  font-weight: 600;
  color: var(--accent-primary, var(--auth-brand));
}

/* Static field label (used above a <select>, which can't drive a floating label) */
.auth-sublabel {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #5b6577);
  margin: 0 0 0.45rem 0.15rem;
}
.auth-select {
  width: 100%;
  height: 52px;
  padding: 0 2.5rem 0 1rem;
  font: inherit;
  font-size: 0.975rem;
  color: var(--text-primary, #0f1729);
  background-color: var(--bg-elevated, #ffffff);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  border: 1.5px solid var(--border-subtle, #dce1ea);
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.auth-select:hover { border-color: var(--border-strong, #c2cad8); }
.auth-select:focus { border-color: var(--accent-primary, var(--auth-brand)); box-shadow: 0 0 0 4px rgba(31, 86, 230, 0.14); }

/* Inline error note (e.g. "no users found") */
.auth-error-note {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-danger, #d92d20);
}

/* ---- Buttons --------------------------------------------------------------- */
.auth-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--auth-brand) 0%, var(--auth-indigo) 100%);
  box-shadow: 0 10px 24px -10px rgba(31, 86, 230, 0.7);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.auth-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 30px -10px rgba(31, 86, 230, 0.8); }
.auth-btn:active { transform: translateY(0); }
a.auth-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn:disabled:hover { transform: none; filter: none; box-shadow: 0 10px 24px -10px rgba(31, 86, 230, 0.7); }

.auth-btn--ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-primary, var(--auth-brand));
  background: rgba(31, 86, 230, 0.09);
  border: 1.5px solid rgba(31, 86, 230, 0.22);
  box-shadow: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.auth-btn--ghost:hover { background: rgba(31, 86, 230, 0.15); border-color: rgba(31, 86, 230, 0.4); }

/* ---- Helper rows ----------------------------------------------------------- */
.auth-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -0.35rem 0 0.25rem;
}
.auth-link {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-primary, var(--auth-brand));
}
.auth-link:hover { text-decoration: underline; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0;
  color: var(--text-muted, #8a93a3);
  font-size: 0.8rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle, #e6e9ef);
}

.auth-foot {
  margin-top: 1.6rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #5b6577);
}
.auth-foot a { color: var(--accent-primary, var(--auth-brand)); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* ---- Terms checkbox -------------------------------------------------------- */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #5b6577);
  line-height: 1.45;
}
.auth-check input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--auth-brand);
  cursor: pointer;
}
.auth-check a { color: var(--accent-primary, var(--auth-brand)); font-weight: 600; text-decoration: none; }
.auth-check a:hover { text-decoration: underline; }

/* ---- Alerts ---------------------------------------------------------------- */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.4;
}
.auth-alert--error {
  color: var(--accent-danger, #b42318);
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.32);
}
.auth-alert--ok {
  color: var(--accent-success, #1a7f37);
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.32);
}
.auth-alert__close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  line-height: 1;
}
.auth-alert__close:hover { opacity: 1; }

/* ---- Thank-you / back-home (register) ------------------------------------- */
.auth-thanks {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #5b6577);
  text-align: center;
}
.auth-thanks p { margin: 0 0 0.25rem; }
.auth-thanks a { color: var(--accent-primary, var(--auth-brand)); font-weight: 600; text-decoration: none; }
.auth-thanks a:hover { text-decoration: underline; }

/* ---- Small note (e.g. "check your spam folder") --------------------------- */
.auth-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted, #8a93a3);
  margin: -0.4rem 0 0.4rem;
}

/* ---- Status content (message.html: activation / reset results) ------------
   Lives inside the split-screen .auth-panel as a centered .auth-card--status.
   Category comes in via data-status (NOT the raw text-* class) so it tints
   only the icon, not the whole card's text. */
.auth-card--status { text-align: center; }
.auth-status__icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  color: var(--accent-primary, var(--auth-brand));
  background: rgba(31, 86, 230, 0.12);
}
.auth-status__icon svg { width: 32px; height: 32px; }
[data-status='text-success'] .auth-status__icon { color: var(--accent-success, #1a7f37); background: rgba(63, 185, 80, 0.13); }
[data-status='text-danger'] .auth-status__icon { color: var(--accent-danger, #d92d20); background: rgba(248, 81, 73, 0.13); }
[data-status='text-warning'] .auth-status__icon { color: var(--accent-warning, #b54708); background: rgba(210, 153, 34, 0.15); }
.auth-status__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em;
  color: var(--text-primary, #0f1729);
  margin: 0 0 0.5rem;
}
.auth-status__msg {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary, #5b6577);
  margin: 0 0 1.6rem;
}
/* Highlighted token (e.g. the username) inside a status message */
.auth-hl {
  display: inline-block;
  font-weight: 700;
  color: var(--accent-primary, var(--auth-brand));
  background: rgba(31, 86, 230, 0.10);
  padding: 0.04em 0.45em;
  border-radius: 6px;
}
.auth-card--status .auth-btn { margin-bottom: 0.85rem; }

/* ---- Staggered load reveal ------------------------------------------------- */
.auth-reveal { opacity: 0; transform: translateY(14px); animation: authUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.auth-reveal:nth-child(1) { animation-delay: 0.05s; }
.auth-reveal:nth-child(2) { animation-delay: 0.12s; }
.auth-reveal:nth-child(3) { animation-delay: 0.19s; }
.auth-reveal:nth-child(4) { animation-delay: 0.26s; }
.auth-reveal:nth-child(5) { animation-delay: 0.33s; }
.auth-reveal:nth-child(6) { animation-delay: 0.40s; }
.auth-reveal:nth-child(7) { animation-delay: 0.47s; }
.auth-reveal:nth-child(8) { animation-delay: 0.54s; }
@keyframes authUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    padding: 2rem 1.5rem 2.25rem;
    min-height: auto;
  }
  .auth-brand__title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .auth-brand__sub { font-size: 0.95rem; margin-bottom: 0; }
  .auth-brand__pills,
  .auth-brand__contact,
  .auth-spark { display: none; }
  .auth-panel { padding: 2rem 1.25rem 3rem; }
}

@media (max-width: 520px) {
  .auth-row { grid-template-columns: 1fr; }
}

/* Brandline (logo on the form card) only when the brand panel value-prop is the
   main visual — keep it hidden on desktop, show a compact logo on small screens
   is handled by the brand panel itself, so no duplicate logo needed. */

@media (prefers-reduced-motion: reduce) {
  .auth-reveal,
  .auth-spark path,
  .auth-brand__bg::after { animation: none; }
  .auth-reveal { opacity: 1; transform: none; }
  .auth-spark path { stroke-dashoffset: 0; }
}