/* 建筑工地人员管理系统 — 移动端优先样式
   工地场景:强光、戴手套、屏幕脏 -> 高对比、大字号、大点击区(最小 48px) */
:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #12181f;
  --ink2: #5b6874;
  --line: #d9e0e6;
  --brand: #12639b;
  --brand-ink: #ffffff;
  --red: #c62828;
  --red-bg: #fdecec;
  --yellow: #a06a00;
  --yellow-bg: #fff6e0;
  --green: #1b7a3d;
  --green-bg: #e8f6ee;
  --tap: 48px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.topbar .brand { font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.topbar .who { font-size: 14px; opacity: .92; }

.wrap { padding: 16px 14px calc(var(--tap) + 48px); max-width: 720px; margin: 0 auto; }

/* ---- 人员多选勾选框(培训「被培训人」/ 交底「被交底人」共用) ----
   上面的 input { appearance: none } 会把浏览器原生的勾选标记一起去掉,
   结果手机上勾了人却"看不出勾上没有":方框点下去没有任何变化。
   所以这里把方框和对钩显式画出来 —— 勾选前灰框、勾选后蓝底白钩,整行也变色。 */
.wpick {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #eef2f5; cursor: pointer;
}
/* 筛选时用 hidden 属性隐藏没匹配上的人 —— 必须显式写这条:
   浏览器默认的 [hidden]{display:none} 会被上面的 .wpick{display:flex} 盖住
   (作者样式优先级高于浏览器默认样式),表现就是"输入筛选词名单没变"。 */
.wpick[hidden] { display: none; }
.wpick input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 26px; height: 26px; min-height: 26px;
  margin: 0; padding: 0; background: #fff;
  border: 2px solid #b9c6d2; border-radius: 7px; position: relative;
}
.wpick input[type=checkbox]:checked { background: var(--brand); border-color: var(--brand); }
.wpick input[type=checkbox]:checked::after {
  content: ""; position: absolute; left: 7px; top: 2px;
  width: 6px; height: 13px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
/* 勾上的人整行淡蓝底 —— 一排人里一眼看出勾了谁
   (:has 老浏览器不支持时只是少这个提示,不影响对钩) */
.wpick:has(input[type=checkbox]:checked) { background: #eef6fd; }
/* 「已选 N 人」在有人被勾上时变蓝加粗,顺带再确认一次勾选生效了 */
#wcount.on { color: var(--brand); font-weight: 700; }

/* ---- 底部 Tab 导航 ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; min-height: var(--tap); display: flex; align-items: center; justify-content: center;
  color: var(--ink2); text-decoration: none; font-size: 15px; font-weight: 600;
  border-top: 3px solid transparent; padding: 10px 4px;
}
.tabbar a.on { color: var(--brand); border-top-color: var(--brand); }

/* ---- 卡片 ---- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.card h2 { margin: 0 0 10px; font-size: 15px; color: var(--ink2); font-weight: 700; }

/* ---- 看板指标 ---- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-left-width: 6px;
  border-radius: 12px; padding: 12px 14px;
}
.metric .n { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric .k { font-size: 14px; color: var(--ink2); margin-top: 2px; }
.metric.red    { border-left-color: var(--red);    background: var(--red-bg); }
.metric.yellow { border-left-color: var(--yellow); background: var(--yellow-bg); }
.metric.ok     { border-left-color: var(--green); }
.metric.info   { border-left-color: var(--brand); }
.metric.red .n    { color: var(--red); }
.metric.yellow .n { color: var(--yellow); }

/* ---- 表单控件(大按钮、易点按) ---- */
label { display: block; font-size: 14px; font-weight: 700; color: var(--ink2); margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; min-height: var(--tap); padding: 11px 12px; font-size: 17px;
  font-family: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; appearance: none;
}
input[type=number] { font-variant-numeric: tabular-nums; }
textarea { min-height: 88px; }
input:focus, select:focus, textarea:focus { outline: 3px solid #bcd8ee; border-color: var(--brand); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); padding: 14px; margin-top: 16px;
  font-size: 18px; font-weight: 700; font-family: inherit;
  background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 12px; text-decoration: none; cursor: pointer;
}
.btn.ghost { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.btn.danger { background: var(--red); }
.btn.sm { font-size: 15px; min-height: 42px; padding: 10px; margin-top: 0; }

/* ---- 列表 ---- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list a.it {
  display: block; padding: 13px 4px; text-decoration: none; color: inherit;
}
.it .l1 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.it .l2 { font-size: 14px; color: var(--ink2); margin-top: 3px; }
.it .idc { font-variant-numeric: tabular-nums; letter-spacing: .3px; }

.tag {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.6;
  padding: 1px 8px; border-radius: 999px; border: 1px solid;
}
.tag.red    { color: var(--red);    background: var(--red-bg);    border-color: #f0b9b9; }
.tag.yellow { color: var(--yellow); background: var(--yellow-bg); border-color: #eed49a; }
.tag.green  { color: var(--green);  background: var(--green-bg);  border-color: #b4ddc4; }
.tag.gray   { color: var(--ink2);   background: #eef2f5;         border-color: var(--line); }
.tag.blue   { color: var(--brand);  background: #e8f2fa;         border-color: #bcd8ee; }

.badge-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.badge-dot.red { background: var(--red); }
.badge-dot.yellow { background: #e0a800; }

/* ---- 详情表 ---- */
.kv { display: grid; grid-template-columns: 40% 1fr; gap: 0; }
.kv dt { color: var(--ink2); font-size: 15px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv dd { margin: 0; font-size: 16px; padding: 8px 0; border-bottom: 1px solid var(--line);
         text-align: right; word-break: break-all; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

.alertbox { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-weight: 600; }
.alertbox.red    { background: var(--red-bg);    color: var(--red);    border: 1px solid #f0b9b9; }
.alertbox.yellow { background: var(--yellow-bg); color: var(--yellow); border: 1px solid #eed49a; }
.alertbox.green  { background: var(--green-bg);  color: var(--green);  border: 1px solid #b4ddc4; }

.empty { text-align: center; color: var(--ink2); padding: 32px 12px; }
.muted { color: var(--ink2); font-size: 14px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
a.plain { color: var(--brand); }

/* ---- 记录分段(详情页四类记录) ----
   渐进增强:默认全部展开(无 JS 时就是一路往下滚),JS 生效才切成 Tab 式 */
.seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 2px; }
.seg button, .seg a {
  flex: 1 0 auto; white-space: nowrap; margin: 0; padding: 9px 14px;
  font-size: 15px; font-weight: 700; font-family: inherit; color: var(--ink2);
  background: #eef2f5; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; text-align: center; display: block;
}
.seg button.on, .seg a.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.seg-panel[hidden] { display: none; }

details.exitbox { margin-top: 12px; }
details.exitbox > summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font-size: 17px; font-weight: 700; border-radius: 12px;
}
details.exitbox > summary::-webkit-details-marker { display: none; }

/* ---- 现场核验折叠卡(并入人员页) ---- */
details.verifybox { margin-bottom: 12px; }
details.verifybox > summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--brand-ink); font-size: 17px; font-weight: 700;
  border-radius: 12px;
}
details.verifybox > summary::-webkit-details-marker { display: none; }

/* 非链接型列表项(培训/交底记录没有独立详情页,整行不可点) */
.list .it { display: block; padding: 13px 4px; }

/* ---- 报表预览表格 ----
   手机上表宽必然超屏,所以横向滚动 + 首行吸附。
   表头写在样式表里(模板不要内联),原因见 README 第八节第 13 条。 */
.rtbl {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.rtbl table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rtbl th, .rtbl td {
  padding: 9px 11px; border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap;
}
.rtbl th {
  position: sticky; top: 0; z-index: 1;
  background: #f2f6f9; color: var(--ink2); font-weight: 700;
}
.rtbl tbody tr:nth-child(even) { background: #fafcfd; }
.rtbl tr:last-child td { border-bottom: 0; }

/* ---- 一行放多个按钮(报表筛选行/导出行) ----
   .btn 在手机上是整行宽的,放一排按钮时会各占一行、拉得很长;
   把这些按钮放进 .btnrow 就自动排成一行并均分宽度。 */
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btnrow .btn { flex: 1 1 auto; width: auto; }
.btnrow.gap { margin-top: 10px; }

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}