/* hk_cipl.css（H3b）：香港 CI/PL 生成器弹窗。发货表三处共用（index.html / dispatch.html / dispatch_sheet.html）：
   亮色跟 dispatch_page.css 的产品属性弹窗同一套颜色，暗色跟 ops-dark-pages.css；工作台里有令牌就用令牌。 */
.hkc-dialog {
  --hkc-ink: var(--ink, #17324d);
  --hkc-muted: var(--muted, #607687);
  --hkc-line: var(--line, #d7e2e9);
  --hkc-soft: var(--surface-muted, #eef4f7);
  --hkc-surface: var(--surface, #fff);
  --hkc-bg: #f8fafc;
  --hkc-accent: var(--accent, #24758a);
  --hkc-accent-dark: var(--accent-dark, #1b5c6c);
  --hkc-danger: var(--ops-ui-danger, #b42318);
  --hkc-ok: var(--ops-ui-success, #1f7a4d);
  --hkc-warn-bg: #fff7e6;
  --hkc-warn-line: #f0c36d;
  --hkc-font: var(--ops-ui-font, "Segoe UI Variable", "Microsoft YaHei UI", "Noto Sans SC", "Segoe UI", sans-serif);
  --hkc-mono: var(--hkc-font);
  width: min(1480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hkc-line);
  border-radius: 12px;
  background: var(--hkc-bg);
  color: var(--hkc-ink);
  font: 400 13px/1.45 var(--hkc-font);
  box-shadow: 0 24px 64px rgb(23 50 77 / 24%);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.hkc-dialog:not([open]) { display: none; }
.hkc-dialog::backdrop { background: rgb(17 35 52 / 38%); }
.hkc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hkc-line); background: var(--hkc-surface); }
.hkc-head > div { display: grid; gap: 2px; }
.hkc-head strong { font-size: 17px; font-weight: 700; }
.hkc-head span { color: var(--hkc-muted); font-size: 12px; font-family: inherit; }
.hkc-x { width: 32px; height: 32px; border: 0; border-radius: 7px; background: var(--hkc-soft); color: var(--hkc-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.hkc-body { overflow: auto; padding: 12px 16px 8px; display: grid; gap: 12px; align-content: start; }
.hkc-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--hkc-line); background: var(--hkc-surface); }
.hkc-foot-msg { margin-right: auto; color: var(--hkc-muted); font-size: 12px; }
.hkc-muted { color: var(--hkc-muted); margin: 0; }
.hkc-error { color: var(--hkc-danger); margin: 0; }
.hkc-tabs { display: flex; gap: 6px; }
.hkc-tab { padding: 7px 14px; border: 1px solid var(--hkc-line); border-radius: 8px; background: var(--hkc-surface); color: var(--hkc-ink); font: 600 13px/1.2 var(--hkc-font); cursor: pointer; }
.hkc-tab.active { background: var(--hkc-accent); border-color: var(--hkc-accent); color: #fff; }
.hkc-tab:disabled { opacity: .6; cursor: default; }
.hkc-note { margin: 0; color: var(--hkc-muted); font-size: 12px; }
.hkc-section { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--hkc-line); border-radius: 10px; background: var(--hkc-surface); }
.hkc-shipper { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.hkc-shipper > span { color: var(--hkc-muted); font-size: 12px; min-width: 120px; }
.hkc-shipper strong { font-size: 14px; }
.hkc-shipper small { color: var(--hkc-muted); }
.hkc-radios { display: flex; gap: 14px; }
.hkc-radios label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; cursor: pointer; }
.hkc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.hkc-party { display: grid; gap: 6px; align-content: start; }
.hkc-party h4 { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--hkc-muted); text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.hkc-same { font-weight: 500; text-transform: none; letter-spacing: 0; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.hkc-field { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; }
.hkc-field > span { color: var(--hkc-muted); font-size: 12px; }
.hkc-field input, .hkc-field textarea, .hkc-in { min-height: 30px; padding: 4px 8px; border: 1px solid var(--hkc-line); border-radius: 6px; background: var(--hkc-surface); color: var(--hkc-ink); font: 500 13px/1.3 var(--hkc-font); }
.hkc-field textarea { resize: vertical; min-height: 44px; }
.hkc-field input[readonly] { background: var(--hkc-soft); color: var(--hkc-muted); }
.hkc-field input:focus, .hkc-field textarea:focus, .hkc-in:focus { outline: 2px solid var(--focus, rgb(36 117 138 / 35%)); outline-offset: 0; border-color: var(--hkc-accent); }
.hkc-uploads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hkc-file { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px dashed var(--hkc-accent); border-radius: 7px; background: var(--hkc-soft); color: var(--hkc-accent-dark); font-weight: 600; cursor: pointer; }
.hkc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.hkc-fileinfo { color: var(--hkc-muted); font-size: 12px; }
.hkc-tablewrap { padding: 0; overflow: auto; }
.hkc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hkc-table th { position: sticky; top: 0; z-index: 1; padding: 7px 5px; border-bottom: 1px solid var(--hkc-line); background: var(--hkc-soft); color: var(--hkc-muted); font-size: 11.5px; font-weight: 700; text-align: left; white-space: nowrap; }
.hkc-table td { padding: 4px 5px; border-bottom: 1px solid var(--hkc-line); vertical-align: middle; white-space: nowrap; }
.hkc-table tr.dead td { color: var(--hkc-muted); background: var(--hkc-soft); }
.hkc-table tr.use td { background: rgb(36 117 138 / 5%); }
.hkc-table tr.dead.use td { background: var(--hkc-soft); }
.hkc-table td.desc { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.hkc-table td.src { font-size: 11px; line-height: 1.25; }
.hkc-table td.src small { display: block; color: var(--hkc-muted); }
.hkc-table .mono, .hkc-table .num { font-family: inherit; font-variant-numeric: tabular-nums; }
.hkc-table td.num { text-align: right; }
.hkc-table .num small { color: var(--hkc-muted); font-family: var(--hkc-font); }
.hkc-table.small td { padding: 5px 8px; white-space: normal; }
.hkc-in { min-height: 28px; padding: 2px 6px; }
.hkc-in.num { text-align: right; font-family: inherit; }
.hkc-in.w4 { width: 54px; } .hkc-in.w5 { width: 72px; } .hkc-in.w6 { width: 88px; } .hkc-in.w8 { width: 220px; }
.hkc-in:disabled { background: var(--hkc-soft); color: var(--hkc-muted); }
.hkc-done { color: var(--hkc-muted); font-size: 11px; white-space: normal; display: inline-block; max-width: 150px; line-height: 1.2; }
.hkc-bad { color: var(--hkc-danger); font-size: 11.5px; }
.hkc-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 4px 2px 0; color: var(--hkc-muted); font-size: 12px; }
.hkc-totals b { color: var(--hkc-ink); font-family: inherit; font-size: 13px; }
.hkc-totals .hkc-switch { margin-left: auto; font-size: 11.5px; }
.hkc-msg { margin: 0; padding: 8px 10px; border-radius: 7px; background: var(--hkc-soft); color: var(--hkc-ink); }
.hkc-msg.error { background: rgb(180 35 24 / 8%); color: var(--hkc-danger); }
.hkc-msg.ok { background: rgb(31 122 77 / 10%); color: var(--hkc-ok); }
.hkc-warn { padding: 8px 12px; border: 1px solid var(--hkc-warn-line); border-radius: 8px; background: var(--hkc-warn-bg); color: #6b4a00; font-size: 12.5px; }
.hkc-warn ul { margin: 4px 0 0; padding-left: 18px; }
.hkc-result { padding: 10px 12px; border: 1px solid var(--hkc-ok); border-radius: 8px; background: rgb(31 122 77 / 7%); }
.hkc-result strong { color: var(--hkc-ok); }
.hkc-dl { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 6px; background: var(--hkc-accent); color: #fff !important; font-weight: 600; text-decoration: none; }
.hkc-docs h4 { margin: 0; font-size: 12px; color: var(--hkc-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.hkc-docs a { color: var(--hkc-accent-dark); font-weight: 600; }
.hkc-link { border: 0; background: none; padding: 0 4px; color: var(--hkc-accent-dark); font: inherit; font-weight: 600; cursor: pointer; }
.hkc-link.danger { color: var(--hkc-danger); }
.hkc-voidform { display: inline-flex; align-items: center; gap: 6px; }
.hkc-btn { min-height: 34px; padding: 0 14px; border: 1px solid var(--hkc-line); border-radius: 7px; background: var(--hkc-surface); color: var(--hkc-ink); font: 600 13px/1.2 var(--hkc-font); cursor: pointer; }
.hkc-btn.primary { background: var(--hkc-accent); border-color: var(--hkc-accent); color: #fff; }
.hkc-btn.danger { background: var(--hkc-danger); border-color: var(--hkc-danger); color: #fff; }
.hkc-btn.small { min-height: 28px; padding: 0 10px; font-size: 12px; }
.hkc-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) { .hkc-grid { grid-template-columns: 1fr; } .hkc-field { grid-template-columns: 1fr; } }

/* 暗色（dispatch 页跟 ops-dark-pages.css；工作台里 ops-dark 由令牌接管） */
html.ops-dark .hkc-dialog {
  --hkc-ink: #edf6fb; --hkc-muted: #9fb3c4; --hkc-line: #243142; --hkc-soft: #161c26; --hkc-surface: #0e1117; --hkc-bg: #0b0e13;
  --hkc-accent: #3f9fb6; --hkc-accent-dark: #7fd0e2; --hkc-warn-bg: #2a2110; --hkc-warn-line: #6b5520;
  box-shadow: 0 24px 64px rgb(0 0 0 / 40%);
}
html.ops-dark .hkc-warn { color: #f2d48a; }
html.ops-dark .hkc-table tr.use td { background: rgb(63 159 182 / 10%); }

/* ---------------- H7b（2026-10-25）：嵌在「发货出库」页里 + 照 Excel 原样的预览 ---------------- */
.hkc-dialog.hkc-inline { position: static; width: auto; max-width: none; max-height: none; margin: 0; overflow: visible; box-shadow: none; display: grid; grid-template-rows: auto auto auto; }
.hkc-dialog.hkc-inline .hkc-body { overflow: visible; }
.hkc-dialog.hkc-inline .hkc-head strong { font-size: 15px; }
.hkc-multi { padding: 6px 10px; border-radius: 7px; background: var(--hkc-soft); color: var(--hkc-ink); }
.hkc-next { margin-top: 8px; }
.hkc-sheets h4 { margin: 0; font-size: 13px; font-weight: 700; }
.hkc-sheet { min-width: 0; overflow: hidden; }
.hkc-sheet-name { margin: 6px 0 4px; color: var(--hkc-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hkc-paper { display: inline-block; max-width: 100%; padding: 18px 20px 24px; border: 1px solid #c9d1d9; background: #fff; color: #000; box-shadow: 0 6px 20px rgb(23 50 77 / 12%); }
.hkc-paper table { border-collapse: collapse; table-layout: fixed; font: 400 16px/1.2 "Times New Roman", Times, "Songti SC", serif; color: #000; }
.hkc-paper td { padding: 0 3px; overflow: hidden; text-overflow: clip; white-space: nowrap; vertical-align: bottom; }
html.ops-dark .hkc-paper { border-color: #3a4656; box-shadow: 0 6px 24px rgb(0 0 0 / 45%); }
.hkc-paper td[style*="overflow:visible"] { position: relative; z-index: 1; }
.hkc-dialog.hkc-inline input[type=checkbox], .hkc-dialog.hkc-inline input[type=radio] { flex: none; width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0; padding: 0; accent-color: var(--hkc-accent); }
.hkc-dialog.hkc-inline .hkc-same { white-space: nowrap; }
.hkc-dialog.hkc-inline .hkc-party h4 { gap: 10px; }
.hkc-dialog.hkc-inline .hkc-table .hkc-in, .hkc-dialog.hkc-inline .hkc-voidform .hkc-in { height: 30px; min-height: 30px; padding: 0 6px; font-size: 13px; }
.hkc-dialog.hkc-inline .hkc-table .hkc-in.w4 { width: 54px; } .hkc-dialog.hkc-inline .hkc-table .hkc-in.w5 { width: 76px; } .hkc-dialog.hkc-inline .hkc-table .hkc-in.w6 { width: 92px; }
.hkc-dialog.hkc-inline .hkc-field input, .hkc-dialog.hkc-inline .hkc-field textarea { min-height: 34px; }
.hkc-dialog.hkc-inline .hkc-switch { display: none; }

/* ---------------- H7c（2026-10-26）：路线标签、客户 PI 留存、单价来源、要手填的装箱 ---------------- */
.hkc-route { display: inline-flex; align-items: center; margin-left: auto; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.hkc-route.third { background: rgb(36 117 138 / 12%); color: var(--hkc-accent-dark); }
.hkc-route.direct { background: var(--hkc-soft); color: var(--hkc-muted); }
.hkc-cpis { display: grid; gap: 6px; }
.hkc-cpi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; }
.hkc-cpi.have { background: rgb(31 122 77 / 8%); color: var(--hkc-ok); }
.hkc-cpi.none { background: var(--hkc-warn-bg); border: 1px solid var(--hkc-warn-line); color: #6b4a00; }
html.ops-dark .hkc-cpi.none { color: #f2d48a; }
.hkc-file.small { min-height: 28px; padding: 0 10px; font-size: 12px; }
.hkc-fileinfo.warn { color: #6b4a00; }
html.ops-dark .hkc-fileinfo.warn { color: #f2d48a; }
.hkc-table td.rate { white-space: normal; }
.hkc-rate-src { display: block; margin-top: 1px; color: var(--hkc-muted); font-size: 11px; line-height: 1.2; }
.hkc-rate-src.bad { color: var(--hkc-danger); }
.hkc-in.missing { border-color: var(--hkc-danger); background: rgb(180 35 24 / 6%); }
/* ops-shell-v2 给 body.ops-workspace table td 的背景是 !important，要手填的行（黄）得压过它 */
.hkc-table tr.need td, body.ops-workspace .hkc-table tr.need td, body.ops-workspace .hkc-table tr.need.use td { background: rgb(240 195 109 / 22%) !important; }
html.ops-dark .hkc-table tr.need td, html.ops-dark body.ops-workspace .hkc-table tr.need td, html.ops-dark body.ops-workspace .hkc-table tr.need.use td { background: rgb(240 195 109 / 14%) !important; }
.hkc-in.missing, body.ops-workspace .hkc-table td .hkc-in.missing { border-color: var(--hkc-danger) !important; background: rgb(180 35 24 / 6%) !important; }
.hkc-desc-src { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--hkc-soft); color: var(--hkc-muted); font-size: 10px; line-height: 15px; vertical-align: 1px; }