/* ==========================================================================
   工资提成页可用性改造
   ① 表头吸顶 + 首列吸附：滚动时不再丢失列含义与人员上下文
   ② 合计行 + 汇总条：财务最关心的口径始终可见，输入即时重算
   ③ 行高压缩 + 金额右对齐：一屏能看更多人、数字可比
   只作用于 .payroll-page，不影响其它页面。
   ========================================================================== */

.payroll-page {
  /* 由 renderPayroll 依据顶栏实际高度写入，保证吸顶表头正好停在顶栏下方 */
  --payroll-sticky-top: 84px;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.payroll-page > *, .payroll-page .surface-body, .payroll-page .table-shell { min-width: 0; max-width: 100%; }

/* --- 1) 汇总条 ---------------------------------------------------------- */
.payroll-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid #e3ebf7;
  border-radius: var(--ui-radius, 12px);
  background: #e3ebf7;
  overflow: hidden;
}

.payroll-summary .payroll-kpi {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 14px;
  background: #fff;
}

.payroll-summary .payroll-kpi > span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}

.payroll-summary .payroll-kpi > strong {
  color: #16233d;
  font-size: 16px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payroll-summary .payroll-kpi.is-total {
  background: linear-gradient(180deg, #f4f8ff, #e9f1ff);
}

.payroll-summary .payroll-kpi.is-total > strong {
  color: #1d4ed8;
}

/* --- 2) 表格容器 -------------------------------------------------------- */
.payroll-page .payroll-table {
  min-width: 960px;
}

/* --- 3) 首列吸附（窄屏横向滚动时人员列不丢） ---------------------------- */
.payroll-page .payroll-table th:first-child,
.payroll-page .payroll-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  box-shadow: 1px 0 0 #e9eff9;
}

/* --- 4) 合计行 ---------------------------------------------------------- */
.payroll-page .payroll-table tfoot td {
  padding: 10px 12px;
  background: #f6f9ff;
  border-top: 1px solid #dbe6f7;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.payroll-page .payroll-table tfoot .payroll-foot-label {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f6f9ff;
  box-shadow: 1px 0 0 #e9eff9;
  color: #16233d;
}

.payroll-page .payroll-table tfoot .payroll-foot-num {
  text-align: right;
  color: #16233d;
}

.payroll-page .payroll-table tfoot .payroll-foot-total {
  color: #1d4ed8;
  font-size: 15px;
}

/* --- 5) 金额输入统一：右对齐 + 等宽数字 --------------------------------- */
.payroll-page .payroll-table > tbody > tr > td > input[type="number"] {
  width: 100%;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.payroll-page .payroll-table .row-card input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.payroll-page .payroll-table input[data-payroll-total] {
  font-weight: 800;
  color: #16233d;
}

/* 特殊补贴：金额与备注两个输入框原本都是整格宽度且不换行，
   备注框会溢出单元格、压在「项目提成」列的文字上（老问题）。
   这里把两者各压到半格，仍并排一行，不改行高。 */
.payroll-page .payroll-table > tbody > tr > td > input[data-payroll-subsidy],
.payroll-page .payroll-table > tbody > tr > td > input[data-payroll-subsidy-note] {
  width: calc(50% - 14px);
  min-width: 0;
  vertical-align: top;
}

/* --- 6) 行高压缩 -------------------------------------------------------- */
.payroll-page .payroll-table th {
  height: 42px;
  padding: 8px 12px;
}

.payroll-page .payroll-table td {
  padding: 8px 12px;
}

.payroll-page .payroll-table td .empty {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 12px;
}

.payroll-page .payroll-table td .muted {
  margin-top: 2px;
  font-size: 11.5px;
}

.payroll-page .payroll-table .row-card {
  min-height: 34px;
  padding: 5px 8px;
}

/* 明细保留全部行，通过独立滚动查看，避免单个员工撑高整张表。 */
.payroll-page .payroll-table .compact-list {
  max-height: 76px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* --- 7) 宽屏：表头吸顶到顶栏正下方 -------------------------------------- */
/* 注意：position:sticky 只对「最近的滚动容器」生效。
   .table-shell 的 overflow:auto 和包裹表格的 <details class="collapse-section">
   的 overflow:hidden 都会把自己变成滚动容器，表头就会吸附到它们的内边缘，
   看起来像被顶栏切掉一半。宽屏下把这两层放开，表头才会吸附到可视区顶部。 */
@media (min-width: 1600px) {
  .payroll-page .table-shell {
    overflow: visible;
  }

  .payroll-page details.surface-section.collapse-section {
    overflow: clip;
  }

  .payroll-page .payroll-table thead th {
    position: sticky;
    top: var(--payroll-sticky-top);
    z-index: 4;
    background: #f8fafc;
  }

  .payroll-page .payroll-table thead th:first-child {
    z-index: 5;
    background: #f8fafc;
  }
}

/* --- 8) 窄屏适配 -------------------------------------------------------- */
@media (max-width: 1279px) {
  .payroll-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .payroll-page .payroll-table .compact-list { max-height: 64px; }
  .payroll-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}