/* Экран создания клиента (`admin/user_form.html`).
   Скелет экрана-мастера (шаги, строки с тумблером, сводка) — общий,
   `form-screen.css`, классы `.pform*`. Здесь только то, чего нет на других
   экранах: поле пароля с «глазом», полоски его силы, список ролей и шапка
   сводки с аватаром. */

/* Почта — единственное поле шага, и во всю ширину карточки строка ввода
   выглядит полем для абзаца текста, а не для адреса. */
.userform__email { max-width: 420px; }

/* Подсказки под полями меняют тон по состоянию ввода (адрес похож на адрес,
   пароли совпали). Тон задаёт скрипт классом, а не инлайновым стилем. */
.userform .adm-field__hint.is-ok { color: var(--green); }
.userform .adm-field__hint.is-err { color: var(--err); }

/* ── Пароль ────────────────────────────────────────────────────────────── */

.userform__pwd { position: relative; display: block; }
.userform__pwd input { width: 100%; padding-right: var(--field-icon);
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: var(--fs-row); }
.userform__eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; background: transparent; border: 0; border-radius: 7px;
  color: var(--muted3); cursor: pointer; }
.userform__eye:hover { color: var(--text); background: var(--hover); }
.userform__eye.is-on { color: var(--green); }

.userform__pwd-state { margin-left: auto; font-size: var(--fs-body); color: var(--muted3); }
.userform__pwd-state.is-err { color: var(--err); }
.userform__pwd-state.is-warn { color: var(--warn); }
.userform__pwd-state.is-ok { color: var(--green); }

/* Четыре полоски: длина, регистр, цифра, спецсимвол. Цвет всей группы задаёт
   класс на обёртке — полоска не знает, слабый пароль или надёжный, она знает
   только, зажжена она или нет. */
.userform__bars { display: flex; align-items: center; gap: var(--sp-tight); margin-top: var(--sp-hair); }
.userform__bars span { flex: 1; height: 3px; border-radius: 2px;
  background: var(--track); transition: background .16s ease; }
.userform__bars.is-err span.is-on { background: var(--err); }
.userform__bars.is-warn span.is-on { background: var(--warn); }
.userform__bars.is-ok span.is-on { background: var(--brand); }

.userform__gen { display: flex; align-items: center; gap: var(--sp-row); flex-wrap: wrap; }
.userform__gen .pform__hint { flex: 1; min-width: 180px; }

/* ── Роли ──────────────────────────────────────────────────────────────── */

.userform__roles { display: flex; flex-direction: column; gap: var(--sp-tight);
  padding: var(--sp-block) var(--sp-gutter); }
.userform__roles[hidden] { display: none; }
/* Разделители вокруг блока ролей — только когда он раскрыт. Общее правило
   `.pform__toggle + .pform__toggle` его не видит: между строками прав стоит
   он, а не соседний тумблер. */
.userform__roles:not([hidden]) { border-top: 1px solid var(--rowline); }
.userform__roles:not([hidden]) + .pform__toggle { border-top: 1px solid var(--rowline); }
.userform__role-list { display: flex; flex-wrap: wrap; gap: var(--sp-item); margin-top: var(--sp-snug); }
/* Роль — не строка списка, а переключаемая пилюля: их единицы, и выбор из
   них должен читаться так же, как чипы отбора в списках панели. */
.userform__role { display: inline-flex; align-items: center; gap: var(--sp-item);
  padding: var(--sp-snug) var(--sp-row); border: 1px solid var(--border2); border-radius: 999px;
  font-size: var(--fs-body); color: var(--muted); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease; }
.userform__role:hover { border-color: var(--border4); color: var(--text); }
.userform__role:has(input:checked) { border-color: var(--brand);
  background: rgba(47, 203, 116, .10); color: var(--green); font-weight: 600; }
.userform__role:has(input:focus-visible) { outline: 2px solid var(--brand);
  outline-offset: 2px; }
.userform__role input[type="checkbox"] { width: 15px; height: 15px; margin: 0;
  accent-color: var(--brand); cursor: pointer; }

/* ── Сводка ────────────────────────────────────────────────────────────── */

/* Шапка сводки — та же карточка шага, но вместо номера в ней аватар, поэтому
   выравнивание по верху, а не по центру: под почтой стоит вторая строка. */
.userform__who { align-items: center; gap: var(--sp-row); padding: var(--sp-block) var(--sp-gutter); }
.userform__who .adm-avatar { width: 38px; height: 38px; flex: 0 0 38px;
  font-size: var(--fs-row); }
.userform__who-body { display: block; min-width: 0; }
.userform__who-body b { display: block; font-size: var(--fs-row); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userform__who-body b.is-empty { color: var(--muted3); font-weight: 400; }
.userform__who-body span { display: block; font-size: var(--fs-hint); color: var(--muted3);
  margin-top: var(--sp-hair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Аватар сотрудника отличается от клиентского — тем же цветом, каким роль
   сотрудника помечена в списке клиентов. */
.userform__who .adm-avatar.is-staff { background: rgba(127, 168, 232, .14);
  color: var(--link); }