/* Trang User / Vai trò kiểu Bit (chủ 14/11/2026) — ui/static/js/staff_admin.js. Dùng token chung của stc_theme.css (đen-vàng, viền 1px). */
#view-users .usr-head { align-items: center; padding-bottom: 2px; }
.usr-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--stc-r-card); background: var(--stc-surface-2); border: 1px solid var(--stc-border); }
.usr-seg button { border: 0; background: transparent; color: var(--stc-muted); font: 600 14px/1 var(--stc-font); padding: 9px 18px; border-radius: calc(var(--stc-r-card) - 3px); cursor: pointer; }
.usr-seg button[aria-selected="true"] { background: var(--stc-surface); color: var(--stc-accent-text); box-shadow: var(--stc-shadow-sm); }
.usr-seg button:hover:not([aria-selected="true"]) { color: var(--stc-text-strong); }
.usr-seg button:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 1px; }
.usr-pane[hidden] { display: none; }
.usr-toolbar { gap: 12px; }
.usr-count { color: var(--stc-muted); font-size: 14px; }
.usr-count b { color: var(--stc-accent-text); font-variant-numeric: tabular-nums; margin-left: 4px; }
.usr-search { margin-left: auto; min-width: 220px; max-width: 360px; }
#view-users table.usr-table { min-width: 0; }
#view-users .usr-table :is(th, td) { padding-left: 9px; padding-right: 9px; }
#view-users .usr-table :is(th, td):first-child { padding-left: 16px; }
.usr-table td { height: 54px; }
.usr-table td:nth-child(n+2):not(:last-child) { white-space: nowrap; }      /* số / vai trò / ngày không ngắt dòng; cột Tên vẫn xuống dòng */
.usr-name { color: var(--stc-text-strong); font-weight: 600; }
.usr-sub { color: var(--stc-muted); font-size: 12.5px; margin-top: 2px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-num { font-variant-numeric: tabular-nums; color: var(--stc-text); white-space: nowrap; }
.usr-over-num { color: var(--stc-err-text); font-weight: 600; }
.usr-tag-warn { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; color: var(--stc-warn); border: 1px solid currentColor; }
.usr-ops { white-space: nowrap; }
.usr-link { border: 0; background: transparent; padding: 4px 6px; color: var(--stc-accent-text); font: 500 13.5px/1.2 var(--stc-font); cursor: pointer; border-radius: 6px; }
.usr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.usr-link.danger { color: var(--stc-err-text); }
.usr-link:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 1px; }
.usr-empty { padding: 28px 16px !important; text-align: center; color: var(--stc-muted); }
.usr-err { color: var(--stc-err-text); }

/* công tắc Trạng thái: checkbox thật (role=switch) tự vẽ — Chrome/WebView2 chưa có thuộc tính `switch` (modern-web-guidance forms/switch) */
#view-users input.usr-switch[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; margin: 0; vertical-align: middle; border-radius: 999px;
  background: var(--stc-border-ctl); cursor: pointer; transition: background .18s var(--stc-ease); }
#view-users input.usr-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--stc-surface);
  box-shadow: var(--stc-shadow-sm); transition: transform .18s var(--stc-ease); }
#view-users input.usr-switch:checked { background: var(--stc-accent); }
#view-users input.usr-switch:checked::after { transform: translateX(16px); background: var(--stc-accent-ink); }
#view-users input.usr-switch:disabled { opacity: .55; cursor: not-allowed; }
#view-users input.usr-switch:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 3px; }
@media (forced-colors: active) { .usr-switch { border: 1px solid CanvasText; } .usr-switch:checked { background: Highlight; } }

/* hộp thoại */
.usr-dlg.stc-modal { padding: 22px 24px; }
.usr-dlg-form.stc-modal { width: min(680px, 94vw); }
.usr-dlg-sm.stc-modal { width: min(460px, 94vw); }
.usr-dlg-bg + .usr-dlg-bg { background: transparent; }
.usr-form { display: grid; gap: 14px; }
.usr-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.usr-field > span, .usr-field > legend { font-size: 13.5px; font-weight: 600; color: var(--stc-text-strong); padding: 0; }
.usr-field em { font-style: normal; color: var(--stc-err-text); margin-left: 3px; }
.usr-field[hidden], .usr-member-only[hidden] { display: none; }
.usr-member-only { display: grid; gap: 14px; }
.usr-inline { display: flex; align-items: center; gap: 10px; }
.usr-inline > :is(input, select) { flex: 1; min-width: 0; }
.usr-radios { gap: 4px; }
.usr-radios label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 14px; color: var(--stc-text); cursor: pointer; }
.usr-radios input { accent-color: var(--stc-accent); width: 16px; height: 16px; }
.usr-radios .muted { margin: 2px 0 0; }
.usr-groups { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px; border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); background: var(--stc-input); max-height: 150px; overflow: auto; }
.usr-groups label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--stc-text); cursor: pointer; }
.usr-groups-all { flex-basis: 100%; color: var(--stc-text-strong) !important; font-weight: 600; }
.usr-groups input, .usr-pt input { accent-color: var(--stc-accent); width: 15px; height: 15px; }
html[data-theme="light"] :is(.usr-groups, .usr-pt, .usr-radios) input { accent-color: var(--stc-accent-text); }
.usr-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.usr-grid3 .usr-field > span { font-weight: 500; font-size: 13px; color: var(--stc-muted); }
@media (max-width: 640px) { .usr-grid3 { grid-template-columns: 1fr; } }

/* cây quyền: Chọn tất cả > nhóm > quyền (đường nối như Bit) */
.usr-pt { border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); padding: 10px 12px; max-height: 340px; overflow: auto; background: var(--stc-input); }
.usr-pt ul { list-style: none; margin: 0; padding: 0; }
.usr-pt label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--stc-text); cursor: pointer; padding: 4px 0; }
.usr-pt-root { font-weight: 600; color: var(--stc-text-strong) !important; }
.usr-pt-groups { margin-left: 7px !important; border-left: 1px solid var(--stc-border); }
.usr-pt-group { position: relative; padding-left: 14px; }
.usr-pt-row { display: flex; align-items: center; gap: 4px; }
.usr-pt-row label { font-weight: 600; color: var(--stc-text-strong); }
.usr-pt-caret { width: 20px; height: 20px; border: 0; background: transparent; color: var(--stc-muted); cursor: pointer; border-radius: 4px; display: inline-grid; place-items: center; }
.usr-pt-caret::before { content: ""; border: 5px solid transparent; border-top-color: currentColor; margin-top: 5px; transition: transform .15s var(--stc-ease); }
.usr-pt-caret[aria-expanded="false"]::before { transform: rotate(-90deg); margin: 0 0 0 5px; }
.usr-pt-caret:focus-visible { outline: 2px solid var(--stc-accent-text); }
.usr-pt-items { margin-left: 9px !important; border-left: 1px solid var(--stc-border); padding-left: 18px !important; }
.usr-pt-items[hidden] { display: none; }
.usr-pt-sens { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--stc-warn); border: 1px solid currentColor; }
.usr-pt input:disabled + span { color: var(--stc-muted); }
@media (prefers-reduced-motion: reduce) { .usr-switch, .usr-switch::after, .usr-pt-caret::before { transition: none; } }

/* chuyển hồ sơ giữa tài khoản (transfer_view.js) */
.stc-tf-code { margin: 14px 0 6px; padding: 14px; text-align: center; font: 700 28px/1.2 var(--stc-font); letter-spacing: 4px; font-variant-numeric: tabular-nums;
  color: var(--stc-accent-text); border: 1px dashed var(--stc-border-strong); border-radius: var(--stc-r-card); background: var(--stc-input); user-select: all; }
.stc-tf-seg { margin: 4px 0 14px; }
.stc-tf-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.stc-tf-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); }
.stc-tf-list li.muted { justify-content: center; }
.stc-tf-input { text-transform: uppercase; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.stc-tf-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; font-size: 11px;
  background: var(--stc-accent); color: var(--stc-accent-ink); }
.stc-tf-badge[hidden] { display: none; }