/* ==========================================================
   设计令牌 · 现代 SaaS 版
   参考：发货数据导出11（蓝紫渐变 / 玻璃拟态 / 大圆角 / 悬停动效）
   原则：
   - token 名与旧版完全一致，业务 CSS / JS 零改动，只换视觉值
   - 颜色仍编码语义：在岗=绿、缺勤=红、休假=蓝灰（不因为好看就乱配色）
   - 数据密度不降：107 行表格要能竖着扫下来比较
   ========================================================== */

:root {
  /* ---- 表面 ---- */
  --ground:   #F1F4F9;          /* 冷调浅底，衬托白色卡片 */
  --surface:  #FFFFFF;
  --surface2: #F8FAFC;          /* 表头 / 次级面 */
  --surface3: #EEF2F7;          /* 骨架屏底 */
  --line:     #E2E8F0;
  --line-soft:#EFF3F8;

  /* ---- 墨色 ---- */
  --ink:   #0F172A;              /* Slate 900 */
  --ink2:  #475569;              /* Slate 600 */
  --ink3:  #94A3B8;              /* Slate 400 */

  /* ---- 品牌主色：靛蓝紫 ---- */
  --brand:        #4F46E5;
  --brand-hover:  #4338CA;
  --brand-active: #3730A3;
  --brand-soft:   #EEF2FF;
  --brand-softer: #F5F3FF;

  /* ---- 语义色（业务含义不变，只调饱和度以适配新底色）---- */
  --primary:      #10B981;        /* 在岗 / 已通过 */
  --primary-soft: #ECFDF5;
  --primary-dim:  #059669;

  --alert:        #EF4444;        /* 缺勤 / 未报 / 驳回 */
  --alert-soft:   #FEF2F2;
  --alert-dim:    #DC2626;

  --neutral:      #0EA5E9;        /* 休假 / 请假中 */
  --neutral-soft: #E0F2FE;

  --warning:      #F59E0B;
  --warning-soft: #FFFBEB;
  --info:         #6366F1;
  --info-soft:    #EEF2FF;

  /* ---- 侧栏专用（浅色导航区）----
     2026-10-06 改版：参考「润宝运营工作台」的**结构**（分组标题 + 图标 + 选中块 + 间距节奏），
     但配色走浅色 —— 白底 + 浅灰分组 + 靛蓝选中块，和正文区同色系，
     不再用深蓝（深底上和主内容区割裂，整体偏暗）。
     ⚠️ 变量名全部沿用旧版（side-bg1/bg2/line/group/txt/hover/active），
        业务 CSS 一行都不用改，这是大范围换色的安全做法。 */
  --side-bg1:     #FFFFFF;        /* 渐变起（纯白） */
  --side-bg2:     #FAFBFF;        /* 渐变止（极淡靛蓝，几乎看不出但有层次） */
  --side-line:    #ECEFF5;        /* 分隔线：浅灰，不要用纯黑系 */
  --side-group:   #7C8698;        /* 分组标题：中灰，比导航项弱一档 */
  --side-txt:     #3F4A5C;        /* 导航项文字：深灰蓝，白底上对比度 8.6:1 */
  --side-hover:   #F3F5FA;        /* 悬停底：淡灰蓝 */
  --side-active:  #4F46E5;        /* 选中块：靛蓝（与全站主色一致） */
  --side-active2: #4338CA;

  /* ---- 字体 ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", Arial, sans-serif;  --font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;

  /* ---- 字号 ----
     2026-10-06 整体上调一档（用户反馈偏小）：正文 13→14、次要 12→13、最小 11→12。
     现场多是 1080p 显示器，14px 正文 + 13px 辅助是中文界面的舒适区。 */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 24px;

  /* ---- 间距 ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* ---- 圆角：明显变大，这是「高级感」的最大来源 ---- */
  --radius:     8px;
  --radius-sm:  6px;
  --radius-lg: 14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ---- 阴影：多层柔和阴影代替边框堆叠 ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 20px 45px rgba(15, 23, 42, .12), 0 4px 10px rgba(15, 23, 42, .05);
  --shadow-brand: 0 6px 18px rgba(79, 70, 229, .28);

  /* ---- 玻璃拟态 ---- */
  --surface-glass:       rgba(255, 255, 255, .78);
  --surface-glass-solid: rgba(255, 255, 255, .93);

  /* ---- 动效 ---- */
  --t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 380ms cubic-bezier(.16, 1, .3, 1);

  /* ---- 层级 ---- */
  --z-sticky: 10;
  --z-mask:   50;
  --z-toast:  90;

  /* ---- 布局常量 ---- */
  --side-w: 232px;
  --top-h:  58px;

  /* ---- 断点 ---- */
  --bp-lg: 1440px;
  --bp-md: 1024px;
  --bp-sm: 768px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  /* 双层径向渐变 + 线性底，营造参考项目那种「有空气」的底色 */
  background:
    radial-gradient(1100px 520px at 8% -8%, #E4E9FF 0%, transparent 60%),
    radial-gradient(900px 460px at 100% 0%, #E0F2FE 0%, transparent 55%),
    linear-gradient(160deg, #F8FAFF 0%, #EFF4F9 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 数字一律等宽右对齐：300 行数字才能竖着扫下来比较 */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

h1 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; letter-spacing: -.3px; }
h2 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; letter-spacing: -.1px; }

a { color: var(--brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-hover); text-decoration: none; }

/* ============ 焦点环：全站统一，键盘可见、鼠标不打扰 ============ */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============ 状态点 ============ */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.dot--ok      { background: var(--primary); }
.dot--alert   { background: var(--alert); }
.dot--neutral { background: var(--neutral); }
.dot--idle    { background: var(--ink3); }

.tag { font-size: var(--fs-sm); color: var(--ink2); }
.tag strong { font-weight: 600; color: var(--ink); }

/* ============ 表格：系统的骨架 ============ */
.tbl {
  width: 100%;
  border-collapse: separate;   /* 配合圆角 + 行间距做出「卡片行」质感 */
  border-spacing: 0;
}

.tbl thead th {
  background: var(--surface2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink2);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);   /* 网格线（对齐参考项目 data-table） */
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  letter-spacing: .2px;
  user-select: none;
}
.tbl thead th:last-child { border-right: none; }
/* 排序列的可点提示 */
.tbl thead th[data-sort] { cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.tbl thead th[data-sort]:hover { background: var(--brand-softer); color: var(--brand); }
.tbl thead th[aria-sort] { color: var(--brand); }

.tbl tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);   /* 网格线 */
  white-space: nowrap;
  transition: background var(--t-fast);
}
.tbl tbody td:last-child { border-right: none; }

.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover { background: var(--brand-softer); }
.tbl tbody tr:hover td { border-bottom-color: #E4E0FB; }
.tbl tbody tr:last-child td { border-bottom: none; }
/* 有操作列的行，悬停时右侧操作区轻微右移，暗示可点 */
.tbl tbody tr:hover .link-act { color: var(--brand); }

.tbl th.num, .tbl td.num { text-align: right; }

/* ---- 单元格行内编辑（人员档案）----
   可编辑格：悬停出现品牌色虚线框，暗示「这里可以点」；
   编辑态：格内嵌 input/select + 显式 ✓/✕ 两键，样式贴合行高不跳动。

   ⚠️ 关键约定（需求：未保存不得丢、不得写日志）：
   编辑态的 ✓ **不是**「保存到后端」，只是把当前值存进本地草稿。
   真正提交后端只有两条路：这一格的 ✓ 之后草稿为空则立即保存，
   或点顶部保存条的「保存全部」。
   两者都不在失焦时发请求。 */
.tbl td.cell-editable { cursor: cell; }
.tbl td.cell-editable:hover,
.tbl td.cell-editable:focus-visible {
  outline: 1.5px dashed var(--brand);
  outline-offset: -3px;
  background: var(--brand-soft);
  cursor: text;
}
.tbl td.cell-editing {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: #fff;
  white-space: nowrap;
}
.tbl td.cell-editing .input--cell {
  width: 100%;
  min-width: 72px;
  padding: 3px 8px;
  font-size: var(--fs-sm);
  height: 28px;
  border-radius: var(--radius-sm);
}
.tbl td.cell-editing select.input--cell { height: 28px; padding: 2px 6px; }
.tbl td[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* 未保存标记：草稿值右上角的小圆点 */
.cell-dirty {
  color: var(--warning);
  font-size: 9px;
  vertical-align: super;
  margin-left: 2px;
  cursor: help;
}

/* ---- 未保存草稿条 ---- */
.draftbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s3);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid #FDE68A;
  border-radius: var(--radius);
}
.draftbar[hidden] { display: none; }
.draftbar__dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--warning);
}
.draftbar__txt { flex: 1; min-width: 0; }
.draftbar__acts { display: flex; gap: 6px; flex: none; }
.draftbar .btn { padding: 4px 12px; font-size: 12px; }

/* ============ 按钮 ============ */
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover {
  background: var(--brand-softer);
  border-color: #C7D2FE;
  color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn--primary {
  background: linear-gradient(135deg, #6366F1 0%, var(--brand) 60%, #7C3AED 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(79, 70, 229, .34);
}
.btn--danger {
  background: var(--alert);
  border-color: var(--alert);
  color: #fff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .26);
}
.btn--danger:hover { background: var(--alert-dim); border-color: var(--alert-dim); color: #fff; }
.btn--sm { padding: 5px 11px; font-size: var(--fs-sm); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 行内文字操作：默认低调，悬停显形 */
.link-act {
  color: var(--ink2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 2px 0;
  font-family: inherit;
  transition: color var(--t-fast);
}
.link-act:hover { color: var(--brand); text-decoration: underline; }
.link-act--danger { color: var(--alert); }
.link-act--danger:hover { color: var(--alert-dim); }

/* ============ 表单 ============ */
.field { margin-bottom: var(--s4); }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 6px;
}
.input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover { border-color: #CBD5E1; }
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.input:disabled { background: var(--surface2); color: var(--ink3); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 3px var(--alert-soft); }
select.input { cursor: pointer; }
.field__hint { font-size: var(--fs-xs); color: var(--ink3); margin-top: 5px; line-height: 1.5; }
.field__req { color: var(--alert); margin-left: 2px; }

/* ============ 占位符（绝不用假数据）============ */
.placeholder {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink3);
  background: var(--surface2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}

/* ============ 空状态 ============ */
.empty {
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--ink3);
  font-size: var(--fs-md);
}
.empty__hint { font-size: var(--fs-sm); color: var(--ink3); margin-top: 6px; }
.empty__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-softer) 0%, var(--surface2) 100%);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--brand);
  opacity: .85;
}
.empty__act { margin-top: var(--s4); display: flex; gap: var(--s2); justify-content: center; }

/* ============ 骨架屏 ============ */
.skel {
  display: block;
  height: 11px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface3) 25%, #E3E9F2 37%, var(--surface3) 63%);
  background-size: 400% 100%;
  animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skel-row { display: flex; gap: var(--s3); align-items: center; padding: 9px 14px; }
.skel-row .skel { flex: 1; }
.skel-row .skel--short { flex: 0 0 60px; }
.skel-row .skel--mid   { flex: 0 0 100px; }

/* ============ 加载遮罩（局部，不整页变白）========== */
.spinner {
  width: 15px; height: 15px;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.is-busy { position: relative; pointer-events: none; opacity: .6; }

/* ============ 屏幕阅读器专用 ============ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 键盘聚焦时的跳转链接：Tab 一下就能看见 */
.skip-link {
  position: fixed;
  left: var(--s3);
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: top var(--t-base);
}
.skip-link:focus { top: var(--s3); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01ms !important; }
  .btn:hover { transform: none !important; }
}