/* ============================================================
   加班/请假记录系统 · 设计令牌
   方向：车间值班表 + 仪表读数。汉字用系统黑体保持中性，
   所有时间与时长用等宽表盘体放大 —— 数字才是这个产品的主角。
   这一版把墨色压深、阴影收紧，往"精密仪器面板"的方向再走一步，
   而不是常见的暖调卡片风——冷静、克制、数字说话。

   字体：内嵌"阿里巴巴普惠体"三个字重（400/500/700），永久免费商用，
   不需要授权申请。选它是因为局域网设备不能连外部字体 CDN，
   而系统自带的微软雅黑常规字重偏细，达不到想要的质感；
   姓名、备注都是用户随便打的字，只嵌常见系统字体覆盖不到的话
   会出现"标签用新字体、姓名又变回雅黑"的割裂感，所以嵌的是
   覆盖 27000+ 汉字的全字库版本，不是精简子集。
   ============================================================ */

@font-face {
  font-family: "PuHuiTi";
  src: url("/fonts/puhuiti-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PuHuiTi";
  src: url("/fonts/puhuiti-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PuHuiTi";
  src: url("/fonts/puhuiti-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #e7ebf0;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --ink: #0a1420;
  --ink-2: #4e5f74;
  --ink-3: #8497ac;
  --line: #d6dee6;
  --line-strong: #b6c3d1;

  --brand: #1a3252;
  --brand-2: #24456d;
  --brand-ink: #ffffff;

  /* 加班＝进账（青） 请假＝支出（赭） 明度也拉开，色觉障碍同样可辨 */
  --ot: #0b6b5c;
  --ot-soft: #dfeeeb;
  --lv: #9a4c16;
  --lv-soft: #f7ead9;

  --warn: #ab2029;
  --ok: #0b6b5c;

  /*
   * 字体栈：内嵌的 PuHuiTi 放最前面，字体文件加载完之前先用系统字体
   * 顶上（font-display: swap 保证不会白屏等字体）。系统字体作为兜底：
   * Windows 上"Microsoft YaHei UI"是给界面用的裁切版本，
   * 小字号下比普通"Microsoft YaHei"更扎实，优先匹配它。
   */
  --sans: "PuHuiTi", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  /*
   * --mono 专给数字用，但 .num 经常套在"8月27日 周四 17:00"这类
   * 中英文混排的整串文本上——mono 字体本身不含汉字字形，浏览器会
   * 按字符逐个找下一个能显示的字体，这时候如果链条里没有 PuHuiTi，
   * 汉字就会掉回系统默认字体，跟页面其它地方对不上。
   * 把 PuHuiTi 接在等宽字体后面：数字照样用等宽对齐，
   * 汉字自动落到 PuHuiTi，不用改动任何标记结构。
   */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "DejaVu Sans Mono", monospace, "PuHuiTi", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

  --r: 10px;
  --r-lg: 14px;
  /* 阴影收紧：小范围高精度投影 + 极淡的环境光晕，不做大团柔光，更像刻出来的而不是漂浮的 */
  --shadow: 0 1px 1px rgba(10, 20, 32, 0.06), 0 3px 10px rgba(10, 20, 32, 0.08);
  --shadow-lg: 0 2px 4px rgba(10, 20, 32, 0.07), 0 10px 28px rgba(10, 20, 32, 0.12);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/*
 * 切换菜单后顶栏"跳一下"，根源通常不是顶栏本身，而是滚动条：
 * 不同页面内容高度不一样，有的要滚动条有的不用，
 * 滚动条一出现/消失，可视区域宽度就跟着变，固定在顶部的东西
 * 看起来就像挪动了位置。这里强制滚动条始终占位，
 * 不管当前页面用不用得上，宽度永远一致。
 */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.01em; /* 中文正文稍微松一点字距，比挤在一起更显精致 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* ---------------- 布局 ---------------- */

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  padding-bottom: calc(64px + var(--safe-b));
}
.app--wide { max-width: 1000px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.topbar .who {
  margin-left: auto;
  font-size: 13px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar button {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.topbar button:active { background: rgba(255, 255, 255, 0.26); }

.wrap { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.view { display: none; }
.view.on { display: block; }
/* 页面容器同时是 .wrap 时保持纵向 flex，卡片间距才生效 */
.wrap.on { display: flex; }

/* ---------------- 卡片 ---------------- */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-hd {
  padding: 12px 14px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.card-hd h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.card-hd .sub { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.card-bd { padding: 12px 14px 14px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------------- 本月合计（signature 区） ---------------- */

.ledger { display: grid; grid-template-columns: 1fr 1fr; }
.ledger > div {
  padding: 14px;
  border-top: 3px solid transparent;
}
.ledger .ot { border-top-color: var(--ot); background: var(--ot-soft); }
.ledger .lv { border-top-color: var(--lv); background: var(--lv-soft); }
.ledger .lab { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
.ledger .ot .lab { color: var(--ot); }
.ledger .lv .lab { color: var(--lv); }
.ledger .big {
  font-size: 34px;
  line-height: 1.05;
  font-weight: 700;
  margin-top: 4px;
}
.ledger .ot .big { color: var(--ot); }
.ledger .lv .big { color: var(--lv); }
.ledger .unit { font-size: 13px; font-weight: 500; margin-left: 3px; }
.ledger .note { font-size: 11px; color: var(--ink-2); margin-top: 4px; }

/* ---------------- 时间刻度条（signature 元件） ---------------- */

.rail-box { margin-top: 10px; }
.rail {
  position: relative;
  height: 26px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.rail .tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.rail .work {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(31, 58, 95, 0.05) 0 4px,
    transparent 4px 8px
  );
}
.rail .seg {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  min-width: 3px;
}
.rail .seg.ot { background: var(--ot); }
.rail .seg.lv { background: var(--lv); }
.rail-legend {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 3px;
}
.rail-day {
  font-size: 11px;
  color: var(--ink-2);
  margin: 8px 0 3px;
}

/* 列表行里的迷你刻度条 */
.rail.mini { height: 12px; border-radius: 3px; }
.rail.mini .seg { top: 2px; bottom: 2px; border-radius: 2px; }

/* ---------------- 按钮 ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 16px;
  border-radius: var(--r);
  cursor: pointer;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.btn-ot { background: var(--ot); border-color: var(--ot); color: #fff; font-weight: 700; }
.btn-lv { background: var(--lv); border-color: var(--lv); color: #fff; font-weight: 700; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-danger { color: var(--warn); border-color: #e6c3c5; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* 首页两个大动作 */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.action {
  background: var(--surface);
  border: 0;
  border-left: 4px solid var(--ot);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 16px 14px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  min-height: 84px;
}
.action.lv { border-left-color: var(--lv); }
.action .t { font-size: 17px; font-weight: 700; display: block; }
.action.ot .t { color: var(--ot); }
.action.lv .t { color: var(--lv); }
.action .d { font-size: 12px; color: var(--ink-2); margin-top: 2px; display: block; }

/* ---------------- 表单 ---------------- */

.field { margin-bottom: 14px; }
.field > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}
input[type="text"], input[type="date"], input[type="time"], input[type="month"],
input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* iOS 聚焦不缩放 */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 10px 12px;
  min-height: 44px;
}
input[type="date"], input[type="time"], input[type="month"], .in-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.err {
  font-size: 13px;
  color: var(--warn);
  background: #fdecec;
  border-left: 3px solid var(--warn);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 12px;
}

/* 分段控件 */
.seg-ctl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 3px;
  gap: 3px;
}
.seg-ctl button {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 42px;
}
.seg-ctl button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); }
.seg-ctl button[aria-pressed="true"][data-type="overtime"] { color: var(--ot); }
.seg-ctl button[aria-pressed="true"][data-type="leave"] { color: var(--lv); }

/* 标签选择 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
}
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
.chip.ot[aria-pressed="true"] { background: var(--ot); border-color: var(--ot); }
.chip.lv[aria-pressed="true"] { background: var(--lv); border-color: var(--lv); }

/* 实时时长读数 */
.readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.readout .k { font-size: 13px; color: var(--ink-2); }
.readout .v { font-size: 30px; font-weight: 700; margin-left: auto; }
.readout.ot .v { color: var(--ot); }
.readout.lv .v { color: var(--lv); }
.readout .u { font-size: 13px; color: var(--ink-2); }
.readout.bad .v { color: var(--warn); font-size: 15px; font-weight: 500; }

/* ---------------- 记录列表 ---------------- */

.list { display: flex; flex-direction: column; gap: 8px; }
.rec {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--ot);
  padding: 11px 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  border-top: 0; border-right: 0; border-bottom: 0;
}
.rec.lv { border-left-color: var(--lv); }
.rec.voided { opacity: 0.5; }
.rec-top { display: flex; align-items: baseline; gap: 8px; }
.rec-cat { font-size: 13px; font-weight: 500; }
.rec.ot .rec-cat { color: var(--ot); }
.rec.lv .rec-cat { color: var(--lv); }
.rec-dur { margin-left: auto; font-size: 19px; font-weight: 700; }
.rec.ot .rec-dur { color: var(--ot); }
.rec.lv .rec-dur { color: var(--lv); }
.rec-dur .u { font-size: 11px; color: var(--ink-2); font-weight: 400; margin-left: 2px; }
.rec-time { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.rec-remark {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  background: var(--surface-2);
  white-space: nowrap;
}
.badge.pending { color: #8a5a00; background: #fff4dd; border-color: #f0d9a8; }
.badge.approved { color: var(--ok); background: var(--ot-soft); border-color: #bfe0da; }
.badge.rejected { color: var(--warn); background: #fdecec; border-color: #eec6c8; }
.badge.voided { color: var(--ink-3); text-decoration: line-through; }

/* 汇总条 */
.totbar {
  display: flex;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  padding: 11px 13px;
}
.totbar div { flex: 1; }
.totbar .k { font-size: 11px; opacity: 0.65; }
.totbar .v { font-size: 20px; font-weight: 700; }
.totbar .v.ot { color: #6ee0cd; }
.totbar .v.lv { color: #f3b479; }
.totbar .u { font-size: 11px; opacity: 0.65; margin-left: 2px; }

.empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--ink-3);
  font-size: 14px;
}
.empty strong { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }

/* ---------------- 底部导航 ---------------- */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
  z-index: 40;
}
.tab {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-3);
  padding: 8px 0 9px;
  cursor: pointer;
  position: relative;
}
.tab .ic { display: block; font-size: 17px; line-height: 1.2; }
.tab[aria-selected="true"] { color: var(--brand); font-weight: 500; }
.tab .dot {
  position: absolute;
  top: 6px;
  right: 50%;
  margin-right: -18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
}

/* ---------------- 弹层 ---------------- */

.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 46, 0.45);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  background: var(--surface);
  width: 100%;
  max-width: 480px;
  border-radius: 16px 16px 0 0;
  max-height: 88vh;
  overflow: auto;
  padding: 16px 16px calc(16px + var(--safe-b));
  animation: rise 0.18s ease-out;
}
@keyframes rise { from { transform: translateY(14px); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .btn:active { transform: none; }
}
/* 弹层标题里会拼接员工姓名，显式用 500 字重——
   700 字重的字体做了精简（只含界面固定文案），姓名落上去会掉字体 */
.sheet h3 { margin: 0 0 12px; font-size: 17px; font-weight: 500; }
.sheet-hd { display: flex; align-items: center; margin-bottom: 12px; }
.sheet-hd h3 { margin: 0; }
.sheet-hd .x {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.kv { display: grid; grid-template-columns: 76px 1fr; gap: 6px 10px; font-size: 14px; margin-bottom: 14px; }
.kv dt { color: var(--ink-3); font-size: 13px; }
.kv dd { margin: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 80;
  box-shadow: 0 6px 20px rgba(20, 32, 46, 0.3);
  max-width: 90%;
  text-align: center;
}
.toast.bad { background: var(--warn); }

/* ---------------- 登录 ---------------- */

.login { padding: 22px 18px; }

/* ---------------- 管理端表格 ---------------- */

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
table.t th {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
table.t td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
table.t tfoot td {
  font-weight: 700;
  background: var(--surface-2);
  border-top: 2px solid var(--ink);
  border-bottom: 0;
}
table.t .ot { color: var(--ot); }
table.t .lv { color: var(--lv); }
table.t tr.void td { opacity: 0.45; }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat-box {
  background: var(--surface);
  border-radius: var(--r);
  padding: 12px 13px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--line-strong);
}
.stat-box.ot { border-top-color: var(--ot); }
.stat-box.lv { border-top-color: var(--lv); }
.stat-box .k { font-size: 12px; color: var(--ink-2); }
.stat-box .v { font-size: 26px; font-weight: 700; }
.stat-box.ot .v { color: var(--ot); }
.stat-box.lv .v { color: var(--lv); }
.stat-box .u { font-size: 12px; color: var(--ink-3); margin-left: 2px; }

.diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.diff .box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
}
.diff .box .lab { font-size: 11px; color: var(--ink-3); }
.diff .box.after { background: var(--ot-soft); border-color: #bfe0da; }
.diff .arrow { color: var(--ink-3); font-size: 17px; }

@media (max-width: 520px) {
  .diff { grid-template-columns: 1fr; }
  .diff .arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---------------- 工作时段编辑器 ---------------- */

.seg-row {
  display: grid;
  grid-template-columns: 1fr 108px auto 108px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.seg-row input[type="time"] { min-height: 40px; padding: 8px 10px; }
.seg-row input[type="text"] { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.seg-dash { color: var(--ink-3); text-align: center; }

@media (max-width: 560px) {
  .seg-row { grid-template-columns: 1fr 1fr; grid-template-areas: "name name" "start end" "dash del"; }
  .seg-row input[data-f="name"] { grid-area: name; }
  .seg-row input[data-f="start"] { grid-area: start; }
  .seg-row input[data-f="end"] { grid-area: end; }
  .seg-dash { display: none; }
  .seg-row button { grid-area: del; justify-self: end; }
}

.seg-preview { margin-top: 14px; }
.seg-preview .rail { position: relative; height: 26px; }
.seg-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: var(--brand);
  border-radius: 3px;
  min-width: 2px;
}

/* 默认时间的来源说明：告诉员工这个时间是怎么来的 */
.basis {
  font-size: 12px;
  color: var(--ot);
  background: var(--ot-soft);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 8px 0 0;
}

/* ============================================================
   移动端溢出修复
   根因：grid / flex 子项默认 min-width:auto，而 date / time 输入框
   在 iOS Safari 上有很宽的固有尺寸，撑破容器导致横向滚动。
   ============================================================ */

.pair > *,
.pair-3 > *,
.filters > *,
.rd-add > *,
.seg-row > * {
  min-width: 0;
}

input,
select,
textarea {
  max-width: 100%;
}

/* iOS 上 date/time 控件默认按内容撑开，必须显式压回容器 */
input[type="date"],
input[type="time"],
input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
}

/* 兜底：任何情况下页面都不该出现横向滚动条 */
html,
body {
  overflow-x: hidden;
}

.app {
  overflow-x: clip;
}

/* 表格例外，它本来就该能横向滚 */
.tablewrap {
  max-width: 100%;
}

/* 长备注、长地址不撑破卡片 */
.rec-remark,
.kv dd,
.hint {
  overflow-wrap: anywhere;
}

/* ============================================================
   休息日设置
   ============================================================ */

.rd-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.rd-add .btn {
  min-height: 44px;
  white-space: nowrap;
}

.rd-list {
  margin-top: 14px;
}
.rd-month + .rd-month {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rd-month-hd {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.rd-month-hd .btn {
  margin-left: auto;
  font-size: 12px;
}
.rd-days {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.rd-day {
  display: flex;
  align-items: baseline;
  gap: 4px;
  border: 1px solid var(--lv);
  background: var(--lv-soft);
  color: var(--lv);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 9px 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
}
.rd-day .num {
  font-size: 15px;
  font-weight: 500;
}
.rd-day .w {
  font-size: 11px;
  opacity: 0.75;
}
.rd-day .x {
  font-size: 14px;
  opacity: 0.5;
  margin-left: 2px;
}
.rd-day:hover .x,
.rd-day:active .x {
  opacity: 1;
}

/* ============================================================
   视觉打磨
   ============================================================ */

/* 卡片之间留白更均匀，标题与内容的关系更紧 */
.card-hd {
  padding: 14px 16px 0;
}
.card-bd {
  padding: 12px 16px 16px;
}
.wrap {
  padding: 14px 14px 18px;
  gap: 14px;
}

/* 顶栏加一道细分隔，滚动时和内容不糊在一起 */
.topbar {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

/* 本月合计：数字再放大一档，两栏中间加分隔线 */
.ledger .big {
  font-size: 38px;
  letter-spacing: -0.03em;
}
.ledger .ot {
  border-right: 1px solid var(--line);
}
.ledger .note {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 6px;
  opacity: 0.85;
}

/* 首页两个大按钮：加大点击区，箭头暗示可进入 */
.action {
  padding: 18px 16px;
  min-height: 92px;
  transition: box-shadow 0.15s ease;
}
.action:active {
  box-shadow: 0 0 0 2px currentColor inset;
}
.action .t {
  font-size: 18px;
}

/* 实时时长读数：这是登记页最重要的信息，给足分量 */
.readout {
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border-width: 1px;
}
.readout .v {
  font-size: 34px;
  letter-spacing: -0.03em;
}
.readout.bad {
  background: #fdecec;
  border-color: #eec6c8;
}
.readout.bad .v {
  font-size: 14px;
  line-height: 1.45;
  text-align: right;
}

/* 依据说明：紧跟读数，说明这个数字是怎么来的 */
.basis {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ot);
  background: var(--ot-soft);
  border-radius: 8px;
  padding: 7px 10px;
}

/* 记录行：左侧色条更明显，行高更舒展 */
.rec {
  padding: 12px 13px;
  border-left-width: 5px;
}
.rec-dur {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.rec + .rec {
  margin-top: 0;
}

/* 合计条：三段等宽，数字对齐 */
.totbar {
  padding: 12px 14px;
  border-radius: var(--r-lg);
}
.totbar .v {
  font-size: 22px;
  letter-spacing: -0.02em;
}

/* 标签与按钮：触摸目标不小于 40px，指尖友好 */
.chip {
  min-height: 40px;
  padding: 8px 15px;
}
.btn-sm {
  min-height: 38px;
}

/* 表单标签与输入的间距收紧，一组一组更成块 */
.field {
  margin-bottom: 16px;
}
.field > label {
  margin-bottom: 7px;
}

/* 管理端筛选区在窄屏改成两列，不再挤成一条 */
@media (max-width: 560px) {
  .filters {
    grid-template-columns: 1fr 1fr;
  }
  .filters > div:has(#f-user),
  .filters > div:has(#c-lcat) {
    grid-column: 1 / -1;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stat-box .v {
    font-size: 22px;
  }
}

@media (max-width: 380px) {
  .ledger .big {
    font-size: 32px;
  }
  .readout .v {
    font-size: 28px;
  }
  .action .t {
    font-size: 16px;
  }
}

/* 弹层内的表单同样受窄屏约束 */
.sheet .pair {
  gap: 8px;
}

/* 底部导航：选中态更明确 */
.tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  background: var(--brand);
  border-radius: 0 0 2px 2px;
}

/* ============================================================
   人员管理 / 通知设置补充样式
   ============================================================ */

.pw-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.pw-row .btn {
  white-space: nowrap;
}

.notify-channel {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}
.notify-channel:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 4px;
}
.notify-channel .eyebrow {
  margin-bottom: 10px;
}

/* ============================================================
/* ============================================================
   登录页品牌区：纯文字，不用图标方块
   ============================================================ */

.login .brand { text-align: center; margin: 36px 0 28px; }
.login .brand .app-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.login .brand .co {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
}

/* ============================================================
   响应式管理后台外壳
   移动端：导航是顶部一排药丸按钮（沿用 .pill-row 原有样式）
   宽屏：同一份导航改排成左侧竖排，内容区独立滚动列
   ============================================================ */

.admin-shell {
  display: block;
}

@media (min-width: 900px) {
  .app--wide {
    max-width: 1220px;
  }

  .admin-shell {
    display: flex;
    align-items: flex-start;
    gap: 28px;
  }

  /* #nav 的 ID 选择器特异性高于 .pill-row，这里可以放心整体改写布局方向 */
  #nav {
    flex: none;
    width: 208px;
    position: sticky;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 10px;
  }
  #nav .chip {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-2);
    padding: 11px 14px;
    min-height: 42px;
  }
  #nav .chip[aria-pressed="true"] {
    background: var(--brand);
    color: #fff;
    font-weight: 500;
  }

  .admin-main {
    flex: 1;
    min-width: 0;
  }

  /* 宽屏下筛选条更从容，别再挤成两列 */
  .filters {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   管理端登录卡片：宽屏下垂直居中，不要顶头贴着
   ============================================================ */

@media (min-width: 700px) {
  #v-login .app {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  #v-login .login {
    width: 100%;
  }
}

/* ============================================================
   数字排印再打磨
   数字是这个产品的主角，统一收紧字距、提升权重，
   读起来更像仪表盘刻度，而不是普通正文数字。
   ============================================================ */

.num {
  letter-spacing: -0.025em;
}

.ledger .big,
.readout .v,
.rec-dur,
.stat-box .v,
.totbar .v {
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* ============================================================
   按钮再打磨：主按钮更有分量，次级按钮更安静
   ============================================================ */

.btn-primary,
.btn-ot,
.btn-lv {
  box-shadow: 0 1px 2px rgba(14, 24, 36, 0.12), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  letter-spacing: 0.01em;
}
.btn-primary:active,
.btn-ot:active,
.btn-lv:active {
  box-shadow: none;
}

.action {
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.action:active {
  transform: scale(0.99);
}

/* 已删除/已停用状态用更克制的中性灰，不抢主色调 */
.badge.void,
tr.void td {
  color: var(--ink-3);
}

/* ============================================================
   外部员工：上班 / 下班打卡
   ============================================================ */

.ledger--one { grid-template-columns: 1fr; }

.punch { text-align: center; padding: 20px 16px 16px; }
.punch-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.punch-state.on { color: var(--ot); }
.punch-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ot);
  box-shadow: 0 0 0 4px var(--ot-soft);
}
.punch-big { font-size: 30px; font-weight: 700; margin: 8px 0 2px; }
.punch-since { font-size: 13px; color: var(--ink-3); }
.punch-btn {
  min-height: 64px;
  margin-top: 16px;
  font-size: 22px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;     /* 抵消字距带来的右偏，让两个字在按钮里居中 */
  border-radius: var(--r-lg);
}

/* 打卡记录的状态色：已付款=青，未付款=赭，上班中=深蓝 */
.rec.pk-paid { border-left-color: var(--ot); }
.rec.pk-unpaid { border-left-color: var(--lv); }
.rec.pk-open { border-left-color: var(--brand); }
.rec.pk-paid .rec-cat, .rec.pk-paid .rec-dur { color: var(--ot); }
.rec.pk-unpaid .rec-cat, .rec.pk-unpaid .rec-dur { color: var(--lv); }
.rec.pk-open .rec-cat, .rec.pk-open .rec-dur { color: var(--brand); }
.badge.pk-paid { color: var(--ok); background: var(--ot-soft); border-color: #bfe0da; }
.badge.pk-unpaid { color: #8a5a00; background: #fff4dd; border-color: #f0d9a8; }
.badge.pk-open { color: var(--brand); background: #e6edf6; border-color: #c3d2e6; }

/* 修改密码弹窗：右下角的「不再提醒」 */
.chk-r {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.chk-r input { width: auto; min-height: 0; margin: 0; }

/* 打卡账号没有「登记」这个入口，底部导航只剩 3 项 */
.mode-punch .tab[data-tab="new"] { display: none; }
.mode-punch .tabbar { grid-template-columns: repeat(3, 1fr); }
.mode-punch #type-filter { display: none; }

/* 管理后台·外部工时：勾选条与勾选列 */
.x-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.x-bar-btns { display: flex; gap: 8px; }
table.t .x-chk { width: 34px; text-align: center; padding-left: 10px; padding-right: 0; }
table.t .x-chk input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--brand); }