.permission-layout{display:grid;grid-template-columns:178px minmax(0,1fr);gap:20px;align-items:start}.permission-roles{position:sticky;top:12px;display:grid;gap:6px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface,#fff)}.permission-role{display:grid;gap:4px;text-align:left;border:0;border-radius:8px;padding:12px;background:transparent;color:var(--text);cursor:pointer}.permission-role strong{font-size:14px;white-space:nowrap}.permission-role span{font-size:12px;color:var(--text-muted)}.permission-role.active{background:var(--primary-light,#eef2ff);color:var(--primary,#4f46e5)}.permission-editor{min-width:0}.permission-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;background:var(--bg,#f8fafc)}.permission-toolbar h3{margin:0 0 5px;font-size:18px}.permission-toolbar p{font-size:12px;margin:0}.permission-help{font-size:13px;line-height:1.8;background:var(--surface,#fff);border:1px solid var(--border);padding:12px 16px;border-radius:10px;margin:0 0 14px;color:var(--text-muted)}.permission-filter{display:grid;grid-template-columns:minmax(180px,1fr) 190px;gap:10px;margin-bottom:12px}.permission-filter input,.permission-filter select{width:100%;min-width:0}.permission-global{padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff);margin-bottom:20px}.permission-global summary{cursor:pointer;font-weight:600;font-size:13px}.permission-category h4{font-size:13px;color:var(--text-muted);margin:22px 0 9px}.permission-module{background:var(--surface,#fff);border:1px solid var(--border);border-radius:10px;margin:8px 0;overflow:hidden}.permission-module>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;list-style:none}.permission-module>summary:after{content:'⌄';margin-left:auto;color:var(--text-muted)}.permission-module[open]>summary:after{content:'⌃'}.permission-module>summary strong{font-size:14px;white-space:nowrap}.permission-status{font-size:12px;color:var(--text-muted);white-space:nowrap}.permission-module-body{border-top:1px solid var(--border);padding:4px 16px 14px}.permission-setting{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.permission-setting:last-child{border-bottom:0}.permission-setting>b{font-size:12px;color:var(--text-muted);padding-top:9px;white-space:nowrap}.permission-actions{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;min-width:0}.permission-actions .permission-check{white-space:nowrap;display:inline-flex;gap:6px;align-items:center;font-size:13px;line-height:1.5;min-height:34px;margin:0}.permission-actions input{flex:0 0 auto}.permission-ranges{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px 18px;min-width:0}.permission-ranges>label{display:grid;grid-template-columns:108px minmax(0,1fr);gap:8px;align-items:center;min-width:0;margin:0}.permission-ranges>label>span{font-size:12px;white-space:nowrap}.permission-ranges select{width:100%;min-width:0;height:38px;white-space:nowrap}.permission-fixed{font-size:12px;margin:12px 0 0;color:var(--text-muted)}@media(max-width:850px){.permission-layout{grid-template-columns:1fr}.permission-roles{position:static;display:flex;overflow-x:auto}.permission-role{flex:0 0 auto}.permission-toolbar{position:static;align-items:flex-start;flex-wrap:wrap}.permission-filter{grid-template-columns:1fr}.permission-setting{grid-template-columns:1fr;gap:6px}.permission-setting>b{padding:0}.permission-ranges{grid-template-columns:1fr}.permission-actions .permission-check{min-height:44px}.permission-ranges select{min-height:44px}.permission-global summary{min-height:32px}.permission-ranges>label{grid-template-columns:112px minmax(0,1fr)}}

.permission-personal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 20px}.permission-personal-grid label{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:8px}.permission-personal-grid label>span{white-space:nowrap}.permission-personal-grid select{min-width:0;width:100%}@media(max-width:600px){.permission-personal-grid{grid-template-columns:1fr}.permission-toolbar{flex-wrap:wrap}.permission-personal-grid select{min-height:44px}}

/* 岗位权限工作台：主开关三态 + 范围多选胶囊 + 上级关闭时下级整组失效 */
.perm-seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.perm-seg-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer;color:#475569;line-height:1.5}
.perm-seg-btn.active{background:#0F766E;border-color:#0F766E;color:#fff;font-weight:600}
.perm-seg-btn:not(.active):hover{border-color:#0F766E;color:#0F766E}
.perm-chips{display:flex;gap:6px;flex-wrap:wrap}
.perm-chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-size:12.5px;cursor:pointer;color:#475569}
.perm-chip.on{background:#ECFDF5;border-color:#0F766E;color:#0F766E;font-weight:600}
.perm-chip:disabled{opacity:.4;cursor:not-allowed}
.perm-scope{display:flex;flex-direction:column;gap:6px;margin:8px 0;font-size:13px;color:#475569}
.permission-status.is-off{color:#94A3B8}.permission-status.is-view{color:#0F766E}.permission-status.is-edit{color:#B45309}
.permission-module-body.is-locked .permission-setting+.permission-setting,.permission-module-body.is-locked .perm-chips,.permission-module-body.is-locked .permission-ranges,.permission-module-body.is-locked .permission-actions{opacity:.45;pointer-events:none}
#permSummaryLine{line-height:1.7}

/* 记录范围下面那句解释原来被自动排进 80px 的标签列，一个字一行；让它横跨整行 */
.permission-setting>.form-hint{grid-column:2/-1;margin:10px 0 0;font-size:12px;line-height:1.75;color:var(--text-muted)}
@media(max-width:850px){.permission-setting>.form-hint{grid-column:1/-1}}

/* 左侧标签列原来是 80px 定宽 + nowrap，"记录范围（可多选）"这种长标签会溢出压到右边的"可查看记录"上；让标签列按内容自适应 */
.permission-setting{grid-template-columns:max-content minmax(0,1fr)}
.permission-setting>b{padding-right:4px}

/* ============ 吸顶条穿帮（老板 2026-10-18：往下滚时列表从吸顶条上方的缝里透出来，像镂空） ============
   滚动容器不是 window，是 .main（position:fixed + overflow:auto，见 design-system.css:115）。
   sticky 的约束线取的是滚动容器**内容盒**上沿，也就是被 .main 的 padding-top 顶下来一截
   （>1100px 是 32px，851~1100px 是 24px，见 design-system.css:115 / :559），
   而 .main 的那条 padding 带仍然在视口里 —— 模块列表滚上去时就从吸顶条头顶这条缝里露出来。
   把约束线按同样高度往上挪，让吸顶条贴住视口上沿，滚过去的内容一律被它整个盖住；
   左侧岗位列表跟着挪，保持原来比吸顶条低 12px 的关系。 */
.permission-toolbar,.permission-roles{--perm-stick-gap:32px}
.permission-toolbar{top:calc(-1 * var(--perm-stick-gap))}
.permission-roles{top:calc(12px - var(--perm-stick-gap))}
@media(max-width:1100px){.permission-toolbar,.permission-roles{--perm-stick-gap:24px}}
@media print{.permission-toolbar,.permission-roles{position:static;top:auto}}

/* 四类记录范围按行对齐：标签不参与胶囊换行，窄屏也只在选项区换行。 */
.permission-ranges:has(>.perm-scope){grid-template-columns:minmax(0,1fr);gap:6px}
.permission-ranges>.perm-scope{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:start;gap:12px;margin:0;padding:0}
.permission-ranges>.perm-scope>span{white-space:nowrap;line-height:34px;font-weight:500}
.perm-scope .perm-chips{min-width:0;gap:6px 8px}.perm-scope .perm-chip{min-height:34px;white-space:nowrap}
@media(max-width:650px){.permission-ranges>.perm-scope{grid-template-columns:90px minmax(0,1fr);gap:8px}.perm-scope .perm-chip{min-height:44px}.permission-ranges>.perm-scope>span{line-height:44px}}

@media(max-width:850px){.permission-setting{grid-template-columns:minmax(0,1fr)}}

/* 记录范围四行与下方备注再收紧（老板 2026-10-18：上下间距还是太大，要和其他页面一致）。
   grid 版布局是并行会话刚落地的，这里只在其后覆盖间距，不动结构。 */
.permission-ranges:has(>.perm-scope){gap:2px}
.permission-ranges>.perm-scope{grid-template-columns:96px minmax(0,1fr);gap:10px}
.permission-ranges>.perm-scope>span{line-height:28px}
.perm-scope .perm-chips{gap:4px 7px}
.perm-scope .perm-chip{min-height:28px;padding:2px 8px;font-size:12px;line-height:1.2}
.permission-setting{padding:5px 0}
.permission-setting>.form-hint{margin:3px 0 0;line-height:1.55;font-size:12px}
@media(max-width:650px){.perm-scope .perm-chip{min-height:40px}.permission-ranges>.perm-scope>span{line-height:40px}}

/* 记录范围下方备注与上面三行的间距（老板 2026-10-18 截图）：来源是 .permission-setting 的 grid gap，
   上一轮只改了 padding 没动 gap，所以还留着一大截。备注本身仍占内容列。 */
.permission-setting{gap:4px 12px;padding:4px 0}
.permission-setting>.form-hint{grid-column:2;margin:0;line-height:1.55;font-size:12px}

/* 记录范围间距的最终一版（老板 2026-10-18：上版收得太狠，且备注与上面没对齐）。
   取值参考本页其它设置区：行距 8px、胶囊 32px；备注改成普通说明文字（去掉盒子和内边距），
   左缘与上方行标签对齐，行高 1.7，上间距 12px。 */
.permission-ranges:has(>.perm-scope){gap:8px}
.perm-scope .perm-chip{min-height:32px;padding:3px 10px;font-size:12.5px;line-height:1.3}
.permission-ranges>.perm-scope>span{line-height:32px}
.permission-setting{gap:12px 12px;padding:8px 0}
.permission-setting>.form-hint{grid-column:2;margin:0;padding:0;background:none;border:0;line-height:1.7;font-size:12px;color:var(--text-muted,#64748b)}
@media(max-width:650px){.perm-scope .perm-chip{min-height:40px}.permission-ranges>.perm-scope>span{line-height:40px}}

/* 权限页易用性整改（老板 2026-10-19 第 1 条）：筛选行加「只看 / 展开全部 / 收起全部」，
   未保存的保存按钮要显眼。四个控件同一行、同一高度，窄屏折成两列。 */
.permission-filter{grid-template-columns:minmax(180px,1fr) 168px 150px auto;align-items:center}
.permission-filter input,.permission-filter select{height:38px}
.perm-filter-ops{display:flex;gap:8px;justify-content:flex-end}
.perm-filter-ops .btn-ghost{height:38px;padding:0 12px;font-size:13px;white-space:nowrap}
.permission-toolbar .btn-primary.is-dirty{background:#d97706;border-color:#d97706;color:#fff;box-shadow:0 0 0 3px rgba(217,119,6,.18)}
@media(max-width:850px){.permission-filter{grid-template-columns:1fr 1fr}.perm-filter-ops{grid-column:1/-1;justify-content:stretch}.perm-filter-ops .btn-ghost{flex:1}}

/* 权限页易用性整改（老板 2026-10-19 第 1 条）：筛选行加「只看 / 展开全部 / 收起全部」，
   未保存的保存按钮要显眼。四个控件同一行、同一高度，窄屏折成两列。 */
.permission-filter{grid-template-columns:minmax(180px,1fr) 168px 150px auto;align-items:center}
.permission-filter input,.permission-filter select{height:38px}
.perm-filter-ops{display:flex;gap:8px;justify-content:flex-end}
.perm-filter-ops .btn-ghost{height:38px;padding:0 12px;font-size:13px;white-space:nowrap}
.permission-toolbar .btn-primary.is-dirty{background:#d97706;border-color:#d97706;color:#fff;box-shadow:0 0 0 3px rgba(217,119,6,.18)}
@media(max-width:850px){.permission-filter{grid-template-columns:1fr 1fr}.perm-filter-ops{grid-column:1/-1;justify-content:stretch}.perm-filter-ops .btn-ghost{flex:1}}

/* 生效核对卡：只剩两句短提示后，把标题与行距收进来，别让一张卡占掉半屏 */
#permScopeNotice h3{margin:0 0 10px;font-size:14px}
#permScopeNotice .form-hint{margin:0 0 8px;padding:8px 12px}
#permScopeNotice .form-hint:last-child{margin-bottom:0}