/* 下订单 /#order-new（app/order_entry.py）。颜色只用 tokens.css 已定义变量、不写裸 hex（UI 门禁）。 */
/* display:flex / grid 的块会盖掉 hidden 属性，全页兜一句（工厂待办 9-27 踩过） */
[hidden] { display: none !important; }
body { background: var(--canvas); }
.on-app { max-width: 1500px; margin: 0 auto; padding: 20px 16px 72px; }
.on-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.on-head h1 { margin: 0 0 6px; font-size: 22px; color: var(--ink); }
.on-head p { margin: 0; max-width: 860px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.on-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.on-link { color: var(--accent); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.on-fresh { font-size: 12px; color: var(--muted); }
.on-banner { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.6;
  background: var(--warning-bg); color: var(--warning-fg); border: 1px solid var(--warning-border); }

.on-btn { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 13px; cursor: pointer; }
.on-btn:hover { background: var(--surface-hover); }
.on-btn:disabled { opacity: .55; cursor: not-allowed; }
.on-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.on-btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.on-btn.big { width: 100%; padding: 9px 12px; font-size: 14px; }
.on-btn.mini { padding: 1px 8px; font-size: 12px; }

.on-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 14px; align-items: start; }
@media (max-width: 1100px) { .on-grid { grid-template-columns: 1fr; } }
.on-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
/* 2026-10-01 右栏吸顶但比一屏高（合同、还差什么几张卡一长）：底下「提交进简道云」被切掉、滚到底也够不着。
   两栏时右栏限一屏高、自己滚，提交那张贴在右栏底上一直看得见；一栏（窄屏）时右栏在最下面，照旧 */
@media (min-width: 1101px) {
  .on-side { max-height: calc(100vh - 24px); overflow: auto; }
  .on-side .on-submit { position: sticky; bottom: 0; z-index: 1; }
}
.on-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.on-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.on-card h2 { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.on-card h2 small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.on-card h3 { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.on-dim { color: var(--muted); font-size: 12px; margin: 0; line-height: 1.6; }

.on-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.on-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.on-form label.span2 { grid-column: span 2; }
@media (max-width: 640px) { .on-form label.span2 { grid-column: span 1; } }
.on-form input, .on-form select, .on-form textarea, .on-pick input, .on-table input, .on-table select {
  border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 13px; background: var(--surface); color: var(--ink); font-family: inherit; }
.on-form textarea { resize: vertical; }
.on-pi-msg { font-size: 12px; line-height: 1.5; align-self: center; }
.on-pi-msg.ok { color: var(--success-fg); }
.on-pi-msg.warn { color: var(--warning-fg); }
.on-pi-msg.bad { color: var(--danger-fg); }

/* 搜索下拉 */
.on-pick { position: relative; }
.on-pick input { width: 100%; box-sizing: border-box; padding: 8px 10px; }
.on-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px 0; list-style: none; max-height: 420px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.on-drop li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.on-drop li:hover, .on-drop li.hot { background: var(--surface-hover); }
.on-drop li.empty { cursor: default; color: var(--muted); }
.on-drop li b { color: var(--ink); }
.on-drop li .on-dim { font-size: 12px; }
.on-drop li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.on-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-sunken); flex: none; }
.on-tag { display: inline-block; border-radius: var(--radius-full); padding: 0 7px; font-size: 11px; border: 1px solid var(--border); color: var(--muted); margin-left: 4px; }
.on-tag.bad { color: var(--danger-fg); border-color: var(--danger-border); background: var(--danger-bg); }
.on-tag.warn { color: var(--warning-fg); border-color: var(--warning-border); background: var(--warning-bg); }

/* 选中的客户 */
.on-cust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) { .on-cust { grid-template-columns: 1fr; } }
.on-cust .name { font-size: 16px; color: var(--ink); font-weight: 600; }
.on-cust dl { display: grid; grid-template-columns: 84px 1fr; gap: 3px 8px; margin: 6px 0 0; }
.on-cust dt { color: var(--muted); }
.on-cust dd { margin: 0; overflow-wrap: anywhere; }
.on-cust ul { margin: 4px 0 0; padding-left: 16px; }
.on-cust li { line-height: 1.7; }
.on-cust .pi { font-family: var(--font-mono); color: var(--ink); }

/* 产品明细表：放得下就不横滚，放不下在框里横滚 */
.on-tw { margin-top: 10px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.on-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1080px; font-size: 13px; color: var(--ink-2); }
.on-table th { background: var(--surface-sunken); color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.on-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.on-table tr:last-child td { border-bottom: 0; }
.on-table td.prod { min-width: 200px; max-width: 280px; }
.on-table td.prod b { color: var(--ink); display: block; font-family: var(--font-mono); }
.on-table td.prod span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.on-table td.num, .on-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.on-table input { width: 100%; box-sizing: border-box; padding: 4px 6px; }
.on-table input.n { text-align: right; }
.on-table .w-q { width: 70px; } .on-table .w-p { width: 96px; } .on-table .w-v { width: 80px; } .on-table .w-s { width: 110px; }
.on-table select { padding: 4px 4px; }
.on-ref { display: block; margin-top: 2px; font-size: 11px; color: var(--info-fg); cursor: pointer; background: none; border: 0; padding: 0; text-align: right; width: 100%; }
.on-ref:hover { text-decoration: underline; }
.on-x { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.on-x:hover { color: var(--danger-fg); }

/* 右边 */
.on-sum dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 13px; }
.on-sum dt { color: var(--muted); }
.on-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.on-sum dd.big { font-size: 18px; font-weight: 600; }
.on-kt { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.on-kt li { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.on-kt li:last-child { border-bottom: 0; }
.on-kt b { color: var(--ink); }
.on-kt .on-dim { display: block; }
.on-checks ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.on-checks li.bad { color: var(--danger-fg); }
.on-checks li.warn { color: var(--warning-fg); }
.on-submit .on-dim { margin-top: 8px; }

.on-src { margin-top: 4px; font-size: 13px; color: var(--muted); }
.on-src summary { cursor: pointer; }
.on-src ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }

/* 老板 10-04：可视化——小标题图标、提交按钮上面的进度点（零件在 shared/viz.css） */
.on-main .on-card > h2 { display: flex; align-items: center; gap: 6px; }
.on-main .on-card > h2 .sqv-ico { color: var(--accent); }
.on-prog:not(:empty) { margin-bottom: 12px; }