/* ==========================================================================
   ПОЛЕ ПАРОЛЯ — общий компонент
   --------------------------------------------------------------------------
   Глазок показа пароля и плашка надёжности. Один набор правил на все места,
   где вводят пароль: экран входа и регистрации, смена пароля в кабинете
   участника, смена пароля в кабинете компании.

   Раньше это жило только в apps/public/auth.css и было доступно ровно на
   одной странице. Кабинеты подключить её не могли — она несёт всю вёрстку
   страницы входа целиком, — поэтому смена пароля там оставалась голыми
   полями без глазка и без оценки надёжности. Компонент вынесен сюда, а
   auth.css эти правила больше не дублирует.

   Имена классов оставлены прежними (.pauth-*), чтобы страница входа не
   переписывалась ради переезда; рядом объявлены нейтральные синонимы
   (.bx-password, .bx-strength) для кабинетов, где приставка «pauth» не к
   месту. Это один и тот же компонент под двумя именами, а не два похожих.
   ========================================================================== */

/* --- Поле с глазком ------------------------------------------------------ */
.pauth-password,
.bx-password {
    position: relative;
    display: flex;
    align-items: center;
}

.pauth-password input,
.bx-password input {
    padding-right: 42px;
}

.pauth-password-toggle,
.bx-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ws-fg-muted);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.pauth-password-toggle:hover,
.bx-password-toggle:hover {
    background: var(--ws-primary-soft);
    color: var(--ws-primary);
}

.pauth-password-toggle.is-active,
.bx-password-toggle.is-active {
    background: var(--ws-primary-soft);
    color: var(--ws-primary);
}

.pauth-password-toggle svg,
.bx-password-toggle svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Глазок остаётся живым и на поле, закрытом для правки: посмотреть, что ты
   ввёл, можно всегда. Отключать его вместе с полем — значит запретить
   проверить себя ровно тогда, когда это нужнее всего. */
.pauth-password input[readonly] + .pauth-password-toggle,
.bx-password input[readonly] + .bx-password-toggle {
    pointer-events: auto;
}

/* --- Надёжность пароля ---------------------------------------------------
   Плашка появляется в момент, когда пользователь начал вводить пароль, и
   не занимает места до этого. Раньше она всегда висела пустой полосой под
   полем — сообщала «пусто» там, где сообщать ещё нечего.

   Уровень ставит скрипт через data-lvl (0 — поле пустое). Раскрытие
   сделано на CSS: grid-template-rows 0fr → 1fr анимируется, в отличие от
   height:auto, и не требует знать высоту содержимого. */
.pauth-strength,
.bx-strength {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows .22s ease, opacity .22s ease, margin-top .22s ease;
}

.pauth-strength[data-lvl]:not([data-lvl="0"]),
.bx-strength[data-lvl]:not([data-lvl="0"]) {
    grid-template-rows: 1fr;
    margin-top: 8px;
    opacity: 1;
}

.pauth-strength__row,
.bx-strength__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.pauth-strength__bar,
.bx-strength__bar {
    position: relative;
    display: block;
    height: 5px;
    border-radius: var(--ws-radius-full);
    background: var(--ws-progress-track);
    overflow: hidden;
}

.pauth-strength__bar::after,
.bx-strength__bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--ws-fg-muted);
    transition: width .22s ease, background-color .22s ease;
}

/* Цвета уровней — исторические, они привычны и хорошо различимы:
   серо-синий → синий → бирюзовый → зелёный. Это отдельная шкала от
   прогресса заполненности: там мотивация, здесь оценка качества. */
.pauth-strength__bar[data-lvl="1"]::after,
.bx-strength__bar[data-lvl="1"]::after { width: 25%;  background: #94a3b8; }
.pauth-strength__bar[data-lvl="2"]::after,
.bx-strength__bar[data-lvl="2"]::after { width: 50%;  background: #5b7fb7; }
.pauth-strength__bar[data-lvl="3"]::after,
.bx-strength__bar[data-lvl="3"]::after { width: 75%;  background: #3b8f8a; }
.pauth-strength__bar[data-lvl="4"]::after,
.bx-strength__bar[data-lvl="4"]::after { width: 100%; background: #2f7d62; }

.pauth-strength__label,
.bx-strength__label {
    color: var(--ws-fg-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pauth-strength[data-lvl="2"] .pauth-strength__label,
.bx-strength[data-lvl="2"] .bx-strength__label { color: #4f6f9f; }
.pauth-strength[data-lvl="3"] .pauth-strength__label,
.bx-strength[data-lvl="3"] .bx-strength__label { color: #347c78; }
.pauth-strength[data-lvl="4"] .pauth-strength__label,
.bx-strength[data-lvl="4"] .bx-strength__label { color: #2f6f58; }

@media (prefers-reduced-motion: reduce) {
    .pauth-strength,
    .bx-strength,
    .pauth-strength__bar::after,
    .bx-strength__bar::after {
        transition: none;
    }
}