/* 家家乐买赠提交 · 样式（以客户审核通过的原型为唯一 UI 标准） */
:root{
  --primary:#1a73e8; --primary-dark:#1557b0; --primary-light:#e8f0fe;
  --success:#0d904f; --warning:#f9ab00; --danger:#ea4335;
  --bg:#f5f7fa; --card-bg:#ffffff; --text:#202124; --text-secondary:#5f6368; --border:#dadce0;
  --fill-bg:#fffdf5; --ro-bg:#f8f9fa;
}
*{box-sizing:border-box;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;}
.page{max-width:1080px;margin:0 auto;padding:14px 14px 30px;}

/* ===== 顶栏 ===== */
.appbar{background:var(--primary);color:#fff;border-radius:12px 12px 0 0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.appbar .t{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;}
.appbar .t .sys{font-size:11px;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:20px;font-weight:400;}
.appbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.who{font-size:12px;background:rgba(255,255,255,.2);padding:3px 10px;border-radius:20px;}
.shell{background:var(--card-bg);border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;overflow:hidden;}

/* ===== 子页导航 ===== */
.nav{display:flex;border-bottom:1px solid var(--border);background:#fff;overflow-x:auto;}
.nav button{flex:0 0 auto;border:none;background:none;padding:12px 16px;font-size:13.5px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-bottom:2.5px solid transparent;font-family:inherit;}
.nav button.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:700;}
.nav button .lock{font-size:11px;color:var(--text-secondary);margin-left:3px;}
.pane{padding:14px;display:none;}
.pane.on{display:block;}

/* ===== 管理页双标签 ===== */
.mg-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.mg-tab{border:1px solid var(--border);background:#fff;border-radius:8px;padding:9px 14px;font-size:13.5px;color:var(--text-secondary);cursor:pointer;font-family:inherit;}
.mg-tab.on{color:var(--primary);border-color:var(--primary);font-weight:700;background:rgba(29,120,255,.06);}
.mg-panel{margin-top:0;}

/* ===== 卡片 ===== */
.card{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px;background:#fff;}
.card > h3{margin:0 0 10px;font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.card > h3 .req{color:var(--danger);font-weight:700;}
.card > h3 .sub{font-weight:400;color:var(--text-secondary);font-size:11.5px;}
.step-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:11.5px;font-weight:700;flex:0 0 auto;}
label{display:block;font-size:12.5px;color:var(--text-secondary);margin-bottom:5px;}
input[type=text],input[type=number],input[type=tel],input[type=date],input[type=password],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--text);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
textarea{resize:vertical;min-height:64px;}
input.ro,.ro{background:var(--ro-bg);color:#3c4043;border-color:var(--border);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* 业务名字 / 联系方式：强制同一行，窄屏也不堆叠 */
.same-row{display:flex;gap:12px;flex-wrap:nowrap;align-items:flex-start;margin-top:12px;}
.same-row-item{flex:1 1 0;min-width:0;}

.fill-legend{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);margin:0 0 12px;flex-wrap:wrap;}
.fill-legend .dot{width:15px;height:15px;border-radius:4px;background:var(--fill-bg);border:1.5px solid var(--danger);flex:0 0 auto;}
.fill-legend .dot.gray{background:var(--ro-bg);border:1px solid var(--border);}

/* 需填写区：淡黄底+红框 */
body.editable input[type=text]:not([readonly]):not(.no-fill),
body.editable input[type=number],
body.editable input[type=tel],
body.editable select:not(.no-fill),
body.editable textarea{background:var(--fill-bg);border:1.5px solid var(--danger);}
body.editable input:focus,body.editable select:focus,body.editable textarea:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}

/* ===== 按钮 ===== */
.btn{border:none;border-radius:8px;padding:10px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;min-height:44px;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary);}
.btn-ghost{background:#f1f3f4;color:var(--text);}
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}
.btn-sm{min-height:34px;padding:6px 11px;font-size:12.5px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;}

/* ===== 联想下拉 ===== */
.search-wrap{position:relative;}
/* 联想下拉：层级须高于底部固定栏(.dock z-index:60)，否则会被「再加一个产品/本次需求/提交」遮挡 */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 20px rgba(60,64,67,.16);max-height:280px;overflow-y:auto;z-index:120;display:none;-webkit-overflow-scrolling:touch;}
.suggest.on{display:block;}
/* 下方空间不足时向上展开（由 JS 动态切换） */
.suggest.up{top:auto;bottom:calc(100% + 4px);}
.suggest .s-item{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-bottom:1px solid #f1f3f4;cursor:pointer;}
.suggest .s-item:last-child{border-bottom:none;}
.suggest .s-item:hover{background:var(--primary-light);}
.suggest .s-item input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--primary);}
.suggest .s-name{font-size:13px;font-weight:600;}
.suggest .s-meta{font-size:11.5px;color:var(--text-secondary);margin-top:2px;display:block;}
.suggest .s-empty{padding:14px;text-align:center;color:var(--text-secondary);font-size:12.5px;}
.sug-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);padding:9px 11px;display:flex;align-items:center;gap:10px;}
.sug-foot .hint{margin:0;font-size:11.5px;color:var(--text-secondary);}
/* ===== 同一订单同价 ===== */
.suggest .sug-head{padding:8px 11px;font-size:11.5px;color:var(--text-secondary);background:#f8fafc;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1;}
.suggest .sug-head b{color:#d64541;}
.s-price{color:#d64541;font-variant-numeric:tabular-nums;}
.s-bad{color:var(--danger);font-size:11px;font-weight:600;}
.suggest .s-item.mismatch .s-name{color:var(--text-secondary);}
.price-note{font-size:12px;color:var(--text-secondary);line-height:1.6;margin-top:8px;}
.price-note.on{background:#fff8e6;border:1px solid #ffe1a6;border-radius:8px;padding:7px 10px;color:#8a6100;}
.price-note b{color:#d64541;}
.modal .conflict-list{margin:0 0 10px;padding-left:20px;font-size:12.5px;line-height:1.9;color:var(--text);}
.modal .conflict-list li{margin:0;}
/* 备注 / 修改说明 全文弹窗（含复制） */
.modal .memo-text{white-space:normal;word-break:break-word;line-height:1.7;font-size:13.5px;}
.modal .memo-act{display:flex;justify-content:flex-end;margin-top:12px;}

/* ===== 产品列表 ===== */
.plist{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:10px;}
.pitem{padding:11px 12px;border-bottom:1px solid #eef1f4;}
.pitem:last-child{border-bottom:none;}
.p-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.p-nm{font-size:13px;font-weight:600;line-height:1.35;}
.p-bc{font-size:11.5px;color:var(--text-secondary);font-family:ui-monospace,Menlo,monospace;margin-top:2px;}
.p-del{background:none;border:none;color:var(--danger);font-size:12.5px;cursor:pointer;padding:4px 6px;flex:0 0 auto;font-family:inherit;}
.p-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px;}
.p-grid3 label{margin-bottom:3px;font-size:11.5px;}
/* 产品行只剩「买赠数量」一个字段 */
.p-grid1{grid-template-columns:minmax(0,1fr);max-width:220px;}
/* 产品行的本项金额（数量 × 供货价，自动计算） */
.p-amt{font-size:11.5px;color:var(--text-secondary);margin-top:7px;}
.p-amt b{color:#d64541;font-size:13px;font-variant-numeric:tabular-nums;}
.empty-box{border:1px dashed var(--border);border-radius:8px;padding:16px;text-align:center;color:var(--text-secondary);font-size:12.5px;margin-top:10px;}

/* ===== 照片 ===== */
.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.shot{position:relative;aspect-ratio:1/1;border:2px dashed var(--danger);border-radius:10px;background:var(--fill-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;padding:10px;overflow:hidden;}
.shot .idx{position:absolute;top:6px;left:8px;font-size:11px;font-weight:700;color:var(--text-secondary);z-index:2;}
/* 方框1、2 为必填，标红星 */
.shot .idx .req{color:var(--danger);}
.shot .cam{font-size:24px;margin-bottom:5px;}
.shot .lbl{font-size:12.5px;font-weight:700;z-index:1;}
.shot .sub{font-size:11px;color:var(--text-secondary);margin-top:3px;z-index:1;}
.shot input{display:none;}
.shot.done{border-style:solid;border-color:var(--success);}
.shot .shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.shot.done .lbl,.shot.done .sub{position:relative;background:rgba(255,255,255,.78);border-radius:6px;padding:0 4px;}
.shot-clr{position:absolute;top:6px;right:6px;z-index:3;background:rgba(234,67,53,.92);color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:13px;line-height:1;cursor:pointer;padding:0;}
.shot-add{border-style:dashed;border-color:var(--primary);background:var(--primary-light);}

/* ===== 底部固定栏 ===== */
.dock{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(60,64,67,.10);z-index:60;}
.dock-inner{max-width:1080px;margin:0 auto;padding:10px 14px 12px;}
.dock-add{padding:9px 0 0;}
.btn-addprod{width:100%;height:40px;background:var(--primary-light);border:1.5px dashed var(--primary);color:var(--primary);font-weight:700;font-size:13.5px;border-radius:9px;cursor:pointer;font-family:inherit;}
/* 窄屏放不下时换行，金额始终完整可见 */
.total-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;background:linear-gradient(90deg,#fff5f5,#fff);border:1px solid #ffd9d6;border-radius:10px;padding:10px 14px;margin:9px 0;}
.total-bar .tl{font-size:12.5px;color:var(--text-secondary);line-height:1.6;min-width:0;}
.total-bar .tl b{color:var(--text);font-size:13px;}
.total-bar .amt-big{font-size:22px;font-weight:800;color:#d64541;font-variant-numeric:tabular-nums;white-space:nowrap;}
.total-bar .amt-big small{font-size:13px;font-weight:700;}
.submit-row{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.submit-row .left-note{font-size:11.5px;color:var(--text-secondary);margin-right:auto;}

/* ===== 筛选 / 表格 ===== */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:10px;}
.filter-bar > div{flex:1 1 140px;min-width:120px;}
.filter-bar > .fb-date{flex:2 1 300px;}
.filter-bar .fb-btns{flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;}
.date-range{display:flex;gap:8px;align-items:center;}
.date-range .tilde{color:var(--text-secondary);flex:0 0 auto;}

/* ===== 提交记录：筛选区控件与操作按钮统一高度 =====
   基准 = 「状态」下拉框高度 39px；同时压掉手机端 .btn 的 44px，保证桌面/手机高度一致 */
/* 注：排除联想下拉里的勾选框（.s-item input[type=checkbox]），否则会被一并撑到 39px */
#pane-records .filter-bar input:not([type=checkbox]),
#pane-records .filter-bar select,
#pane-records .btn{height:39px;min-height:0;padding-top:0;padding-bottom:0;}
#pane-records .btn{display:inline-flex;align-items:center;justify-content:center;}
/* 联想下拉自身的控件不受上面的统一高度约束 */
#pane-records .filter-bar .suggest .s-item input{height:17px;min-height:17px;}
/* 手机端（≤768px）：「门店」与「状态」同处一行，各占 50%（8px 间距各摊一半） */
@media (max-width:768px){
  #pane-records .filter-bar > .fb-date{flex:1 1 100%;}
  #pane-records .filter-bar > .fb-half{flex:0 0 calc(50% - 4px);min-width:0;}
  /* 「门店」处于该行左半列：下拉宽度 = 整行宽度（2×列宽 + 8px 间距），避免长店名被挤断换行 */
  #pane-records .filter-bar .search-wrap > .suggest{width:calc(200% + 8px);}
}

/* ===== 记录筛选「门店」联想多选 ===== */
/* 整行点击视为勾选/取消：行内勾选框禁掉原生点击，避免二次切换 */
.st-item{cursor:pointer;}
.st-item input{pointer-events:none;}
.st-item.act{background:var(--primary-light);}
.st-item.on{background:rgba(26,115,232,.1);}
.st-item.on .s-name{color:var(--primary);font-weight:700;}
/* 已选门店标签区：放在筛选条下方，避免撑高筛选条破坏控件顶部/底部对齐 */
.st-picked{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.st-picked.on{display:flex;}
.st-picked .lb{font-size:12px;color:var(--text-secondary);}
.st-picked .lb b{color:var(--text);}
.st-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.st-chip{display:inline-flex;align-items:center;gap:4px;background:#eef3fd;border:1px solid #cfdefb;color:var(--primary-dark);border-radius:999px;padding:3px 8px 3px 10px;font-size:12px;transition:background .12s ease,border-color .12s ease;}
.st-chip:hover{background:#e3ecfc;border-color:#b6cdf8;}
.st-chip button{border:none;background:none;color:#7a8ba8;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;transition:color .12s ease;}
.st-chip button:hover{color:var(--danger);}
.st-clr{border:none;background:none;color:var(--primary);font-size:12px;cursor:pointer;padding:2px 4px;font-family:inherit;}
.st-clr:hover{text-decoration:underline;}
.table-info{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--text-secondary);margin:8px 0;flex-wrap:wrap;}
.table-info .t-count{font-weight:700;color:var(--text);}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:10px;background:#fff;}
table.data-table{border-collapse:collapse;width:100%;min-width:1080px;font-size:12.5px;background:#fff;}
.data-table th,.data-table td{border-bottom:1px solid var(--border);padding:8px 9px;text-align:left;vertical-align:middle;white-space:nowrap;}
.data-table thead th{background:#f8fafc;color:var(--text-secondary);font-weight:600;font-size:11.5px;position:relative;user-select:none;}
.data-table th.sortable{cursor:pointer;padding-right:20px;}
.data-table th.sortable:hover{background:#eef2f7;color:var(--text);}
.data-table th .arrow{position:absolute;right:6px;opacity:.35;font-size:10px;}
.data-table th.asc .arrow,.data-table th.desc .arrow{opacity:1;color:var(--primary);}
.data-table tbody tr:nth-child(even){background:#fcfdff;}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums;}
/* 确定数量：管理员数值输入（仅管理员可改，改完自动保存）
   选择器带上 input 以提高优先级，压过上方通用 input[type=number]（9px/11px 内边距、14px 字号），
   否则输入框内容区被挤到十几像素，数字与右侧上下调节按钮贴在一起 */
input.cq-input,.cq-input{width:78px;padding:5px 7px;font-size:12.5px;font-family:inherit;text-align:right;font-variant-numeric:tabular-nums;border:1px solid var(--primary);border-radius:6px;background:#fff;color:var(--text);}
.cq-input:focus{outline:none;box-shadow:0 0 0 3px var(--primary-light);}
/* 已确认锁定：置灰不可改（与表格只读底色的视觉约定一致） */
.cq-input:disabled{opacity:1;background:var(--ro-bg);border-color:var(--border);color:var(--text-secondary);cursor:not-allowed;}
.cq-ro{color:var(--text);}
/* 修改说明：管理员文本输入（仅管理员可填，按产品明细，离开输入框或回车即保存）
   文本框按内容自增高，最多 3 行；超出后内部滚动，并在下方提供「查看全文」（可复制） */
.note-input{width:130px;min-width:0;padding:5px 7px;font-size:12px;line-height:1.5;font-family:inherit;border:1px solid var(--primary);border-radius:6px;background:#fff;color:var(--text);display:block;resize:none;overflow-y:hidden;min-height:29px;}
.note-input.note-scroll{overflow-y:auto;}
.note-more{display:block;margin:3px auto 0;padding:0;border:none;background:none;color:var(--primary);font-size:11px;font-family:inherit;cursor:pointer;text-decoration:underline;line-height:1.4;}
.note-more[hidden]{display:none;}
.note-input:focus{outline:none;box-shadow:0 0 0 3px var(--primary-light);}
.note-input:disabled{opacity:1;background:var(--ro-bg);border-color:var(--border);color:var(--text-secondary);cursor:not-allowed;}
.note-input::placeholder{color:#b0b5bb;}
/* 状态勾选：勾选 = 该单已完成审核并锁定（仅管理员可勾选） */
.st-cell{white-space:nowrap;}
.st-chk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;}
.st-chk input{width:16px;height:16px;margin:0;flex:0 0 auto;cursor:pointer;accent-color:var(--success);}
.st-chk.on{color:var(--success);font-weight:700;}
.data-table .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:#d64541;}
/* 已确认记录：金额按「确定数量 × 供货价」重算，加底色便于核对 */
.data-table .amt-conf{background:#f1f8f4;}
.data-table .cost{text-align:right;font-variant-numeric:tabular-nums;color:#7b1fa2;font-weight:600;}
.data-table .tcenter{text-align:center;}
.th-note{font-weight:400;font-size:10px;color:var(--text-secondary);}
.empty-row{text-align:center;padding:24px;color:var(--text-secondary);}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;}
.b-ok{background:#e6f4ea;color:var(--success);}
.b-info{background:var(--primary-light);color:var(--primary);}
.b-warn{background:#fef7e0;color:#a05a00;}
.b-bad{background:#fdecea;color:var(--danger);}
.b-hide{background:#eceff1;color:#546e7a;}
.link{color:var(--primary);cursor:pointer;text-decoration:underline;font-size:12px;}
.link-danger{color:var(--danger);}
.dim{color:#9aa0a6;}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap;}
.pager .pg-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.pager button{border:1px solid var(--border);background:#fff;border-radius:6px;min-width:32px;height:32px;font-size:12.5px;cursor:pointer;font-family:inherit;padding:0 8px;}
.pager button.on{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700;}
.pager button[disabled]{opacity:.45;cursor:not-allowed;}
.pager select{width:auto;padding:5px 8px;font-size:12.5px;}

/* ===== 提交记录：响应式表格 =====
   全部尺寸统一使用表格排版（窄屏在容器内横向滑动），不切换为卡片布局；
   平板（≥768px）：列宽随内容自适应；桌面（≥1024px）：固定布局按比例分配列宽。
   列序：日期1 / 单号2 / 门店3 / 照片4 / 状态5 / 产品6 / 条码7 / 买赠8 / 确定9 / 金额10 / 修改说明11 / 业务12 / 联系13 / 备注14 / 操作15
   长文本列：门店3 / 产品6 / 备注14 最多折行 2 行并省略；
   修改说明11 桌面端（≥1024px）最多 3 行、超出省略号，点击看全文（列宽按容器宽度比例分配，随分辨率自适应），手机/平板最多 2 行 */
#recTable th,#recTable td,.rec-head-fixed > table th{text-align:center;}
#recTable .num,#recTable .amt,.rec-head-fixed > table th.num,.rec-head-fixed > table th.amt{text-align:center;}
/* 「确定数量」管理员输入框：同步居中，避免表体居中的单元格里文字偏右 */
#recTable .cq-input{text-align:center;}
#recTable th,#recTable td,.rec-head-fixed > table th{padding:7px 8px;font-size:11.5px;line-height:1.45;}
#recTable th,#recTable td{border-bottom:1px solid #eceff1;}
/* 可排序表头：左右对称留白，既给右侧箭头留出位置，又保证文字中心与表体单元格一致 */
#recTable th.sortable,.rec-head-fixed > table th.sortable{padding-left:18px;padding-right:18px;}
#recTable thead th,.rec-head-fixed > table thead th{font-size:11px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fbfcfe,#f3f6fa);}
#recTable tbody tr:nth-child(even){background:#fcfdff;}
#recTable tbody tr:hover{background:#eef4ff;}
#recTable tbody tr:last-child td{border-bottom:none;}
/* 长文本列内容：最多 2 行，超出截断并显示省略号（完整全文在 title 与点击弹窗中） */
#recTable .clamp2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;}
/* 修改说明：桌面端最多 3 行，超出显示省略号，点击单元格查看全文（data-memo 弹窗）；
   手机/平板（<1024px）限制 2 行，见下方媒体查询 */
#recTable .note-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;}
#recTable td:nth-child(3),#recTable td:nth-child(6),#recTable td:nth-child(11),#recTable td:nth-child(14){white-space:normal;}

/* 平板 / 小笔记本（≥768px）：表格单行展示，长文本列允许折行，列宽随内容与视口自适应 */
@media (min-width:768px){
  #recTable th,#recTable td,.rec-head-fixed > table th{padding:8px 9px;font-size:12px;}
  #recTable thead th,.rec-head-fixed > table thead th{font-size:11.5px;}
  #recTable th.sortable,.rec-head-fixed > table th.sortable{padding-left:20px;padding-right:20px;}
  /* 长文本列（门店 / 产品 / 修改说明 / 备注）：允许折行并限宽，避免长文本把整张表撑宽 */
  #recTable td:nth-child(3),#recTable td:nth-child(6),#recTable td:nth-child(11),#recTable td:nth-child(14){max-width:132px;}
  #recTable th:nth-child(1){min-width:84px;}   /* 日期 */
  #recTable th:nth-child(2){min-width:78px;}   /* 单号 */
  #recTable th:nth-child(3){min-width:126px;}  /* 门店名称 */
  #recTable th:nth-child(4){min-width:66px;}   /* 照片 */
  #recTable th:nth-child(5){min-width:92px;}   /* 状态 */
  #recTable th:nth-child(6){min-width:156px;}  /* 产品名称 */
  #recTable th:nth-child(7){min-width:112px;}  /* 产品条码 */
  #recTable th:nth-child(8){min-width:76px;}   /* 买赠数量 */
  #recTable th:nth-child(9){min-width:84px;}   /* 确定数量 */
  #recTable th:nth-child(10){min-width:88px;}  /* 金额 */
  #recTable th:nth-child(11){min-width:110px;} /* 修改说明 */
  #recTable th:nth-child(12){min-width:80px;}  /* 业务名字 */
  #recTable th:nth-child(13){min-width:112px;} /* 联系方式 */
  #recTable th:nth-child(14){min-width:96px;}  /* 备注说明 */
  #recTable th:nth-child(15){min-width:88px;}  /* 操作 */
}

/* 宽屏（≥1200px）：行高与留白再放宽，长文本列给足宽度 */
@media (min-width:1200px){
  #recTable th,#recTable td,.rec-head-fixed > table th{padding:9px 11px;font-size:12.5px;}
  #recTable th.sortable,.rec-head-fixed > table th.sortable{padding-left:22px;padding-right:22px;}
  #recTable th:nth-child(3){min-width:150px;}
  #recTable th:nth-child(6){min-width:190px;}
  #recTable th:nth-child(14){min-width:120px;}
}

/* ===== 弹窗 / 提示 ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(32,33,36,.5);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;}
.modal{background:#fff;border-radius:12px;max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;}
.modal-head button{border:none;background:none;font-size:16px;cursor:pointer;color:var(--text-secondary);font-family:inherit;}
.modal-body{padding:14px 16px;overflow-y:auto;font-size:13px;line-height:1.7;}
.modal .form-field{margin-bottom:12px;}
.modal-note{font-size:11.5px;color:var(--text-secondary);margin:0 0 10px;}
/* ===== 提交记录 · 现场照片：缩略图（可放大） + 下载原图 ===== */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.ph-fig{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0;}
.ph-thumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--border);border-radius:8px;background:#f8fafc;overflow:hidden;cursor:zoom-in;line-height:0;}
.ph-thumb img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .25s;}
.ph-thumb:hover img,.ph-thumb:focus-visible img{transform:scale(1.04);}
.ph-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.38));opacity:0;transition:opacity .2s;pointer-events:none;}
.ph-thumb:hover::after,.ph-thumb:focus-visible::after{opacity:1;}
.ph-zoom-badge{position:absolute;right:6px;bottom:6px;z-index:2;background:rgba(32,33,36,.7);color:#fff;font-size:11px;line-height:1.4;padding:3px 7px;border-radius:12px;}
.ph-dl{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--primary);text-decoration:none;border:1px solid var(--primary);border-radius:7px;padding:6px 8px;background:#fff;cursor:pointer;}
.ph-dl:hover{background:var(--primary-light);}
.photo-grid figcaption{font-size:11px;color:var(--text-secondary);text-align:center;margin:0;word-break:break-all;}

/* ===== 图片查看器：缩放（按钮 / 滚轮 / 双指捏合） + 下载原图 ===== */
.viewer{position:fixed;inset:0;z-index:260;background:rgba(20,21,23,.94);display:flex;flex-direction:column;touch-action:none;}
.vw-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;color:#fff;background:rgba(0,0,0,.35);}
.vw-title{font-size:13px;font-weight:600;margin-right:auto;}
.vw-zoomval{font-size:12.5px;color:#cfd4da;font-variant-numeric:tabular-nums;min-width:46px;text-align:right;}
.vw-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:7px 11px;font-size:13px;line-height:1;cursor:pointer;text-decoration:none;font-family:inherit;white-space:nowrap;}
.vw-btn:hover{background:rgba(255,255,255,.26);}
.vw-dl{background:#1a73e8;border-color:#1a73e8;}
.vw-x{background:rgba(234,67,53,.9);border-color:rgba(234,67,53,.9);}
.vw-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab;touch-action:none;}
.vw-stage.dragging{cursor:grabbing;}
/* 上一张 / 下一张：覆盖在图片两侧，无需关闭再打开 */
.vw-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:46px;height:72px;padding:0;border:none;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer;font-family:inherit;transition:background .12s ease,opacity .12s ease;}
.vw-nav:hover{background:rgba(255,255,255,.32);}
.vw-nav.prev{left:10px;}
.vw-nav.next{right:10px;}
.vw-nav[disabled]{opacity:.25;cursor:default;}
.vw-nav[disabled]:hover{background:rgba(255,255,255,.16);}
.vw-img{max-width:100%;max-height:100%;display:block;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.vw-tip{text-align:center;color:#b9c0c8;font-size:11.5px;padding:8px 12px 12px;}
@media (max-width:767px){
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
  .vw-bar{gap:6px;padding:8px 10px;}
  .vw-title{width:100%;margin-right:0;font-size:12px;}
  .vw-btn{padding:8px 10px;font-size:12.5px;}
  .vw-zoomval{min-width:40px;}
  .vw-nav{width:42px;height:64px;font-size:24px;}
  .vw-nav.prev{left:6px;}
  .vw-nav.next{right:6px;}
}
.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%) translateY(20px);background:#323232;color:#fff;padding:11px 18px;border-radius:22px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:300;max-width:90%;text-align:center;}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--danger);}
.toast.ok{background:var(--success);}

/* ===== 手机端（<768px）：整页留白收紧，控件保持易点 ===== */
@media (max-width:767px){
  .grid2{grid-template-columns:1fr;}
  .p-grid3{grid-template-columns:1fr 1fr;}
  .shot-grid{gap:8px;}
  /* 仅「买赠需求」页有底部固定栏，需预留其高度；记录/管理页不再留大片空白 */
  .page{padding-left:10px;padding-right:10px;}
  body.editable .page{padding-bottom:240px;}
  .btn{min-height:44px;}
  .filter-bar > div{flex:1 1 100%;}
  .filter-bar .fb-btns{flex:1 1 100%;}
  .filter-bar .fb-btns .btn{flex:1 1 auto;}
  .appbar{border-radius:10px 10px 0 0;padding:10px 12px;}
  .appbar .t{font-size:15px;}
  .nav button{padding:11px 13px;font-size:13px;}
  .pane{padding:10px;}
  .card{padding:10px 11px;margin-bottom:10px;}
  .table-info{font-size:11.5px;gap:4px 10px;}
  .tbl-wrap{border-radius:8px;}
  .pager{margin-top:8px;}
  .pager button{height:30px;min-width:30px;font-size:12px;}
  /* 提交记录：手机端优先用「长文本折行」压缩列宽，让一屏能看到更多列（不隐藏任何列，仍保留表格排版） */
  #recTable{min-width:0;}
  #recTable th:nth-child(3),#recTable td:nth-child(3){max-width:96px;}   /* 门店名称（最多 2 行） */
  #recTable th:nth-child(6),#recTable td:nth-child(6){max-width:116px;}  /* 产品名称（最多 2 行） */
  #recTable th:nth-child(11),#recTable td:nth-child(11){max-width:96px;} /* 修改说明（最多 2 行） */
  #recTable th:nth-child(14),#recTable td:nth-child(14){max-width:96px;} /* 备注说明（最多 2 行） */
  /* 日期 / 单号 / 产品条码 也允许换行：窄屏按固定位置断行，进一步压缩总宽 */
  #recTable td:nth-child(1),#recTable td:nth-child(2),#recTable td:nth-child(7){white-space:normal;word-break:normal;overflow-wrap:normal;}
  #recTable th:nth-child(1),#recTable td:nth-child(1){min-width:52px;max-width:82px;}  /* 日期：10/21 ⏎ 14:55 */
  #recTable th:nth-child(2),#recTable td:nth-child(2){min-width:48px;max-width:68px;}  /* 单号：前4后4 */
  #recTable th:nth-child(7),#recTable td:nth-child(7){min-width:58px;max-width:92px;}  /* 产品条码：第8位换行（7+6） */
  #recTable .note-input{width:100%;box-sizing:border-box;}
}

/* ===== 提交记录：表头纵向滚动吸顶（视觉与原表头一致，透明覆盖不拦截滚动/点击） ===== */
.rec-head-fixed{position:fixed;left:0;top:0;min-width:0;overflow:hidden;display:none;z-index:90;background:#f8fafc;pointer-events:none;}
.rec-head-fixed.on{display:block;box-shadow:0 3px 8px rgba(60,64,67,.12);}
/* 吸顶表头是独立克隆表：取消 data-table 的 1080px 最小宽度，否则窄桌面/手机端列宽会被放大而与表体错位 */
.rec-head-fixed > table{transform-origin:left top;min-width:0;}
.rec-head-fixed > table th{border-bottom:1px solid var(--border);}

/* ===== 电脑端响应式：随窗口宽度自动调整排版与尺寸 ===== */
@media (min-width:1200px){
  .page{max-width:1340px;}
  .dock-inner{max-width:1340px;}
  .data-table th,.data-table td{padding:8px 8px;}
  .data-table th.sortable{padding-right:19px;}
}
@media (min-width:768px) and (max-width:1199px){
  .page{max-width:100%;}
  .data-table th,.data-table td{padding:7px 8px;font-size:12px;}
  .data-table th.sortable{padding-right:18px;}
}

/* ===== 提交记录 · 电脑端自适应（≥1024px）：按比例分配列宽，内容完整展示、无横向滚动 =====
   ① table-layout:fixed + 逐列百分比宽度：列宽随视口等比缩放（列间距随页面大小自动调整）
   ② 长文本列（门店名称 / 产品名称 / 修改说明 / 备注说明）最多折行 2 行，超出省略号，不撑宽表格
   ③ 其余列（日期 / 单号 / 条码 / 联系方式 / 数量 / 金额 / 状态 / 操作）保持单行，宽度已按内容需要分配
   ④ 表头文字可折行（4 字表头在窄列自动排成两行），不再靠拉宽列来容纳
   ⑤ 悬浮吸顶表头（.rec-head-fixed）由 JS 复制逐列像素宽度，故此处同步其内边距与折行规则
   ⑥ 列序：日期 / 单号 / 门店名称 / 照片 / 状态 / 产品名称 / 产品条码 / 买赠数量 / 确定数量 / 金额 / 修改说明 / 业务名字 / 联系方式 / 备注说明 / 操作
      非管理员不含「操作」列（第 15 列），故各列分得的实际宽度会相应变宽 */
/* 手机 / 平板（<1024px）：修改说明最多 2 行（桌面端为 3 行） */
@media (max-width:1023px){
  #recTable .note-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
}

/* 公共部分：固定布局 + 长表头折行 + 表体单行/长文本折行 */
@media (min-width:1024px){
  #recTable{table-layout:fixed;width:100%;min-width:0;}
  /* 取消各列最小宽度：fixed 布局下 min-width 是硬下限，会重新撑出横向滚动 */
  #recTable th:nth-child(n){min-width:0;}
  /* 表头文字可折行：「买赠数量」「确定数量」等长表头排成两行，不再把列撑宽 */
  #recTable th,.rec-head-fixed > table th{white-space:normal;}
  /* 「操作」列表头的「仅管理员可见」注记：管理员本就只看到本列，电脑端收起以压低表头高度，改由 title 提示 */
  #recTable th .th-note{display:none;}
  /* 表体单元格单行（可容纳的列不折行，保持行高整齐） */
  #recTable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 长文本列（门店名称 / 产品名称 / 修改说明 / 备注说明）：最多 2 行，超出省略号（.clamp2 负责截断）。
     「修改说明」在管理员下是铺满列宽的输入框（折行规则对 input 无影响），普通用户下为只读文本 */
  #recTable td:nth-child(3),#recTable td:nth-child(6),#recTable td:nth-child(11),#recTable td:nth-child(14){white-space:normal;word-break:break-word;}
  /* 「确定数量」「修改说明」输入框铺满列宽（原固定宽在按比例列宽下会被裁切） */
  #recTable .cq-input,#recTable .note-input{width:100%;box-sizing:border-box;}
}

/* 窄桌面（1024~1119px）：可用宽度最紧的一档，字号/留白收紧，宽度向条码·联系方式·状态倾斜 */
@media (min-width:1024px) and (max-width:1119px){
  #recTable th,#recTable td,.rec-head-fixed > table th{padding:5px 4px;font-size:11.5px;}
  #recTable th.sortable,.rec-head-fixed > table th.sortable{padding-left:6px;padding-right:14px;}
  #recTable th:nth-child(1){width:7.4%;}    /* 日期 */
  #recTable th:nth-child(2){width:6.9%;}    /* 单号 */
  #recTable th:nth-child(3){width:6.9%;}    /* 门店名称（折行 2 行） */
  #recTable th:nth-child(4){width:5.3%;}    /* 照片 */
  #recTable th:nth-child(5){width:7.3%;}    /* 状态 */
  #recTable th:nth-child(6){width:6.6%;}    /* 产品名称（折行 2 行） */
  #recTable th:nth-child(7){width:10.4%;}   /* 产品条码（13 位不可折行） */
  #recTable th:nth-child(8){width:3%;}      /* 买赠数量（单/双位数字） */
  #recTable th:nth-child(9){width:7.6%;}    /* 确定数量（数字与上下调节按钮留足间距） */
  #recTable th:nth-child(10){width:5.4%;}   /* 金额 */
  #recTable th:nth-child(11){width:7.6%;}   /* 修改说明（完整折行展示） */
  #recTable th:nth-child(12){width:5.2%;}   /* 业务名字 */
  #recTable th:nth-child(13){width:8.9%;}   /* 联系方式（11 位不可折行） */
  #recTable th:nth-child(14){width:4.8%;}   /* 备注说明（折行 2 行） */
  #recTable th:nth-child(15){width:5.8%;}   /* 操作（仅管理员） */
  /* 合计 99%：单号/条码/联系方式按字符数留足下限，其余列按比例分剩余宽度 */
}
/* 中等桌面（1120~1279px）：宽度已有富余，列占比恢复宽松档，长文本列少折行；
   此档仍沿用 11.5px 字号（12.5px 会撑破条码/联系方式列，实测 1200px 处会裁切） */
@media (min-width:1120px) and (max-width:1279px){
  #recTable th,#recTable td,.rec-head-fixed > table th{padding:5px 5px;font-size:11.5px;}
  #recTable th.sortable,.rec-head-fixed > table th.sortable{padding-left:8px;padding-right:16px;}
  #recTable th:nth-child(1){width:7.4%;}    /* 日期 */
  #recTable th:nth-child(2){width:6.5%;}    /* 单号 */
  #recTable th:nth-child(3){width:6.5%;}    /* 门店名称（折行 2 行） */
  #recTable th:nth-child(4){width:5%;}      /* 照片 */
  #recTable th:nth-child(5){width:7.4%;}    /* 状态 */
  #recTable th:nth-child(6){width:6.9%;}    /* 产品名称（折行 2 行） */
  #recTable th:nth-child(7){width:9.8%;}    /* 产品条码 */
  #recTable th:nth-child(8){width:4%;}      /* 买赠数量（单/双位数字） */
  #recTable th:nth-child(9){width:7.4%;}    /* 确定数量（数字与上下调节按钮留足间距） */
  #recTable th:nth-child(10){width:5.8%;}   /* 金额 */
  #recTable th:nth-child(11){width:8.4%;}   /* 修改说明（完整折行展示） */
  #recTable th:nth-child(12){width:5.6%;}   /* 业务名字 */
  #recTable th:nth-child(13){width:8.4%;}   /* 联系方式 */
  #recTable th:nth-child(14){width:5.2%;}   /* 备注说明（折行 2 行） */
  #recTable th:nth-child(15){width:5.7%;}   /* 操作（仅管理员） */
}

/* 宽屏（≥1280px）：留白与字号放宽；列宽仍按百分比随视口等比放大，故大屏列间距更大。
   「修改说明」列固定为可容纳 15 个汉字的宽度（≥212px，输入框 15 字单行不截断），
   其余列相应收窄；窄桌面（<1280px）受总宽限制无法做到 15 字，按原比例尽量宽 */
@media (min-width:1280px){
  #recTable th,#recTable td,.rec-head-fixed > table th{padding:8px 6px;font-size:12.5px;}
  #recTable th.sortable,.rec-head-fixed > table th.sortable{padding-left:10px;padding-right:10px;}
  #recTable thead th,.rec-head-fixed > table thead th{font-size:11.5px;}
  #recTable th:nth-child(1){width:6.9%;}    /* 日期 */
  #recTable th:nth-child(2){width:6.3%;}    /* 单号 */
  #recTable th:nth-child(3){width:5.4%;}    /* 门店名称（折行 2 行） */
  #recTable th:nth-child(4){width:4.8%;}    /* 照片 */
  #recTable th:nth-child(5){width:8.1%;}    /* 状态（🔒 已确认 不截断） */
  #recTable th:nth-child(6){width:5.6%;}    /* 产品名称（折行 2 行） */
  #recTable th:nth-child(7){width:9.5%;}    /* 产品条码（13 位不可截断） */
  #recTable th:nth-child(8){width:2.8%;}    /* 买赠数量（单/双位数字） */
  #recTable th:nth-child(9){width:6.1%;}    /* 确定数量（数字与上下调节按钮留足间距） */
  #recTable th:nth-child(10){width:4.4%;}   /* 金额 */
  #recTable th:nth-child(11){width:17.8%;}  /* 修改说明（15 字宽，≥212px） */
  #recTable th:nth-child(12){width:4.2%;}   /* 业务名字 */
  #recTable th:nth-child(13){width:8.1%;}   /* 联系方式（11 位不可截断） */
  #recTable th:nth-child(14){width:4%;}     /* 备注说明（折行 2 行） */
  #recTable th:nth-child(15){width:6%;}     /* 操作（🔒 已锁定 不截断） */
}