/*
 * Codeliance Design System — auth screens (COD-305).
 * ============================================================================
 * Login / signup / password-reset live OUTSIDE the authenticated app shell, so
 * they render on base_auth.html (no sidebar, no header) rather than base.html.
 * This file owns only the auth PAGE SHELL — the centered light-surface layout,
 * the brand lockup, and a few auth-specific compositions (path cards, status
 * blocks, message banners). The controls themselves — buttons, inputs, labels,
 * validation errors — come from the shared .ds-* component layer in
 * design-system-components.css and are NOT redefined here.
 *
 * Every value reads from a named token in design-system-tokens.css — no raw hex
 * or pixel numbers, same convention as the rest of the design system. Load order
 * (see base_auth.html): tokens.css FIRST, then components, then this.
 * ============================================================================
 */

/* ── Box-sizing reset ─────────────────────────────────────────────────────────
   base_auth.html loads only the Bootstrap ICON font, not bootstrap.min.css, so
   (unlike base.html) there is no global `* { box-sizing: border-box }` reset.
   Without it every width:100% control (.ds-input / .ds-textarea / .ds-btn) would
   overflow its container by its own padding + border — the auth shell owns that
   reset itself. Scoped to .auth-body so it can't leak if auth.css is ever reused. */
.auth-body,
.auth-body *,
.auth-body *::before,
.auth-body *::after {
  box-sizing: border-box;
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  margin: 0;
  background: var(--gray-bg);
  font-family: var(--sans);
  color: var(--dark);
  display: flex;
  flex-direction: column;
}
.auth-shell {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-5);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-8);
}
/* Multi-field signup screens need more room than a two-field login. */
.auth-card--wide { max-width: 640px; }

/* ── Brand lockup ─────────────────────────────────────────────────────────── */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
  font-weight: 800;
  font-size: var(--fs-section);
  letter-spacing: -0.01em;
  color: var(--blue);
  text-decoration: none;
}
.auth-brand__stage {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem;
}

/* ── Header (title + subtitle) ────────────────────────────────────────────── */
.auth-header {
  text-align: center;
  margin-bottom: var(--sp-7);
}
.auth-title {
  margin: 0;
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--dark);
}
.auth-subtitle {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--text-muted);
}

/* ── Form layout ──────────────────────────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
/* Line the label / hint / error text up with the input's text, which the input
   indents by its own horizontal padding (--ds-input padding is 0.45rem 0.75rem).
   The .ds-input border still spans the full field width; only the text aligns. */
.auth-form .ds-label,
.auth-form .ds-hint,
.auth-form .ds-form-error {
  padding-left: 0.75rem;
}

/* Side-by-side fields (first/last name, password/confirm) that stack when narrow. */
.auth-form__row {
  display: flex;
  gap: var(--sp-4);
}
.auth-form__row > * {
  flex: 1;
  min-width: 0;
}
@media (max-width: 520px) {
  .auth-form__row { flex-direction: column; gap: var(--sp-5); }
}

/* Grouped section within a longer form (company info / your info). */
.auth-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.auth-section__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  /* Line the heading TEXT up with the field labels/inputs below (input's 0.75rem
     text padding). The icon is pulled back into the gutter (see below) so only the
     text aligns, not the icon. */
  padding-left: 0.75rem;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--dark);
}
/* Fixed-width icon pulled left by (its width + the flex gap) so it hangs in the
   gutter and the heading text lands at 0.75rem, aligned with the labels. */
.auth-section__title i {
  flex-shrink: 0;
  width: 1rem;
  margin-left: calc(-1rem - var(--sp-2));
  color: var(--blue);
}

/* Full-width CTA — the shared .ds-btn is inline-flex; auth CTAs span the card. */
.ds-btn.auth-btn-block {
  width: 100%;
  justify-content: center;
}

/* ── Secondary links (forgot password, sign up, back to login) ────────────── */
.auth-links {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.auth-links a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }

/* ── In-card notice panels (role explainer, free-period note) ─────────────── */
.auth-note {
  border: 1px solid var(--blue-light);
  border-radius: var(--r-sm);
  background: var(--blue-pale);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  color: var(--dark);
}
.auth-note--muted {
  border-color: var(--border-solid);
  background: var(--gray-bg);
  color: var(--text-muted);
}
.auth-note__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-weight: 700;
  color: var(--dark);
}
.auth-note ul {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-6);
}

/* ── Message banners (Django messages + non-field errors) ─────────────────── */
.auth-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
}
.auth-alert i { flex-shrink: 0; margin-top: 0.1rem; }
.auth-alert--error   { background: var(--red-bg);    border-color: var(--red-border);   color: var(--red-text); }
.auth-alert--warning { background: var(--amber-bg);  border-color: var(--amber-border); color: var(--amber-text); }
.auth-alert--success { background: var(--green-bg);  border-color: var(--green-border); color: var(--green); }
.auth-alert--info,
.auth-alert--debug   { background: var(--blue-pale); border-color: var(--blue-light);   color: var(--blue); }

/* ── Status confirmation block (password reset sent / complete) ───────────── */
.auth-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.auth-status__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.auth-status__icon--info    { background: var(--blue-pale); border: 1px solid var(--blue-light);   color: var(--blue); }
.auth-status__icon--success { background: var(--green-bg);  border: 1px solid var(--green-border); color: var(--green); }
.auth-status__title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--dark);
}
.auth-status__text {
  margin: 0;
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--text-muted);
}

/* ── Path-selection cards (get started) ───────────────────────────────────── */
.auth-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 640px) {
  .auth-paths { grid-template-columns: 1fr; }
}
.auth-path {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
  background: var(--gray-bg);
  padding: var(--sp-6);
}
.auth-path__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: var(--blue-pale);
  border: 1px solid var(--blue-light);
  color: var(--blue);
}
.auth-path__title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--dark);
}
.auth-path__text {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.auth-path__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--dark);
}
.auth-path__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.auth-path__list i { color: var(--green); }
.auth-path .ds-btn { margin-top: auto; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.auth-footer {
  flex-shrink: 0;
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  font-size: var(--fs-meta);
  color: var(--text-sub);
}
.auth-footer a { color: var(--text-muted); }