/* ============ Auth pages (v2) ============
 * Centered card layout for unauthenticated entry points: login,
 * signup, forgot/reset password, create corporate account, and the
 * post-signup confirmation. Loaded by base_auth.html on top of
 * tokens.css and components.css.
 *
 * The form-field primitives (.field/.label/.input/.field-error) and
 * modal primitives (.modal-overlay/.modal-card/.modal-head/...) come
 * from components.css. This file only contains the page-specific
 * shell (centered card + brand bar + footer) and a few auth-only
 * conveniences.
 *
 * The legacy .modal block at the bottom is intentional: confirmation's
 * first-adopter modal is opened/closed via clients.obfuscated.js which
 * toggles `style.display`, so it needs the legacy `display: none`
 * default + a `display: block` override path. Don't fold it into
 * components.css — the new pages use the v2 `.modal-overlay` /
 * `.is-open` toggle instead.
 */

body.auth-body {
  min-height: 100vh;
  background: var(--c-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-4);
}

.auth-shell {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Brand bar — mirrors the sidebar's .brand pattern but centered. */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--c-fg);
  letter-spacing: -0.005em;
}
.auth-brand .brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

/* Card — borrows from .card but tunes padding for form layout. */
.auth-card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-2);
  padding: var(--s-8) var(--s-6);
}

.auth-title {
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-1);
  color: var(--c-fg);
  text-align: center;
}
.auth-sub {
  font-size: var(--fs-13);
  color: var(--c-fg-muted);
  margin: 0 0 var(--s-6);
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Taller, slightly larger-typed inputs on auth pages. The shared .input
   primitive in components.css is 30px tall — tuned for dense surfaces
   like Settings and the Clients toolbar. Auth forms read better with a
   roomier field that matches the 40px submit button below. */
.auth-form .input {
  height: 40px;
  padding: 0 var(--s-4);
  font-size: var(--fs-14);
}

/* Error-state modifier for the .input primitive — appended as
   `form-error` by the form classes' clean() methods on validation
   failure. Components.css doesn't ship this modifier because the only
   other v2 page that uses .input (Settings) hand-rolls its inputs and
   doesn't surface a red-border state. */
.input.form-error {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

/* Primary submit button — full width, slightly taller than .btn-lg
   (36px) so the CTA reads as the dominant element on the card. */
.auth-form .btn,
.auth-actions .btn { width: 100%; }
.auth-form .btn-accent,
.auth-actions .btn-accent { height: 40px; font-weight: 600; }

.auth-actions { margin-top: var(--s-2); }

/* Form-level (non-field) errors render as <ul class="errorlist"> */
.auth-card .errorlist {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-danger-soft);
  border: 1px solid oklch(0.85 0.08 25);
  border-radius: var(--r-2);
  color: oklch(0.4 0.15 25);
  font-size: var(--fs-13);
}
.auth-card .errorlist li { margin: 0; padding: 0; }

/* "Verify email first" alert above the login form. */
.auth-alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--fs-13);
  margin: 0 0 var(--s-4);
  background: var(--c-warning-soft);
  color: oklch(0.4 0.13 75);
  border: 1px solid oklch(0.85 0.08 75);
}
.auth-alert + form { display: flex; flex-direction: column; gap: var(--s-3); }
.auth-alert + form .btn { width: 100%; }

/* Footer links beneath the card. */
.auth-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--c-fg-muted);
  text-align: center;
}
.auth-foot a { color: var(--c-fg-muted); text-decoration: none; }
.auth-foot a:hover { color: var(--c-fg); text-decoration: underline; }
.auth-foot .accent { color: var(--c-accent); font-weight: 500; }
.auth-foot .accent:hover { color: var(--c-accent-hover); }

/* Terms-of-use checkbox + label on signup. */
.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  line-height: 1.5;
}
.auth-terms input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--c-accent);
  flex-shrink: 0;
}
.auth-terms a { color: var(--c-fg); text-decoration: underline; }
.auth-terms a:hover { color: var(--c-accent); }

/* Coupon-code reveal on signup. */
.auth-coupon-toggle {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  text-align: left;
  cursor: pointer;
}
.auth-coupon-toggle:hover { color: var(--c-fg); text-decoration: underline; }

/* Django messages — stacked above the card. */
.auth-messages {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.auth-messages > div {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--fs-13);
  text-align: center;
  border: 1px solid;
}
.auth-messages .success {
  background: var(--c-success-soft);
  color: oklch(0.36 0.1 150);
  border-color: oklch(0.85 0.06 150);
}
.auth-messages .warning {
  background: var(--c-warning-soft);
  color: oklch(0.4 0.13 75);
  border-color: oklch(0.85 0.08 75);
}
.auth-messages .error {
  background: var(--c-danger-soft);
  color: oklch(0.4 0.15 25);
  border-color: oklch(0.85 0.08 25);
}
.auth-messages .info {
  background: var(--c-bg-soft);
  color: var(--c-fg);
  border-color: var(--c-border);
}

/* Section break inside a card — used on verify_email_sent to separate the
   "Resend" button from the secondary "Wrong email?" edit form. */
.auth-divider {
  margin: var(--s-6) calc(var(--s-6) * -1) var(--s-5);
  border: 0;
  border-top: 1px solid var(--c-border);
}

/* "Success!" hero on the confirmation page. */
.auth-hero { text-align: center; }
.auth-hero .auth-title {
  font-size: var(--fs-28);
  margin: var(--s-3) 0 var(--s-3);
}
.auth-hero .lead {
  font-size: var(--fs-14);
  color: var(--c-fg-muted);
  line-height: 1.55;
  margin: 0 auto var(--s-6);
  max-width: 360px;
}
.auth-hero .lead .faqIcon { vertical-align: middle; cursor: pointer; }

/* Legacy .modal styling — kept narrowly for the confirmation page's
   first-adopter modal. clients.obfuscated.js opens/closes that modal
   by setting `style.display` directly, so the rules below mirror the
   pre-redesign behavior in shell.css (which base_auth.html does not
   load). New v2 modals on auth pages use .modal-overlay/.modal-card
   from components.css instead — see signup.html's ToU modal. */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.4);
  z-index: 70;
  overflow: auto;
  padding: var(--s-8) var(--s-4);
}
.modal .modal-content {
  background: var(--c-panel);
  margin: 0 auto;
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  max-width: 720px;
  position: relative;
}
.modal .close {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 22px;
  line-height: 1;
  color: var(--c-fg-muted);
  cursor: pointer;
}
.modal .close:hover { color: var(--c-fg); }
.modal .modalheader {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--c-fg);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-4);
}
.modal .lead { font-size: var(--fs-13); color: var(--c-fg); line-height: 1.55; }
.modal .lead h3 { font-size: var(--fs-14); font-weight: 600; margin: var(--s-4) 0 var(--s-2); }
.modal .lead p { margin: 0 0 var(--s-3); }
.modal .lead ul { margin: 0 0 var(--s-3) var(--s-5); padding: 0; }

/* Long-form ToU body inside the v2 .modal-card on signup. */
.tou-body {
  max-height: 60vh;
  overflow-y: auto;
  font-size: var(--fs-13);
  color: var(--c-fg);
  line-height: 1.55;
}
.tou-body h6 {
  font-size: var(--fs-14);
  font-weight: 600;
  margin: var(--s-5) 0 var(--s-2);
}
.tou-body p { margin: 0 0 var(--s-3); }
.tou-body ul { margin: 0 0 var(--s-3) var(--s-5); padding: 0; }

/* Mobile breakpoint */
@media (max-width: 480px) {
  body.auth-body { padding: var(--s-4) var(--s-3); }
  .auth-card { padding: var(--s-6) var(--s-4); }
  .auth-hero .auth-title { font-size: var(--fs-22); }
  /* Match the mobile card's reduced horizontal padding so the rule sits
     flush with the card edges instead of overshooting by 8px. */
  .auth-divider {
    margin-left: calc(var(--s-4) * -1);
    margin-right: calc(var(--s-4) * -1);
  }
}