/* ============================================
   BSK Workbench - Company Workbench Styles
   PT. Berkahraya Sedulur Konstruksi
   ============================================ */

/* ========== 基础重置 ========== */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;}
body{background:#f0f2f5;color:#2d3436;font-size:14px;}

/* ========== 变量（P2 视觉改版：伊斯兰绿 + 金色 · 印尼穆斯林基调） ========== */
:root{
  --bsk-yellow:#f5b824;      /* 主色：企业金黄 */
  --bsk-yellow-dark:#d99a0d; /* hover 深一档 */
  --bsk-black:#0b5e3a;       /* 深祖母绿（正文标题） */
  --bsk-blue:#0b5e3a;        /* 伊斯兰绿 */
  --bsk-blue-light:#d9f0e3;  /* 浅绿背景 */
  --bsk-gold:#f5b824;        /* 金色点缀 */
  --primary:#0b5e3a;         /* 伊斯兰绿主色 */
  --accent:#f5b824;          /* 金黄强调 */
  --accent-dark:#d99a0d;
  --bg:#f2f8f3;              /* 米绿背景 */
  --card:#ffffff;
  --border:#dde9e0;          /* 中性灰边框 */
  --text:#1f2937;
  --text-light:#5b6b61;
  --text-white:#ffffff;
  --success:#10b981;         /* 收入绿 */
  --danger:#ef4444;          /* 支出红 */
  --warning:#f59e0b;        /* 警示杏 */
  --info:#0e7490;            /* 信息蓝 */
  --sidebar-w:248px;

  /* ===== 设计 token ===== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-title:16px; --fs-page:18px; --fs-stat:28px;
  --radius-sm:8px; --radius-md:10px; --radius-lg:16px; --radius-xl:20px; --radius-full:24px;
  --shadow-card:0 4px 16px rgba(11,94,58,0.06),0 1px 3px rgba(11,94,58,0.05);
  --shadow-card-hover:0 10px 28px rgba(11,94,58,0.12),0 2px 6px rgba(11,94,58,0.06);
  --shadow-modal:0 24px 70px rgba(11,94,58,0.28);
  --surface-soft:#eef6f0;    /* 表头/次级表面 */
  --surface-hover:#f6fbf7;    /* 行 hover */
  --border-soft:#dde9e0;     /* 卡片描边 */
}

body{background:linear-gradient(180deg,#f2f8f3 0%,#eaf4ec 40%,#dde9e0 100%);color:#1f2937;font-size:14px;}

/* ========== 登录页（全屏自适应分栏） ========== */
.login-page{
  position:relative;
  display:flex;
  min-height:100vh;
  width:100%;
  background:#fff;
}
/* 左侧品牌展示区（深蓝渐变铺满半屏） */
.login-brand{
  flex:1 1 52%;
  max-width:52%;
  background:linear-gradient(150deg,#0b5e3a 0%,#127a4c 55%,#d99a0d 135%);
  display:flex;align-items:center;justify-content:center;
  padding:56px;
  position:relative;overflow:hidden;
}
.login-brand::before,
.login-brand::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.login-brand::before{width:440px;height:440px;background:rgba(255,255,255,0.05);top:-130px;right:-130px;}
.login-brand::after{width:320px;height:320px;background:rgba(245,184,36,0.14);bottom:-100px;left:-100px;}
.login-brand-inner{width:100%;max-width:470px;position:relative;z-index:1;color:#fff;}
.brand-logo{width:120px;height:120px;border-radius:20px;object-fit:cover;margin-bottom:30px;border:3px solid rgba(255,255,255,0.28);box-shadow:0 18px 44px rgba(0,0,0,0.32);}
.brand-title{font-size:30px;font-weight:800;line-height:1.3;margin-bottom:10px;color:#fff;letter-spacing:0.4px;}
.brand-sub{font-size:15px;color:rgba(255,255,255,0.85);margin-bottom:12px;}
.brand-desc{font-size:14px;color:rgba(255,255,255,0.72);margin-bottom:36px;line-height:1.7;}
.brand-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.brand-features li{display:flex;align-items:flex-start;gap:14px;font-size:14px;color:rgba(255,255,255,0.94);line-height:1.55;}
.brand-features li .bf-dot{width:9px;height:9px;border-radius:50%;background:var(--bsk-gold);flex:none;margin-top:6px;box-shadow:0 0 0 5px rgba(245,184,36,0.22);}
.brand-features li .bf-txt strong{display:block;font-size:15px;color:#fff;font-weight:700;margin-bottom:2px;}

/* 右侧表单区：印尼国旗色 —— 斜分两半，一半红 / 一半白 */
.login-form-wrap{
  flex:1 1 48%;
  max-width:48%;
  display:flex;align-items:center;justify-content:center;
  padding:56px 40px;
  background:linear-gradient(-45deg, #ef3340 0 50%, #ffffff 50% 100%);
}
.login-card{
  background:var(--card);border-radius:22px;padding:66px;
  width:100%;max-width:580px;
  box-shadow:0 28px 80px rgba(11,94,58,0.16);
  text-align:center;
  border:1px solid #e2e8f0;
}
.login-card .logo{width:100px;height:100px;border-radius:18px;margin:0 auto 30px;display:block;object-fit:cover;box-shadow:0 12px 30px rgba(11,94,58,0.18);}

/* 登录页 LOGO 版本角标（明显展示当前版本号） */
.logo-wrap{position:relative;width:100px;margin:0 auto 30px;}
.logo-wrap .logo{margin:0;}
.brand-logo-wrap{position:relative;display:inline-block;margin-bottom:30px;}
.brand-logo-wrap .brand-logo{margin-bottom:0;}
.logo-ver-badge{
  position:absolute;top:-10px;right:-16px;
  background:linear-gradient(135deg,#0b5e3a 0%,#0d7a4b 100%);
  color:#f5b824;font-weight:800;font-size:13px;line-height:1;
  padding:5px 11px;border-radius:14px;border:2px solid #f5b824;
  box-shadow:0 4px 14px rgba(11,94,58,0.42);
  white-space:nowrap;letter-spacing:0.5px;z-index:5;
}
.logo-ver-badge--brand{top:-8px;right:-14px;}
.login-card h1{font-size:27px;color:var(--bsk-black);margin-bottom:10px;}
.login-card .subtitle{color:var(--text-light);font-size:16px;margin-bottom:44px;}
.login-card .input-group{margin-bottom:20px;text-align:left;}
.login-card .input-group label{display:block;font-size:13px;color:var(--text-light);margin-bottom:7px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.login-card .input-group input{
  width:100%;padding:17px 20px;border:2px solid var(--border);border-radius:12px;
  font-size:17px;transition:border-color 0.2s,box-shadow 0.2s;background:#fff;
}
.login-card .input-group input:focus{outline:none;border-color:var(--bsk-yellow);box-shadow:0 0 0 3px rgba(245,184,36,0.18);}
.login-card .btn-login{
  width:100%;padding:18px;background:linear-gradient(135deg,#0b5e3a,#127a4c);color:#fff;
  border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;
  transition:all 0.2s;margin-top:8px;box-shadow:0 8px 20px rgba(11,94,58,0.28);
}
.login-card .btn-login:hover{background:linear-gradient(135deg,#083b26,#0b5e3a);transform:translateY(-1px);}
.login-card .error{color:var(--danger);font-size:13px;margin-top:12px;min-height:18px;}
.login-page > .lang-toggle{position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.92);color:#0b5e3a;border:1px solid rgba(245,184,36,0.55);padding:8px 18px;border-radius:22px;font-size:13px;cursor:pointer;font-weight:600;box-shadow:0 4px 12px rgba(11,94,58,0.12);z-index:5;}
.login-page > .lang-toggle:hover{background:#fff;}
.login-card .register-link{margin-top:16px;font-size:13px;color:var(--text-light);}
.login-card .register-link a{color:var(--primary);font-weight:600;text-decoration:none;}
.login-card .register-link a:hover{text-decoration:underline;color:var(--bsk-yellow-dark);}
.login-card .input-group select{
  width:100%;padding:13px 16px;border:2px solid var(--border);border-radius:10px;
  font-size:15px;background:#fff;transition:border-color 0.2s,box-shadow 0.2s;
}
.login-card .input-group select:focus{outline:none;border-color:var(--bsk-yellow);box-shadow:0 0 0 3px rgba(245,184,36,0.18);}

/* 登录页响应式：窄屏自动单列堆叠 */
@media (max-width:960px){
  .login-page{flex-direction:column;}
  .login-brand{max-width:100%;flex:none;padding:40px 28px 44px;}
  .login-brand-inner{max-width:100%;text-align:center;}
  .brand-logo{width:84px;height:84px;margin-bottom:18px;}
  .brand-title{font-size:24px;}
  .brand-desc{margin-bottom:0;}
  .brand-features{display:none;}
  .login-form-wrap{max-width:100%;flex:none;padding:36px 20px 52px;}
  .login-card{max-width:520px;padding:46px 34px;}
  .login-card .logo{width:84px;height:84px;margin-bottom:22px;}
  .logo-wrap{width:84px;margin-bottom:22px;}
  .login-card h1{font-size:23px;}
  .login-card .subtitle{font-size:15px;margin-bottom:34px;}
  .login-card .input-group input{padding:15px 17px;font-size:16px;}
  .login-card .btn-login{padding:16px;font-size:17px;}
  .login-page > .lang-toggle{top:14px;right:14px;}
}
@media (max-width:420px){
  .login-brand{padding:28px 20px 32px;}
  .brand-title{font-size:20px;}
  .brand-sub{font-size:13px;}
  .login-card{padding:28px 20px;border-radius:16px;}
  .login-card .logo{width:64px;height:64px;margin-bottom:16px;}
  .logo-wrap{width:64px;margin-bottom:16px;}
  .login-card h1{font-size:19px;}
  .login-card .subtitle{font-size:13px;margin-bottom:24px;}
  .login-card .input-group input{padding:13px 14px;font-size:15px;}
  .login-card .btn-login{padding:14px;font-size:15px;}
}

/* ========== 工作台布局 ========== */
.workbench{display:flex;min-height:100vh;width:100%;max-width:100%;overflow-x:hidden;}

/* 侧边栏（P2：深海军蓝渐变 + 现代导航） */
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,#0b5e3a 0%,#0a4a2f 55%,#127a4c 100%);
  color:var(--text-white);
  position:fixed;top:0;left:0;bottom:0;z-index:100;
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:2px 0 24px rgba(11,94,58,0.16);
}
.sidebar-header{
  padding:22px 18px;border-bottom:1px solid rgba(255,255,255,0.12);
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,0.04);
}
.sidebar-header img{width:42px;height:42px;border-radius:10px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,0.3);}
.sidebar-header .company-name{font-size:15px;font-weight:800;line-height:1.3;letter-spacing:0.3px;}
.sidebar-header .company-sub{font-size:11px;color:rgba(255,255,255,0.6);margin-top:2px;letter-spacing:1px;}
.sidebar-nav{flex:1;padding:14px 10px;}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:10px;cursor:pointer;
  color:rgba(255,255,255,0.78);font-size:13px;
  transition:all 0.2s;margin-bottom:3px;
  border:1px solid transparent;
  position:relative;
}
.nav-item:hover{
  background:rgba(255,255,255,0.08);color:#fff;
  transform:translateX(3px);
}
.nav-item:hover .nav-icon{color:#f5b824;}
.nav-item.active{
  background:linear-gradient(135deg,#0b5e3a,#127a4c);color:#fff;font-weight:600;
  box-shadow:0 6px 16px rgba(11,94,58,0.35);
  border-color:rgba(255,255,255,0.14);
}
/* 当前项左侧金色指示条 */
.nav-item.active::before{
  content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:5px;height:22px;border-radius:0 5px 5px 0;background:var(--bsk-gold);
  box-shadow:0 0 10px rgba(245,184,36,0.7);
}
.nav-item.active .nav-icon{transform:scale(1.15);color:#fff;}
.nav-item .nav-icon{width:20px;text-align:center;font-size:15px;transition:transform .18s ease,color .18s ease;}
/* v46: 新通知红点（呼吸动画） */
.nav-dot{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:#e02020;
  box-shadow:0 0 0 0 rgba(224,32,32,0.55);
  animation:navDotPulse 1.6s ease-out infinite;
}
@keyframes navDotPulse{
  0%{box-shadow:0 0 0 0 rgba(224,32,32,0.55);}
  70%{box-shadow:0 0 0 8px rgba(224,32,32,0);}
  100%{box-shadow:0 0 0 0 rgba(224,32,32,0);}
}
.nav-section-title{
  font-size:10px;text-transform:uppercase;letter-spacing:1.2px;
  color:rgba(245,184,36,0.72);padding:16px 14px 6px;font-weight:700;
}
/* 分组标题顶部细分隔线 */
.nav-section-title:not(:first-child){
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:12px;
  padding-top:14px;
}
.sidebar-footer{
  padding:14px 18px;border-top:1px solid rgba(255,255,255,0.12);
  font-size:11px;color:rgba(255,255,255,0.55);
  background:rgba(0,0,0,0.12);
}

/* 主内容区 */
.main-area{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0;}

/* 顶栏 */
.topbar{
  background:rgba(255,255,255,0.94);padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 1px 4px rgba(11,94,58,0.08);
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid #e7edf8;
  backdrop-filter:blur(8px);
}
.topbar-left{display:flex;align-items:center;gap:16px;min-width:0;}
.topbar-left h2{font-size:18px;color:var(--bsk-black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{display:flex;align-items:center;gap:16px;flex-shrink:0;flex-wrap:nowrap;}
.topbar .lang-btn{
  background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border:1px solid #cbd5e1;padding:6px 14px;
  border-radius:20px;font-size:12px;cursor:pointer;color:#0b5e3a;font-weight:600;
  position:relative;z-index:70;flex-shrink:0;
}
.topbar .lang-btn:hover{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);}
/* 节能模式按钮：开启时金色高亮提示 */
.topbar .eco-btn.active{
  background:linear-gradient(135deg,#f5b824,#d99a0d);
  color:#fff;border-color:#b67d08;
  box-shadow:0 0 0 3px rgba(245,184,36,0.3);
}
/* 分页导航（大表分页用，降低 DOM 渲染量防卡顿） */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0 6px;flex-wrap:wrap;}
.pagination .pagination-info{font-size:12px;color:var(--text-light);padding:0 6px;white-space:nowrap;}
.pagination button:disabled{opacity:0.4;cursor:not-allowed;}
.topbar .user-info{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.topbar .user-avatar{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0b5e3a,#f5b824);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;
  box-shadow:0 3px 8px rgba(11,94,58,0.25);
}
.topbar .user-name{font-size:13px;font-weight:600;color:var(--bsk-black);}
.topbar .user-role{font-size:11px;color:var(--text-light);}
.topbar .btn-logout{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;padding:4px 8px;flex-shrink:0;}

/* 滚动欢迎词横幅（LED 跑马灯）：
   不参与层叠（z-index:0、pointer-events:none），确保绝不遮挡 topbar 语言切换按钮 */
.welcome-banner{
  overflow:hidden;
  height:32px;
  background:linear-gradient(90deg,#0b5e3a 0%,#127a4c 50%,#f5b824 100%);
  color:#fff;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.2);
  position:relative;
  z-index:0;
  pointer-events:none;
}
.welcome-banner .marquee{width:100%;overflow:hidden;}
.welcome-banner .m-track{
  display:inline-block;
  white-space:nowrap;
  padding:0 20px;
  /* 默认静止：持续 GPU 合成动画（infinite + will-change）会在 AMD 核显上触发显卡驱动挂起
     （蓝屏 0x20001 VIDEO_DXGKRNL）导致整机冻结，只能强制重启。故默认关闭动画，仅 .anim-on 才滚动。 */
  animation:none;
}
.welcome-banner .m-track.anim-on{
  animation:bsk-marquee 36s linear infinite;
}
.welcome-banner .m-track span{
  padding:0 30px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
  text-shadow:0 1px 2px rgba(0,0,0,0.25);
}
@keyframes bsk-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
/* v73: 考勤核对站点"新增"标签呼吸动画 */
@keyframes rv-new-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,77,79,.45);}
  50%{box-shadow:0 0 0 4px rgba(255,77,79,0);}
}
@media (prefers-reduced-motion: reduce){
  .welcome-banner .m-track{animation:none;}
  [style*="rv-new-pulse"]{animation:none !important;}
}
@media(max-width:768px){
  .welcome-banner{height:28px;}
  .welcome-banner .m-track span{font-size:11px;padding:0 20px;}
  .topbar{padding:10px 12px;gap:8px;}
  .topbar-right{gap:8px;}
  .topbar .user-info .user-name{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar .user-role{display:none;}
}

.content{padding:var(--sp-6);flex:1;min-width:0;width:100%;overflow-x:auto;}

/* ========== 通用组件 ========== */
.card{background:var(--card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-card);margin-bottom:var(--sp-5);border:1px solid var(--border-soft);transition:box-shadow .2s ease;}
.card:hover{box-shadow:var(--shadow-card-hover);}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);}
.card-header h3{font-size:var(--fs-title);color:var(--bsk-black);}

/* 统计卡片 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-6);}
.stat-card{
  background:var(--card);border-radius:var(--radius-lg);padding:var(--sp-5);
  box-shadow:var(--shadow-card);
  border-left:4px solid var(--bsk-yellow);
  border:1px solid var(--border-soft);
  transition:transform .18s ease,box-shadow .18s ease;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);}
.stat-card .stat-label{font-size:var(--fs-sm);color:var(--text-light);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:var(--sp-2);}
.stat-card .stat-value{font-size:var(--fs-stat);font-weight:700;color:var(--bsk-black);font-variant-numeric:tabular-nums;}
.stat-card .stat-sub{font-size:var(--fs-sm);color:var(--text-light);margin-top:var(--sp-1);}
.stat-card.green{border-left-color:var(--success);}
.stat-card.red{border-left-color:var(--danger);}
.stat-card.blue{border-left-color:var(--info);}
.stat-card.purple{border-left-color:#8b5cf6;}
/* 加班工时卡（考勤统计 v2） */
.stat-card.orange{border-left-color:#f59e0b;}
.stat-card .stat-sub{font-size:11px;color:var(--text-light);margin-top:2px;}
/* 仪表板 KPI 状态卡（P2：更新为蓝系状态色） */
.kpi-warn{background:#fff7e0;border-left-color:#f59e0b;}
.kpi-success{background:#e8f7ee;border-left-color:#16a34a;}
.kpi-info{background:#d9f0e3;border-left-color:var(--info);}
.kpi-danger{background:#fdeaea;border-left-color:#dc2626;}

/* 表格 */
table{width:100%;border-collapse:collapse;}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:var(--fs-md);font-variant-numeric:tabular-nums;}
th{background:var(--surface-soft);font-weight:600;color:var(--text-light);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:0.5px;}
tr:hover{background:var(--surface-hover);}

/* 按钮 */
.btn{padding:var(--sp-2) var(--sp-4);border:none;border-radius:var(--radius-sm);font-size:var(--fs-md);cursor:pointer;transition:all 0.2s;font-weight:600;}
.btn-primary{background:linear-gradient(135deg,#0b5e3a,#127a4c);color:#fff;box-shadow:0 4px 12px rgba(11,94,58,0.25);}
.btn-primary:hover{background:linear-gradient(135deg,#083b26,#0b5e3a);transform:translateY(-1px);}
.btn-secondary{background:var(--surface-soft);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--border);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{opacity:0.9;}
.btn-success{background:var(--success);color:#fff;}
.btn-info{background:var(--info);color:#fff;}
.btn-info:hover{opacity:0.9;}
.btn-sm{padding:var(--sp-1) 10px;font-size:var(--fs-sm);}

/* 表单 */
.form-group{margin-bottom:var(--sp-4);}
.form-group label{display:block;font-size:var(--fs-sm);color:var(--text-light);margin-bottom:6px;font-weight:600;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:10px var(--sp-3);border:2px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-base);transition:border-color 0.2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--bsk-yellow);box-shadow:0 0 0 3px rgba(245,184,36,0.18);}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4);}

/* 徽章 */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-lg);font-size:var(--fs-xs);font-weight:600;}
.badge-success{background:#d9f2e6;color:#1d6b4f;}
.badge-danger{background:#fce4e9;color:#a12b4f;}
.badge-warning{background:#fdf0dc;color:#94642a;}
.badge-info{background:#e5e2f9;color:#4c46a0;}
.badge-secondary{background:#f0e9f0;color:#5d5560;}
.badge-primary{background:#f1f5f9;color:#0b5e3a;}
.badge-dark{background:#334155;color:#fff;}

/* 模态框 */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(91,70,89,0.45);z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5);
}
.modal{background:var(--card);border-radius:var(--radius-lg);padding:var(--sp-6);width:90%;max-width:600px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-modal);border:1px solid var(--border-soft);}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5);flex-shrink:0;}
.modal-header h3{font-size:var(--fs-page);color:var(--bsk-black);}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-light);}
.modal-body{flex:1 1 auto;min-height:0;overflow:auto;}
.modal-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:20px;flex-shrink:0;padding-top:14px;border-top:1px solid var(--border);}

/* 接近全屏大弹窗（用于工资批次明细等含大表格的页面） */
.modal.modal--xl{width:96vw;max-width:1800px;max-height:92vh;}
.modal.modal--xl .modal-header{margin-bottom:14px;}
/* 小屏幕（≤768px）缩小内边距与最大化，避免溢出 */
@media (max-width:768px){
  .modal-overlay{padding:8px;align-items:stretch;}
  .modal{width:100%;max-height:96vh;padding:16px;}
  .modal.modal--xl{width:100%;max-width:100%;max-height:96vh;}
  .modal.modal--xl .modal-header h3{font-size:15px;}
}

/* 空状态 */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-light);}
.empty-state .icon{font-size:48px;margin-bottom:12px;opacity:0.3;}

/* 标签页 */
.tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--border);}
.tab{padding:10px 20px;cursor:pointer;font-size:13px;color:var(--text-light);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.2s;font-weight:600;}
.tab.active{color:var(--bsk-black);border-bottom-color:var(--bsk-yellow);}
.tab:hover{color:var(--text);}

/* 筛选栏 */
.filter-bar{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap;}
.filter-bar select,.filter-bar input{padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff;}

/* 进度条 */
.progress-bar{width:100%;height:8px;background:#f7e6ef;border-radius:4px;overflow:hidden;}
.progress-bar .fill{height:100%;background:linear-gradient(90deg,#0b5e3a,#f5b824);border-radius:4px;transition:width 0.3s;}

/* 通知 */
.toast{position:fixed;top:20px;right:20px;background:#0b5e3a;color:#fff;padding:14px 20px;border-radius:8px;z-index:2000;box-shadow:0 4px 14px rgba(11,94,58,0.35);font-size:14px;}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
.toast.warning{background:var(--warning);color:#5a4018;}
.toast.info{background:var(--info);color:#fff;}

/* 汇总数字 */
.summary-row{display:flex;gap:20px;padding:12px 0;border-top:2px solid var(--border);margin-top:8px;}
.summary-row .item{font-size:13px;}
.summary-row .item .label{color:var(--text-light);}
.summary-row .item .value{font-weight:700;font-size:16px;color:var(--bsk-black);}

/* 汉堡按钮（仅移动端显示）与抽屉遮罩（P2：移动端侧边栏抽屉导航） */
.nav-toggle{
  display:none;background:none;border:none;color:var(--bsk-black);
  font-size:18px;cursor:pointer;padding:4px 10px;margin-right:4px;
}
.nav-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);
  z-index:99;opacity:0;pointer-events:none;transition:opacity .25s ease;
}

/* 响应式（移动端：侧边栏改为抽屉导航） */
@media(max-width:768px){
  .nav-toggle{display:flex;align-items:center;}
  .sidebar{
    width:240px;transform:translateX(-100%);
    transition:transform .25s ease;box-shadow:none;
  }
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.25);}
  .sidebar-header .company-name,.sidebar-header .company-sub{display:block;}
  .nav-item span:not(.nav-icon){display:inline;}
  .nav-section-title{display:block;}
  .sidebar-footer{display:block;}
  .main-area{margin-left:0;}
  .nav-overlay{display:block;}
  .nav-overlay.show{opacity:1;pointer-events:auto;}
  .content{padding:16px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .recruitment-summary{flex-wrap:wrap;gap:12px;}
  .site-header{flex-direction:column;align-items:flex-start;gap:8px;}
  .job-table-wrap{overflow-x:auto;}
}

/* ========== 人员招聘 - 按站点分组 ========== */
.recruitment-summary{
  display:flex;gap:24px;align-items:center;
  background:linear-gradient(135deg,#fff5f9,#f7effc);border-radius:12px;padding:14px 18px;
  box-shadow:var(--shadow-card);margin-bottom:20px;border:1px solid var(--border-soft);
}
.recruitment-summary .rs-item{display:flex;flex-direction:column;gap:2px;}
.recruitment-summary .rs-label{font-size:11px;color:var(--text-light);text-transform:uppercase;letter-spacing:0.5px;}
.recruitment-summary .rs-value{font-size:20px;font-weight:700;color:var(--bsk-black);}
.recruitment-summary .text-success{color:var(--success);}
.recruitment-summary .text-warning{color:#d97b42;}
.recruitment-summary .text-danger{color:var(--danger);}
.recruitment-summary .text-secondary{color:var(--text-light);}

.recruitment-groups{display:flex;flex-direction:column;gap:20px;}

.site-group{
  background:var(--card);border-radius:12px;
  box-shadow:var(--shadow-card);overflow:hidden;border:1px solid var(--border-soft);
}
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:linear-gradient(90deg,#f1f5fb,#e8eef8);border-bottom:2px solid var(--border);
}
.site-title{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--bsk-black);
}
.site-count{
  background:linear-gradient(135deg,#0b5e3a,#127a4c);color:#fff;
  padding:2px 10px;border-radius:12px;font-size:12px;font-weight:700;
}
.site-badges{display:flex;gap:8px;flex-wrap:wrap;}
.sbadge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;
}
.sbadge-warning{background:#fdf0dc;color:#94642a;}
.sbadge-success{background:#d9f2e6;color:#1d6b4f;}
.sbadge-danger{background:#fce4e9;color:#a12b4f;}
.sbadge-info{background:#e5e2f9;color:#4c46a0;}
.sbadge-secondary{background:#f0e9f0;color:#5d5560;}
/* v41: 人员需求「待补充人数」徽章——红底白字，站点头部最显眼位置 */
.sbadge-demand{background:#dc2626;color:#ffffff;font-weight:700;}
.sbadge-demand i{font-size:11px;}

.site-body{padding:8px 0;}

.job-group{padding:12px 18px;border-bottom:1px solid var(--border);}
.job-group:last-child{border-bottom:none;}
.job-title{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.job-name{
  font-size:14px;font-weight:700;color:var(--text);
}
.job-count{
  background:var(--surface-soft);color:var(--text-light);
  padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;
}

.job-table-wrap{overflow-x:auto;}
.recruit-table-compact{width:100%;border-collapse:collapse;}
.recruit-table-compact th,
.recruit-table-compact td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);font-size:12px;vertical-align:top;}
.recruit-table-compact th{background:var(--surface-soft);font-weight:600;color:var(--text-light);text-transform:uppercase;font-size:10px;letter-spacing:0.5px;white-space:nowrap;}
.recruit-table-compact tr:hover{background:var(--surface-hover);}
.recruit-table-compact a{color:var(--info);text-decoration:none;font-weight:600;}
.recruit-table-compact a:hover{text-decoration:underline;}

/* ========== 公司支出 - 按分类分组 ========== */
.expense-groups{display:flex;flex-direction:column;gap:20px;}

.expense-group{
  background:var(--card);border-radius:12px;
  box-shadow:var(--shadow-card);overflow:hidden;border:1px solid var(--border-soft);
}
.expense-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:linear-gradient(90deg,#f1f5fb,#e8eef8);border-bottom:2px solid var(--border);
}
.expense-title{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--bsk-black);
}
.expense-count{
  background:linear-gradient(135deg,#0b5e3a,#127a4c);color:#fff;
  padding:2px 10px;border-radius:12px;font-size:12px;font-weight:700;
}
.expense-badges{display:flex;gap:8px;flex-wrap:wrap;}

.expense-body{padding:8px 0;}

.expense-table-wrap{overflow-x:auto;}
.expense-table-compact{width:100%;border-collapse:collapse;}
.expense-table-compact th,
.expense-table-compact td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);font-size:12px;vertical-align:top;}
.expense-table-compact th{background:var(--surface-soft);font-weight:600;color:var(--text-light);text-transform:uppercase;font-size:10px;letter-spacing:0.5px;white-space:nowrap;}
.expense-table-compact tr:hover{background:var(--surface-hover);}
.expense-table-compact tfoot td{font-weight:700;color:var(--bsk-black);}

@media(max-width:768px){
  .expense-header{flex-direction:column;align-items:flex-start;gap:8px;}
  .expense-table-wrap{overflow-x:auto;}
}


/* ============================================
   P1-A 按钮 / 表单视觉反馈（阶段4，2026-08-28）
   纯 CSS 增量：不改变任何 JS 调用方式，可独立回退
   ============================================ */
.btn:disabled,.btn[disabled]{opacity:.6;cursor:not-allowed;}
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none;}
.btn.is-loading::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:bsk-spin .7s linear infinite;
}
@keyframes bsk-spin{to{transform:rotate(360deg)}}
/* 键盘可达性焦点环（鼠标点击不触发 focus-visible，不影响现有交互） */
:focus-visible{outline:2px solid var(--bsk-yellow);outline-offset:2px;}
/* 表单错误态（由 JS 给 .form-group 加 has-error 即生效，无则不变） */
.form-group.has-error label{color:var(--danger);}
.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,106,139,.12);}
.form-group .field-error{color:var(--danger);font-size:12px;margin-top:4px;display:none;}
.form-group.has-error .field-error{display:block;}

/* ============================================
   P1-B 动效与过渡（阶段5，2026-08-28）
   纯 CSS：内容淡入 / 卡片 hover 上浮 / 模态框缩放
   遵循 prefers-reduced-motion
   ============================================ */
.content > *{animation:content-fade .18s ease;}
@keyframes content-fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.card,.stat-card,.kpi-card,.chart-card,.expense-group,.site-group{transition:transform .18s ease,box-shadow .18s ease;}
.card:hover,.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);}
.modal{animation:modal-in .2s ease;}
@keyframes modal-in{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
  .content > *,.modal{animation:none;}
  .card,.stat-card,.expense-group,.site-group{transition:none;}
  .card:hover,.stat-card:hover{transform:none;}
}

/* ============================================
   Dashboard 可视化仪表盘增强（2026-08-28）
   纯 CSS 增量：KPI 卡片、图表卡片、图例、tooltip
   ============================================ */
/* 月份索引条（横向切换历史月份） */
.dash-month-bar{
  display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;
  padding:4px 2px 6px;margin-bottom:var(--sp-5);scrollbar-width:thin;
}
.dash-month-bar .month-tab{
  flex-shrink:0;padding:7px 15px;border-radius:999px;border:1px solid var(--border-soft);
  background:var(--card);color:var(--text-light);font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;white-space:nowrap;line-height:1;
}
.dash-month-bar .month-tab:hover{border-color:var(--bsk-yellow);color:var(--bsk-black);}
.dash-month-bar .month-tab.active{
  background:var(--bsk-black);color:#fff;border-color:var(--bsk-black);box-shadow:var(--shadow-card);
}
.dash-month-bar .month-tab .cur-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bsk-yellow-dark);
  margin-left:7px;vertical-align:middle;
}
.dash-month-bar .month-tab.active .cur-dot{background:#f5b824;}

.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-6);}
.kpi-card{
  background:var(--card);border-radius:var(--radius-lg);padding:20px;
  box-shadow:var(--shadow-card);border:1px solid var(--border-soft);
  border-left:4px solid var(--bsk-yellow);display:flex;flex-direction:column;gap:var(--sp-2);
  transition:transform .18s ease,box-shadow .18s ease;
}
.kpi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
.kpi-card.kpi-green{border-left-color:var(--success);}
.kpi-card.kpi-blue{border-left-color:var(--info);}
.kpi-card.kpi-red{border-left-color:var(--danger);}
.kpi-card.kpi-purple{border-left-color:#8b5cf6;}
.kpi-card.kpi-orange{border-left-color:#f59e0b;}
.kpi-card.kpi-teal{border-left-color:#14b8a6;}
.kpi-card.kpi-rose{border-left-color:#0b5e3a;}
.kpi-card.kpi-slate{border-left-color:#64748b;}
.kpi-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);}
.kpi-title{font-size:var(--fs-sm);color:var(--text-light);font-weight:600;display:flex;align-items:center;gap:6px;}
.kpi-refresh{background:none;border:none;color:var(--text-light);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:4px;}
.kpi-refresh:hover{background:var(--surface-hover);color:var(--bsk-black);}
.kpi-value{font-size:var(--fs-stat);font-weight:800;color:var(--bsk-black);line-height:1.1;font-variant-numeric:tabular-nums;}
.kpi-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:24px;}
.kpi-change{font-size:var(--fs-sm);font-weight:700;display:inline-flex;align-items:center;gap:4px;}
.kpi-change.up{color:var(--success);}
.kpi-change.down{color:var(--danger);}
.kpi-change.neutral{color:var(--text-light);}
.kpi-sparkline{flex-shrink:0;width:70px;height:28px;opacity:.85;}
.kpi-sub{font-size:var(--fs-xs);color:var(--text-light);}
.kpi-tooltip-trigger{position:relative;cursor:help;color:var(--text-light);}

.chart-card{background:var(--card);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-card);border:1px solid var(--border-soft);display:flex;flex-direction:column;transition:box-shadow .2s ease;}
.chart-card:hover{box-shadow:var(--shadow-card-hover);}
.chart-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap;}
.chart-card-title{font-size:var(--fs-title);font-weight:700;color:var(--bsk-black);margin:0;}
.chart-card-subtitle{font-size:var(--fs-xs);color:var(--text-light);margin-top:2px;}
.chart-card-meta{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}
.chart-filter{display:flex;gap:4px;background:var(--surface-soft);padding:3px;border-radius:var(--radius-md);}
.chart-filter button{background:none;border:none;padding:5px 10px;border-radius:6px;font-size:var(--fs-xs);font-weight:600;color:var(--text-light);cursor:pointer;transition:all .15s;}
.chart-filter button:hover{color:var(--bsk-black);}
.chart-filter button.active{background:var(--card);color:var(--bsk-yellow-dark);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.chart-body{flex:1;min-height:220px;position:relative;}
.chart-svg{width:100%;height:100%;display:block;overflow:visible;}
.chart-tooltip{
  position:absolute;background:rgba(11,94,58,.94);color:#fff;padding:8px 10px;border-radius:8px;
  font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10;max-width:220px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);line-height:1.4;
}
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-3);font-size:var(--fs-xs);}
.chart-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:3px 6px;border-radius:6px;transition:background .15s;}
.chart-legend-item:hover{background:var(--surface-hover);}
.chart-legend-item.disabled{opacity:.45;text-decoration:line-through;}
.chart-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.chart-legend-line{width:14px;height:3px;border-radius:2px;flex-shrink:0;}
.chart-empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:180px;color:var(--text-light);font-size:13px;}

.dash-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin-bottom:var(--sp-4);}
.dash-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:var(--sp-4);}
.dash-bottom-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp-4);margin-top:var(--sp-4);}

/* ===== P2 仪表板两栏布局：左侧 KPI 大图 + 右侧待办/记录 ===== */
.dash-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-5);align-items:start;}
.dash-main{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0;}
.dash-side{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0;position:sticky;top:74px;}
.dash-side .card{margin-bottom:0;padding:20px;}
.dash-side .side-card-title{
  font-size:14px;font-weight:700;color:var(--bsk-black);display:flex;align-items:center;gap:8px;
  padding-bottom:12px;border-bottom:1px solid var(--border-soft);margin-bottom:4px;
}
.dash-side .side-card-title i{color:var(--bsk-gold);}
.dash-side .dash-todo-item{
  display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border-soft);
  cursor:pointer;transition:background .15s;border-radius:8px;outline:none;user-select:none;
}
.dash-side .dash-todo-item:hover{background:var(--surface-hover);}
.dash-side .dash-todo-item:focus-visible{box-shadow:0 0 0 2px var(--bsk-green) inset;}
.dash-side .dash-todo-item:last-child{border-bottom:none;}
.dash-side .dash-todo-icon{
  width:32px;height:32px;border-radius:9px;background:var(--surface-soft);color:var(--bsk-yellow-dark);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.dash-side .dash-todo-item:hover .dash-todo-icon{background:#fef3c7;}
.dash-side .dash-todo-text{flex:1;font-size:13px;line-height:1.4;}
.dash-side .dash-todo-arrow{
  color:var(--text-light);font-size:11px;flex-shrink:0;
  transition:transform .18s, color .18s;
}
.dash-side .dash-todo-item:hover .dash-todo-arrow{
  color:var(--bsk-green);transform:translateX(3px);
}

@media(max-width:1100px){
  .dash-layout{grid-template-columns:1fr;}
  .dash-side{position:static;}
  .dash-grid-3{grid-template-columns:1fr 1fr;}
  .dash-bottom-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .dashboard-kpi-grid{grid-template-columns:1fr 1fr;}
  .kpi-value{font-size:22px;}
  .kpi-sparkline{display:none;}
  .dash-grid-2,.dash-grid-3{grid-template-columns:1fr;}
  .dash-bottom-grid{grid-template-columns:1fr;}
  .chart-card-header{flex-direction:column;}
  .card{padding:18px;}
  .chart-card{padding:18px;}
}
@media(max-width:480px){
  .dashboard-kpi-grid{grid-template-columns:1fr;}
}

/* ============================================================
   模块背景分色（2026-08-29 v24）
   打破大面积纯白：按模块分组注入柔和低饱和底色
   护眼：色调低饱和、高明度（L≥94），正文 #1f2937 对比 >10:1
   modal / toast / 登录页不受影响，仍保持白底
   ============================================================ */
:root{
  --mod-dashboard:#e7effa;    --mod-dashboard-strong:#d8e6f7;
  --mod-base:#f2f5f9;         --mod-base-strong:#e7ecf3;
  --mod-hr:#eaf6f1;           --mod-hr-strong:#dcf0e9;
  --mod-attendance:#f0eefb;   --mod-attendance-strong:#e6e1f8;
  --mod-finance:#fdf5e7;      --mod-finance-strong:#f8ecd0;
  --mod-commercial:#eff5ec;   --mod-commercial-strong:#e2eee1;
  --mod-system:#eef1f6;       --mod-system-strong:#e3e8ef;
}
#content[data-group="dashboard"]  {--mod-bg:var(--mod-dashboard);  --mod-strong:var(--mod-dashboard-strong);}
#content[data-group="base"]       {--mod-bg:var(--mod-base);       --mod-strong:var(--mod-base-strong);}
#content[data-group="hr"]         {--mod-bg:var(--mod-hr);         --mod-strong:var(--mod-hr-strong);}
#content[data-group="attendance"] {--mod-bg:var(--mod-attendance); --mod-strong:var(--mod-attendance-strong);}
#content[data-group="finance"]    {--mod-bg:var(--mod-finance);    --mod-strong:var(--mod-finance-strong);}
#content[data-group="commercial"] {--mod-bg:var(--mod-commercial); --mod-strong:var(--mod-commercial-strong);}
#content[data-group="system"]     {--mod-bg:var(--mod-system);     --mod-strong:var(--mod-system-strong);}

/* 卡片主体分色（统计卡/KPI 卡保留各自彩色左边条） */
#content .card,
#content .chart-card,
#content .stat-card,
#content .kpi-card,
#content .site-group,
#content .expense-group{
  background:var(--mod-bg, #ffffff);
}
/* 卡片顶部 3px 模块色带：微妙层次，强化模块识别 */
#content .card{border-top:3px solid var(--mod-strong, var(--border-soft));}
/* 表头分色：与卡片底色同族、略深一档 */
#content th{background:var(--mod-strong, var(--surface-soft));}
/* 分组容器头（招聘站点 / 支出分类）分色 */
#content .site-header,
#content .expense-header{
  background:linear-gradient(90deg, var(--mod-strong, #f1f5fb), var(--mod-bg, #e8eef8));
}
/* 招聘汇总条归入人力资源色系 */
#content[data-group="hr"] .recruitment-summary{
  background:linear-gradient(135deg, var(--mod-bg), var(--mod-strong));
}

/* ============================================================
   仪表盘专项强化（2026-08-29）：KPI 语义色浅底 + 图表卡色带 + 右栏暖金
   打破仪表盘纯白，形成「彩色 KPI 区 / 藏青蓝图表区 / 暖金信息区」层次
   ============================================================ */
/* KPI 卡片：按语义色上浅底渐变（保留彩色左边条），图标同步上色 */
#content .kpi-card.kpi-green {background:linear-gradient(160deg,#e7f7f0,#f4fbf8);}
#content .kpi-card.kpi-blue  {background:linear-gradient(160deg,#e7f0fe,#f3f8ff);}
#content .kpi-card.kpi-red   {background:linear-gradient(160deg,#fdeeee,#fff7f7);}
#content .kpi-card.kpi-purple{background:linear-gradient(160deg,#f0edfe,#f8f5ff);}
#content .kpi-card.kpi-teal  {background:linear-gradient(160deg,#e4f6f4,#f1fbf9);}
#content .kpi-card.kpi-orange{background:linear-gradient(160deg,#fdf2e2,#fff9f0);}
#content .kpi-card.kpi-rose  {background:linear-gradient(160deg,#e8eef8,#f4f7fc);}
#content .kpi-card.kpi-slate {background:linear-gradient(160deg,#eef1f5,#f7f9fb);}
/* KPI 图标配色 */
#content .kpi-card.kpi-green {--kpi-accent:#10b981;}
#content .kpi-card.kpi-blue  {--kpi-accent:#0e7490;}
#content .kpi-card.kpi-red   {--kpi-accent:#ef4444;}
#content .kpi-card.kpi-purple{--kpi-accent:#8b5cf6;}
#content .kpi-card.kpi-teal  {--kpi-accent:#14b8a6;}
#content .kpi-card.kpi-orange{--kpi-accent:#f59e0b;}
#content .kpi-card.kpi-rose  {--kpi-accent:#0b5e3a;}
#content .kpi-card.kpi-slate {--kpi-accent:#64748b;}
#content .kpi-card .kpi-title i{color:var(--kpi-accent);}

/* 图表卡：藏青蓝顶部色带，强化仪表盘主色调 */
#content .chart-card{border-top:3px solid var(--mod-strong, #d8e6f7);}

/* 右栏信息卡：暖金浅底，与左侧冷蓝图表区形成冷暖层次 */
#content .dash-side .card{
  background:linear-gradient(170deg,#fdf7ea,#fffaf1);
  border-top:3px solid #f5b824;
}

/* ============================================================
   考勤核对（原生融合模块 js/review.js）专属样式 2026-08-29
   命名空间 rv-*，与工作台既有样式隔离，避免相互影响
   ============================================================ */
.rv-table{width:100%;border-collapse:collapse;font-size:13px;}
.rv-table th,.rv-table td{padding:8px 10px;text-align:center;border-bottom:1px solid var(--border);}
.rv-table th{background:var(--surface-soft);font-weight:600;color:var(--text-light);
  text-transform:uppercase;font-size:11px;letter-spacing:.5px;white-space:nowrap;}
.rv-table tbody tr:hover{background:var(--surface-hover);}

/* 核对状态徽章 */
.rv-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;}
.rv-badge-pending{background:#f59e0b;}
.rv-badge-reviewed{background:#10b981;}
.rv-badge-submitted{background:#0e7490;}
.rv-badge-log{background:var(--surface-soft);color:var(--text-light);}

/* 行内操作按钮 */
.rv-actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.rv-mini{border:none;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;}
.rv-mini-blue{background:#e8f0fe;color:#1a5fb4;}
.rv-mini-green{background:#d1fae5;color:#047857;}
.rv-mini-purple{background:#ede9fe;color:#6d28d9;}
.rv-mini:hover{filter:brightness(.95);}

/* 明细矩阵 */
.rv-matrix-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;}
.rv-matrix-scroll{overflow:auto;max-height:620px;border:1px solid var(--border);border-radius:10px;}
.rv-matrix th,.rv-matrix td{padding:4px 6px;font-size:12px;}
.rv-matrix td.sym{font-weight:700;}
.rv-matrix td.c-hadir{background:#C6EFCE;color:#1e7d32}
.rv-matrix td.c-late{background:#FFF2CC;color:#b58900}
.rv-matrix td.c-early{background:#FCE4D6;color:#d94f00}
.rv-matrix td.c-leave{background:#DDEBF7;color:#1a5fb4}
.rv-matrix td.c-absen{background:#FFC7CE;color:#c0392b}
.rv-matrix td.c-resigned{background:#e5e7eb;color:#6b7280;font-size:11px}
.rv-matrix td.c-missing{background:#f3f4f6;color:#9ca3af;font-size:11px}
.rv-matrix td.c-unknown{background:#fef3c7;color:#92400e;font-size:11px}
.rv-matrix td.emp-cell{text-align:left;font-weight:600;white-space:nowrap;}
.rv-matrix td.code-cell{color:#374151;font-size:11px;font-weight:500;text-align:center;font-family:monospace;white-space:nowrap;}
.rv-matrix td.emp-cell.no-id,.rv-matrix td.code-cell.no-id{background:#fff3cd}
.rv-matrix .noid-badge{background:#b58900;color:#fff;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;margin-right:4px}
.rv-matrix td.emp-cell.emp-resigned{color:#9ca3af;text-decoration:line-through}
.rv-matrix .tag-resigned{display:inline-block;background:#9ca3af;color:#fff;font-size:10px;font-weight:600;
  padding:1px 5px;border-radius:4px;margin-left:4px;text-decoration:none}
.rv-matrix td.hd-cell{background:var(--surface-soft);font-weight:700}
.rv-matrix tr.totals td{background:#fff7e6;font-weight:700;white-space:nowrap;}

/* 工资结算周期标签 */
.rv-pp{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:999px;font-size:11px;
  font-weight:700;color:#fff;cursor:pointer;user-select:none;line-height:1.4}
.rv-pp-full{background:#64748b}
.rv-pp-half{background:#8b5cf6}
.rv-pp:hover{filter:brightness(1.12)}
.rv-pp-legend{font-size:12px;color:var(--text-light);margin:0 0 10px 0;line-height:1.7}
.rv-pp-legend .rv-pp{cursor:default;margin:0 2px}

/* 提示横幅 */
.rv-banner{border-radius:8px;padding:8px 12px;font-size:12px;margin-bottom:10px;line-height:1.6}
.rv-banner-warn{background:#fff7e6;color:#94642a;border:1px solid #fde3ad}
.rv-banner-info{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}

/* 操作日志：限高 + 内部滚动 + 紧凑行距，避免占据过大版面 */
.rv-log-card .card-header{margin-bottom:8px;}
.rv-log-box{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:8px;}
.rv-log-table th,.rv-log-table td{padding:5px 8px;font-size:12px;white-space:nowrap;}
.rv-log-table th{position:sticky;top:0;z-index:1;background:var(--surface-soft);}
@media(max-width:768px){
  .rv-log-box{max-height:200px}
  .rv-log-table th,.rv-log-table td{padding:4px 6px;font-size:11px}
}

/* 矩阵分页器 */
.rv-pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:10px 2px 0;font-size:12px;color:var(--text-light)}
.rv-page-btn{padding:4px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;
  cursor:pointer;font-size:12px;color:var(--text)}
.rv-page-btn:disabled{opacity:.5;cursor:not-allowed}
.rv-pager-info{font-weight:600;color:var(--text)}
@media(max-width:768px){
  .rv-matrix-scroll{max-height:460px}
  .rv-matrix-head .btn{padding:6px 10px;font-size:12px}
}

/* ============ 每日考勤确认（试运行） ============ */
.dc-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:4px;}
.dc-sum-card{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  padding:14px 16px;text-align:center;box-shadow:var(--shadow-card);}
.dc-sum-num{font-size:26px;font-weight:700;color:var(--bsk-black);line-height:1.2;}
.dc-sum-label{font-size:12px;color:var(--text-light);margin-top:4px;}

.dc-site-card{transition:box-shadow .2s ease;}
.dc-site-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.dc-site-name{font-size:16px;font-weight:700;color:var(--bsk-black);}
.dc-site-code{font-size:12px;color:var(--text-light);font-family:ui-monospace,monospace;margin-top:2px;}

.dc-confirmed{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.dc-conf-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.dc-conf-badge{display:inline-flex;align-items:center;gap:5px;background:#e7f8f0;color:#0b7a4c;
  border:1px solid #bcebd4;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;white-space:nowrap;}
.dc-conf-badge--pending{background:var(--surface-soft);color:var(--text-light);border:1px solid var(--border);}
.dc-conf-by{font-size:12px;color:var(--text-light);}
.dc-sign-thumb{height:52px;border:1px solid var(--border);border-radius:6px;background:#fff;padding:2px;}

.dc-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.dc-stat{font-size:12px;color:var(--text-light);background:var(--surface-soft);border-radius:6px;padding:4px 10px;}
.dc-stat b{color:var(--bsk-black);font-size:14px;margin-right:3px;}
.dc-stat-ok b{color:var(--success);}
.dc-stat-leave b{color:#f97316;}
.dc-stat-late b{color:#eab308;}
.dc-stat-break b{color:#64748b;}
.dc-stat-bad b{color:var(--danger);}

.dc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.dc-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;border-radius:6px;padding:3px 8px;font-weight:600;}
.dc-tag em{font-style:normal;font-weight:400;opacity:.85;font-size:11px;}
.dc-tag.dc-bad{background:#fdecec;color:#b91c1c;border:1px solid #f5c6c6;}
.dc-tag.dc-leave{background:#fff3e6;color:#c2570b;border:1px solid #f8d8b8;}
.dc-tag.dc-late{background:#fefce8;color:#a16207;border:1px solid #f3e8a0;}
.dc-tag.dc-break{background:#f1f5f9;color:#475569;border:1px solid #d8e0ea;}
.dc-tag.dc-ok{background:#e7f8f0;color:#0b7a4c;border:1px solid #bcebd4;}

.dc-no-abnormal{font-size:12px;color:var(--success);background:#e7f8f0;border-radius:6px;padding:6px 10px;margin-bottom:14px;display:inline-block;}

.dc-site-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid var(--border);padding-top:12px;}

.dc-sign-box{border:2px dashed var(--border);border-radius:10px;background:#fff;overflow:hidden;}
#dcCanvas{display:block;width:100%;height:220px;cursor:crosshair;touch-action:none;}

/* 签名痕迹台账 */
.dc-ledger-card{margin-bottom:14px;}
.dc-ledger-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.dc-ledger-sign-wrap{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;justify-content:center;}
.dc-ledger-sign{max-width:100%;max-height:260px;border:1px solid #eee;border-radius:6px;background:#fff;}

/* 核对页：站点签字痕迹 */
.rv-sign-area{margin:0 0 10px;padding:12px;background:#fbfdfc;border:1px solid #e2ece6;border-radius:10px;}
.rv-sign-head{font-size:13px;font-weight:700;color:var(--dark,#1f2937);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.rv-sign-count{background:var(--bsk-green,#0b5e3a);color:#fff;border-radius:999px;font-size:11px;padding:1px 8px;font-weight:700;}
.rv-sign-list{display:flex;flex-wrap:wrap;gap:10px;}
.rv-sign-card{width:150px;background:#fff;border:1px solid #e2ece6;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center;}
.rv-sign-date{font-size:12px;font-weight:700;color:var(--bsk-blue,#1d4ed8);width:100%;text-align:left;}
.rv-sign-img{width:100%;height:70px;object-fit:contain;background:#fff;border:1px dashed #c8d9cf;border-radius:6px;cursor:zoom-in;}
.rv-sign-meta{width:100%;text-align:center;font-size:11px;color:var(--text-light,#6b7280);line-height:1.4;}
.rv-sign-meta b{display:block;font-size:12px;color:var(--dark,#1f2937);}
.rv-sign-empty{color:var(--text-light,#9ca3af);font-size:13px;padding:10px 0;text-align:center;}

/* 核对页：日期列头每日签字状态（v22） */
.rv-day-sign{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;font-size:12px;line-height:1;cursor:help;margin-top:2px;}
.rv-day-signed{background:var(--bsk-blue-light,#d9f0e3);border:1px solid var(--primary,#0b5e3a);color:var(--primary,#0b5e3a);cursor:pointer;}
.rv-day-signed:hover{background:var(--primary,#0b5e3a);color:#fff;}
.rv-day-unsigned{background:#f3f4f6;border:1px solid #e5e7eb;color:#d1d5db;cursor:default;}
.rv-matrix th{vertical-align:top;}

/* ============================================
   Workbench 版本号（登录页底部 + 工作台右下角）
   ============================================ */
.wb-version {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
  padding: 6px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  z-index: 50;
  white-space: nowrap;
}
.wb-version:hover {
  color: var(--primary, #0b5e3a);
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.wb-ver-no { font-weight: 700; }
.wb-ver-sep { margin: 0 8px; opacity: 0.5; }
.wb-ver-date { font-variant-numeric: tabular-nums; }

/* 工作台右下角版本号 */
.wb-version-bottom {
  position: fixed;
  right: 14px;
  bottom: 10px;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.06);
  z-index: 9999;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.wb-version-bottom:hover {
  color: var(--primary, #0b5e3a);
  background: #fff;
}

/* 版本号点击弹窗 */
.wb-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: wbModalFadeIn 0.18s ease;
}
@keyframes wbModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.wb-modal-card {
  width: 92%;
  max-width: 480px;
  max-height: 80vh;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: wbModalSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wbModalSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.wb-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wb-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.wb-modal-x {
  background: none;
  border: 0;
  font-size: 24px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s ease;
}
.wb-modal-x:hover { color: #0f172a; }
.wb-modal-body {
  padding: 14px 20px 6px;
  overflow-y: auto;
  flex: 1;
}
.wb-cl-block { margin-bottom: 14px; }
.wb-cl-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #0b5e3a);
  margin-bottom: 4px;
}
.wb-cl-block ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #334155;
  line-height: 1.65;
}
.wb-cl-block li { margin: 2px 0; }
.wb-modal-foot {
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  font-size: 12px;
  color: #94a3b8;
  text-align: right;
}

/* 移动端 */
@media (max-width: 480px) {
  .wb-version { font-size: 11px; padding: 5px 10px; }
  .wb-version-bottom { font-size: 10px; right: 8px; bottom: 8px; }
  .wb-modal-card { max-height: 85vh; }
  .wb-modal-head { padding: 14px 16px; }
  .wb-modal-body { padding: 12px 16px 4px; }
}