/* ── Auth — Component-specific styles ────────────────────────────────────────── */
/* Shared patterns (.emp-*) are in global.css. HTML elements use both emp-* and eauth-* classes. */
/* Component-specific: pill role toggle, input icons, password strength, toggle link */

/* ── Heading / Subtitle aliases ─────────────────────────────────────────────── */
.eauth-heading { text-align: center; }
.eauth-sub     { text-align: center; }

/* ── Wrapper (narrower than standard) ────────────────────────────────────────── */
.eauth-wrap {
  max-width: 420px;
  /* .emp-wrap provides base layout; auth overrides width */
}

/* ── Header (centered — auth-specific) ──────────────────────────────────────── */
.eauth-header {
  text-align: center;
  margin-bottom: 28px;
}
/* .emp-page-title and .emp-page-subtitle provide base styles; auth centers them */

/* ── Role tabs (pill toggle — auth-specific, not standard tabs) ──────────────── */
.eauth-tabs {
  display: flex;
  background: var(--emp-cream);
  border: 1px solid var(--emp-border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
}
.eauth-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--emp-muted);
  cursor: pointer;
  border-radius: 9px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  text-align: center;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.eauth-tab--active {
  background: #fff;
  color: var(--emp-coral);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.eauth-tab:not(.eauth-tab--active):hover {
  color: var(--emp-charcoal);
  background: rgba(255,255,255,0.5);
}
.eauth-tab:focus-visible {
  outline: 2px solid var(--emp-coral);
  outline-offset: 2px;
}

/* ── Fields & Labels ─────────────────────────────────────────────────────────── */
/* .emp-field and .emp-label provide base styles; auth overrides specific properties */
.eauth-field {
  margin-bottom: 16px;
}
.eauth-label {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}

/* ── Input with icon (auth-specific pattern) ─────────────────────────────────── */
.eauth-input-wrap {
  position: relative;
}
.eauth-input-wrap .eauth-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.4;
  pointer-events: none;
}
.eauth-input-wrap .eauth-input {
  padding-left: 40px;
}
.eauth-input-wrap .eauth-input--has-eye {
  padding-right: 42px;
}

/* ── Eye toggle ──────────────────────────────────────────────────────────────── */
.eauth-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--emp-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.eauth-eye:hover { opacity: 1; }
.eauth-eye:focus-visible {
  outline: 2px solid var(--emp-coral);
  outline-offset: 2px;
}
.eauth-eye svg   { width: 18px; height: 18px; display: block; }

/* ── Auth input overrides ──────────────────────────────────────────────────────── */
.eauth-input {
  background: #fff;                        /* override emp-input cream background */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);  /* auth-specific subtle shadow */
  padding: 12px 14px;                      /* override emp-input padding for auth */
}
.eauth-input:focus {
  border-color: var(--emp-coral);
  box-shadow: 0 0 0 3px rgba(224, 120, 86, 0.12);
}
.eauth-input:focus-visible {
  outline: 2px solid var(--emp-coral);
  outline-offset: 2px;
}

/* ── Password strength ───────────────────────────────────────────────────────── */
.eauth-strength {
  margin-top: 8px;
}
.eauth-strength-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
}
.eauth-strength-bar span {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: var(--emp-border);
  transition: background 0.2s;
}
.eauth-strength-bar span.active-1 { background: #E53935; }
.eauth-strength-bar span.active-2 { background: #FB8C00; }
.eauth-strength-bar span.active-3 { background: #FDD835; }
.eauth-strength-bar span.active-4 { background: #43A047; }
.eauth-strength-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--emp-muted);
  letter-spacing: 0.3px;
}
.eauth-strength-text.s1 { color: #E53935; }
.eauth-strength-text.s2 { color: #FB8C00; }
.eauth-strength-text.s3 { color: #FDD835; }
.eauth-strength-text.s4 { color: #43A047; }

/* ── Confirm password match hint ─────────────────────────────────────────────── */
.eauth-match-hint {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  min-height: 14px;
}
.eauth-match-hint.match   { color: #43A047; }
.eauth-match-hint.nomatch { color: #E53935; }

/* ── Button ────────────────────────────────────────────────────────────────────── */
/* .emp-btn and .emp-btn--coral provide base button styles */
.eauth-btn {
  width: 100%;
  padding: 13px;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(224, 120, 86, 0.30);
}
.eauth-btn:hover {
  opacity: 0.92;
  box-shadow: 0 4px 14px rgba(224, 120, 86, 0.38);
}
.eauth-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.eauth-btn:focus-visible {
  outline: 2px solid var(--emp-coral);
  outline-offset: 2px;
}

/* ── Alert ──────────────────────────────────────────────────────────────────────── */
/* .emp-alert and .emp-alert--error provide base alert styles; auth adds left border */
.eauth-alert {
  border-left: 3px solid var(--emp-coral);
}

/* ── Toggle ──────────────────────────────────────────────────────────────────── */
.eauth-toggle {
  text-align: center;
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--emp-muted);
}
.eauth-toggle-btn {
  background: none;
  border: none;
  color: var(--emp-coral-dark);  /* Contrast fix — darker coral for WCAG AA */
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.eauth-toggle-btn:hover {
  text-decoration: underline;
}
.eauth-toggle-btn:focus-visible {
  outline: 2px solid var(--emp-coral);
  outline-offset: 2px;
}

/* ── Field-level errors ──────────────────────────────────────────────────────── */
.eauth-input--error {
  border-color: var(--emp-danger) !important;
}
.eauth-input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.eauth-field-error {
  font-size: 11px;
  font-weight: 600;
  color: var(--emp-danger);
  margin-top: 5px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.4;
}
.eauth-field-error svg { flex-shrink: 0; margin-top: 1px; }

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .eauth-wrap { padding: 0 12px; }
}