/* ════════════════════════════════════════════════════════════════════
   quote-minimal.css — Giao diện "Tạo báo giá" tối giản (document-style)
   Nạp SAU app.css để override. Chỉ ảnh hưởng view Builder (#viewBuilder).
   Gỡ bỏ = xoá <link> file này trong index.html (an toàn, có thể revert).
   Tất cả dùng token sẵn có trong css/tokens.css.
   ════════════════════════════════════════════════════════════════════ */
#viewBuilder{
  --wah-light:#FFF3EB;   /* tint cam nhạt — hover/selected */
  --wah-dark:#C8540C;    /* cam đậm — chữ nhấn */
  --bg3:#ece3da;         /* xám ấm đậm hơn surface2 */
  --doc-max:1080px;      /* bề rộng tối đa của "tài liệu" */
  --ff:'Google Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ── 1. Bỏ panel PDF preview + thanh resize (sheet chính là tài liệu) ── */
#viewBuilder .panel-preview,
#viewBuilder .panel-resizer{display:none!important}

/* ── 2. Nền ấm + editor là tấm "trang giấy" trắng canh giữa (card) ── */
#viewBuilder.builder{background:var(--bg)}
#viewBuilder .panel-editor{
  max-width:var(--doc-max);margin:16px auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 1px 3px rgba(20,18,15,.06)}
/* Tabs: bỏ viền focus hộp xanh, chỉ giữ gạch chân cam */
#viewBuilder #quoteTabsBar button:focus,
#viewBuilder #quoteTabsBar button:focus-visible{outline:none}

/* ── 3. Catalog (panel trái) gọn gàng ── */
#viewBuilder .panel-services{width:288px}
#viewBuilder .svc-price{color:var(--text3);font-weight:400}
#viewBuilder .svc-item:hover{background:var(--wah-light)}

/* ── 4. Header thông tin (meta) kiểu chứng từ ── */
#viewBuilder .quote-meta{
  grid-template-columns:repeat(4,1fr)!important;
  gap:15px 28px;padding:22px 26px 18px;border-bottom:1px solid var(--border)}
#viewBuilder .quote-meta > .meta-field:nth-child(1){grid-column:span 2}
#viewBuilder .quote-meta > .meta-field:nth-child(2){grid-column:span 2}
#viewBuilder .quote-meta > .meta-field:nth-child(3){grid-column:span 1}
#viewBuilder .quote-meta > .meta-field:nth-child(5){grid-column:span 1}
#viewBuilder .meta-label{font-size:9px;letter-spacing:.08em;margin-bottom:2px}
#viewBuilder .meta-input{
  background:transparent;border:none;border-bottom:1px solid transparent;
  border-radius:0;padding:2px 0;font-size:13px;font-weight:500}
#viewBuilder .meta-input:focus{border-bottom-color:var(--accent);box-shadow:none}
#viewBuilder #metaClient{font-size:20px;font-weight:700;color:var(--text)}
#viewBuilder #metaProject{font-size:14px;font-weight:500;color:var(--text2)}
/* nút chọn Đại diện KH bớt nặng */
#viewBuilder #metaClientPickerBtn{background:transparent!important;border-color:var(--border)!important}

/* ── 5. Tabs phẳng, gạch chân cam ── */
#viewBuilder #quoteTabsBar{border-bottom:1px solid var(--border)!important;padding:0 26px}

/* ── 6. Bảng hạng mục: nhóm nhạt, hàng thoáng ── */
#viewBuilder .items-area{padding:6px 26px 14px}
#viewBuilder .quote-table thead th{border-bottom:1px solid var(--border);padding-bottom:8px}
/* Header nhóm: nền xám ấm thay vì thanh đen */
#viewBuilder .cat-row td{
  background:var(--surface2);color:var(--text2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding-top:9px;padding-bottom:9px;letter-spacing:.05em}
#viewBuilder .cat-row td:last-child{background:var(--surface2)!important}
#viewBuilder .cat-name-inline{color:var(--text2)!important}
#viewBuilder .q-row td{padding:8px 6px}
#viewBuilder .q-row:hover{background:var(--surface2)}
#viewBuilder .desc-editable{border-bottom-color:transparent}
#viewBuilder .q-row:hover .desc-editable,
#viewBuilder .desc-editable:focus{border-bottom-color:var(--border2)}
/* Stepper SL kiểu pill bao quanh − giá trị + */
#viewBuilder .qty-ctrl{border:1px solid var(--border);border-radius:8px;padding:2px;gap:0;background:var(--surface)}
#viewBuilder .qty-btn{border:none;background:transparent;width:20px;height:20px}
#viewBuilder .qty-btn:hover{background:var(--bg3);color:var(--accent)}
#viewBuilder .qty-val{width:30px}
/* Đơn giá: ô trần, canh phải */
#viewBuilder .price-input{background:transparent;border:none;border-radius:0;padding:3px 0;width:104px}
#viewBuilder .price-input:focus{box-shadow:inset 0 -1px 0 var(--accent)}
#viewBuilder .line-total{font-weight:600}
#viewBuilder .line-usd{color:var(--usd);font-style:normal}

/* ── 7. Deliverables ── */
#viewBuilder .deliverables-area{border-top:1px solid var(--border);padding:14px 24px 6px}
#viewBuilder .deliverables-label{margin-bottom:7px}

/* ── 8. Footer tính tiền: controls trái · totals phải ── */
#viewBuilder .quote-footer{border-top:1px solid var(--border)}
#viewBuilder .footer-top{gap:24px;padding-top:4px;flex-wrap:nowrap;align-items:flex-start}
/* Cột trái 30% (kẹp min/max), Summary bên phải ưu tiên 70% */
#viewBuilder .footer-left-group{flex:0 1 30%;min-width:300px;max-width:380px}
#viewBuilder .calc-input{background:var(--surface);border-radius:6px}
/* Cụm % nhỏ & tinh tế hơn trên desktop */
#viewBuilder .calc-pct-lbl{font-size:9px;font-weight:600;letter-spacing:.04em}
#viewBuilder .calc-pct-box{padding:7px 11px}
#viewBuilder .calc-pct-box .calc-input{font-size:13px;font-weight:600}
#viewBuilder .calc-pct-u{font-size:12px}
/* USD zone nhẹ hơn */
#viewBuilder .usd-zone{background:rgba(var(--usd-rgb),.06);border-radius:10px;padding:10px 12px}
#viewBuilder .usd-mode-btns{gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:2px;margin-top:6px}
#viewBuilder .usd-mode-btn{border:none;background:transparent;border-radius:6px;padding:4px 10px;font-weight:600}
#viewBuilder .usd-mode-btn.active{background:var(--surface);color:var(--wah-dark);border:none}
/* Totals */
#viewBuilder .totals-block{flex:1 1 0;min-width:0;max-width:none;margin-left:0}
#viewBuilder .t-row{font-size:12px;margin-bottom:3px}
#viewBuilder .grand-total{font-size:22px;color:var(--accent);border-top:1px solid var(--border2);padding-top:9px;margin-top:6px}
#viewBuilder .grand-total .lbl{font-size:11px}

/* ── 9. ĐỒNG NHẤT FONT: số dùng chung 1 font với chữ (tabular-nums) ── */
#viewBuilder .row-num,
#viewBuilder .qty-val,
#viewBuilder .price-input,
#viewBuilder .line-total,
#viewBuilder .line-usd,
#viewBuilder .calc-input,
#viewBuilder .usd-rate-input,
#viewBuilder .t-row,
#viewBuilder .grand-total,
#viewBuilder .grand-usd,
#viewBuilder .cat-row td{
  font-family:var(--ff)!important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1}

/* ════════════════════════════════════════════════════════════════════
   REDESIGN BÁO GIÁ 2026-06 — header card · tabs · bảng cột mới.
   (Override cấu trúc .qm-head/.qm-grid và #quoteTable.)
   ════════════════════════════════════════════════════════════════════ */

/* ── Header card (compact) ── */
#viewBuilder .quote-meta{display:block!important;padding:13px 24px 11px;border-bottom:1px solid var(--border)}
#viewBuilder .qm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
#viewBuilder .qm-head-main{flex:1;min-width:0}
#viewBuilder .qm-head-main .meta-field+.meta-field{margin-top:1px!important}
#viewBuilder .qm-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
#viewBuilder .qm-logo{width:30px;height:30px;line-height:0}
#viewBuilder .qm-logo svg{width:30px;height:30px}
#viewBuilder .qm-no-block{text-align:right}
#viewBuilder .qm-no{font-size:15px;font-weight:700;color:var(--text);font-family:'Google Sans',sans-serif;margin-top:1px}
#viewBuilder #metaClient{font-size:19px;font-weight:700;color:var(--text);line-height:1.2;padding:0}
#viewBuilder #metaProject{font-size:13px;font-weight:500;color:var(--text2);padding:0}
#viewBuilder .qm-head .meta-input{background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0}
#viewBuilder .qm-head .meta-input:focus{border-bottom-color:var(--accent);box-shadow:none}
#viewBuilder .qm-head .meta-label{margin-bottom:0}
#viewBuilder .qm-rule{height:1px;background:var(--border);margin:9px 0 8px}
#viewBuilder .qm-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr) minmax(0,1fr);gap:7px 48px}
#viewBuilder .qm-grid .meta-field{min-width:0}
#viewBuilder .meta-label{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);font-weight:600;margin-bottom:1px}
#viewBuilder .qm-val{font-size:13px;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 0}
#viewBuilder .qm-date{background:transparent!important;border:none!important;border-bottom:1px solid transparent!important;border-radius:0!important;padding:1px 0!important;font-size:13px;font-weight:500;color:var(--text);width:100%}
#viewBuilder .qm-date:focus{border-bottom-color:var(--accent)!important;box-shadow:none!important}
#viewBuilder #metaClientPickerBtn{font-size:13px!important}
#viewBuilder #metaClientPickerBtn:hover{color:var(--accent)!important}

/* ── Tabs ── */
#viewBuilder #quoteTabsBar{border-bottom:1px solid var(--border)!important;padding:0 24px}
#viewBuilder .qtab{transition:color .12s}
#viewBuilder .qtab:hover{color:var(--text)!important}
#viewBuilder .tab-count{background:var(--surface2);color:var(--text2);font-size:11px;font-weight:600;padding:1px 7px;border-radius:9px;min-width:18px;text-align:center;line-height:1.5}

/* ── Bảng hạng mục (cột: Hạng mục · ĐVT · Đơn giá · SL · Thành tiền) ── */
#viewBuilder .quote-table{table-layout:fixed}
#viewBuilder .quote-table thead th{text-transform:none;letter-spacing:0;font-size:11px;font-weight:600;color:var(--text3);border-bottom:1px solid var(--border);padding:6px 8px 9px}
#viewBuilder .quote-table thead th.c{text-align:center}
#viewBuilder .quote-table thead th.r{text-align:right}

#viewBuilder .quote-table .cat-row td{background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:7px 8px;vertical-align:middle}
#viewBuilder .quote-table .cat-name-inline{background:transparent;border:none;outline:none;color:var(--text2);font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-family:'Google Sans',sans-serif;font-weight:600;flex:1;min-width:0;cursor:text;padding:0}
/* Mobile: ghi đè rule global input{14px!important} để tên nhóm không bị to */
@media(max-width:600px){#viewBuilder .cat-name-inline{font-size:11px!important}}
#viewBuilder .quote-table .cat-num{font-size:11px;color:var(--text3);font-weight:600;white-space:nowrap;flex-shrink:0}
#viewBuilder .quote-table .cat-total{text-align:right;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
#viewBuilder .quote-table .cat-act{text-align:center;width:30px}
#viewBuilder .quote-table .cat-del{background:none;border:none;cursor:pointer;color:var(--text3);opacity:0;padding:3px;border-radius:4px;display:inline-flex;transition:all .12s}
#viewBuilder .quote-table .cat-row:hover .cat-del{opacity:1}
#viewBuilder .quote-table .cat-del:hover{color:var(--red);background:rgba(var(--red-rgb),.1)}

#viewBuilder .quote-table .q-row td{padding:9px 8px;vertical-align:top;border-bottom:1px solid var(--border)}
#viewBuilder .quote-table .q-drag{width:24px;padding-left:6px;padding-right:0}
#viewBuilder .quote-table .q-name-cell{vertical-align:top}
#viewBuilder .quote-table .q-name{display:block;font-size:13px;font-weight:500;color:var(--text);background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;padding:1px 0;width:100%;font-family:'Google Sans',sans-serif}
#viewBuilder .quote-table .q-name:focus{border-bottom-color:var(--border2);outline:none}
#viewBuilder .quote-table .q-desc{display:block;font-size:11.5px;color:var(--text3);background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;padding:1px 0;width:100%;resize:none;overflow:hidden;font-family:'Google Sans',sans-serif;line-height:1.4}
#viewBuilder .quote-table .q-desc:focus{border-bottom-color:var(--border2);outline:none}
#viewBuilder .quote-table td.c{text-align:center;vertical-align:middle}
#viewBuilder .quote-table td.r{text-align:right;vertical-align:middle}
/* Ô kéo (đầu dòng) và ô nút × (cuối dòng): căn giữa theo chiều dọc của hàng */
#viewBuilder .quote-table .q-row>td.q-drag,#viewBuilder .quote-table .q-row>td:last-child{vertical-align:middle}
#viewBuilder .quote-table .unit-input{text-align:center;width:100%;max-width:56px;font-size:12px;color:var(--text2);background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;padding:2px 0}
#viewBuilder .quote-table .unit-input:focus{border-bottom-color:var(--border2);outline:none}
#viewBuilder .quote-table .price-input{text-align:right;width:100%;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;padding:3px 0;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
#viewBuilder .quote-table .price-input:focus{border-bottom-color:var(--accent);box-shadow:none;outline:none}
#viewBuilder .quote-table .qty-ctrl{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:8px;padding:2px;background:var(--surface)}
#viewBuilder .quote-table .qty-btn{border:none;background:transparent;width:22px;height:22px;cursor:pointer;color:var(--text2);font-size:14px;line-height:1;border-radius:5px}
#viewBuilder .quote-table .qty-btn:hover{background:var(--surface2);color:var(--accent)}
#viewBuilder .quote-table .qty-val{width:30px;text-align:center;border:none;background:transparent;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
#viewBuilder .quote-table .qty-val::-webkit-outer-spin-button,#viewBuilder .quote-table .qty-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#viewBuilder .quote-table .line-cell{text-align:right;vertical-align:middle;white-space:nowrap}
#viewBuilder .quote-table .line-total{display:block;font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#viewBuilder .quote-table .line-usd{display:block;font-size:11px;font-weight:400;color:var(--text3);font-style:normal;margin-top:1px;font-variant-numeric:tabular-nums}
#viewBuilder .quote-table .rm-btn{background:none;border:none;cursor:pointer;color:var(--text3);opacity:0;padding:3px;border-radius:4px;display:inline-flex;transition:all .12s}
#viewBuilder .quote-table .q-row:hover .rm-btn{opacity:1}
#viewBuilder .quote-table .rm-btn:hover{color:var(--red);background:rgba(var(--red-rgb),.1)}
#viewBuilder .quote-table .row-drag-handle{font-size:13px;color:var(--text3);cursor:grab;opacity:0;transition:opacity .12s}
#viewBuilder .quote-table .q-row:hover .row-drag-handle,#viewBuilder .quote-table .cat-row:hover .row-drag-handle{opacity:.6}

#viewBuilder .quote-table .add-line-row td{padding:0;border-bottom:1px solid var(--border)}
#viewBuilder .quote-table .add-line-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--text3);font-size:12px;font-family:'Google Sans',sans-serif;padding:7px 4px;transition:color .12s}
#viewBuilder .quote-table .add-line-btn:hover{color:var(--accent)}

/* ── Footer KHÔNG dính đáy: cả editor cuộn, footer trôi sau hạng mục ── */
#viewBuilder .panel-editor{overflow-y:auto;overflow-x:hidden}
#viewBuilder .panel-editor>.quote-meta,#viewBuilder .panel-editor>#quoteTabsBar{flex-shrink:0}
#viewBuilder .items-area{flex:0 0 auto;overflow:visible}
#viewBuilder #psItemsArea{overflow-x:auto!important}

/* ── IC summary xuống dưới bảng, căn phải như totals QC ── */
#viewBuilder #internalCostPanel{height:auto!important}
#viewBuilder #internalCostPanel>.items-area{flex:0 0 auto!important;overflow-y:visible!important}
#viewBuilder #icSummaryPanel{width:auto!important;height:auto!important;flex-shrink:0;align-items:flex-end;border-top:1px solid var(--border);background:var(--surface)!important;overflow:visible!important;padding:16px 32px 20px}
#viewBuilder #icSummaryPanel>div{width:400px;max-width:100%}
#viewBuilder #icSummaryPanel>div:last-child{margin-top:10px!important}
#viewBuilder #icSummaryContent{max-width:400px}

/* ── Căn icon + text trong tab; giữ flex kể cả khi JS reset style.display='' lúc load báo giá ── */
#viewBuilder .qtab{display:inline-flex;align-items:center!important;flex-wrap:nowrap;white-space:nowrap}
#viewBuilder .qtab>svg{flex:0 0 auto;align-self:center}
#viewBuilder .qtab>span{align-self:center;line-height:1.4}

/* ── Tăng khoảng cách content với viền thẻ (2 bên) ── */
#viewBuilder .quote-meta{padding-left:32px;padding-right:32px}
#viewBuilder #quoteTabsBar{padding-left:32px!important;padding-right:32px!important}
#viewBuilder .items-area{padding-left:32px;padding-right:32px}
#viewBuilder .deliverables-area{padding-left:32px;padding-right:32px}
#viewBuilder .quote-footer{padding-left:32px;padding-right:32px}

/* ── Logo header = ảnh logo công ty ── */
#viewBuilder .qm-logo{height:30px;width:auto;line-height:0}
#viewBuilder .qm-logo img{height:30px;width:auto;max-width:130px;object-fit:contain;display:block}

/* ── Bảng Nội bộ (IC) khớp style Báo giá: header xám nhạt, sentence-case, hàng thoáng ── */
#viewBuilder #internalTable thead th{text-transform:none!important;letter-spacing:0!important;font-size:11px;font-weight:600;color:var(--text3)!important;border-bottom:1px solid var(--border)!important;padding:6px 8px 9px}
#viewBuilder #internalTable .cat-row td{color:var(--text2)!important;background:var(--surface2)!important;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
#viewBuilder #internalTable .q-row td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
#viewBuilder #internalTable .row-name{font-size:13px;font-weight:600;color:var(--text)}
#viewBuilder #internalTable .row-num{color:var(--text3);font-size:11px}
#viewBuilder #internalTable .price-input{background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;text-align:right;padding:3px 0;font-variant-numeric:tabular-nums}
#viewBuilder #internalTable .price-input:focus{border-bottom-color:var(--accent);box-shadow:none;outline:none}
#viewBuilder #internalTable .ic-cost .price-input.ic-empty:not(:focus){border-bottom:1px dashed var(--border2)}
/* Bảng Nội bộ full-width (kể cả khi ẩn cột Margin) + cột Ghi chú + ô chọn nhân sự rõ ràng */
#viewBuilder #internalTable.ic-hide-margin{width:100%!important;max-width:none!important;table-layout:auto!important}
#viewBuilder #internalTable.ic-hide-margin td:nth-child(9),#viewBuilder #internalTable.ic-hide-margin th:nth-child(9){min-width:150px}
#viewBuilder #internalTable.ic-hide-margin td:nth-child(10),#viewBuilder #internalTable.ic-hide-margin th:nth-child(10){min-width:220px;width:auto}
#viewBuilder #internalTable.ic-hide-margin .desc-editable{width:100%!important;min-width:180px!important}
#viewBuilder #internalTable .won-sel-wrap{border:1px solid var(--border);border-radius:6px;padding:4px 8px;background:var(--surface);min-width:140px}
#viewBuilder #internalTable .won-sel-wrap:hover,#viewBuilder #internalTable .won-sel-wrap.open{border-color:var(--accent);border-bottom-color:var(--accent)}
#viewBuilder #internalTable .won-sel-display{font-size:12px;flex:1}