/* Вход и раздел пользователей */
.loginpage{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:20px}
.loginbox{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 24px}
.loginbox .brand{display:flex;align-items:center;gap:9px;color:var(--brand);margin-bottom:14px}
.loginbox .brand svg{width:34px;height:24px}
.loginbox .brand b{letter-spacing:.08em;font-size:14px;color:var(--text)}
.loginbox h1{font-size:16px;margin:0 0 14px}
.loginbox label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:11px}
.loginbox input{display:block;width:100%;margin-top:4px;min-height:36px;padding:0 10px;
  font:inherit;font-size:14px;color:var(--text);background:var(--bg);
  border:1px solid var(--border-strong);border-radius:var(--r)}
.loginbox .btn{width:100%;justify-content:center;min-height:38px}
.loginbox .err{color:var(--crit);font-size:12.5px;margin:10px 0 0}
.loginbox .hint{color:var(--text-faint);font-size:11.5px;margin:14px 0 0}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}

.card.pad{padding:12px 14px}
.fld{display:block;font-size:12px;color:var(--text-muted);margin-bottom:9px}
.fld input,.fld select{display:block;width:100%;margin-top:4px;min-height:32px;padding:0 9px;
  font:inherit;font-size:13px;color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r)}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
/* страница пользователей: шапка блока, действия в таблице, модалка, показ пароля */
.block-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.block-head .btn{margin-left:auto}
.usearch{font:inherit;font-size:13px;min-height:32px;padding:0 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--text);width:min(320px,100%);margin-left:auto}
.usearch:focus{outline:2px solid var(--brand);outline-offset:-1px}
.block-head .usearch+.btn{margin-left:0}
/* тумблеры ролей над таблицей */
.rolechips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;align-items:center}
.rolechips .chip{font:inherit;font-size:12.5px;cursor:pointer;padding:5px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}
.rolechips .chip:hover{border-color:var(--brand);color:var(--text)}
.rolechips .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.rolechips .off-toggle{margin-left:auto;cursor:pointer}
.rolechips .off-toggle input{margin:0}
td.seen{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12.5px}
td.seen .crit{color:var(--crit)}
td.acts{white-space:nowrap}
td.acts .btn{padding:4px 9px;font-size:12px}
.btn.danger{color:var(--crit);border-color:var(--crit)}
tr.off td{opacity:.55}
.mbtns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pwrow{display:flex;gap:6px;align-items:center;margin-top:4px}
.pwrow input{flex:1;min-width:0;margin-top:0}
.pwrow .btn{flex:none;white-space:nowrap}
.pw-box{font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:.06em;background:var(--surface-2);
  border:1px dashed var(--border-strong);border-radius:10px;padding:12px 16px;margin:8px 0;user-select:all}
.modal .box{max-width:720px;width:calc(100% - 32px)}
.pwbox{display:flex;gap:6px;align-items:center}
.pwbox input{min-height:28px;font-size:12px}
.warnbar{background:var(--warn-bg);border:1px solid var(--c-warn);border-radius:8px;
  padding:7px 11px;font-size:12.5px;margin-bottom:10px}
.warnbar.ok{background:var(--ok-bg);border-color:var(--c-ok)}
.userbox{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:10px 12px}
.userbox a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  text-decoration:none;color:var(--side-text)}
.userbox a:hover{background:var(--side-active)}
.userbox .who{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.userbox .role{font-size:10.5px;opacity:.7;text-transform:uppercase;letter-spacing:.04em}

/* сортировка по колонке в таблице пользователей */
#uTbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
#uTbl th.sortable:hover{color:var(--brand)}
#uTbl th.sortable::after{content:'\2195';margin-left:5px;font-size:10px;color:var(--text-faint)}
#uTbl th.sortable.on{color:var(--brand)}
#uTbl th.sortable.on[aria-sort="ascending"]::after{content:'\2191';color:var(--brand)}
#uTbl th.sortable.on[aria-sort="descending"]::after{content:'\2193';color:var(--brand)}

@media(max-width:760px){
  .loginbox input,.fld input,.fld select{font-size:16px;min-height:42px}
  .pwbox input{font-size:16px;min-height:36px}
}