/*
 * 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).
 */

/* ---------- Layout: split-screen shell ---------- */
.eco-auth-layout {
  display: flex;
  min-height: 100vh;
  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__tagline {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--space-2);
}

.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 {
  height: 111px;
  width: 164px;
  align-self: flex-start;
  position: relative;
}

.eco-auth-brand__content {
  margin-top: auto;
  position: relative;
}

.eco-auth-brand__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display-md);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--eco-white);
  margin: 0;
}
.eco-auth-brand__title em {
  font-style: normal;
  color: var(--eco-green);
}

.eco-auth-brand__desc {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.85);
  max-width: 340px;
  margin-top: var(--space-4);
  line-height: 1.55;
}

.eco-auth-brand__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
  list-style: none;
  padding: 0;
}
.eco-auth-brand__bullet {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.92);
}
.eco-auth-brand__bullet-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--eco-green);
  color: var(--eco-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 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;
  padding: var(--space-12) 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); }

/* ---------- 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;
}
.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); }

/* 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); } }

/* ---------- Method tabs (Code / Password) ---------- */
.eco-tabs {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--eco-slate-100);
  margin-bottom: var(--space-6);
}
.eco-tab {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-sm);
  background: transparent;
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease-standard);
}
.eco-tab--active {
  background: var(--eco-green);
  color: var(--eco-indigo);
}

/* ---------- 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);
}