:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --line: #e3e6ea;
  --line-strong: #cfd4da;
  --text: #1f2329;
  --text-2: #5c6470;
  --text-3: #8b939e;
  --accent: #2b6cd4;
  --accent-soft: #eaf1fc;
  --danger: #d9483b;
  --danger-soft: #fdecea;
  --warn: #c07800;
  --warn-soft: #fff6e5;
  --ok: #1f9254;
  --ok-soft: #e9f6ee;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* 标题栏：标题一行、页签一行，两行都居中（整条标题栏左右对称） */
header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
}

header h1 {
  font-size: 16px;
  margin: 0;
  padding: 13px 0 3px;
  font-weight: 600;
  letter-spacing: .5px;
  white-space: nowrap;
}

.tabs { display: flex; gap: 4px; }

.tabs button {
  border: 0;
  background: transparent;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tabs button:hover { color: var(--text); }

.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

main { padding: 20px 24px 60px; max-width: 1440px; margin: 0 auto; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.panel h2 {
  font-size: 15px;
  margin: 0 0 14px;
  font-weight: 600;
}

.panel h2 .sub { font-weight: 400; color: var(--text-3); font-size: 13px; margin-left: 8px; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.toolbar .grow { flex: 1; }

label.field { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
label.field > span { white-space: nowrap; }

input[type=text], input[type=month], input[type=number], input[type=date], select, textarea {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  outline: none;
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }

button.btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 14px;
  cursor: pointer;
}

button.btn:hover { border-color: var(--accent); color: var(--accent); }

button.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 500;
}

button.btn.primary:hover { background: #245cb5; color: #fff; }

button.btn.danger { color: var(--danger); border-color: #ecc2bd; }
button.btn.danger:hover { background: var(--danger-soft); }

button.btn:disabled { opacity: .5; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td {
  border-bottom: 1px solid var(--line);
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
}

th {
  background: #f7f8fa;
  color: var(--text-2);
  font-weight: 600;
  position: sticky;
  top: 59px;
}

th[data-stat-sort], th[data-att-sort] { cursor: pointer; user-select: none; }
th[data-stat-sort]:hover, th[data-att-sort]:hover { background: #eef2f7; color: var(--text); }
th[data-dir="asc"]::after  { content: " ↑"; color: var(--accent); }
th[data-dir="desc"]::after { content: " ↓"; color: var(--accent); }
th.sorted { color: var(--accent); }

tbody tr:hover { background: #fafbfc; }

.drag-cell {
  width: 38px;
  text-align: center;
  color: var(--text-3);
  font-size: 18px;
  user-select: none;
}
.roster-draggable .drag-cell { cursor: grab; }
.roster-draggable.dragging { opacity: .45; }
.roster-draggable.drag-over { border-top: 2px solid var(--accent); }

.table-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap table { border: 0; }
.table-wrap th { top: 0; }

/* 花名册列表：高度按视口自适应，整页不再出现第二个滚动条，分页条始终在屏幕内 */
.table-wrap.roster-table { margin-top: 10px; max-height: calc(100vh - 320px); min-height: 180px; }

/* 操作列（编辑 / 退场 / 删除）固定在右侧：列多要横向滚动时，不用拉到最后才能点。
   固定列必须自带背景，否则横向滚动时下面的单元格会透出来，所以按行状态逐个补齐。 */
.roster-table th:last-child,
.roster-table td:last-child {
  position: sticky;
  right: 0;
  background: #fff;
  /* border-collapse: collapse 下 sticky 单元格的 border 不渲染，用阴影画这条分隔线 */
  box-shadow: -1px 0 0 0 var(--line);
}
/* 表头要压在固定操作列之上（两者都是 sticky，不抬 z-index 的话表体那列会盖住表头） */
.roster-table th { z-index: 2; }
.roster-table th:last-child { top: 0; z-index: 3; background: #f7f8fa; }
.roster-table tr.row-exited td:last-child { background: #fafafa; }
.roster-table tr.row-new td:last-child { background: #eef7ff; }
.roster-table tr.row-new.row-exited td:last-child { background: #f2f7fb; }

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
}

.tag.error { background: var(--danger-soft); color: var(--danger); }
.tag.warn  { background: var(--warn-soft);   color: var(--warn); }
.tag.info  { background: var(--accent-soft); color: var(--accent); }
.tag.ok    { background: var(--ok-soft);     color: var(--ok); }
.tag.gray  { background: #eef0f2;            color: var(--text-2); }

/* 身份证号统一用等宽字体，便于人工核对 */
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }

.bad-id { color: var(--danger); font-weight: 600; }

.cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 132px;
  background: #fff;
}

.card .k { color: var(--text-3); font-size: 12px; }
.card .v { font-size: 20px; font-weight: 600; margin-top: 2px; }

.hint { color: var(--text-3); font-size: 13px; }
.hint.warn { color: var(--warn); }
.hint.error { color: var(--danger); }

.drop {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  color: var(--text-3);
  cursor: pointer;
  background: #fbfcfd;
}

.drop:hover, .drop.over { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* 证件识别框：可点选、可粘贴、可拖拽 */
.drop.ocr { padding: 12px; cursor: pointer; outline: none; }
.drop.ocr:focus, .drop.ocr.active {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  color: var(--accent);
}
.drop.ocr .drop-t { font-weight: 600; color: var(--text); }
.drop.ocr.active .drop-t, .drop.ocr:focus .drop-t { color: var(--accent); }
.drop.ocr .drop-h { font-size: 12px; margin: 4px 0 8px; line-height: 1.5; }
.drop.ocr .thumb {
  display: block;
  max-width: 100%;
  max-height: 130px;
  margin: 8px auto 0;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: #22272e;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  z-index: 100;
  max-width: 460px;
}

.toast.error { background: var(--danger); }
.toast.ok { background: var(--ok); }

.modal-mask {
  position: fixed; inset: 0;
  background: rgba(20,24,30,.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}

.modal {
  background: #fff;
  border-radius: 10px;
  width: 780px;
  max-width: 94vw;
  max-height: 90vh;
  overflow: auto;
  padding: 22px 24px;
}

.modal h3 { margin: 0 0 16px; font-size: 16px; }

/* 花名册编辑弹窗：宽屏左右双栏 —— 左边填字段、右边证件识别与核验，一屏内不用滚动 */
.modal.modal-roster {
  width: 1080px;
  max-width: 96vw;
  max-height: 94vh;
  padding: 16px 20px 14px;
}
.modal.modal-roster h3 { margin: 0 0 10px; font-size: 15px; }
.modal-split { display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 18px; align-items: start; }
.modal-split .split-side {
  border-left: 1px solid var(--line);
  padding-left: 16px;
  max-height: calc(94vh - 130px);
  overflow: auto;
}
.modal-split .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.modal-split .form-grid label { margin-bottom: 2px; line-height: 1.35; }
.modal-split .form-grid input, .modal-split .form-grid select { padding: 5px 9px; }
.modal-split .side-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.modal-split .split-side .drop.ocr { padding: 9px 10px; }
.modal-split .split-side .drop.ocr .thumb { max-height: 92px; }
.modal-roster .modal-actions { margin-top: 12px; }
@media (max-width: 1040px) {
  .modal-split { grid-template-columns: 1fr; gap: 10px; }
  .modal-split .split-side {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 10px;
    max-height: none;
  }
}

.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }

.modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }

.split { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

.hidden { display: none !important; }

.section-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 16px 0 8px; }

.file-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.file-row .name { color: var(--text-3); font-size: 13px; }
.file-row .name.has { color: var(--ok); }

/* 已退场人员行：变灰 */
tr.row-exited td { color: #999; background: #fafafa; }
tr.row-exited td b { color: #777; }
/* 当月新加进花名册的人（按入册日期，不是进场日期）。放在 row-exited 之后，优先级更高 */
tr.row-new td { background: #eef7ff; }
tr.row-new td b { color: #0b5cad; }
tr.row-new.row-exited td { background: #f2f7fb; }
.tag.new { background: #e0f0ff; color: #0f6fd1; }

/* 统计信息清单：不是我们团队的行淡红、有效出勤为 0 的行淡化 */
tr.row-out td { background: #fff8f7; }
tr.row-out td b { color: var(--danger); }
tr.row-muted td { color: var(--text-3); }
tr.row-muted td b { color: var(--text-2); }

/* 导入记录列表：整行可点，点了在下面展开这一批的明细；
   操作列（删除按钮）别跟着变手型，免得看着像整行都在删 */
tr.row-click { cursor: pointer; }
tr.row-click td:last-child { cursor: default; }
tr.row-active td { background: #eef7ff; }
tr.row-active td b { color: #0b5cad; }
tr.row-active:hover td { background: #e3f1ff; }

/* 导入详情里的两块（统计信息 / 考勤表）分隔 */
.sub-block { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 6px; }
.sub-block:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

/* 导入详情：可折叠区块（考勤数据表 / 计薪明细） */
details.fold {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-top: 10px;
}
details.fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-radius: var(--radius);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: "▸";
  color: var(--text-3);
  font-size: 12px;
  line-height: 1;
  flex: none;
}
details.fold[open] > summary::before { content: "▾"; }
details.fold > summary:hover { background: #fafbfc; }
details.fold .fold-t { font-size: 14px; font-weight: 600; color: var(--text); }
details.fold .fold-sub { font-weight: 400; color: var(--text-3); font-size: 12px; }
details.fold .fold-body { padding: 2px 14px 14px; border-top: 1px solid var(--line); }
details.fold .fold-body .cards { margin-top: 12px; }

/* 字典维护：工种行 */
.dict-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fbfcfd;
}
.dict-row .dict-idx {
  width: 26px; text-align: right; color: var(--text-3);
  font-size: 12px; flex: none;
}
.dict-row input[type="text"] { width: 100%; max-width: 260px; }
.dict-row .dict-job { font-weight: 600; }
.dict-row button.btn { padding: 3px 10px; font-size: 12px; flex: none; }

/* 分页条 */
.pager { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pager .field { margin: 0; }
.pager .field > span { margin-right: 4px; }

/* 核验通过后锁定的输入框：能看不能改 */
input.locked, select.locked {
  background: #eef1f4;
  color: var(--text-2);
  cursor: not-allowed;
}
input.locked:focus, select.locked:focus { outline: none; }
button.btn.locked, button.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- 登录 */
/* 只在开了登录（配了账号）时用到；没配账号时这几条样式都不参与 */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-box {
  width: 100%;
  max-width: 320px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 22px;
  box-shadow: 0 8px 28px rgba(31, 35, 41, .07);
}

.login-box h1 { margin: 0; font-size: 18px; font-weight: 600; }
.login-sub { margin: 4px 0 22px; color: var(--text-3); font-size: 13px; }

.login-box label { display: block; margin-bottom: 14px; }
.login-box label > span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-2); }
/* 用 input 统管两种：全局只给 text 类输入框定义了边框，password 没有 */
.login-box input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}
.login-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.login-box button.btn { width: 100%; padding: 10px; margin-top: 4px; }

.login-msg { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--danger); text-align: center; }
.login-tip { margin-top: 6px; font-size: 12px; color: var(--text-3); text-align: center; }

/* 顶栏右上角：当前账号 + 退出（只在开了登录时显示）
   绝对定位 —— 标题和页签都居中了，它不能再占着文档流把它们挤偏 */
header .whoami {
  position: absolute;
  right: 24px;
  top: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.whoami button.btn { padding: 5px 12px; font-size: 13px; }