/* 异常订单。颜色只用 tokens.css 变量（UI 门禁）。规则文字由 /api/order-audit 随数据返回（app/order_audit.py RULES）。样式照工资页 payroll.css 改前缀。 */
[hidden] { display: none !important; }
body { background: var(--canvas); color: var(--text-primary); margin: 0; }
.oa-app { margin: 0 auto; padding: 20px 16px 48px; max-width: 1400px; display: flex; flex-direction: column; gap: 12px; }
.oa-head h1 { margin: 0 0 4px; font-size: 22px; }
.oa-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }

/* 工具条往下滚一直在（祖先不能有 overflow） */
.oa-bar { position: sticky; top: 0; z-index: 6; background: var(--canvas); padding: 8px 0;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.oa-seg, .oa-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.oa-seg button, .oa-tabs 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; }
.oa-seg button:first-child, .oa-tabs button:first-child { border-left: 0; }
.oa-seg button.on, .oa-tabs button.on { background: var(--accent); color: var(--text-on-accent); }
.oa-tabs b { font-weight: 700; margin-left: 2px; }
.oa-tabs b.bad { color: var(--danger-fg); }
.oa-tabs button.on b.bad { color: var(--text-on-accent); }
.oa-src { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.oa-empty { color: var(--text-muted); padding: 28px; text-align: center; }
.oa-dot { color: var(--text-disabled); }
.oa-neg { color: var(--danger-fg); }

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

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

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

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

/* 算式卡：一步一行 */
.oa-steps { margin: 0; padding: 0; list-style: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.oa-steps li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border-subtle); }
.oa-steps li:last-child { border-bottom: 0; font-weight: 700; }
.oa-steps li .k { color: var(--text-secondary); }
.oa-steps li .k em { font-style: normal; color: var(--warning-fg); }
.oa-steps li.minor { color: var(--text-muted); font-weight: 400; }
/* 进账绿、出账红（老板 10-01：「影响利润的价格用颜色表示：绿色是加的，红色是减的」） */
.oa-steps li.in, .oa-steps li.in .k { color: var(--success-fg); }
.oa-steps li.out, .oa-steps li.out .k { color: var(--danger-fg); }
/* 美元单折人民币那一行；折出来的汇率离谱时标黄 */
.oa-fx { margin: 8px 0 0; padding: 6px 10px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13px; color: var(--text-secondary); }
.oa-fx.odd { background: var(--warning-bg); color: var(--warning-fg); }
.oa-cny { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }
/* 运费一段一段看：没问题灰绿、说明一下灰、要查的黄 */
.oa-legs { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.oa-legs li { display: grid; grid-template-columns: 96px 170px 1fr; gap: 10px; padding: 6px 8px; border-bottom: 1px dashed var(--border-subtle); align-items: baseline; }
.oa-legs li:last-child { border-bottom: 0; }
.oa-legs .leg { font-weight: 600; color: var(--text-primary); }
.oa-legs .kind { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-legs li.ok .txt { color: var(--success-fg); }
.oa-legs li.info .txt { color: var(--text-secondary); }
.oa-legs li.warn { background: var(--warning-bg); border-radius: var(--radius-sm); }
.oa-legs li.warn .txt { color: var(--warning-fg); font-weight: 600; }
@media (max-width: 640px) { .oa-legs li { grid-template-columns: 1fr; gap: 2px; } }

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

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

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

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

/* 右侧详情（shared/side-panel.js：点外面关、Esc 关、点别的行直接换） */
.oa-mask { position: fixed; inset: 0; z-index: 20; background: var(--overlay); }
.oa-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; }
.oa-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; }
.oa-panel-h h2 { margin: 0; font-size: 17px; flex: 1; }
.oa-x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-secondary); padding: 2px 6px; }
.oa-panel-b { overflow: auto; padding: 14px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.oa-panel-b h3 { margin: 4px 0 6px; font-size: 14px; }
.oa-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.oa-kv dt { color: var(--text-muted); }
.oa-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.oa-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; }
.oa-note { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin: 0; }

/* 异常订单专用 */
.oa-marks { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.oa-marks button { border: 1px solid var(--border-control); background: var(--surface); color: var(--text-secondary); border-radius: 6px;
  padding: 3px 12px; font-size: 12px; cursor: pointer; font: inherit; font-size: 12px; }
.oa-marks button.on.ok { background: var(--tag-1-bg); color: var(--success-fg); border-color: var(--success-fg); }
.oa-marks button.on.problem { background: var(--tag-3-bg); color: var(--danger-fg); border-color: var(--danger-fg); }
.oa-marks input { flex: 1; min-width: 160px; height: var(--ctl-h-sm); border: 1px solid var(--border-control); border-radius: var(--control-radius);
  padding: 0 8px; font: inherit; font-size: 12px; background: var(--surface); color: var(--text-primary); }
.oa-marks .who { color: var(--text-muted); font-size: 12px; }
.oa-ev { margin-top: 6px; }
.oa-ev table { font-size: 12px; }
.oa-toggle { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.oa-marks textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-control); border-radius: var(--control-radius);
  padding: 6px 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text-primary); resize: vertical; }
.oa-marks { flex-direction: column; align-items: stretch; }
.oa-mark-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.oa-marks button.on.fixed { background: var(--tag-1-bg); color: var(--success-fg); border-color: var(--success-fg); }
.oa-attach { border: 1px dashed var(--border-control); border-radius: 6px; padding: 3px 10px; font-size: 12px; color: var(--accent); cursor: pointer; }
.oa-attach:hover { background: var(--accent-soft-bg); }
.oa-files { display: flex; gap: 8px; flex-wrap: wrap; }
.oa-file { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 2px; font-size: 12px; }
.oa-file img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; display: block; }
.oa-file a { color: var(--accent); text-decoration: none; padding: 0 4px; }
.oa-file-x { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); font-size: 12px; line-height: 14px; padding: 0; cursor: pointer; }
.oa-log { font-size: 12px; color: var(--text-muted); }
.oa-log summary { cursor: pointer; }

/* 2026-10-04 老板：可视化——数字卡、状态牌、核对进度条、收款去向占比条、详情段标题图标（零件在 shared/viz.*） */
.oa-tiles { display: block; margin-bottom: 0; }
.oa-tiles .sqv-kpis { margin: 0 0 4px; }
.oa-card-h h2 { display: inline-flex; align-items: center; gap: 6px; }
.oa-card-h h2 .sqv-ico, .oa-panel-b h3 .sqv-ico { color: var(--accent); }
.oa-panel-b h3 { display: flex; align-items: center; gap: 6px; }
.oa-progress { display: grid; grid-template-columns: max-content minmax(120px, 1fr); gap: 4px 12px; align-items: center; margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); }
.oa-progress .sqv-legend { grid-column: 2; margin-top: 0; }
.oa-table td .sqv-pill { height: 20px; padding: 0 7px; margin-right: 2px; }
.oa-check .t .sqv-pill { flex: none; }
.oa-split { margin: 2px 0 8px; }
.oa-none { padding: 0 !important; height: auto !important; white-space: normal !important; max-width: none !important; }
@media (max-width: 640px) { .oa-progress { grid-template-columns: 1fr; } .oa-progress .sqv-legend { grid-column: 1; } }
.oa-more { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.oa-more summary { cursor: pointer; width: max-content; }
.oa-more p { margin: 4px 0 0; }

/* 「全部要核对」（2026-10-11 老板第二轮）：五组数字卡能点（只看那一组）、筛选条、表里「问题在哪」那列折行 */
.oa-dq-tiles .sqv-kpi { cursor: pointer; text-align: left; font: inherit; }
.oa-dq-tiles .sqv-kpi.on { box-shadow: inset 0 0 0 2px var(--accent); }
.oa-dq-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.oa-dq-bar input[type=search] { min-width: 220px; height: 32px; box-sizing: border-box; padding: 0 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--border-control); border-radius: 8px; background: var(--surface); color: var(--text-primary); }
.oa-chip { border: 1px solid var(--accent-soft-border); background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-radius: 999px;
  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
#t-dq td:nth-child(3) { white-space: normal; min-width: 280px; max-width: 520px; line-height: 1.5; }
#t-dq td:nth-child(2) span[data-viz-tip] { cursor: help; }
.oa-more-row { display: flex; justify-content: center; margin-top: 8px; }
.oa-more-btn { font: inherit; font-size: 13px; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--accent); }
#oa-view b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .oa-dq-bar input[type=search] { min-width: 0; width: 100%; font-size: 16px; } }

/* 2026-10-22 核对说明一列（老板：「让他去解释说他已经看过，没问题之类的」）：写过的显示状态 + 原因 + 谁，没写的「写说明」虚框按钮 */
.oa-table td.why { max-width: 300px; }
.oa-why { font-weight: 600; margin-right: 2px; }
.oa-why.ok, .oa-why.fixed { color: var(--success-fg); }
.oa-why.problem { color: var(--danger-fg); }
.oa-why-go { font: inherit; font-size: 12px; padding: 1px 8px; margin-right: 6px; border: 1px dashed var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.oa-why-go:hover { border-style: solid; color: var(--accent); border-color: var(--accent); }