/*
 * Authentication screens — Login (OTP-first + password), Register,
 * Forgot/Reset Password, Verify Email. Ported from the design system's
 * auth.jsx (resources/claude-design/ecoChain-design-system/) into
 * plain CSS classes — see docs/modules/authentication/ui.md for the
 * screen-by-screen spec these classes implement.
 *
 * Requires tokens.css to be loaded first (it carries the shared
 * `[hidden]` override every `hidden`-toggled component here relies on).
 */

/* ---------- Smooth scrolling ----------
   auth.css is the shared base loaded on every public page outside the
   app shell (home, legal, 404, auth screens — see functions.php's
   enqueue blocks), so this is the one place that reaches all of them
   without also affecting /app/*. Governs both in-page hash jumps (e.g.
   legal pages' table-of-contents links, the homepage's #product/#serve
   nav) and any JS-triggered scrollIntoView(). */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Layout: split-screen shell ---------- */
/* height (not min-height) + overflow: hidden — client feedback
   (FB-2026-07-24-06/11): Sign in/Register must fit one screen, no
   page-level scroll. .eco-auth-form-panel keeps its own overflow-y:
   auto below as an internal safety valve only, for a viewport too
   short to fit the form at all — not meant to be reachable on a
   normal-sized screen. */
.eco-auth-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--eco-white);
}

.eco-auth-brand {
  width: 44%;
  max-width: 560px;
  flex-shrink: 0;
  background: var(--eco-gradient);
  color: var(--eco-white);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.eco-auth-brand__circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.eco-auth-brand__circle--lg {
  width: 420px;
  height: 420px;
  border: 60px solid rgba(255, 255, 255, 0.05);
  right: -160px;
  top: -120px;
}
.eco-auth-brand__circle--sm {
  width: 260px;
  height: 260px;
  border: 46px solid rgba(188, 237, 9, 0.1);
  left: -110px;
  bottom: -60px;
}

.eco-auth-brand__logo-link {
  align-self: flex-start;
  display: inline-block;
  position: relative;
}
.eco-auth-brand__logo {
  height: 111px;
  width: 164px;
  display: block;
}
.eco-auth-brand__powered {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.eco-auth-brand__content {
  /* No longer margin-top:auto (was pushing this to the bottom of the
     flex column) — the title now sits right under the logo, with the
     .eco-home-panel__stage collage following after it instead. */
  margin: 16px 0 0;
  position: relative;
}

.eco-auth-brand__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-sm);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--eco-white);
  margin: 0;
}
.eco-auth-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.eco-auth-form-inner {
  margin: auto;
  width: 100%;
  max-width: 420px;
  /* Reduced from --space-12 top/bottom (client feedback — must fit
     one screen without scrolling; Register in particular has grown a
     field since this was tuned, see FB-2026-07-24-03/06/11). */
  padding: var(--space-8) var(--space-10);
}
.eco-auth-foot {
  padding: var(--space-6) var(--space-10);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .eco-auth-brand { display: none; }
  .eco-auth-form-panel { width: 100%; }
}

/* ---------- Head block (eyebrow / title / sub) ---------- */
.eco-auth-head {
  margin-bottom: var(--space-8);
}
.eco-auth-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display-md);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: 0;
}
.eco-eyebrow + .eco-auth-head__title { margin-top: 8px; }
.eco-auth-head__sub {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.5;
}
.eco-auth-head__sub strong { color: var(--text-strong); }
/* "New to EcoChain?" / "Already have an account?" — moved from the
   shared shell footer into the head (client feedback,
   FB-2026-07-24-07/17), directly below the sub line. */
.eco-auth-head__cta {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---------- Alerts ---------- */
.eco-alert {
  margin-bottom: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
}
.eco-alert svg { flex-shrink: 0; margin-top: 1px; }
.eco-alert--danger {
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid rgba(229, 72, 77, 0.25);
  color: var(--status-danger);
}
.eco-alert--danger .eco-alert__link { color: var(--status-danger); font-weight: 700; text-decoration: underline; }
.eco-alert--strong { font-weight: 600; }

/* ---------- Form / fields ---------- */
.eco-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.eco-field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-body);
  margin-bottom: 6px;
}
/* Required-field marker (client feedback, FB-2026-07-24-12 — Register's
   required fields need a red asterisk, not just plain text). */
.eco-field__required {
  color: var(--status-danger);
}
/* Label variant that pushes a trailing element (the info icon below)
   to the far right — a scoped modifier, not a change to the shared
   `.eco-field__label` base, since that class is also used by
   company.js/password-field.js/other auth pages with no trailing icon. */
.eco-field__label--info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Field-level info tooltip (client feedback, FB-2026-07-24-13 —
   Company name needs a tooltip explaining it should match the business
   registration). Pure CSS, `::after` + `attr(data-tooltip)` — safe here
   (unlike the sidebar's collapsed-state tooltip, which needed a JS/
   fixed-position fix) since this field isn't inside any container that
   forces `overflow-x` via a sibling `overflow-y`, so nothing clips it. */
.eco-field__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--eco-slate-100);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: help;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Signature neon-green tooltip (project owner direction, 2026-07-26) —
   dark indigo text on the brand's signal green, same high-contrast
   pairing already used for solid-green surfaces elsewhere, not
   white-on-green (poor contrast). */
.eco-field__info:hover::after,
.eco-field__info:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  width: max-content;
  max-width: 220px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--eco-green);
  color: var(--eco-indigo);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 20;
}
.eco-field__control { position: relative; }
.eco-field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: flex;
  pointer-events: none;
}
.eco-input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-strong);
  background: var(--eco-white);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 14px 0 42px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.eco-input:focus {
  border-color: var(--eco-indigo);
  box-shadow: var(--shadow-focus);
}
.eco-input--error { border-color: var(--status-danger); }
.eco-input--no-icon { padding-left: 14px; }
.eco-field__error {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--status-danger);
}
.eco-field__hint {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Password field: input + show/hide toggle */
.eco-password-toggle {
  position: absolute;
  right: 12px;
  top: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
}
.eco-password-strength {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.eco-password-strength__bars {
  display: flex;
  gap: 4px;
  flex: 1;
}
.eco-password-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--eco-slate-200);
  transition: background var(--dur-fast) var(--ease-standard);
}
.eco-password-strength__bar--filled-weak { background: var(--status-danger); }
.eco-password-strength__bar--filled-fair { background: var(--eco-orange); }
.eco-password-strength__bar--filled-good { background: var(--eco-blue); }
.eco-password-strength__bar--filled-strong { background: var(--status-success); }
.eco-password-strength__label {
  font-size: var(--text-xs);
  font-weight: 600;
  min-width: 42px;
  color: var(--text-muted);
}

/* Checkbox */
.eco-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-body);
}
.eco-checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: var(--border-width-strong) solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.eco-checkbox__input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
/* The check SVG is always in the markup (see e.g. register.js/login.js/
   shell.js) — hidden here by default and only shown once :checked,
   rather than relying on .eco-checkbox__box's own background/border
   change alone. Bug found live: the checkmark had no visibility rule
   of its own, so it rendered at full opacity (inheriting currentColor
   from .eco-checkbox's text color) even on an unchecked box. */
.eco-checkbox__box svg {
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.eco-checkbox__input:checked + .eco-checkbox__box {
  background: var(--eco-green);
  border-color: var(--eco-green);
  color: var(--eco-indigo);
}
.eco-checkbox__input:checked + .eco-checkbox__box svg {
  opacity: 1;
}
.eco-checkbox__wrap { position: relative; display: inline-flex; }

/* ---------- Buttons ---------- */
.eco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: var(--border-width-strong) solid transparent;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), background var(--dur-fast);
  text-decoration: none;
  /* Safe default — same box as --sm. A .eco-btn used without a
     --sm/--md/--lg/--icon size modifier (a real bug found twice
     already: the Company Profile wizard's footer buttons and Admin
     CMS's pagination arrows both shipped with zero padding) now still
     renders at a sane size instead of silently collapsing to 0. Always
     add an explicit size modifier for a new button — this default is
     a safety net, not a license to skip it. */
  padding: 8px 18px;
  font-size: var(--text-sm);
}
.eco-btn:active { transform: scale(0.97); }
.eco-btn:focus-visible { box-shadow: var(--shadow-focus); }
.eco-btn[disabled] { cursor: not-allowed; opacity: 0.7; }

.eco-btn--sm { padding: 8px 18px; font-size: var(--text-sm); }
.eco-btn--md { padding: 11px 22px; font-size: var(--text-sm); }
.eco-btn--lg { padding: 14px 24px; font-size: var(--text-md); }
.eco-btn--block { width: 100%; }

.eco-btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
}
.eco-btn--primary:hover:not([disabled]) { filter: brightness(0.94); }

.eco-btn--outline {
  background: transparent;
  border-color: var(--eco-indigo);
  color: var(--eco-indigo);
}
.eco-btn--outline:hover:not([disabled]) { background: var(--eco-slate-50); }

.eco-btn--ghost {
  background: transparent;
  color: var(--text-body);
  border-color: transparent;
}

.eco-btn--secondary {
  background: var(--action-secondary);
  color: var(--action-secondary-text);
}
.eco-btn--secondary:hover:not([disabled]) { filter: brightness(0.94); }

/* Error state for an OTP verify/submit button (client feedback,
   staging review round 2 — FB-2026-08-03-02) — replaces a separate
   .eco-field__error line: on a failed verify, the button's own label
   becomes the error message instead of a line of text elsewhere on
   the screen. Reverts to --primary on the next verify attempt. */
.eco-btn--danger {
  background: var(--status-danger);
  color: var(--eco-white);
}
.eco-btn--danger:hover:not([disabled]) { filter: brightness(0.94); }

/* White-on-dark — for a secondary CTA sitting on an indigo surface
   (e.g. the marketing site's Hero), where --outline's indigo text
   would be invisible. */
.eco-btn--inverse {
  background: var(--eco-white);
  color: var(--eco-indigo);
}
.eco-btn--inverse:hover:not([disabled]) { filter: brightness(0.94); }

.eco-btn__spinner {
  width: 18px;
  height: 18px;
  animation: eco-spin var(--dur-slow) linear infinite;
  flex-shrink: 0;
}
@keyframes eco-spin { to { transform: rotate(360deg); } }

/* ---------- Sign-in alternate-method link (client feedback
   FB-2026-07-24-08/010: OTP is the only default flow — the previous
   Code/Password tab switcher above is gone, replaced by this one-way
   text link below whichever form is currently shown) ---------- */
.eco-auth-alt-method {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---------- OTP code boxes ---------- */
.eco-otp-boxes {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.eco-otp-box {
  width: 52px;
  height: 60px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text-strong);
  border: var(--border-width-strong) solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--eco-white);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.eco-otp-box--filled { border-color: var(--eco-indigo); }
.eco-otp-box--error { border-color: var(--status-danger); }
.eco-otp-box--disabled {
  background: var(--eco-slate-100);
  opacity: 0.6;
}
.eco-otp-countdown {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}
.eco-otp-countdown strong { color: var(--text-body); }

/* ---------- Success state ---------- */
.eco-success-check {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--eco-green);
  color: var(--eco-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.eco-success-check--sm { width: 44px; height: 44px; margin-bottom: 0; }
.eco-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.eco-icon-circle--blue {
  background: var(--eco-blue-50);
  color: var(--eco-blue);
}

/* ---------- Links ---------- */
.eco-link { font-weight: 700; }
.eco-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

/* ---------- User menu ---------- */
/* Shared avatar/dropdown chrome for a logged-in visitor — used by the
   /app/* shell header (templates/page-app.php) and front-page.php's
   header when a logged-in visitor lands on the marketing homepage. */

.eco-app-user-menu {
  position: relative;
}
.eco-app-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--border-width) solid var(--border-subtle);
  background: var(--eco-white);
  border-radius: var(--radius-pill);
  padding: 4px 10px 4px 4px;
  cursor: pointer;
}
.eco-app-user-menu__trigger:hover {
  background: var(--eco-slate-50);
}
.eco-app-user-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--eco-gradient);
  color: var(--eco-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
}
.eco-app-user-menu__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-strong);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eco-app-user-menu__chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

.eco-app-user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 210px;
  background: var(--eco-white);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
}
.eco-app-user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  box-sizing: border-box;
}
.eco-app-user-menu__item:hover {
  background: var(--eco-slate-50);
}
.eco-app-user-menu__item--danger {
  color: var(--status-danger);
}
.eco-app-user-menu__sep {
  height: var(--border-width);
  background: var(--border-subtle);
  margin: 5px 0;
}