/* Раздел «Пользователи» (users.js): учетные записи, матрица прав, журнал, сессии, вход по кодам. Компоненты - ui.css,
   здесь только раскладка раздела; все классы - us-*. */
.us-page { max-width: 1400px; }
.us-dim { color: var(--text-3); }
.us-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.us-tools .us-pick { width: auto; max-width: 100%; }
.us-states .us-n { opacity: .75; font-variant-numeric: tabular-nums; }
.us-date { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
.us-date .ui-input { width: auto; }
.us-note { margin-bottom: var(--s-6); }
.us-acts { display: flex; align-items: center; gap: var(--s-4); flex: 0 0 auto; }

/* учетные записи */
.us-name { padding: 0; color: var(--text); font: 650 var(--fs-md)/1.3 var(--font); text-align: left; cursor: pointer; border-radius: var(--r-xs); }
.us-name:hover { color: var(--st-info); text-decoration: underline; }
.us-name:focus-visible { outline: none; box-shadow: var(--focus); }
.us-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.us-bad { color: var(--st-bad); font-weight: 600; }      /* склады записаны в базу в обход службы: вход записи закрыт */
.us-when, .us-ip { white-space: nowrap; font-variant-numeric: tabular-nums; }
.us-ip { color: var(--text-2); font-size: var(--fs-sm); }
.us-more { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-6); }

/* окно учетной записи и ссылка для пароля */
.us-form .us-wide { grid-column: 1 / -1; }
.us-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 0 var(--s-6); max-height: 190px; overflow-y: auto;
  padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); }
.us-link { display: flex; gap: var(--s-4); }
.us-link .us-url { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: var(--fs-sm); }

/* матрица прав: строки - разрешения, столбцы - роли */
.us-matrix th.us-perm { position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 420px; padding: var(--s-4) var(--s-6); background: var(--surface);
  border-bottom: 1px solid var(--line); font-size: var(--fs-md); font-weight: 400; color: var(--text); white-space: normal; text-align: left; }
.us-matrix thead th:first-child { position: sticky; left: 0; z-index: 2; }
.us-matrix tbody tr:hover th.us-perm { background: var(--hover); }
.us-matrix .us-grp th { position: static; padding: var(--s-6) var(--s-6) var(--s-3); background: var(--surface); border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.us-matrix .us-grp:hover { background: none; }
.us-role-h { min-width: 132px; text-align: center !important; white-space: normal !important; vertical-align: top; }
.us-role-t { display: flex; align-items: center; justify-content: center; gap: var(--s-1); }      /* название и кнопка действий - в одну строку */
.us-role-n { max-width: 180px; font-size: var(--fs-md); color: var(--text); overflow-wrap: break-word; }      /* слово не рвется, пока помещается */
.us-role-h .ui-btn { flex: 0 0 auto; }
.us-cell { text-align: center; padding: var(--s-2) var(--s-4) !important; }
.us-cell .ui-check { justify-content: center; }
.us-cell.ch { background: var(--st-warn-soft); }
.us-bar[hidden] { display: none; }
.us-diff { margin: 0 0 var(--s-6); padding-left: var(--s-10); }
.us-must { margin: var(--s-4) 0 0; }
.us-diff .add { color: var(--st-ok); }
.us-diff .del { color: var(--st-bad); }

/* вход по кодам, первый администратор */
.us-codes { max-width: 760px; }
.us-codes .ui-kv { grid-template-columns: minmax(150px, 44%) minmax(0, 1fr); gap: var(--s-5) var(--s-8); }
.us-uses { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.us-boot { max-width: 760px; margin-bottom: var(--s-8); border-color: var(--accent-line); }
.us-boot p { margin: 0 0 var(--s-8); color: var(--text-2); }

@media (max-width: 760px) {
  .us-tools .us-pick, .us-date, .us-date .ui-input { flex: 1 1 100%; width: 100%; }
  .us-tools .us-states { display: flex; flex: 1 1 100%; }
  .us-link { flex-direction: column; }
  .us-matrix th.us-perm { min-width: 150px; }
  .us-role-h { min-width: 104px; }
  .us-codes .ui-kv { grid-template-columns: minmax(0, 1fr); gap: var(--s-1) 0; }
  .us-codes .ui-kv dd { margin-bottom: var(--s-5); }
}
/* узкий экран и касание: имя учетной записи - кнопка, область нажатия не ниже 44 px */
@media (max-width: 760px), (pointer: coarse) {
  .us-name { display: inline-flex; align-items: center; min-height: 44px; }
}
/* четыре состояния с числами в один ряд занимают около 410 px: на телефоне - сетка два на два */
@media (max-width: 480px) {
  .us-tools .us-states { display: grid; grid-template-columns: 1fr 1fr; }
}
@media print { .us-tools, .us-bar, .us-more .ui-btn { display: none !important; } }