/* 角色与权限 —— 本段样式 rl- 前缀；员工列表 / 侧拉 / 弹窗用 ④ 的 st.css。 */
.rl-full { position: absolute; inset: 0; }
.rl-main { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: #F9FAFB; }

/* 按角色还原侧栏：该角色菜单里没有的项淡出（生产里是不渲染） */
.sb [data-hide] { opacity: .13; filter: grayscale(1); transition: opacity .45s ease; }
.sb .sb-item, .sb .sb-gh { transition: opacity .45s ease; }

/* ---------- 第 1 幕说明卡 ---------- */
.rl-exwrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.rl-ex { width: 760px; border-radius: 20px; background: #fff; border: 1.5px dashed #ADE8DC; box-shadow: 0 8px 28px rgba(10, 22, 41, .06); padding: 32px 36px; display: flex; flex-direction: column; gap: 22px; }
.rl-ex-h b { font-size: 24px; font-weight: 700; color: #0A1629; letter-spacing: -.01em; }
.rl-pills { display: flex; gap: 12px; }
.rl-pill { font-size: 16px !important; padding: 8px 18px !important; opacity: .45; transition: opacity .35s, box-shadow .35s, transform .35s; }
.rl-pill.rl-on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3DCAB1; transform: translateY(-1px); }
.rl-ex-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: flex-start; animation: st-in .35s ease; }
.rl-ex-row small { font-size: 13px; font-weight: 600; color: #64748B; padding-top: 6px; }
.rl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-chip { border-radius: 999px; background: #F1F8F4; color: #0F766E; padding: 5px 12px; font-size: 14px; font-weight: 500; }
.rl-land { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; background: #E7F7EF; color: #0F766E; padding: 8px 14px; }
.rl-land b { font-size: 15px; font-weight: 600; }
.rl-ex-th { display: flex; align-items: center; gap: 8px; border-top: 1px solid #EDEFF0; padding-top: 18px; font-size: 14px; color: #1C3E60; }
.rl-ex-th .lu { color: #3DCAB1; flex: none; }

/* ---------- 系统设置内容区（可滚动镜头） ---------- */
.rl-vp { flex: 1; max-width: 896px; min-width: 0; overflow: hidden; position: relative; }
.rl-col { padding: 28px 0 40px; display: flex; flex-direction: column; gap: 16px; will-change: transform; }

/* ---------- 员工详情：角色卡 ---------- */
.rl-rcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rl-rcard { border-radius: 12px; border: 1px solid #D8E0F0; background: #fff; padding: 12px; font-size: 14px; font-weight: 600; color: #0A1629; transition: background .2s, border-color .2s; }
.rl-rcard.on { background: #F1F8F4; border: 1.5px solid #3DCAB1; }
.rl-rcard.off { opacity: .4; }
.rl-transfer { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #64748B; }
.rl-transfer .lu { width: 12px; height: 12px; }
.rl-inelig { border-radius: 12px; background: #F9FAFB; color: #64748B; padding: 12px; font-size: 13px; animation: st-in .3s ease; }

/* ---------- 系统配置：分组卡 + 行（config-group.tsx） ---------- */
.rl-groups { display: flex; flex-direction: column; gap: 16px; }
.rl-grp { border-radius: 16px; border: 1px solid #E5E7EB; background: #fff; box-shadow: 0 2px 8px rgba(10, 22, 41, .04); overflow: hidden; }
.rl-grp-h { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px 10px; }
.rl-grp-h h3 { margin: 0; font-size: 15px; line-height: 24px; font-weight: 600; color: #0A1629; }
.rl-grp-h p { margin: 0; font-size: 12px; color: #64748B; }
.rl-crow { display: flex; align-items: center; gap: 14px; border-top: 1px solid #EDEFF0; padding: 12px 20px; }
.rl-crow.col { flex-direction: column; align-items: stretch; gap: 12px; }
.rl-crow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rl-crow-t b { font-size: 14px; font-weight: 500; color: #0A1629; }
.rl-crow-t small { font-size: 12px; line-height: 18px; color: #64748B; }
.rl-crow-c { flex: none; display: flex; align-items: center; gap: 14px; }
.rl-segm { display: inline-flex; gap: 3px; border-radius: 10px; background: #F3F4F6; padding: 3px; align-self: flex-start; flex: none; }
.rl-segm i { font-style: normal; height: 30px; display: inline-flex; align-items: center; border-radius: 8px; padding: 0 12px; font-size: 13px; color: #64748B; white-space: nowrap; }
.rl-segm i.on { background: #fff; color: #0A1629; font-weight: 600; box-shadow: 0 1px 2px rgba(10, 22, 41, .08); }
.rl-gate { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: #0A1629; }
.rl-gate > span:nth-child(2) { flex: 1; }
.rl-ctag { border-radius: 6px; background: #F3F4F6; color: #64748B; padding: 2px 8px; font-size: 12px; font-weight: 500; }
.rl-warn { border-top: 1px solid #EDEFF0; background: #FEF3C7; color: #B45309; padding: 12px 20px; font-size: 12px; animation: st-in .3s ease; }
.rl-val { font-size: 13px; color: #1C3E60; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-val.muted { color: #94A3B8; }
.rl-pin { width: 96px; height: 32px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid #D8E0F0; background: #fff; padding: 0 10px; font-size: 13px; color: #0A1629; letter-spacing: 2px; }
.rl-pin i { font-style: normal; color: #94A3B8; letter-spacing: 0; }
.rl-pin .st-caret { letter-spacing: 0; }
.rl-pin.focus { border: 1.5px solid #3DCAB1; box-shadow: 0 0 0 3px #E7F7EF; }
.rl-btn { height: 32px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid #D8E0F0; background: #fff; padding: 0 12px; font-size: 13px; font-weight: 500; color: #1C3E60; white-space: nowrap; }
.rl-btn.dis { opacity: .5; }
.rl-btn.ghost { border-color: transparent; color: #DC2626; }
#kt-stage .rl-crow[data-k="pin-row"] { animation: st-in .35s ease; }

/* ---------- 无权限（Alert variant=destructive） ---------- */
.rl-denied { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; }
.rl-alert { width: 448px; display: flex; gap: 12px; border-radius: 8px; border: 1px solid rgba(220, 38, 38, .5); background: #fff; padding: 16px; color: #DC2626; }
.rl-alert .lu { flex: none; color: #DC2626; margin-top: 1px; }
.rl-alert b { display: block; font-size: 16px; font-weight: 500; line-height: 1.2; margin-bottom: 4px; }
.rl-alert p { margin: 0; font-size: 14px; line-height: 1.5; }