/**
 * SalesDesk — Auth & Wizard Styles
 * T2 owns this file.
 *
 * Loads after global.css and components.css.
 * Contains ONLY styles unique to auth pages (login, register, verify, reset).
 * Never redefine :root vars or component classes here.
 * Never add inline <style> blocks to auth pages.
 *
 * Sections:
 *   1. Auth card shell
 *   2. Role selector grid (wizard step 1)
 *   3. Dealer search widget (wizard step 3 — sales exec)
 *   4. Pending approval notice
 *   5. Password strength indicator
 *   6. Address cascade hints
 *   7. Email display chip
 *   8. Role badge (small inline tag)
 *   9. Wizard success / pending screen
 *  10. Wizard buttons (overrides for full-width context)
 *  11. Footer / skip links
 *  12. Login page specifics
 *  13. Button loading states (auth-wide)
 */

/* ══════════════════════════════════════
   1. AUTH CARD SHELL
   ══════════════════════════════════════ */

/* Body centering — auth pages only */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg);
}

/* The card itself is defined in layout-auth.php inline style
   (max-width is dynamic via $cardMaxWidth variable).
   These extend it. */
.auth-heading { margin-bottom: 1.5rem; }
.auth-heading h1 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.2;
}
.auth-heading h1 em { font-style: italic; }
.auth-heading p { font-size: 13px; color: var(--muted); line-height: 1.6; }


/* ══════════════════════════════════════
   2. ROLE SELECTOR GRID (step 1)
   ══════════════════════════════════════ */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.role-label { cursor: pointer; }
.role-label input[type="radio"] { display: none; }

.role-card {
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: border-color .18s, background .18s;
  text-align: left;
}

.role-label input:checked + .role-card {
  border-color: var(--p);
  border-width: 1.5px;
  background: var(--p-light);
}

.role-icon  { font-size: 18px; margin-bottom: 5px; display: block; }
.role-title { font-size: 12px; font-weight: 600; color: var(--text); display: block; }
.role-sub   { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.3; }
.role-label input:checked + .role-card .role-title { color: var(--p); }


/* ══════════════════════════════════════
   3. DEALER SEARCH WIDGET (step 3 exec)
   ══════════════════════════════════════ */
.dealer-search-wrap { position: relative; }

.dealer-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
}
.dealer-results.open { display: block; }

.dealer-result-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.dealer-result-item:last-child { border-bottom: none; }
.dealer-result-item:hover { background: var(--p-light); }

.dealer-result-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dealer-result-meta { font-size: 11px; color: var(--faint); margin-top: 1px; }
.dealer-result-empty {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}

.dealer-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  background: var(--gr-bg);
  border: 1px solid var(--gr-b);
  border-radius: var(--r-md);
  margin-bottom: .6rem;
}
.dealer-selected-name { font-size: 13px; font-weight: 600; color: var(--green); flex: 1; }
.dealer-selected-clear {
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  font-family: var(--sans);
  padding: 0;
}


/* ══════════════════════════════════════
   4. PENDING APPROVAL NOTICE
   ══════════════════════════════════════ */
.pending-notice {
  background: var(--amb-bg);
  border: 1px solid var(--amb-b);
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin-bottom: 1.1rem;
  display: flex;
  gap: 10px;
}
.pending-notice-icon { color: var(--amber); flex-shrink: 0; margin-top: 1px; }
.pending-notice-title { font-size: 13px; font-weight: 600; color: var(--amber); margin-bottom: 3px; }
.pending-notice-body { font-size: 12px; color: var(--muted); line-height: 1.55; }


/* ══════════════════════════════════════
   5. PASSWORD STRENGTH INDICATOR
   ══════════════════════════════════════ */
.pw-reqs {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pw-req {
  font-size: 12px;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
.pw-req .r-icon { font-size: 10px; width: 12px; flex-shrink: 0; }
.pw-req.met { color: var(--green); }

.match-hint {
  font-size: 12px;
  color: var(--faint);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .2s;
}
.match-hint.ok { color: var(--green); }


/* ══════════════════════════════════════
   6. ADDRESS CASCADE HINTS
   ══════════════════════════════════════ */
.addr-hint {
  font-size: 12px;
  color: var(--muted);
  background: var(--p-light);
  border: 1px solid var(--p-b);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}


/* ══════════════════════════════════════
   7. EMAIL DISPLAY CHIP
   ══════════════════════════════════════ */
.email-display {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-size: 13px;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.email-change { font-size: 11px; color: var(--p); text-decoration: none; }
.email-change:hover { text-decoration: underline; }

/* Used in verify_email.php centred variant */
.email-chip {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  margin: 4px 0;
}


/* ══════════════════════════════════════
   8. ROLE BADGE (inline tag)
   ══════════════════════════════════════ */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-family: var(--mono);
  background: var(--p-light);
  color: var(--p);
  border: 1px solid var(--p-b);
  margin-bottom: 1.1rem;
}


/* ══════════════════════════════════════
   9. WIZARD SUCCESS / PENDING SCREEN
   ══════════════════════════════════════ */
.success-wrap { text-align: center; padding: .5rem 0; }

.success-icon {
  width: 60px; height: 60px;
  background: var(--gr-bg);
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--green);
}
.success-icon.pending { background: var(--amb-bg); color: var(--amber); }

.success-wrap h1 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  margin-bottom: 6px;
  line-height: 1.2;
}
.success-wrap h1 em { font-style: italic; }
.success-wrap > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.success-meta {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  text-align: left;
  margin-bottom: 1.25rem;
}
.success-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.success-meta-row:last-child { border-bottom: none; }
.success-meta-row span:first-child { color: var(--faint); }
.success-meta-row span:last-child {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
}

/* ══════════════════════════════════════
   10. WIZARD BUTTONS
   Full-width primary + secondary ghost
   ══════════════════════════════════════ */
.btn-auth {
  width: 100%;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--p);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: background .18s;
  margin-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  /* Stable width: prevent layout shift when text swaps to spinner */
  min-height: 46px;
}
.btn-auth:hover { background: var(--p-dark); text-decoration: none; }
.btn-auth:disabled { opacity: .45; cursor: not-allowed; }

.btn-auth-ghost {
  width: 100%;
  padding: 11px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  transition: background .15s, color .15s;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-auth-ghost:hover { background: var(--bg); color: var(--text); }


/* ══════════════════════════════════════
   11. FOOTER / SKIP LINKS
   ══════════════════════════════════════ */
.skip-link {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--faint);
}
.skip-link a { color: var(--muted); text-decoration: none; }
.skip-link a:hover { color: var(--text); text-decoration: underline; }

.foot-link {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 13px;
  color: var(--muted);
}
.foot-link a { color: var(--p); font-weight: 600; text-decoration: none; }
.foot-link a:hover { text-decoration: underline; }

/* Slug preview (broker desk step) */
.slug-preview {
  margin-top: 6px;
  font-size: 12px;
  color: var(--faint);
  font-family: var(--mono);
}
.slug-preview span { color: var(--p); }

/* Info box (CIPC upload hint, broker desk note) */
.info-box {
  background: var(--p-light);
  border: 1px solid var(--p-b);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  margin-bottom: 1.1rem;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}


/* ══════════════════════════════════════
   12. LOGIN PAGE SPECIFICS
   ══════════════════════════════════════ */
.login-heading { margin-bottom: 1.5rem; }
.login-heading h1 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 300;
  margin-bottom: 4px;
}
.login-heading h1 em { font-style: italic; }
.login-heading p { font-size: 13px; color: var(--muted); }

.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-size: 12px;
}
.login-footer a { color: var(--muted); text-decoration: none; }
.login-footer a:hover { color: var(--text); text-decoration: underline; }

/* Password field with toggle */
.pw-wrap { position: relative; }
.pw-wrap .finput { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.pw-toggle:hover { color: var(--muted); }

/* Reset password — email chip centred */
.reset-email-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-size: 13px;
  font-family: var(--mono);
  margin-bottom: 1rem;
  text-align: center;
  color: var(--text);
}


/* ══════════════════════════════════════
   13. BUTTON LOADING STATES (auth-wide)
   ══════════════════════════════════════ */

/*
 * Spinner keyframe — single shared animation for all auth loading states.
 * Uses the same DM Mono font-size rhythm as the rest of the auth kit.
 */
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/*
 * .btn-auth--loading
 * Applied by initAuthLoadingStates() on form submit.
 * Replaces button content with an inline spinner + status text
 * while keeping the button at its original width (min-height already set).
 */
.btn-auth--loading {
  /* Prevent pointer events while showing the spinner */
  pointer-events: none;
  /* Slightly reduced opacity to signal passivity without full disable look */
  opacity: .82;
  cursor: not-allowed;
}

/*
 * The spinner element injected by JS.
 * We use a CSS border trick so it inherits the button's white colour
 * without needing a separate icon font class.
 */
.btn-auth-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin .65s linear infinite;
  flex-shrink: 0;
}

/*
 * Ghost button variant — spinner colour matches the ghost text colour
 * rather than white, because the ghost background is transparent.
 */
.btn-auth-ghost--loading {
  pointer-events: none;
  opacity: .72;
  cursor: not-allowed;
}

.btn-auth-ghost--loading .btn-auth-spinner {
  border-color: rgba(100, 116, 139, .3); /* --muted at low opacity */
  border-top-color: var(--muted);
}