/* ============================================================
   styles.theme.css — 文石系统 · Ant Design Pro / 飞书风格主题层
   加载顺序在 styles.css 与 styles.override.css 之后（最高优先级）
   只改视觉（配色 / 圆角 / 阴影 / 字体 / 间距），不动数据与布局结构
   ============================================================ */

:root {
  --theme-primary: #1677ff;
  --theme-primary-hover: #4096ff;
  --theme-primary-active: #0958d9;
  --theme-primary-soft: #e8f3ff;
  --theme-bg: #f0f2f5;
  --theme-card-border: #e8ecf1;
  --theme-text-title: #1f2937;
  --theme-text-body: #3d4757;
  --theme-text-muted: #8a94a6;
  --theme-radius: 10px;
  --theme-radius-lg: 12px;
}

/* ---------- 全局底色：去除光斑，统一浅灰（Ant Pro layout bg） ---------- */
body {
  background: var(--theme-bg) !important;
  /* 默认按 85% 缩放显示，适配 1920x1080 等常规分辨率，避免 100% 下元素过大 */
  zoom: 0.7;
}

/* Firefox 不支持 zoom，用 transform 兜底（会有滚动条留白，但基本可用） */
@supports not (zoom: 0.7) {
  body {
    transform: scale(0.7);
    transform-origin: top left;
    width: 142.857%;
    min-height: 142.857%;
  }
}

/* ---------- 侧栏：深色渐变 → 白色浅色侧栏（Ant Pro Light Sider） ---------- */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #eef0f4 !important;
  box-shadow: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar .brand strong,
.brand strong {
  color: var(--theme-text-title) !important;
}

.brand span,
.sidebar-footer span {
  color: var(--theme-text-muted) !important;
}

.brand-mark {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #1677ff, #4096ff) !important;
  box-shadow: 0 4px 10px rgba(22, 119, 255, 0.25) !important;
}

.nav {
  gap: 4px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 980px) {
  .nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex: 0 1 auto !important;
  }
}

/* 修复 zoom:0.7 下边栏高度被压缩：Chrome 用 142.857vh 抵消缩放 */

/* 修复 zoom:0.7 下 app-shell 高度被压缩，导致 sticky sidebar 铺不满 */
@supports (zoom: 1) {
  .app-shell {
    min-height: 142.857vh !important;
  }
}

@supports (zoom: 1) {
  .sidebar {
    height: 142.857vh !important;
    min-height: 100vh !important;
  }
}


.nav-label {
  color: var(--theme-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px 4px !important;
}

.nav-item {
  min-height: 38px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  color: #4b5565 !important;
  gap: 10px !important;
  padding: 0 12px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.nav-item span {
  width: 22px !important;
  color: #9aa3b2 !important;
  font-size: 13px !important;
  text-align: center !important;
}

.nav-item:hover {
  background: #f3f5f7 !important;
  color: #1f2937 !important;
}

.nav-item.active {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.nav-item.active span {
  color: var(--theme-primary) !important;
}

.sidebar-footer {
  border: 1px solid #eef0f4 !important;
  border-radius: 10px !important;
  background: #fafbfc !important;
}

.sidebar-footer strong {
  color: #52c41a !important;
  font-weight: 600 !important;
}



/* ---------- 财报 KPI：环比徽章 + 可点击下钻 ---------- */
.finance-report-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
}

.finance-report-kpi .kpi-delta {
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

.finance-report-kpi .kpi-delta.good {
  color: #16a34a !important;
}

.finance-report-kpi .kpi-delta.warn {
  color: #b91c1c !important;
}

.finance-report-kpi .kpi-delta.muted {
  color: #9aa3b2 !important;
  font-weight: 500 !important;
}

.finance-report-kpi.clickable {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.finance-report-kpi.clickable:hover {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.finance-report-kpi .kpi-hint {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-style: normal;
  color: #b6bdc9;
  font-weight: 500;
}

.finance-report-kpi.clickable:hover .kpi-hint {
  color: var(--theme-primary, #1677ff);
}

.bar-chart-row[data-finance-drill-category] {
  cursor: pointer;
}

/* ---------- 财报下钻弹窗 ---------- */
.finance-drill-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #f6f8fa;
  font-size: 14px;
  color: #3d4757;
}

.finance-drill-summary strong {
  font-size: 16px;
  margin-left: 4px;
}

.finance-drill-summary strong.neg {
  color: #b91c1c;
}

.finance-drill-summary strong.pos {
  color: #16a34a;
}

.finance-drill-sub {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #3d4757;
}

.finance-drill-table-wrap {
  max-height: 380px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e8ecf1;
}

.finance-drill-table-wrap table {
  margin: 0;
}

.finance-drill-empty {
  padding: 24px 0;
  text-align: center;
  color: #8a94a6;
  font-size: 13px;
}

/* 绩效二级菜单：适配浅色侧栏 */
.hr-performance-subnav {
  background: #f3f5f7 !important;
  border-radius: 8px !important;
}

.hr-performance-subnav button {
  color: #4b5565 !important;
}

.hr-performance-subnav button:hover,
.hr-performance-subnav button.active {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important;
}

/* ---------- 顶栏：纯白 + 细分割线 ---------- */
.topbar {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #eef0f4 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  backdrop-filter: none !important;
}

.topbar h1 {
  color: var(--theme-text-title) !important;
  font-weight: 700 !important;
}

/* ---------- 统一卡片风格：白底 / 细边框 / 轻阴影 / 大圆角 ---------- */
.metric,
.panel,
.table-panel,
.toolbar,
.map-card,
.position-card,
.candidate-hero,
.dashboard-top-filters,
.hr-daily-panel,
.hr-ranking-panel,
.roster-workbench-hero,
.roster-overview-grid .metric,
.employee-roster-panel,
.roster-insight-panel {
  background: #ffffff !important;
  border: 1px solid var(--theme-card-border) !important;
  border-radius: var(--theme-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03) !important;
}

.panel-head {
  border-bottom: 1px solid #f0f2f5 !important;
}

.panel-head h2,
.candidate-hero h2 {
  color: var(--theme-text-title) !important;
  font-weight: 600 !important;
}

.panel-head span,
.tiny,
td small,
.metric span {
  color: var(--theme-text-muted) !important;
}

/* ---------- 指标卡 metric：细竖条主色 / 无夸张投影 ---------- */
.metric {
  min-height: 92px !important;
  padding: 16px 18px !important;
}

.metric::before {
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--theme-primary) !important;
}

.metric strong {
  color: var(--theme-text-title) !important;
  font-weight: 700 !important;
}

#dashboardView > .metric-grid .metric {
  min-height: 78px !important;
  border-radius: var(--theme-radius) !important;
}

#dashboardView > .metric-grid .metric::before {
  background: linear-gradient(180deg, #1677ff, #69b1ff) !important;
}

#dashboardView > .metric-grid .metric span {
  color: var(--theme-text-muted) !important;
  font-size: 12px !important;
}

#dashboardView > .metric-grid .metric strong {
  color: var(--theme-text-title) !important;
  font-size: 24px !important;
}

/* ---------- 主按钮：纯色主蓝 / hover 提亮 / 去渐变去重阴影 ---------- */
.primary-btn {
  background: var(--theme-primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.22) !important;
  font-weight: 500 !important;
}

.primary-btn:hover {
  background: var(--theme-primary-hover) !important;
  box-shadow: 0 4px 10px rgba(22, 119, 255, 0.28) !important;
}

.primary-btn:active {
  background: var(--theme-primary-active) !important;
}

/* 幽灵 / 描边按钮 */
.ghost-btn,
.icon-btn,
.table-action-btn {
  border-radius: 8px !important;
}

.ghost-btn {
  background: #ffffff !important;
  border-color: #d5dae2 !important;
  color: #3d4757 !important;
}

.ghost-btn:hover,
.icon-btn:hover {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
  background: #f7faff !important;
}

.danger-btn {
  border-color: #ffa39e !important;
  color: #e5484d !important;
}

.danger-btn:hover {
  background: #fff1f0 !important;
  border-color: #ff7875 !important;
}

/* 表格内小操作按钮：柔化 */
.table-action-btn {
  border: 1px solid #e3e7ec !important;
  background: #fafbfc !important;
  color: #3d4757 !important;
}

.table-action-btn:hover {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
  background: #f7faff !important;
}

/* ---------- 表格：表头浅底细线 / 行高加大 / hover 柔灰 ---------- */
.table-panel table thead th,
.table-scroll table thead th,
.mini-table-wrap table thead th,
.detail-table-wrap table thead th,
#dashboardView .panel > .mini-table-wrap table thead th,
#dashboardView .hr-daily-table thead th,
.candidate-list-panel .candidate-table thead th,
.candidate-table-scroll .candidate-table thead th {
  background: #f7f9fb !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -1px 0 #eef1f5 !important;
  letter-spacing: 0 !important;
}

th,
td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #f0f2f5 !important;
  font-size: 13px !important;
}

td {
  color: #3d4757 !important;
}

tr:hover td {
  background: #f8fafc !important;
}

/* ---------- 表单控件：Ant 风格边框 / focus 主蓝光环 ---------- */
select,
input,
textarea,
.search-box {
  border-radius: 8px !important;
  border-color: #d5dae2 !important;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12) !important;
}

.search-box {
  background: #ffffff !important;
  border: 1px solid #d5dae2 !important;
}

.search-box:focus-within {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12) !important;
}

/* ---------- 状态标签：tag 式浅底深字 / 统一小圆角 ---------- */
.pill,
.offer-stage-badge,
.keyword-pill,
.requisition-progress-badge {
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.pill {
  background: #f0f2f5 !important;
  color: #4b5565 !important;
  border: 1px solid #e5e9ef !important;
}

.pill.hot {
  background: #fff1f0 !important;
  border-color: #ffd4d2 !important;
  color: #e5484d !important;
}

.pill.good {
  background: #f0fdf4 !important;
  border-color: #c9f0d3 !important;
  color: #16a34a !important;
}

.pill.warn {
  background: #fffbea !important;
  border-color: #ffe8a3 !important;
  color: #d97706 !important;
}

/* ---------- 漏斗 / 进度条：主蓝渐变 ---------- */
.funnel .bar span {
  background: linear-gradient(90deg, #1677ff, #69b1ff) !important;
}

.funnel-row:hover,
.bar-chart-row:hover {
  border-color: #d5dae2 !important;
  background: #f7f9fb !important;
}

/* ---------- 头部 Hero（dashboard 深色渐变区收敛为蓝调） ---------- */
.hr-workbench-hero {
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  border-radius: var(--theme-radius-lg) !important;
  background:
    linear-gradient(135deg, #1e3a8a 0%, #2563eb 58%, #3b82f6 100%) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.16) !important;
}

#dashboardView .hr-workbench-hero {
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  border-radius: var(--theme-radius-lg) !important;
  background:
    linear-gradient(135deg, #1e3a8a 0%, #2563eb 58%, #3b82f6 100%) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.16) !important;
}

#dashboardView .hr-workbench-hero::after {
  opacity: 0.18 !important;
}

#dashboardView .hr-workbench-hero-copy h2 {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.hr-workbench-hero-actions .ghost-btn {
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.hr-workbench-hero-actions .ghost-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
}

/* ---------- 人才花名册 hero：浅色玻璃适配浅色侧栏 ---------- */
.roster-workbench-hero {
  border: 1px solid #e3ecf7 !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7fd 100%) !important;
}

.roster-workbench-hero-card {
  border: 1px solid #e3ecf7 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--theme-text-body) !important;
}

.roster-workbench-hero-card strong {
  color: var(--theme-text-title) !important;
}

.roster-workbench-hero-card small {
  color: var(--theme-text-muted) !important;
}

/* ---------- 弹窗 / 抽屉：更现代圆角与轻量边框 ---------- */
.modal-panel,
.drawer-panel {
  border-radius: 14px !important;
  border: 1px solid #eef0f4 !important;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.12) !important;
}

/* ---------- 批量发工资条弹窗 & 个人工资条预览弹窗：整体放大 20% ---------- */
/* 外层：批量发工资条（容器内包含 .payroll-slip-email-dialog） */
.modal-panel:has(.payroll-slip-email-dialog) {
  width: min(1032px, calc(100% - 28px)) !important;
  max-height: min(936px, calc(100vh - 28px)) !important;
}

/* 内层：单个人工资条预览（抵消 body zoom:0.7，视觉上横向铺满） */
.payroll-slip-preview-panel {
  width: calc(70vw - 56px) !important;
  max-height: calc(70vh - 56px) !important;
  transform: scale(1.428571) !important;
  transform-origin: center !important;
}

.payroll-slip-preview-body img {
  max-height: calc(70vh - 220px) !important;
  object-fit: contain !important;
}

.payroll-slip-preview-foot {
  justify-content: space-between !important;
}

.payroll-slip-preview-nav,
.payroll-slip-preview-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.payroll-slip-preview-nav-info {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-width: 52px !important;
  text-align: center !important;
}

/* ---------- 批量发工资条：信息表二次确认 ---------- */
.payroll-slip-email-verify {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 4px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

.payroll-slip-email-verify-title {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.payroll-slip-email-verify-status {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  min-width: 90px;
}

.payroll-slip-email-verify-status.good {
  color: #16a34a;
}

.payroll-slip-email-verify-status.hot {
  color: #e5484d;
}

.payroll-slip-email-verify-help {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 12px 2px;
}

.payroll-slip-email-input-mismatch {
  border-color: #e5484d !important;
  background: #fff1f0 !important;
}

.payroll-slip-email-input-missing {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}

.payroll-slip-email-missing-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

.payroll-slip-email-missing-banner.all-good {
  background: #f0fdf4;
  border-color: #86efac;
}

.payroll-slip-email-missing-banner strong {
  color: #c2410c;
  font-size: 14px;
}

.payroll-slip-email-missing-banner.all-good strong {
  color: #15803d;
}

.payroll-slip-email-missing-banner span {
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}

.payroll-slip-email-missing-banner.all-good span {
  color: #166534;
}

.drawer-head {
  border-bottom: 1px solid #f0f2f5 !important;
}

.drawer-head h2 {
  color: var(--theme-text-title) !important;
  font-weight: 600 !important;
}

/* ---------- 全局细节：标题字重、选中文字 ---------- */
::selection {
  background: rgba(22, 119, 255, 0.18) !important;
}

h1,
h2,
h3 {
  color: var(--theme-text-title) !important;
}

/* ---------- 登录页微调：品牌蓝与主色对齐 ---------- */
.login-card .primary-btn {
  background: linear-gradient(135deg, #1677ff, #4096ff) !important;
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.24) !important;
}

/* ---------- 聚焦卡片 hover（轻浮起） ---------- */
.metric:hover,
.panel:hover {
  transform: none !important;
}

.detail-click:hover {
  border-color: #d5dae2 !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06) !important;
}

/* ---------- 工资条邮件通用附件上传 ---------- */
.payroll-attachment-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

.payroll-attachment-field label {
  font-size: 13px;
  color: #334155;
  font-weight: 500;
}

.payroll-attachment-display {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 13px;
  color: #475569;
}

.payroll-attachment-placeholder {
  color: #94a3b8;
}

.payroll-attachment-name {
  color: #0f172a;
  font-weight: 500;
  word-break: break-all;
}

.payroll-attachment-size {
  color: #94a3b8;
  font-size: 12px;
  white-space: nowrap;
}

.payroll-attachment-actions {
  display: flex;
  gap: 8px;
}

.payroll-attachment-actions .ghost-btn.danger {
  color: #dc2626;
  border-color: #fecaca;
}

.payroll-attachment-actions .ghost-btn.danger:hover {
  background: #fef2f2;
}

/* ---------- 员工花名册表格优化 ---------- */
.employee-roster-wrap {
  overflow-x: auto !important;
  border-radius: 0 0 var(--theme-radius) var(--theme-radius) !important;
}

.employee-roster-table {
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.employee-roster-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}

.employee-roster-table th:first-child,
.employee-roster-table td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 11 !important;
  background: #ffffff !important;
}

.employee-roster-table th:last-child,
.employee-roster-table td:last-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 11 !important;
  background: #ffffff !important;
  box-shadow: inset 1px 0 0 #f0f2f5 !important;
}

.employee-roster-table thead th:first-child,
.employee-roster-table thead th:last-child {
  z-index: 12 !important;
}

.employee-roster-table tbody tr:nth-child(even) td {
  background: #fafbfc !important;
}

.employee-roster-table tbody tr:hover td {
  background: #f2f7ff !important;
}

.employee-roster-table tbody tr:hover td:first-child,
.employee-roster-table tbody tr:hover td:last-child {
  background: #f2f7ff !important;
}

.roster-column-toggle {
  font-size: 12px !important;
  padding: 5px 10px !important;
}

.roster-view-switch {
  display: inline-flex !important;
  margin-bottom: 8px !important;
}

.roster-long-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: 220px !important;
  line-height: 1.5 !important;
  color: var(--theme-text-body) !important;
}

.roster-cell-name {
  min-width: 100px !important;
  max-width: 140px !important;
  white-space: nowrap !important;
}

.roster-action-cell {
  white-space: nowrap !important;
}

/* 会话超时弹窗 */
.session-expired-panel {
  width: min(460px, calc(100% - 28px));
}

.session-expired-countdown {
  margin: 2px 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--amber-soft, #fff3dc);
  color: var(--amber, #a86400);
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- 电商二级菜单：跟随浅色侧栏，配色与其他模块完全一致（v2026091814） ---------- */
.ec-subnav {
  margin: 2px 0 6px 0 !important;
  padding: 0 0 0 22px !important;
  background: transparent !important;
  border-radius: 0 !important;
  gap: 2px !important;
}

.ec-sub-group {
  color: var(--theme-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 8px 12px 4px !important;
}

.ec-sub-item {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #4b5565 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding: 0 12px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.ec-sub-item:hover {
  background: #f3f5f7 !important;
  color: #1f2937 !important;
}

.ec-sub-item.active,
.ec-sub-item.is-active {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important;
  font-weight: 600 !important;
}

/* 工资列表合计行 */
.payroll-total-row {
  background: #fff7e6 !important;
  font-weight: 600;
}

.payroll-total-row td {
  border-top: 2px solid #ffd591 !important;
  border-bottom: 2px solid #ffd591 !important;
}

.payroll-total-row td strong {
  color: #873800;
}

/* 工资月份切换加载提示 - 全屏居中进度框 */
.payroll-month-loading {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  place-content: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 28px !important;
  border: none !important;
  border-radius: 0 !important;
  background: rgba(15, 23, 42, 0.32) !important;
  color: #334155 !important;
  font-size: 14px !important;
  text-align: center !important;
  backdrop-filter: blur(2px) !important;
}

.payroll-month-loading[hidden] {
  display: none !important;
}

.payroll-month-loading .payroll-month-loading-bar {
  width: 220px !important;
  height: 8px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  background: #dbeafe !important;
}

.payroll-month-loading .payroll-month-loading-bar span {
  width: 45% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2563eb, #14b8a6) !important;
}

.payroll-month-loading > span {
  display: inline-block;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  color: #334155;
  font-size: 13px;
}

/* ===== 看板 KPI 分层与趋势副行 ===== */
#dashboardView .metric-grid.metric-grid-core {
  grid-template-columns: repeat(6, minmax(110px, 1fr)) !important;
}

#dashboardView .metric-grid.metric-grid-aux {
  grid-template-columns: repeat(5, minmax(110px, 1fr)) !important;
  margin-bottom: 10px;
}

#dashboardView .metric-grid.metric-grid-core .metric {
  min-height: 68px !important;
  border-left: 3px solid #d46b08;
  background: #fffdf8;
}

#dashboardView .metric .metric-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #8c8c8c;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

#dashboardView .metric.metric-core .metric-sub {
  color: #b5741f;
}

/* ===== HR每日提交合计行 ===== */
#dashboardView .hr-daily-table tbody tr.hr-daily-total td {
  background: #fff7e6 !important;
  color: #873800 !important;
  font-weight: 600;
  border-top: 2px solid #ffd591;
  position: sticky;
  bottom: 0;
}

@media (max-width: 980px) {
  #dashboardView .metric-grid.metric-grid-core,
  #dashboardView .metric-grid.metric-grid-aux {
    grid-template-columns: repeat(2, minmax(96px, 1fr)) !important;
  }
}

/* ===== 看板二轮：hero 实时战报 + KPI 近7天迷你趋势 + 漏斗转化率 ===== */
#dashboardView .metric .metric-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  margin: 3px 0 2px;
}

#dashboardView .metric .metric-spark i {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 10px;
  border-radius: 1px;
  background: #f0d9b5;
  transition: height 0.3s ease;
}

#dashboardView .metric .metric-spark i:last-child {
  background: #d46b08;
}

.funnel-row {
  grid-template-columns: 92px minmax(0, 1fr) 44px 44px !important;
}

.funnel-row .funnel-rate {
  font-style: normal;
  font-size: 11px;
  color: #8c8c8c;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.funnel-row strong {
  text-align: right;
}

/* ===== 看板：移除蓝色 hero 后的轻量战报条 ===== */
#dashboardView .dashboard-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid #f0e6d2;
  border-radius: 10px;
  background: #fffdf8;
  font-size: 12px;
  color: #8c6d3f;
  font-variant-numeric: tabular-nums;
}

#dashboardView .dashboard-stat-strip span {
  white-space: nowrap;
}