/* 新版委托单工作区：导航和编辑操作各占独立区域。 */
#orderFormView { padding-bottom: 120px; }
#orderFormView .order-topbar { display: none; }
#orderBottomBar {
  position: fixed; left: var(--sb-w, 240px); right: 0; bottom: 0;
  z-index: 40; min-height: 88px; display: flex; align-items: center;
  justify-content: flex-end; gap: 14px; padding: 18px 32px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(15,23,42,.04);
}
#orderBottomBar .obtn {
  width: auto; min-width: 140px; height: 48px; padding: 0 24px;
  flex: 0 0 auto; white-space: nowrap; gap: 10px;
  border-radius: 14px; font-size: 14px; line-height: 1;
}
#orderBottomBar .obtn .icon { width: 20px; height: 20px; flex: 0 0 20px; }
#orderBottomBar .obtn--save { color: var(--blue); background: var(--blue-050); border-color: var(--blue-100); box-shadow: none; }
#orderBottomBar .obtn--save:hover:not([disabled]) { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(0,102,204,.16); }
#orderBottomBar .obtn--generate { background-image: linear-gradient(115deg,#0066cc,#278bef,#0057b3); background-size: 200% 100%; box-shadow: 0 5px 14px rgba(0,102,204,.24); }
#orderBottomBar .obtn--generate:hover:not([disabled]) { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0,102,204,.32); }
#orderBottomBar .obtn:active:not([disabled]) { transform: translateY(0) scale(.96); }
.is-order-editing #viewTitle { display: flex; align-items: center; gap: 20px; }
.order-return { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--blue); background: var(--card); font-size: 13px; white-space: nowrap; transition: transform .25s var(--ease-back),background .2s,box-shadow .2s; }
.order-return svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.order-return:hover { background: var(--blue-050); box-shadow: var(--sh-1); transform: translateY(-1px); }
.order-return:hover svg { transform: translateX(-3px); }
.order-return:active { transform: scale(.96); }
.order-return:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width:900px) {
  #orderBottomBar { left: 76px; padding-inline: 16px; }
  .is-order-editing #viewTitle { gap: 10px; }
  .is-order-editing .topbar .search { display: none; }
}
@media (max-width:520px) {
  #orderBottomBar { gap: 8px; padding-inline: 10px; }
  #orderBottomBar .obtn { min-width: 0; flex: 1; padding-inline: 10px; font-size: 13px; }
  .is-order-editing #viewTitle { flex-wrap: wrap; font-size: 17px; gap: 4px 10px; }
}
@media (prefers-reduced-motion:reduce) {
  #orderBottomBar .obtn, .order-return, .order-return svg { transition: none; }
  #orderBottomBar .obtn:hover:not([disabled]), .order-return:hover, .order-return:hover svg { transform: none; }
}
/* 委托单工作台专用顶栏和操作栏。 */
.is-order-editing .topbar {
  height: 76px;
  padding-inline: 30px;
  background: var(--card);
  border-bottom-color: var(--line);
  box-shadow: 0 5px 20px rgba(15,23,42,.035);
}
.is-order-editing .topbar > .search,
.is-order-editing .topbar > .icon-btn { display: none; }
.is-order-editing #viewTitle {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 20px; width: 100%; min-width: 0;
}
.is-order-editing #viewTitle .order-return { grid-column: 1; justify-self: start; }
.is-order-editing #viewTitle .order-toolbar-copy { grid-column: 2; justify-self: center; text-align: center; }
.order-toolbar-copy { display: grid !important; gap: 2px; min-width: 0; animation: titleSwap .45s var(--ease-out); }
.order-toolbar-copy strong { color: var(--ink); font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
.order-toolbar-copy small { color: var(--gray); font-size: 12px; font-weight: 400; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
.order-return {
  min-height: 40px; padding: 0 16px; flex: none;
  border-color: color-mix(in srgb,var(--blue) 22%,var(--line));
  border-radius: 11px; background: var(--blue-050); font-weight: 600;
}
.order-return:hover {
  background: var(--card); border-color: var(--blue);
  box-shadow: 0 7px 18px rgba(0,102,204,.15); transform: translateY(-2px);
}
#orderBottomBar { justify-content: space-between; gap: 20px; }
@media (max-width:900px) { .is-order-editing #viewTitle { gap: 12px; } }
@media (max-width:520px) {
  .is-order-editing .topbar { height: 70px; padding-inline: 14px; }
  .is-order-editing #viewTitle { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; }
  .order-toolbar-copy small { display: none; }
  .order-return { min-height: 38px; padding-inline: 10px; }
  .order-return span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #orderBottomBar { gap: 8px; }
}
@media (prefers-reduced-motion:reduce) { .order-toolbar-copy { animation: none; } }
/* =========================================================
   委托单填写界面 · 样式（逐字复用旧界面 main.css 613-1058 行；
   旧文件 resources/static/css/main.css 已于 2026-09-30 随旧 UI 清理删除）
   仅用于保证「委托单填写界面与旧版一模一样」。类名、取值、配色均不改动。
   来源区块：委托单表单样式（form-section / form-grid / sample-grid / sg-* /
             spec-suggest / date-picker / date-calendar / signature / checkbox 等）
   ========================================================= */

/* ════════════════════════════════════════════════════════════
   委托单表单样式
   ════════════════════════════════════════════════════════════ */
.order-view { padding: 0 24px 40px; }
.order-topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    height: 56px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    column-gap: 12px;
    align-items: center;
    justify-items: center;
    margin: 0 -24px 20px;
    padding: 0 24px;
    background: rgba(248,250,252,.96);
    border-bottom: 1px solid rgba(148,163,184,.15);
    backdrop-filter: blur(12px);
}
.order-topbar h2 {
    margin: 0;
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
}
.order-topbar-actions { position: static; justify-self: end; display: flex; align-items: center; }
.order-form-close {
    width: 28px;
    height: 28px;
    padding: 0;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(148,163,184,.3);
    border-radius: 50%;
    transition: all .2s;
}
.order-form-close:hover { color: #1e293b; background: #fff; border-color: #94a3b8; }

/* 编辑时不让装饰性鼠标光晕覆盖表单；输入框始终保留清晰的文字光标。 */
body.is-order-editing .cursor-glow { opacity: 0; }
#orderFormView input[type="text"],
#orderFormView textarea,
#orderFormView [contenteditable="true"] { cursor: text; caret-color: #1e293b; }

.input-history-dropdown {
    position: fixed;
    z-index: 800;
    overflow: hidden;
    min-width: 140px;
    background: #fff;
    border: 1px solid rgba(148,163,184,.26);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15,23,42,.16);
}
.input-history-dropdown__title { padding: 7px 10px; color: #94a3b8; font-size: 12px; border-bottom: 1px solid #f1f5f9; }
.input-history-dropdown__item { padding: 8px 10px; color: #334155; font-size: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input-history-dropdown__item:hover { color: #1d4ed8; background: #eff6ff; }
.form-section { margin-bottom: 28px; }
.form-section-title {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 1.05rem; font-weight: 600; color: #1e293b;
    padding-bottom: 10px; margin-bottom: 16px;
    border-bottom: 1px solid rgba(148,163,184,0.15);
}

/* 委托单页面标题 */
.order-form-title {
    text-align: center; font-size: 1.4rem; font-weight: 700;
    color: #1e293b; padding-bottom: 16px; margin-bottom: 20px;
    border-bottom: 1px solid rgba(148,163,184,0.15);
    letter-spacing: 8px;
}
.order-form-meta {
    display: flex; gap: 28px; margin-bottom: 22px;
}
.order-form-meta-item {
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.order-form-meta-item .form-label {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.86rem; font-weight: 500; color: #475569;
    min-width: 56px; flex-shrink: 0; text-align: right;
}
.order-form-meta-item .form-input {
    flex: 1; padding: 8px 12px; font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.86rem; color: #1e293b;
    background: rgba(248,250,252,0.6);
    border: 1px solid rgba(148,163,184,0.25); border-radius: 8px;
    outline: none; min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.order-form-meta-item .form-input:focus {
    border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    background: rgba(255,255,255,0.8);
}
.orderNo-confirm-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1px solid rgba(148,163,184,0.25); border-left: none;
    border-radius: 0 8px 8px 0;
    background: #3b82f6; color: #fff; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.orderNo-confirm-btn:hover { background: #2563eb; }
.orderNo-confirm-btn:active { background: #1d4ed8; }

.form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
}
.form-grid .full-width { grid-column: 1 / -1; }
.form-grid-item {
    display: flex; align-items: center; gap: 10px;
}
.form-grid-item .form-label {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.86rem; font-weight: 500; color: #475569;
    min-width: 70px; flex-shrink: 0; text-align: right;
}
.form-grid-item .form-input {
    flex: 1; padding: 8px 12px; font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.86rem; color: #1e293b;
    background: rgba(248,250,252,0.6);
    border: 1px solid rgba(148,163,184,0.25); border-radius: 8px;
    outline: none; min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-grid-item .form-input:focus {
    border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    background: rgba(255,255,255,0.8);
}

.form-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.form-row .form-label {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.86rem; font-weight: 500; color: #475569;
    min-width: 90px; flex-shrink: 0; text-align: right;
}
.form-label-wide { min-width: 110px; }
.form-row .form-input {
    flex: 1; padding: 8px 12px; font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.86rem; color: #1e293b;
    background: rgba(248,250,252,0.6);
    border: 1px solid rgba(148,163,184,0.25); border-radius: 8px; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-row .form-input:focus {
    border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    background: rgba(255,255,255,0.8);
}

/* ── 单选框 ── */
.radio-group { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.radio-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.85rem; color: #475569; cursor: pointer; padding: 4px 0;
}
.radio-label input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; border: 2px solid #cbd5e1;
    border-radius: 50%; outline: none; cursor: pointer; flex-shrink: 0; position: relative;
    transition: border-color 0.2s;
}
.radio-label input[type="radio"]:checked { border-color: #3b82f6; box-shadow: inset 0 0 0 4px #3b82f6; }
.radio-label input[type="radio"]:hover { border-color: #3b82f6; }

.fixed-text {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.85rem; color: #475569; line-height: 1.7;
    background: rgba(248,250,252,0.4);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 8px; padding: 12px 16px; user-select: none;
}
.fixed-text-small { font-size: 0.82rem; line-height: 1.6; }

.signature-area { display: flex; align-items: center; gap: 24px; padding: 8px 0; }
.signature-item {
    display: flex; align-items: center; gap: 8px;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.85rem; color: #475569;
}
.signature-item-sign { position: relative; }
.signature-item-sign .signature-placeholder { width: 200px; height: 50px; margin-top: 8px; }
.signature-item-right { margin-left: 50px; }
.signature-placeholder { width: 120px; height: 32px; border-bottom: 1.5px solid rgba(148,163,184,0.25); display: inline-flex; align-items: center; justify-content: center; }
.signature-img {
    position: absolute; left: calc(50% + 70px); bottom: -80px;
    height: 160px; width: auto; object-fit: contain; pointer-events: none;
    transform: translateX(-50%);
    z-index: 2;
}
/* 收样人/接收人/领取人签字框：更高、居中，签名图调大 */
#receiveSignature, #receiverSignature, #claimerSignature { height: 52px; }
#receiveSignature .signature-img, #receiverSignature .signature-img, #claimerSignature .signature-img {
    position: static;
    transform: none;
    height: 48px;
    max-width: 150px;
    object-fit: contain;
    pointer-events: auto;
}
/* 签字按钮 */
.sign-btn {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 2px 10px;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    margin: 0 6px;
    transition: background 0.2s;
}
.sign-btn:hover { background: #2563eb; }
/* 签字已落库：按钮转为「已签字」锁定态（与后端 409「不可撤销不可覆盖」同语义）。
   灰色 + 禁用光标，明确传达「这件事已经完成，改不了了」，而不是「按钮坏了点不动」。 */
.sign-btn.is-signed,
.sign-btn[data-signed="1"] {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
}
.sign-btn.is-signed:hover,
.sign-btn[data-signed="1"]:hover { background: #e2e8f0; }
.sign-btn:disabled { pointer-events: none; }
/* 委托方签名盖章：纯文本自动回显联系人姓名，与收样人签字区字号/间距对齐，不渲染签名控件 */
.entrust-sign-text {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.85rem;
    color: #1e293b;
    min-width: 200px;
    min-height: 24px;
    line-height: 1.6;
    word-break: break-all;
}
.entrust-sign-text.placeholder { color: #94a3b8; }

/* ── 流转单签字按钮 ──
   2026-09-18 移除：这里原有一份「彩色渐变玻璃 + 白字」的旧版样式（配 .acceptor/.receiver/.claimer 类），
   但新界面的流转单面板（ui-preview/assets/js/app.js）不再输出这三个类，只输出 data-transfer-sign；
   本文件在 app.css 之后加载，单类选择器同权重 → 旧样的 `color:#ffffff` 覆盖掉 app.css 的深色文字，
   而渐变背景因类名不匹配全部落空 → 「白字 + 透明底」= 完全看不见。
   样式统一由 app.css 的 .transfer-sign-btn 负责（角标保留绿/青/紫身份色）。 */
/* 下载按钮：普通纯色（简洁） */
.transfer-download-btn {
    padding: 7px 18px;
    border-radius: 8px;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 13px; font-weight: 500;
    cursor: pointer; color: #ffffff;
    background: #3b82f6;
    border: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.transfer-download-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.transfer-download-btn:active { transform: scale(0.97); }

.checkbox-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.85rem; color: #475569; cursor: pointer; padding: 4px 0;
}
.checkbox-label input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; border: 2px solid #cbd5e1;
    border-radius: 4px; cursor: pointer; flex-shrink: 0; position: relative;
    transition: border-color 0.2s, background 0.2s;
}
.checkbox-label input[type="checkbox"]:checked {
    border-color: #3b82f6;
    background: #3b82f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
}
.checkbox-label input[type="checkbox"]:hover { border-color: #3b82f6; }

/* ── 样品明细多行输入 ── */
.sample-grid-wrap { flex: 1; overflow-x: auto; }
.sample-grid {
    display: grid;
    grid-template-columns: 32px 1.5fr 0.7fr 68px 1.0fr 1.0fr 28px;
    gap: 0;
    min-width: 640px;
}
.sample-grid .sg-header {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.78rem; font-weight: 500; color: #64748b;
    padding: 6px 4px; text-align: center;
    border-bottom: 1px solid rgba(148,163,184,0.15);
    background: rgba(248,250,252,0.3);
}
.sample-grid .sg-header.idx { width: 32px; }
.sample-grid .sg-cell {
    padding: 4px 2px;
    display: flex; align-items: center;
    position: relative;
}
.sample-grid .sg-cell.idx {
    justify-content: center;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.82rem; color: #94a3b8;
}
.sample-grid .sg-cell input {
    width: 100%; padding: 6px 8px;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.82rem; color: #1e293b;
    background: rgba(248,250,252,0.6);
    border: 1px solid rgba(148,163,184,0.20); border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.sample-grid .sg-cell input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.10);
    background: rgba(255,255,255,0.8);
}
/* ── 样品名称预测补全（灰色预测文本覆盖层） ── */
.sample-grid .sg-cell .sg-name-wrap {
    position: relative;
    flex: 1;
    width: 100%;
}
.sample-grid .sg-cell .sg-name-wrap .sg-input-name {
    position: relative;
    z-index: 1;
}
.sg-name-ghost-prefix, .sg-name-ghost-suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #94a3b8;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.82rem;
    line-height: normal;
    white-space: pre;
    display: none;
    z-index: 10;
    text-decoration: underline dashed;
    text-decoration-color: #94a3b8;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.sg-add-btn {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; background: none;
    border-radius: 6px; cursor: pointer; color: #94a3b8;
    font-size: 1rem; transition: all 0.2s;
}
.sg-add-btn:hover { background: rgba(59,130,246,0.10); color: #3b82f6; transform: scale(1.15); }
.sg-del-btn {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; background: none;
    border-radius: 6px; cursor: pointer; color: #cbd5e1;
    font-size: 0.75rem; transition: all 0.2s;
}
.sg-del-btn:hover { background: rgba(239,68,68,0.10); color: #ef4444; }

.sg-del-btn {
    flex: none;
    color: #b91c1c;
    background: #fef2f2;
}
.sg-del-btn svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round;
}
.sg-del-btn:focus-visible { outline: 2px solid #b91c1c; outline-offset: 2px; }
.sg-del-btn:disabled {
    color: #64748b; background: #f1f5f9;
    cursor: not-allowed;
}

/* 规格型号列：contenteditable div，样式对齐其它 input */
.sample-grid .sg-cell .sg-input-spec {
    width: 100%; padding: 6px 8px;
    min-height: 32px;
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.82rem; color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    background: rgba(248,250,252,0.6);
    border: 1px solid rgba(148,163,184,0.20); border-radius: 6px;
    outline: none;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
/* 统一所有样品明细 input 的占位符颜色，与规格型号 div 一致 */
.sample-grid .sg-cell input::placeholder {
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
}
.sample-grid .sg-cell .sg-input-spec:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.10);
    background: rgba(255,255,255,0.8);
}
.sample-grid .sg-cell .sg-input-spec.is-empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
}
.sample-grid .sg-cell .sg-input-spec.sg-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.10);
}

/* ── 规格型号自定义下拉（仅此列，模拟浏览器"数据库"历史） ── */
.spec-suggest {
    position: fixed;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.12);
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
    box-sizing: border-box;
}
.spec-suggest-title {
    font-size: 0.7rem; color: #94a3b8;
    padding: 4px 12px 6px;
    letter-spacing: 0.02em;
}
.spec-suggest-item {
    font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.82rem; color: #1e293b;
    padding: 7px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.spec-suggest-item:hover { background: #f1f5f9; }


/* ════════════════════════════════════════════════════════════
   自定义日期选择器
   ════════════════════════════════════════════════════════════ */
.date-picker { position: relative; display: inline-flex; align-items: center; }
.date-display {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; font-family: "PingFang SC",-apple-system,sans-serif;
    font-size: 0.88rem; color: #1e293b;
    background: rgba(248,250,252,0.6);
    border: 1px solid rgba(148,163,184,0.25); border-radius: 8px;
    cursor: pointer; user-select: none; min-width: 130px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.date-display:hover { border-color: rgba(148,163,184,0.45); background: rgba(248,250,252,0.8); }
.date-text { flex: 1; }
.date-icon { font-size: 0.78rem; color: #94a3b8; }
.date-display:hover .date-icon { color: #3b82f6; }

.date-calendar {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    width: 256px; padding: 16px;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.50); border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.6);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}
.date-calendar.open { opacity: 1; visibility: visible; transform: translateY(0); }
.date-calendar.open-up { top: auto; bottom: calc(100% + 6px); transform: translateY(-4px); }
.date-calendar.open-up.open { transform: translateY(0); }

.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-nav { width: 28px; height: 28px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: #64748b; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.cal-nav:hover { background: rgba(59,130,246,0.08); color: #3b82f6; }
.cal-month-year { font-family: "PingFang SC",-apple-system,sans-serif; font-size: 0.9rem; font-weight: 600; color: #1e293b; cursor: pointer; }
.cal-month-year:hover { color: #3b82f6; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; margin-bottom: 6px; }
.cal-weekdays span { font-family: "PingFang SC",-apple-system,sans-serif; font-size: 0.72rem; font-weight: 500; color: #94a3b8; padding: 4px 0; }
.cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: "PingFang SC",-apple-system,sans-serif; font-size: 0.82rem; font-weight: 450; color: #475569; border-radius: 10px; cursor: pointer; transition: background 0.2s, color 0.2s; user-select: none; }
.cal-day:hover { background: rgba(59,130,246,0.08); color: #1e293b; }
.cal-day.other-month { color: #cbd5e1; }
.cal-day.today { font-weight: 600; color: #3b82f6; background: rgba(59,130,246,0.06); }
.cal-day.selected { background: #3b82f6; color: #fff; font-weight: 600; }
.cal-day.selected:hover { background: #2563eb; }

/* ── 拖入导入遮罩 ── */
.drop-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
    background: rgba(37,99,235,0.06);
    backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    pointer-events: none;
}
.drop-overlay.show { display: flex; }
.drop-overlay-inner {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(20px);
    border: 2px dashed rgba(59,130,246,0.35); border-radius: 24px;
    padding: 40px 60px; text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}
.drop-overlay-inner i { font-size: 2.5rem; color: #3b82f6; margin-bottom: 12px; }
.drop-overlay-inner p { font-family: "PingFang SC",-apple-system,sans-serif; font-size: 1rem; color: #475569; }
.drop-overlay-inner small { font-family: "PingFang SC",-apple-system,sans-serif; font-size: 0.8rem; color: #94a3b8; }

/* 液态玻璃底部操作坞（放在文件末尾以覆盖基础操作栏）。
   ── 实时折射实现（2026-09-13）：order-glass-lite.js 用 canvas 生成「位移矢量位图」
      （canvas → data URI → <feImage>），交给 SVG 滤镜 #liquidGlassRefraction 的
      feDisplacementMap（R 通道管横向 / G 通道管纵向），再经 3 通道色散链
      （3× feColorMatrix + 2× feBlend）产生红蓝彩边，最后由
      `backdrop-filter: url(#liquidGlassRefraction) blur(...)` 作用于**底栏背后的真实页面内容**。
      位图里只有位移矢量、不含页面内容 → 不复制 DOM、不逐帧跑 JS，滚动由浏览器合成器负责。
      ⚠️ 真正生效的 backdrop-filter 是 JS 写在内联 style 上的（内联优先级高于本文件），
      所以改磨砂/饱和度/位移强度必须改 order-glass-lite.js 顶部的常量——只改本文件不生效。
      ⚠️ 位移强度与边缘带宽也在那个文件顶部：SCALE / SPREAD / BAND_X / BAND_Y。
   ── 闸门：下面的 url() 规则由 <html data-lg-refract="on"> 把守。只有 JS 确认
      「Chromium 引擎 + 图元已 append 完毕」才置位；未置位时只有纯 blur，任何浏览器都不白屏。
      （Safari/Firefox 会解析 url() 成功却渲染空白，且 CSS.supports() 谎报 true —— Safari bug 245510。）
     调试时手动删掉 <html> 上这个属性即可在浏览器里即时关闭折射。
   ── 图层自下而上：底栏 backdrop-filter 结果 → 底栏 background → ::before 边缘光影 → ::after 扫光 → 按钮。
   ── 降级：JS 不支持/构建失败时只剩本文件的 blur + 透明底色，不白屏、不影响按钮。 */
.liquid-glass-filters { position:fixed; width:0; height:0; overflow:hidden; pointer-events:none; }
#orderBottomBar { --lg-tint:transparent; left:calc(var(--sb-w,240px) + 22px); right:22px; bottom:18px; min-height:78px; padding:14px 18px max(14px,env(safe-area-inset-bottom)); overflow:hidden; isolation:isolate; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.7); border-radius:22px; box-shadow:0 20px 56px rgba(15,23,42,.13),0 4px 14px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter:blur(1px) saturate(110%); backdrop-filter:blur(1px) saturate(110%); -webkit-backdrop-filter:blur(0.5px) saturate(110%); backdrop-filter:blur(0.5px) saturate(110%); }
/* 闸门后的折射档位：只有 <html data-lg-refract="on"> 存在时才匹配。
   JS 也会把同样的串写进内联 style（内联优先级更高），这条是第二道保险 + 便于用 DevTools
   直接删属性来即时开关。未置位时上一行的纯 blur 生效，任何浏览器都不会白屏。 */
html[data-lg-refract="on"] #orderBottomBar {
  -webkit-backdrop-filter:url("#liquidGlassRefraction") blur(0.5px) saturate(110%);
  backdrop-filter:url("#liquidGlassRefraction") blur(0.5px) saturate(110%);
}
#orderBottomBar .obtn, #orderBottomBar .order-glass-refraction { transition: transform .32s var(--ease-back), box-shadow .28s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), filter .22s var(--ease), opacity .18s linear; }
/* 折射副本容器：选择器带上类名，以压过下面 #orderBottomBar > * { position:relative; z-index:1 }。
   必须高于底栏自身底色、低于 ::before 底色与按钮；hidden 时完全不渲染（降级态）。 */
#orderBottomBar > .order-glass-refraction { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
#orderBottomBar > .order-glass-refraction[hidden] { display:none !important; }
/* 滚动期间不重跑折射滤镜（避免每帧重绘），只用 opacity 做零成本的「玻璃变清」提示。 */
#orderBottomBar.is-refracting.is-scrolling > .order-glass-refraction { opacity:.5; }
#orderBottomBar::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background-image:linear-gradient(115deg,rgba(255,255,255,.10),transparent 40%,rgba(84,160,255,.06) 72%,rgba(255,255,255,.05)); background-color:var(--lg-tint); }
/* glass17 · 静态玻璃板（2026-09-12）：底栏自身**不再有任何悬停反馈**。
   移除项：:hover 背景变化 / :hover::after 高光扫过 / :hover 阴影变化 / 任何位移缩放。
   扫光层 (#orderBottomBar::after) 保留但永久停在 translateX(-125%)（栏外左侧），
   等于不存在，将来若要恢复只需补一条 :hover::after 规则。
   保留项（按钮自身动画，不属于玻璃板）：.obtn:hover、.obtn:active、.icon 动画。 */
#orderBottomBar::after { content:""; position:absolute; top:-70%; left:-18%; z-index:-1; width:54%; height:180%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg) translateX(-125%); }
#orderBottomBar > * { position:relative; z-index:1; }
[data-theme="dark"] #orderBottomBar { --lg-tint:rgba(16,18,26,.18); background:rgba(16,18,26,.12); border-color:rgba(255,255,255,.2); box-shadow:0 20px 54px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.18); }
@media (max-width:900px) {
  #orderBottomBar { left:92px; right:16px; bottom:14px; padding-inline:16px; }
}
@media (max-width:520px) {
  #orderBottomBar { left:84px; right:8px; bottom:8px; gap:8px; padding-inline:10px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) {
  #orderBottomBar, #orderBottomBar::after { transition:none; }
}
/* 注：上面 @media 的闭合花括号是补上的——glass5 版本文件在末尾被截断，缺失该括号（浏览器会自动闭合，无视觉影响）。 */
/* ── glass14 · 玻璃厚度（边缘光影）─────────────────────────────────
   厚度靠 4 条 inset 光影表现，全部集中在贴边 2~4px 内，中心不产生白色光斑：
     上沿  inset 0 2px 2px   rgba(255,255,255,.65)  柔和的白色高光
     下沿  inset 0 -3px 4px  rgba(89,119,162,.18)   轻微蓝灰色内阴影（玻璃底厚）
     左内  inset 2px 0 3px   rgba(255,255,255,.32)  很淡的内侧高光
     右内  inset -2px 0 3px  rgba(255,255,255,.22)  更淡（左侧受光更强才自然）
   外部保留两层柔和投影；不做四周等亮的白圈（那会像泡泡）。
   1px 描边保留上一版的原值，未改动。 */
#orderBottomBar {
  border-color:rgba(255,255,255,.88);
  box-shadow:0 16px 36px rgba(24,39,65,.16),0 3px 7px rgba(24,39,65,.10),
    inset 0 2px 2px rgba(255,255,255,.32),inset 0 -3px 4px rgba(89,119,162,.18),
    inset 2px 0 3px rgba(255,255,255,.32),inset -2px 0 3px rgba(255,255,255,.22);
}
/* glass17：原来的底部栏悬停规则（加亮/加深阴影）已删除 —— 玻璃板悬停必须完全静止。 */
/* 边缘光只贴边：上沿 4px 内渐隐的柔和高光 + 下沿 4px 内渐隐的蓝灰。
   上沿白带已从 .30 降到 .14（再减一半以上），避免"白雾板"观感；
   下沿蓝灰是压暗而非加白，保留以维持玻璃厚度。 */
#orderBottomBar::before {
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  background-image:
    linear-gradient(to bottom,rgba(255,255,255,.14),rgba(255,255,255,0) 4px),
    linear-gradient(to top,rgba(114,149,191,.14),rgba(114,149,191,0) 4px);
}
[data-theme="dark"] #orderBottomBar {
  --lg-tint:transparent;
  border-color:rgba(225,239,255,.34);
  box-shadow:0 18px 38px rgba(0,0,0,.36),
    inset 0 2px 2px rgba(235,246,255,.30),inset 0 -3px 4px rgba(0,0,0,.34),
    inset 2px 0 3px rgba(213,233,255,.13),inset -2px 0 3px rgba(213,233,255,.09);
}

/* ── glass16 · 边缘磨砂层（中央保持通透的关键）─────────────────────
   主体 backdrop-filter 已降到 blur(0.5px)，中央几乎不糊 → 底下文字笔画可辨。
   磨砂质感改由这一层承担。它**必须**放在 #orderBottomBar 之外：
   底栏带 isolation:isolate + backdrop-filter，本身已是 backdrop root，
   其内部伪元素的 backdrop-filter 只能采样到底栏自身的背景，采不到背后的页面内容。
   #orderFormView::after 与底栏处于同一 stacking context
   （已核实：底栏的直接父元素就是 #orderFormView），z-index 39 < 底栏的 40，
   所以这层玻璃画在底栏之下、页面内容之上 —— 底栏的半透明底色与边缘高光再叠在它上面。
   mask 用四条单向渐变取并集，把模糊限制在四边：上/下各 19%（约 15px）、左/右各 3%（约 35px），
   中央 62% 完全不参与模糊。模糊半径 2px 是刻意选的：比中央的 0.5px 强 4 倍（够"磨砂"），
   又不会糊掉边缘的折射拉长；想更浓把 2px 改成 3px 即可（一处）。 */
#orderFormView::after {
  content:""; position:fixed; z-index:39; pointer-events:none;
  left:calc(var(--sb-w,240px) + 22px); right:22px; bottom:18px;
  height:78px; border-radius:22px;
  -webkit-backdrop-filter:blur(2px) saturate(108%);
  backdrop-filter:blur(2px) saturate(108%);
  -webkit-mask-image:
    linear-gradient(to bottom,#000,rgba(0,0,0,0) 19%),
    linear-gradient(to top,#000,rgba(0,0,0,0) 19%),
    linear-gradient(to right,#000,rgba(0,0,0,0) 3%),
    linear-gradient(to left,#000,rgba(0,0,0,0) 3%);
  mask-image:
    linear-gradient(to bottom,#000,rgba(0,0,0,0) 19%),
    linear-gradient(to top,#000,rgba(0,0,0,0) 19%),
    linear-gradient(to right,#000,rgba(0,0,0,0) 3%),
    linear-gradient(to left,#000,rgba(0,0,0,0) 3%);
}
@media (max-width:900px) {
  #orderFormView::after { left:92px; right:16px; bottom:14px; }
}
@media (max-width:520px) {
  #orderFormView::after { left:84px; right:8px; bottom:8px; border-radius:18px; }
}

/* ── 委托单暗色主题 ────────────────────────────────────────────────
   旧版表单使用了大量浅色硬编码。这里以页面局部令牌统一覆盖，避免出现
   深色背景配灰白输入框、暗色文字的“反相未完成”状态。 */
[data-theme="dark"] #orderFormView {
  --order-surface:#171c24;
  --order-surface-strong:#1d2430;
  --order-surface-soft:#131820;
  --order-text:#e7edf6;
  --order-muted:#a9b5c5;
  --order-placeholder:#78869a;
  --order-line:rgba(148,163,184,.20);
  --order-line-strong:rgba(148,163,184,.32);
  color:var(--order-text);
  color-scheme:dark;
}
[data-theme="dark"] #orderFormView :is(.form-section-title,.order-form-title) {
  color:var(--order-text);
  border-bottom-color:var(--order-line);
}
[data-theme="dark"] #orderFormView :is(
  .form-label,.radio-label,.checkbox-label,.signature-item,.fixed-text,
  .entrust-sign-text,.sample-grid .sg-header,.sample-grid .sg-cell.idx
) { color:var(--order-muted); }
[data-theme="dark"] #orderFormView :is(
  .form-input,.sample-grid .sg-cell input,.sample-grid .sg-input-spec,.date-display
) {
  background:var(--order-surface);
  color:var(--order-text);
  -webkit-text-fill-color:var(--order-text);
  border-color:var(--order-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
[data-theme="dark"] #orderFormView :is(
  .form-input,.sample-grid .sg-cell input
)::placeholder {
  color:var(--order-placeholder);
  -webkit-text-fill-color:var(--order-placeholder);
  opacity:1;
}
[data-theme="dark"] #orderFormView :is(
  .form-input,.sample-grid .sg-cell input,.sample-grid .sg-input-spec,.date-display
):focus,
[data-theme="dark"] #orderFormView .date-display:hover {
  background:var(--order-surface-strong);
  border-color:rgba(59,147,247,.72);
  box-shadow:0 0 0 3px rgba(59,147,247,.14),inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] #orderFormView .fixed-text {
  color:var(--order-muted);
  background:var(--order-surface-soft);
  border-color:var(--order-line);
}
[data-theme="dark"] #orderFormView .sample-grid .sg-header {
  color:#91a0b4;
  background:rgba(29,36,48,.72);
  border-bottom-color:var(--order-line);
}
[data-theme="dark"] #orderFormView :is(
  .radio-label input[type="radio"],.checkbox-label input[type="checkbox"]
) { border-color:#59677a; background-color:#121720; }
[data-theme="dark"] #orderFormView :is(.signature-placeholder,#signaturePlaceholder) {
  border-bottom-color:var(--order-line-strong);
}
[data-theme="dark"] #orderFormView :is(.date-calendar,.spec-suggest) {
  color:var(--order-text);
  background:rgba(23,28,36,.94);
  border-color:var(--order-line-strong);
  box-shadow:0 18px 46px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] #orderFormView :is(.cal-month-year,.cal-day,.spec-suggest-item) {
  color:var(--order-text);
}
[data-theme="dark"] #orderFormView :is(.cal-day:hover,.spec-suggest-item:hover) {
  color:#f4f8ff;
  background:#263248;
}
[data-theme="dark"] #orderFormView .cal-day.other-month { color:#566276; }
[data-theme="dark"] #orderFormView .cal-weekdays span,
[data-theme="dark"] #orderFormView .spec-suggest-title { color:#7f8da1; }
[data-theme="dark"] .input-history-dropdown {
  color:var(--ink);
  background:#1b2029;
  border-color:rgba(148,163,184,.25);
  box-shadow:0 16px 40px rgba(0,0,0,.48);
}
[data-theme="dark"] .input-history-dropdown__title { color:#7f8da1; border-bottom-color:#2a313d; }
[data-theme="dark"] .input-history-dropdown__item { color:#dce5f2; }
[data-theme="dark"] .input-history-dropdown__item:hover { color:#8dc1ff; background:#202e43; }
+
/* 可输入样品状态组合框 */
.sample-status-combobox{position:relative;width:min(260px,100%)}
.sample-status-input{width:100%;padding-right:42px!important}
.sample-status-toggle{position:absolute;right:4px;top:50%;width:34px;height:34px;transform:translateY(-50%);display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#64748b;cursor:pointer;transition:background .18s,color .18s}
.sample-status-toggle:hover,.sample-status-combobox.is-open .sample-status-toggle{background:#eaf2ff;color:#2563eb}.sample-status-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .24s cubic-bezier(.16,1,.3,1)}.sample-status-combobox.is-open .sample-status-toggle svg{transform:rotate(180deg)}
.sample-status-menu{position:absolute;z-index:850;top:calc(100% + 6px);left:0;right:0;padding:6px;background:#fff;border:1px solid rgba(148,163,184,.28);border-radius:12px;box-shadow:0 14px 34px rgba(15,23,42,.18);animation:sampleStatusIn .22s cubic-bezier(.16,1,.3,1)}
.sample-status-menu[hidden]{display:none}.sample-status-menu button{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#253247;text-align:left;font:inherit;cursor:pointer;transition:background .16s,color .16s,transform .16s}.sample-status-menu button:hover,.sample-status-menu button.is-active{background:#edf5ff;color:#1d4ed8;transform:translateX(2px)}
.std-match-partial{color:#b45309!important;-webkit-text-fill-color:#b45309!important}.std-match-exact{color:#15803d!important;-webkit-text-fill-color:#15803d!important;font-weight:600}
[data-theme="dark"] #orderFormView .sg-input-spec{color:#dce5f2!important;-webkit-text-fill-color:#dce5f2!important;caret-color:#8dc1ff}
[data-theme="dark"] #orderFormView .sg-input-spec.is-empty::before{color:#77869a!important;-webkit-text-fill-color:#77869a!important}
[data-theme="dark"] .sample-status-menu{background:#1b2029;border-color:#344052;box-shadow:0 18px 42px rgba(0,0,0,.46)}
[data-theme="dark"] .sample-status-menu button{color:#dce5f2}[data-theme="dark"] .sample-status-menu button:hover,[data-theme="dark"] .sample-status-menu button.is-active{background:#263248;color:#8dc1ff}
[data-theme="dark"] .sample-status-toggle{color:#9aa9bc}[data-theme="dark"] .sample-status-toggle:hover,[data-theme="dark"] .sample-status-combobox.is-open .sample-status-toggle{background:#263248;color:#8dc1ff}
[data-theme="dark"] #orderFormView .std-match-partial{color:#fbbf24!important;-webkit-text-fill-color:#fbbf24!important}[data-theme="dark"] #orderFormView .std-match-exact{color:#4ade80!important;-webkit-text-fill-color:#4ade80!important}

/* 必填项定位：通知出现时自动滚动到此处，输入后高亮自动清除。 */
#orderFormView .field-needs-attention {
  position:relative;
  scroll-margin-block:120px;
  border-color:#f59e0b!important;
  box-shadow:0 0 0 4px rgba(245,158,11,.2),0 10px 28px rgba(180,83,9,.16)!important;
  animation:orderFieldAttention .72s cubic-bezier(.16,1,.3,1) both;
}
#orderFormView .radio-group.field-needs-attention { padding:8px 10px; border:1px solid #f59e0b; border-radius:12px; background:rgba(245,158,11,.08); }
@keyframes orderFieldAttention { 0%{transform:translateX(0)} 28%{transform:translateX(-7px)} 52%{transform:translateX(5px)} 74%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
[data-theme="dark"] #orderFormView .field-needs-attention { border-color:#fbbf24!important; box-shadow:0 0 0 4px rgba(251,191,36,.2),0 12px 30px rgba(0,0,0,.32)!important; }
@media (prefers-reduced-motion:reduce) { #orderFormView .field-needs-attention { animation:none; } }
@keyframes sampleStatusIn{from{opacity:.35;transform:translateY(-7px);clip-path:inset(0 0 65% 0 round 12px)}to{opacity:1;transform:none;clip-path:inset(0 round 12px)}}
@media (prefers-reduced-motion:reduce){.sample-status-menu{animation:none}.sample-status-toggle svg,.sample-status-menu button{transition:none}}

/* ════════════════════════════════════════════════════════════
   收样人签字：修复「点了签字但保存时提示未签字」（2026-09-20）
   ────────────────────────────────────────────────────────────
   现象：点「签字」按钮后签名图片正常出现在签名位上（视觉已签），
       但点「生成委托单」时前端校验读不到 data-signature → 提示未签字。

   根因（两处叠加，缺一不可）：
   ① #receiveSignature 是**占位框**（inline-flex / 高 52px / 居中），
      原样式把签名图写成 position:absolute; left:calc(50% + 70px); bottom:-80px —— 
      签名图被推出签字框外，落在 .signature-area 上，压住了「签字」按钮。
      → 用户第二次点「签字」点到的其实是 <img>，按钮收不到 click。
   ② 首次点击时按钮**确实被点了**，但若此前点击落在签名字符上，
      浏览器会命中文字节点、把 click 派发给 <span> 祖先 → 按钮同样收不到。

   修法（三层，各自独立有效）：
   1. 签名图回到占位框内（static + max-width:100%），不再溢出遮挡；
   2. 签字位与签名图统一 pointer-events:none，点击穿透到按钮；
   3. 委托单表单内的签字按钮用**事件委托**兜底
      （见 app.js initOrderForm 的 document 级捕获监听），
      即使签名图铺在按钮上也能触发。

   ⚠️ 不要删这段 —— 删掉后 #3 仍在，但 #1 的视觉溢出会立刻回来。
   ════════════════════════════════════════════════════════════ */
#receiveSignature, #receiverSignature, #claimerSignature {
    position: relative; overflow: hidden;
    min-width: 150px; height: 52px;
    pointer-events: none;               /* 点击穿透到「签字」按钮 */
}
#receiveSignature .signature-img,
#receiverSignature .signature-img,
#claimerSignature .signature-img {
    position: static !important;
    transform: none !important;
    left: auto !important; bottom: auto !important;
    height: 48px; max-width: 100%;
    object-fit: contain;
    pointer-events: none;               /* 图片不吞点击 */
    z-index: 0;
}
#orderFormView .signature-item { position: relative; }
#orderFormView .signature-item .sign-btn { position: relative; z-index: 3; }



/* ── 委托单锁定 / 两路修改申请（2026-09-24）────────────────────────────
   顶栏右上角两个申请按钮（与原始记录页同款语义）：
     待审 → 禁用「待管理员同意」；已获授权 → 禁用「已获授权」；
     报告签发 → 两个按钮整体消失，只留一行说明。
   只读字段组加 .is-locked，给用户一个「这块现在不能改」的弱提示。 */
.of-apply-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}
.of-apply-hint { font-size: 12px; color: var(--gray); white-space: nowrap; }
.of-apply-hint--issued { color: #b45309; }
.of-apply-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  background: var(--blue-050);
  color: var(--blue);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.of-apply-btn:hover:not([disabled]) {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 102, 204, .26);
}
.of-apply-btn[disabled] { opacity: .6; cursor: not-allowed; }
.of-apply-btn--granted { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--card)); color: var(--green-d); }
.form-section.is-locked { opacity: .72; }
.form-section.is-locked > .form-section-title::after {
  content: "（只读）";
  font-size: 12px;
  font-weight: 400;
  color: var(--gray);
}
[data-theme="dark"] .of-apply-hint { color: var(--gray); }
[data-theme="dark"] .of-apply-hint--issued { color: var(--amber); }

/* 「完成」（2026-09-24）：报告变更申请获批后出现在原申请按钮位置，
   绿色实心 —— 它是本页唯一的**收尾动作**（执行重出 / 新建 XG 单），要与普通申请区分开。 */
.of-apply-btn--done {
  border-color: #28a745;
  background: linear-gradient(135deg, #34c759, #28a745);
  color: #fff;
  font-weight: 500;
}
.of-apply-btn--done:hover:not([disabled]) {
  background: linear-gradient(135deg, #3ad463, #2fbd52);
  border-color: #2fbd52;
  box-shadow: 0 8px 18px rgba(40, 167, 69, .34);
}


/* ── 基本信息标题旁的「完成」按钮（2026-09-24 用户要求）──────────────────
   它是报告变更流程的**收尾动作**（保存基本信息 + 按规则生成报告），
   所以紧贴「基本信息」标题，而不是飘在顶栏（顶栏那个位置用户根本没注意到）。
   标题行原本不是 flex，排不下按钮 —— 用 :has() 只对**含该按钮的标题**生效，
   不影响其它 4 个区块标题的既有布局。 */
.form-section-title:has(#ofChangeDone) { display: flex; align-items: center; }
.of-inline-done { margin-left: 12px; padding: 4px 16px; font-size: 12.5px; }
/* ── 签字等待动画（2026-09-28 完成位机制）────────────────────────────────
   用户要求：点击签字后先展示等待动画，**只有**服务端返回完成位确认签字已保存，
   才切换为「已签字」状态。这里的 is-signing 类由 app.js 在请求发起时加上、
   在 finally 里无条件移除 —— 成功与失败都会撤销动画，不存在「转圈卡死」。
   ⚠️ 严格遵守项目铁律：新增 CSS 追加到文件末尾、禁止强制覆盖优先级。 */
.transfer-sign-btn.is-signing { position: relative; cursor: progress; }
.transfer-sign-btn.is-signing > * { opacity: .45; }
.transfer-sign-btn.is-signing::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: transferSignSpin .72s linear infinite;
}
@keyframes transferSignSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .transfer-sign-btn.is-signing::after { animation-duration: 1.6s; }
}