/* ==========================================================================
   工资管理系统 · 样式表
   设计令牌 → 基础层 → 组件层 → 响应式 → 打印
   改动样式时请注意：所有类名都被 public/app.js 使用，重命名会导致界面错乱。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root{
  /* 品牌 */
  --blue:#2563eb;
  --blue-hover:#1d4ed8;
  --blue-soft:#eff4ff;
  --blue-line:#dbe6ff;
  --navy:#182b49;

  /* 中性色阶：从最深到最浅，用于建立文字层级 */
  --ink-900:#0f1e35;
  --ink-800:#1a2c47;
  --ink-700:#23354e;
  --ink-600:#3d5273;
  --ink-500:#5b6b85;
  --ink-400:#8492a8;
  --ink-300:#a6b0bf;
  --ink-200:#c3cbd8;

  /* 面与线 */
  --surface:#ffffff;
  --canvas:#f6f8fc;
  --line:#e8ecf3;
  --line-soft:#f1f4f9;
  --line-strong:#dde4ee;

  /* 语义色 */
  --green:#2eac83;   --green-bg:#ecf9f4;   --green-line:#d3f0e5;
  --orange:#d99326;  --orange-bg:#fff7e9;  --orange-line:#f7e6c4;
  --red:#d65c5c;     --red-bg:#fff1f1;     --red-line:#f8dcdc;
  --purple:#8b5ce0;  --purple-bg:#f5f0ff;

  /* 间距：4px 基准 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* 圆角 */
  --r-xs:6px; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-full:999px;

  /* 投影：多层叠加，越靠上越柔和 —— 避免单层生硬黑影 */
  --sh-xs:0 1px 2px rgba(15,30,53,.04);
  --sh-sm:0 1px 2px rgba(15,30,53,.04), 0 2px 6px rgba(15,30,53,.045);
  --sh-md:0 1px 2px rgba(15,30,53,.04), 0 6px 16px rgba(15,30,53,.06);
  --sh-lg:0 2px 4px rgba(15,30,53,.04), 0 14px 36px rgba(15,30,53,.09);
  --sh-xl:0 4px 8px rgba(15,30,53,.05), 0 28px 70px rgba(15,30,53,.14);
  --sh-blue:0 4px 12px rgba(37,99,235,.18);
  --sh-blue-lg:0 8px 24px rgba(37,99,235,.26);

  /* 缓动与时长 —— 统一用平滑曲线，不用 linear */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --t-fast:150ms;
  --t-base:220ms;
  --t-slow:320ms;

  /* 字号 */
  --fs-micro:11px;
  --fs-sm:12px;
  --fs-base:13px;
  --fs-md:14px;
  --fs-lg:16px;
  --fs-xl:20px;
  --fs-2xl:26px;

  --sidebar-w:236px;
  --topbar-h:68px;
}

/* --------------------------------------------------------------------------
   2. 基础层
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{
  font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink-600);
  background:var(--canvas);
  font-synthesis:none;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{margin:0}
::selection{background:rgba(37,99,235,.16)}

/* 细腻的滚动条，避免默认粗灰条打断视觉 */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(15,30,53,.14);border:3px solid transparent;background-clip:content-box;border-radius:var(--r-full)}
*::-webkit-scrollbar-thumb:hover{background:rgba(15,30,53,.26);background-clip:content-box}

button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}

button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
button:focus-visible,a:focus-visible{outline:2px solid #7ba4f7;outline-offset:3px}
button svg,a svg{flex-shrink:0}

/* --------------------------------------------------------------------------
   3. 排版层级
   大标题收紧字距，正文放宽行高，靠字重与颜色拉开层级
   -------------------------------------------------------------------------- */
h1{
  font-size:var(--fs-2xl);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.25;
  margin:0;
  color:var(--ink-900);
}
h2{
  font-size:var(--fs-lg);
  font-weight:620;
  letter-spacing:-.01em;
  line-height:1.4;
  margin:0;
  color:var(--ink-800);
}
h3{
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.45;
  margin:0 0 var(--s3);
  color:var(--ink-700);
}
p{line-height:1.7;margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
strong{font-weight:600}
small{font-size:var(--fs-micro)}
.muted{color:var(--ink-300)}
.subtitle{color:var(--ink-400);font-size:var(--fs-sm);line-height:1.6;margin:var(--s2) 0 0}

/* 数字统一等宽，金额列不会跳动 */
.money,.stat-value,.summary-strip strong,.detail-total strong,table.audit td:first-child{
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   4. 动效原语
   -------------------------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,16px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 进场：主内容区瀑布式淡入。用 transform/opacity，不触发重排 */
main>*{animation:rise var(--t-slow) var(--ease) both}
.stats>.stat:nth-child(1),.quick-grid>.quick:nth-child(1){animation-delay:0ms}
.stats>.stat:nth-child(2),.quick-grid>.quick:nth-child(2){animation-delay:45ms}
.stats>.stat:nth-child(3),.quick-grid>.quick:nth-child(3){animation-delay:90ms}
.stats>.stat:nth-child(4),.quick-grid>.quick:nth-child(4){animation-delay:135ms}
.quick-grid>.quick:nth-child(5){animation-delay:180ms}
.quick-grid>.quick:nth-child(6){animation-delay:225ms}
.two-col>*:nth-child(1){animation:rise var(--t-slow) var(--ease) both;animation-delay:60ms}
.two-col>*:nth-child(2){animation:rise var(--t-slow) var(--ease) both;animation-delay:120ms}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* --------------------------------------------------------------------------
   5. 按钮
   -------------------------------------------------------------------------- */
button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink-600);
  padding:9px 15px;
  font-size:var(--fs-base);
  font-weight:500;
  white-space:nowrap;
  box-shadow:var(--sh-xs);
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             box-shadow var(--t-base) var(--ease),
             transform var(--t-fast) var(--ease);
}
button:hover:not(:disabled){
  background:#fbfcfe;
  border-color:#c9d6ea;
  color:var(--ink-700);
  box-shadow:var(--sh-sm);
  transform:translateY(-1px);
}
button:active:not(:disabled){transform:translateY(0) scale(.985);box-shadow:var(--sh-xs);transition-duration:80ms}

button.primary{
  background:linear-gradient(180deg,#3b74f0,var(--blue));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--sh-blue);
}
button.primary:hover:not(:disabled){
  background:linear-gradient(180deg,#2f68ea,var(--blue-hover));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--sh-blue-lg);
  transform:translateY(-1px);
}

button.link{border:0;background:none;color:var(--blue);padding:5px 8px;box-shadow:none;font-weight:500}
button.link:hover:not(:disabled){background:var(--blue-soft);border-color:transparent;box-shadow:none;transform:none;color:var(--blue-hover)}
button.link.danger{color:var(--red)}
button.link.danger:hover:not(:disabled){background:var(--red-bg);color:#c44a4a}

button.danger{color:var(--red);border-color:var(--red-line)}
button.danger:hover:not(:disabled){background:var(--red-bg);border-color:#f0c4c4}

button.small{padding:6px 11px;font-size:var(--fs-sm);border-radius:var(--r-xs)}

svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   6. 侧栏
   -------------------------------------------------------------------------- */
#sidebar{
  width:var(--sidebar-w);
  position:fixed;inset:0 auto 0 0;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  z-index:5;
}
.brand{display:flex;align-items:center;gap:var(--s3);height:96px;padding:var(--s6)}
.brand-icon{
  width:40px;height:42px;border-radius:var(--r-md);
  background:linear-gradient(150deg,#4a80f2,var(--blue));
  display:grid;place-items:center;color:#fff;
  box-shadow:var(--sh-blue);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.brand:hover .brand-icon{transform:translateY(-1px) scale(1.04);box-shadow:var(--sh-blue-lg)}
.brand-icon svg{width:23px;height:23px}
.brand strong{font-size:var(--fs-lg);font-weight:650;color:var(--ink-800);display:block;letter-spacing:-.01em}
.brand small{font-size:9px;color:var(--ink-300);letter-spacing:.18em;display:block;margin-top:5px;font-weight:500}

.nav-label{font-size:9px;color:var(--ink-200);padding:var(--s7) var(--s6) var(--s3);letter-spacing:.2em;font-weight:600}
.nav{padding:0 var(--s3);display:grid;gap:3px}
.nav a{
  display:flex;align-items:center;gap:var(--s3);
  padding:11px 14px;border-radius:var(--r-sm);
  color:var(--ink-400);font-size:var(--fs-md);font-weight:500;
  position:relative;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.nav a:hover{background:#f7f9fc;color:var(--ink-700);transform:translateX(1px)}
.nav a.active{background:var(--blue-soft);color:var(--blue);font-weight:600}
.nav a.active:after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);margin-left:auto}
.nav a svg{transition:transform var(--t-base) var(--ease)}
.nav a:hover svg{transform:scale(1.08)}

.side-bottom{margin-top:auto;padding:var(--s5) var(--s5) var(--s4)}
.local-card{
  padding:var(--s4);background:#f8faff;
  border:1px solid #eaf0fa;border-radius:var(--r-md);
  line-height:1.75;font-size:var(--fs-sm);color:var(--ink-400);
}
.local-card strong{display:flex;align-items:center;gap:var(--s2);color:#4b6386;font-size:var(--fs-sm);font-weight:600}
.local-card svg{color:#3e7dea;width:15px;height:15px}
.side-actions{display:flex;gap:var(--s2);padding:0 var(--s5) var(--s5)}
.side-actions button{flex:1;font-size:var(--fs-micro);padding:7px 4px}

.side-foot{border-top:1px solid var(--line);padding:var(--s4) var(--s5);display:flex;align-items:center;gap:var(--s3)}
.avatar{
  width:34px;height:34px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:linear-gradient(150deg,#f0f4fa,#e7edf6);
  color:var(--ink-500);font-size:var(--fs-sm);font-weight:600;flex-shrink:0;
}
.side-foot strong{font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);display:block}
.side-foot small{display:block;font-size:var(--fs-micro);color:var(--ink-300);margin-top:3px}

/* --------------------------------------------------------------------------
   7. 工作区与顶栏
   -------------------------------------------------------------------------- */
.workspace{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;min-width:0}
#topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--s7);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--ink-400);
  position:sticky;top:0;z-index:4;
}
.breadcrumb{display:flex;align-items:center;gap:var(--s3)}
.breadcrumb span{color:var(--ink-200)}
.breadcrumb strong{font-weight:600;color:var(--ink-700)}
.header-right{display:flex;align-items:center;gap:var(--s5)}
.header-date{font-variant-numeric:tabular-nums}
.live{display:inline-flex;align-items:center;gap:7px}
.live:before{content:'';width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 0 3px rgba(46,172,131,.14)}
.top-backup{font-size:var(--fs-sm);padding:6px 10px;border:0;background:none;color:var(--ink-400);box-shadow:none}
.top-backup:hover:not(:disabled){background:#f5f8fd;color:var(--ink-600);transform:none;box-shadow:none}

main{padding:var(--s7) var(--s7) var(--s6);flex:1;max-width:1800px;width:100%;margin:0 auto;min-width:0}

.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.head-controls{display:flex;align-items:center;gap:var(--s3);color:var(--ink-400);font-size:var(--fs-sm)}
.head-controls select{min-width:154px}

footer{padding:var(--s2) var(--s7) var(--s6);color:var(--ink-200);font-size:var(--fs-micro);display:flex;justify-content:space-between}

/* --------------------------------------------------------------------------
   8. 欢迎条
   -------------------------------------------------------------------------- */
.welcome{
  background:linear-gradient(115deg,#eef4ff 0%,#f5f8ff 55%,#eaf2ff 100%);
  border:1px solid #e3ebfd;
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s7);
  margin-bottom:var(--s6);
  display:flex;justify-content:space-between;align-items:center;
  overflow:hidden;position:relative;
  box-shadow:var(--sh-sm);
}
.welcome h2{font-size:var(--fs-xl);font-weight:640;color:#24509a;margin-bottom:var(--s2);letter-spacing:-.015em}
.welcome p{margin:0;color:#7c94b6;font-size:var(--fs-sm);line-height:1.65}
.welcome-actions{display:flex;gap:var(--s3);z-index:1}
.welcome-art{position:absolute;right:235px;top:-12px;opacity:.09;transform:rotate(-12deg);pointer-events:none}
.welcome-art svg{width:130px;height:130px;stroke:var(--blue)}

/* --------------------------------------------------------------------------
   9. 统计卡
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-bottom:var(--s6)}
.stat{
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s5) var(--s5) var(--s4);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.stat-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);color:var(--ink-400);font-size:var(--fs-sm);font-weight:500}
.stat-value{font-size:30px;color:var(--ink-900);font-weight:660;letter-spacing:-.025em;margin:var(--s3) 0;line-height:1.1}
.stat-value small{font-size:var(--fs-sm);font-weight:400;color:var(--ink-300);margin-left:6px;letter-spacing:0}
.stat-foot{font-size:var(--fs-micro);color:var(--ink-300);border-top:1px solid var(--line-soft);padding-top:var(--s3);line-height:1.6}
.stat-foot b{font-weight:600;color:var(--green)}

.icon-box{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--blue-soft);color:#4483ed;flex-shrink:0;
  transition:transform var(--t-base) var(--ease);
}
.icon-box svg{width:17px;height:17px}
.icon-box.green{color:var(--green);background:var(--green-bg)}
.icon-box.orange{color:var(--orange);background:var(--orange-bg)}
.icon-box.purple{color:var(--purple);background:var(--purple-bg)}
.icon-box.red{color:var(--red);background:var(--red-bg)}

/* --------------------------------------------------------------------------
   10. 面板
   -------------------------------------------------------------------------- */
.panel{
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  margin-bottom:var(--s6);
  overflow:hidden;
  box-shadow:var(--sh-sm);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) var(--s6);gap:var(--s3);flex-wrap:wrap}
.panel-head>div{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.panel-head h2{display:flex;align-items:center;gap:var(--s2)}
.panel-head h2 svg{color:#6f8eb8;width:17px;height:17px}
.panel-head small{font-size:var(--fs-micro);color:var(--ink-300);font-weight:400}
.workspace,main,.panel{min-width:0}

.quick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3);padding:var(--s1) var(--s6) var(--s6)}
.quick{
  padding:var(--s5) 7px var(--s4);
  display:flex;align-items:center;text-align:center;flex-direction:column;
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;
  transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.quick:hover{border-color:var(--blue-line);background:#fdfeff;transform:translateY(-3px);box-shadow:var(--sh-md)}
.quick:hover .icon-box{transform:scale(1.08)}
.quick .icon-box{width:44px;height:44px;margin-bottom:var(--s3);border-radius:var(--r-md)}
.quick strong{font-size:var(--fs-sm);font-weight:600;color:var(--ink-600)}
.quick small{font-size:var(--fs-micro);color:var(--ink-300);margin-top:6px;line-height:1.5}

.two-col{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(250px,1fr);gap:var(--s6)}

/* 步骤与提示 */
.steps{padding:0 var(--s6) var(--s6)}
.step{display:flex;gap:var(--s3);padding:var(--s3) 0;align-items:flex-start}
.step-num{
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--blue-line);background:var(--blue-soft);color:#7195d0;
  border-radius:var(--r-full);font-size:var(--fs-micro);font-weight:600;flex-shrink:0;
}
.step strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-600)}
.step p{font-size:var(--fs-micro);color:var(--ink-300);margin:5px 0 0;line-height:1.6}
.tip{background:#fafbfd;margin:0 var(--s6) var(--s5);padding:var(--s3);border-radius:var(--r-sm);color:var(--ink-400);font-size:var(--fs-micro);line-height:1.8}

/* --------------------------------------------------------------------------
   11. 表格
   -------------------------------------------------------------------------- */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:var(--fs-base)}
th{
  background:#fafbfe;color:var(--ink-400);
  font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.02em;text-transform:none;
  padding:var(--s3) var(--s5);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line);
  position:relative;
}
td{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);color:var(--ink-500);font-size:var(--fs-base)}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover{background:#fbfcfe}
tbody tr:last-child td{border-bottom:0}

.name-cell{display:flex;align-items:center;gap:var(--s3);font-weight:600;color:var(--ink-700)}
.name-avatar{
  width:32px;height:32px;border-radius:var(--r-sm);
  background:linear-gradient(150deg,#f0f5ff,#e6eefe);
  color:#5983c6;display:grid;place-items:center;
  font-weight:600;font-size:var(--fs-sm);flex-shrink:0;
}
.money{font-weight:600;color:#425e83}
.net{color:#1f5fbd;font-weight:650}
.table-foot{
  border-top:1px solid var(--line);
  padding:var(--s4) var(--s5);
  font-size:var(--fs-micro);color:var(--ink-300);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}

/* 状态徽标 */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-full);
  background:var(--blue-soft);color:#5d89d6;
  font-size:var(--fs-micro);font-weight:600;line-height:1.6;
  border:1px solid transparent;
}
.badge.green{color:#248a67;background:var(--green-bg);border-color:var(--green-line)}
.badge.orange{color:#b57a1a;background:var(--orange-bg);border-color:var(--orange-line)}
.badge.gray{color:var(--ink-400);background:#f2f4f8;border-color:#e8ecf3}
.badge.red{color:#c74f4f;background:var(--red-bg);border-color:var(--red-line)}
.badge.blue{color:#3a6fd0;background:var(--blue-soft);border-color:var(--blue-line)}

/* --------------------------------------------------------------------------
   12. 工具栏与表单
   -------------------------------------------------------------------------- */
.toolbar{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
  background:#fdfefe;
}
.toolbar .spacer{flex:1}
.search{min-width:220px}
.field-inline{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--ink-400)}
.field-inline input,.field-inline select{min-height:36px}

input,select,textarea{
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink-600);
  padding:8px 11px;
  outline:none;min-height:38px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:#cfdae9}
input:focus,select:focus,textarea:focus{border-color:#7da7f5;box-shadow:0 0 0 3.5px rgba(37,99,235,.1);background:#fff}
input::placeholder{color:var(--ink-200)}
textarea{resize:vertical;min-height:84px}
input[type=checkbox]{min-height:0;accent-color:var(--blue);width:16px;height:16px;cursor:pointer}
input[hidden]{display:none}

.field{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-sm);color:var(--ink-500)}
.field>span{font-weight:500}
.field small{color:var(--ink-300);font-size:var(--fs-micro);line-height:1.6}
.field input,.field select,.field textarea{width:100%}
.field .required{color:#e28080}
/* 只读派生项：第 4 档补贴金额由各项满额决定，不可直接编辑 */
.field-derived .derived-value{
  min-height:38px;display:flex;align-items:center;
  padding:8px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  background:#fafbfd;color:var(--ink-400);font-size:var(--fs-base);
  font-variant-numeric:tabular-nums;
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.span2{grid-column:1/-1}
.checkline{display:flex;gap:var(--s2);align-items:center;font-size:var(--fs-sm);color:var(--ink-500);cursor:pointer}
.error{color:var(--red);font-size:var(--fs-sm);line-height:1.6;margin:var(--s3) 0 0}
.status-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.status-options button{padding:var(--s5) var(--s2)}

/* 提示条 */
.notice{
  padding:var(--s3) var(--s4);
  border:1px solid #e2ebfb;background:#f3f7ff;
  border-radius:var(--r-sm);
  color:#6d8cba;font-size:var(--fs-sm);line-height:1.75;
  margin-bottom:var(--s5);
}
.notice.warning{background:#fffbf1;border-color:#f7ebca;color:#a8833c}
.notice b{color:#4a6ea8;font-weight:600}
.notice.warning b{color:#8a6b2c}

/* 标签页 */
.tabs{display:flex;gap:var(--s6);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.tabs button{
  border:0;border-radius:0;background:none;box-shadow:none;
  padding:var(--s3) 2px var(--s4);
  color:var(--ink-400);font-size:var(--fs-base);font-weight:500;
  border-bottom:2px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.tabs button:hover:not(:disabled){color:var(--ink-700);background:none;transform:none;box-shadow:none}
.tabs button.selected{color:var(--blue);border-color:var(--blue);font-weight:600}

/* --------------------------------------------------------------------------
   13. 统计条 / 明细
   -------------------------------------------------------------------------- */
.summary-strip{display:flex;gap:var(--s8);padding:var(--s5) var(--s6);background:#fcfdff;flex-wrap:wrap;border-top:1px solid var(--line-soft)}
.summary-strip>div{min-width:0}
.summary-strip small{display:block;color:var(--ink-400);font-size:var(--fs-micro);margin-bottom:var(--s2);font-weight:500}
.summary-strip strong{font-size:22px;color:#2e527f;font-weight:650;letter-spacing:-.02em}

.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s6)}
.detail-line{display:flex;justify-content:space-between;gap:var(--s3);border-bottom:1px solid var(--line-soft);padding:var(--s3) 0;font-size:var(--fs-sm);color:var(--ink-400)}
.detail-line strong{font-weight:600;color:var(--ink-600);font-variant-numeric:tabular-nums}
.detail-total{
  padding:var(--s5);background:linear-gradient(135deg,#f2f7ff,#eaf1ff);
  border:1px solid #e0eafd;border-radius:var(--r-md);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  margin:var(--s5) 0;color:#4273b4;
}
.detail-total strong{font-size:25px;font-weight:660;letter-spacing:-.02em}

/* --------------------------------------------------------------------------
   14. 考勤日历
   -------------------------------------------------------------------------- */
.calendar th,.calendar td{padding:8px 5px;text-align:center}
.calendar th:first-child,.calendar td:first-child{
  position:sticky;left:0;background:var(--surface);z-index:1;
  padding:var(--s3) var(--s4);text-align:left;min-width:110px;
  box-shadow:1px 0 var(--line-soft);
}
.calendar th small{display:block;font-size:9px;margin-top:3px;color:var(--ink-200)}
.calendar td{padding:5px}
.day-button{
  padding:0;min-width:29px;height:29px;border:0;border-radius:7px;
  font-size:var(--fs-micro);font-weight:500;
  background:#f5f7fb;color:var(--ink-200);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.day-button:not(:disabled):hover{transform:scale(1.12);box-shadow:var(--sh-sm);z-index:2;position:relative}
.day-button:not(:disabled):active{transform:scale(.96)}
.day-button.work{color:#2f8f6e;background:#ecf9f3}
.day-button.leave{color:#cf8446;background:#fff4e9}
.day-button.public{color:#5f83bd;background:#eff4ff}
.day-button.absent{color:#d16565;background:#fff0f0}
.day-button:disabled{background:transparent}
.day-button:disabled:hover{transform:none;box-shadow:none}

.legend{display:flex;gap:var(--s4);font-size:var(--fs-micro);color:var(--ink-400);flex-wrap:wrap;padding:0 var(--s6) var(--s5)}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#3cb78c;flex-shrink:0}
.dot.orange{background:#e4a064}
.dot.blue{background:#6f9ade}
.dot.red{background:#d97676}

/* --------------------------------------------------------------------------
   15. 设置页
   -------------------------------------------------------------------------- */
.settings-body{padding:var(--s2) var(--s6) var(--s6)}
.settings-section{padding:var(--s5) 0 var(--s6);border-bottom:1px solid var(--line)}
.settings-section:first-child{padding-top:0}
.settings-section:last-child{border:0;padding-bottom:0}
.settings-section>p{font-size:var(--fs-sm);color:var(--ink-400);margin:0 0 var(--s4);line-height:1.65}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.settings-actions{padding-top:var(--s5);display:flex;justify-content:flex-end}

.group-list{display:grid;gap:var(--s2);padding:0 var(--s6) var(--s6)}
.group-item{
  display:flex;align-items:center;gap:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.group-item:hover{border-color:var(--blue-line);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.group-item .icon-box{width:32px;height:32px}
.group-item strong{font-size:var(--fs-md);color:var(--ink-700)}
.group-item>span:last-child{margin-left:auto;color:var(--ink-300);font-size:var(--fs-sm)}
.group-actions{margin-left:auto;display:flex;gap:2px;align-items:center}
.group-item .group-actions button{font-size:var(--fs-sm)}
.group-item>span+span.group-actions{margin-left:auto}
/* 员工数在操作按钮之前时不留 auto 边距，避免把按钮挤到最右 */
.group-item>span:not(.group-actions){color:var(--ink-300);font-size:var(--fs-sm)}
.group-item>span:not(.group-actions)+.group-actions{margin-left:auto}

/* 用户权限矩阵 */
.perm-matrix{margin-top:var(--s6);border-top:1px solid var(--line);padding-top:var(--s5)}
.perm-matrix h3{font-size:var(--fs-base);color:var(--ink-600);font-weight:600}
.perm-matrix .subtitle{margin-top:var(--s3)}
.perm-matrix select{min-height:34px;padding:6px 9px;font-size:var(--fs-sm)}
.perm-cell{white-space:normal;min-width:210px;max-width:330px;line-height:1.9;font-size:var(--fs-micro);color:var(--ink-400)}

table.audit td{white-space:normal;vertical-align:top}
table.audit td:first-child{white-space:nowrap}
table.audit td:last-child{min-width:220px}
table.users td{vertical-align:middle}
table.payroll th:first-child,table.payroll td:first-child{width:42px;padding-left:var(--s5);padding-right:var(--s2)}
.row-check,.check-all{width:15px;height:15px;min-height:0;accent-color:var(--blue);cursor:pointer;vertical-align:middle}
.pick-col{text-align:center}

/* --------------------------------------------------------------------------
   16. 弹窗
   -------------------------------------------------------------------------- */
dialog{
  border:1px solid rgba(226,232,241,.9);
  border-radius:var(--r-xl);
  padding:0;width:620px;max-width:calc(100vw - 32px);max-height:88vh;
  box-shadow:var(--sh-xl);
  color:var(--ink-600);
  background:var(--surface);
}
dialog[open]{animation:pop var(--t-slow) var(--ease)}
dialog::backdrop{background:rgba(15,32,60,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade var(--t-base) var(--ease)}
.modal-head{padding:var(--s6) var(--s6) var(--s4);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);border-bottom:1px solid var(--line-soft)}
.modal-head h2{font-size:var(--fs-xl);font-weight:640;letter-spacing:-.015em}
.modal-head p{font-size:var(--fs-sm);color:var(--ink-400);margin:var(--s2) 0 0;line-height:1.6}
.modal-head button{border:0;padding:5px;background:none;color:var(--ink-300);box-shadow:none;border-radius:var(--r-xs);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.modal-head button:hover:not(:disabled){background:#f2f5fa;color:var(--ink-600);transform:none;box-shadow:none}
.modal-body{padding:var(--s6);overflow:auto;max-height:calc(88vh - 190px)}
.modal-actions{padding:var(--s4) var(--s6);background:#fafbfd;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:var(--s3)}

/* --------------------------------------------------------------------------
   17. 提示气泡与环境
   -------------------------------------------------------------------------- */
#toast{
  position:fixed;bottom:var(--s7);left:calc(50% + 118px);
  transform:translate(-50%,20px);
  padding:var(--s3) var(--s6);
  background:rgba(28,48,78,.97);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
  z-index:20;font-size:var(--fs-base);font-weight:500;max-width:90vw;
}
#toast.show{opacity:1;transform:translate(-50%,0);animation:toast-in var(--t-slow) var(--ease)}
#toast.error-toast{background:rgba(163,63,66,.97)}

.empty{padding:var(--s9) var(--s6);text-align:center;color:var(--ink-400)}
.empty svg{width:44px;height:44px;stroke:var(--ink-200);margin-bottom:var(--s3)}
.empty h3{font-size:var(--fs-md);font-weight:600;color:var(--ink-500);margin:var(--s2) 0 var(--s3)}
.empty p{font-size:var(--fs-sm);margin:0 0 var(--s5);line-height:1.65}
.loading{padding:100px;text-align:center;color:#8ba1c3;font-size:var(--fs-md)}
.mobile-menu{display:none}
.print-only{display:none}

/* --------------------------------------------------------------------------
   18. 登录页
   -------------------------------------------------------------------------- */
#login-screen{
  display:grid;place-items:center;min-height:100vh;padding:var(--s6);
  background:
    radial-gradient(1100px 520px at 12% -8%,rgba(37,99,235,.1),transparent 62%),
    radial-gradient(900px 460px at 92% 108%,rgba(37,99,235,.08),transparent 60%),
    linear-gradient(160deg,#f2f6fd 0%,#f8fafd 48%,#eef4ff 100%);
}
#login-screen[hidden],#app[hidden]{display:none}
.login-card{
  width:100%;max-width:396px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl);
  padding:var(--s7) var(--s7) var(--s6);
  box-shadow:var(--sh-xl);
  display:flex;flex-direction:column;gap:var(--s4);
  animation:rise var(--t-slow) var(--ease) both;
}
.login-brand{display:flex;align-items:center;gap:var(--s3)}
.login-brand .brand-icon{width:40px;height:42px;border-radius:var(--r-md);background:linear-gradient(150deg,#4a80f2,var(--blue));display:grid;place-items:center;color:#fff;box-shadow:var(--sh-blue)}
.login-brand .brand-icon svg{width:23px;height:23px}
.login-brand strong{font-size:var(--fs-lg);font-weight:650;color:var(--ink-800);display:block;letter-spacing:-.01em}
.login-brand small{font-size:9px;color:var(--ink-300);letter-spacing:.18em;display:block;margin-top:4px;font-weight:500}
.login-card h1{font-size:23px;font-weight:650;letter-spacing:-.02em;margin:var(--s3) 0 0}
.login-hint{font-size:var(--fs-sm);color:var(--ink-400);margin:0;line-height:1.75}
.login-card .field span{display:block;font-size:var(--fs-sm);color:var(--ink-500);font-weight:500}
.login-card input{min-height:42px}
.login-card button.primary{width:100%;margin-top:var(--s1);min-height:42px}
.login-foot{font-size:var(--fs-micro);color:var(--ink-300);margin:0;text-align:center;line-height:1.7}
#login-form .error{min-height:18px;margin:0}

/* --------------------------------------------------------------------------
   19. Excel 考勤导入
   -------------------------------------------------------------------------- */
.attendance-import-summary{
  padding:var(--s4) var(--s5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
.attendance-import-summary strong{font-size:var(--fs-md);color:#355a8e}
.attendance-import-summary span{font-size:var(--fs-sm);color:var(--ink-400);margin-left:var(--s4)}
.attendance-import-summary p{font-size:var(--fs-sm);color:var(--ink-400);margin:0}
.import-loading{padding:var(--s8);text-align:center;color:#7a93b5}
.import-filebar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.import-filebar>div{display:flex;gap:var(--s2);align-items:center;color:#3b6295}
.import-filebar label{font-size:var(--fs-sm);color:var(--ink-400)}
.import-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s5)}
.import-metrics>div{
  border:1px solid var(--line);padding:var(--s4);border-radius:var(--r-md);background:#fafcff;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.import-metrics>div:hover{border-color:var(--blue-line);box-shadow:var(--sh-sm)}
.import-metrics small{display:block;color:var(--ink-400);font-size:var(--fs-sm)}
.import-metrics strong{display:block;color:#295ba1;font-size:28px;margin-top:var(--s2);font-weight:660;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.import-metrics strong span{font-size:var(--fs-sm);color:var(--ink-300);margin-left:6px;font-weight:400}
.import-legend{margin-bottom:var(--s4)}
.import-mappings{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 var(--s5)}
.import-mapping{
  display:flex;align-items:center;gap:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);font-size:var(--fs-sm);color:var(--ink-400);
  transition:border-color var(--t-fast) var(--ease)
}
.import-mapping:hover{border-color:var(--line-strong)}
.import-symbol{color:#536d92;font-weight:600;max-width:140px;overflow-wrap:anywhere}
.import-mapping small{font-size:var(--fs-micro)}
.import-mapping select{font-size:var(--fs-sm);min-height:32px;padding:5px 8px}
.import-table-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s5) 0 var(--s3)}
.import-table-head h3{margin:0}
.import-table-head span{font-size:var(--fs-micro);color:var(--ink-300)}
.import-preview-table{max-height:330px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.import-preview-table .table-wrap{overflow:visible}
.import-preview-table th{position:sticky;top:0;z-index:1}
.import-issues,.import-overwrite{font-size:var(--fs-sm);color:var(--ink-400);line-height:1.7}
.source-cell{font-size:var(--fs-micro);color:var(--ink-300)}

/* --------------------------------------------------------------------------
   20. 响应式
   -------------------------------------------------------------------------- */
@media (min-width:1600px){
  main{padding:var(--s8) var(--s9)}
  .stat{padding:var(--s6)}
  .quick{padding:var(--s6) var(--s2)}
  .quick small{font-size:var(--fs-micro)}
}

@media (max-width:1200px){
  :root{--sidebar-w:205px}
  .brand{padding:var(--s5) var(--s4)}
  .brand strong{font-size:var(--fs-md)}
  main{padding:var(--s6)}
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
  .stats{gap:var(--s3)}
  .stat{padding:var(--s4)}
  .stat-value{font-size:25px}
  .welcome-art{display:none}
  .head-controls{flex-wrap:wrap}
  #toast{left:calc(50% + 102px)}
}

@media (max-width:800px){
  :root{--sidebar-w:72px;--topbar-h:60px}
  .brand{padding:var(--s5) var(--s3);justify-content:center}
  /* .side-actions 与 .side-bottom/.side-foot 是兄弟节点，必须一起隐藏，
     否则窄屏下「修改密码/退出登录」会浮在内容之上 */
  .brand>div:last-child,.nav-label,.nav a span,.side-bottom,.side-foot,.side-actions{display:none}
  .nav{padding:var(--s3) 9px}
  .nav a{padding:var(--s4);justify-content:center}
  .nav a:hover{transform:none}
  .nav a.active:after{display:none}
  #topbar{padding:0 var(--s5)}
  .header-right>.live{display:none}
  main{padding:var(--s5) var(--s4)}
  .page-head{align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--s5)}
  h1{font-size:22px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .welcome{padding:var(--s5);align-items:flex-start;gap:var(--s5);flex-direction:column}
  .quick-grid{padding:0 var(--s4) var(--s4)}
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{padding:var(--s4);gap:var(--s2)}
  .toolbar input,.search{min-width:0}
  .two-col{gap:0}
  .panel-head{padding:var(--s4)}
  .summary-strip{gap:var(--s5)}
  footer{padding:var(--s3) var(--s4) var(--s5)}
  footer span{display:none}
  #toast{left:50%}
  .form-grid{gap:var(--s4)}
  .stat-foot{font-size:var(--fs-micro)}
  .import-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .import-mapping{flex-wrap:wrap;width:100%}
  .import-table-head{align-items:start;flex-direction:column}
  .attendance-import-summary span{display:block;margin:var(--s2) 0 0}
}

@media (max-width:480px){
  :root{--sidebar-w:58px}
  .brand{padding:var(--s4) 10px}
  .brand-icon{width:35px;height:37px}
  .nav{padding:5px}
  .nav a{padding:var(--s4) 10px}
  #topbar{padding:0 var(--s4)}
  .header-right{gap:0}
  .top-backup{padding:6px}
  .header-date{display:none}
  main{padding:var(--s5) var(--s3)}
  .stats{gap:var(--s2)}
  .stat{padding:var(--s3)}
  .stat-value{font-size:20px;letter-spacing:-.03em}
  .icon-box{width:30px;height:30px}
  .stat-top{font-size:var(--fs-micro)}
  .quick-grid{gap:7px}
  .quick small{display:none}
  .quick strong{font-size:var(--fs-micro)}
  .quick{padding:var(--s4) var(--s1)}
  .form-grid,.settings-grid,.detail-grid{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .modal-body{padding:var(--s5)}
  .modal-head{padding:var(--s5) var(--s5) var(--s4)}
  .modal-actions{padding:var(--s4) var(--s5)}
  .welcome p{font-size:var(--fs-micro)}
  .head-controls{width:100%}
  .toolbar .field-inline{flex:1}
  .field-inline select{max-width:140px}
  .search{width:100%}
  .stat-foot{line-height:1.6}
  .summary-strip strong{font-size:19px}
  .summary-strip{gap:var(--s4)}
  .breadcrumb{gap:var(--s2)}
  .panel-head small{display:none}
}

/* --------------------------------------------------------------------------
   20b. 移动端：宽表格折叠成卡片
   手机上横滑 9 列表格很难用——底薪、操作这些关键列都在屏幕外，而且没有
   滑动提示。640px 以下把每一行折成一张卡片，彻底消除横向滚动。
   字段名取自各 td 的 data-label（由 app.js 的模板提供）：
     data-label=""           → 卡片标题，占满整行且不显示字段名
     class="cell-actions"    → 操作区，占满整行、右对齐
     class="cell-check"      → 勾选框，浮到卡片右上角
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  /* 卡片模式下表头没有意义 */
  table.cards thead{display:none}
  table.cards,table.cards tbody{display:block}
  /* 卡片自带边框与投影，外层不需要再当滚动容器（否则会裁掉阴影） */
  .table-wrap:has(> table.cards){overflow:visible}

  table.cards tr{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s3) var(--s4);
    position:relative;
    padding:var(--s4);
    margin:0 0 var(--s3);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-xs);
  }
  table.cards tbody tr:last-child{margin-bottom:0}
  table.cards tr:hover{background:var(--surface)}

  table.cards td{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    padding:0;border:0;
    white-space:normal;min-width:0;
    font-size:var(--fs-base);color:var(--ink-500);
  }
  table.cards td::before{
    content:attr(data-label);
    color:var(--ink-300);
    font-size:var(--fs-micro);
    font-weight:500;
    line-height:1.3;
  }

  /* 标题与操作区占满整行，且不显示字段名 */
  table.cards td[data-label=""],
  table.cards td.cell-actions{grid-column:1/-1}
  table.cards td[data-label=""]::before,
  table.cards td.cell-actions::before{content:none}
  table.cards td[data-label=""]:not(.cell-actions){
    font-size:var(--fs-md);font-weight:600;color:var(--ink-800);
    padding-right:var(--s8);   /* 给右上角 18px 的勾选框留位置 */
  }
  table.cards td.cell-actions{
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;
    gap:var(--s2);
    margin-top:var(--s1);
    border-top:1px solid var(--line-soft);
    padding-top:var(--s3);
  }

  /* 工资表的勾选框浮到卡片右上角 */
  table.cards td.cell-check{
    position:absolute;top:var(--s4);right:var(--s4);
    grid-column:auto;width:auto;padding:0;
  }
  table.cards td.cell-check::before{content:none}
  table.cards .row-check,table.cards .check-all{width:18px;height:18px}

  table.cards .name-avatar{width:28px;height:28px;font-size:var(--fs-micro)}
  table.cards .table-foot{border-top:0;padding:var(--s2) 0 0}
  table.cards+.table-foot{border-top:0}

  /* ---------- 工具栏：筛选控件排成两列，标签不再被挤成竖排 ---------- */
  .toolbar{padding:var(--s3);gap:var(--s2)}
  .toolbar .search{flex:1 1 100%;width:100%;min-width:0}
  .toolbar .field-inline{flex:1 1 calc(50% - var(--s2));min-width:0;white-space:nowrap}
  .toolbar .field-inline select{flex:1;min-width:0;width:100%}
  .toolbar .spacer{display:none}
  .toolbar>button{flex:1 1 auto}

  /* ---------- 考勤日历：加大触摸目标，明确"首列固定" ---------- */
  .calendar th,.calendar td{padding:4px 2px}
  .calendar th{font-size:10px;padding:6px 2px}
  .calendar th small{font-size:8px;margin-top:2px}
  .calendar th:first-child,.calendar td:first-child{
    min-width:74px;
    padding:var(--s2) var(--s3);
    box-shadow:8px 0 12px -8px rgba(15,30,53,.22),1px 0 var(--line-soft);
  }
  .calendar td:first-child{font-size:var(--fs-sm);font-weight:600;color:var(--ink-700)}
  .day-button{min-width:32px;height:32px;font-size:var(--fs-micro);border-radius:8px}
  .table-wrap{-webkit-overflow-scrolling:touch}
  .legend::after{
    content:'← 左右滑动查看整月 →';
    flex:1 1 100%;
    margin-top:var(--s1);
    color:var(--blue);
    font-weight:500;
  }
}

/* --------------------------------------------------------------------------
   21. 打印
   -------------------------------------------------------------------------- */
@media print{
  #sidebar,#topbar,footer,.page-head button,.toolbar,.tabs,.modal-actions,#toast{display:none!important}
  .workspace{margin:0}
  main{padding:0}
  .panel{border:0;box-shadow:none}
  .table-wrap{overflow:visible}
  table{font-size:10px}
  th,td{padding:var(--s2)}
  .print-only{display:block}
  dialog[open]{position:static;max-height:none;max-width:none;width:100%;box-shadow:none;border:0}
  body:has(dialog[open])>.workspace{display:none}
  dialog::backdrop{background:white}
  main>*{animation:none!important}
}