/* ═══════════════════════════════════════════════════════════════════════════
   Pi_BoQ — สไตล์เฉพาะของโมดูล 2.3

   ⚠️ ไฟล์นี้สร้างอัตโนมัติจาก web/index.html ด้วย scripts/split_web.mjs
      **ห้ามแก้ไฟล์นี้ด้วยมือ** แก้ที่ index.html แล้วสั่ง  node scripts/split_web.mjs

   ทุกกฎ scope ไว้ใต้ #sc-boq เพราะชื่อคลาสชนกับ CRM-Pi 15 ตัว
   โทเคนสี (--brand/--ink/--surface/--line) มาจาก pi_crm_erp/web/css/pi.css
   ═══════════════════════════════════════════════════════════════════════════ */

#sc-boq h1, #sc-boq h2, #sc-boq h3{line-height:1.35;margin:0}
#sc-boq [hidden]{display:none !important}
#sc-boq .soft{color:var(--ink-3);font-size:12.5px}
#sc-boq .num{text-align:right;font-variant-numeric:tabular-nums}
#sc-boq .empty{text-align:center;color:var(--ink-3);padding:34px 12px}
#sc-boq kbd{font-size:11.5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;background:var(--surface-2);color:var(--ink-3)}
#sc-boq .card{background:var(--surface);border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow);padding:28px;width:100%;max-width:390px}
#sc-boq .logo{width:64px;height:64px;margin:0 auto 14px;background:url(../img/logo-header.png) center/contain no-repeat}
#sc-boq .f{display:block;font-size:12.5px;color:var(--ink-2);margin:12px 0 5px;font-weight:500}
#sc-boq .inp{font-family:inherit;font-size:14.5px;width:100%;padding:10px 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
#sc-boq .inp:focus{outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);border-color:var(--brand)}
#sc-boq .err{background:var(--crit-bg);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 30%,transparent);
  border-radius:9px;padding:9px 12px;font-size:13.5px;margin-top:12px}
/* ── ปุ่ม ── */
#sc-boq .btn{font-family:inherit;font-size:14px;border-radius:9px;padding:9px 15px;border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#sc-boq .btn:disabled{opacity:.55;cursor:not-allowed}
#sc-boq .btn-primary{background:var(--brand);color:var(--on-brand);font-weight:500}
#sc-boq .btn-primary:hover:not(:disabled){background:var(--brand-dark)}
#sc-boq .btn-outline{background:transparent;color:var(--brand);border-color:var(--brand-line)}
#sc-boq .btn-outline:hover{background:var(--brand-soft)}
#sc-boq .btn-ghost{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
#sc-boq .btn-ghost:hover{color:var(--ink)}
#sc-boq .btn-sm{font-size:12.5px;padding:5px 10px}
#sc-boq .btn-wide{width:100%;justify-content:center;padding:11px}
#sc-boq .mark-logo{width:32px;height:32px;background:url(../img/logo-header.png) center/contain no-repeat;flex:none}
#sc-boq .chip{font-size:12.5px;padding:3px 11px;border-radius:20px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
#sc-boq .chip-ok{background:var(--good-bg);color:var(--good);border-color:color-mix(in srgb,var(--good) 28%,transparent)}
#sc-boq .chip-warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
#sc-boq .chip-err{background:var(--crit-bg);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
#sc-boq .chip-busy{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 28%,transparent)}
#sc-boq .seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
#sc-boq .seg button{font-family:inherit;font-size:12.5px;border:0;background:transparent;color:var(--ink-2);
  padding:4px 10px;border-radius:7px;cursor:pointer}
#sc-boq .seg button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
/* ── เมนู ── */
#sc-boq .nav{display:flex;gap:6px;padding:10px 16px 0;flex-wrap:wrap;background:var(--surface);
  border-bottom:1px solid var(--line)}
#sc-boq .nav button{font-family:inherit;font-size:14px;background:transparent;border:0;
  border-bottom:2px solid transparent;padding:9px 14px;cursor:pointer;color:var(--ink-2)}
#sc-boq .nav button[aria-current="page"]{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
#sc-boq .wrap{max-width:1400px;margin:0 auto;padding:18px 16px 60px}
#sc-boq .panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
#sc-boq .row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
#sc-boq .row > div{min-width:120px}
#sc-boq .grow{flex:1;min-width:220px}
/* ── ตาราง ── */
#sc-boq .scroll{overflow-x:auto}
#sc-boq table{width:100%;border-collapse:collapse;font-size:13.5px}
#sc-boq th{text-align:left;font-weight:600;font-size:12.5px;color:var(--ink-2);padding:8px 9px;
  border-bottom:2px solid var(--line);background:var(--surface-2);white-space:nowrap}
#sc-boq td{padding:6px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
#sc-boq tbody tr:hover{background:var(--brand-soft)}
#sc-boq tr.grp td{background:var(--brand-soft);font-weight:600;color:var(--brand-dark);font-size:13px}
#sc-boq tr.grp:hover td{background:var(--brand-soft)}
#sc-boq .tag{font-size:11.5px;padding:2px 7px;border-radius:5px;background:var(--brand-soft);
  color:var(--brand-dark);border:1px solid var(--brand-line);white-space:nowrap}
#sc-boq input.cell{font-family:inherit;font-size:13.5px;width:88px;padding:4px 7px;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
#sc-boq input.cell:focus{outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);border-color:var(--brand)}
#sc-boq .badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;
  padding:2px 9px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
#sc-boq .b-good{background:var(--good-bg);color:var(--good);border-color:color-mix(in srgb,var(--good) 26%,transparent)}
#sc-boq .b-warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
#sc-boq .b-crit{background:var(--crit-bg);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
#sc-boq .b-mute{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
#sc-boq .mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  font-size:11.5px;font-weight:700;border:1px solid;cursor:help}
#sc-boq .mark.f{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
#sc-boq .mark.e{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
#sc-boq .mark.m{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
/* ── ค้นหาเพิ่มเร็ว ── */
#sc-boq .qbox{position:relative}
#sc-boq #quick-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);overflow:hidden;max-height:320px;overflow-y:auto}
#sc-boq .qr{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
  padding:8px 12px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--line)}
#sc-boq .qr:last-child{border-bottom:0}
#sc-boq .qr.on, #sc-boq .qr:hover{background:var(--brand-soft)}
#sc-boq .qr-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── ยอดสรุป ── */
#sc-boq .totals{display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:13.5px;
  font-variant-numeric:tabular-nums;min-width:280px}
#sc-boq .totals .big{font-size:17px;font-weight:700;border-top:1px solid var(--line);padding-top:8px}
#sc-boq .totals .lbl-big{border-top:1px solid var(--line);padding-top:8px;font-weight:600}
#sc-boq .note{border-left:3px solid var(--brand);background:var(--brand-soft);padding:10px 13px;
  border-radius:0 9px 9px 0;font-size:13.5px;margin-top:12px}
#sc-boq .note-warn{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
#sc-boq .note-crit{border-left-color:var(--crit);background:var(--crit-bg);color:var(--crit)}
/* ══════════ เอกสาร ══════════
   กระดาษเป็นสีขาวเสมอ ไม่ว่าจะเลือกธีมไหน — เอกสารต้องพิมพ์ออกมาเหมือนกันทุกเครื่อง */
#sc-boq .stage{background:#8a8f8c;padding:18px;border-radius:11px;overflow-x:auto}
#sc-boq .paper{background:#fff;color:#16181a;width:210mm;min-height:297mm;margin:0 auto;padding:16mm 14mm;
  box-shadow:0 6px 26px rgba(0,0,0,.28);font-size:12.4px;line-height:1.55}
#sc-boq .paper *{box-sizing:border-box}
#sc-boq .paper table{border-collapse:collapse;width:100%}
#sc-boq .paper .num{text-align:right;font-variant-numeric:tabular-nums}
#sc-boq .paper .mid{text-align:center;color:#77807c;padding:26px}
#sc-boq .paper .b{font-weight:700}
#sc-boq .paper .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
#sc-boq .d-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  border-bottom:2px solid #2e7d32;padding-bottom:11px}
#sc-boq .d-brand{display:flex;gap:12px;align-items:flex-start}
#sc-boq .d-logo{width:56px;height:56px;object-fit:contain}
#sc-boq .d-co{font-size:15.5px;font-weight:700;color:#1b5e20}
#sc-boq .d-co-sub{font-size:11.4px;color:#5a625e}
#sc-boq .d-meta{text-align:right;min-width:190px}
#sc-boq .d-title{font-size:19px;font-weight:700;color:#1b5e20;margin-bottom:5px}
#sc-boq .d-metatab{font-size:11.8px}
#sc-boq .d-metatab td{padding:1px 0;border:0}
#sc-boq .d-metatab td:first-child{color:#5a625e;text-align:left;padding-right:10px}
#sc-boq .d-metatab td:last-child{text-align:right;font-weight:600}
#sc-boq .d-cust{margin:11px 0 13px;font-size:12.2px;background:#f4f8f5;border:1px solid #dfe8e2;border-radius:6px}
#sc-boq .d-cust td{padding:5px 9px;border:0}
#sc-boq .d-cust td.k{color:#5a625e;width:82px;white-space:nowrap}
#sc-boq .d-tab{margin-top:6px;font-size:12.2px}
#sc-boq .d-tab th{background:#e8f5e9;color:#1b5e20;font-weight:600;text-align:left;
  padding:7px 8px;border:1px solid #cfe0d3}
#sc-boq .d-tab td{padding:6px 8px;border:1px solid #e2e8e4;vertical-align:top}
#sc-boq .d-tab tr.g td{background:#f1f6f2;font-weight:600;color:#1b5e20}
#sc-boq .d-boq td{padding:4px 8px}
#sc-boq .d-total{width:auto;margin:11px 0 0 auto;font-size:12.4px;min-width:290px}
#sc-boq .d-total td{padding:3px 8px;border:0}
#sc-boq .d-total td:first-child{color:#5a625e}
#sc-boq .d-total tr.grand td{border-top:1px solid #c8d3cc;font-size:13.6px;padding-top:6px}
#sc-boq .d-baht{text-align:right;font-style:italic;color:#3f4a45;margin-top:3px}
#sc-boq .d-perwatt{text-align:right;color:#1b5e20;font-weight:600;margin-top:2px}
#sc-boq .d-sec{margin:14px 0 5px;font-weight:700;color:#1b5e20;border-left:3px solid #2e7d32;padding-left:8px}
#sc-boq .d-pay{font-size:12.2px}
#sc-boq .d-pay th{background:#e8f5e9;color:#1b5e20;padding:6px 8px;border:1px solid #cfe0d3;text-align:left}
#sc-boq .d-pay td{padding:5px 8px;border:1px solid #e2e8e4}
#sc-boq .d-pay tr.sum td{background:#f4f8f5;font-weight:700}
#sc-boq .d-bank{background:#f4f8f5;border:1px solid #dfe8e2;border-radius:6px;padding:8px 11px;font-size:12.2px}
#sc-boq .d-inc, #sc-boq .d-note{margin:0;padding-left:20px;font-size:12.2px}
#sc-boq .d-inc li, #sc-boq .d-note li{margin:2px 0}
#sc-boq .d-soft{color:#77807c;font-size:11.2px}
#sc-boq .d-warn{background:#fdeaef;border:1px solid #f3c2ce;color:#a3183a;border-radius:6px;
  padding:8px 11px;margin-top:10px;font-size:12.2px}
#sc-boq .d-sign{margin-top:22px;font-size:12px;text-align:center;color:#5a625e}
#sc-boq .d-sign td{width:50%;padding:0 26px;border:0}
#sc-boq .d-sign .line{border-bottom:1px dotted #9aa5a0;height:44px;margin-bottom:5px}
@media print{
  .printing #sc-boq{background:#fff;margin:0}
  #sc-boq .paper{width:auto;min-height:0;box-shadow:none;padding:10mm 8mm}
  #sc-boq .d-tab tr, #sc-boq .d-pay tr{break-inside:avoid}
  #sc-boq .d-sec{break-after:avoid}
}
/* ══════════ ตั้งค่า ══════════ */
#sc-boq .set-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px}
#sc-boq .set-h h3{font-size:16px}
#sc-boq .set-h .btn{margin-left:auto}
#sc-boq .set-h .btn + .btn{margin-left:0}
#sc-boq .preset{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:11px;
  background:var(--surface-2)}
#sc-boq .preset-h{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
#sc-boq .preset-h input{max-width:220px}
#sc-boq input.cell.w{width:100%;max-width:none}
#sc-boq .saved{color:var(--good);font-size:12.5px}
/* ══════════ นำเข้า CSV ══════════ */
#sc-boq .drop{border:2px dashed var(--brand-line);border-radius:12px;background:var(--surface-2);
  padding:26px;text-align:center;cursor:pointer}
#sc-boq .drop.on{background:var(--brand-soft);border-color:var(--brand)}
#sc-boq .drop b{color:var(--brand);font-weight:600}
#sc-boq .imp-sec{margin-top:16px}
#sc-boq .imp-h{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
#sc-boq .imp-h h4{font-size:14px;margin:0}
#sc-boq .jump{color:var(--crit);font-weight:600}
#sc-boq .imp-line{color:var(--ink-3);font-size:12px;white-space:nowrap}
/* ══════════ ทำใหม่จากโครงการเก่า + เทียบ Rev. ══════════ */
#sc-boq dialog.dlg{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  color:var(--ink);padding:20px;max-width:640px;width:calc(100vw - 48px);box-shadow:0 18px 50px rgba(0,0,0,.25)}
#sc-boq dialog.dlg-wide{max-width:860px}
#sc-boq dialog.dlg::backdrop{background:rgba(0,0,0,.45)}
#sc-boq dialog.dlg h3{font-size:16px;margin-bottom:10px}
#sc-boq .dlg-body{max-height:min(62vh,560px);overflow:auto}
#sc-boq .dlg-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
#sc-boq .opt{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:13.5px}
#sc-boq .opt input{margin-top:3px}
#sc-boq .opt .soft{display:block}
#sc-boq .diff-add{color:var(--brand);font-weight:600}
#sc-boq .diff-del{color:var(--crit);font-weight:600;text-decoration:line-through}
#sc-boq .diff-chg{color:var(--warn);font-weight:600}