/* ── 報價單 / 請款單 工具 ───────────────────────────── */

.dc-wrap{max-width:940px;margin:0 auto;padding:20px 16px 120px}
.dc-hd{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dc-hd-l{flex:1;min-width:200px}
.dc-hd-btns{display:flex;gap:8px;flex-wrap:wrap}
.dc-btn{padding:8px 14px;border:1.5px solid var(--bstrong);border-radius:var(--rsm);background:var(--card);font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:all .18s;white-space:nowrap}
.dc-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-l)}
.dc-btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.dc-btn.pri:hover{background:#A8450F;color:#fff}
.dc-btn.sm{padding:5px 10px;font-size:12px}
.dc-btn:disabled{opacity:.5;cursor:not-allowed}

.dc-tabs{display:flex;gap:6px;margin-bottom:14px}
.dc-chip{padding:5px 13px;border:1px solid var(--border);border-radius:99px;background:var(--card);font-size:12px;color:var(--ink2);cursor:pointer}
.dc-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* 清單 */
.dc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.dc-card:hover{border-color:var(--bstrong)}
.dc-c-main{flex:1;min-width:220px}
.dc-c-top{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.dc-badge{font-size:10px;font-weight:700;border-radius:4px;padding:2px 7px;letter-spacing:.04em}
.dc-badge.q{background:var(--acc-l);color:var(--acc)}
.dc-badge.i{background:#EFF6FF;color:#1D4ED8}
.dc-badge.st{background:var(--bg);color:var(--ink2);border:1px solid var(--border);font-weight:500}
.dc-c-id{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.dc-c-name{font-size:15px;font-weight:600;line-height:1.4}
.dc-c-sub{font-size:12px;color:var(--ink2);margin-top:2px}
.dc-c-amt{font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.dc-c-amt small{display:block;font-size:11px;font-weight:400;color:var(--ink3);text-align:right}
.dc-c-btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dc-inv-line{font-size:11px;color:var(--ok);background:var(--ok-bg);border-radius:5px;padding:3px 8px;margin-top:6px;display:inline-block}
.dc-c-log{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:11px;color:var(--ink3)}
.dc-c-log span{white-space:nowrap}

/* 紀錄區塊 */
.dc-sub-t{font-size:12px;font-weight:700;color:var(--ink2);margin:16px 0 8px}
.dc-sub-t small{font-weight:400;color:var(--ink3);margin-left:6px}
.dc-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:12px;color:var(--ink)}
.dc-meta div{display:flex;gap:8px}
.dc-meta span{color:var(--ink3);flex-shrink:0;width:60px}
.dc-meta a{color:var(--acc)}
@media(max-width:640px){.dc-meta{grid-template-columns:1fr}}
.dc-ver{border:1px solid var(--border);border-radius:var(--rsm);margin-bottom:7px;overflow:hidden}
.dc-ver-hd{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--bg);cursor:pointer;font-size:12px}
.dc-ver-hd b{font-size:13px}
.dc-ver-n{background:var(--acc-l);color:var(--acc);border-radius:99px;padding:1px 9px;font-size:11px;font-weight:600}
.dc-ver-t{margin-left:auto;color:var(--ink3);font-size:11px;white-space:nowrap}
.dc-ver .dc-gp-ar{color:var(--ink3);font-size:11px;transition:transform .2s}
.dc-ver.open .dc-gp-ar{transform:rotate(90deg)}
.dc-ver-bd{display:none;padding:10px 12px}
.dc-ver.open .dc-ver-bd{display:block}
.dc-diff{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.dc-diff th{text-align:left;font-weight:500;color:var(--ink3);font-size:11px;padding:0 8px 5px;border-bottom:1px solid var(--border)}
.dc-diff td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top;word-break:break-word}
.dc-diff tr:last-child td{border-bottom:none}
.dc-diff td.f{color:var(--ink2);font-weight:500}
.dc-diff td.o{color:#9A3412;text-decoration:line-through;text-decoration-color:#D6D0C8}
.dc-diff td.n{color:var(--ok)}
.dc-diff i{color:var(--ink3);font-style:normal}
.dc-diff a{color:var(--acc)}
.dc-tag{display:inline-block;font-size:10px;font-weight:700;border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:1px}
.dc-tag.added{background:var(--ok-bg);color:var(--ok)}
.dc-tag.removed{background:#FEF2F2;color:#B91C1C}
.dc-tag.changed{background:var(--acc-l);color:var(--acc)}

/* 大項標題列 */
.dc-gp-l{width:20px;height:20px;border-radius:5px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;
         display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dc-gp-name{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:5px;padding:4px 7px;
            font-family:inherit;font-size:13px;font-weight:600;color:var(--ink)}
.dc-gp-name:hover{border-color:var(--border);background:var(--card)}
.dc-gp-name:focus{outline:none;border-color:var(--acc);background:var(--card)}
.dc-empty{text-align:center;padding:60px 20px;color:var(--ink3);font-size:13px}

/* 表單 */
.dc-sec{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px}
.dc-sec-t{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.dc-sec-t small{font-weight:400;color:var(--ink3);font-size:11px}
.dc-f{margin-bottom:10px}
.dc-f label{display:block;font-size:12px;color:var(--ink2);margin-bottom:4px;font-weight:500}
.dc-req{color:var(--acc);font-weight:700;font-size:10px;margin-left:3px}

/* 明細版開關 */
.dc-switch{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer;user-select:none}
.dc-switch input{position:absolute;opacity:0;width:0;height:0}
.dc-switch-t{width:36px;height:20px;border-radius:99px;background:var(--bstrong);position:relative;transition:background .2s;flex-shrink:0}
.dc-switch-t::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.dc-switch input:checked + .dc-switch-t{background:var(--acc)}
.dc-switch input:checked + .dc-switch-t::after{transform:translateX(16px)}
.dc-switch input:focus-visible + .dc-switch-t{outline:2px solid var(--acc);outline-offset:2px}
.dc-chkline{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);cursor:pointer;margin-top:6px}
.dc-chkline input{width:14px;height:14px;accent-color:var(--acc)}

/* 稅率上下點選 */
.dc-step{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--rsm);background:var(--card);overflow:hidden}
.dc-step:focus-within{border-color:var(--acc)}
.dc-step-b{width:38px;height:38px;border:none;background:var(--bg);font-family:inherit;font-size:17px;color:var(--ink2);cursor:pointer;flex-shrink:0}
.dc-step-b:hover{background:var(--acc-l);color:var(--acc)}
.dc-step-b:active{background:var(--bstrong)}
.dc-step-in{width:56px;height:38px;border:none;text-align:center;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;-moz-appearance:textfield}
.dc-step-in:focus{outline:none}
.dc-step-in::-webkit-outer-spin-button,.dc-step-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dc-step-u{font-size:13px;color:var(--ink2);padding-right:10px}
.dc-in,.dc-ta,.dc-sel{width:100%;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--rsm);font-family:inherit;font-size:13px;color:var(--ink);background:var(--card);transition:border-color .15s}
.dc-in:focus,.dc-ta:focus,.dc-sel:focus{outline:none;border-color:var(--acc)}
.dc-ta{resize:vertical;min-height:64px;line-height:1.7}
.dc-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dc-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:640px){.dc-row2,.dc-row3{grid-template-columns:1fr}}

/* 項目表 */
.dc-items{width:100%;border-collapse:collapse}
.dc-items th{font-size:11px;color:var(--ink3);font-weight:500;text-align:left;padding:0 6px 5px}
.dc-items td{padding:3px 4px;vertical-align:middle}
.dc-items .dc-in{padding:6px 8px;font-size:13px}
.dc-items .dc-in.off{background:var(--bg);color:var(--ink3)}
.dc-pct{display:flex;align-items:center;gap:4px}
.dc-pct .dc-in{text-align:right;-moz-appearance:textfield}
.dc-pct .dc-in::-webkit-outer-spin-button,.dc-pct .dc-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dc-pct span{font-size:12px;color:var(--ink2)}
.dc-calc{font-size:13px;font-weight:600;color:var(--ink);text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
.dc-x{width:26px;height:26px;border:none;background:none;color:var(--ink3);font-size:15px;cursor:pointer;border-radius:5px}
.dc-x:hover{background:#FEF2F2;color:#DC2626}
.dc-num{text-align:right;font-variant-numeric:tabular-nums}
.dc-gp{border:1px solid var(--border);border-radius:var(--rsm);margin-bottom:10px;overflow:hidden}
.dc-gp-hd{background:var(--bg);padding:8px 12px;display:flex;align-items:center;gap:10px;cursor:pointer}
.dc-gp-hd b{flex:1;font-size:13px}
.dc-gp-sum{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.dc-gp-bd{padding:8px 10px;display:none}
.dc-gp.open .dc-gp-bd{display:block}
.dc-gp-ar{color:var(--ink3);font-size:11px;transition:transform .2s}
.dc-gp.open .dc-gp-ar{transform:rotate(90deg)}

/* 合計 */
.dc-tot{background:var(--card);border:1px solid var(--bstrong);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.dc-tot-r{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px}
.dc-tot-r.big{border-top:1.5px solid var(--ink);margin-top:6px;padding-top:10px;font-size:16px;font-weight:700}
.dc-tot-r span:last-child{font-variant-numeric:tabular-nums}

/* 底部操作列 */
.dc-bot{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--border);padding:10px 16px;display:flex;gap:8px;align-items:center;margin:0 -16px -120px;z-index:50}

/* 預覽 */
.dc-modal{display:none;position:fixed;inset:0;background:rgba(28,25,23,.55);z-index:500;align-items:center;justify-content:center;padding:16px}
.dc-modal.show{display:flex}
.dc-modal-in{background:var(--card);border-radius:var(--r);max-width:440px;width:100%;padding:20px;max-height:90vh;overflow:auto}
.dc-modal-t{font-size:16px;font-weight:700;margin-bottom:4px}
.dc-modal-s{font-size:12px;color:var(--ink2);margin-bottom:14px}
.dc-modal-btns{display:flex;gap:8px;margin-top:16px}
.dc-modal-btns .dc-btn{flex:1;justify-content:center;text-align:center}

.dc-pv{display:none;position:fixed;inset:0;background:#57534E;z-index:600;flex-direction:column}
.dc-pv.show{display:flex}
.dc-pv-bar{background:var(--card);padding:9px 14px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.dc-pv-bar b{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-pv-warn{font-size:11px;color:#B45309;background:var(--warn-bg,#FFFBEB);border:1px solid #FCD34D;border-radius:5px;padding:3px 8px;white-space:nowrap}
.dc-pv-tip{font-size:11px;color:var(--ink3);white-space:nowrap}
@media(max-width:640px){.dc-pv-tip{display:none}}
.dc-pv-body{flex:1;overflow:auto;padding:16px;display:flex;justify-content:center;align-items:flex-start}
.dc-pv-stage{position:relative;flex:0 0 auto}
.dc-pv-stage iframe{border:none;background:transparent;display:block;position:absolute;top:0;left:0}

.dc-err{background:#FEF2F2;border:1px solid #FECACA;color:#DC2626;border-radius:var(--rsm);padding:9px 12px;font-size:12px;margin-bottom:10px;display:none}
.dc-err.show{display:block}
.dc-hint{font-size:11px;color:var(--ink3);margin-top:4px;line-height:1.6}