/* 人员管理（admin 专属）。前缀一律 pp-。
 * 颜色纪律同其他页：不许裸十六进制（白名单只有 #fff/#000 系）、不许 :root、
 * 每个 var(--x) 都要在 tokens.css 里有定义、只引用语义层不碰原始色阶。
 */

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* display:flex/grid 会盖掉 hidden 属性 */

body {
  margin: 0; background: var(--canvas); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--fs-sm); -webkit-font-smoothing: antialiased;
}

.pp-app { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-5); display: grid; gap: var(--sp-4); }

.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.pp-head h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.pp-head p { margin: 0; color: var(--text-secondary); line-height: var(--lh-prose); max-width: 62ch; }
.pp-head-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.pp-scope { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }

.pp-btn {
  height: var(--ctl-h); padding: 0 var(--sp-3);
  border: 1px solid var(--border-control); border-radius: var(--control-radius);
  background: var(--surface); color: var(--text-primary);
  font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.pp-btn:hover { background: var(--surface-hover); }
.pp-btn:disabled { color: var(--text-disabled); cursor: default; }

/* 人员 / 部门权限 两页切换条（segmented 样式，真链接） */
.pp-tabs {
  display: inline-flex; gap: 2px; padding: 3px; justify-self: start;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--control-radius);
}
.pp-tabs a {
  display: inline-flex; align-items: center; height: calc(var(--ctl-h) - 6px); padding: 0 var(--sp-4);
  border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm);
}
.pp-tabs a:hover { color: var(--text-primary); }
.pp-tabs a[aria-selected="true"] {
  background: var(--surface); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-1);
}
.pp-tabs a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* 概览：老板 10-04 可视化——换成全站数字卡（shared/viz.css 的 sqv-kpis），点一下跳到那一段 */
.pp-cards { display: block; min-width: 0; }
.pp-cards .sqv-kpis { margin: 0; }

/* 长说明收进「说明」（老板 10-04：一眼看懂，字不删） */
.pp-more { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-secondary); }
.pp-more summary { cursor: pointer; color: var(--accent); width: max-content; }
.pp-more summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.pp-more p { margin: var(--sp-1) 0 0; line-height: var(--lh-prose); max-width: 72ch; }
.pp-head .pp-more { font-size: var(--fs-sm); }

/* min-width:0：卡片是 grid 的一格，默认最窄 = 里面内容最窄（人员表 1130px），会把整张卡片连同上面的批量操作栏撑出屏幕——
   2026-09-28 老板截图里「身份」「部门」两组就是这样跑到右边看不见的。设 0 后卡片跟屏幕宽，表在自己的框里横着滚。 */
.pp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.pp-panel-head { padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.pp-panel-head h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.pp-panel-head p { margin: 0; color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-prose); }
.pp-count { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; }

/* 部门 → 角色 */
.pp-deps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); padding: var(--sp-4); }
.pp-dep {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: var(--sp-3); display: grid; gap: var(--sp-2);
}
.pp-dep-name { font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pp-dep-n { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; }
.pp-dep select, .pp-role select {
  height: var(--ctl-h-sm); border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-xs);
  padding: 0 var(--sp-2); width: 100%;
}
.pp-dep[data-unset="1"] { border-color: var(--warning-border); background: var(--warning-bg); }
.pp-dep-hint { display: flex; align-items: center; gap: var(--sp-1); margin: 0; color: var(--warning-fg); font-size: var(--fs-xs); }
/* 卡片上的占比条（老板 10-04 可视化）：这一组占在职人数的几成 */
.pp-dep-bar { min-width: 0; }
.pp-deps > .sqv-empty { grid-column: 1 / -1; }
.pp-dep-name .sqv-pill { flex: none; }
/* 状态列：几块状态牌挨着放 */
.pp-table td.pp-st .sqv-pill + .sqv-pill { margin-left: 2px; }

.pp-filters { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-search {
  height: var(--ctl-h); flex: 1; max-width: 280px;
  border: 1px solid var(--border-control); border-radius: var(--control-radius);
  background: var(--surface); color: var(--text-primary);
  font-family: inherit; font-size: var(--fs-sm); padding: 0 var(--sp-3);
}
.pp-chk { display: flex; align-items: center; gap: var(--sp-1); color: var(--text-secondary); font-size: var(--fs-xs); }

/* 人员表 */
/* 表头往下滚也一直在（2026-09-26 老板看工厂待办时提的，全站同一条）。原来只有 overflow-x:auto，
   它让 .pp-table-wrap 变成滚动容器，下面 th 的 sticky 只跟它、跟不住整页（实测滚下去表头在 -400px）。
   表最窄也要 1130px（全是不折行的列），窄屏必须横向滚，所以不能去掉 overflow——改成限高的滚动框：
   框最高一屏，表头贴在框顶，横向滚动条也在框底就看得到，不用滚到 40 多行之后。 */
.pp-table-wrap { overflow: auto; max-height: calc(100vh - var(--sp-5) * 2); }
.pp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-xs); }
.pp-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-sunken); color: var(--text-secondary);
  text-align: left; font-weight: 600; white-space: nowrap;
  height: 34px; padding: 0 var(--sp-3); border-bottom: 1px solid var(--border);
}
.pp-table tbody td {
  height: 38px; padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--border-subtle); vertical-align: middle; white-space: nowrap;
}
.pp-table tbody tr:hover td { background: var(--surface-hover); }
.pp-table tbody tr[data-resigned="1"] td { color: var(--text-disabled); }

.pp-tag {
  display: inline-block; border-radius: var(--radius-sm); padding: 0 5px; line-height: 18px;
  border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-secondary);
}
.pp-tag[data-tone="ok"] { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.pp-tag[data-tone="warn"] { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.pp-tag[data-tone="danger"] { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.pp-tag[data-tone="info"] { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }

.pp-dim { color: var(--text-disabled); }

/* 人工调配过的部门。角标做成一个小方块而不是又一个 pp-tag——
   状态列已经挂了一排 tag，部门列再来一个同款的，一眼看过去分不清哪个说的是什么。 */
.pp-moved { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.pp-moved i {
  font-style: normal; font-size: var(--fs-xs); line-height: 1;
  padding: 2px 4px; border-radius: var(--radius-sm);
  background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border);
}
.pp-role select { width: 104px; }
.pp-empty { padding: var(--sp-8); text-align: center; color: var(--text-muted); }

/* ---- 组：标识色（色值一律来自后端数据，写在 inline style 里；这里只有形状） ---- */
.pp-panel-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.pp-panel-head-row > .pp-btn { flex: none; white-space: nowrap; }   /* 卡片跟屏幕宽之后，长说明会把按钮挤成竖排 */
.pp-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full);
  flex: none; vertical-align: baseline;
}
.pp-dot-none { border: 1px dashed var(--border-control); }
.pp-grp {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1px 7px 1px 5px; background: var(--surface-sunken); color: var(--text-primary);
}
/* 一人多角色：徽章多了允许在格内换行，别把表格顶出横向滚动 */
.pp-grps { white-space: normal; min-width: 150px; line-height: 24px; }
.pp-grp b { font-weight: 600; color: var(--text-secondary); font-size: var(--fs-xs); }
.pp-swatches { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.pp-swatch {
  width: 16px; height: 16px; border-radius: var(--radius-full); flex: none;
  border: 1px solid var(--border-control); background: var(--surface); cursor: pointer; padding: 0;
}
.pp-swatch.on { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.pp-swatch-none {
  background: linear-gradient(135deg, transparent 44%, var(--border-control) 44%,
                              var(--border-control) 56%, transparent 56%);
}
.pp-dep-role { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-xs); }
.pp-dep-role select { flex: 1; }
.pp-dep-del { height: 22px; padding: 0 var(--sp-2); margin-left: auto; font-size: var(--fs-xs); }
.pp-dep-edit { height: 22px; padding: 0 6px; font-size: var(--fs-xs); line-height: 1; }
.pp-dep-name small { color: var(--text-muted); font-weight: 400; }
.pp-hidden-deps {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  color: var(--text-muted); font-size: var(--fs-xs);
  padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--border); border-radius: var(--radius-sm);
}
.pp-hidden-deps .pp-btn { height: 20px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.pp-group-form {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.pp-group-form select {
  height: var(--ctl-h); border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm);
}

/* ---- 排序表头 ---- */
.pp-sort { cursor: pointer; user-select: none; }
.pp-sort:hover { color: var(--text-primary); background: var(--surface-hover); }
.pp-sort::after { content: ""; display: inline-block; width: 1em; color: var(--accent); }
.pp-sort[data-dir="asc"]::after { content: " ↑"; }
.pp-sort[data-dir="desc"]::after { content: " ↓"; }

/* ---- 批量修改 ---- */
.pp-check { width: 30px; text-align: center; }
.pp-check input { vertical-align: middle; }
/* 点整行任意空白处即可勾选（shift 连选一段），给个手型提示 */
.pp-table tbody tr[data-pid] { cursor: pointer; }
.pp-bulk-sep { width: 1px; height: 18px; background: var(--border); flex: none; }
/* 2026-10-01 批量条挪到表下面、吸在屏幕底边：在表自己的滚动框里勾人时，原来出在表上面（常在屏幕外）还把表往下顶。
   吸底时盖住表框底下一截，滚到页底它就回到表下面原位，不挡东西。表框的高度 people.js 按顶上标签条 + 这条的实际高度量着收 */
.pp-bulk {
  position: sticky; bottom: var(--sp-2); z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: var(--sp-3) var(--sp-4); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--info-border); background: var(--info-bg); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}
.pp-bulk b { color: var(--info-fg); font-size: var(--fs-xs); }
.pp-bulk-grp { display: inline-flex; align-items: center; gap: var(--sp-3); }
.pp-bulk-lab { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); cursor: help; }
.pp-bulk select {
  height: var(--ctl-h-sm); border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-xs);
}

@media (max-width: 760px) {
  .pp-head { flex-direction: column; }
  .pp-app { padding: var(--sp-3); }
}

/* 模拟查看（2026-09-26）：这些人登录后侧栏看得到的入口，一行一组，点了跳控制台（你自己的视角） */
.dp-pv-bar { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }
.dp-pv-bar select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; background: var(--surface); color: var(--text-primary); font-size: var(--fs-xs); max-width: 220px; }
.dp-pv-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.dp-pv-basis { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-prose); }
.dp-pv-basis b { color: var(--text-primary); }
.dp-pv-row { display: flex; gap: var(--sp-3); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.dp-pv-label { flex: 0 0 76px; font-size: var(--fs-xs); color: var(--text-muted); }
.dp-pv-links { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.dp-pv-link { font-size: var(--fs-sm); color: var(--text-primary); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 2px 10px; background: var(--surface); white-space: nowrap; }
.dp-pv-link:hover { border-color: var(--accent); color: var(--accent); }
.dp-pv-note { font-size: 11px; color: var(--text-muted); margin-left: 4px; cursor: help; }
#pp-preview { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; width: min(760px, 94vw); max-height: 86vh; background: var(--surface); color: var(--text-primary); }
#pp-preview::backdrop { background: var(--overlay); }
#pp-preview .pp-panel-head { display: flex; justify-content: space-between; align-items: center; }

/* ---- 成员（2026-09-28）：卡片上先列几个名字，点「成员」开一张勾选名单 ---- */
.pp-dep-members { margin: 0; color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-prose); }
.pp-dep-members[data-members] { cursor: pointer; }
.pp-dep-members[data-members]:hover { color: var(--text-primary); }
.pp-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.pp-primary:hover { background: var(--accent-hover); }
.pp-primary:disabled { background: var(--surface-sunken); border-color: var(--border-control); color: var(--text-disabled); }
#pp-members {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; width: min(640px, 94vw); max-height: 86vh;
  background: var(--surface); color: var(--text-primary);
}
#pp-members[open] { display: grid; grid-template-rows: auto auto 1fr auto; }
#pp-members::backdrop { background: var(--overlay); }
#pp-members .pp-panel-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pp-members-bar {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
.pp-members-bar .pp-count { margin-left: auto; white-space: nowrap; }
.pp-members-list { overflow-y: auto; min-height: 200px; }
.pp-member {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--sp-3); align-items: center;
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border-subtle); cursor: pointer;
}
.pp-member:hover { background: var(--surface-hover); }
.pp-member[data-locked="1"] { cursor: default; }
.pp-member[data-locked="1"] b { color: var(--text-secondary); }
.pp-member[data-change="add"] { background: var(--success-bg); }
.pp-member[data-change="remove"] { background: var(--warning-bg); }
.pp-member input { grid-row: 1 / span 2; }
.pp-member b { font-weight: 600; }
.pp-member small { grid-column: 3; grid-row: 1 / span 2; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }
.pp-member-meta { grid-column: 2; color: var(--text-muted); font-size: var(--fs-xs); }
.pp-members-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-subtle);
}
.pp-members-diff { margin-right: auto; color: var(--text-secondary); font-size: var(--fs-xs); }

/* ---- 单个人直接改（2026-09-29）：部门列是下拉，角色徽章带 ×，末尾「+ 角色」 ---- */
.pp-dept-cell { display: inline-flex; align-items: center; gap: 4px; }
.pp-dept-cell select {
  height: var(--ctl-h-sm); max-width: 150px; border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-xs); padding: 0 var(--sp-1);
}
.pp-dept-cell i {
  font-style: normal; font-size: var(--fs-xs); line-height: 1; cursor: help;
  padding: 2px 4px; border-radius: var(--radius-sm);
  background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border);
}
.pp-grp-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0 0 0 3px; font-size: var(--fs-sm); line-height: 1; }
.pp-grp-x:hover { color: var(--danger-fg); }
.pp-grp-add {
  height: 22px; max-width: 76px; border: 1px dashed var(--border-control); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); font-family: inherit; font-size: var(--fs-xs); padding: 0 2px; cursor: pointer;
}
.pp-grp-add:hover { color: var(--text-primary); border-style: solid; }

/* 成员名单按部门分段（2026-09-29） */
#pp-members { max-height: 90vh; }
.pp-members-bar { flex-wrap: wrap; }
.pp-members-list { min-height: 320px; }
.pp-member-sec {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4); background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-xs);
}
.pp-member-sec b { font-weight: 600; color: var(--text-secondary); }
.pp-member-sec span { color: var(--text-muted); }

/* ---- 10-09 部门 · 角色 · 权限是什么关系（老板问的）+ 卡片上的权限概要 + 没配权限的角色标出来 ---- */
.pp-howto { padding: 0; }
.pp-howto > summary {
  cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: var(--fs-sm);
  color: var(--text-primary); white-space: nowrap;
}
.pp-howto > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-md); }
.pp-howto-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding: 0 var(--sp-4); }
.pp-howto-box {
  display: grid; gap: var(--sp-1); align-content: start;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken);
  padding: var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-prose); color: var(--text-secondary);
}
.pp-howto-box > b { font-size: var(--fs-sm); color: var(--text-primary); white-space: nowrap; }
.pp-howto-box > b small { font-weight: 400; color: var(--text-muted); margin-left: var(--sp-1); }
.pp-howto-foot { margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-prose); }
@media (max-width: 900px) { .pp-howto-row { grid-template-columns: minmax(0, 1fr); } }

.pp-perm { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.pp-perm[data-tone="ok"] { color: var(--success-fg); }
.pp-perm[data-tone="warn"] { color: var(--warning-fg); font-weight: 600; }
.pp-perm-go { color: var(--accent); font-weight: 400; white-space: nowrap; text-decoration: none; }
.pp-perm-go:hover { text-decoration: underline; }
.pp-dep[data-empty="1"] { border-color: var(--warning-border); border-style: dashed; }
.pp-grp[data-empty="1"] { border-style: dashed; color: var(--text-secondary); }
.pp-grp[data-empty="1"] small { color: var(--warning-fg); font-size: var(--fs-xs); margin-left: 2px; }
.pp-dep-edit { white-space: nowrap; }

/* 数据表的单独权限（10-10）：人名旁的牌子 + 点开的清单行 */
.pp-prules { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--accent-soft-border); border-radius: var(--radius-full);
  background: var(--accent-soft-bg); color: var(--accent-soft-fg); font: inherit; font-size: 12px; cursor: pointer; }
.pp-prules:hover, .pp-prules.on { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.pp-prules-row td { background: var(--surface-sunken); }
.pp-prules-box { padding: 8px 10px; font-size: 13px; }
.pp-prules-box b { display: block; color: var(--text-primary); font-weight: 500; }
.pp-prules-box small { display: block; color: var(--text-muted); font-size: 12px; margin: 2px 0 6px; }
.pp-prules-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pp-prules-box li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-prules-box li a { color: var(--accent); font-weight: 500; text-decoration: none; }
.pp-prules-box li a:hover { text-decoration: underline; }
.pp-prule-lv { font-size: 11px; padding: 1px 7px; border-radius: var(--radius-full); border: 1px solid var(--border); color: var(--text-muted); }
.pp-prule-lv[data-lv="manage"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft-bg); }
.pp-prule-lv[data-lv="view"] { color: var(--info-fg); border-color: var(--info-border); background: var(--info-bg); }
.pp-prule-lv[data-lv="none"] { color: var(--danger-fg); border-color: var(--danger-border); background: var(--danger-bg); }

/* 权限组（老板 10-10）：人名旁的牌子和清单沿用单独权限那套；角色 / 部门卡片上一行 */
.pp-pgs { border-color: var(--line-strong); }
.pp-pg-via { padding: 1px 6px; border-radius: var(--radius-full); background: var(--surface-sunken); font-size: 12px; color: var(--text-secondary); }
.pp-prules-box li b { display: inline; color: var(--text-primary); font-weight: 500; }
.pp-prules-box li.pp-pg-off a, .pp-prules-box li.pp-pg-off b { color: var(--text-muted); }
.pp-pgline a { color: var(--accent); text-decoration: none; }
.pp-pgline a:hover { text-decoration: underline; }
.pp-pgline a.pp-pg-off { color: var(--text-muted); text-decoration: line-through; }

/* ===================== 10-14 人员页第二版：只放人，点一行在右边改（老板：「跟部门、角色和身份有点冲突，还是有点混乱」） ===================== */
/* 顶上一行讲清三样东西各管什么 */
.pp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-prose); }
.pp-legend b { color: var(--text-primary); margin-right: 4px; }
/* 一排「只看哪些人」：互斥，选中的主色 */
.pp-filters { flex-wrap: wrap; margin-top: 0; }
.pp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pp-seg-b { height: var(--ctl-h-sm); padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; }
.pp-seg-b em { font-style: normal; color: var(--text-muted); margin-left: 2px; }
.pp-seg-b:hover { background: var(--surface-hover); color: var(--text-primary); }
.pp-seg-b.on { border-color: var(--accent); background: var(--accent-soft-bg); color: var(--accent-soft-fg); font-weight: 600; }
.pp-seg-b.on em { color: inherit; }
/* 表：一行一人、只读；点一行开右边 */
.pp-people tbody tr[data-id] { cursor: pointer; }
.pp-people tbody tr[aria-selected="true"] td { background: var(--surface-selected); }
.pp-people td { white-space: nowrap; }
.pp-people td.pp-grps { white-space: normal; }
.pp-name { font-weight: 600; }
.pp-name small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; }
/* 飞书 ID · 电话（10-17）：短号等宽，电话另起一行小字 */
.pp-fid { white-space: nowrap; }
.pp-fid code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); }
.pp-fid small { display: block; color: var(--text-muted); font-size: 11px; }
.pp-name .pp-fsname { font-style: normal; font-weight: 400; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning-fg); font-size: 11px; white-space: nowrap; }
/* 系统名（10-17）：详情顶上一栏 */
.pp-rename { display: flex; gap: var(--sp-2); align-items: center; }
.pp-rename .pp-search { max-width: 220px; height: var(--ctl-h); }
.pp-name-meta { margin: 0; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.8; }
.pp-name-meta b { color: var(--text-primary); font-weight: 600; }
.pp-fallback { display: inline-block; padding: 0 var(--sp-2); border: 1px dashed var(--warning-border); border-radius: var(--radius-full);
  background: var(--warning-bg); color: var(--warning-fg); font-size: var(--fs-xs); line-height: 22px; white-space: nowrap; }
.pp-id { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--sp-2); border-radius: var(--radius-full); font-size: var(--fs-xs);
  line-height: 22px; border: 1px solid var(--info-border); background: var(--info-bg); color: var(--info-fg); white-space: nowrap; }
.pp-id[data-r="admin"] { border-color: var(--accent); background: var(--accent-soft-bg); color: var(--accent-soft-fg); font-weight: 600; }
.pp-id small { font-size: 10px; opacity: .8; }
/* 右边详情 */
.pp-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 20; overflow: auto;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-3); }
.pp-side-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--border-subtle); }
.pp-side-top b { font-size: var(--fs-lg); color: var(--text-primary); }
.pp-side-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.pp-side-body { padding: var(--sp-3) var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.pp-basis { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: var(--fs-xs); line-height: var(--lh-prose); color: var(--text-secondary); }
.pp-basis[data-tone="ok"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.pp-basis[data-tone="warn"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.pp-basis[data-tone="info"] { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); }
.pp-side-sec { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.pp-side-sec h3 { margin: 0; font-size: var(--fs-sm); color: var(--text-primary); }
.pp-side-sec h3 small { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); margin-left: 4px; }
.pp-side-sec select { height: var(--ctl-h); border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); padding: 0 var(--sp-2); max-width: 100%; }
.pp-side-sec select.pp-grp-add { width: max-content; }
.pp-side-chips { display: flex; flex-wrap: wrap; gap: 4px; line-height: 24px; }
.pp-side-kv { margin: 0; color: var(--text-secondary); font-size: var(--fs-xs); }
.pp-side-kv code { font-family: var(--font-mono); color: var(--text-primary); }
.pp-side-note { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.pp-side-sec .pp-more p { margin: var(--sp-1) 0 var(--sp-2); }
.pp-side-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-xs); }
.pp-side-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); }
.pp-side-actions { display: flex; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.pp-btn-s { height: 22px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.pp-btn-warn { color: var(--danger-fg); }
.pp-warn-t { color: var(--warning-fg); }
@media (min-width: 1500px) { body.panel-open .pp-app { padding-right: 456px; } }
@media (max-width: 640px) { .pp-side { width: 100vw; border-left: 0; } .pp-legend { display: none; } }
.pp-people .pp-grp, .pp-side-chips .pp-grp { white-space: nowrap; }
.pp-people td.pp-grps { min-width: 180px; }
.pp-people tbody tr[data-picked="1"] td { background: var(--selection-bg); }
.pp-people td.pp-check, .pp-people th.pp-check { width: 32px; text-align: center; }
/* 10-15「谁能看什么」并进人员页：每行能用什么 + 右边全列 */
.pp-can { white-space: nowrap; font-size: var(--fs-xs); }
.pp-can-sens { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; color: var(--danger-fg); background: var(--danger-bg); cursor: help; }
.pp-can-tag { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 7px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); font-size: 12px; }
.pp-can-tag.red { color: var(--danger-fg); background: var(--danger-bg); border-color: transparent; }
.pp-can-more { margin: 4px 0; }
.pp-can-more > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); }
.pp-can-more > div { padding: 4px 0 0; }
/* 10-15 他能用什么能直接改（个人例外）：来源小字、例外标橙、底下保存条 */
.pp-can-h { margin: 10px 0 4px; font-size: var(--fs-sm); color: var(--text-primary); }
.pp-can-g { margin: 2px 0; }
.pp-can-g > summary { cursor: pointer; font-size: var(--fs-sm); padding: 3px 0; color: var(--text-secondary); }
.pp-can-g > summary small { color: var(--text-muted); margin-left: 4px; }
.pp-can-g ul, .pp-can-fg { list-style: none; margin: 2px 0 6px; padding: 0 0 0 10px; }
.pp-can-g li, .pp-can-fg li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; border-bottom: 1px solid var(--border-subtle); }
.pp-can-g li > span:first-child, .pp-can-fg li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-can-g li.pp-can-sub > span:first-child { padding-left: 14px; color: var(--text-secondary); }
.pp-can-g li .pp-dim, .pp-can-fg li .pp-dim { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-can-ex { color: var(--warning-fg); font-size: 11px; }
.pp-can-exn { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; color: var(--warning-fg); background: var(--warning-bg); cursor: help; }
.pp-can-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-sm); }
.pp-can-bar .pp-dim { flex: 1; font-size: 11px; }
/* 三档按钮：和权限总表同一套样子（field-groups.css 里那份只在角色页加载） */
#pp-can-box .pt-b { display: inline-block; min-width: 40px; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface); font: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; }
#pp-can-box .pt-b[data-st="view"] { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); }
#pp-can-box .pt-b[data-st="rw"] { color: var(--success-fg); background: var(--success-bg); border-color: transparent; font-weight: 600; }
#pp-can-box .pt-b[data-st="on"] { color: var(--success-fg); background: var(--success-bg); border-color: transparent; }
#pp-can-box .pt-kind { display: inline-block; font-style: normal; font-size: 10px; padding: 0 5px; margin-right: 4px; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-muted); }
#pp-can-box .pt-kind.write { color: var(--warning-fg); background: var(--warning-bg); border-color: transparent; }