/* 正大液化气 人事行政管理系统 —— 钉钉 H5 内嵌微应用样式
   移动优先（钉钉主要在手机上用），桌面自适应。零构建链，纯静态。
   品牌色取自公司LOGO标准蓝 #4080BE（2026-10 按用户提供配色图提取）。 */
:root {
  --dd-blue: #4080be;          /* 公司品牌蓝 */
  --dd-blue-d: #2f659b;        /* 深蓝 */
  --dd-blue-dd: #234e79;       /* 更深，用于渐变与顶栏 */
  --dd-blue-l: #eaf2fa;        /* 浅蓝底 */
  --dd-cyan: #35b8d8;          /* 科技青，点缀用 */
  --ok: #16a34a;
  --ok-l: #e8f7ee;
  --warn: #d97706;
  --warn-l: #fef4e6;
  --err: #dc2626;
  --err-l: #fdecec;
  --ink: #1f2329;
  --ink-2: #4e5969;
  --ink-3: #86909c;
  --line: #dfe6ee;
  --bg: #eef2f7;
  --card: #ffffff;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(35, 78, 121, .08), 0 6px 18px rgba(35, 78, 121, .06);
}

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

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.6; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--dd-blue); text-decoration: none; }

/* ==================== 登录页 ==================== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #4080be 0%, #2f659b 45%, #234e79 100%);
}
/* 科技感：细网格 + 光晕 */
.login-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.login-wrap::after {
  content: ""; position: absolute; width: 560px; height: 560px; right: -180px; top: -180px;
  background: radial-gradient(circle, rgba(53,184,216,.30) 0%, transparent 65%);
  pointer-events: none;
}
.login-card {
  width: 100%; max-width: 380px; background: rgba(255,255,255,.98); border-radius: 16px;
  padding: 34px 26px 28px; text-align: center; position: relative; z-index: 1;
  box-shadow: 0 12px 40px rgba(15, 40, 70, .35);
}
.login-logo { margin-bottom: 10px; }
.login-logo img { width: 92px; height: auto; display: inline-block;
  filter: drop-shadow(0 3px 8px rgba(35,78,121,.25)); }
.login-card h1 { font-size: 20px; margin: 0 0 6px; letter-spacing: .5px; }
.login-card .sub { color: var(--ink-3); font-size: 12px; margin: 0 0 24px; }
.login-card select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--ink); background: #fff; margin-bottom: 12px;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.tip { color: var(--ink-2); font-size: 13px; margin: 10px 0; }
.tip.warn { color: var(--warn); background: var(--warn-l); padding: 10px; border-radius: 8px; font-size: 12px; }
.err { color: var(--err); background: var(--err-l); padding: 10px; border-radius: 8px; font-size: 13px; margin: 12px 0 0; }

/* ==================== 按钮 ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 13px; cursor: pointer;
  transition: all .15s; white-space: nowrap; font-family: inherit;
}
.btn:hover { border-color: var(--dd-blue); color: var(--dd-blue); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--dd-blue) 0%, var(--dd-blue-d) 100%);
  border-color: var(--dd-blue-d); color: #fff;
  box-shadow: 0 2px 8px rgba(47,101,155,.28); }
.btn.primary:hover { background: var(--dd-blue-dd); border-color: var(--dd-blue-dd); color: #fff; }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn.block { display: flex; width: 100%; }

/* ==================== 主框架 ==================== */
.topbar {
  height: 54px; background: linear-gradient(90deg, #234e79 0%, #2f659b 60%, #4080be 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 10px rgba(35,78,121,.25);
}
.topbar .brand { font-weight: 700; font-size: 15px; display: flex; align-items: center;
  gap: 8px; color: #fff; letter-spacing: .3px; }
.brand-logo { width: 26px; height: auto; display: block; }
.topbar .tag {
  font-size: 11px; font-weight: 400; color: #fff;
  background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
}
.userbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.92); }
.userbox a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--ok-l); color: var(--ok); font-weight: 600;
}
.badge.admin { background: var(--warn-l); color: var(--warn); }
.badge.salary { background: #f3e8ff; color: #7c3aed; }

.layout { display: flex; align-items: flex-start; gap: 12px; padding: 12px; max-width: 1400px; margin: 0 auto; }
.side {
  width: 168px; flex-shrink: 0; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; position: sticky; top: 64px;
}
.side .nav-group { font-size: 11px; color: var(--ink-3); padding: 10px 10px 4px; letter-spacing: 1px; }
.side a {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 7px;
  color: var(--ink-2); font-size: 13px; margin-bottom: 2px; cursor: pointer;
}
.side a:hover { background: var(--bg); color: var(--ink); }
.side a.on { background: var(--dd-blue-l); color: var(--dd-blue-d); font-weight: 600; }
.side .ico { width: 16px; text-align: center; font-size: 14px; }
.side .cnt {
  margin-left: auto; font-size: 11px; background: var(--err); color: #fff;
  border-radius: 9px; padding: 0 6px; min-width: 18px; text-align: center;
}
.main { flex: 1; min-width: 0; }

/* 移动端底部导航 */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  overflow-x: auto; white-space: nowrap;
}
.bottom-nav a {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 12px; color: var(--ink-3); font-size: 10px; position: relative;
}
.bottom-nav a.on { color: var(--dd-blue); }
.bottom-nav .ico { font-size: 17px; line-height: 1.2; }
.bottom-nav .cnt {
  position: absolute; top: 0; right: 4px; background: var(--err); color: #fff;
  font-size: 9px; border-radius: 8px; padding: 0 4px; min-width: 14px; text-align: center;
}

/* ==================== 卡片与区块 ==================== */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; margin-bottom: 12px;
}
.card > h3 {
  margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.card > h3 .hint { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: auto; }
.sec-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.sec-title .hint { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.note {
  font-size: 12px; color: var(--ink-3); background: var(--bg);
  border-radius: 7px; padding: 9px 11px; margin: 0 0 12px; line-height: 1.7;
}
.note.blue { background: var(--dd-blue-l); color: var(--dd-blue-d); }
.note.warn { background: var(--warn-l); color: var(--warn); }
.note.err { background: var(--err-l); color: var(--err); }
.note b { color: inherit; }
.loading { text-align: center; color: var(--ink-3); padding: 50px 0; }
.empty { text-align: center; color: var(--ink-3); padding: 34px 14px; font-size: 13px; }

/* ==================== 统计卡片 ==================== */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 11px 12px;
}
.stat .k { font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
.stat .v { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.5px; }
.stat .v small { font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.stat .u { font-size: 11px; color: var(--ink-3); }
/* 统计卡备注：解释数值口径，避免"本月有考勤 0"被误读为人员为零（2026-10-27 BUG-08） */
.stat .stat-note {
  font-size: 10.5px; line-height: 1.45; color: var(--ink-3);
  margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--line);
  overflow-wrap: anywhere;
}
.stat.blue .v { color: var(--dd-blue); }
.stat.ok .v { color: var(--ok); }
.stat.warn .v { color: var(--warn); }
.stat.err .v { color: var(--err); }
.stat.flat { box-shadow: none; border: 1px solid var(--line); }

/* ==================== 表格 ==================== */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td {
  padding: 8px 9px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tbl th {
  background: #fafbfc; color: var(--ink-2); font-weight: 600; font-size: 12px;
  position: sticky; top: 0; z-index: 2;
}
table.tbl tbody tr:hover { background: #fafcff; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl td.wrap, table.tbl th.wrap { white-space: normal; min-width: 190px; }
table.tbl tr.total td { font-weight: 700; background: #fafbfc; border-top: 2px solid var(--line); }
table.tbl tr.mine { background: var(--dd-blue-l); }
table.tbl tr.mine td:first-child { border-left: 3px solid var(--dd-blue); }
table.tbl tr.alert { background: var(--err-l); }

/* ==================== 标签 ==================== */
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; }
.pill.blue { background: var(--dd-blue-l); color: var(--dd-blue-d); }
.pill.ok { background: var(--ok-l); color: var(--ok); }
.pill.warn { background: var(--warn-l); color: var(--warn); }
.pill.err { background: var(--err-l); color: var(--err); }
.pill.gray { background: var(--bg); color: var(--ink-3); }
.pill.purple { background: #f3e8ff; color: #7c3aed; }
.pos { color: var(--ok); font-weight: 600; }
.neg { color: var(--err); font-weight: 600; }
.muted { color: var(--ink-3); }
.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ==================== 筛选栏 ==================== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filters label { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
select, input[type=text], input[type=number], input[type=date], input[type=month], textarea {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px;
  color: var(--ink); background: #fff; font-family: inherit; min-width: 0;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--dd-blue); box-shadow: 0 0 0 2px rgba(22,119,255,.12); }
textarea { width: 100%; resize: vertical; min-height: 74px; line-height: 1.6; }
.filters .grow { flex: 1; min-width: 120px; }

/* ==================== 表单 ==================== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld > label { font-size: 12px; color: var(--ink-2); }
.fld > label b { color: var(--err); margin-left: 2px; }
.fld.full { grid-column: 1 / -1; }
.fld input, .fld select, .fld textarea { width: 100%; }
.fld .help { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* ==================== 弹窗 ==================== */
.mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--card); width: 100%; max-width: 620px; max-height: 90vh;
  border-radius: 14px 14px 0 0; overflow-y: auto; padding: 18px;
  animation: up .22s ease;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head .x { font-size: 22px; color: var(--ink-3); cursor: pointer; line-height: 1; padding: 0 4px; }
@keyframes up { from { transform: translateY(28px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ==================== Toast ==================== */
.toast {
  position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%);
  background: rgba(31, 35, 41, .92); color: #fff; padding: 10px 18px;
  border-radius: 8px; font-size: 13px; z-index: 2000; max-width: 86vw; text-align: center;
  animation: fade .2s ease;
}
.toast.err { background: rgba(220, 38, 38, .94); }
.toast.ok { background: rgba(22, 163, 74, .94); }
@keyframes fade { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ==================== 明细列表（移动端友好）==================== */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row-item {
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: #fff;
}
.row-item .r1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.row-item .r1 .t { font-weight: 600; font-size: 13px; }
.row-item .r2 { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.row-item .r3 { display: flex; gap: 10px; align-items: center; margin-top: 7px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.row-item.add { border-left: 3px solid var(--ok); }
.row-item.sub { border-left: 3px solid var(--err); }
.row-item.warn { border-left: 3px solid var(--warn); background: #fffdfa; }

/* 工资条 */
.payslip { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.payslip .ph { background: linear-gradient(135deg, var(--dd-blue), var(--dd-blue-d)); color: #fff; padding: 14px; }
.payslip .ph .amt { font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; }
.payslip .ph .lbl { font-size: 12px; opacity: .85; }
.payslip .pb { padding: 4px 14px 12px; }
.payslip .line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; gap: 12px; }
.payslip .line:last-child { border-bottom: none; }
.payslip .line .k { color: var(--ink-2); flex-shrink: 0; }
.payslip .line .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.payslip .grp { font-size: 11px; color: var(--ink-3); padding: 11px 0 3px; letter-spacing: 1px; }
.payslip .rem { font-size: 11px; color: var(--ink-3); background: var(--bg); padding: 9px 11px; border-radius: 7px; margin-top: 11px; line-height: 1.75; word-break: break-all; }

/* ==================== 电子信息栏大屏 ==================== */
#bigscreen {
  position: fixed; inset: 0; z-index: 3000; background: #050b1a; color: #e8f0ff;
  display: flex; flex-direction: column; overflow: hidden;
}
.bs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: linear-gradient(90deg, rgba(22,119,255,.22), transparent);
  border-bottom: 1px solid rgba(90, 150, 255, .22); flex-shrink: 0;
}
.bs-title { font-size: 19px; font-weight: 700; letter-spacing: 1.5px; color: #9ecbff; }
.bs-time { font-size: 15px; color: #6fa8ff; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.bs-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 16px 22px; }
.bs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; flex-shrink: 0; }
.bs-stat {
  background: rgba(22, 119, 255, .09); border: 1px solid rgba(90, 150, 255, .22);
  border-radius: 11px; padding: 13px 15px;
}
.bs-stat .k { font-size: 12px; color: #7ea8e0; margin-bottom: 5px; letter-spacing: .5px; }
.bs-stat .v { font-size: 30px; font-weight: 700; color: #fff; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bs-stat .v small { font-size: 13px; font-weight: 400; color: #7ea8e0; margin-left: 3px; }
.bs-marquee {
  flex: 1; overflow: hidden; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(90, 150, 255, .16); border-radius: 11px; padding: 12px 15px;
  position: relative; min-height: 0;
}
.bs-marquee .mt { font-size: 13px; color: #7ea8e0; margin-bottom: 9px; letter-spacing: 1px; flex-shrink: 0; }
.bs-scroll { position: absolute; left: 15px; right: 15px; top: 42px; bottom: 12px; overflow: hidden; }
.bs-scroll .inner { animation: roll 26s linear infinite; }
.bs-scroll:hover .inner { animation-play-state: paused; }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.bs-item { display: flex; gap: 11px; padding: 7px 0; border-bottom: 1px solid rgba(90, 150, 255, .1); font-size: 14px; align-items: baseline; }
.bs-item .d { color: #6fa8ff; font-size: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.bs-item .n { color: #ffd666; flex-shrink: 0; font-weight: 600; }
.bs-item .s { flex-shrink: 0; font-weight: 700; }
.bs-item .s.up { color: #7ee2a8; }
.bs-item .s.dn { color: #ff8f8f; }
.bs-item .r { color: #c9d9f5; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 22px; font-size: 12px; color: #6f8fc0;
  border-top: 1px solid rgba(90, 150, 255, .16); flex-shrink: 0; flex-wrap: wrap;
}
.bs-foot a { color: #6fa8ff; }

/* ==================== 响应式 ==================== */
@media (max-width: 900px) {
  .side { display: none; }
  .bottom-nav { display: flex; }
  .layout { padding: 10px 10px 66px; display: block; }
  .topbar { height: 48px; padding: 0 11px; }
  .topbar .brand { font-size: 14px; }
  .userbox { font-size: 12px; gap: 6px; }
  #who { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card { padding: 12px; }
  .stats { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
  .stat { padding: 9px 10px; }
  .stat .v { font-size: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .bs-title { font-size: 15px; letter-spacing: .5px; }
  .bs-body { padding: 11px 13px; gap: 11px; }
  .bs-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bs-stat .v { font-size: 23px; }
  .bs-item { font-size: 12px; gap: 7px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .filters { gap: 6px; }
  .filters label { font-size: 11px; }
  select, input, .btn { font-size: 13px; }
  .btn { padding: 7px 12px; }
}
/* 桌面大屏 */
@media (min-width: 1200px) {
  .bs-stat .v { font-size: 40px; }
  .bs-title { font-size: 25px; }
  .bs-item { font-size: 17px; padding: 9px 0; }
}
@media print {
  .topbar, .side, .bottom-nav, .filters, .btn, .form-actions { display: none !important; }
  .layout { padding: 0; display: block; }
  .card { box-shadow: none; border: 1px solid var(--line); page-break-inside: avoid; }
  body { background: #fff; }
}

/* ==================== v2 新增组件（2026-10 系统更正） ==================== */
/* 科技感卡片 */
.card.tech, .card.tech2 {
  background: linear-gradient(145deg, #ffffff 0%, #f4f9ff 100%);
  border: 1px solid #d6e4f2; position: relative; overflow: hidden;
}
.card.tech::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dd-blue) 0%, var(--dd-cyan) 60%, transparent 100%);
}
.sec-title { display: flex; align-items: center; gap: 8px; }
.sec-title .hint { margin-left: auto; }
.sec-title .btn { margin-left: auto; }

/* 滚动记录盒（员工端全员动态） */
.scroll-box { max-height: 260px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 8px; background: #fbfdff; }
.scroll-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px dashed var(--line); font-size: 12px; }
.scroll-row:last-child { border-bottom: 0; }
.scroll-row .nm { font-weight: 600; color: var(--dd-blue-dd); min-width: 52px; }
.scroll-row .it { color: var(--ink); }
.scroll-row .rs { color: var(--ink-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll-row .tm { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.scroll-row.sub { background: #fff8f8; }
.scroll-row.add { background: #f7fdf9; }

/* 上传组件 */
.up-box { border: 1px dashed #b9cfe4; border-radius: 8px; padding: 8px; background: #fafcff; }
.up-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.up-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  background: var(--dd-blue-l); color: var(--dd-blue-dd); border-radius: 12px; padding: 3px 10px; }
.up-chip a { color: var(--err); text-decoration: none; }

/* 附件展示 */
.att-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.att-thumb img { width: 74px; height: 74px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); display: block; }
/* 2026-11-07（D-02）：鉴权加载失败（无权访问/文件丢失）时的占位，避免显示破图。
   img 是替换元素，::after 伪元素不生效，故靠 alt 文本 + 固定尺寸灰底呈现。 */
.att-thumb img.att-forbidden { background: #f0f1f3; color: #999; font-size: 11px;
  text-align: center; line-height: 74px; }
.att-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  background: #f0f5fb; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
  color: var(--dd-blue-dd); }

/* 申诉关联事项勾选 */
.ref-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  max-height: 150px; overflow-y: auto; background: #fbfdff; }
.ref-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 2px;
  border-bottom: 1px dashed var(--line); cursor: pointer; }
.ref-item:last-child { border-bottom: 0; }
.ref-item input { accent-color: var(--dd-blue); }

/* 大屏分区与隐藏按钮 */
.bs-sec { margin-bottom: 14px; }
.bs-sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bs-sec-t { color: #9fc4e8; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.bs-sec-t.muted { opacity: .6; }
.bs-tgl { background: rgba(255,255,255,.12); color: #cfe3f7; border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px; font-size: 11px; padding: 2px 10px; cursor: pointer; }
.bs-tgl:hover { background: rgba(255,255,255,.22); }
.hidden-sec { opacity: .55; padding: 6px 0; display: flex; align-items: center;
  justify-content: space-between; border: 1px dashed rgba(255,255,255,.2); border-radius: 8px;
  padding: 6px 10px; }
.bs-note2 { color: #9fc4e8; font-size: 12px; margin-top: 6px; }
.bs-logo { width: 40px; height: auto; margin-right: 10px; vertical-align: middle; }
.bs-head { display: flex; align-items: center; }

/* 科技感图标着色（v2） */
.side .ico { color: var(--dd-blue); font-weight: 600; }
.side a.on .ico { color: var(--dd-cyan); }
.bottom-nav .ico { color: var(--dd-blue); }
.bottom-nav a.on .ico { color: var(--dd-blue-d); }

/* 演示环境水印（v2）：非生产醒目提示 */
.demo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: repeating-linear-gradient(45deg, #d97706, #d97706 12px, #b45309 12px, #b45309 24px);
  color: #fff; font-size: 12px; font-weight: 700; text-align: center;
  padding: 5px 10px; letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.demo-mode .topbar { top: 26px; }
.demo-mode .login-wrap, .demo-mode #bigscreen { padding-top: 26px; }
.demo-mode .side, .demo-mode .main { }

/* ==================== 公示大屏排版修复（2026-10-01） ====================
   根因：.bs-scroll 原为 position:absolute，配套父容器 .bs-marquee(position:relative)。
   大屏重构为 .bs-sec 分区后失去定位上下文，导致：
     1) 滚动内容脱离文档流全部堆到页面顶部
     2) 绝对定位层覆盖「隐藏」按钮，点击落在滚动层上而非按钮
   修复：.bs-sec 内的滚动区改为文档流内的固定高度容器，不再绝对定位。 */
.bs-body { overflow-y: auto; }
.bs-sec .bs-scroll {
  position: relative; left: auto; right: auto; top: auto; bottom: auto;
  height: 190px; overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(90,150,255,.16); border-radius: 11px;
  padding: 10px 15px;
}
.bs-sec .bs-scroll .inner { animation: roll 32s linear infinite; }
.bs-sec .bs-scroll:hover .inner { animation-play-state: paused; }
/* 隐藏按钮必须在滚动层之上可点 */
.bs-sec-h { position: relative; z-index: 2; }
.bs-tgl { position: relative; z-index: 3; }
/* 统计卡片在大屏内的排版 */
.bs-sec .bs-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
@media (max-width: 720px) {
  .bs-sec .bs-scroll { height: 150px; }
  .bs-sec .bs-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== v5 改版（2026-10-18《优化.docx》第1/2/3项） ====================
   登录页背景与主色改为用户参考图的靛蓝紫渐变（采样 #282C9B/#3B47BD/#4B52C6）；
   登录后色调与登录页一致（第2项）；字号比例照参考图2放大（第3项）。
   此块置于文件末尾，同特异性下覆盖先前规则。 */
:root {
  --dd-blue: #4b52c6;        /* 参考图主靛蓝（按钮/选中态/链接） */
  --dd-blue-d: #3b47bd;      /* 中靛蓝（悬停/顶栏渐变） */
  --dd-blue-dd: #282c9b;     /* 深靛蓝（顶栏/侧栏选中） */
  --dd-blue-l: #eef0fb;      /* 浅靛蓝底（斑马纹/选中底） */
  --dd-cyan: #6a72e0;        /* 点缀色 */
  --side-bg: #2a394b;        /* 参考图2深色侧栏 */
  --bg: #f5f7fa;             /* 参考图2内容区浅灰 */
  --line: #e3e6ec;
}
html, body { font-size: 15px; }

/* --- 登录页：靛蓝紫渐变全屏 --- */
.login-wrap {
  background: linear-gradient(135deg, #282c9b 0%, #3b47bd 48%, #4b52c6 100%);
}
.login-wrap::before {
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 40px 40px;
}
.login-wrap::after {
  background: radial-gradient(circle, rgba(122,132,235,.35) 0%, transparent 62%);
  width: 640px; height: 640px;
}
/* 左右分栏卡片：宽屏左品牌右表单，窄屏堆叠 */
.login-card {
  max-width: 780px; display: flex; align-items: stretch; text-align: left;
  padding: 0; overflow: hidden; border-radius: 18px;
}
.login-left {
  flex: 1 1 46%; background: linear-gradient(160deg, #3b47bd 0%, #282c9b 100%);
  color: #fff; padding: 42px 34px; display: flex; flex-direction: column;
  justify-content: center; gap: 10px;
}
.login-left .ll-logo { width: 84px; height: auto; margin-bottom: 8px; }
.login-left h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.login-left p { margin: 0; font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.7; }
.login-left .ll-slogan { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.7);
  border-top: 1px solid rgba(255,255,255,.22); padding-top: 12px; }
.login-right { flex: 1 1 54%; padding: 44px 38px; background: #fff; }
.login-right .lr-title { font-size: 22px; font-weight: 700; color: #1f2329; margin: 0 0 4px; }
.login-right .lr-sub { font-size: 13px; color: #86909c; margin: 0 0 26px; }
@media (max-width: 720px) {
  .login-card { flex-direction: column; max-width: 420px; }
  .login-left { padding: 26px 24px; }
  .login-left h2 { font-size: 21px; }
  .login-left .ll-slogan { display: none; }
  .login-right { padding: 28px 24px; }
}
/* 下划线式输入（参考图1风格） */
.login-right select, .login-right .ul-input {
  width: 100%; border: none; border-bottom: 2px solid #dfe2ee; border-radius: 0;
  background: transparent; padding: 10px 2px; font-size: 15px; color: #1f2329;
  margin-bottom: 20px; outline: none;
  background-image: none;
  appearance: none; -webkit-appearance: none;
}
.login-right select:focus { border-bottom-color: var(--dd-blue); }
.login-right .btn.block {
  height: 46px; border-radius: 23px; font-size: 16px; letter-spacing: 2px;
  background: linear-gradient(135deg, #4b52c6 0%, #3b47bd 100%); border: none;
}
.login-right .btn.block:hover { background: #282c9b; }
.login-logo { display: none; }          /* 旧居中logo位让位于左栏 */
.login-card h1, .login-card .sub { display: none; }

/* --- 登录后主框架：色调与登录页一致 --- */
.topbar {
  background: linear-gradient(90deg, #282c9b 0%, #3b47bd 55%, #4b52c6 100%);
  height: 58px;
}
.topbar .brand { font-size: 17px; letter-spacing: .5px; }
.brand-logo { width: 30px; }
.side {
  background: var(--side-bg);
}
.side .nav-group { color: rgba(255,255,255,.45); font-size: 12px; letter-spacing: 1.5px; }
.side a { color: rgba(255,255,255,.88); font-size: 15px; padding: 11px 14px; }
.side a:hover { background: rgba(255,255,255,.07); color: #fff; }
.side a.on { background: var(--dd-blue-dd); color: #fff; font-weight: 600;
  border-left: 3px solid #8f97ff; }
.side .ico { font-size: 15px; }
.main { background: var(--bg); }
.bottom-nav { background: var(--side-bg); }
.bottom-nav a { color: rgba(255,255,255,.8); }
.bottom-nav a.on { color: #fff; }

/* --- 字体大小与比例（参考图2：标题22 / 菜单表头15 / 正文14-15） --- */
.card > h3, .sec-title { font-size: 17px; font-weight: 700; }
table.tbl { font-size: 14px; }
table.tbl th { font-size: 15px; font-weight: 700; background: #fafbfc; color: #1f2329; }
table.tbl td { padding: 9px 10px; }
.btn { font-size: 14px; padding: 8px 18px; }
.btn.sm { font-size: 13px; padding: 5px 12px; }
.stats .stat .v { font-size: 26px; }
.filters label { font-size: 14px; }
.note { font-size: 13.5px; }
.fld label { font-size: 14px; }
.fld input, .fld select, .fld textarea { font-size: 14px; }

/* --- v5 修正：演示水印高度自适应（移动版水印换行会遮挡顶栏） ---
   高度由 JS 实测后写入 CSS 变量 --demobar-h，顶栏/登录页/大屏按变量偏移。 */
.demo-mode .topbar { top: var(--demobar-h, 26px); }
.demo-mode .login-wrap, .demo-mode #bigscreen { padding-top: var(--demobar-h, 26px); }
.demo-bar { line-height: 1.45; padding: 4px 10px; }
/* 移动端底部导航收紧，避免 6 项挤不下 */
.bottom-nav a { font-size: 12px; }
.bottom-nav .ico { font-size: 15px; }

/* ==================== v6 我的薪酬 + 手写签名（2026-10-18） ==================== */
/* 手写签名板 */
.sig-wrap { margin: 8px 0; }
.sig-canvas {
  display: block; width: 100%; max-width: 340px; height: 150px;
  border: 2px dashed #b9c0d8; border-radius: 10px; background: #fdfdff;
  touch-action: none; cursor: crosshair;
}
.sig-bar { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.sig-bar .small { margin-right: auto; }

/* 工资条构成 */
.pay-slip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.pay-col { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pay-h { background: #f7f8fc; font-weight: 700; font-size: 13px; padding: 7px 10px;
  border-bottom: 1px solid var(--line); color: var(--ink-2); }
.pay-row { display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; font-size: 13.5px; border-bottom: 1px dashed #eef0f5; }
.pay-row:last-child { border-bottom: 0; }
.pay-row b { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .pay-slip { grid-template-columns: 1fr; } }
.note.ok { background: var(--ok-l); color: #14713a; }

/* ==================== v7 界面比例修复 + 排班月历（2026-10-19 优化2第1、3条） ==================== */
/* --- 防挤压乱排的结构性修复 --- */
/* 顶栏：品牌与用户区各自可收缩，窄屏不互相顶破 */
.topbar { gap: 10px; }
.topbar .brand { min-width: 0; overflow: hidden; }
.topbar .brand > span:not(.tag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox { flex-shrink: 0; }

/* 主区：内容宽度受限时表格横向滚动而非压缩列 */
.main { overflow-x: hidden; }
.tbl-wrap { max-width: 100%; }
table.tbl { min-width: 640px; }
table.tbl td, table.tbl th { overflow-wrap: anywhere; }
table.tbl td.wrap, table.tbl th.wrap { min-width: 160px; max-width: 340px; }

/* 统计卡：数值过长时换行不溢出 */
.stat { min-width: 0; overflow: hidden; }
.stat .v { overflow-wrap: anywhere; }

/* 筛选栏与表单：控件有最小可用宽度，窄屏自动折行 */
.filters label { flex-shrink: 0; }
.filters select, .filters input[type=month], .filters input[type=date] { min-width: 108px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.btn { flex-shrink: 0; }

/* 弹窗：内容超高时滚动，按钮区不贴边 */
.modal-body { overflow-wrap: anywhere; }

/* 卡片内长文本不撑破布局 */
.card { min-width: 0; }
.note { overflow-wrap: anywhere; }

/* 移动端底部导航：只放常用项（≤5，含「更多」），不再强制等分
   2026-10-26 优化3第1条修复：原 .bottom-nav a{flex:1;min-width:0} 会把
   系统管理员的 18 项菜单硬压进一行导致文字堆叠；现由 JS 收敛为常用项+抽屉。 */
@media (max-width: 900px) {
  .bottom-nav { justify-content: space-around; }
  .bottom-nav a { padding: 4px 10px; flex: 0 1 auto; min-width: 54px; max-width: 22%; }
  table.tbl { min-width: 560px; }
}
@media (max-width: 420px) {
  .bottom-nav a { font-size: 11px; padding: 4px 6px; min-width: 48px; }
  .bottom-nav .ico { font-size: 14px; }
  .filters { gap: 6px; }
  .filters label { width: 100%; }
  .filters select, .filters input { flex: 1; min-width: 0; }
}

/* --- 底部「更多」抽屉（2026-10-26 优化3第1条） ---
   菜单总量不受屏幕宽度限制，抽屉内按分组纵向展开，一屏可滚动。 */
#mnav-mask {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 20, 34, .48);
}
#mnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
  max-height: 76vh; display: flex; flex-direction: column;
  background: var(--card); border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, .22);
  animation: mnavUp .22s ease-out;
}
@keyframes mnavUp { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }
.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 700; color: var(--ink-1);
}
.mnav-x { font-size: 17px; color: var(--ink-3); padding: 2px 7px; }
.mnav-body {
  overflow-y: auto; padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
}
.mnav-group {
  font-size: 12px; color: var(--ink-3); font-weight: 700; letter-spacing: .4px;
  padding: 10px 6px 5px;
}
.mnav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 10px; color: var(--ink-2); font-size: 15px;
  position: relative;
}
.mnav-item .ico { font-size: 18px; color: var(--dd-blue); width: 22px; text-align: center; }
.mnav-item .mnav-t { flex: 1; min-width: 0; }
.mnav-item.on { background: #eef3ff; color: var(--dd-blue-d); font-weight: 700; }
.mnav-item.on .ico { color: var(--dd-blue-d); }
.mnav-item .cnt {
  position: static; background: var(--err); color: #fff; font-size: 10px;
  border-radius: 9px; padding: 1px 6px; min-width: 16px; text-align: center;
}
body.mnav-open { overflow: hidden; }
/* 桌面端不需要抽屉：底部栏与抽屉均隐藏，走侧栏 */
@media (min-width: 901px) {
  #mnav, #mnav-mask { display: none !important; }
}

/* --- 排班月历（7 列【周一~周日】，格内公历日期 + 农历/节日 + 轮休人员） --- */
.sh-cal { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sh-head, .sh-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sh-head > div {
  background: #f4efe6; color: #8a6a3b; font-weight: 700; font-size: 13px;
  text-align: center; padding: 8px 2px; border-right: 1px solid #eadfcd;
}
.sh-head > div:last-child { border-right: 0; }
.sh-cell {
  min-height: 88px; border-right: 1px solid var(--line); border-top: 1px solid var(--line);
  padding: 5px 6px; background: #fff; cursor: default; position: relative;
}
.sh-cell:nth-child(7n) { border-right: 0; }
.sh-cell.blank { background: #fafafa; }
.sh-cell.weekend { background: #fbf7f0; }
.sh-cell.has { background: #f2f8ff; }
/* 节日格（春节/国庆等）：淡红底 + 左侧色条，与周末底色、已排班底色区分 */
.sh-cell.fest { background: #fff5f5; }
.sh-cell.fest.has { background: #fdf2f2; }
.sh-cell.fest::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e05b5b;
}
.sh-cal .sh-grid .sh-cell[onclick] { cursor: pointer; }
.sh-cal .sh-grid .sh-cell[onclick]:hover { outline: 2px solid var(--dd-blue); outline-offset: -2px; }
.sh-d { font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* 农历行：字号小于公历日期；节日标红加粗。单行省略防止撑破格子 */
.sh-lunar {
  font-size: 10px; color: #a08a6a; line-height: 1.3; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-cell.fest .sh-lunar { color: #d9483f; font-weight: 600; }
.sh-names { font-size: 12px; color: #2f659b; line-height: 1.55; margin-top: 3px; }
.sh-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px 10px; }
.sh-pick-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ========== 预约排班（2026-11-01 需求一） ==========
   格子按占用状态着色，让员工不读文字也知道哪天还能约。色相刻意与既有排班格区分：
   蓝=管理员已排班（沿用 .has 语义）、绿=我的预约、红=他人已占、灰斜纹=禁排日。
   只有 free / mine 两态可点击（预约与取消），故仅这两态给 pointer 与 hover 描边。 */
.sh-cell.rv-free { background: #fff; }
.sh-cell.rv-mine { background: #eefaf0; box-shadow: inset 0 0 0 2px #46a05a; }
.sh-cell.rv-mine .sh-names { color: #2f7d43; font-weight: 700; }
.sh-cell.rv-taken { background: #fdeeee; }
.sh-cell.rv-taken .sh-names { color: #c0392b; font-weight: 600; }
.sh-cell.rv-assigned, .sh-cell.rv-assigned_other { background: #f2f8ff; }
.sh-cell.rv-assigned .sh-names, .sh-cell.rv-assigned_other .sh-names { color: #2f659b; }
.sh-cell.rv-forbidden {
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 5px, #ececec 5px, #ececec 10px);
  color: #999;
}
.sh-cell.rv-forbidden .sh-names { color: #999; font-weight: 600; }
.sh-cell.rv-forbidden .sh-d { color: #aaa; }
.sh-cal .sh-grid .sh-cell.rv-free[onclick],
.sh-cal .sh-grid .sh-cell.rv-mine[onclick] { cursor: pointer; }
.sh-cal .sh-grid .sh-cell.rv-free[onclick]:hover { outline: 2px solid #46a05a; outline-offset: -2px; }
.sh-cal .sh-grid .sh-cell.rv-mine[onclick]:hover { outline: 2px solid #c0392b; outline-offset: -2px; }

/* 图例：与格子同色系，避免员工猜颜色含义 */
.rv-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; font-size: 12px; color: var(--ink-2); }
.rv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rv-k { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }
.rv-k.rv-free { background: #fff; }
.rv-k.rv-mine { background: #eefaf0; box-shadow: inset 0 0 0 2px #46a05a; }
.rv-k.rv-taken { background: #fdeeee; }
.rv-k.rv-assigned { background: #f2f8ff; }
.rv-k.rv-forbidden {
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 3px, #ececec 3px, #ececec 6px);
}

/* 公告栏：置顶醒目但不刺眼，正文保留换行 */
.rv-notice {
  border: 1px solid #f0d9a8; background: #fffbf2; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; border-left: 4px solid #e0a63c;
}
.rv-notice-t { font-weight: 700; color: #8a6a3b; font-size: 13px; margin-bottom: 4px; }
.rv-notice-b { font-size: 13px; color: var(--ink-1); line-height: 1.7; word-break: break-word; }
.rv-notice-f { font-size: 11px; color: #a08a6a; margin-top: 6px; text-align: right; }

/* 排班来源标签：预约导入=红，管理员自排=绿（需求一5） */
.tag-src { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 11px; margin-left: 3px; }
.tag-src.imp { background: #fdeeee; color: #c0392b; border: 1px solid #f0b4b4; }
.tag-src.adm { background: #eefaf0; color: #2f7d43; border: 1px solid #b8e0c2; }
/* 管理端排班格子内的人名按来源着色 */
.sh-names .nm-imp { color: #c0392b; }
.sh-names .nm-adm { color: #2f659b; }

/* 需求三：管理端「预约情况预览」日历 —— 与已排班次冲突的格子整体标红提醒 */
.sh-cell.rv-conflict { box-shadow: inset 0 0 0 2px #c0392b; background: #fdeeee; }
.sh-cell.rv-conflict .sh-d { color: #c0392b; font-weight: 700; }
.rv-k.rv-conflict { background: #fdeeee; box-shadow: inset 0 0 0 2px #c0392b; }

/* 需求四：勾选弹窗中本月轮休额度已满者 —— 置灰禁用，明确不可再选 */
.sh-pick-item.disabled { opacity: .5; cursor: not-allowed; }
.sh-pick-item.disabled input { cursor: not-allowed; }
.sh-pick-item .neg { color: #c0392b; font-weight: 600; }
/* 勾选弹窗里的「禁止排班/暂停休假」项：与人名勾选项区分，避免误看成轮休人员 */
.sh-noshift-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  margin-top: 6px; padding: 6px 8px; border-radius: 8px;
  background: #f5f5f5; border: 1px solid var(--line); cursor: pointer;
}

/* 2026-11-03 问题二：排班日历的「禁止排班/暂停休假」格子 —— 整体置灰 + 斜纹，
   与周末/节日/已排班的底色都明显区分，人事一眼看出当天不可安排轮休。 */
.sh-cell.noshift {
  background: repeating-linear-gradient(45deg, #ececec, #ececec 5px, #e0e0e0 5px, #e0e0e0 10px);
}
.sh-cell.noshift .sh-d, .sh-cell.noshift .sh-lunar,
.sh-cell.noshift .sh-names { color: #999; }
.sh-cell.noshift.weekend { background-color: #e4e4e4; }
.ns-flag { margin-left: 3px; font-size: 10px; }
/* 当日备注：字号压到最小并单行省略，避免撑破格子（悬浮 title 可看全文） */
.sh-note {
  font-size: 10px; line-height: 1.3; color: #8a6a3b; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-cell.hasnote { box-shadow: inset 0 -2px 0 0 #e0a63c; }

/* 问题2.2：员工「我的排班」日历上的请假/外出审批角标。
   格子淡黄底表示当天有审批；日期右上角的单字角标标明类型（事/病/外/差…）。
   未识别类型用 warn 橙红，提示需人工核对，不猜语义归类。 */
.sh-cell.leave { background: #fffaf0; }
.sh-cell.leave.has { background: #fff6e8; }
.lv-badges { margin-left: 3px; }
.lv-tag {
  display: inline-block; min-width: 14px; padding: 0 2px; margin-right: 2px;
  font-size: 10px; line-height: 14px; text-align: center; font-weight: 700;
  color: #fff; background: #e0a63c; border-radius: 3px; cursor: help;
}
.lv-tag.warn { background: #d9534f; }

/* 预约管理：额度进度与冲突提示 */
.rv-quota { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-quota .q-item {
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
  font-size: 12px; background: #fff;
}
.rv-quota .q-item.full { border-color: #f0b4b4; background: #fdeeee; }
.rv-quota .q-item.free { border-color: #b8e0c2; background: #eefaf0; }

@media (max-width: 640px) {
  .sh-cell { min-height: 66px; padding: 3px 4px; }
  .sh-d { font-size: 12px; }
  .sh-lunar { font-size: 9px; }
  .sh-names { font-size: 11px; }
  .sh-head > div { font-size: 11px; padding: 6px 1px; }
  .rv-legend { gap: 5px 9px; font-size: 11px; }
  .rv-notice { padding: 8px 10px; }
  .rv-notice-b { font-size: 12px; }
}

/* ==================== 员工手册（2026-10-26 优化3第2条） ==================== */
/* 搜索栏：移动端优先，输入框占满剩余宽度，按钮不换行 */
.ph-searchbar { display: flex; align-items: center; gap: 8px; }
.ph-searchbar input[type="search"] {
  flex: 1; min-width: 0; font-size: 15px; padding: 10px 12px;
  border: 1px solid #c9d2e6; border-radius: 10px; background: #fbfcff;
  -webkit-appearance: none; appearance: none;
}
.ph-searchbar input[type="search"]:focus { outline: none; border-color: var(--dd-blue); background: #fff; }
.ph-searchbar .btn { flex: 0 0 auto; white-space: nowrap; }

/* 常查关键词 chip */
.ph-hot { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ph-hot-t { font-size: 12.5px; color: var(--ink-3); }
.ph-chip {
  font-size: 12.5px; color: var(--dd-blue-d); background: #eef3ff;
  border: 1px solid #d6e2ff; border-radius: 12px; padding: 3px 10px; cursor: pointer;
}
.ph-chip:active { background: #dde8ff; }

/* 关键词高亮与定位闪烁 */
mark.ph-hl { background: #fff2a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.ph-art.ph-flash {
  animation: phFlash 1.1s ease-out 2;
  border-radius: 10px;
}
@keyframes phFlash {
  0% { background: #fff6cf; box-shadow: 0 0 0 3px #ffe27a; }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* 制度文件卡片列表 */
.ph-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.ph-doc {
  display: block; border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 12px; background: #fff; cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.ph-doc:hover { border-color: var(--dd-blue); box-shadow: 0 2px 10px rgba(22, 93, 255, .1); }
.ph-doc.old { background: #fffaf3; border-color: #f0d9b5; }
.ph-doc-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.ph-doc-code { font-size: 12px; color: var(--ink-3); font-family: Consolas, monospace; }
.ph-doc-title { font-size: 15.5px; font-weight: 700; color: var(--ink-1); line-height: 1.45; }
.ph-doc-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.ph-doc-note {
  font-size: 12px; color: #9a6a12; background: #fff6e6; border-radius: 7px;
  padding: 6px 8px; margin-top: 7px; line-height: 1.6;
}
.ph-doc-acts { display: flex; gap: 7px; margin-top: 9px; }

/* 检索结果 */
.ph-hits { display: flex; flex-direction: column; gap: 9px; }
.ph-hit {
  display: block; border: 1px solid var(--line); border-left: 3px solid var(--dd-blue);
  border-radius: 9px; padding: 10px 12px; background: #fff; cursor: pointer;
}
.ph-hit:hover { background: #f7faff; border-color: var(--dd-blue); }
.ph-hit-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ph-hit-doc { font-size: 13.5px; font-weight: 700; color: var(--dd-blue-d); }
.ph-hit-loc { font-size: 12.5px; color: var(--ink-3); }
.ph-hit-title { font-size: 14.5px; font-weight: 700; color: var(--ink-1); margin-top: 4px; }
.ph-hit-snip {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.75; margin-top: 5px;
  overflow-wrap: anywhere;
}
.ph-hit-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-3); margin-top: 7px;
}
.ph-hit-n { color: #b45309; }

/* 制度全文浏览 */
.ph-read-head { position: relative; }
.ph-crumb { font-size: 12.5px; color: var(--ink-3); margin-bottom: 7px; }
.ph-crumb a { color: var(--dd-blue); cursor: pointer; }
.ph-read-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.ph-toc {
  margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 9px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px 10px;
  max-height: 240px; overflow-y: auto;
}
.ph-toc a { font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 3px 0; }
.ph-toc a:hover { color: var(--dd-blue); }
.ph-chap {
  font-size: 15.5px; font-weight: 700; color: #fff; margin: 16px 0 9px;
  background: linear-gradient(90deg, var(--dd-blue) 0%, #4b7bec 100%);
  border-radius: 9px; padding: 8px 13px;
}
.ph-art {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 11px 13px; margin-bottom: 9px; scroll-margin-top: 86px;
}
.ph-art-h { font-size: 14.5px; font-weight: 700; color: var(--dd-blue-d); margin-bottom: 6px; }
.ph-art-b { font-size: 14px; color: var(--ink-2); line-height: 1.85; overflow-wrap: anywhere; }
.ph-p { margin: 0 0 7px; }
.ph-p:last-child { margin-bottom: 0; }
/* 表格型条文：字段名 | 说明 → 键值对，比纯文本更易读 */
.ph-kv { margin: 2px 0 7px; }
.ph-kv-row {
  display: flex; gap: 9px; padding: 5px 0; border-bottom: 1px dashed #eef1f6;
  font-size: 13.5px; line-height: 1.75;
}
.ph-kv-row:last-child { border-bottom: 0; }
.ph-kv-k { flex: 0 0 92px; color: var(--ink-3); font-weight: 600; }
.ph-kv-v { flex: 1; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .ph-docs { grid-template-columns: 1fr; }
  .ph-toc { grid-template-columns: 1fr; max-height: 200px; }
  .ph-kv-row { flex-direction: column; gap: 2px; }
  .ph-kv-k { flex: none; }
  .ph-searchbar { flex-wrap: wrap; }
  .ph-searchbar input[type="search"] { flex: 1 1 100%; }
  .ph-searchbar .btn { flex: 1; }
  .ph-chap { font-size: 14.5px; padding: 7px 11px; }
}

/* ==================== 保密水印与防截图（2026-10-26 第九轮第4项） ====================
   水印层铺满内容区且不吃鼠标事件（否则按钮点不动）；
   离屏/切标签时加模糊遮罩，降低随手截屏外传的概率。
   能力边界：网页无法真正阻止操作系统级截屏，水印作用是【可追溯到人】。 */
.wm-layer {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-repeat: repeat; background-position: 0 0;
  border-radius: inherit; opacity: .95;
}
/* 内容浮在水印之上仍可交互，水印只作视觉覆盖 */
.card, .pay-slip, .ph-art, .ph-hits, .ph-docs { position: relative; z-index: 1; }
.wm-blurred .card { filter: blur(7px); transition: filter .12s; }
.wm-blurred::after {
  content: "保密内容 · 返回页面后显示"; position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 14px; letter-spacing: .5px;
  background: rgba(255, 255, 255, .72); pointer-events: none;
}
/* 保密页面禁用文本选择（输入框除外），配合 JS 的 copy/selectstart 拦截。
   用 :has(.wm-layer) 限定：#view 是全页面共用容器，只绑 class 会泄漏到
   考勤/绩效等非保密页，导致员工无法正常选字复制自己的考勤数据。 */
.confidential-host:has(.wm-layer),
.confidential-host:has(.wm-layer) * { -webkit-user-select: none; user-select: none; }
.confidential-host:has(.wm-layer) input,
.confidential-host:has(.wm-layer) textarea,
.confidential-host:has(.wm-layer) [contenteditable] {
  -webkit-user-select: text; user-select: text;
}
/* 水印存在时给内容加保密标识条，明确告知密级与禁止外传 */
.confidential-host:has(.wm-layer)::before {
  content: "◆ 公司保密范围 · 请勿截图外传 · 水印含本人姓名可追溯";
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #8a5a00; background: #fff7e0; border: 1px solid #f0d9a0;
  border-radius: 8px; padding: 6px 11px; margin-bottom: 10px; text-align: center;
}
/* 打印时不留空白页，直接隐藏保密内容 */
@media print {
  .confidential-host:has(.wm-layer) { display: none !important; }
  .wm-layer { display: none !important; }
}

/* 员工手册签收弹窗（第九轮第3项） */
.rcv-intro { line-height: 1.85; }
.rcv-list { margin: 6px 0 0; padding-left: 18px; }
.rcv-list li { margin-bottom: 3px; }
.rcv-signed { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rcv-signed img {
  height: 46px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}

/* ==================== 签收状态与签收管理（2026-10-27 第十轮） ==================== */
/* 员工端手册首页顶部：已签收/待签收状态条 */
.rcv-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; border-radius: 10px; margin-bottom: 10px;
  border: 1px solid var(--line); background: var(--card);
}
.rcv-bar.done { border-color: #b7e0c4; background: #f2fbf5; }
.rcv-bar.pending { border-color: #f0d6a8; background: #fdf8ee; }
.rcv-ico {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok, #16a34a); color: #fff; font-size: 14px; font-weight: 700;
}
.rcv-dot {
  flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%;
  background: #e8a33d; box-shadow: 0 0 0 3px rgba(232,163,61,.18);
}
.rcv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rcv-txt b { font-size: 14px; }
.rcv-txt .small { color: var(--ink-3); }

/* 签名图展示框：白底 + 细边框，签名多为透明底 PNG，白底才能看清笔迹 */
.sig-box {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; text-align: center; overflow: hidden;
}
.sig-box img { max-width: 100%; max-height: 170px; height: auto; display: inline-block; }

/* 详情弹窗内的键值网格（.ph-kv 是手册条文专用，此处为签收信息专用） */
.kv-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px; margin: 8px 0 4px;
}
.kv-grid .kv {
  display: flex; gap: 8px; font-size: 13.5px; line-height: 1.7; min-width: 0;
}
.kv-grid .k { flex: 0 0 78px; color: var(--ink-3); font-weight: 600; }
.kv-grid .v { flex: 1; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* 制度版本快照清单 */
.snap-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.snap-item {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  padding: 7px 10px; font-size: 13px; border-bottom: 1px dashed #eef1f6;
}
.snap-item:last-child { border-bottom: 0; }
.snap-item .mono { color: var(--ink-3); font-size: 12px; }
.snap-item em { margin-left: auto; color: var(--ink-3); font-style: normal; font-size: 12px; }

/* 弹窗内的次级小标题 */
.sec-sub {
  margin: 15px 0 7px; font-size: 13px; font-weight: 700; color: var(--ink-2);
  padding-left: 8px; border-left: 3px solid var(--dd-blue, #4b55c4);
}

/* 宽版弹窗：签收详情含签名图与多列表格，需要更宽版面 */
.modal.wide { max-width: 860px; }

/* 热词排行条：关键词 + 比例条 + 次数 */
.hotrank { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.hr-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.hr-k { flex: 0 0 132px; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.hr-bar {
  flex: 1; min-width: 40px; height: 11px; border-radius: 6px;
  background: #eef1f6; overflow: hidden;
}
.hr-bar i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #6b76e0, #4b55c4);
}
.hr-n { flex: 0 0 auto; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.hr-zero { margin-left: 5px; color: #c0392b; font-style: normal; font-size: 11.5px; }

/* 未签收行 / 零命中标记 */
.tbl tr.row-warn { background: #fdf8ee; }
.txt-warn { color: #c0392b; font-weight: 700; }

/* 重置签收弹窗里的复选框行 */
.ck {
  display: flex; align-items: center; gap: 7px; margin: 10px 0 2px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.ck input { width: auto; margin: 0; }

/* 移动端：键值网格收成单列，热词关键词列变窄，避免挤压 */
@media (max-width: 700px) {
  .kv-grid { grid-template-columns: minmax(0, 1fr); }
  .hr-k { flex: 0 0 96px; }
  .snap-item em { margin-left: 0; }
}