/* 钦合投资
   视觉原则:B 端企业财务系统 —— 低饱和商务配色、克制留白、层级清晰、
   适配财务人员长时间盯屏。表格以“可编辑的月度结账底稿”呈现:平时就是一张
   干净的报表(浅灰表头 / 浅灰分组条 / 极简细线),鼠标移到哪一行才露出编辑框。
   语义色只表达正负:正数浅稳重绿、负数柔和红、零值灰;不再用高饱和红绿区分收支类别。
*/
:root {
  --sidebar-w: 220px;
  --content-max: 1200px;   /* 主内容区上限:大屏左右留白,表格不被过度拉伸 */
  --card: #ffffff;
  --brand: #165dff;        /* 主色:企业蓝(飞书/Arco 同源) */
  --brand-dark: #0e42d2;
  --brand-soft: #f0f5ff;
  --ink: #1d2129;          /* 主文字 */
  --ink-2: #4e5969;        /* 次级文字 */
  --muted: #86909c;        /* 弱化文字、零值 */
  --line: #f2f3f5;         /* 极简细线(行分隔) */
  --line-2: #e5e6eb;       /* 略重的线(表头下缘 / 合计上缘) */
  --page: #f7f8fa;         /* 页面底 */
  --head-bg: #f7f8fa;      /* 表头浅灰 */
  --group-bg: #f2f3f5;     /* 分组标题浅灰(取消深色底) */
  --total-bg: #f2f3f5;     /* 合计行底色(与分组行同色,靠加粗+上缘细线区分) */
  --hover: #f7f8fa;        /* 行悬停 */
  --pos: #00b42a;          /* 正数 */
  --neg: #f53f3f;          /* 负数 */
  --warn: #ff7d00;
  --side-bg: #2a3342;      /* 浅炭灰商务侧栏 */
  --side-fg: #c9cdd4;
  --side-fg-strong: #ffffff;
}

body {
  background: var(--page);
  font-size: 14px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 侧边栏布局 ---------- */
.app-shell { min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--side-bg);
  color: var(--side-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-sidebar .brand {
  padding: 18px 20px;
  /* 名称较长(「钦合投资」),字号略收紧并压缩行距,保证侧栏里排得舒服 */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--side-fg-strong);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-sidebar .brand i { color: #8fb3e0; margin-right: 8px; }

.app-sidebar nav { flex: 1; padding: 10px 8px; overflow-y: auto; }

.app-sidebar .nav-link {
  position: relative;
  color: var(--side-fg);
  padding: 9px 12px 9px 14px;
  border-radius: 6px;
  margin-bottom: 1px;
  font-size: 13.5px;
  transition: color .15s, background-color .15s;
}
.app-sidebar .nav-link i { margin-right: 10px; width: 18px; text-align: center; font-size: 15px; }
.app-sidebar .nav-link:hover { color: var(--side-fg-strong); background: rgba(255,255,255,.05); }
/* 选中态:左侧细竖线 + 文字变白,不再整块填色(原来大块蓝底太抢眼) */
.app-sidebar .nav-link.active {
  color: var(--side-fg-strong);
  background: rgba(255,255,255,.06);
  font-weight: 600;
}
.app-sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--brand);
}

.app-sidebar .menu-sep { border-top: 1px solid rgba(255,255,255,.07); margin: 10px 6px; }

/* 底部次要信息(登录人 / 页面生成时间)弱化到几乎不打扰 */
.sidebar-foot { padding: 10px 20px 14px; font-size: 10.5px; line-height: 1.6; color: #6e7887; border-top: 1px solid rgba(255,255,255,.05); }

.app-main { min-width: 0; }

.app-topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.page-title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: .2px; }

/* 主内容区:定宽居中(大屏左右留白),不再随浏览器铺满 */
.app-content { max-width: var(--content-max); margin-left: auto; margin-right: auto; padding-top: 20px !important; }

.role-badge {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 500;
}
.role-admin   { background: #eef2f8; color: #45536b; }
.role-finance { background: var(--brand-soft); color: var(--brand-dark); }
.role-viewer  { background: #f2f4f7; color: #5b6474; }
/* 报销侧角色（key 沿用 manager/employee，界面显示「业务负责人 / 业务员」） */
.role-manager { background: #eaf1fb; color: #35507a; }
.role-employee { background: #f3f0fb; color: #55457a; }

/* ---------- 卡片:8px 圆角 + 柔和阴影 + 极简细线 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
  font-size: 13.5px;
  padding: 10px 14px;
}
.table { margin-bottom: 0; --bs-table-border-color: var(--line); }
.table thead th {
  background: var(--head-bg);
  font-weight: 600;
  color: #5a6577;
  font-size: 12.5px;
  letter-spacing: .2px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  /* Bootstrap 表头默认 vertical-align:bottom,与数据行(middle)不齐;
     双层表头(工资表)尤为明显,统一改为居中 */
  vertical-align: middle;
}
.table td { vertical-align: middle; color: var(--ink); border-color: var(--line); }
/* 行高收一档:B 端财务表格一屏能多看几行(仍留足呼吸感,长时间看不累) */
.table > :not(caption) > * > * { padding-top: 6px; padding-bottom: 6px; }
.table-hover > tbody > tr:hover > * { background-color: var(--hover); }

/* 固定表头:让容器自身作为纵向滚动区。
   注意:Bootstrap .table-responsive 带 overflow:auto,会使 sticky 锚定到该容器而非视口;
   若再用 top:60px「让出顶栏」,反而把表头整体下压 60px 并在表格顶部露出空白/压住前几行数据。
   高度按企业后台规范固定 500px:数据少时不出现滚动条,列多时底部/右侧各自可滚动。 */
.tbl-sticky { max-height: 500px; overflow: auto; }
.tbl-sticky thead th { position: sticky; top: 0; z-index: 5; background-clip: padding-box; }
/* 两行表头(工资表):第二行吸附在第一行正下方;偏移量由 JS 实测写入 --tbl-row1-h,
   避免硬编码行高在字体/缩放变化时产生缝隙(缝隙会露出 tbody 内容) */
.tbl-sticky.tbl-2row thead tr:nth-child(1) > th { top: 0; z-index: 6; }
.tbl-sticky.tbl-2row thead tr:nth-child(2) > th {
  top: var(--tbl-row1-h, 26px);
  box-shadow: 0 1px 0 #d9e0ea, 0 3px 6px rgba(15, 23, 42, .05);
}

/* 紧凑列宽(报表类表格):宽屏下富余宽度全被科目/名称列吃掉,金额列被推到卡片最右侧,
   科目与金额之间留下大片空白,查阅者要横跨半屏才能把两个数对上。
   规则:除最后一列(操作/占位列)外,列宽一律按内容收缩;最后一列吸收富余宽度。
   这样金额紧跟科目名,留白集中到行末——行底边线仍横贯整张卡片,表格不会被截断。
   注:!important 是为了压掉模板里给金额/操作列写的 16%/22%/64px 等百分比宽度。 */
.tbl-tight > thead > tr > :not(:last-child),
.tbl-tight > tbody > tr > :not(:last-child),
.tbl-tight > tfoot > tr > :not(:last-child) { width: 1px !important; white-space: nowrap; }
.tbl-tight > thead > tr > :last-child,
.tbl-tight > tbody > tr > :last-child,
.tbl-tight > tfoot > tr > :last-child { width: auto !important; }

/* 报表卡片随内容收紧(靠左):列宽改成按内容自适应(tbl-tight)后,若卡片仍撑满整行,
   右侧会留下一大片空白(用户明确要求把这块删掉)。max-content 让卡片边到内容为止,
   左对齐排布(居中试过,用户觉得不好看);窄屏时退化为满宽,
   内部表格仍由 .table-responsive 横向滚动。
   多卡片的栅格页(收支明细表)用 .col-auto 达到同样效果。 */
/* 报表卡片:通栏铺满内容区(内容区已被 --content-max 限制,不会过度拉伸) */
.card-fit { width: 100%; }
/* 费用支出明细表:卡片随内容收窄 —— 科目名称列(360px)+ 金额列 + 操作列,
   金额列成为表格最右列、贴着卡片右缘,行尾不再留一大片空白;
   窄屏用 max-width 兜住,内部表格仍由 .table-responsive 横向滚动。 */
.card-fit-shrink { width: fit-content; max-width: 100%; }

/* 模板卡片之间的间距统一 24px */
.sum-row { margin-bottom: 24px; }

/* 标题下的灰色小号说明行(如收支明细表的报表口径说明) */
.hint-line { margin: -6px 0 16px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* 顶栏次要信息(登录人 / 角色):浅灰小字弱化 */
.topbar-user { color: var(--muted); font-size: 12.5px; }

/* 查阅者(老板)页顶的"数据截止时间"条：强调这是冻结的已上报版本，不是当前草稿 */
.published-bar {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px;
  background: #eef4ff; border: 1px solid #c7d7fe; border-radius: 999px;
  color: #3538cd; font-size: 12.5px; line-height: 1.6;
}

/* 查阅者(老板)视角：隐藏"解释口径 / 怎么录入"的灰色小字，只留数据本身。
   body 上挂了 role-<角色>，一条规则即可覆盖全部页面：
   - .sum-sub 是各页汇总卡的副标题（如"含公司保险及公积金""可分红总额 − 已分配"）
   - 结余卡片里的公式标签（本月利润 / 留存利润 / 股东分红 后面的说明） */
body.role-viewer .sum-sub,
body.role-viewer #balance-table .small-hint { display: none !important; }

/* 工资表:按要求全表常规字重(取消加粗),汇总卡与合计行同样不加粗 */
#salary-table th, #salary-table td,
.sum-row-flat .sum-label, .sum-row-flat .sum-value { font-weight: 400 !important; }

/* 内容型卡片内边距统一 24 / 32(表格卡片保持表格满铺,不在此列) */
.card-body { padding: 24px 32px; }

/* 表格高度跟随内容:数据多时才出现内部滚动(默认不撑满屏幕) */
.tbl-cap { max-height: 500px; overflow: auto; }
.tbl-cap thead th { position: sticky; top: 0; z-index: 5; background-clip: padding-box; }

/* 总览页指标卡:与各报表页的汇总小卡同一视觉(白底 / 8px / 柔和阴影 / 16-20 内边距) */
.kpi-card .card-body { padding: 16px 20px !important; }
.kpi-card .kpi-label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.kpi-card .kpi-label i { font-size: 14px; color: var(--muted); }
.kpi-card .kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-card .kpi-delta { margin-top: 4px; font-size: 12px; color: var(--muted); }
/* 指标卡整卡可点:直达对应月表。悬停只加边框与阴影,不改内部排版,避免数字跳动 */
a.kpi-link { color: inherit; text-decoration: none; }
a.kpi-link:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(22, 93, 255, .12); }
a.kpi-link:hover .kpi-label { color: var(--brand-dark); }
a.kpi-link:hover .kpi-label i { color: var(--brand); }

/* 汇总小卡片行(费用表顶部):补住表格上方的纵向留白,一屏看到总量 */
.sum-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
/* 三卡/两卡行(分红表、收支表等):列数随卡片数调整 */
.sum-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sum-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sum-card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(29,33,41,.04), 0 2px 6px rgba(29,33,41,.03);
  padding: 16px 20px;
}
.sum-card .sum-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.sum-card .sum-label i { font-size: 14px; color: var(--muted); }
.sum-card .sum-value { font-size: 22px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sum-card .sum-sub { margin-top: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 767.98px) { .sum-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 金额:语义色只表达正负 ---------- */
.money-inc { color: var(--pos); font-weight: 600; font-variant-numeric: tabular-nums; }
.money-dec { color: var(--neg); font-weight: 600; font-variant-numeric: tabular-nums; }
.money-num { font-variant-numeric: tabular-nums; }
/* 报表数值列统一等宽数字,方便上下扫读 */
.amount-cell, .famt, .ramount, .item-input,
table input[inputmode="decimal"], .ledger-total td { font-variant-numeric: tabular-nums; }
/* 零值统一灰度(脚本识别内容为 0 的金额元素后加 .is-zero);
   带上语义色类的零值也要压成灰,所以用更高优先级覆盖 .text-danger/.text-success 等 */
.is-zero,
.is-zero.text-danger, .is-zero.text-success, .is-zero.text-warning,
.is-zero.money-inc, .is-zero.money-dec { color: var(--muted) !important; font-weight: 400 !important; }
/* 月份链接:报表明细行首列 */
a.month-link { color: var(--ink); font-weight: 600; text-decoration: none; }
a.month-link:hover { color: var(--brand-dark); text-decoration: underline; }

/* 费用表里「报销：谁 · 单号」的来源标签:小字可点,不抢科目名与金额的视线 */
.reimb-src .reimb-link { color: var(--brand); text-decoration: none; white-space: nowrap; }
.reimb-src .reimb-link:hover { color: var(--brand-dark); text-decoration: underline; }

.stat-card { border-left: 3px solid var(--brand); }
.stat-card .stat-label { color: var(--ink-2); font-size: 13px; }
.stat-card .stat-value { font-size: 25px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.stat-card .stat-delta { font-size: 12px; }

.chart-box { width: 100%; height: 300px; }
.chart-box-sm { width: 100%; height: 270px; }

.badge-type-income  { background: #fbf1f0; color: var(--neg); }
.badge-type-expense { background: #f0f7f3; color: var(--pos); }
.badge-type-transfer{ background: #fdf9f2; color: var(--warn); }

/* 登录页:柔和的深灰蓝渐变,不用刺眼亮色 */
.login-wrap {
  min-height: 100vh;
  background: linear-gradient(150deg, #2b323c 0%, #3d6fb4 100%);
}
.login-card { width: 400px; max-width: 94vw; border: 0; border-radius: 12px; }
.login-card .brand { font-size: 19px; font-weight: 600; color: var(--ink); }

/* ---------- 员工报销:共享填报入口(不登录,手机上也要好填) ---------- */
.fill-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 14px 56px;
  min-height: 100vh;
}
.fill-brand {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.fill-brand i { color: var(--brand); }
.fill-foot {
  margin-top: 18px;
  text-align: center;
}
/* 填报明细表的列宽：类目列要放得下最长的类目名（如「技术软件相关费用」）。
   手机上整表被压缩，类目列从「说明」列抽宽度，避免下拉闭合后文字被截断。
   table-layout 必须是 fixed：auto 下这些百分比只是建议值，会被「说明」列的最小内容宽度
   和删除按钮的实际宽度挤回去（实测 48% 只拿到 140px）。列内都是 width:100% 的输入框/下拉，
   fixed 不会撑破。 */
.item-table { table-layout: fixed; }
/* 科目改成两级下拉后拆成两列：一级放「房租物业及电费」这类长名，二级放具体名目 */
.item-table .col-l1 { width: 24%; }
.item-table .col-cat { width: 26%; }
.item-table .col-amt { width: 20%; }
.item-table .col-del { width: 44px; }
/* 删除按钮右对齐，去掉左内边距才放得进 44px 的列（否则按钮顶出单元格、整表横向滚动） */
.item-table td:last-child,
.item-table th:last-child { padding-left: 0; }
@media (max-width: 575.98px) {
  .item-table .col-l1 { width: 30%; }
  .item-table .col-cat { width: 32%; }
}
/* 发票缩略图:固定高度,避免长短不一的照片把卡片撑歪 */
.att-thumb {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  display: block;
}
.att-icon {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page);
  border-radius: 6px;
  border: 1px solid var(--line-2);
  font-size: 34px;
  color: var(--muted);
}
/* 审批时间线 */
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 12px 18px;
  border-left: 1px solid var(--line-2);
  font-size: 13.5px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

/* 顶栏未读角标（站内信铃铛） */
.notif-dot {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--neg);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

/* 列表操作链接 */
.action-link { text-decoration: none; }
.amount-cell { text-align: right; white-space: nowrap; }
.small-hint { font-size: 12px; color: var(--muted); }
.progress-thin { height: 6px; }

/* ---------- 统一按钮层级:B 端后台风格 ---------- */
.btn { border-radius: 6px; font-size: 13px; font-weight: 500; }
.btn-sm { font-size: 12.5px; padding: 3px 10px; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
.btn-outline-primary { color: var(--brand-dark); border-color: #c9d8ec; background: #fff; }
.btn-outline-primary:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line-2); background: #fff; }
.btn-outline-secondary:hover { background: #f4f6f9; border-color: var(--line-2); color: var(--ink); }
.btn-outline-danger { color: var(--neg); border-color: #e8cfcb; background: #fff; }
.btn-outline-danger:hover { background: #fbf4f3; border-color: var(--neg); color: var(--neg); }
/* 状态徽章式按钮(总览页各表状态):一律低饱和浅底,不用高对比填充色 */
.btn-success { background: #f0f7f3; color: var(--pos); border-color: #d7e8dd; }
.btn-success:hover, .btn-success:focus { background: #e7f2ec; color: var(--pos); border-color: #bcd8c7; }
.btn-info { background: var(--brand-soft); color: var(--brand-dark); border-color: #dbe6f5; }
.btn-info:hover, .btn-info:focus { background: #e4ecf7; color: var(--brand-dark); border-color: #c3d6ec; }
.btn-warning { background: #fdf9f2; color: var(--warn); border-color: #efe2cd; }
.btn-warning:hover, .btn-warning:focus { background: #fbf3e6; color: var(--warn); border-color: #e4d3b4; }
.btn-outline-warning { background: #fdf9f2; color: var(--warn); border-color: #efe2cd; }
.btn-outline-warning:hover { background: #fbf3e6; color: var(--warn); border-color: #e4d3b4; }
.btn-danger { background: var(--neg); border-color: var(--neg); }
.btn-danger:hover, .btn-danger:focus { background: #ab473d; border-color: #ab473d; }
.btn-link { color: var(--brand); }
.btn-link:hover { color: var(--brand-dark); }

/* ---------- 提示条:低饱和,不抢报表本身 ---------- */
.alert { border-radius: 8px; border-color: var(--line); font-size: 13px; }
.alert-light { background: #fbfcfd; border-color: var(--line); color: var(--ink-2); }
.alert-info { background: #f4f8fd; border-color: #dde7f4; color: #3d5a80; }
.alert-warning { background: #fdf9f2; border-color: #efe2cd; color: #7c6127; }
.alert-danger { background: #fdf5f4; border-color: #eed6d2; color: #8f4038; }
.alert-success { background: #f2f8f4; border-color: #d7e8dd; color: #356a4f; }

/* Bootstrap 语义色统一收到低饱和色板(导入结果、员工在职等徽章) */
.text-success { color: var(--pos) !important; }
.text-danger { color: var(--neg) !important; }
.text-warning { color: var(--warn) !important; }
.bg-danger-subtle { background: #fbf1f0 !important; }
.bg-success-subtle { background: #f0f7f3 !important; }
.bg-warning-subtle { background: #fdf9f2 !important; }

/* ============================================================
   结账底稿组件:卡片顶线 / 深墨组条 / 双线结账行 / 双态录入行
   ============================================================ */

/* 卡片顶线只保留 2px 的轻标识,不做大色块 */
.card.inc-top      { border-top: 2px solid var(--pos); }
.card.dec-top      { border-top: 2px solid var(--neg); }
.card.brand-top    { border-top: 2px solid var(--brand); }
.card.neutral-top  { border-top: 2px solid var(--line-2); }
.card.inc-top .card-header i     { color: var(--pos); }
.card.dec-top .card-header i     { color: var(--neg); }
.card.brand-top .card-header i   { color: var(--brand); }
.card.neutral-top .card-header i { color: var(--ink-2); }

/* 分组标题条:浅灰底深灰字(替换原深墨底白字),组小计用主文字色而非荧光绿/亮蓝;
   只设上下内边距,左右沿用本表数据行的 padding,组小计才能与明细数字严格对齐 */
tr.ledger-bar > td {
  background: var(--group-bg) !important;
  color: var(--ink-2);
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 1px solid var(--line-2) !important;
  border-bottom: 1px solid var(--line-2) !important;
  white-space: nowrap;
}
div.ledger-bar { background: var(--group-bg); color: var(--ink-2); }
.ledger-bar .ledger-title { font-weight: 600; color: var(--ink); }
.ledger-bar .ledger-meta { font-size: 11.5px; color: var(--muted); margin-left: 8px; }
tr.ledger-bar .group-sub { float: right; font-weight: 600; font-size: 13px; color: var(--ink); }
div.ledger-bar .group-sub { font-weight: 600; font-size: 13px; color: var(--ink); }
.ledger-bar.bar-blue  .group-sub { color: var(--ink); }
.ledger-bar.bar-green .group-sub { color: var(--ink); }
/* 组条上的行内操作(如“从工资表取数”):不换行,避免被窄列挤成竖排 */
.ledger-bar .btn-link { color: var(--brand-dark) !important; font-size: 12px; white-space: nowrap; }
.ledger-bar .btn-link:hover { color: var(--brand) !important; text-decoration: underline; }

/* 分组折叠:标题左侧小三角,收起该组明细(只隐藏明细行,组条与组小计始终可见) */
.grp-toggle {
  border: 0;
  background: transparent;
  padding: 0 6px 0 0;
  color: var(--muted);
  line-height: 1;
  vertical-align: -1px;
  cursor: pointer;
}
.grp-toggle:hover { color: var(--ink); }
.grp-toggle i { display: inline-block; font-size: 10px; transition: transform .15s; }
tr.ledger-bar.is-collapsed .grp-toggle i,
tr.item-row.is-collapsed .grp-toggle i { transform: rotate(-90deg); }
/* 费用表:有独立组条行,收起时保留组条(仍能看到组小计),其余行隐藏 */
tbody.group-body.is-collapsed > tr:not(.ledger-bar) { display: none; }
/* 资金表:分区标题是首行的 rowspan 单元格,收起时保留首行,其余明细隐藏 */
tbody.group-body.is-collapsed > tr.item-row:first-child { display: table-row; }

/* 合计行:浅底 + 一条细线收口,不再用高对比双墨线 */
tr.ledger-total > td {
  background: var(--total-bg) !important;
  border-top: 1px solid var(--line-2) !important;
  /* 上下内边距与数据行一致(6px),左右沿用数据行 padding,保证合计行与明细行等高、数字同线 */
  padding-top: 6px;
  padding-bottom: 6px;
  color: var(--ink);
  font-weight: 600;
}
/* 卡片内条目的合计行(收支明细表收入/支出小计等) */
.ledger-inline-total {
  border-top: 1px solid var(--line-2) !important;
  padding-top: 8px !important;
  margin-top: 2px;
}

/* 工资表顶层分组行(跨列组名):浅灰底,与列名行分层但不抢眼 */
tr.ledger-top > th {
  background: var(--group-bg) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-2) !important;
  font-weight: 600;
  font-size: 12px;
}
/* 自动计算列:表头与单元格极淡底,与手填列区分 */
.calc-head, .calc-cell { background: #f8fafc !important; }
.calc-head { color: var(--brand-dark) !important; }

/* ---------- 双态录入行:平时像印刷报表,悬停/聚焦才露出编辑框 ---------- */
/* 金额输入框定位:inline-flex + 单元格右对齐(text-end) ——
   此前用 flex 的自动外边距(ms-auto),在部分浏览器/内嵌浏览器中不生效,
   导致输入框贴左、数字与合计行错位。改成 inline-flex 后由 text-align 定位,
   兼容性更广,保证输入框与合计行数字落在同一条竖线上。
   右内边距归零 + 外移 1px 抵消边框:输入框自带的 8px 内边距/1px 边框会把数字
   左推 9px,导致明细行数字与表头、组小计、合计行的数字不在同一条竖线上。
   不限定 .item-row:收支表「留存利润」等合计区录入框在普通行内,同样要对齐。
   注:不再用 max-width:100% 限宽——列宽已改为按内容自适应(tbl-tight),
   百分比限宽与内容宽度互相循环,会把输入框压到几十像素。 */
.table .item-row .amt-field { display: inline-flex !important; width: auto !important; }
.table .amt-field { margin-right: -1px !important; }
.table .amt-field .form-control { min-width: 0 !important; padding-right: 0 !important; width: 7rem; height: 28px; min-height: 28px !important; }
.table .amt-field .input-group-text { padding-right: 0 !important; }
/* 金额列的舒适固定宽度:列宽改成按内容自适应(tbl-tight)后,
   .form-control 的 width:100% 与内容宽度互相循环会把输入框塌缩到几十像素;
   只读版数字也需要一点余量,于是给两者一个统一的最小宽度。 */
.table .amt-text { min-width: 7rem; }

/* 名称列同理:录入框自带 8px 左内边距,会让明细行科目名比组名(纯文本)右移 8px。
   高度与金额框统一 28px:否则名称框(31px)会把数据行撑到 44px,与 40px 的纯文字行不齐。 */
.table .name-field { padding-left: 0 !important; margin-left: -1px !important; height: 28px; min-height: 28px !important; }
/* 比例列输入框收窄:原 7rem + % 后缀会超过列宽而换行(换行把整行撑到 72px)。
   带 % 后缀的输入组给固定宽度,保证输入框与后缀在同一行。 */
.table .rratio { width: 4.5rem !important; }
.table .amt-field:has(.input-group-text) { width: 6.5rem !important; }
/* 组条上的行内按钮(如「从工资表取数」)压低,组条与数据行同为 40px */
.ledger-bar .btn { height: 24px; line-height: 1.2; }
/* 工资表「就地编辑」单元格:静止时与普通文字完全一致(无边框/无内边距/同字号/右对齐),
   悬停给一点底色提示可编辑,聚焦才显出输入框——避免满屏输入框把表格搞得看不清。
   聚焦用 inset 阴影而不是 border,避免出现边框时文字位移 1px。 */
.table .salary-cell {
  border: 0; background: transparent; padding: 0 1px; width: 100%; min-width: 5.5rem;
  height: 26px; min-height: 26px !important; font-size: inherit; line-height: 26px;
  text-align: right; color: inherit; font-variant-numeric: tabular-nums; box-shadow: none;
}
.table .salary-cell:hover { background: var(--brand-soft); border-radius: 4px; }
.table .salary-cell:focus {
  background: #fff; border-radius: 4px; outline: none;
  box-shadow: inset 0 0 0 1px var(--brand), 0 2px 8px rgba(22, 93, 255, .15);
}
/* 资金表备注列:列宽随字数自然向右延伸,不换行也不截断(过长时由外层 .table-responsive 横向滚动)。
   只读版是纯文本,列宽跟着文字走;录入版的输入框用 field-sizing 随内容变宽,不支持时退回固定宽度。 */
.table .note-field { height: 28px; min-height: 28px !important; width: 200px; }
.table .note-text { display: inline-block; white-space: nowrap; line-height: 1.3; vertical-align: middle; }
@supports (field-sizing: content) {
  .table .note-field { field-sizing: content; width: auto; min-width: 11rem; max-width: 32rem; }
}
/* 资金表分区标题是两行(标题 + 月末小计),行距收紧,避免把整组行撑到 44px */
.table .group-name .small-hint { line-height: 1.25; }
/* 收支表「本月结余与利润分配」:4 行等高(里面字号有大有小,否则 41/44/49 参差) */
#balance-table > tbody > tr { height: 46px; }

/* 表头末端的脚注上标(如「营业支出*」)自带约 4.6px 步进宽度,会把右对齐的表头文字
   顶离该列右缘——看起来比下方数字左移。负右外边距抵消它的步进,
   让可见文字与数字落在同一条竖线上(星号本身仍留在文字右上角)。 */
.table thead th sup { margin-right: -.44em; }
.amt-field .input-group-text {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  transition: color .15s;
}
.amt-field .form-control {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.item-row:hover .amt-field .input-group-text,
.amt-field:focus-within .input-group-text { background: #fff; color: #64748b; }
.item-row:hover .amt-field .form-control,
.amt-field:focus-within .form-control { background: #fff !important; border-color: #d3dce8 !important; }
.amt-field:focus-within .form-control {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .18rem rgba(37,99,235,.12) !important;
}

/* 科目名称列（费用支出明细表）：宽度由 `--name-col-w` 控制（默认 360px，表头右边界可拖拽调整，
   见 sheet.html 的列宽脚本；拖好的宽度存在本机，双击手柄还原），文字**完整显示**——超出自动换行。
   列宽写在 td/th 上并加 !important，否则会被 .tbl-tight 的 width:1px 覆盖；
   white-space 必须显式改回 normal：.tbl-tight 给所有非末列统一加了 nowrap。 */
.tbl-tight > thead > tr > th.name-col,
.tbl-tight > tbody > tr > td.name-col {
  width: var(--name-col-w, 360px) !important;
  max-width: var(--name-col-w, 360px) !important;
  white-space: normal !important;
}
/* 列宽拖拽手柄：贴在表头「科目名称」右边界的内侧。表头 th 是 sticky，本身已是定位元素，
   绝对定位的浮层就挂在它身上 —— **不要给 th 加 position:relative**，那会盖掉
   `.tbl-cap thead th` 的 sticky（本规则的选择器优先级更高）。
   手柄**必须整块落在本列内**（right:0）：一旦向外延伸压到隔壁「金额」表头上，两个表头 z-index
   相同、金额表头 DOM 在后，手柄就被它盖住，鼠标按下去命中的是金额表头（实测踩到过）。
   平时不可见，靠近/拖动时才露竖线。 */
.col-grip {
  position: absolute; top: 0; right: 0; bottom: 0; width: 8px;
  cursor: col-resize; touch-action: none; z-index: 6;
}
.col-grip::after {
  content: ""; position: absolute; right: 0; top: 25%; bottom: 25%; width: 1px;
  background: var(--line-2); opacity: 0; transition: opacity .15s;
}
.col-grip:hover::after, .col-grip.dragging::after { opacity: 1; background: var(--brand); }
/* 表格右边缘的竖向拖拽条（2026-09-21 用户指名的位置）：整张表像窗口一样左右拉宽/收窄。
   `--grip-right` = 容器自身竖向滚动条的宽度（脚本实测写入），让拖拽条**正好压在表格右缘、
   不盖住滚动条** —— 盖住的话表格自身的滚动条就拖不动了。悬停/拖动时右缘亮一条竖线。 */
.card-fit-shrink { position: relative; }
.col-grip-edge {
  position: absolute; top: 0; right: var(--grip-right, 0px); bottom: 0; width: 8px;
  cursor: col-resize; touch-action: none; z-index: 7;
}
.col-grip-edge::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .15s;
}
.col-grip-edge:hover::after, .col-grip-edge.dragging::after { background: rgba(22, 93, 255, .35); }
/* 拖动过程中：整页禁止选中，光标保持列宽样式（否则鼠标一动就变成选中文字） */
html.col-dragging, html.col-dragging * { user-select: none !important; cursor: col-resize !important; }
/* 只读版科目名：整格铺满、长名称换行显示（不再用省略号 + 悬浮提示） */
.name-wrap { display: block; overflow-wrap: anywhere; }
/* 名称列里的录入框跟随列宽；多行框高度由页面脚本按内容撑开 */
.name-col .name-field { width: 100% !important; }
.name-col textarea.name-field { height: auto; resize: none; overflow: hidden; line-height: 20px; padding-top: 3px; padding-bottom: 3px; }
/* 其它表（收支/资金/分红）的名称列仍是单行固定宽度输入框 */
.name-field { width: 300px !important; }

.name-field {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.name-field::placeholder { color: #b4c1d3; }
.item-row:hover .name-field { border-color: #dbe2ec !important; background: #fff !important; }
.name-field:focus {
  background: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .18rem rgba(37,99,235,.12) !important;
}

/* 行内操作(删除× / 加行):常态隐藏,靠近该行才出现(报表页保持干净) */
.row-del { opacity: 0; border-color: transparent !important; transition: opacity .15s; }
.item-row:hover .row-del, .row-del:focus-visible { opacity: 1; }
.row-del:hover {
  border-color: #e8cfcb !important;
  background: #fbf4f3 !important;
  color: var(--neg) !important;
  opacity: 1;
}
.add-row-btn { color: var(--muted) !important; }
.add-row-btn:hover { color: var(--brand) !important; }

/* 触屏设备没有 hover:操作钮保持可辨,编辑框保持可见 */
@media (pointer: coarse) {
  .row-del { opacity: .55; }
  .amt-field .form-control, .name-field {
    border-color: #e2e8f0 !important;
    background: #fff !important;
  }
  .amt-field .input-group-text { background: #fff; border-color: #e2e8f0; color: #94a3b8; }
}

/* 关联到费用表/收支表的跳转链接(次级链接,不用高饱和色) */
a.dec-link { color: var(--brand-dark) !important; }
a.dec-link:hover { color: var(--brand) !important; }

/* ---------- 年月筛选框（报表页顶部：切换查看往期数据） ---------- */
.month-filter .form-select {
  width: auto;
  min-width: 90px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.month-filter .mf-month { min-width: 74px; }
.month-filter .btn-step {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}

/* 结账底稿表格中的录入框：名称列左对齐、金额列右对齐，贴近印刷报表观感 */
.table .item-row .name-field { color: var(--ink); }
.table .item-row .ramount,
.table .item-row .famt { text-align: right; }

/* ---------- 查阅者只读版：录入框 → 印刷体数字 ----------
   宽度由模板用 inline style 指定(与录入态输入框同宽);
   右内边距与录入态输入框归零后的取值保持一致(0),
   使只读数字与表头/组小计/合计的纯文本数字落在同一条竖线上。 */
.amt-text {
  display: inline-block;
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
/* 只读版名称列：与录入态输入框文字起点一致(内边距归零后均贴列内容左缘) */
.name-text { display: inline-block; color: var(--ink); }

/* 资金表左侧「资产类别」竖列:浅灰底 + 左侧一道细蓝线标识分区(替代原深墨竖列) */
.table .group-name {
  background: var(--group-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
  box-shadow: inset 3px 0 0 var(--brand);
}
.table .group-name .fw-semibold { color: var(--ink); }
.table .group-name .small-hint { color: var(--muted) !important; }
.table .group-name .g-sub { color: var(--ink); font-weight: 600; }

/* 子科目缩进:分组下的明细行首列缩进一档,层级一眼可辨但不动金额列(金额仍严格对齐) */
.table tbody tr.item-row > td:first-child { padding-left: 22px; }
/* 资金表首列是被 rowspan 的分区标题(不缩进),缩进落在其后的「账户/科目」列 */
.table tbody tr.item-row > td.group-name { padding-left: 9px; }
.table tbody tr.item-row > td.group-name + td { padding-left: 22px; }

/* 报表行高统一(40px):录入框行与纯文字行(分组条/合计行/列表行)同高,
   上下内边距都为 6px —— 保证逐行水平线对齐、文字与数字纵向不齐的问题不再出现 */
.tbl-tight > tbody > tr,
.tbl-tight > tfoot > tr,
#income-table > tbody > tr, #income-table > tfoot > tr,
#expense-table > tbody > tr, #expense-table > tfoot > tr { height: 40px; }

/* 表尾多条汇总(如资金表的流动资金/总资产):字号与数据行保持完全一致,
   仅靠淡底+双线+加粗区分,避免字号差异造成“数字没对齐”的观感 */
.table tfoot tr.ledger-total:last-child > td { border-top-width: 2px; }

/* ============================================================
   打印(查阅者把报表打印/存 PDF 传阅):
   隐藏侧栏/按钮/说明条/月份筛选;保留报表名与月份标题(如「收支明细表 · 2026-09」),
   录入框打印成纯数字;表头跨页重复;宽表用横向 A4。
   ============================================================ */
@media print {
  .app-sidebar, .btn, .btn-group, .add-row, .row-del, .grp-toggle,
  .alert, .month-filter, .sidebar-foot, .card-header .small-hint,
  .app-topbar .d-flex.align-items-center.gap-2 { display: none !important; }
  /* 打印不认折叠状态:明细一律展开,避免打印件缺行 */
  tbody.group-body > tr { display: table-row !important; }
  body { background: #fff; font-size: 12px; color: #000; }
  .app-shell { display: block !important; }
  /* 顶栏只保留报表标题,让打印件一眼能认出是哪张表、哪个月 */
  .app-topbar { display: block !important; position: static !important; height: auto !important;
                border: 0 !important; padding: 0 0 10px 0 !important; }
  .app-topbar .page-title { font-size: 16px !important; }
  .app-content { max-width: none !important; padding: 0 !important; }
  .card { border: 0 !important; box-shadow: none !important; }
  .card-header { border-bottom: 1px solid #999 !important; }
  .table-responsive { overflow: visible !important; }
  .table thead th { background: #fff !important; border-bottom: 1px solid #333 !important; }
  tr.ledger-total > td { background: #fff !important; }
  tr.ledger-bar > td, .table .group-name { background: #eee !important; color: #000 !important; }
  tr.ledger-bar .group-sub, .table .group-name .g-sub { color: #000 !important; }
  tr.ledger-top > th { background: #eee !important; color: #000 !important; }
  .amt-field .form-control, .name-field, .form-control, .form-select {
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; color: #000 !important; padding: 0 !important;
  }
  .amt-field .input-group-text { display: none; }
  .amt-text, .name-text { color: #000 !important; padding-right: 0; }
  a { color: #000 !important; text-decoration: none !important; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* ============================================================
   窄屏（手机 / 平板竖屏）：侧栏收窄但**保留菜单名称**——
   查阅者要一眼看清「收支明细表 / 费用明细表 / 工资表 / 资金情况表 / 分红表」,
   不能只给图标;报表本身仍横向滚动,数字不被压坏
   ============================================================ */
@media (max-width: 991.98px) {
  :root { --sidebar-w: 158px; }
  .app-sidebar .brand { font-size: 13px; padding: 13px 14px; }
  .app-sidebar .brand i { font-size: 16px; margin-right: 6px; }
  .app-sidebar .nav-link { font-size: 13px; padding: 9px 11px; }
  .app-sidebar .nav-link i { margin-right: 8px; font-size: 15px; width: 16px; }
  .sidebar-foot { display: none; }
  .app-content { padding-left: 12px !important; padding-right: 12px !important; }
  .card-header { flex-wrap: wrap; row-gap: 4px; }
  .table td, .table th { padding-left: 9px; padding-right: 9px; }
  .fs-4 { font-size: 1.25rem !important; }
}

@media (max-width: 575.98px) {
  :root { --sidebar-w: 132px; }
  .app-sidebar .brand { font-size: 12px; padding: 12px 10px; }
  .app-sidebar .brand i { font-size: 15px; margin-right: 5px; }
  .app-sidebar .nav-link { font-size: 12px; padding: 8px 9px; }
  .app-sidebar .nav-link i { margin-right: 6px; font-size: 14px; width: 15px; }
  .app-topbar { height: 52px; }
  .page-title { font-size: 14px; }
  .app-content { padding-top: 12px !important; }
  .alert { font-size: 12.5px; }
}

/* 业务上报「分账户收款汇总」里每个「月份 × 员工」的小计行：浅底 + 上与细线，跟总计行区分开 */
.subtotal-row > td { background: #f8fafc; border-top: 1px solid var(--line, #e6e8eb); }

/* 业绩明细表（版式 A：员工 × 业务项目 交叉表）——照飞书表格的观感：细边框、表头浅底、居中 */
.xlsx-cross { border-collapse: collapse; }
.xlsx-cross th, .xlsx-cross td { border: 1px solid #e6e8eb; padding: 6px 10px; }
.xlsx-cross thead th { background: #f6f8fa; font-weight: 600; white-space: nowrap; }
.xlsx-cross .xc-name { text-align: left; white-space: nowrap; background: #fbfcfd; }
.xlsx-cross .xc-cell { text-align: right; white-space: nowrap; }
.xlsx-cross .xc-total { background: #f6f8fa; }
.xlsx-cross .xc-sub { color: #6b7280; font-size: .85em; }
.xlsx-cross tfoot .ledger-total td { background: #eef2f6; font-weight: 600; }

/* ============ 工资核算页（2026-10-15 按他的要求整理） ============
   目标：顶部紧凑（左标题+月份、右常用操作+更多）、表格更紧、员工列固定、
        手机端自动切换成工资卡；金额不整体上蓝，只突出实发与公司总支出。 */
.sheet-head { row-gap: 6px; }
.sheet-h1 { font-size: 18px; font-weight: 600; letter-spacing: -.2px; margin: 0; white-space: nowrap; }
.sheet-head .month-filter { margin: 0; }
.tag-ok { background: #e7f6ec; color: #087443; border-radius: 4px; padding: 2px 7px; font-size: 12px; font-weight: 600; }
.hint-line { font-size: 12px; color: var(--muted); margin: -8px 0 12px; line-height: 1.6; }

/* 「更多」下拉里的表单按钮，看起来就是一条菜单项 */
.dropdown-menu .btn { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 6px;
  padding: 6px 12px; font-size: 14px; color: var(--ink); }
.dropdown-menu .btn:hover { background: #f4f6f9; }
.dropdown-menu .btn:disabled { color: var(--muted); }

/* 汇总卡：只把「实发工资 / 公司总支出」做重点 */
.sum-card.key { border-color: #d6e2f7; }
.sum-card.key .sum-value { font-size: 26px; font-weight: 700; }
.sum-card.key .sum-label { color: var(--ink); }

/* 表格更紧凑 + 突出两列关键金额 */
.salary-table > thead > tr > th,
.salary-table > tbody > tr > td,
.salary-table > tfoot > tr > td { padding: .3rem .45rem; font-size: 13px; }
.salary-table .salary-cell { padding: .2rem .35rem; font-size: 13px; min-width: 76px; }
.salary-table td.key-col, .salary-table th.key-col { font-weight: 600; background: #fbfcfe; }

/* 员工姓名列固定：横向滚动时钉在最左（表头两行都要钉） */
.tbl-sticky .salary-table tbody td:nth-child(2),
.tbl-sticky .salary-table thead tr:first-child th:nth-child(2) {
  position: sticky; left: 0; z-index: 4; background: #fff; box-shadow: 1px 0 0 var(--line-2);
}
.tbl-sticky .salary-table thead tr:first-child th:nth-child(2) { z-index: 7; }
.tbl-sticky .salary-table tfoot td:first-child { box-shadow: 1px 0 0 var(--line-2); }

/* 手机端：每位员工一张工资卡 */
.salary-cards { margin-top: 2px; }
.salary-card { background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; }
.salary-card .sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.salary-card .sc-name { font-size: 15px; font-weight: 600; }
.salary-card .sc-net { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.salary-card .sc-unit { font-size: 12px; color: var(--muted); font-weight: 400; }
.salary-card .sc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 3px 0; color: var(--ink-2); }
.salary-card .sc-row b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.salary-card .sc-row b.key { font-weight: 700; }
.salary-card .sc-g { margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.salary-card .sc-note { font-size: 12px; color: var(--ink-2); }
.salary-card details summary { font-size: 12px; color: #2563eb; cursor: pointer; margin-top: 6px; }
.salary-card .sc-acts { display: flex; gap: 8px; margin-top: 10px; }
.salary-card.sc-empty { text-align: center; color: var(--muted); padding: 24px 0; }
.sc-total { font-size: 13px; color: var(--ink-2); text-align: center; padding: 6px 0 2px; }

/* 手机端顶部收紧：标题＋月份一行装得下（去掉左右箭头，靠下拉切月） */
@media (max-width: 767.98px) {
  /* 手机上固定两行：第一行标题+月份，第二行操作按钮（都靠左/靠右对齐，不重叠） */
  .sheet-head { flex-direction: column; align-items: stretch !important; }
  .sheet-head > div { width: 100%; }
  .sheet-head > div:last-child { justify-content: flex-end; }
  .sheet-head > div:first-child { flex-wrap: wrap; min-width: 0; }
  .sheet-head .month-filter { flex-wrap: wrap; }
  .sheet-head .month-filter .btn-step { display: none; }
  .sheet-h1 { font-size: 16px; }
  .sheet-head .btn { font-size: 12px; padding: 3px 9px; }
  .sum-card.key .sum-value { font-size: 22px; }
  .sum-card .sum-value { font-size: 19px; }
}


/* =============== 工资表：发送给老板（版本/已读）与排版精修（2026-10-15） =============== */
/* 发送条：老板端显示"这是哪一版、谁发的、读过没"，财务端显示发送状态；两端共用一套样式 */
.send-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px; margin: -6px 0 14px;
  border: 1px solid var(--line-2); border-radius: 8px; background: #fbfcfe;
}
.send-bar .send-line { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; min-width: 0; }
.send-bar .send-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.send-bar .send-actions form { margin: 0; }
.tag-warn { background: #fff4e5; color: #a05a00; border-radius: 4px; padding: 2px 7px; font-size: 12px; font-weight: 600; }

/* 表头：两行分组表头统一高度与基线，列间留白一致（金额列右对齐已在 .amount-cell） */
.tbl-sticky.tbl-2row thead th { vertical-align: middle; padding: 6px 10px; font-size: 12.5px; }
.tbl-sticky.tbl-2row thead tr.ledger-top > th { padding-top: 7px; padding-bottom: 7px; }
/* 金额列给一个稳定的最小宽度，逐列对齐（序号/员工列例外） */
.salary-table th:not(:first-child):not(:nth-child(2)),
.salary-table td.amount-cell { min-width: 84px; }
/* 姓名列钉住时的列宽与底色（横向滚动时不留缝） */
.tbl-sticky .salary-table thead tr:first-child th:nth-child(2) { min-width: 96px; }
.tbl-sticky .salary-table tbody td:nth-child(2) { min-width: 96px; }

@media (max-width: 767.98px) {
  .send-bar { flex-direction: column; align-items: stretch; }
  .send-bar .send-actions { justify-content: flex-end; }
}

/* 工资表合计行加粗 + 三列重点（2026-10-15 §六）。
   ⚠ 必须带 !important 且放在文件末尾：上面第 223 行有一条早期要求
   「#salary-table th, #salary-table td { font-weight: 400 !important }」——"工资表全表取消加粗"，
   本次他明确要「合计行加粗」「应发/实发/公司成本适度突出」，以最新口径为准，只给这三列与合计行开例外。 */
#salary-table tfoot tr.ledger-total > td { font-weight: 600 !important; }
#salary-table thead th.key-col,
#salary-table tbody td.key-col { font-weight: 600 !important; }

/* ---------- 老板审阅横幅（2026-10-16 按他给的效果图重做：**只调样式/布局**，信息与逻辑不动） ----------
   结构：图标块 + 大字标题 + 状态胶囊 + 右侧「审阅人 | 审阅时间」；下面（备注/已处理/作废原因）小字；
   审批总额浅底一行；操作行＝大按钮 + 竖分隔 + 备注输入（底右角字数）；最底部一条分隔线 + ⓘ 说明。 */
.review-card { border: 1px solid #E5E8EF; border-radius: 16px; box-shadow: 0 2px 12px rgba(29, 33, 41, .06); }
.review-card .review-body { padding: 1.25rem 1.4rem 1rem; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.review-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  background: #EAF1FF; color: #2E6FF2;
  display: inline-flex; align-items: center; justify-content: center; font-size: 23px;
}
.review-title { font-size: 22px; font-weight: 700; color: #1D2129; letter-spacing: .2px; }
.review-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem;
  border-radius: 999px; font-size: 13.5px; font-weight: 500; background: #F2F3F5; color: #4E5969; }
.review-ok .review-badge { background: #E8F7EE; color: #1B8A4B; }
.review-issue .review-badge { background: #FFF4E0; color: #B45309; }
.review-handled .review-badge { background: #E8F1FF; color: #1D5FD0; }
.review-head .review-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .85rem;
  margin-left: .35rem; color: #6B7280; font-size: 15px; }
.review-meta-sep { display: inline-block; width: 1px; height: 18px; background: #E5E6EB; }
.review-sub { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; color: #86909C; font-size: 13px; }
.review-approval { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem;
  padding: .55rem .85rem; background: #F7F9FC; border-radius: 10px; color: #4E5969; font-size: 14px; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.15rem; }
.review-btn { height: 46px; padding: 0 1.5rem; border-radius: 10px; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; }
.review-btn-ok { background: #12A150; border: 1px solid #12A150; color: #fff; }
.review-btn-ok:hover { background: #0F8C45; border-color: #0F8C45; color: #fff; }
.review-btn-issue { background: #FFF7E8; border: 1px solid #F5C87A; color: #B45309; }
.review-btn-issue:hover { background: #FDEED3; border-color: #E9B45B; color: #96460A; }
.review-issue-form { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; flex: 1 1 520px; }
.review-note-wrap { flex: 1 1 auto; min-width: 18rem; border-left: 1px solid #E5E6EB; padding-left: 1.25rem; }
.review-note-label { display: block; margin-bottom: .35rem; color: #4E5969; font-size: 15px; }
.review-note { position: relative; }
.review-note .form-control { height: 52px; padding: .5rem 3.6rem .5rem .85rem; border-radius: 10px;
  background: #F2F6FD; border: 1px solid #E3E8F0; font-size: 15px; color: #1D2129; }
.review-note .form-control:focus { background: #fff; border-color: #9CBBF5; box-shadow: 0 0 0 3px rgba(46, 111, 242, .12); }
.review-note .form-control::placeholder { color: #A9B0BB; }
.review-note .review-count { position: absolute; right: .8rem; bottom: .45rem;
  font-size: 12.5px; color: #86909C; pointer-events: none; }
.review-foot { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #EDEFF3;
  color: #86909C; font-size: 15px; }
.review-admin-act { margin-top: 1rem; }
@media (max-width: 991.98px) {
  .review-head .review-meta { margin-left: 0; }
  .review-note-wrap { border-left: 0; padding-left: 0; flex: 1 1 100%; }
  .review-title { font-size: 20px; }
  .review-btn { height: 44px; }
}
.review-btn-handled { background: #fff; border: 1px solid #1D5FD0; color: #1D5FD0; }
.review-btn-handled:hover { background: #EAF1FF; border-color: #1D5FD0; color: #1848A8; }

/* ---------- 老板「月度经营报表」（2026-10-19 改版） ----------
   原则：数据优先、审阅轻量。工具条只占一行；KPI 卡是视觉重心；审阅默认折叠成一行。 */
/* 顶部窄工具栏 */
.ov-page-title { white-space: nowrap; }
.ov-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .1rem 0; color: var(--ink-2); font-size: 13px; }
.ov-toolbar .month-filter { margin: 0; }
.ov-pub { color: var(--muted); font-size: 12.5px; }
.ov-rv-sum { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; margin-left: auto; }
.ov-rv-who { color: var(--muted); font-size: 12.5px; }
.ov-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; white-space: nowrap;
  border-radius: 999px; font-size: 12.5px; font-weight: 500; background: #F2F3F5; color: var(--ink-2); }
.ov-badge-ok { background: #E8F7EE; color: #1B8A4B; }
.ov-badge-issue { background: #FFF4E0; color: #B45309; }
.ov-badge-handled { background: #E8F1FF; color: #1D5FD0; }

/* KPI：≥768 五等宽，手机单列 */
.ov-kpis .kpi-card .card-body { padding: 14px 16px !important; }
.ov-kpis .kpi-card .kpi-label { font-size: 12.5px; }
.ov-kpis .kpi-card .kpi-value { font-size: 24px; }
.kpi-card .kpi-value-muted { color: var(--ink-2); }
.kpi-info { margin-left: auto; color: var(--muted); cursor: help; font-size: 13px; line-height: 1; }
.kpi-info:hover, .kpi-info:focus { color: var(--brand); outline: none; }
.kpi-card .kpi-delta { display: flex; flex-direction: column; gap: 1px;
  margin-top: 6px; font-size: 12px; color: var(--muted); }
.kpi-delta-main { white-space: nowrap; }
.kpi-mom { white-space: nowrap; }
.kpi-prev { font-size: 11px; white-space: nowrap; }
.kpi-mom { font-variant-numeric: tabular-nums; font-weight: 600; }
.kpi-up { color: #16a34a; }
.kpi-down { color: #dc2626; }
.kpi-prev { color: var(--muted); font-weight: 400; }
.kpi-pct { margin-left: .15rem; }
.kpi-more { margin-top: .45rem; }
.kpi-more-btn { font-size: 12.5px; color: var(--brand); }
a.kpi-link:hover .kpi-more-btn { text-decoration: underline; }

/* 审阅模块：默认折叠成一行 */
.ov-review { border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); }
.ov-review > summary { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .55rem .85rem; cursor: pointer; list-style: none; }
.ov-review > summary::-webkit-details-marker { display: none; }
.ov-review > summary:hover { background: #fbfcfe; }
.ov-rv-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem;
  font-size: 12.5px; color: var(--muted); min-width: 0; }
.ov-rv-label { color: var(--ink-2); font-weight: 600; }
.ov-rv-note { color: var(--ink-2); }
.ov-rv-warn { color: #B45309; }
.ov-rv-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .28rem .7rem; border: 1px solid var(--line-2); border-radius: 8px;
  font-size: 12.5px; color: var(--brand); background: #fff; }
.ov-rv-toggle .when-open { display: none; }
.ov-review[open] .ov-rv-toggle .when-open { display: inline; }
.ov-review[open] .ov-rv-toggle .when-closed { display: none; }
.ov-review[open] .ov-rv-toggle i { transform: rotate(180deg); }
.ov-rv-body { padding: .2rem .85rem .8rem; border-top: 1px dashed var(--line-2); }
.ov-approval { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: .6rem 0;
  padding: .45rem .7rem; background: #F7F9FC; border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.ov-rv-sub { color: var(--muted); font-size: 12px; }
.ov-rv-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.ov-rv-btn { height: 40px; padding: 0 1.1rem; border-radius: 9px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.ov-rv-ok.is-on { background: #12A150; border-color: #12A150; color: #fff; }
.ov-rv-issue.is-on { background: #FFF7E8; border-color: #F5C87A; color: #B45309; }
.ov-rv-btn:not(.is-on) { opacity: .7; }
.ov-rv-btn:not(.is-on):hover { opacity: 1; }
.ov-rv-note-box { position: relative; margin-top: .6rem; }
.ov-rv-note-box .form-control { height: 40px; padding: .35rem 3.6rem .35rem .7rem; font-size: 13.5px; }
.ov-rv-note-box .review-count { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--muted); pointer-events: none; }
.ov-rv-tip { margin-top: .45rem; font-size: 12px; color: var(--muted); }

/* 年度累计 */
.ov-ytd-label { font-size: 12.5px; color: var(--muted); }
.ov-ytd-value { margin-top: .2rem; font-size: 19px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 767.98px) {
  .ov-toolbar { gap: .4rem; }
  .ov-rv-sum { margin-left: 0; order: 9; width: 100%; }
  .ov-kpis .kpi-card .kpi-value { font-size: 22px; }
  .ov-rv-actions { flex-direction: column; }
  .ov-rv-btn { width: 100%; height: 46px; }
  .kpi-info { font-size: 15px; padding: 2px; }
  .ov-ytd .card-body { padding: 14px 12px; }
  .ov-ytd-label { font-size: 12px; }
  .ov-ytd-value { font-size: 13.5px; letter-spacing: -.3px; }
  .ov-page-title { font-size: 15px; }
}
/* 触屏 / 手机：取消卡片 hover 悬浮，只保留点击反馈 */
@media (hover: none), (max-width: 767.98px) {
  a.kpi-link:hover { border-color: var(--line-2); box-shadow: none; }
  a.kpi-link:hover .kpi-label { color: var(--ink-2); }
  a.kpi-link:hover .kpi-label i { color: var(--muted); }
  a.kpi-link:active { transform: scale(.995); }
}

/* 窄桌面（992~1199）：仍是五列等宽，字号收一档，保证金额不折行 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ov-kpis .kpi-card .card-body { padding: 12px 12px !important; }
  .ov-kpis .kpi-card .kpi-value { font-size: 15px; }
  .ov-kpis .kpi-card .kpi-label { font-size: 11px; white-space: nowrap; }
  .ov-kpis .kpi-card .kpi-delta { font-size: 11px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .ov-kpis .kpi-card .kpi-value { font-size: 18px; }
  .ov-kpis .kpi-card .kpi-label { font-size: 12px; }
}