/* 报价流转系统样式 v17 — 现代清爽商务 · 卡片化重构 @2026-08-27 */
/* ---------------- 通用徽标 ---------------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:18px;vertical-align:middle}
.badge-ok{background:#ecfdf3;color:#067647}
.badge-warn{background:#fffaeb;color:#b54708}
.badge-info{background:#eff6ff;color:#175cd3}
.badge-danger{background:#fef3f2;color:#b42318}
.badge-muted{background:#f2f4f7;color:#667085}

/* ---------------- 列表页 ---------------- */
.qf-tab-label{color:#667085;font-size:14px;white-space:nowrap;flex:0 0 auto;margin-left:24px}
.qf-tab-select{padding:8px 34px 8px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#344054;font:inherit;font-size:14px;cursor:pointer;min-width:150px;flex:0 0 auto;appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23667085" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');background-repeat:no-repeat;background-position:right 10px center}
.qf-tab-select:focus{outline:none;border-color:#347ff0;box-shadow:0 0 0 3px rgba(52,127,240,.15)}

.qf-toolbar{display:flex;gap:10px;align-items:center}
.qf-toolbar .primary{width:auto;flex:0 0 auto;white-space:nowrap;padding:10px 18px}
.qf-toolbar .qf-search{flex:1;max-width:360px;display:flex;gap:8px}
.qf-toolbar .qf-search input{flex:1}
.qf-toolbar .qf-search button{flex:0 0 92px;white-space:nowrap;border:1px solid #d0d5dd;background:#fff;border-radius:6px;padding:10px 0;color:#344054;cursor:pointer;font:inherit}
.qf-toolbar .qf-search button:hover{background:#f2f4f7}
.qf-stats{grid-template-columns:repeat(4,1fr);margin-top:14px}

.qf-list table{margin-top:0}
.qf-list .clickable{cursor:pointer}
.qf-list .clickable:hover td{background:#f8faff}

/* ---------------- 详情页：卡片流布局 ---------------- */
.qf-detail{display:flex;flex-direction:column;gap:16px}
.qf-detail .detail-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;background:#fff;border:1px solid #e4e9f1;border-left:4px solid #347ff0;border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.05);flex-wrap:wrap}
.qf-detail .detail-title{flex:1 1 auto;min-width:0}
.qf-detail .detail-title h2{margin:0 0 8px;display:flex;align-items:center;gap:10px;font-size:21px;line-height:1.3;color:#101828;flex-wrap:wrap}
.qf-detail .detail-title h2 .badge{flex:0 0 auto}
.qf-detail .detail-title .meta{color:#667085;font-size:13px;margin:0;line-height:1.8;white-space:normal;word-break:break-all}
.qf-detail .detail-actions{display:flex;gap:8px;flex:0 0 auto;align-items:center;justify-content:flex-end}
.qf-detail .detail-actions .btn{white-space:nowrap;width:auto;min-width:110px;justify-content:center}
.qf-detail .detail-backbar .btn{padding:4px 12px;font-size:13px;color:#667085}
.qf-detail .detail-backbar .btn:hover{color:#347ff0;background:#f2f4f7}
.qf-reject{background:#fef3f2;border:1px solid #fecdca;color:#b42318;border-radius:8px;padding:10px 14px;font-size:14px}
.qf-warn{background:#fffaeb;border:1px solid #fedf89;color:#b54708;border-radius:8px;padding:10px 14px;font-size:14px}

/* ---------------- 按钮体系（紧凑） ---------------- */
.qf-detail .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;border:1px solid transparent;cursor:pointer;font:inherit;font-size:14px;line-height:1;padding:9px 16px;transition:filter .15s,background .15s,border-color .15s,color .15s}
.qf-detail .btn.sm{padding:6px 12px;font-size:13px;border-radius:6px}
.qf-detail .btn.primary{background:#347ff0;color:#fff;border-color:#347ff0}
.qf-detail .btn.primary:hover{background:#2a6cd4}
.qf-detail .btn.plain{background:#fff;color:#344054;border-color:#d0d5dd}
.qf-detail .btn.plain:hover{background:#f2f4f7}
.qf-detail .btn.danger{background:#e5484d;color:#fff;border-color:#e5484d}
.qf-detail .btn.danger:hover{background:#c93c41}
.qf-detail .btn.success{background:#30a46c;color:#fff;border-color:#30a46c}
.qf-detail .btn.success:hover{background:#27895a}
.qf-detail .btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------------- 流转进度轨道 ---------------- */
.qf-flow-card{margin-bottom:0}
.flow-rail{display:flex;align-items:flex-start;gap:4px;padding:6px 0}
.flow-step{flex:1;text-align:center;position:relative;min-width:0}
.flow-dot{width:34px;height:34px;border-radius:50%;margin:0 auto 6px;background:#eef2f7;color:#98a2b3;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;border:2px solid #d8dfe8;position:relative;z-index:1}
.flow-step.done .flow-dot{background:#347ff0;border-color:#347ff0;color:#fff}
.flow-step.active .flow-dot{background:#f79009;border-color:#f79009;color:#fff;box-shadow:0 0 0 4px #fff4e0}
.flow-step.reject .flow-dot{background:#e5484d;border-color:#e5484d;color:#fff}
.flow-name{font-size:13px;font-weight:600;color:#344054;margin-bottom:2px}
.flow-dept{font-size:11px;color:#98a2b3}
.flow-line{flex:0 0 26px;height:3px;background:#e4e7ec;margin-top:16px;border-radius:2px}
.flow-line.done{background:#347ff0}
.sub-rail{display:flex;align-items:center;gap:4px;margin:10px 6px 2px;padding:10px 14px;background:#f8fafc;border:1px solid #eef1f5;border-radius:8px}
.sub-rail .sub-label{font-size:12px;font-weight:600;color:#667085;margin-right:8px;white-space:nowrap}
.sub-step{flex:1;text-align:center;font-size:12px;color:#98a2b3;position:relative;padding-left:18px}
.sub-step::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#e9eef5;border:2px solid #d6dde7}
.sub-step.done{color:#344054}
.sub-step.done::before{background:#347ff0;border-color:#347ff0}
.sub-step.active{color:#b54708;font-weight:600}
.sub-step.active::before{background:#f79009;border-color:#f79009}
.sub-step.reject::before{background:#e5484d;border-color:#e5484d}

/* ---------------- 卡片 ---------------- */
.qf-detail .card{background:#fff;border:1px solid #e4e9f1;border-radius:14px;margin:0;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.05)}
.qf-detail .card-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid #eef1f5;flex-wrap:wrap}
.qf-detail .card-head h3{margin:0;font-size:15px;color:#1f2a44;position:relative;padding-left:11px}
.qf-detail .card-head h3::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:#347ff0}
.qf-detail .card-head .spacer{flex:1}
.qf-detail .card-body{padding:16px 20px}

/* ---------------- 报价流转单（form-sheet） ---------------- */
.form-sheet{border:1px solid #e4e9f1;border-radius:12px;overflow:hidden;background:#fff}
.sheet-head{display:flex;align-items:center;gap:14px;padding:14px 20px;background:#fff;border-bottom:1px solid #eef1f5;border-left:4px solid #347ff0}
.sheet-badge{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#4a8ef2,#2a6cd4);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;letter-spacing:.5px;flex-shrink:0;box-shadow:0 2px 8px rgba(52,127,240,.32)}
.sheet-head-text{flex:1 1 auto;min-width:0}
.sheet-head-text h4{margin:0;font-size:16px;color:#101828}
.sheet-head-text p{margin:3px 0 0;font-size:12px;color:#667085}
.sheet-ring{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid #d3e2f8;background:#f0f6ff;color:#347ff0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap}

/* 报价单据网格布局：标签+值两列，分区跨整行 */
.sheet-grid{display:grid;grid-template-columns:210px 1fr;font-size:13px}
.s-row{display:contents}
.s-row .s-label{color:#5a6b7f;font-weight:600;padding:10px 16px;border-bottom:1px solid #f2f5f9;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;text-align:left;line-height:1.7}
.s-row .s-val{color:#1f2937;padding:10px 16px;border-bottom:1px solid #f2f5f9;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;line-height:1.7}
.s-section{grid-column:1/-1;background:#f4f8fd;border-left:4px solid #347ff0;font-weight:700;color:#1f2a44;padding:9px 14px;font-size:13px;border-bottom:1px solid #e8eef7}
.s-section .section-no{color:#347ff0;margin-right:6px}
.s-wide{grid-column:1/-1;padding:10px 16px;border-bottom:1px solid #f2f5f9}
.sheet-grid input,.sheet-grid select,.sheet-grid textarea{border:1px solid #d0d5dd;border-radius:8px;padding:7px 11px;font:inherit;font-size:13px;color:#344054;background:#fff;width:100%;min-width:0;max-width:340px;transition:border-color .15s,box-shadow .15s}
.sheet-grid input:focus,.sheet-grid select:focus,.sheet-grid textarea:focus{outline:none;border-color:#347ff0;box-shadow:0 0 0 3px rgba(52,127,240,.14)}
.sheet-grid input:disabled,.sheet-grid select:disabled{background:#f6f8fa;color:#475467;border-color:transparent;padding-left:0}
.sheet-grid textarea{min-height:64px;resize:vertical;max-width:520px}
.sheet-grid .req{color:#e5484d}
.sheet-grid .value-strong{font-weight:700;color:#1f2a44}
.sheet-grid .tri-input{display:flex;gap:8px;max-width:520px;width:100%}
.sheet-grid .tri-input input{min-width:0}
.sheet-grid .chip-group{flex:1 1 100%;max-width:520px}

/* 成本核算表 */
.cost-table{width:100%;min-width:560px;border-collapse:collapse;font-size:13px;margin:2px 0}
.cost-table th,.cost-table td{border:1px solid #e8ecf2;padding:7px 10px;text-align:center}
.cost-table th{background:#f4f8fd;color:#475467;font-weight:600}
.cost-table td.kind{text-align:left;font-weight:600;color:#344054}
.cost-table td.total{background:#fffaeb;font-weight:700;color:#b54708}
.cost-table .sum-row td{background:#f4f7fc;font-weight:700}

/* 费用紧凑卡片（模具费+交期） */
.sheet-grid .fee-grid{display:grid;gap:10px}
.fee-grid.fee-mold{grid-template-columns:repeat(4,1fr)}
.fee-wrap-title{font-size:12.5px;font-weight:700;color:#475467;margin:2px 0 10px;display:flex;align-items:center;gap:7px}
.fee-wrap-title::before{content:'';width:3px;height:13px;border-radius:2px;background:#347ff0}
.cost-wrap{overflow-x:auto}
.fee-cell{background:#f8fafc;border:1px solid #eef1f5;border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:7px;min-width:0}
.fee-cell .fee-label{font-size:12px;color:#667085;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fee-cell input,.fee-cell select{padding:6px 8px}
.fee-control{display:flex;align-items:center;gap:6px;min-width:0}
.fee-control > input,.fee-control > .readonly{flex:1;min-width:0;max-width:none;width:100%}
.fee-unit{flex:0 0 auto;color:#98a2b3;font-size:12px}
.fee-cell.fee-total{background:#fff8e6;border-color:#ffe3a1}
.fee-cell.fee-total .fee-label{color:#9a6700}
.fee-pair{display:flex;gap:8px;align-items:center;min-width:0}
.fee-pair .fee-control:first-child{flex:0 0 46%}
.fee-pair > input{flex:1;min-width:0}

/* 审批徽章（替代旋转印章，应用化） */
.stamp-row{grid-column:1/-1;background:#fbfcfe;border-bottom:1px solid #eef1f5}
.stamp-wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 16px}
.approve-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.7;background:#eff6ff;color:#175cd3;border:1px solid #d1e0ff}
.approve-badge b{font-weight:800;flex:0 0 auto}
.approve-badge small{font-size:11px;font-weight:500;opacity:.82;margin-left:2px}
.approve-badge.ok{background:#ecfdf3;color:#067647;border-color:#a6f4c5}
.approve-badge.warn{background:#fffaeb;color:#b54708;border-color:#fedf89}
.approve-badge.danger{background:#fef3f2;color:#b42318;border-color:#fecdca}
.approve-badge.muted{background:#f2f4f7;color:#667085;border-color:#e4e7ec}

/* 单据底部签名（弱化纸张感） */
.sheet-foot{display:flex;gap:36px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid #eef1f5;font-size:12px;color:#98a2b3}
.sheet-foot .sf-item{display:flex;align-items:center;gap:8px}
.sheet-foot .sf-line{display:inline-block;width:72px;border-bottom:1px solid #d3dae3}

/* 只读值 */
.sheet-grid .readonly{color:#1f2937;line-height:1.7}
.sheet-grid .qf-field .qf-label{display:block;color:#667085;font-size:12px;margin-bottom:5px;text-align:left}

/* ---------------- 附件 ---------------- */
.attachment-list{list-style:none;margin:0;padding:0}
.attachment-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid #eef1f5;border-radius:10px;margin-bottom:8px;background:#fafbfc}
.attachment-list .att-name{display:flex;align-items:center;gap:8px;font-size:13px;color:#1f2937;word-break:break-all}
.attachment-list .att-ops{display:flex;gap:10px;flex-shrink:0}
.attachment-list .att-ops a,.attachment-list .att-ops button{font-size:13px;color:#347ff0;background:none;border:0;cursor:pointer;padding:0;text-decoration:none;font:inherit}
.attachment-list .att-ops .danger-text{color:#d92d20}
.drop-zone{border:2px dashed #c6cdd8;border-radius:10px;padding:22px;text-align:center;color:#98a2b3;font-size:13px;cursor:pointer;margin-top:12px;transition:border-color .15s,background .15s}
.drop-zone:hover,.drop-zone.dragover{border-color:#347ff0;background:#f0f6ff;color:#347ff0}

/* ---------------- 流转记录 timeline ---------------- */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:#e4e7ec}
.tl-item{position:relative;padding:0 0 20px 8px}
.tl-item:last-child{padding-bottom:4px}
.tl-item::before{content:'';position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;background:#347ff0;border:2px solid #fff;box-shadow:0 0 0 2px #347ff0}
.tl-item.tl-reject::before{background:#e5484d;box-shadow:0 0 0 2px #e5484d}
.tl-item.tl-ok::before{background:#30a46c;box-shadow:0 0 0 2px #30a46c}
.tl-title{font-size:13px;font-weight:600;color:#1f2a44;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-meta{font-size:12px;color:#98a2b3}
.tl-comment{font-size:12px;color:#667085;margin-top:3px;background:#f8fafc;border-radius:6px;padding:6px 10px;display:inline-block;max-width:100%}

/* ---------------- 兼容旧结构 ---------------- */
.qf-step{margin-bottom:16px}
.qf-save-row{display:flex;gap:10px;margin-top:12px}
.qf-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 18px}
.qf-form .qf-field{display:flex;flex-direction:column;gap:5px;font-size:13px}
.qf-form .qf-field.qf-wide{grid-column:1/-1}
.qf-form .qf-field>span{color:#667085}
.qf-form .qf-field input,.qf-form .qf-field select,.qf-form .qf-field textarea{border:1px solid #d0d5dd;border-radius:8px;padding:8px 10px;font:inherit;color:#344054;background:#fff}
.qf-form .qf-field textarea{min-height:72px;resize:vertical}
.qf-form .qf-field .qf-value{padding:8px 2px;color:#344054;min-height:20px;word-break:break-word}

.danger-text{color:#d92d20}
.link-button{background:none;border:0;padding:0;cursor:pointer;color:#347ff0;font:inherit}

/* ---------------- 多选 chip 组（勾选框 + 其他自定义） ---------------- */
.qf-detail .chip-group{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-start;text-align:left}
.qf-detail .chip-group-nowrap{flex-wrap:nowrap;max-width:none;overflow-x:auto}
.qf-detail .chip-group-nowrap::-webkit-scrollbar{height:4px}
.qf-detail .chip-group-nowrap::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:4px}
.qf-detail .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #c9d2d8;border-radius:8px;padding:4px 10px;cursor:pointer;font-size:12.5px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:all .16s;user-select:none;color:#344054}
.qf-detail .chip:hover{border-color:#347ff0;background:#f7fafc}
.qf-detail .chip input{width:15px;height:15px;flex-shrink:0;min-width:0;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;accent-color:#347ff0;cursor:pointer;vertical-align:middle}
.qf-detail .chip:has(input:checked){background:linear-gradient(135deg,#4a8ef2,#2a6cd4);border-color:#2a6cd4;color:#fff;font-weight:500;box-shadow:0 2px 8px rgba(52,127,240,.35)}
.qf-detail .chip-extra{display:inline-flex;align-items:center;gap:4px;border:1px solid #c9d2d8;border-radius:8px;padding:3px 9px;color:#667085;font-size:13px;background:#f7f9fa;white-space:nowrap}
.qf-detail .chip-extra-row{display:inline-flex;align-items:center;gap:7px}
.qf-detail .chip-extra .ce-label{font-size:12px;color:#667085}
.qf-detail .chip-extra input{border:none;border-bottom:1px dashed #a9b4bc;border-radius:0;padding:2px 2px;width:66px;min-width:0;max-width:none;background:transparent;font-size:12.5px;color:#1f2a44}
.qf-detail .chip-extra input:focus{outline:none;border-bottom-color:#347ff0;box-shadow:none}
.qf-detail .chip-extra .ce-unit{font-size:12px;color:#667085}