/*
 * fifteen-password-meter.css — styling for the shared _PasswordStrengthMeter
 * component (fifteen-password-meter.js). Uses Bootstrap/Metronic CSS variables
 * (--bs-*) so it inherits the current light/dark theme automatically. Self
 * contained: no external fonts or assets (CSP-safe).
 */

.fx-pwmeter {
    display: block;
}

.fx-pwmeter .fx-pwmeter-inputrow {
    flex-wrap: nowrap;
}

.fx-pwmeter .fx-pwmeter-toggle {
    border: 1px solid var(--bs-gray-300);
    border-left: 0;
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
}

.fx-pwmeter .fx-pwmeter-toggle:hover {
    color: var(--bs-primary);
}

/* Strength bar ---------------------------------------------------------- */
.fx-pwmeter-bar {
    height: 6px;
    border-radius: 4px;
    background: var(--bs-gray-200);
    overflow: hidden;
    margin-top: 0.5rem;
}

.fx-pwmeter-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width .18s ease, background-color .18s ease;
    background: var(--bs-gray-400);
}

.fx-pwmeter-bar-fill.fx-pwmeter-lvl-1 { background: var(--bs-danger); }
.fx-pwmeter-bar-fill.fx-pwmeter-lvl-2 { background: var(--bs-warning); }
.fx-pwmeter-bar-fill.fx-pwmeter-lvl-3 { background: var(--bs-info); }
.fx-pwmeter-bar-fill.fx-pwmeter-lvl-4 { background: var(--bs-success); }

.fx-pwmeter-strength {
    margin-top: 0.25rem;
    min-height: 1em;
    font-weight: 600;
}

/* Requirements checklist ------------------------------------------------ */
.fx-pwmeter-rules {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.15rem 0.9rem;
}

.fx-pwmeter-rule {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    transition: color .12s ease;
}

.fx-pwmeter-rule .fx-pwmeter-rule-ico {
    font-size: 0.9rem;
    color: var(--bs-gray-400);
    width: 1rem;
    text-align: center;
    transition: color .12s ease;
}

.fx-pwmeter-rule.is-met {
    color: var(--bs-success);
}

.fx-pwmeter-rule.is-met .fx-pwmeter-rule-ico {
    color: var(--bs-success);
}

/* Gated submit — a subtle cue that the button is intentionally disabled. */
.fx-pwmeter-blocked {
    cursor: not-allowed;
}