/**
 * password-strength.css
 * ----------------------
 * Barra de força de senha injetada pelo password-strength.js. Reutiliza os
 * tokens --danger/--warning/--success já definidos em tokens.css (mesmas
 * cores usadas em alertas do painel), então acompanha claro/escuro sem regra
 * própria de dark mode.
 */

.password-strength {
    margin-top: 6px;
}

.password-strength-bars {
    display: flex;
    gap: 4px;
    height: 4px;
}

.password-strength-bars span {
    flex: 1 1 0;
    border-radius: 999px;
    background: var(--border, #DCE2EE);
    transition: background-color .15s ease;
}

.password-strength-bars span.filled.lvl-0,
.password-strength-bars span.filled.lvl-1 {
    background: var(--danger, #C7333B);
}

.password-strength-bars span.filled.lvl-2 {
    background: var(--warning, #7A5B00);
}

.password-strength-bars span.filled.lvl-3,
.password-strength-bars span.filled.lvl-4 {
    background: var(--success, #1B8F57);
}

.password-strength-label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    min-height: 14px;
    color: var(--text-secondary, #4C5C74);
}

.password-strength-label.lvl-0,
.password-strength-label.lvl-1 {
    color: var(--danger, #C7333B);
}

.password-strength-label.lvl-2 {
    color: var(--warning, #7A5B00);
}

.password-strength-label.lvl-3,
.password-strength-label.lvl-4 {
    color: var(--success, #1B8F57);
}

@media (prefers-reduced-motion: reduce) {
    .password-strength-bars span {
        transition: none;
    }
}