/* Password strength meter — see resources/views/components/frontend/password-strength.blade.php
   and resources/views/components/frontend/password-match.blade.php.

   The Filament panel ships its own Tailwind-scoped styles inside
   resources/views/filament/forms/components/password-strength-meter.blade.php,
   so nothing here needs to hold for the admin side. */

.password-strength {
    /* Track and ink */
    --ps-track: #eceef1;
    --ps-ring: #cbd2da;
    --ps-muted: #6b7280;
    --ps-ink: #1f2430;

    /* Level ramp. Amber deliberately sits in the brand's warm family (#F79836)
       so the mid state reads as part of the palette rather than a warning. */
    --ps-l1: #e5484d;
    --ps-l2: #f5a524;
    --ps-l3: #a3c614;
    --ps-l4: #17a45c;

    --ps-ok: #17a45c;
    --ps-level: var(--ps-l1);

    /* Collapsed until the field has a value. Animating grid-template-rows keeps
       the reveal smooth without hard-coding a height the content might outgrow. */
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    /* visibility keeps the collapsed checklist out of the accessibility tree —
       opacity and zero height alone still leave it readable by screen readers. */
    visibility: hidden;
    transition: grid-template-rows 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 180ms ease,
                margin-top 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 280ms;
}

.password-strength[data-state="filled"] {
    grid-template-rows: 1fr;
    margin-top: 12px;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s, 0s;
}

.password-strength__inner {
    min-height: 0;
    overflow: hidden;
}

/* Gauge -------------------------------------------------------------------- */

.password-strength__gauge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.password-strength__segments {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

.password-strength__segment {
    height: 5px;
    flex: 1 1 0;
    border-radius: 999px;
    background: var(--ps-track);
    transition: background-color 220ms ease;
}

/* Light up one segment per point scored. The staggered delay makes the gauge
   fill left-to-right rather than snapping all at once. */
.password-strength__segments[data-level="1"] .password-strength__segment:nth-child(-n + 1),
.password-strength__segments[data-level="2"] .password-strength__segment:nth-child(-n + 2),
.password-strength__segments[data-level="3"] .password-strength__segment:nth-child(-n + 3),
.password-strength__segments[data-level="4"] .password-strength__segment:nth-child(-n + 4) {
    background: var(--ps-level);
}

.password-strength__segment:nth-child(2) { transition-delay: 40ms; }
.password-strength__segment:nth-child(3) { transition-delay: 80ms; }
.password-strength__segment:nth-child(4) { transition-delay: 120ms; }

.password-strength[data-level="1"] { --ps-level: var(--ps-l1); }
.password-strength[data-level="2"] { --ps-level: var(--ps-l2); }
.password-strength[data-level="3"] { --ps-level: var(--ps-l3); }
.password-strength[data-level="4"] { --ps-level: var(--ps-l4); }

/* Colour is never the only signal: the label always states the level in words. */
.password-strength__level {
    margin: 0;
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--ps-level);
    transition: color 220ms ease;
}

/* Requirements ------------------------------------------------------------- */

.password-strength__requirements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.password-strength__requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--ps-muted);
    transition: color 220ms ease;
}

.password-strength__requirement[data-satisfied="1"] {
    color: var(--ps-ink);
}

.password-strength__mark {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.password-strength__mark-ring {
    fill: none;
    stroke: var(--ps-ring);
    stroke-width: 1.6;
    transition: fill 200ms ease, stroke 200ms ease;
}

.password-strength__requirement[data-satisfied="1"] .password-strength__mark-ring {
    fill: var(--ps-ok);
    stroke: var(--ps-ok);
}

/* The tick draws itself in rather than popping, which is the one moment of
   motion this component spends its budget on. 14 is the path length. */
.password-strength__mark-check {
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    transition: stroke-dashoffset 260ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms;
}

.password-strength__requirement[data-satisfied="1"] .password-strength__mark-check {
    stroke-dashoffset: 0;
}

/* Confirm-field match tick ------------------------------------------------- */

.password-match {
    position: absolute;
    top: 50%;
    right: 44px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.password-match[data-state="match"] {
    opacity: 1;
    transform: scale(1);
}

.password-match__ring {
    fill: #17a45c;
}

.password-match__check {
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    transition: stroke-dashoffset 260ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms;
}

.password-match[data-state="match"] .password-match__check {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .password-strength,
    .password-strength__segment,
    .password-strength__level,
    .password-strength__requirement,
    .password-strength__mark-ring,
    .password-strength__mark-check,
    .password-match,
    .password-match__check {
        transition-duration: 1ms;
        transition-delay: 0ms;
    }
}