/* 设计令牌（SRS 5.1 像素级规范，全系统唯一来源） */
:root {
  /* 主色 */
  --primary: #1E3A5F;
  --primary-light: #DFE9F5;
  --primary-hover: #2B4A78;
  --bg-body: #D2DAE7;
  --bg-card: #FFFFFF;

  /* 功能色 */
  --danger: #C0392B;
  --warning: #B9770E;
  --success: #1E8449;
  --info: #2C7BB6;
  --text-main: #333333;
  --text-secondary: #3F4A57;
  --text-placeholder: #5A6472;
  --border: #8494AC;
  --border-light: #B9C4D4;

  /* 文件类型色（导出按钮，2026-10-22 用户要求）：固定深底+白字，白天/夜间都成立。
     语义分工：**实心**=导出（非破坏性），**白底+危险色描边**=删除/批量删除（破坏性），
     所以 PDF 的深红与 --danger 同色系但不会和删除按钮混。 */
  --file-excel: #217346;
  --file-excel-hover: #1A5C38;
  --file-pdf: #B01E24;
  --file-pdf-hover: #8E171C;

  /* 字号阶梯 T1–T5（唯一来源；settings.js 的 小/标准/大 直接覆盖这 5 个值）
     T1 页面/弹窗标题 · T2 区块标题 · T3 正文/表格/表单 · T4 辅助 · T5 标签 */
  --fs-t1: 16px;
  --fs-t2: 14px;
  --fs-t3: 14px;
  --fs-t4: 12px;
  --fs-t5: 12px;

  /* 旧令牌（保留兼容：仍有 94 处用 var(--font-*)） */
  --font-h1: 24px;
  --font-h2: 18px;
  --font-h3: 16px;
  --font-body: 14px;
  --font-small: 12px;
  --font-number: 36px;

  /* 间距/圆角/阴影 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.10);

  /* 布局（SRS 5.2） */
  --header-h: 56px;
  --sidebar-w: 220px;

  /* 弹窗专用色（P0-2026-10-20）——只服务 .ui-modal，不动全站色板
     设计口径：结构靠"面"区分而非"线"；浅色界面里死黑遮罩压成冷调；危险色加深到 AA */
  --modal-mask: rgba(16, 24, 40, 0.52);
  --modal-head-bg: #EEF3FA;
  --modal-foot-bg: #EEF3FA;
  --modal-divider: #DCE6F2;
  --modal-title: #1B2733;
  --modal-sub-bg: #E8EEF5;
  --modal-sub-fg: #1E3A5F;
  --modal-close: #7C8798;
  --modal-close-hover-bg: #E7EEF9;
  --modal-close-hover-fg: #1E3A5F;
  --modal-shadow: 0 24px 64px rgba(15, 23, 42, 0.24), 0 2px 8px rgba(15, 23, 42, 0.08);
  --modal-danger: #C0392B;
  --modal-btn-primary: #1E3A5F;
  --modal-btn-primary-hover: #2B4A78;
}

/* ===== 夜间主题（html[data-theme=dark]，防闪烁在 head 内联脚本设置） ===== */
html[data-theme="dark"] {
  /* 主色提亮：深色底上作为文字/标题必须可读（BGR-32 同类：--primary 夜间过暗） */
  --primary: #5B8AC9;
  --primary-light: #1C2838;
  --primary-hover: #6B9BD9;
  --bg-body: #10141C;
  --bg-card: #1A2130;
  --danger: #E0695B;
  --warning: #E3A04A;
  --success: #4CAF7D;
  --info: #4A9FD8;
  --text-main: #E4E8EF;
  --text-secondary: #A3ABB9;
  --text-placeholder: #6A7285;
  --border: #2A3344;
  --border-light: #222B3A;
  --shadow-card: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-hover: 0 6px 20px rgba(0,0,0,0.45);

  /* 弹窗专用色（暗色档：头/底比卡片亮一档，形成"面"的层次） */
  --modal-mask: rgba(4, 8, 16, 0.62);
  --modal-head-bg: #232E42;
  --modal-foot-bg: #232E42;
  --modal-divider: #33405A;
  --modal-title: #E9EDF5;
  --modal-sub-bg: #24314A;
  --modal-sub-fg: #A8C0E4;
  --modal-close: #8A94A6;
  --modal-close-hover-bg: #2A3548;
  --modal-close-hover-fg: #C7D6EE;
  --modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --modal-danger: #C0392B;
  --modal-btn-primary: #3F6E9E;
  --modal-btn-primary-hover: #4A7BB0;
}

/* ===== 输入控件与按钮主题化（夜间下深色背景 + 亮色文字） ===== */
input, select, textarea {
  background: var(--bg-card);
  color: var(--text-main);
}
/* 控件字号/字体跟正文 T3（2026-10-22「控件收敛」收尾）：浏览器默认给 button/input/select/textarea
 * 13.3333px + Arial 且不继承正文——老页面没写 font-size 时，系统"文字大小=大"下正文 16px、
 * 工具栏按钮仍 13.33px（用户反馈：企业信息/用户管理的按钮比隐患页小）。
 * 与外壳 .ui-btn/.ui-input、hazard .hzi-btn/.hzi-input 的 var(--fs-t3) 同档；页面显式 font-size 仍优先。 */
button, input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-t3);
}
input::placeholder { color: var(--text-placeholder); }
/* 按钮不继承 body 文字色（浏览器默认黑），统一用主题文字色；主按钮内联 color:#fff 优先级更高不受影响 */
/* 字号调到「大」时按钮不折行、不被 flex 压扁（原来「搜索/批量导入」会竖排） */
button { color: var(--text-main); white-space: nowrap; flex-shrink: 0; }
button[disabled] { color: var(--text-placeholder); }

/* ===== 夜间侧栏 hover（背景稍亮、文字保持亮色，避免深蓝字看不清） ===== */
html[data-theme="dark"] .sidebar .menu-item:hover { background: #243349; color: #E4E8EF; }
html[data-theme="dark"] .sidebar .menu-group:hover > .menu-label { background: #243349; color: #E4E8EF; }
html[data-theme="dark"] .sidebar .menu-children .menu-item:hover { color: #E4E8EF; }

/* ===== 富文本编辑器（wangEditor，站内信弹窗）夜间适配（BUG-62：vendor 内联写死 #fff 白底/#999 灰字，夜间不可读；仅主题变量覆盖，白天保持原样） ===== */
html[data-theme="dark"] .w-e-toolbar,
html[data-theme="dark"] .w-e-text-container,
html[data-theme="dark"] .w-e-menu-panel,
html[data-theme="dark"] .w-e-toolbar .w-e-droplist,
html[data-theme="dark"] .w-e-menu .w-e-panel-container {
  background-color: var(--bg-card);
  color: var(--text-main);
}
html[data-theme="dark"] .w-e-text { color: var(--text-main); }
html[data-theme="dark"] .w-e-text-container .placeholder { color: var(--text-placeholder); }
html[data-theme="dark"] .w-e-toolbar .w-e-menu i { color: var(--text-secondary); }
html[data-theme="dark"] .w-e-toolbar .w-e-menu:hover { background-color: #243349; }
html[data-theme="dark"] .w-e-toolbar .w-e-menu:hover i { color: var(--text-main); }
html[data-theme="dark"] .w-e-toolbar .w-e-droplist,
html[data-theme="dark"] .w-e-menu .w-e-panel-container,
html[data-theme="dark"] .w-e-text table td,
html[data-theme="dark"] .w-e-text table th { border-color: var(--border); }
html[data-theme="dark"] .w-e-toolbar .w-e-droplist .w-e-dp-title,
html[data-theme="dark"] .w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item,
html[data-theme="dark"] .w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item,
html[data-theme="dark"] .w-e-menu .w-e-panel-container .w-e-panel-tab-title .w-e-item,
html[data-theme="dark"] .w-e-menu .w-e-panel-container .w-e-panel-tab-title .w-e-active,
html[data-theme="dark"] .w-e-menu .w-e-panel-container .w-e-panel-tab-content input[type=text],
html[data-theme="dark"] .w-e-menu .w-e-panel-container .w-e-button-container button { color: var(--text-main); }
html[data-theme="dark"] .w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item:hover,
html[data-theme="dark"] .w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item:hover,
html[data-theme="dark"] .w-e-menu .w-e-panel-container .w-e-button-container button:hover { background-color: #243349; }
html[data-theme="dark"] .w-e-text blockquote,
html[data-theme="dark"] .w-e-text code,
html[data-theme="dark"] .w-e-text table th { background-color: #243349; }
html[data-theme="dark"] .w-e-text blockquote { border-left-color: var(--primary); }

/* ===== 主题切换过渡（白天/夜间 0.3s 平滑渐变；性能模式整体关闭） ===== */
body, .header, .sidebar, .content, .card, .menu-item, .menu-label,
input, select, button, table, th, td,
.ui-mask .ui-card, #msg-panel {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
[data-mode="perf"] * { transition: none !important; }

/* ===== 菜单 SVG 图标（sprite；外部 use 的 currentColor 继承不稳定，显式指定颜色） ===== */
.menu-label { display: flex; align-items: center; }
.menu-icon { width: 18px; height: 18px; margin-right: 7px; flex-shrink: 0; color: var(--text-main); }
.menu-item:hover .menu-icon { color: var(--primary-hover); }
.menu-item.active .menu-icon { color: #fff; }
html[data-theme="dark"] .menu-item:hover .menu-icon { color: #E4E8EF; }
#settings-btn { color: #fff; }
#settings-btn .menu-icon { color: #fff; }
[data-mode="quality"] .menu-icon { transition: transform 0.2s ease; }
[data-mode="quality"] .menu-item:hover .menu-icon { transform: scale(1.15); }

/* ===== 卡片悬浮质感（画质模式：阴影加深 + 轻微上浮） ===== */
[data-mode="quality"] .card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
[data-mode="quality"] .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* ===== 右侧内容区列表行 hover 高亮（外壳统一：所有 .card 内表格数据行） =====
 * 行样式为内联 border-bottom、无内联背景（users/depts/dicts/audit/jobs/审批 等外壳列表页共用）
 * 高亮背景用主题变量（白天 --primary-light；夜间与侧栏 hover 同款 #243349，BUG-32 对比度达标）
 * 表头行（每表首行）不参与高亮，保持原样
 */
.card table tr:hover td { background: var(--primary-light); }
.card table thead tr:hover td { background: transparent; }   // V2.127k 修复：仅保护表头（原 tr:first-child 误伤 tbody 首行 hover）
html[data-theme="dark"] .card table tr:hover td { background: #243349; }

/* ===== P3 细节动效 ===== */
/* 铃铛新消息摆动（画质模式） */
@keyframes bellRing {
  0% { transform: rotate(0); }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-14deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}
#bell.bell-ring { display: inline-block; animation: bellRing 0.5s ease; }
[data-mode="perf"] #bell.bell-ring { animation: none; }
/* 设置图标 hover 旋转（画质模式） */
[data-mode="quality"] #settings-btn .menu-icon { transition: transform 0.3s ease; }
[data-mode="quality"] #settings-btn:hover .menu-icon { transform: rotate(90deg); }
/* 尊重系统减动效（无障碍，全局关闭动画/过渡） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== 骨架屏（页面加载占位，shimmer 动画仅画质模式） ===== */
.skeleton { padding: 4px; }
.sk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.sk-line { height: 14px; border-radius: 4px; margin-bottom: 12px; background: var(--border-light); }
[data-mode="quality"] .sk-line {
  background: linear-gradient(90deg, var(--border-light) 25%, #EDEFF3 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
html[data-theme="dark"][data-mode="quality"] .sk-line {
  background: linear-gradient(90deg, var(--border-light) 25%, #2A3344 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ===== 面板/列表切换过渡（外壳统一：审批中心 Tab、角色权限角色切换等） =====
 * 重渲染后的内容区淡入 + 轻微上移；性能模式禁用动画保持零动效
 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.panel-switch { animation: fadeUp 0.45s ease; }
[data-mode="perf"] .panel-switch { animation: none; }

/* ===== 画质模式现代化增强（性能模式不生效，保持纯色零动效） ===== */
/* ① 毛玻璃半透明：顶栏 / 侧栏 / 弹窗 / 面板 */
[data-mode="quality"] .header {
  background: rgba(30, 58, 95, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-mode="quality"] .sidebar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="dark"][data-mode="quality"] .header { background: rgba(58, 92, 143, 0.72); }
html[data-theme="dark"][data-mode="quality"] .sidebar { background: rgba(26, 33, 48, 0.72); }
[data-mode="quality"] .ui-mask .ui-card,
[data-mode="quality"] #msg-panel,
[data-mode="quality"] #vf-mask .ui-card,
[data-mode="quality"] .modal-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"][data-mode="quality"] .ui-mask .ui-card,
html[data-theme="dark"][data-mode="quality"] #msg-panel,
html[data-theme="dark"][data-mode="quality"] #vf-mask .ui-card {
  background: rgba(26, 33, 48, 0.85);
}

/* ② 分组折叠箭头（旋转动画） */
.menu-caret {
  display: inline-block; margin-left: 8px; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor; vertical-align: middle;
  transition: transform 0.25s ease;
}
.menu-caret.open { transform: rotate(90deg); }
[data-mode="perf"] .menu-caret { transition: none; }

/* ③ 按钮悬浮微动效（画质模式） */
[data-mode="quality"] button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
[data-mode="quality"] button {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
[data-mode="quality"] button:active { transform: translateY(0); }

/* ④ 菜单项悬浮微位移（画质模式） */
[data-mode="quality"] .menu-label { transition: padding-left 0.2s ease; }
[data-mode="quality"] .menu-item:hover .menu-label { padding-left: 6px; }

/* ⑤ 细滚动条（画质模式） */
[data-mode="quality"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-mode="quality"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }
[data-mode="quality"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"][data-mode="quality"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }

/* V2.92d：视口滚动条槽位恒定（scrollbar-gutter: stable）——页面内容多出现滚动条时不再挤压内容宽度，
 * 顶栏右侧（搜索/铃铛/用户区/退出）位置恒定不左移；桌面客户端=浏览器壳（Electron 包裹页面），
 * 此问题比纯 Web 更显眼——Chromium 120+ 支持；Web/壳双端通用增强 */
/* V2.116：常驻槽位根治（gutter 在部分壳/引擎不生效→overflow-y: scroll 强制恒占位，
 * 滚动条永不"出现/消失"，顶栏右侧与内容宽度零抖动——覆盖 V2.92d 的 gutter 方案） */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* ===== 画质模式动画（性能模式通过 [data-mode="perf"] * 全部关闭） ===== */
/* 左栏登录后滑入 */
@keyframes sidebarIn { from { transform: translateX(-100%); } to { transform: none; } }
.sidebar { animation: sidebarIn 0.35s ease; }

/* 子菜单展开/折叠（max-height 过渡） */
.menu-children { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.menu-children.open { max-height: 500px; }

/* 内容区页面切换（点击菜单 → 右侧内容淡入上移） */
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#content-area.page-enter { animation: pageIn 0.28s ease; }

/* ===== 弹窗过渡动画（画质模式默认开启；性能模式关闭） ===== */
.ui-mask { opacity: 0; transition: opacity 0.18s ease; }
.ui-mask.ui-show { opacity: 1; }
.ui-mask .ui-card { transform: scale(0.96) translateY(10px); transition: transform 0.18s ease; }
.ui-mask.ui-show .ui-card { transform: scale(1) translateY(0); }
[data-mode="perf"] .ui-mask,
[data-mode="perf"] .ui-mask .ui-card { transition: none; }
[data-mode="perf"] body { background: var(--bg-body); }

/* ===== 响应式（V2.53 补全）：hide-sm 类从未定义——approval/notice 表头在窄视口竖排；补定义 + 表头防折行 ===== */
@media (max-width: 900px) { .hide-sm { display: none !important; } }   /* 窄屏隐藏次要列（本意，原先缺失） */
.card table th { white-space: nowrap; }    /* 表头防竖排（序号等短列宽度不足时折行） */
/* ===== V2.56 日期区间选择器（我的消息页检索行；外壳 UI 资产，零外部依赖） ===== */
.drk-input { height: 32px; width: 128px; border: 1px solid var(--border); border-radius: 4px; padding: 0 8px; font-size:var(--fs-t3); color: var(--text-main); background: var(--bg-card); cursor: pointer; box-sizing: border-box; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drk-input.drk-empty { color: var(--text-placeholder); }
.drk-panel { position: absolute; z-index: 320; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 12px 14px; top: 40px; left: 0; opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity 0.16s ease, transform 0.16s ease; pointer-events: none; }
.drk-panel.drk-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
[data-mode="perf"] .drk-panel { transition: none; }
.drk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size:var(--fs-t3); }
.drk-head .drk-nav { cursor: pointer; color: var(--primary); font-size:var(--fs-t1); padding: 0 6px; user-select: none; border-radius: 4px; }
.drk-head .drk-nav:hover { background: var(--primary-light); }
.drk-head select { height: 26px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); color: var(--text-main); font-size:var(--fs-t3); padding: 0 4px; }
.drk-grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.drk-week { height: 24px; line-height: 24px; text-align: center; font-size:var(--fs-t4); color: var(--text-placeholder); }
.drk-day { height: 30px; line-height: 30px; text-align: center; border-radius: 4px; cursor: pointer; font-size:var(--fs-t3); color: var(--text-main); }
.drk-day:hover { background: var(--primary-light); color: var(--primary); }
.drk-day.drk-dim { color: var(--text-placeholder); cursor: default; }
.drk-day.drk-dim:hover { background: transparent; }
.drk-day.drk-sel { background: var(--primary); color: #fff; }
.drk-day.drk-range { background: var(--primary-light); color: var(--primary); }
.drk-foot { display: flex; gap: 14px; margin-top: 10px; font-size:var(--fs-t3); }
.drk-foot a { color: var(--primary); cursor: pointer; }
.drk-foot a:hover { text-decoration: underline; }
.drk-foot .drk-clear { color: var(--text-secondary); }