/* 角色与权限（people/roles.html，新模型下的 /people/departments，10-17 权限理顺第 2 步）。前缀 rp-；格子、三段按钮、编辑器、保存条在 shared/perm-edit.css。
 * 颜色纪律同 people.css：只用 tokens.css 的语义 token，不许裸十六进制、不许 :root。 */

.rp-app { padding-bottom: 120px; }      /* 底下保存条不盖住最后几行（展开预览时 roles.js 再加） */
.rp-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

/* ---------- 左：角色清单（带勾） ---------- */
.rp-side { position: sticky; top: var(--sp-4); max-height: calc(100vh - var(--sp-4) * 2); overflow: auto; }
.rp-side-head { display: flex; align-items: center; gap: 8px; padding: var(--sp-2) var(--sp-4); background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.rp-side-head label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rp-side-head span { margin-left: auto; font-weight: 400; }
.rp-role {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-subtle); background: var(--surface); cursor: pointer;
}
.rp-role:hover { background: var(--surface-hover); }
.rp-role.on { background: var(--surface-selected); }
.rp-role.cur, .rp-role.on { box-shadow: inset 3px 0 0 var(--accent); }
.rp-role:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.rp-role b { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.rp-role small { color: var(--text-muted); font-size: var(--fs-xs); }
.rp-role input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.rp-chg { font-style: normal; color: var(--warning-fg); font-size: 10px; }
.rp-nodot { background: var(--border-strong); }
.rp-unused summary, .rp-depts summary { padding: 8px var(--sp-4); cursor: pointer; color: var(--text-muted); font-size: var(--fs-xs); background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); }
.rp-unused summary em, .rp-depts summary em { font-style: normal; margin-left: 4px; }
.rp-depts p { margin: 0; padding: 8px var(--sp-4); color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-prose); }
.rp-depts .rp-dlist small { color: var(--text-muted); }
.rp-new { padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.rp-new-btn { border-style: dashed; color: var(--text-secondary); }
.rp-new-form { display: grid; gap: 8px; margin-top: 8px; }
.rp-new-form .pp-search, .rp-new-form select { max-width: none; width: 100%; height: 32px; }
.rp-new-form select { border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--fs-xs); padding: 0 6px; }
.rp-new-acts { display: flex; gap: 8px; }
.rp-swatches { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- 右：勾 1 个 ---------- */
.rp-main { min-width: 0; display: grid; gap: var(--sp-4); }
.rp-rh { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.rp-rh h2 { margin: 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
.rp-rh h2 small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.rp-members { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.rp-person { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 9px; border-radius: var(--radius-full);
  background: var(--info-bg); color: var(--info-fg); font-size: var(--fs-xs); line-height: 20px; }
.rp-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: var(--fs-sm); padding: 0 3px; line-height: 1; }
.rp-x:hover { color: var(--danger-fg); }
.rp-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0;
  border: 1px dashed var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: var(--fs-sm); }
.rp-add:hover { border-color: var(--accent); color: var(--accent); }
.rp-add.sm { width: 18px; height: 18px; font-size: var(--fs-xs); vertical-align: middle; margin-left: 2px; }
.rp-acts { margin-left: auto; display: flex; gap: 14px; }
.rp-hnote { margin: -4px var(--sp-4) var(--sp-2); color: var(--warning-fg); font-size: var(--fs-xs); }
.rp-subtabs { display: flex; gap: 2px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.rp-subtabs button { border: 0; background: none; padding: 9px 14px; font: inherit; font-size: var(--fs-md); color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; }
.rp-subtabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.rp-subtabs em { font-style: normal; display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--fs-xs); line-height: 18px; font-weight: 600; }
.rp-subtabs button[aria-selected="true"] em { background: var(--accent-soft-bg); color: var(--accent); }
.rp-note { margin: var(--sp-3) var(--sp-4) 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-fg);
  border: 1px solid var(--info-border); font-size: var(--fs-xs); line-height: var(--lh-prose); }
.rp-g6 .rp-note { margin: 0 0 10px; }

/* ---------- 群晖式表（页面 / 开关 / 数据表 / 6 组同一个样子） ---------- */
.rp-rt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.rp-rt th { text-align: left; font-weight: 600; color: var(--text-secondary); font-size: var(--fs-xs); background: var(--surface-sunken);
  padding: 0 var(--sp-3); height: 44px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.rp-rt th.pe-rc { text-align: center; }
.rp-rt td { padding: 0 var(--sp-3); height: 40px; border-bottom: 1px solid var(--border-subtle); }
.rp-rt td.pe-rc { border-left: 1px solid var(--border-subtle); }
.rp-rt th.rp-nm small { font-weight: 400; color: var(--text-muted); margin-left: 8px; }
.rp-rt td.rp-nm small { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; line-height: 1.4; max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-rt tr:hover td { background: var(--surface-hover); }
.rp-rt tr.chg td { background: var(--warning-bg); }
.rp-rt td.rp-was { width: 1%; white-space: nowrap; }
.rp-rt td.rp-c { text-align: center; }
.rp-pg tr.rp-cat td { background: var(--surface-sunken); font-weight: 600; }
.rp-pg tr.rp-cat.chg td { background: var(--warning-bg); }
.rp-pg tr.rp-cat td small { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.rp-pg td.rp-pn { padding-left: 34px; }
.rp-pg td.rp-pn2 { padding-left: 52px; color: var(--text-secondary); font-size: var(--fs-xs); }
.rp-pg td.rp-pn2 small { margin-left: 8px; color: var(--text-muted); }
.rp-pg tr.rp-more td { height: 34px; }
.rp-tg { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.rp-auto { color: var(--text-muted); font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.rp-swt { margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.rp-swt td.rp-nm small { white-space: normal; }

/* 数据表 */
.rp-tbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.rp-q { height: 28px; width: 200px; padding: 0 8px; border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-xs); background: var(--surface); color: var(--text-primary); }
.rp-tl td { height: 50px; }
.rp-fx td.rp-pn { opacity: .85; }
.rp-fx.admin .rp-auto { color: var(--warning-fg); }
.rp-adm { margin-right: 4px; font-size: 11px; }
.rp-tl td.rp-nm b { font-weight: 600; }
.rp-tl tr.locked td.rp-nm { color: var(--text-secondary); }
.rp-tl tr.err td.rp-nm { box-shadow: inset 3px 0 0 var(--danger-fg); }
.rp-tl tr.open:not(.chg) td { background: var(--accent-soft-bg); }      /* 展开着的那一行；改了没存的照样黄 */
.rp-tl th.rp-rows, .rp-tl td.rp-rows { width: 150px; }
.rp-tl td.rp-rows select { width: 132px; height: 28px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-primary); font: inherit; font-size: var(--fs-xs); }
.rp-tl td.rp-rows.chg { box-shadow: inset 0 0 0 2px var(--warning-fg); }
.rp-tl th.rp-cols, .rp-tl td.rp-cols { width: 170px; }
.rp-tl .rp-tact { width: 1%; white-space: nowrap; text-align: right; }
.rp-tl .rp-tact .pe-lnk { margin-left: 10px; }
.rp-colbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; font-size: var(--fs-xs); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.rp-colbtn span { color: var(--accent); }
.rp-colbtn:hover, .rp-colbtn.on { border-color: var(--accent); color: var(--accent); }
.rp-why { color: var(--warning-fg); font-size: var(--fs-xs); white-space: normal; }
.rp-tag { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 1px; }
.rp-tag.own { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border); }
.rp-ftr > td { padding: 0 !important; height: auto !important; background: var(--accent-soft-bg) !important; }
.rp-ftbox { padding: 10px var(--sp-4) 14px; }
.rp-fthead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rp-fthead small { color: var(--text-secondary); font-size: var(--fs-xs); }
.rp-fthead small a { color: var(--accent); }
.rp-fthead .pe-lnk { margin-left: auto; }

/* 6 组：收在数据表下面 */
.rp-g6 { border-top: 1px solid var(--border); }
.rp-g6 > summary { padding: 12px var(--sp-4); cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; list-style: none; }
.rp-g6 > summary::-webkit-details-marker { display: none; }
.rp-g6 > summary::before { content: "▸"; color: var(--text-muted); width: 10px; }      /* summary 用了 flex，原生小三角没了，自己画 */
.rp-g6[open] > summary::before { content: "▾"; }
.rp-g6 > summary b { font-weight: 600; }
.rp-g6 > summary small { color: var(--text-muted); font-size: var(--fs-xs); flex-basis: 100%; padding-left: 18px; }
.rp-g6t { border-top: 1px solid var(--border-subtle); }
.rp-g6t select { height: 28px; min-width: 140px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--fs-xs); }
.rp-g6-where { margin: 10px var(--sp-4) 0; color: var(--text-secondary); font-size: var(--fs-xs); }
.rp-g6 .rp-note { margin: 0 var(--sp-4) 10px; }

/* 每组字段有哪些列（只看） */
.rp-cols { margin: 10px 0 0; border-top: 1px solid var(--border-subtle); }
.rp-cols summary { padding: 10px var(--sp-4); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.rp-cols summary small { font-weight: 400; color: var(--text-muted); margin-left: 6px; font-size: var(--fs-xs); }
.rp-ctabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--sp-4) 10px; }
.rp-ctabs .pe-btn { height: 26px; font-size: var(--fs-xs); }
.rp-ctabs .pe-btn.on { background: var(--accent-soft-bg); border-color: var(--accent); color: var(--accent-soft-fg); font-weight: 600; }
.rp-ctabs em { font-style: normal; color: var(--warning-fg); }
.rp-cwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 0 var(--sp-4) var(--sp-4); }
.rp-cblock h4 { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--text-secondary); }
.rp-cblock p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rp-ccol { padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: 11px; line-height: 20px; color: var(--text-primary); }
.rp-manual { color: var(--info-fg); font-weight: 600; }

/* 勾几个：头上一行写清改的是哪几个，每个角色几个人一颗小牌 */
.rp-rh-multi h2 { font-size: var(--fs-md); }
.rp-rchips { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-rchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: var(--radius-full); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--text-secondary); cursor: default; }
.rp-rchip b { color: var(--text-primary); }

/* 浮层：加人 / 颜色 / 复制自 */
.rp-pop { position: fixed; z-index: var(--z-popover); width: 260px; max-height: 360px; display: grid; gap: 6px; padding: 10px; overflow: auto;
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: var(--fs-sm); }
.rp-pop small { color: var(--text-muted); font-size: var(--fs-xs); }
.rp-pop-list { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.rp-pop-item { display: flex; align-items: center; gap: 6px; border: 0; background: none; text-align: left; padding: 5px 6px; border-radius: var(--radius-sm); font: inherit; cursor: pointer; color: var(--text-primary); }
.rp-pop-item:hover { background: var(--surface-hover); }

@media (max-width: 900px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-side { position: static; max-height: none; }
  .rp-one { overflow-x: auto; }               /* 窄屏：表在卡片里横着滚，不把整页撑宽 */
  .rp-acts { margin-left: 0; }
}
@media (max-width: 640px) {
  .rp-rt td.rp-nm small { white-space: normal; }
}

/* 6 组（可选）分页（10-17 晚：锦上添花，挪出数据表） */
.rp-g6tab { padding-bottom: var(--sp-3); }
.rp-g6tab > .rp-note { margin: var(--sp-3) var(--sp-4) 10px; }
.rp-g6tab .rp-g6-where a { color: var(--accent); }

/* 标识色取色（10-19 老板：每个角色不同色、列几个没用到的备选）：别的角色在用的灰掉，下面一行备选 */
.rp-colors { display: grid; gap: 4px; }
.rp-pop b .pp-swatch-none { vertical-align: -3px; margin-left: 6px; }
.pp-swatch.used { opacity: .3; cursor: not-allowed; }
.rp-dim { color: var(--text-muted); font-size: var(--fs-xs); font-style: normal; }

/* 我的工作（10-19 老板：「我的工作」跟着角色走） */
.rp-work { padding-bottom: var(--sp-3); }
.rp-wwho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.rp-wwho b { font-size: var(--fs-sm); }
.rp-wwho select { height: 30px; min-width: 160px; 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 8px; }
.rp-wwho small { color: var(--text-muted); font-size: var(--fs-xs); flex-basis: 100%; }
.rp-work > .rp-note { margin: var(--sp-3) var(--sp-4) 10px; }
.rp-wt td { height: 40px; }
.rp-wt .rp-wn { width: 48px; text-align: center; color: var(--text-muted); }
.rp-wt tr.rp-wsec td { background: var(--surface-sunken); height: 30px; font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 600; }
.rp-wt tr.bad td { background: var(--danger-bg); }
.rp-wok { color: var(--success-fg); font-size: var(--fs-xs); }
.rp-wbad { color: var(--danger-fg); font-size: var(--fs-xs); font-weight: 600; }
.rp-wwhy { display: block; color: var(--text-muted); font-size: 11px; }
.rp-wt .rp-wmv { width: 70px; white-space: nowrap; }
.rp-wt .rp-wmv .pe-lnk { padding: 0 6px; }
.rp-wt .rp-wact { width: 1%; white-space: nowrap; text-align: right; }
.rp-wt .rp-wact .pe-btn { height: 26px; font-size: var(--fs-xs); margin-left: 6px; }
.rp-wbulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px var(--sp-4); background: var(--danger-bg); border-bottom: 1px solid var(--border-subtle); }
.rp-wbulk small { color: var(--text-secondary); font-size: var(--fs-xs); }
.rp-wpgs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rp-wpg { padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-subtle); font-size: var(--fs-xs); line-height: 20px; }
.rp-wpg.off { color: var(--text-disabled); border-style: dashed; }
.rp-wadd { padding: 12px var(--sp-4); }
.rp-wadd select { height: 30px; min-width: 260px; border: 1px dashed var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); padding: 0 8px; }
.rp-wt .rp-nm b { white-space: nowrap; }
.rp-wt .rp-nm .pp-dot { margin-right: 6px; }