/* ══════════════════════════════════════════════════════════════════
   Auth funnel polish — Cycle 6 (P1 #3 AF-A onwards)
   Shared styles for Login / Register / Profile screens:
     - Show/hide password toggle
     - Password-strength meter (Register only — AF-B)
     - Form-level role=alert error summary
   ══════════════════════════════════════════════════════════════════ */

/* ── Password input + show/hide toggle (AF-A, AF-B) ─────────────
   The toggle button sits inside the same flex row as the input so
   clicking it doesn't shift focus visibly. We rely on aria-pressed
   for the button state and aria-label that flips between "Show
   password" / "Hide password" so screen readers track the toggle.
   ────────────────────────────────────────────────────────────────── */

.wasla-auth-password-wrap {
  position: relative;
}

.wasla-auth-password-wrap > .form-control {
  /* Reserve room on the trailing edge for the toggle button. Using
     padding-inline-end keeps RTL working without separate rules. */
  padding-inline-end: 2.75rem;
}

.wasla-auth-password-toggle {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-muted, #6c757d);
  cursor: pointer;
  border-radius: 0 0.375rem 0.375rem 0;
}

[dir="rtl"] .wasla-auth-password-toggle {
  border-radius: 0.375rem 0 0 0.375rem;
}

.wasla-auth-password-toggle:hover,
.wasla-auth-password-toggle:focus-visible {
  color: var(--brand-primary, #0557E7);
}

.wasla-auth-password-toggle:focus-visible {
  outline: 2px solid var(--brand-primary, #0557E7);
  outline-offset: -2px;
}

[data-bs-theme="dark"] .wasla-auth-password-toggle {
  color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .wasla-auth-password-toggle:hover,
[data-bs-theme="dark"] .wasla-auth-password-toggle:focus-visible {
  color: #93c5fd;
}

/* ── Password-strength meter (AF-B) ─────────────────────────────
   Renders only when JS detects keystrokes on the password input.
   The meter is a 4-segment bar; each segment fills based on score
   (length + character-class diversity). No external dependencies. */

.wasla-auth-strength-meter {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.wasla-auth-strength-segment {
  flex: 1 1 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  transition: background 0.15s ease;
}

.wasla-auth-strength-meter[data-score="1"] .wasla-auth-strength-segment:nth-child(1),
.wasla-auth-strength-meter[data-score="2"] .wasla-auth-strength-segment:nth-child(-n+2),
.wasla-auth-strength-meter[data-score="3"] .wasla-auth-strength-segment:nth-child(-n+3),
.wasla-auth-strength-meter[data-score="4"] .wasla-auth-strength-segment {
  background: var(--strength-color, #16a34a);
}

.wasla-auth-strength-meter[data-score="1"] {
  --strength-color: #dc2626; /* red */
}

.wasla-auth-strength-meter[data-score="2"] {
  --strength-color: #f59e0b; /* amber */
}

.wasla-auth-strength-meter[data-score="3"] {
  --strength-color: #84cc16; /* yellow-green */
}

.wasla-auth-strength-meter[data-score="4"] {
  --strength-color: #16a34a; /* green */
}

.wasla-auth-strength-label {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  color: var(--text-muted, #6c757d);
}

[data-bs-theme="dark"] .wasla-auth-strength-segment {
  background: rgba(255, 255, 255, 0.08);
}

/* Cycle 23 Lane A: --text-muted is undefined upstream so the hardcoded
   #6c757d fallback renders on dark — too dark against the auth card
   surface. Lift the strength-meter label to the dark muted tone. */
[data-bs-theme="dark"] .wasla-auth-strength-label { color: #9ca3af; }