/* ============================================
   PASSWORT-STÄRKEANZEIGE
   Eigenständig gescoped (.pw-field), damit es sowohl im Dashboard (body.ui2026)
   als auch auf den Auth-Seiten (Material-Layout ohne Design-Tokens) funktioniert.
   ============================================ */
.pw-field {
  --pw-weak: #dc2626;
  --pw-medium: #ED8B16;
  --pw-strong: #1f8a5b;
  --pw-empty: #E9ECEF;
  --pw-text: #343A40;
  --pw-muted: #868E96;
  position: relative;
}

.pw-input-wrap {
  position: relative;
  width: 100%;
}

.pw-input-wrap input {
  padding-right: 44px !important;
}

/* Auge-Toggle — z-index über dem Input, Material gibt .form-control z-index 5 */
.pw-toggle {
  position: absolute;
  z-index: 6;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--pw-muted);
  cursor: pointer;
  border-radius: 8px;
  padding: 0;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: var(--pw-text);
  outline: none;
  background: rgba(0, 0, 0, 0.04);
}

.pw-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pw-toggle .pw-icon-hide { display: none; }
.pw-toggle[aria-pressed="true"] .pw-icon-show { display: none; }
.pw-toggle[aria-pressed="true"] .pw-icon-hide { display: block; }

/* Wiederholung weicht ab */
.pw-mismatch {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pw-weak);
}

.pw-input--mismatch {
  border-color: var(--pw-weak) !important;
}

/* Abstand zwischen erstem und zweitem Feld */
.pw-slot + .pw-slot {
  margin-top: 16px;
}

/* Stärke-Block */
.pw-strength {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--pw-empty);
  transition: border-color 0.25s ease;
}

.pw-strength-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.pw-strength-title {
  font-weight: 700;
  color: var(--pw-text);
}

.pw-strength-level {
  font-weight: 700;
  color: var(--pw-muted);
}

.pw-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}

.pw-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--pw-empty);
  transition: background 0.25s ease;
}

/* Regel-Checkliste */
.pw-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pw-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pw-muted);
  transition: color 0.2s ease;
}

.pw-rule-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pw-rule .pw-rule-icon--met { display: none; }

.pw-rule[data-state="met"] { color: var(--pw-strong); }
.pw-rule[data-state="met"] .pw-rule-icon--met { display: block; }
.pw-rule[data-state="met"] .pw-rule-icon--unmet { display: none; }

.pw-rule[data-state="unmet"] { color: var(--pw-weak); }

/* Zustände */
.pw-field[data-pw-state="weak"] .pw-strength { border-top-color: var(--pw-weak); }
.pw-field[data-pw-state="weak"] .pw-strength-level { color: var(--pw-weak); }
.pw-field[data-pw-state="weak"] .pw-bar:nth-child(1) { background: var(--pw-weak); }

.pw-field[data-pw-state="medium"] .pw-strength { border-top-color: var(--pw-medium); }
.pw-field[data-pw-state="medium"] .pw-strength-level { color: var(--pw-medium); }
.pw-field[data-pw-state="medium"] .pw-bar:nth-child(-n+2) { background: var(--pw-medium); }

.pw-field[data-pw-state="strong"] .pw-strength { border-top-color: var(--pw-strong); }
.pw-field[data-pw-state="strong"] .pw-strength-level { color: var(--pw-strong); }
.pw-field[data-pw-state="strong"] .pw-bar { background: var(--pw-strong); }

/* Material-Layout (Auth-Seiten): der Toggle sitzt als Geschwister des Inputs in der input-group,
   das schwebende Label und die Fokus-Linie von Material bleiben unverändert. */
.pw-field--static .input-group.input-group-static {
  position: relative;
}

.pw-field--static .input-group.input-group-static .form-control {
  padding-right: 40px;
}

.pw-field--static .input-group.input-group-static .pw-toggle {
  top: auto;
  bottom: 2px;
  right: 0;
  transform: none;
}