/* 工资与提成。颜色只用 tokens.css 变量（UI 门禁）。口径文字由 /api/payroll 随数据返回（app/payroll.py RULES + 每条核对自带规则）。 */
[hidden] { display: none !important; }
body { background: var(--canvas); color: var(--text-primary); margin: 0; }
.pay-app { margin: 0 auto; padding: 20px 16px 48px; max-width: 1400px; display: flex; flex-direction: column; gap: 12px; }
.pay-head h1 { margin: 0 0 4px; font-size: 22px; }
.pay-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }

/* 工具条往下滚一直在（祖先不能有 overflow） */
.pay-bar { position: sticky; top: 0; z-index: 6; background: var(--canvas); padding: 8px 0;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pay-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pay-seg button { border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px; }
.pay-seg button:first-child { border-left: 0; }
.pay-seg button.on { background: var(--accent); color: var(--text-on-accent); }
/* 2026-10-01 跳段标签（shared/section-tabs.js）放在月份和来源中间，宽窗口一行放下，放不下才折行 */
.pay-app .pay-bar .sq-sectabs { flex: 1 1 auto; padding: 0; border-bottom: 0; }
.pay-src { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.pay-empty { color: var(--text-muted); padding: 28px; text-align: center; }
.pay-dot { color: var(--text-disabled); }
.pay-neg { color: var(--danger-fg); }

/* 数字块 */
.pay-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pay-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; }
.pay-tile .l { font-size: 13px; color: var(--text-secondary); }
.pay-tile .n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.pay-tile .n small { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-left: 2px; }
.pay-tile .s { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.pay-tile.warn { border-color: var(--warning-fg); }
.pay-tile.bad { border-color: var(--danger-fg); }
.pay-tile.click { cursor: pointer; }
.pay-tile.click:hover { background: var(--surface-hover); }

.pay-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.pay-card-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pay-card-h h2 { margin: 0; font-size: 16px; }
.pay-card-h span { color: var(--text-muted); font-size: 12px; }
.pay-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 960px) { .pay-two { grid-template-columns: 1fr; } }

/* 表格：表头 sticky（祖先不能有 overflow）；放不下才给限高滚动框 */
.pay-wrap { overflow: auto; max-height: calc(100vh - 140px); }
.pay-wrap.fits { overflow: visible; max-height: none; }
.pay-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.pay-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-sunken); color: var(--text-secondary);
  font-weight: 600; text-align: left; padding: 7px 8px; white-space: nowrap; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
.pay-table thead th.nosort { cursor: default; }
.pay-table thead th:first-child { border-top-left-radius: 8px; }
.pay-table thead th:last-child { border-top-right-radius: 8px; }
.pay-table th.num, .pay-table td.num { text-align: right; }
.pay-table td { padding: 0 8px; height: 32px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pay-table tbody tr.open { cursor: pointer; }
.pay-table tbody tr.open:hover td { background: var(--surface-hover); }
.pay-table tbody tr.sel td { background: var(--surface-selected); }
.pay-table tfoot td { font-weight: 700; border-top: 1px solid var(--border); padding: 7px 8px; white-space: nowrap; }
.pay-table th .arr { color: var(--text-disabled); margin-left: 2px; font-size: 11px; }
.pay-table td.grp { color: var(--text-muted); font-size: 12px; }
.pay-table tr.sub td { background: var(--surface-sunken); color: var(--text-secondary); font-weight: 600; height: 28px; font-size: 12px; }

/* 标记小块 */
.pay-tag { display: inline-block; border-radius: 6px; padding: 0 6px; font-size: 12px; line-height: 20px; margin-right: 4px; white-space: nowrap; }
.pay-tag.bad { background: var(--tag-3-bg); color: var(--danger-fg); }
.pay-tag.warn { background: var(--tag-2-bg); color: var(--warning-fg); }
.pay-tag.info { background: var(--surface-sunken); color: var(--text-secondary); }
.pay-tag.good { background: var(--tag-1-bg); color: var(--success-fg); }

/* 算式卡：一步一行 */
.pay-steps { margin: 0; padding: 0; list-style: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.pay-steps li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border-subtle); }
.pay-steps li:last-child { border-bottom: 0; font-weight: 700; }
.pay-steps li .k { color: var(--text-secondary); }
.pay-steps li .k em { font-style: normal; color: var(--warning-fg); }
.pay-steps li.minor { color: var(--text-muted); font-weight: 400; }

/* 条形：发到哪、分组占比 */
.pay-bars { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pay-bars .row { display: grid; grid-template-columns: 96px 1fr 110px; gap: 8px; align-items: center; }
.pay-bars .track { background: var(--surface-sunken); border-radius: 4px; height: 12px; overflow: hidden; }
.pay-bars .fill { height: 100%; background: var(--chart-1); border-radius: 4px; }
.pay-bars .v { text-align: right; font-variant-numeric: tabular-nums; }

/* 走势小图 */
.pay-spark { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pay-spark .cell { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 10px; }
.pay-spark .cell h4 { margin: 0 0 4px; font-size: 13px; display: flex; justify-content: space-between; }
.pay-spark .cell h4 small { color: var(--text-muted); font-weight: 400; }
.pay-spark svg { width: 100%; height: 64px; display: block; }
.pay-spark .bar { fill: var(--chart-2); }
.pay-spark .bar.cur { fill: var(--chart-1); }
.pay-spark .lab { font-size: 10px; fill: var(--text-muted); }
.pay-chart svg { width: 100%; height: 220px; display: block; }
.pay-chart .ax { stroke: var(--chart-axis); stroke-width: 1; }
.pay-chart .lab { font-size: 11px; fill: var(--text-muted); }
.pay-chart .l1 { stroke: var(--chart-1); fill: none; stroke-width: 2; }
.pay-chart .l2 { stroke: var(--chart-2); fill: none; stroke-width: 2; }
.pay-chart .l3 { stroke: var(--chart-3); fill: none; stroke-width: 2; }
.pay-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; flex-wrap: wrap; }
.pay-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.pay-legend .c1 { background: var(--chart-1); } .pay-legend .c2 { background: var(--chart-2); } .pay-legend .c3 { background: var(--chart-3); }

/* 要核对 */
.pay-checks { display: flex; flex-direction: column; gap: 8px; }
.pay-check { border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.pay-check.bad { border-left-color: var(--danger-fg); }
.pay-check.warn { border-left-color: var(--warning-fg); }
.pay-check.info { border-left-color: var(--border-strong); }
.pay-check .t { font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pay-check .d { color: var(--text-secondary); font-size: 13px; line-height: 1.6; margin-top: 4px; word-break: break-all; }
.pay-check .go { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.pay-link { border: 1px solid var(--border-control); background: var(--surface); color: var(--accent); border-radius: 6px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; font: inherit; font-size: 12px; }
.pay-link:hover { background: var(--accent-soft-bg); }
.pay-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pay-filter button { border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 999px;
  padding: 3px 12px; font-size: 12px; cursor: pointer; font: inherit; font-size: 12px; }
.pay-filter button.on { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: var(--accent-soft-border); }

.pay-how { color: var(--text-secondary); font-size: 13px; }
.pay-how summary { cursor: pointer; color: var(--text-muted); }
.pay-how li { margin: 4px 0; line-height: 1.6; }

/* 右侧详情（shared/side-panel.js：点外面关、Esc 关、点别的行直接换） */
.pay-mask { position: fixed; inset: 0; z-index: 20; background: var(--overlay); }
.pay-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 21; width: min(980px, 96vw); background: var(--surface);
  box-shadow: var(--shadow-3); display: flex; flex-direction: column; }
.pay-panel-h { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); z-index: 3; }
.pay-panel-h h2 { margin: 0; font-size: 17px; flex: 1; }
.pay-x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-secondary); padding: 2px 6px; }
.pay-panel-b { overflow: auto; padding: 14px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.pay-panel-b h3 { margin: 4px 0 6px; font-size: 14px; }
.pay-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.pay-kv dt { color: var(--text-muted); }
.pay-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.pay-formula { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); background: var(--surface-sunken);
  border-radius: 6px; padding: 1px 6px; word-break: break-all; }
.pay-note { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin: 0; }

/* ===== 2026-10-01 第二版：从上往下一页看完 ===== */
.pay-sec { margin-bottom: 22px; }
.pay-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.pay-sec-h h2 { margin: 0; font-size: 19px; }
.pay-sec-h span { color: var(--text-muted); font-size: 12px; }
.pay-card h3 { margin: 0; font-size: 15px; }
.pay-tile .n { font-variant-numeric: normal; }

/* 堆叠条：每段之间 2px 底色缝，数据端圆角 */
.pay-stack { display: flex; gap: 2px; height: 30px; min-width: 2px; }
.pay-stack.thin { height: 12px; }
.pay-stack i { display: flex; align-items: center; overflow: visible; min-width: 1px; font-style: normal; cursor: default; }
.pay-stack i:first-child { border-radius: 4px 0 0 4px; }
.pay-stack i:last-child { border-radius: 0 4px 4px 0; }
.pay-stack i:only-child { border-radius: 4px; }
.pay-stack i span { padding: 0 8px; font-size: 12px; color: var(--text-on-accent); white-space: nowrap; }
.pay-stack i:hover { filter: brightness(1.12); }
.c-base, .g1, .s-cost, .b2b { background: var(--chart-2); fill: var(--chart-2); }
.c-com, .g2, .s-ship { background: var(--chart-5); fill: var(--chart-5); }
.c-pool, .g3, .s-tax, .b2c { background: var(--chart-4); fill: var(--chart-4); }
.c-other { background: var(--chart-8); fill: var(--chart-8); }
.g4 { background: var(--chart-3); fill: var(--chart-3); }
.s-profit, .pos { background: var(--chart-positive); fill: var(--chart-positive); }
.neg { background: var(--chart-negative); fill: var(--chart-negative); }
.left { background: var(--surface-sunken); }
.pay-stack i.left span { color: var(--text-secondary); }
.diff { background: var(--surface); outline: 2px solid var(--warning-fg); }
.pay-legend2 { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.pay-legend2 span { display: inline-flex; align-items: center; gap: 5px; }
.pay-legend2 i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pay-legend2 b { color: var(--text-primary); font-weight: 600; }

/* 散点：人工 vs 带来的毛利 */
.pay-scatter svg { width: 100%; height: auto; display: block; }
.pay-scatter .grid { stroke: var(--chart-grid); stroke-width: 1; }
.pay-scatter .axis { stroke: var(--chart-axis); stroke-width: 1; }
.pay-scatter .ref { stroke: var(--chart-negative); stroke-width: 1; opacity: 0.6; }
.pay-scatter .ref2 { stroke: var(--chart-axis); stroke-width: 1; }
.pay-scatter .tick, .pay-scatter .axlab, .pay-scatter .reflab { font-size: 11px; fill: var(--text-muted); }
.pay-scatter .name { font-size: 12px; fill: var(--text-secondary); }
.pay-scatter .pt { cursor: pointer; }
.pay-scatter .pt circle:not(.hit) { stroke: var(--surface); stroke-width: 2; }
.pay-scatter .hit { fill: transparent; }
.pay-scatter .pt:hover circle:not(.hit) { r: 7; }

/* 人员卡片 */
.pay-subbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pay-subbar .pay-legend2 { margin: 0; }
.pay-ghead { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.pay-ghead i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; align-self: center; }
.pay-ghead span { color: var(--text-muted); font-size: 12px; }
.pay-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pay-pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; }
.pay-pcard:hover { border-color: var(--accent-soft-border); background: var(--surface-hover); }
.pay-pcard .top { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pay-pcard .money { display: flex; gap: 8px; align-items: baseline; }
.pay-pcard .gross { font-size: 20px; font-weight: 700; }
.pay-pcard .facts { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.pay-pcard .take { font-size: 12px; color: var(--text-secondary); }
.pay-pcard .take.warn { color: var(--warning-fg); }
.pay-pcard .take.bad { color: var(--danger-fg); }

/* B2B 每人一行 */
.pay-b2b-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; gap: 14px; align-items: center; padding: 10px 4px;
  border-top: 1px solid var(--border-subtle); cursor: pointer; }
.pay-b2b-row:hover { background: var(--surface-hover); }
.pay-b2b-row .who b { font-size: 15px; margin-right: 6px; }
.pay-b2b-row .nums { display: flex; gap: 12px; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.pay-b2b-row .nums b { color: var(--text-primary); }
.pay-b2b-row .side { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.pay-b2b-row .side b { color: var(--text-primary); }
.pay-b2b-row .src { color: var(--text-muted); }
.pay-pibars { width: 100%; height: 86px; display: block; }
.pay-pibars .zero { stroke: var(--chart-axis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pay-pibars rect:hover { opacity: 0.8; }
.pay-pibars rect.diff { stroke: var(--warning-fg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pay-pibars-lab { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
@media (max-width: 900px) { .pay-b2b-row { grid-template-columns: 1fr; } }

/* B2C 每家店一根条 */
.pay-store-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; grid-template-areas: "name bar res" ". facts facts";
  gap: 4px 12px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--border-subtle); cursor: pointer; }
.pay-store-row:hover { background: var(--surface-hover); }
.pay-store-row .name { grid-area: name; display: flex; flex-direction: column; }
.pay-store-row .barcell { grid-area: bar; }
.pay-store-row .res { grid-area: res; text-align: right; display: flex; flex-direction: column; }
.pay-store-row .facts { grid-area: facts; display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.pay-store-row.mini { grid-template-areas: "name bar res"; }
.pay-storebar { position: relative; }
.pay-salesline { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--chart-negative); }

/* 个人详情里的绩效截图 */
.pay-evid { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-evid a { display: flex; flex-direction: column; gap: 4px; width: 200px; color: var(--text-secondary); font-size: 12px; text-decoration: none; }
.pay-evid img { width: 200px; height: 120px; object-fit: cover; object-position: top left; border: 1px solid var(--border); border-radius: 6px; }
.pay-evid a:hover img { border-color: var(--accent); }

/* 2026-10-04 老板：可视化——只统一样子：段标题图标、顶上数字卡、状态牌（零件在 shared/viz.*）；原来的图都不动 */
.pay-tiles { display: block; }
.pay-tiles .sqv-kpis { margin: 0; }
.pay-sec-h h2, .pay-card-h h2 { display: inline-flex; align-items: center; gap: 8px; }
.pay-sec-h h2 .sqv-ico, .pay-card-h h2 .sqv-ico { color: var(--accent); }
.pay-table td .sqv-pill { height: 20px; padding: 0 7px; }
.pay-table td .sqv-pill, .pay-check .t .sqv-pill, .pay-note .sqv-pill, #pay-panel-title .sqv-pill, .pay-b2b-row .who .sqv-pill { margin-right: 4px; }
.pay-pcard .top .sqv-pill { align-self: center; height: 20px; padding: 0 7px; }
.pay-checks .sqv-empty { padding: 16px 8px; }

/* ---- 多月对照（10-04）：红 = 可能有问题，全用 tokens 的 danger / chart 色 */
.cmp-chart { width: 100%; height: auto; display: block; }
.cmp-chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.cmp-chart .lab { font-size: 11px; fill: var(--text-muted); }
.cmp-chart .lab.yr { font-weight: 600; }
.cmp-chart .cmp-gp { fill: none; stroke: var(--chart-positive); stroke-width: 2.5; }
.cmp-chart .cmp-gp-pt { fill: var(--chart-positive); }
.cmp-chart .cmp-labor { fill: none; stroke: var(--chart-axis); stroke-width: 2; stroke-dasharray: 5 3; }
.cmp-chart .cmp-labor-pt { fill: var(--chart-axis); }
.cmp-chart .cmp-flag { fill: var(--danger-solid); }
.cmp-lg-gp { background: var(--chart-positive); }
.cmp-lg-labor { background: var(--chart-axis); }
.cmp-lg-flag, .cmp-lg-jump { background: var(--danger-solid); border-radius: 50%; }
.cmp-lg-bad { background: transparent; box-shadow: inset 0 0 0 2px var(--danger-solid); }
.cmp-lg-heat { background: linear-gradient(90deg, color-mix(in srgb, var(--chart-2) 10%, transparent), var(--chart-2)); }
.cmp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.sqv-bars-f.bad { background: var(--danger-solid); }
.cmp-red { border: 1px solid var(--danger-border); background: var(--danger-bg); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.cmp-red h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 15px; color: var(--danger-fg); }
.cmp-red h4 { margin: 12px 0 4px; font-size: 13px; color: var(--danger-fg); }
.cmp-red ul { list-style: none; margin: 0; padding: 0; }
.cmp-red li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--danger-border); align-items: baseline; }
.cmp-red li small { grid-column: 2; color: var(--text-muted); font-size: 12px; }
.cmp-red li .pay-link { grid-column: 3; grid-row: 1 / span 2; white-space: nowrap; }
.cmp-red li em { font-style: normal; display: inline-block; padding: 0 5px; margin: 0 3px 2px 0; border-radius: 4px; background: var(--danger-solid); color: var(--text-on-accent); font-size: 11px; }
.cmp-kind { color: var(--danger-fg); white-space: nowrap; font-size: 13px; }
.cmp-heat-w { overflow-x: auto; }
.cmp-heat { border-collapse: separate; border-spacing: 2px; font-size: 11px; font-variant-numeric: tabular-nums; }
.cmp-heat th { font-weight: 500; color: var(--text-muted); padding: 2px 4px; white-space: nowrap; }
.cmp-heat .cmp-n { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 70px; }
.cmp-heat .cmp-t { text-align: right; font-weight: 600; padding-left: 8px; }
.cmp-heat .cmp-gh th { text-align: left; padding-top: 10px; color: var(--text-primary); font-weight: 600; }
.cmp-heat .cmp-gh i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.cmp-c { position: relative; min-width: 38px; height: 22px; text-align: center; border-radius: 3px; cursor: pointer;
  color: var(--text-primary); }          /* 底色深浅由 payroll.js 写在格子的 style 里 */
.cmp-c.dark { color: var(--text-on-accent); }
.cmp-c.bad { box-shadow: inset 0 0 0 2px var(--danger-solid); }
.cmp-c.jump::after { content: ""; position: absolute; top: 0; right: 0; border: 5px solid transparent; border-top-color: var(--danger-solid); border-right-color: var(--danger-solid); border-top-right-radius: 3px; }
.cmp-c:hover { outline: 2px solid var(--text-primary); }
.cmp-na { background: transparent; }
.cmp-red li.cmp-more { display: block; }
.cmp-red li.cmp-more summary { cursor: pointer; color: var(--danger-fg); font-size: 13px; }

/* ---- 10-04 第二轮：月份按年折行、大框架、细节收起、单号链接 */
.pay-months { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.pay-yr { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.pay-yr b { font-size: 12px; color: var(--text-secondary); margin-right: 4px; font-weight: 600; }
.pay-yr button { border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 6px;
  padding: 2px 7px; font-size: 12px; line-height: 18px; cursor: pointer; min-width: 34px; }
.pay-yr button:hover { border-color: var(--accent); color: var(--text-primary); }
.pay-yr button.on { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.cmp-chart .cur-bg { fill: var(--accent); opacity: 0.08; }
.cmp-chart .lab.cur { font-weight: 700; fill: var(--text-primary); }
.cmp-chart .lab.top { font-size: 10px; }
.ov-groups td { vertical-align: middle; }
.ov-groups th small, .ov-groups td small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }
.ov-groups td small.up { color: var(--chart-positive); } .ov-groups td small.dn { color: var(--danger-fg); }
.ov-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ov-barc { min-width: 240px; }
.ov-barc b { font-variant-numeric: tabular-nums; margin-left: 8px; }
.ov-barc small { display: inline !important; margin-left: 6px; }
.ov-bar { display: inline-block; width: 140px; height: 10px; background: var(--chart-grid); border-radius: 5px; overflow: hidden; vertical-align: middle; }
.ov-bar i { display: block; height: 100%; border-radius: 5px; }
.ov-bad { color: var(--danger-fg); font-weight: 600; }
.ov-warn { color: var(--warning-fg); font-weight: 600; }
.pay-detail-h { font-size: 15px; margin: 28px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.pay-detail-h small { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 8px; }
.pay-fold { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pay-fold > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; flex-wrap: wrap; }
.pay-fold > summary::-webkit-details-marker { display: none; }
.pay-fold > summary:hover { background: var(--surface-hover); }
.pay-fold-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.pay-fold-s { color: var(--text-secondary); font-size: 13px; flex: 1; }
.pay-fold-go { font-size: 12px; color: var(--accent); white-space: nowrap; }
.pay-fold-go::after { content: " ▾"; }
.pay-fold[open] > summary { border-bottom: 1px solid var(--border); }
.pay-fold[open] .pay-fold-go::before { content: "收起"; } .pay-fold[open] .pay-fold-go { font-size: 0; }
.pay-fold[open] .pay-fold-go::before { font-size: 12px; }
.pay-fold > :not(summary) { margin: 12px 14px; }
.pay-sec + .pay-sec .pay-fold { margin-top: 8px; }
a.pay-ord { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; }
a.pay-ord:hover { border-bottom-style: solid; }

/* ---- 公司盈亏（10-04 老板：「能不能帮我加一个盈亏情况的表……这样能知道公司现在的整个状况」）。数和口径在 app/payroll_pnl.py */
.pnl-fresh { margin: -4px 0 10px; color: var(--text-muted); font-size: 12px; }
.pnl-h2 { margin-top: 14px; }
.pnl-chart .pnl-seg { stroke: var(--surface); stroke-width: 1; }
.pnl-chart .pnl-hit { fill: transparent; cursor: pointer; }
.pnl-chart .pnl-hit:hover { fill: var(--accent); fill-opacity: 0.07; }
.pnl-chart .pnl-be { stroke: var(--warning-fg); stroke-width: 1.5; stroke-dasharray: 6 4; }
.pnl-chart .pnl-be-t { fill: var(--warning-fg); font-weight: 600; }
.pnl-chart .cmp-gp-pt.pnl-est { fill: var(--surface); stroke: var(--chart-positive); stroke-width: 2; }
.pnl-chart .pnl-zero { stroke: var(--chart-axis); stroke-width: 1; }
.pnl-chart .pnl-v { font-size: 11px; font-weight: 600; }
.pnl-chart .pnl-v.pnl-pos { fill: var(--success-fg); }
.pnl-chart .pnl-v.pnl-neg { fill: var(--danger-fg); }
/* 2026-10-05 老板：「上面完全没有数据，也没有图例，不知道是哪个指什么」「不知道是哪个月」——
   图例挪到图顶上用方色块（原来底下那排 12×3 的细线看不出颜色）；隔月淡底条 + 月份 / 年份横条 + 分年虚线；毛利点上标数 */
.pnl-lg { margin: 4px 0 6px; }
.pnl-lg .pnl-lg-m { color: var(--text-primary); font-weight: 600; }
.pnl-lg .pnl-lg-sep { width: 1px; height: 12px; background: var(--border); }
.pnl-lg .pnl-lg-gp { position: relative; width: 18px; height: 3px; border-radius: 2px; background: var(--chart-positive); }
.pnl-lg .pnl-lg-gp::after { content: ""; position: absolute; left: 5px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--chart-positive); }
.pnl-lg .pnl-lg-be { width: 18px; height: 0; border-radius: 0; background: transparent; border-top: 2px dashed var(--warning-fg); }
.pnl-lg .pnl-lg-est { width: 8px; height: 8px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--chart-positive); }
.pnl-chart .pnl-band { fill: var(--chart-grid); fill-opacity: 0.45; }
.pnl-chart .pnl-ysep { stroke: var(--chart-zero); stroke-width: 1; stroke-dasharray: 3 3; }
.pnl-chart .pnl-yline { stroke: var(--chart-axis); stroke-width: 1.5; }
.pnl-chart .lab.pnl-mon { font-size: 12px; fill: var(--text-secondary); }
.pnl-chart .lab.pnl-mon.cur { font-weight: 700; fill: var(--text-primary); }
.pnl-chart .lab.yr { font-size: 11px; fill: var(--text-secondary); }
.pnl-chart .pnl-gpv { font-size: 10.5px; font-weight: 600; fill: var(--success-fg); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.pnl-chart .pnl-gpv.cur { font-size: 12px; }
.pnl-chart .pnl-v { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.pnl-years { margin-left: auto; }
.pnl-table th, .pnl-table td { white-space: nowrap; }
.pnl-table thead th.nosort { cursor: default; }
.pnl-table thead th[data-pm] { cursor: pointer; }
.pnl-table thead th[data-pm]:hover { color: var(--accent); }
.pnl-table th.pnl-item { position: sticky; left: 0; text-align: left; min-width: 150px; }
.pnl-table thead th.pnl-item { z-index: 3; }
.pnl-table tbody th.pnl-item { z-index: 1; background: var(--surface); font-weight: 400; padding: 0 8px; height: 30px; border-bottom: 1px solid var(--border-subtle); }
.pnl-table tbody tr.pnl-tot th, .pnl-table tbody tr.pnl-tot td { font-weight: 700; background: var(--surface-sunken); }
.pnl-table tbody tr.pnl-sub th.pnl-item { padding-left: 22px; color: var(--text-secondary); }
.pnl-table tbody tr.pnl-net th, .pnl-table tbody tr.pnl-net td { font-weight: 700; font-size: 14px; border-top: 2px solid var(--border-strong); height: 36px; }
.pnl-table tbody tr.pnl-ref th.pnl-item, .pnl-table tbody tr.pnl-ref td { color: var(--text-muted); font-size: 12px; }
.pnl-table tbody tr.pnl-ref:first-of-type th, .pnl-table tr.pnl-rate + tr.pnl-ref th, .pnl-table tr.pnl-rate + tr.pnl-ref td { border-top: 1px dashed var(--border); }
.pnl-table td.pnl-pos { color: var(--success-fg); }
.pnl-table td.pnl-neg { color: var(--danger-fg); }
.pnl-table td.cur, .pnl-table thead th.cur { background: var(--accent-soft-bg); }
.pnl-table td.pnl-t { border-left: 1px solid var(--border-subtle); }
.pnl-table td.est { text-decoration: underline dotted var(--warning-fg); text-underline-offset: 3px; }
.pnl-table sup { font-size: 10px; color: var(--warning-fg); margin-left: 1px; }
.pnl-table td[data-open], .pnl-table td[data-cm] { cursor: pointer; }
.pnl-table td[data-open]:hover, .pnl-table td[data-cm]:hover { background: var(--surface-hover); box-shadow: inset 0 -2px 0 var(--accent); }
.pnl-ex tbody tr.open:hover th.pnl-item { background: var(--surface-hover); }
.pnl-sum { margin: 0; font-size: 13px; }
.pay-table td.pnl-text { max-width: 360px; }
.pay-steps li.open { cursor: pointer; }
.pay-steps li.open:hover { background: var(--surface-hover); }
/* 窄窗口：「−¥8,251」别被拆成两行、「比上月」放不下就整个换到下一行；说明行在「 · 」处换行，不把「4.3万」拆开 */
#s-pnl .sqv-kpi-v { flex-wrap: wrap; white-space: nowrap; row-gap: 0; }
#s-pnl .sqv-kpi-n { word-break: keep-all; }

/* ---- 每个人的变化（10-04 晚）：拿走率 绿 < 60% / 黄 60–100% / 红 ≥ 100% */
.pt-cells { display: inline-flex; gap: 2px; }
.pt-cells i { width: 9px; height: 14px; border-radius: 2px; background: var(--chart-grid); }
.pt-cells i.good { background: var(--chart-positive); }
.pt-cells i.warn { background: var(--warning-fg); }
.pt-cells i.bad { background: var(--danger-solid); }
.pt-cells i.na { background: var(--chart-grid); }
.pt-cells i.off { background: transparent; box-shadow: inset 0 0 0 1px var(--chart-grid); }
.pt-take { font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-take.good { color: var(--chart-positive); } .pt-take.warn { color: var(--warning-fg); } .pt-take.bad { color: var(--danger-fg); }
.cmp-chart .pt-labor { fill: var(--chart-2); }
.cmp-chart .pt-brought { fill: var(--chart-positive); }
.cmp-chart .neg { fill: var(--chart-negative); }
.cmp-chart .pt-ref { stroke: var(--danger-solid); stroke-dasharray: 4 3; stroke-width: 1; opacity: .7; }
.cmp-chart .pt-tline { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; }
.cmp-chart .pt-tpt { stroke: var(--surface); stroke-width: 1.5; fill: var(--chart-positive); }
.cmp-chart .pt-tpt.warn { fill: var(--warning-fg); } .cmp-chart .pt-tpt.bad { fill: var(--danger-solid); }
.pt-lg-labor { background: var(--chart-2); } .pt-lg-brought { background: var(--chart-positive); }
.pt-lg-take { background: var(--text-secondary); border-radius: 50%; }
.pay-panel-b .cmp-chart { flex: none; width: 100%; aspect-ratio: 900 / 230; }

/* ---- 谁贡献了业绩和盈利（10-05）：前 8 名用 chart-1..8，其他灰；热力格 毛利绿 / 销售额蓝 / 亏红 */
.ct-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; }
.ct-bar .pay-filter { margin: 0; }
.cmp-chart .ct-c1 { fill: var(--chart-1); } .cmp-chart .ct-c2 { fill: var(--chart-2); } .cmp-chart .ct-c3 { fill: var(--chart-3); } .cmp-chart .ct-c4 { fill: var(--chart-4); }
.cmp-chart .ct-c5 { fill: var(--chart-5); } .cmp-chart .ct-c6 { fill: var(--chart-6); } .cmp-chart .ct-c7 { fill: var(--chart-7); } .cmp-chart .ct-c8 { fill: var(--chart-8); }
.cmp-chart .ct-rest { fill: var(--chart-grid); }
.pay-legend .ct-c1 { background: var(--chart-1); } .pay-legend .ct-c2 { background: var(--chart-2); } .pay-legend .ct-c3 { background: var(--chart-3); } .pay-legend .ct-c4 { background: var(--chart-4); }
.pay-legend .ct-c5 { background: var(--chart-5); } .pay-legend .ct-c6 { background: var(--chart-6); } .pay-legend .ct-c7 { background: var(--chart-7); } .pay-legend .ct-c8 { background: var(--chart-8); }
.pay-legend .ct-rest { background: var(--chart-grid); }
.ct-wrap { overflow-x: auto; }
.ct-table { border-collapse: separate; border-spacing: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ct-table th { font-weight: 500; color: var(--text-secondary); padding: 3px 6px; white-space: nowrap; }
.ct-table .num { text-align: right; padding: 3px 6px; white-space: nowrap; }
.ct-n { color: var(--text-secondary); text-align: right; width: 28px; }
.ct-name { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; max-width: 220px; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-name small { margin-left: 6px; color: var(--text-secondary); font-size: 10px; }
.ct-v { min-width: 46px; text-align: right; padding: 3px 5px; border-radius: 3px; white-space: nowrap; }
.ct-v.neg { color: var(--danger-fg); }
.ct-tot td { border-top: 1px solid var(--border); font-weight: 600; padding-top: 5px; }