/* 用户管理页(2026-09-21) —— 卡片网格 + 角色徽标, 视觉跟随 variables.css 的卡片语言 */

/* 顶栏用户名可点击(唤出改密面板) */
#display-actor {
  cursor: pointer;
}

/* vs-modal-backdrop 的 display:flex 会压过 UA 的 [hidden],显式兜底
   (改密面板 #pw-panel 与 skills 弹窗同用此 class) */
.vs-modal-backdrop[hidden] {
  display: none;
}

/* 「用户管理」导航项显隐(checkAuth 按 admin 角色 toggleAttribute hidden)。
   nav-sub-item 若有 display 规则会压过 UA 的 [hidden],这里显式压回 */
.nav-sub-item[hidden] {
  display: none !important;
}

#page-vision-star-users .user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.user-card {
  background: var(--vs-card-bg, #fff);
  border: 1px solid var(--vs-border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.user-card:hover {
  border-color: #c7cbd4;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.user-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.user-card-name {
  font-weight: 600;
  font-size: 15px;
  word-break: break-all;
}

.user-card-role {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.4;
}

.user-role-admin {
  color: #9a3412;
  background: #fff1e6;
  border-color: #fed7aa;
}

.user-role-reviewer {
  color: #5b21b6;
  background: #f3e8ff;
  border-color: #e9d5ff;
}

.user-role-editor {
  color: #155e75;
  background: #ecfeff;
  border-color: #a5f3fc;
}

.user-role-operator {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.user-role-viewer {
  color: #475569;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.user-card-disabled,
.user-card-locked {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.user-card-locked {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.user-card-me {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.user-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px dashed var(--vs-border, #e5e7eb);
  padding-top: 10px;
}

/* 新建用户编辑面板(复用 variables 页 .var-editor 的骨架样式, 这里只补间距) */
#page-vision-star-users .user-editor {
  margin-top: 16px;
}

/* 深色主题跟随(v7-restyle 深色变量存在时) */
[data-theme="dark"] .user-card {
  background: #1e2430;
  border-color: #313a4a;
}

[data-theme="dark"] .user-card:hover {
  border-color: #46536a;
}