/* =========================================================================
   ⚠️⚠️ 做抽屉前先读：/common/README.md（工作台公共库 · 抽屉规范，2026-10-09 文哥定）
   铁律：所有工作台抽屉一律走本公共库。关闭在【左】；头部右侧插槽只放 ↑↓/↗/副标题；
        【操作按钮（保存/取消/编辑/新增…）一律放底栏、右对齐】；禁止自写遮罩/自造按钮位置。
   ========================================================================= */
/* =========================================================================
   /common/drawer.css — 工作台公共件 §14：抽屉 / 弹窗「壳」（2026-09-18 文哥定）
   上收来源：供应链工作台（2026-09-16 侧边抽屉）→ 公共库；人事工作台同步改用本件。
   结构：.modal-mask > .modal(.drawer | .full | .sm) > .modal-head + .modal-body + .modal-footer
   行为另见 /common/drawer.js（dwOpen / dwClose / dwCloseAll / dwMaskClose）。
   ⚠️ 各页不再自写这些「壳」样式与开关逻辑；页面只写自己的内容（内容分块样式留在页面）。
   ========================================================================= */

/* 遮罩 + 弹窗本体 */
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: center; justify-content: center; z-index: 999000; padding: 16px; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: min(960px, 96vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.28); }
.modal.sm { width: min(520px, 94vw); }

/* 全屏弹窗（如操作日志） */
.modal-mask.full-mask { padding: 0; }
.modal.full { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; }

/* 侧边抽屉：遮罩穿透（不压暗、页面仍可点），点抽屉外空白关闭（见 drawer.js） */
.modal-mask.drawer-mask { padding: 0; align-items: stretch; justify-content: flex-end; background: transparent; pointer-events: none; }
.modal-mask.drawer-mask .modal { pointer-events: auto; }
.modal-mask.drawer-mask.show .modal { animation: drawerIn .22s ease-out; }
.modal.drawer { width: min(900px, 94vw); max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; box-shadow: -12px 0 48px rgba(0,0,0,.28); }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ---- 标题栏：固定规则（2026-09-18 文哥定：以供应链工作台抽屉为基准，两台对齐）
   · 关闭按钮统一在**左**（.modal-x 默认左，不再自动靠右）
   · 头部**右侧 = 插槽 .modal-slots**：里面放「上一份/下一份」箭头、副标题、或别的都行；不需要就空着
   · 头高统一 min-height:55px 且内容垂直居中 → 各台头部不会因内容不同而高低不齐
   · 副标题 .modal-sub（标题右边的小灰字） */
/* 度量**逐项抄顶部栏 .wtop**（2026-09-18 文哥定：高度 58／左右 24／间距 20；标题字号 2026-09-19 与顶栏同步缩一号 → 16px）——
   抽屉头部与顶部栏看起来必须是同一个东西，只是换个地方出现。 */
.modal-head { display: flex; align-items: center; gap: 20px; min-height: 58px; padding: 0 24px; border-bottom: 1px solid var(--border, var(--line, #e3e8f0)); flex-shrink: 0; }
.modal-head h2 { font-size: 16px; font-weight: 600; color: #000; }   /* 2026-09-19 文哥定：17→16，与页面顶栏同步 */
.modal-head .modal-x { flex: 0 0 auto; border: none; background: transparent; color: #9ca3af; font-size: 18px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.modal-head .modal-x:hover { color: #333; background: #f2f4f7; }
.modal-head .modal-x.left { margin-left: 0; }                                /* 兼容旧写法：等同默认（左） */
.modal-head .modal-x.right { margin-left: auto; }                            /* 例外才用右 */
.modal-head .modal-slots { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.modal-head .modal-slots .nav-arrows { margin-left: 0; }                      /* 放进插槽后不再单独靠右 */
.modal-head .modal-sub { font-size: 11.5px; color: var(--faint, #8a93a6); }   /* 2026-09-19 文哥定：12.5→11.5 */
.modal-head .nav-arrows { margin-left: auto; display: flex; gap: 4px; }       /* 不套插槽单独用时仍靠右 */
.modal-head .nav-arrows button, .modal-head .nav-tab { display: inline-flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; border: 1px solid var(--border, var(--line, #e3e8f0)); background: #fff; color: #4b5563; cursor: pointer; border-radius: 6px; width: 28px; height: 26px; line-height: 1; font-size: 13px; }
.modal-head .nav-arrows button:hover:not(:disabled), .modal-head .nav-tab:hover { color: #0033ff; border-color: #0033ff; }
.modal-head .nav-arrows button:disabled { opacity: .35; cursor: default; }
.modal-head .nav-arrows button[hidden], .modal-head .nav-tab[hidden] { display: none; }
.modal-head .nav-arrows button > svg, .modal-head .nav-tab > svg { display: block; flex: 0 0 auto; }
.modal-head .nav-arrows button:hover:not(:disabled) { color: #0033ff; border-color: #0033ff; }
.modal-head .nav-arrows button:disabled { opacity: .35; cursor: default; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border, var(--line, #e3e8f0)); flex-shrink: 0; }
.modal-footer.dw-foot-off { display: none; }   /* 底栏只剩「关闭」类收口按钮（或无按钮）→ 整条不显示（2026-09-19 文哥定；由 drawer.js 自动打） */
.modal-footer:empty { display: none; }          /* 动态底栏暂时为空时不留白条 */

/* ---- 底栏规则（2026-09-19 文哥定，取代 09-18「抽屉默认带底栏」）：
   底栏只在**底部有操作按钮**（审批／保存／取消／下一步等）时出现；
   若底部只剩「关闭」这类收口按钮（或压根没有按钮）→ **不出底栏**，关闭走头部 ✕。
   由 drawer.js 自动判定并给该底栏打 .dw-foot-off（动态写入的底栏也生效），页面不必手写。 ---- */

/* ---- 抽屉内通用件（2026-09-18 文哥定：从人事工作台上收，样式以供应链抽屉为准）----
   .dw-tabs / .dw-tab   抽屉内二级 tab
   .dw-pane             二级 tab 的容器
   .dw-sec              分组卡（白底 + 边框 + 标题左侧黑竖条）
   .dw-row              键值行（左右两端、虚线分隔）
   .dw-tag              状态标签（灰底小胶囊，用 <i> 标签）
   ⚠️ 这些只放**样式**；具体放什么内容、点了做什么，仍由各页面自己定。 */
.dw-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line, #e3e6ea); margin: 0 0 14px; }
/* 头部竖线分隔符（做法与顶部栏同款：1px × 20px 浅灰 #e2e8f2）2026-09-18 文哥定 */
.modal-head .modal-div { width: 1px; height: 20px; background: #e2e8f2; flex: 0 0 auto; }
/* 头部里的二级 tab（2026-09-18 文哥定）：tab 上提到标题栏、与标题同一行，贴住头部底边；
   选中态下划线正好压在头部那条分隔线上（-1px），像是一个整体 */
.modal-head .dw-tabs { margin: 0 0 -1px; border-bottom: 0; align-self: stretch; align-items: stretch; gap: 0; }   /* tab 间距 = 靠 padding 撑（与顶部栏 .wtop-tabs gap:0 同做法） */
.modal-head .dw-tab { align-self: stretch; display: inline-flex; align-items: center; padding: 0 15px; }   /* tab 左右内边距 15px（同顶部栏） */
/* tab 颜色 = 顶部栏口径（2026-09-18 文哥定）：默认 #595959 ／ 悬停 #262626 ／ 选中黑色 + 黑色下划线。
   公共件只留这一套颜色，避免「头部黑、内容区蓝」两套打架。 */
.dw-tab { padding: 8px 2px; font-size: 13px; font-weight: 500; color: #595959; cursor: pointer; border-bottom: 2px solid transparent; }   /* 2026-09-19 文哥定：14→13，与页面顶栏一级 tab 同步 */
.dw-tab:hover { color: #262626; }
.dw-tab.active { color: #000; border-bottom-color: #000; font-weight: 600; }
.dw-pane[hidden] { display: none; }
.dw-sec { background: #fff; border: 1px solid var(--line, #e3e6ea); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.dw-sec h3 { font-size: 13.5px; color: #000; margin: 0 0 10px; border-left: 3px solid #000; padding-left: 8px; }
.dw-sec p { font-size: 13px; line-height: 1.9; color: var(--mut, #5b6675); margin: 0; }
.dw-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--mut, #5b6675); padding: 7px 0; border-bottom: 1px dashed var(--line, #e3e6ea); }
.dw-row:last-child { border-bottom: 0; }
.dw-tag { font-style: normal; font-size: 12px; color: #8a93a6; background: #f0f2f6; border-radius: 3px; padding: 1px 8px; }
/* 抽屉内「勾选行」（2026-09-18 文哥定）：权限抽屉里点勾 → 由系统去对应系统打标签 */
.dw-row .dw-chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #333c4e; }
.dw-row .dw-chk input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--brand, #0033ff); cursor: pointer; margin: 0; }
/* 抽屉内「子权限」区块（2026-09-18 文哥定）：挂在某工作台行下的细粒度权限，缩进+竖线体现从属 */
.dw-sub { margin: -4px 0 10px 24px; padding: 2px 0 2px 14px; border-left: 2px solid #e2e8f2; }
.dw-sub .dw-sub-t { font-size: 12px; color: #8a93a6; margin: 2px 0 4px; }
.dw-sub .dw-row { min-height: 30px; }
.dw-sub .dw-row .dw-chk { font-size: 13px; color: #333c4e; }
/* 一行并排的多个勾选（2026-09-18 文哥定）：不留「已开通」状态标签，勾上=开通，没勾=没开通 */
.dw-sub .dw-row.dw-chks { justify-content: flex-start; gap: 2px 22px; flex-wrap: wrap; }
.dw-sub .dw-row.dw-chks .dw-chk { font-size: 13px; color: #333c4e; }
.dw-sub .dw-row.dw-chks .dw-lbl { font-size: 13px; color: #333c4e; margin-right: 2px; }
.dw-tag.ok { color: #15803d; background: #e8f7ee; }     /* 已开通 / 已拥有 */
.dw-tag.no { color: #9aa3b2; background: #f0f2f6; }     /* 未开通 / 未拥有 */

/* ---- 独立全页模式（2026-10-03 文哥定）----
   抽屉右上角 ↗ 「在新标签页打开」的深链页，是一个**占满整屏的独立全页**，不是侧栏抽屉。
   页面在深链参数命中时给 <body> 加 .dw-standalone；此处把抽屉铺满整屏、白底、去阴影/去滑入动画，
   并隐掉「在新标签页打开」图标（已在独立标签页里，再点无意义）。 */
body.dw-standalone .modal-mask.drawer-mask { background: #fff; pointer-events: auto; }
body.dw-standalone .modal-mask.drawer-mask .modal.drawer { width: 100%; max-width: 100%; height: 100%; box-shadow: none; animation: none; border-radius: 0; }
body.dw-standalone .modal-head [data-nav-tab] { display: none; }