/* ══════════════════════════════════════════
   สไตล์เฉพาะแต่ละหน้า (โหลดหลัง layout.css)
   เฟส 3A — หน้าใบเสนอราคา (.qf)
     จอกว้าง ≥ 1100px : 2 คอลัมน์ · แผงขวาติดจอ
     จอแคบ  < 1100px : 3 ขั้น ลูกค้า › งาน › ราคา · แถบยอดรวมติดล่าง
   ══════════════════════════════════════════ */

/* ── หัวของแต่ละส่วน ── */
.qf-h{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.qf-h h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
.qf-no{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;flex-shrink:0;
       display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600}

/* ── แถวช่องกรอก ── */
.qf-row{display:grid;gap:10px;margin-bottom:13px}
.qf-row .field{margin-bottom:0}
.qf-2,.qf-when{grid-template-columns:1fr 1fr}
.qf-workdot{grid-template-columns:1fr 96px}
.qf-wide,.qf-span{grid-column:1 / -1}
.qf-qty{gap:13px}
.qf-gapt{margin-top:14px}
.qf-sec .qf-row:last-child{margin-bottom:0}

/* ── ลูกค้า (3B-1): ค้นหา · การ์ด · ช่องกรอก ── */
.qf-link{background:none;border:none;color:var(--blue);font-family:inherit;font-size:13px;font-weight:600;
         padding:6px 0;margin-top:4px;cursor:pointer}
.qf-ccard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;background:#F7F9FB;
          border:1px solid var(--line);border-radius:9px;padding:12px 13px}
.qf-cname{font-size:15px;font-weight:700;line-height:1.4}
.qf-cmeta{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.qf-cbtn{display:flex;gap:6px;align-items:flex-start}
.qf-cbtn button{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:6px 11px;
                font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.qf-cbtn button:active{background:var(--blue-soft)}
.qf-ctags{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
.qf-tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.qf-tag.blue{background:var(--blue-soft);color:var(--blue)}
.qf-tag.grey{background:#EDEFF2;color:#4E5864}
.qf-tag.amber{background:var(--amber-soft);color:#7A5A00}
.qf-cfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.qf-cfoot .hint{flex:1;min-width:160px;margin:0}
.qf-cfoot .qf-link{margin:0}
.qf-done{border:none;background:var(--blue);color:#fff;border-radius:7px;padding:8px 18px;font-family:inherit;
         font-size:13.5px;font-weight:600;cursor:pointer}
.qf-wht{border:none;margin-top:12px;padding:9px 12px;background:var(--paper);border-radius:8px}

/* ── การ์ดเลือกรถ (3B-2) ── */
.qf-trkh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.qf-trkh span{font-size:11.5px;color:var(--muted)}
.qf-trucks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.qf-trk{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;min-width:0;
        background:var(--card);border:1.5px solid var(--line);border-radius:9px;padding:7px 9px;
        font-family:inherit;color:var(--ink);cursor:pointer}
.qf-trk b{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600}
.qf-trk span{font-size:12px;color:#3A434D}
.qf-trk small{font-size:11px;color:var(--green);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-trk.busy{background:#FBF7EC}
.qf-trk.busy small{color:#8A5A00}
.qf-trk.on{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.qf-trk:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.qf-trkinfo{font-size:13px;font-weight:600;color:var(--ink);margin-top:9px}
.qf-trkf .hint{margin-top:2px}
#qTrkWarn{white-space:pre-line}
.qf-fixed{border:1.5px solid var(--line);border-radius:8px;background:var(--paper);padding:11px;font-size:15px;
          font-weight:500;color:#3A434D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── ส่วนที่พับได้ (④ และข้อมูลบนเอกสาร) ── */
.qf-foldcard{padding:0}
.qf-foldh{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;text-align:left;
          padding:14px 16px;font-family:inherit;color:var(--ink);cursor:pointer;border-radius:10px}
.qf-foldt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qf-foldt b{font-size:14.5px;font-weight:700}
.qf-foldt span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-foldh .chev{color:var(--muted);font-size:12px;transition:transform .18s}
.qf-foldh.open .chev{transform:rotate(180deg)}
.qf-foldcard > .fold{padding:2px 16px 16px;border-top:1px solid var(--line)}
.qf-foldcard > .fold.show{padding-top:14px}

.qf-subt{margin:12px 0 0;padding:11px 13px;font-size:13.5px;background:var(--paper);border-color:transparent}
.qf-subf{padding:4px 2px 0}
.qf-subf .field:first-child{margin-top:8px}

/* ── ขั้น (มือถือ) ── */
.qf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;position:sticky;top:0;z-index:20;
          background:var(--paper);padding:4px 0 0;margin:-4px 0 12px}
.qf-steps button{background:none;border:none;font-family:inherit;font-size:13px;font-weight:500;color:var(--muted);
                 padding:8px 2px 10px;cursor:pointer;box-shadow:inset 0 -3px 0 var(--line)}
.qf-steps button.done{color:var(--green);box-shadow:inset 0 -3px 0 var(--green)}
.qf-steps button.on{color:var(--blue);font-weight:700;box-shadow:inset 0 -3px 0 var(--blue)}

.qf-next{border:none;border-radius:8px;background:var(--blue);color:#fff;font-family:inherit;font-size:14px;
         font-weight:600;padding:12px 16px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.qf-next:active{background:#083D6E}

/* ── ขั้นของเอกสาร (3C) ── */
.qf-flowh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.qf-flowh span{font-size:12.5px;color:var(--muted);min-width:0}
.qf-flowh span.dirty{color:#8A5A00}
.qf-flowh .qf-link{margin:0;padding:2px 0;white-space:nowrap}
.qf-flowsteps{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11.5px;color:var(--muted)}
.qf-flowsteps i{font-style:normal;padding:2px 8px;border-radius:999px;background:#EDEFF2;white-space:nowrap}
.qf-flowsteps i.done{background:#E6F3EC;color:var(--green)}
.qf-flowsteps i.on{background:var(--ink);color:#fff;font-weight:600}
.qf-flowsteps b{font-weight:400;color:#B0B7BF}

/* ── แผงสรุป ── */
.qf-sumh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.qf-sumh h2{font-size:15px;font-weight:700}
.qf-sumh span{font-size:12px;color:var(--muted)}
.qf-fabtn{margin:0 0 12px;padding:14px;font-size:15px}
.qf-side .fa-box{margin:0 0 12px}

/* ── แท็บ ข้อความแจ้งทีม / เงื่อนไขท้ายใบ ── */
.qf-tabbar{display:flex;gap:18px;border-bottom:1px solid var(--line);margin:-4px 0 4px}
.qf-tabbar button{background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--muted);
                  padding:6px 0 9px;cursor:pointer}
.qf-tabbar button.on{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--blue)}
.qf-tabs .btn-primary{background:var(--blue-soft);color:var(--blue)}
.qf-tabs .btn-primary.done{background:var(--green);color:#fff}
.qf-tabs .switch{border-bottom:none}
.qf-terms{max-height:280px;overflow:auto;background:var(--paper);border-radius:8px;padding:11px 12px;
          font-size:12.5px;line-height:1.7;white-space:pre-wrap;color:#3A434D}

/* ── ปุ่มที่ใช้คีย์บอร์ดได้ ต้องเห็นว่าโฟกัสอยู่ตรงไหน ── */
.qf-steps button:focus-visible,.qf-foldh:focus-visible,.qf-tabbar button:focus-visible,
.qf-next:focus-visible,.qf .actions button:focus-visible,.qf-link:focus-visible,
.qf-cbtn button:focus-visible,.qf-done:focus-visible{outline:2px solid var(--blue);outline-offset:2px}


/* ══════════ จอแคบ: แบ่ง 3 ขั้น ══════════ */
@media (max-width:1099px){
  /* ขั้นที่ 1 เห็นเฉพาะลูกค้า · ขั้นที่ 2 เฉพาะงาน · ขั้นที่ 3 ส่วนราคาทั้งหมด + แผงสรุป */
  .qf[data-step="1"] .qf-main > :not(.qs1),
  .qf[data-step="2"] .qf-main > :not(.qs2),
  .qf[data-step="3"] .qf-main > .qs1,
  .qf[data-step="3"] .qf-main > .qs2,
  .qf[data-step="1"] .qf-side > :not(.totalbar),
  .qf[data-step="2"] .qf-side > :not(.totalbar){display:none}

  /* แถบล่าง: ขั้น 1–2 = ยอด + ปุ่มถัดไป · ขั้น 3 = ยอด + ปุ่มบันทึก/แจ้งทีม/ดูตัวอย่าง */
  .qf[data-step="1"] .totalbar .actions,
  .qf[data-step="2"] .totalbar .actions,
  .qf[data-step="3"] #qNext{display:none}
  .qf[data-step="1"] .total-row,
  .qf[data-step="2"] .total-row{margin-bottom:0}
  .qf .totalbar{padding:9px 14px 11px}
  .qf .total-num{font-size:22px}
}

/* ══════════ จอกว้าง: 2 คอลัมน์ ══════════ */
@media (min-width:1100px){
  .wrap:has(#pageQuote:not([hidden])){max-width:1180px}
  body.quote-on{padding-bottom:26px}

  .qf-steps{display:none}
  .qf-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}

  /* ช่องกรอกกระชับขึ้น ให้ทั้งฟอร์มอยู่ในจอเดียวให้มากที่สุด */
  .qf-main input,.qf-main select,.qf-main textarea{padding:9px 11px}
  .qf-main select{padding-right:36px}
  .qf-main .field{margin-bottom:11px}
  .qf-main .qf-row .field{margin-bottom:0}
  .qf-main textarea{min-height:48px}

  /* ช่องกรอกลูกค้า: ชื่อ (เต็มแถว)  /  เลขภาษี | เบอร์โทร  /  ที่อยู่ (เต็มแถว) · 13 ต.ค. เพิ่มเบอร์ */
  .qf-cust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"name name" "tax tel" "addr addr";gap:0 12px}
  .qf-c-name{grid-area:name}
  .qf-c-tax{grid-area:tax}
  .qf-c-tel{grid-area:tel}
  .qf-c-addr{grid-area:addr}
  .qf-when{grid-template-columns:170px 130px 1fr}
  .qf-when .qf-wide{grid-column:auto}
  .qf-trucks{grid-template-columns:repeat(6,minmax(0,1fr))}
  .qf-fixed{padding:9px 11px}
  #qPumpField{max-width:360px}
  .qf-qty{grid-template-columns:1fr 1fr;gap:12px 16px}

  /* แผงขวาติดจอ · เรียงใหม่: สรุป → ยอดชำระ → ส่ง FlowAccount → บันทึก/ดูตัวอย่าง → ผลการส่ง → แท็บ */
  /* สูงไม่เกินจอลบหัวหน้า/ท้ายหน้า — ถ้าสูงกว่านี้ ตอนเลื่อนสุดหน้าแผงจะถูกดันขึ้นจนหัวข้อหาย */
  .qf-side{position:sticky;top:14px;display:flex;flex-direction:column;gap:10px;
           max-height:calc(100vh - 130px);overflow-y:auto;padding-bottom:2px}
  .qf-side .preview{font-size:13px;line-height:1.7;max-height:230px;overflow:auto}
  .qf-side > .card,.qf-side .fa-box{margin:0}
  .qf-side .totalbar,.qf-side .totalbar-inner{display:contents}
  .qf-flow{order:0}
  .qf-sum{order:1}
  .qf-side .total-row{order:2}
  .qf-fabtn{order:3;margin:0}
  .qf-side .actions{order:4}
  .qf-side .fa-box{order:5}
  .qf-tabs{order:6}

  .qf-side .total-row{background:var(--ink);color:#fff;border-radius:9px;padding:11px 14px;margin:0}
  .qf-side .total-cap{color:rgba(255,255,255,.62)}
  .qf-side .total-num{color:#fff;font-size:24px}
  .qf-side .total-num .baht{color:rgba(255,255,255,.6)}

  #qNext,#aTeam{display:none}        /* คัดลอกแจ้งทีมอยู่ในแท็บแล้ว */
  .qf-side .actions{grid-template-columns:1fr 1fr}
  .qf-side .actions button{background:var(--card);color:var(--ink);border:1.5px solid var(--line);padding:10px 6px;font-size:13px}
  .qf-side .actions button br{display:none}
  .qf-side .actions button:active{background:var(--blue-soft)}
  .qf-side .actions button.done{background:var(--green);border-color:var(--green);color:#fff}
}

/* ── รายการใบเสนอราคา: ปุ่มขั้นถัดไป (3C) ── */
.q-act button.next{background:var(--blue);color:#fff}
.q-act button.next:active{background:#083D6E}

/* ══════════════════════════════════════════
   เฟส 4A — การ์ดงาน: แถบ 5 ขั้น · ปุ่มขั้นถัดไป · เมนู ⋯ · ยกเลิกพร้อมเหตุผล
   ══════════════════════════════════════════ */
.j-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.j-flow{display:flex;gap:3px}
.j-flow i{width:11px;height:4px;border-radius:2px;background:var(--line)}
.j-flow i.on{background:var(--green)}
.j-cx-why{font-size:11.5px;color:var(--red);margin-top:4px}

.j-act button.j-next{background:var(--blue);color:#fff;min-width:108px}
.j-act button.j-next:active{background:#083B6B}
.j-act button:disabled{opacity:.55;cursor:default}
.j-act button.j-more{margin-left:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);
                     padding:7px 13px;font-size:14px;line-height:1}
.j-act button.j-more.on{background:var(--blue-soft);color:var(--blue);border-color:var(--blue)}

.j-menu{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:6px;background:#F7F9FB;
        border:1px solid var(--line);border-radius:8px}
.j-menu button{border:none;background:none;text-align:left;font-family:inherit;font-size:13px;font-weight:600;
               color:var(--ink);padding:9px 10px;border-radius:6px;cursor:pointer}
.j-menu button:hover{background:var(--blue-soft);color:var(--blue)}
.j-menu button.danger{color:var(--red)}
.j-menu button.danger:hover{background:#FBEAEA;color:var(--red)}
.j-menu-empty{font-size:12.5px;color:var(--muted);padding:8px 10px}

.j-cx{margin-top:9px;padding:11px;border:1px solid #E9C3C5;background:#FDF5F5;border-radius:8px}
.j-cx b{display:block;font-size:13px;color:var(--red);margin-bottom:8px}
.j-cx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.j-cx .chip{font-family:inherit;font-size:12.5px;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.j-cx .chip.on{background:var(--red);border-color:var(--red);color:#fff}
.j-cx-txt{width:100%;font-size:13px}
.j-cx-act{display:flex;gap:6px;margin-top:9px}
.j-cx-act button{border:none;border-radius:7px;padding:8px 12px;font-family:inherit;font-size:12.5px;font-weight:600;
                 cursor:pointer;background:var(--card);color:var(--ink);border:1px solid var(--line)}
.j-cx-act button.j-cx-ok{background:var(--red);border-color:var(--red);color:#fff}

/* ══════════════════════════════════════════
   เฟส 4B — ตารางงาน: บอร์ดรถ (แถวละคัน × คอลัมน์ละวัน) + แผงรายละเอียด
     จอ ≥ 1100px : บอร์ด + แผงขวา 300px
     จอ < 1100px : แผงรายละเอียดเลื่อนออกมาจากขวา · บอร์ดเลื่อนซ้าย–ขวาได้
   ══════════════════════════════════════════ */
#jov .jv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--card);
             border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin:0 auto 12px}
.jv-seg{display:inline-flex;background:var(--paper);border-radius:8px;padding:3px}
.jv-seg button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
               padding:6px 12px;border-radius:6px;cursor:pointer}
.jv-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(16,21,28,.14)}
/* แจ้งเตือน: manager ทำแทนบทบาทอื่น (28 ก.ย.) */
.n-seg{display:flex;max-width:100%;overflow-x:auto;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.n-seg button{white-space:nowrap;flex-shrink:0}
.n-seg button b{font-size:11px;margin-left:3px;color:var(--blue)}
.n-seg button b.z{color:var(--muted);font-weight:500}
.n-cover{background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.55;margin-bottom:10px}
.jv-week{display:inline-flex;align-items:center;gap:6px}
.jv-week b{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;min-width:126px;text-align:center}
.jv-week button,.jv-btn{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:6px 10px;
                         font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.jv-btn.jv-book{background:var(--blue);border-color:var(--blue);color:#fff}
.jv-sum{font-size:12.5px;color:var(--muted)}
.jv-sum b{color:var(--ink)}
.jv-sp{flex:1}
.jv-legend{display:flex;gap:5px;flex-wrap:wrap}
.jv-legend i{font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;border-left:3px solid transparent}
.jv-status{display:none;font-size:13px}

/* สลับมุมมอง */
#jov.jv-v-board .jv-listwrap{display:none}
#jov.jv-v-list .jv-boardwrap,#jov.jv-v-list .jv-week,#jov.jv-v-list .jv-legend,#jov.jv-v-list .jv-sum{display:none}
#jov.jv-v-list .jv-status{display:inline}
#jov .jv-listwrap{display:block;max-width:680px;margin:0 auto}

/* สีตามสถานะ (งานบนบอร์ด + คำอธิบายสี) */
.jv-job.st-booked,.jv-legend .st-booked{background:var(--amber-soft);border-left-color:#B8860B;color:#5E4A0E}
.jv-job.st-confirmed,.jv-legend .st-confirmed{background:var(--blue-soft);border-left-color:var(--blue);color:#0B3A69}
.jv-job.st-working,.jv-legend .st-working{background:#ECE9F8;border-left-color:#5B4BB0;color:#3B2F80}
.jv-job.st-done,.jv-legend .st-done{background:#E6F3EC;border-left-color:var(--green);color:#1F4D33}
.jv-job.st-billed,.jv-job.st-paid,.jv-legend .st-billed{background:#F1F2F4;border-left-color:#8A949E;color:#46505B}
.j-tag.working{background:#ECE9F8;color:#5B4BB0}

/* บอร์ด */
.jv-boardwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
.jv-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.jv-board{display:grid;grid-template-columns:88px repeat(7,minmax(94px,1fr));font-size:11.5px;min-width:760px}
.jv-board.loading{opacity:.55}
.jv-board > div{border-right:1px solid #EEF0F3;border-bottom:1px solid #EEF0F3;padding:5px}
.jv-board .hd{background:#F6F7F9;font-weight:600;text-align:center;color:#46505B;padding:8px 4px;font-size:12px;white-space:nowrap}
.jv-board .hd.today{background:var(--blue);color:#fff}
.jv-board .rw{background:#F6F7F9;padding:8px}
.jv-board .rw b{display:block;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600}
.jv-board .rw small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.jv-board .rw,.jv-board .hd:first-child{position:sticky;left:0;z-index:1}   /* เลื่อนซ้าย–ขวาแล้วยังเห็นชื่อรถ */
.jv-board .cell{min-height:88px;display:flex;flex-direction:column;gap:4px}
.jv-board .cell.past{background:#FAFBFC}
.jv-board .cell.col-today{background:#F4F8FC}
.jv-board .cell.bookable{cursor:pointer}
.jv-board .cell.bookable:hover{background:#EEF4FA}
.jv-board .cell .add{margin:auto;color:var(--blue);font-size:11.5px;font-weight:600;opacity:0;transition:opacity .15s}
.jv-board .cell.bookable:hover .add{opacity:1}
@media (hover:none){ .jv-board .cell .add{opacity:.4} }
.jv-err{grid-column:1 / -1;padding:24px;color:var(--red);text-align:center}
.jv-job{display:block;width:100%;text-align:left;border:0;border-left:3px solid transparent;border-radius:6px;
        padding:4px 6px;font-family:inherit;font-size:11.5px;line-height:1.35;cursor:pointer}
.jv-job b{font-family:'IBM Plex Mono',monospace;font-weight:600}
.jv-job span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jv-job:hover{filter:brightness(.97)}
.jv-job.sel{box-shadow:0 0 0 2px var(--ink)}

/* แผงรายละเอียด */
.jv-detail{position:sticky;top:12px}
.jv-dcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px}
.jv-dh{display:flex;align-items:flex-start;gap:8px;margin-bottom:11px}
.jv-dh h4{flex:1;font-size:14px;font-weight:700;line-height:1.4}
.jv-x{display:none;border:1px solid var(--line);background:var(--card);border-radius:7px;width:30px;height:30px;
      font-size:13px;cursor:pointer;flex-shrink:0}
.jv-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:13px}
.jv-steps i{font-style:normal;font-size:10.5px;color:var(--muted);text-align:center;display:flex;flex-direction:column;
            align-items:center;gap:4px;white-space:nowrap}
.jv-steps em{display:block;width:100%;height:4px;border-radius:2px;background:var(--line)}
.jv-steps i.d em{background:var(--green)}
.jv-steps i.c em{background:var(--blue)}
.jv-steps i.c{color:var(--ink);font-weight:700}
.jv-kv{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px 8px;font-size:12.5px;margin-bottom:13px}
.jv-kv span{color:var(--muted)}
.jv-kv div{overflow-wrap:anywhere}
.jv-kv a{color:var(--blue);font-weight:600}
.jv-kv i{color:var(--muted)}
.jv-next{display:block;width:100%;border:none;border-radius:8px;background:var(--blue);color:#fff;font-family:inherit;
         font-size:14px;font-weight:700;padding:11px;cursor:pointer;margin-bottom:8px}
.jv-next:active{background:#083B6B}
.jv-next:disabled{opacity:.55;cursor:default}
.jv-dcard .j-act{margin-top:0}
.jv-empty b{display:block;margin-bottom:8px;font-size:14px}
.jv-empty p{font-size:12.5px;color:var(--muted);margin-top:8px}
.jv-count div{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px}
.jv-bd{display:none}

@media (min-width:1100px){
  .wrap:has(#jov.show.jv-v-board){max-width:1400px}
}
@media (max-width:1099px){
  .jv-boardwrap{grid-template-columns:minmax(0,1fr)}
  .jv-detail{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);z-index:140;background:var(--paper);
             padding:12px;overflow:auto;transform:translateX(102%);transition:transform .2s ease;
             box-shadow:-6px 0 30px rgba(16,21,28,.18)}
  #jov.jv-open .jv-detail{transform:none}
  #jov.jv-open .jv-bd{display:block;position:fixed;inset:0;background:rgba(16,21,28,.4);z-index:135}
  .jv-x{display:inline-block}
  .jv-detail .jv-empty{display:none}
}
@media (max-width:899px){
  .jv-legend,.jv-sum{display:none}
  .jv-week b{min-width:0}
  .jv-sp{display:none}
}
@media (prefers-reduced-motion:reduce){ .jv-detail{transition:none} }
.jv-kv .jv-cx{color:var(--red)}

/* ══════════════════════════════════════════
   เฟส 4B-2 — แถบงานค้างอัปเดต · มุมมองรายวัน (มือถือ) · ขั้นของงานในแผง
   ══════════════════════════════════════════ */
.jv-stale{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--amber-soft);border:1px solid #E7CF8E;
          border-radius:10px;padding:9px 12px;margin:0 0 12px;font-size:13px;color:#5E4A0E}
.jv-stale[hidden]{display:none}
.jv-stale span{flex:1;min-width:0}
.jv-stale button{border:1px solid #D9BB6A;background:var(--card);color:#5E4A0E;border-radius:7px;padding:6px 11px;
                 font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
#jov.jv-v-list .jv-stale{display:none}

/* มุมมองรายวัน — แสดงเฉพาะจอ < 900px */
.jv-dayview{display:none}
.jv-dstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:10px}
.jv-dbtn{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:6px 0 5px;font-family:inherit;
         display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--ink);min-width:0}
.jv-dbtn small{font-size:11px;color:var(--muted)}
.jv-dbtn b{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600}
.jv-dbtn i{font-style:normal;font-size:10px;color:var(--muted);white-space:nowrap}
.jv-dbtn.today{border-color:var(--blue)}
.jv-dbtn.today small{color:var(--blue);font-weight:700}
.jv-dbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.jv-dbtn.on small,.jv-dbtn.on i{color:#fff}
.jv-dhead{font-size:13px;font-weight:700;margin:2px 2px 8px}
.jv-trucks{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.jv-trow{display:grid;grid-template-columns:78px minmax(0,1fr);border-bottom:1px solid #EEF0F3}
.jv-trow:last-child{border-bottom:0}
.jv-tname{background:#F6F7F9;padding:9px 8px}
.jv-tname b{display:block;font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600}
.jv-tname small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.jv-tjobs{padding:6px;display:flex;flex-direction:column;gap:5px;justify-content:center;min-height:52px}
.jv-tjobs .jv-job{font-size:12.5px;padding:6px 8px}
.jv-tbook{border:1px dashed #B9C6D4;background:none;border-radius:7px;padding:9px;font-family:inherit;font-size:12.5px;
          font-weight:600;color:var(--blue);cursor:pointer;text-align:left}
.jv-tfree{font-size:12px;color:var(--muted);padding:0 4px}

@media (max-width:899px){
  .jv-scroll{display:none}
  .jv-dayview{display:block}
}

/* ขั้นของงาน (ในแผงรายละเอียด) */
.jv-hist{margin-top:13px;padding-top:11px;border-top:1px solid #EEF0F3}
.jv-hist > b{font-size:12.5px}
.jv-hist > em{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:6px}
.jv-tl{display:grid;margin-top:6px;font-size:12px}
.jv-tl div{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 0}
.jv-tl i{width:10px;height:10px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.jv-tl .d i{background:var(--green);border-color:var(--green)}
.jv-tl .c i{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.jv-tl .c span{font-weight:700}
.jv-tl .x i{background:var(--red);border-color:var(--red)}
.jv-tl .x span{color:var(--red)}
.jv-tl small{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:11px;white-space:nowrap}

/* ══════════════════════════════════════════
   เฟส 4C — จองคิว + ปฏิทินรถ
     จอ ≥ 1100px : ฟอร์มซ้าย · ปฏิทินรถ 5 คัน × 7 วัน ขวา (ติดจอ)
     จอ < 1100px : แถบ 7 วัน "ว่าง x/5" เหนือการ์ดรถ
   ══════════════════════════════════════════ */
#bov .bk-form{display:block;max-width:560px!important;margin:0 auto;width:100%}
.bk-cal{display:none}
.bk-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:4px 0 12px}
.bk-strip:empty{display:none}
.jv-dbtn.full i{color:var(--red)}
.jv-dbtn:disabled{opacity:.4;cursor:default}

.bk-done{margin-top:10px;padding:12px;border:1px solid #BFDCCB;background:#EEF7F1;border-radius:9px}
.bk-done[hidden]{display:none}
.bk-done > b{display:block;color:var(--green);font-size:13.5px}
.bk-done > p{font-size:12.5px;color:#2F4C3B;margin:3px 0 10px}
.bk-done-act{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bk-done-act button{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:9px 8px;font-family:inherit;
                    font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink)}
.bk-done-act .bk-go{grid-column:1 / -1;background:var(--green);border-color:var(--green);color:#fff}
#bSave:disabled{opacity:.6;cursor:default}

.bk-cal-h{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.bk-cal-h b{font-size:14px}
.bk-cal-h button{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:5px 10px;font-family:inherit;
                 font-weight:600;cursor:pointer;color:var(--ink)}
.bk-cal-l{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;min-width:122px;text-align:center}
.bk-grid{grid-template-columns:74px repeat(7,minmax(62px,1fr));min-width:590px;font-size:11px}
.bk-grid .cell{min-height:56px}
.bk-grid .hd.seld{box-shadow:inset 0 -3px 0 var(--blue)}
.bk-grid .cell.seld{background:#F4F8FC}
.bk-grid .cell.on{background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue)}
.bk-grid .cell .add{opacity:.4;color:var(--muted)}
.bk-grid .cell.bookable:hover .add{opacity:1;color:var(--blue)}
.bk-j{cursor:default;padding:3px 5px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-pick{margin:auto;color:var(--blue);font-weight:700;font-size:11px}
.bk-cal-hint{font-size:11.5px;color:var(--muted);margin-top:8px}

@media (min-width:1100px){
  .wrap:has(#bov.show){max-width:1400px}
  #bov .ov-bar{max-width:none}
  #bov .bk-wrap{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:14px;align-items:start}
  #bov .bk-form{max-width:none!important;margin:0}
  .bk-cal{display:block;position:sticky;top:12px;padding:12px;margin:0}
  .bk-strip{display:none}
}

/* ══════════════════════════════════════════
   เฟส 4D — แก้ / เลื่อนงาน (ใช้ฟอร์มจองคิว)
   ══════════════════════════════════════════ */
.bk-edit{display:flex;align-items:flex-start;gap:10px;background:#FFF8E6;border:1px solid #E7CF8E;border-radius:10px;
         padding:11px 12px;margin-bottom:12px}
.bk-edit[hidden]{display:none}
.bk-edit-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:#5E4A0E}
.bk-edit-m b{font-size:13.5px;color:var(--ink)}
.bk-edit button{border:1px solid #D9BB6A;background:var(--card);border-radius:7px;padding:7px 10px;font-family:inherit;
                font-size:12.5px;font-weight:600;cursor:pointer;color:#5E4A0E;white-space:nowrap}
.bk-warn{display:block;font-size:12px;color:#8A5A00;font-weight:600}
.bk-warn[hidden]{display:none}
.bk-self{border:1.5px dashed #B8860B;border-radius:6px;color:#8A5A00;background:#FFFBEF;font-weight:600;text-align:center}
#bov.bk-editing #bSave{background:#8A5A00;border-color:#8A5A00}

/* ══════════════════════════════════════════
   เฟส 5B — ลูกหนี้: แถบสรุปอายุหนี้ · 3 แท็บ · ตาราง (คอม) / การ์ด (มือถือ) · แผงรายละเอียด
     จอ ≥ 1280px : ตาราง · กดแถวแล้วแผงขวา 340px (ซ่อนคอลัมน์ที่แผงแสดงอยู่แล้ว)
     จอ 900–1279 : ตาราง · แผงเลื่อนออกจากขวา
     จอ < 900px  : การ์ด · แผงเลื่อนออกจากขวา · แถบสรุปเลื่อนซ้าย–ขวาได้
   ══════════════════════════════════════════ */
.ar-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.ar-sb{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left;background:var(--card);border:1px solid var(--line);
       border-radius:10px;padding:9px 12px;font-family:inherit;color:var(--ink);cursor:pointer}
.ar-sb span{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-sb b{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600}
.ar-sb i{font-style:normal;font-size:11.5px;color:var(--muted)}
.ar-sb.late b{color:#9A4A00}
.ar-sb.late2 b{color:var(--red)}
.ar-sb.zero{opacity:.55}
.ar-sb.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
#rov .ar-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
             border-radius:10px;padding:9px 11px;margin-bottom:10px}
#rov .ar-bar select{width:auto;padding:7px 9px;font-size:13px}
#rov .ar-bar input{flex:1 1 180px;width:auto;min-width:0;padding:7px 10px;font-size:13px}
#rov:not(.ar-t-list) #rStat,#rov:not(.ar-t-list) #rSort{display:none}
.ar-n{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#ECE9F8;color:#5B4BB0;font-size:11px;text-align:center}
.ar-n:empty{display:none}
.ar-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ar-chip{border:1px solid var(--blue);background:var(--blue-soft);color:var(--blue);border-radius:20px;padding:4px 11px;
         font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.ar-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}

/* ตาราง */
.ar-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.ar-tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:900px}
.ar-tbl th{background:#F6F7F9;color:#46505B;font-size:12px;font-weight:600;text-align:left;padding:8px 9px;
           border-bottom:1px solid var(--line);white-space:nowrap}
.ar-tbl td{padding:8px 9px;border-bottom:1px solid #EEF0F3;vertical-align:top}
.ar-tbl tbody tr{cursor:pointer}
.ar-tbl tbody tr:hover td{background:#F7F9FB}
.ar-tbl tbody tr.sel td{background:var(--blue-soft)}
.ar-tbl .n,.ar-tbl th.n{text-align:right;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.ar-tbl th.n{font-family:inherit}
.ar-tbl .b{font-weight:700}
.ar-tbl .mute{color:var(--muted)}
.ar-tbl small{display:block;color:var(--muted);font-size:11px;margin-top:1px;white-space:nowrap}
.ar-tbl .ar-dt{white-space:nowrap}
.ar-c{max-width:250px}
.ar-c b,.ar-c small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-c b{font-weight:600}
.ar-tbl td.ar-stc{min-width:96px}
.ar-tbl td.ar-stc .ar-tag.part{margin:3px 0 0}
.ar-tbl tfoot td{background:#F6F7F9;font-weight:700;border-top:1px solid var(--line);border-bottom:none}

/* ป้าย */
.ar-st{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.ar-st.wait{background:#F1F2F4;color:#46505B}
.ar-st.soon{background:var(--amber-soft);color:#8A5A00}
.ar-st.late{background:#FDEBD7;color:#9A4A00}
.ar-st.late2{background:#FBEAEA;color:var(--red)}
.ar-st.paid{background:#E6F3EC;color:var(--green)}
.ar-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;white-space:nowrap}
.ar-tag.un{background:#ECE9F8;color:#5B4BB0}
.ar-tag.part{background:var(--amber-soft);color:#8A5A00;margin-left:4px}

/* การ์ด (มือถือ) */
.ar-cards{display:none}
.ar-card{background:var(--card);border:1px solid var(--line);border-left:3px solid #C9CED5;border-radius:10px;
         padding:11px 12px;margin-bottom:8px;cursor:pointer}
.ar-card.soon{border-left-color:var(--amber)}
.ar-card.late{border-left-color:#D9822B}
.ar-card.late2{border-left-color:var(--red)}
.ar-card.paid{border-left-color:var(--green);opacity:.72}
.ar-card.sel{box-shadow:0 0 0 2px var(--blue)}
.ar-ct{display:flex;align-items:flex-start;gap:8px}
.ar-ct b{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-cm{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-cf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px;font-size:12px;color:var(--muted)}
.ar-cf span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-cf b{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--ink);white-space:nowrap}
.ar-cards-sum{text-align:right;font-size:12.5px;color:var(--muted);padding:2px 4px 8px}
.ar-cards-sum b{color:var(--ink);font-family:'IBM Plex Mono',monospace}

/* รายลูกค้า · ยังไม่มียอด */
.ar-li{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;
       padding:10px 12px;margin-bottom:8px;cursor:pointer}
.ar-li.noq{cursor:default;flex-wrap:wrap}
.ar-li:not(.noq):hover{background:#F7F9FB}
.ar-li-m{flex:1;min-width:0}
.ar-li-m b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-li-m span{display:block;font-size:12px;color:var(--muted)}
.ar-li-n{text-align:right;white-space:nowrap}
.ar-li-n b{display:block;font-family:'IBM Plex Mono',monospace;font-size:14.5px}
.ar-li-n span{font-size:11.5px;color:var(--red);font-weight:600}
.ar-li-a{display:flex;gap:6px;flex-wrap:wrap}
.ar-note{font-size:12.5px;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:10px;
         padding:9px 12px;margin-bottom:8px}

/* แผงรายละเอียด */
.ar-detail{display:none}
.ar-bd{display:none}
.ar-x{display:inline-block}
.ar-dst{margin:-4px 0 10px}
.ar-money{border-top:1px solid var(--line);padding-top:8px;margin-bottom:12px}
.ar-money div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0}
.ar-money span{color:var(--muted)}
.ar-money b{font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap}
.ar-money .sub{border-top:1px dashed var(--line);margin-top:3px;padding-top:6px}
.ar-money .sub span{color:var(--ink);font-weight:600}
.ar-money .tot{border-top:1px solid var(--line);margin-top:4px;padding-top:7px;font-size:14.5px}
.ar-money .tot span{color:var(--ink);font-weight:700}
.ar-money .tot b{font-weight:700;color:var(--red)}
.ar-acts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ar-hist h5{font-size:12.5px;font-weight:700;margin-bottom:4px}
.ar-h{border-top:1px solid #EEF0F3;padding:7px 0;font-size:12.5px}
.ar-h1{display:flex;justify-content:space-between;gap:8px}
.ar-h1 b{font-family:'IBM Plex Mono',monospace}
.ar-h2{color:var(--muted);font-size:12px;margin-top:1px;overflow-wrap:anywhere}
.ar-h.void .ar-h1{text-decoration:line-through;opacity:.55}
.ar-h em{color:var(--red);font-style:normal;font-weight:600}
.ar-hmute{font-size:12.5px;color:var(--muted);padding:6px 0}
.ar-slip{margin-top:5px;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 9px;
         font-family:inherit;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer}

@media (min-width:1100px){
  .wrap:has(#rov.show){max-width:1400px}
}
@media (min-width:1280px){
  #rov.ar-open .ar-wrap{grid-template-columns:minmax(0,1fr) 340px}
  #rov.ar-open .ar-detail{display:block;position:sticky;top:12px}
  /* แผงเปิด → ซ่อนคอลัมน์ที่แผงแสดงอยู่แล้ว ให้คอลัมน์ "ค้าง" ไม่หลุดจอ */
  #rov.ar-open .ar-tbl .c-opt{display:none}
  #rov.ar-open .ar-tbl{min-width:0}
  #rov.ar-open .ar-c{max-width:190px}
  #rov.ar-open .ar-tbl small{white-space:normal}
}
@media (max-width:1279px){
  .ar-detail{display:block;position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:140;background:var(--paper);
             padding:12px;overflow:auto;transform:translateX(102%);transition:transform .2s ease;
             box-shadow:-6px 0 30px rgba(16,21,28,.18)}
  #rov.ar-open .ar-detail{transform:none}
  #rov.ar-open .ar-bd{display:block;position:fixed;inset:0;background:rgba(16,21,28,.4);z-index:135}
}
@media (max-width:899px){
  .ar-strip{display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .ar-sb{flex:0 0 136px}
  .ar-scroll{display:none}
  .ar-cards{display:block}
  /* ช่องเลือก/ค้นหา 16px กัน iPhone ซูมหน้าเองตอนแตะ */
  #rov .ar-bar select,#rov .ar-bar input{font-size:16px}
  #rov .ar-bar select{flex:1 1 140px}
  #rov .ar-bar input{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){ .ar-detail{transition:none} }

/* ══════════════════════════════════════════
   เฟส 5C — กล่องรับเงินใหม่ (#pov) · ยกเลิกรายการรับเงิน
   ══════════════════════════════════════════ */
#pov{z-index:150}                                   /* ต้องทับแผงลูกหนี้ (z-index 140) บนมือถือ */
.p-it{border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:9px;background:var(--card)}
.p-it.off{background:#F7F8FA}
.p-ith{display:flex;align-items:flex-start;gap:9px}
.p-ith input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--blue)}
.p-ith span{flex:1;min-width:0}
.p-ith b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-ith small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-ith em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;white-space:nowrap}
.p-g{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.p-g label{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.p-g input{margin-top:4px;font-family:'IBM Plex Mono',monospace;text-align:right}
.p-more{margin-top:8px;border:none;background:none;padding:2px 0;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer}
.p-res{margin-top:8px;font-size:12.5px;font-weight:600;border-radius:7px;padding:6px 9px}
.p-res.ok{background:#E6F3EC;color:var(--green)}
.p-res.part{background:var(--amber-soft);color:#8A5A00}
.p-res.warn{background:#FBEAEA;color:var(--red)}
.p-others{margin:-2px 0 12px}
.p-others:empty{display:none}
.p-oh{font-size:12px;color:var(--muted);margin-bottom:6px}
.p-oi{display:flex;align-items:center;gap:9px;border:1px dashed var(--line);border-radius:9px;padding:8px 10px;margin-bottom:6px;cursor:pointer}
.p-oi input{width:18px;height:18px;flex-shrink:0;accent-color:var(--blue)}
.p-oi span{flex:1;min-width:0}
.p-oi b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-oi small{display:block;font-size:11.5px;color:var(--muted)}
.p-oi em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12.5px;white-space:nowrap}
.p-sum{background:var(--blue-soft);border-radius:9px;padding:10px 12px;margin:4px 0 12px}
.p-sum div{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:2px 0}
.p-sum b{font-family:'IBM Plex Mono',monospace;font-size:14.5px}
.q-act button.pay{color:var(--green);border-color:#9CCBB0}

/* ยกเลิกรายการรับเงิน (ในแผงลูกหนี้) */
.ar-hb{display:flex;flex-wrap:wrap;gap:6px}
.ar-void{color:var(--red)}
.ar-vf{margin-top:8px;background:#FFF6F6;border:1px solid #F0CACA;border-radius:9px;padding:9px;display:flex;flex-direction:column;gap:7px}
.ar-vf select,.ar-vf input{padding:8px;font-size:13px}
.ar-vwarn{font-size:12px;font-weight:700;color:var(--red)}
.ar-vb{display:flex;gap:6px}
.ar-vok{background:var(--red);border-color:var(--red);color:#fff}
.ar-vhint{font-size:11.5px;color:var(--muted)}
@media (max-width:899px){ .ar-vf select,.ar-vf input{font-size:16px} }

/* ═══ 6B · แจ้งทีม + เหตุผลไม่ได้งาน ═══ */
.j-ntf{font-size:11.5px;font-weight:600;margin-top:4px}
.j-ntf.ok{color:var(--green)}
.j-ntf.soon{color:#8A5A00}
.j-ntf.no{color:var(--muted);font-weight:500}
.jv-kv .j-ntf{margin-top:0;font-size:13px}
.q-why{margin-top:10px}
.q-why-hint{font-size:11.5px;color:var(--muted);margin:6px 0 0}
/* ช่องพิมพ์เหตุผลบนมือถือ 16px กัน iPhone ซูมหน้าเอง */
@media (max-width:899px){ .j-cx-txt{font-size:16px} }

/* ══════════════════════════════════════════
   6D · หน้าภาพรวม (.ow · owner / manager / accounting)
     ≥ 1100px : สายงานเต็มแถว · ซ้าย = ต้องจัดการ + ใครทำอะไร · ขวา = คิวรถ + ลูกหนี้ + ยอดรายวัน
     < 1100px : แถวเดียว เรียงด้วย order (สายงาน → ต้องจัดการ → ลูกหนี้ → คิวรถ → ยอดรายวัน → ใครทำอะไร)
     <  700px : สายงานเรียงแนวตั้ง
   ชื่อ .ow- (.ov- ถูกใช้แล้วกับกล่องดูตัวอย่างเอกสาร)
   ══════════════════════════════════════════ */
#oov .ow-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--card);
             border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:12px}
#oov .jv-week b{min-width:0;padding:0 2px}
#owNext:disabled{opacity:.35;cursor:default}
.ow-make{display:inline-flex;gap:6px}
.ow-note{display:flex;flex-direction:column;gap:1px;background:var(--amber-soft);border:1px solid #E8D39A;border-radius:10px;
         padding:9px 13px;margin-bottom:12px;font-size:13px;color:#5E4A0E}
.ow-note b{font-weight:700}
.ow-note.info{background:var(--blue-soft);border-color:#C4D6EA;color:#0B3A69}
#owBody.loading{opacity:.55;transition:opacity .15s}
.ow-stale{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:#FFF6F6;border:1px solid #F0CACA;border-radius:10px;
          padding:8px 12px;margin-bottom:12px;font-size:13px;color:var(--red)}

.ow-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ow-col{display:contents}
.ow-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.ow-flow{order:1}
.ow-todo{order:2}
.ow-ar{order:3}
.ow-board{order:4}
.ow-chart{order:5}
.ow-people{order:6}
.ow-store{order:7}
/* ข้อความส่งลูกค้า ในใบสำรวจ (1 ต.ค.) */
.sv-cmsg{margin-top:14px}
.sv-cact{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ow-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:12px}
.ow-h h2{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.ow-h small{font-size:12px;color:var(--muted)}
.ow-cnt{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--amber-soft);color:#8A5A00;
        font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;text-align:center;line-height:20px}
.ow-cnt.red{background:#FBE9EA;color:var(--red)}
.ow-err{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ow-err b{color:var(--red)}
.ow-err span{font-size:13px;color:var(--muted)}

/* ── สายงาน ── */
.ow-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:9px}
.ow-st{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;text-align:left;
       background:none;border:none;border-right:1px solid var(--line);padding:11px 14px 12px;font-family:inherit;color:var(--ink)}
.ow-st:last-child{border-right:0}
button.ow-st{cursor:pointer}
.ow-st:not(:last-child)::after{content:"›";position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:1;
       width:17px;height:17px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--muted);
       font-size:13px;line-height:14px;text-align:center}
.ow-st-l{font-size:12.5px;font-weight:600;color:var(--muted)}
.ow-st-n{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.ow-st-n i{font-style:normal;font-family:'IBM Plex Sans Thai',system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--muted);margin-left:5px}
.ow-st-v{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ow-st small{font-size:11.5px;font-weight:600;color:#8A5A00;margin-top:2px}
.ow-st-received .ow-st-n{color:var(--green)}
.ow-st.zero .ow-st-n{color:#B8BFC7}
.ow-lost{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:11px;font-size:13px}
.ow-lost-h{font-size:12px;font-weight:600;color:var(--muted)}
.ow-lost-i{background:none;border:none;padding:0;font-family:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.ow-lost-i b{font-weight:600}
.ow-lost-i span{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted)}
.ow-lost-i small{font-size:12px;color:var(--muted)}
.ow-lost-none{color:var(--muted)}

/* ── ต้องจัดการ ── */
.ow-td{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 0;border-top:1px solid #EEF0F3}
.ow-h + .ow-td{border-top:0;padding-top:0}
.ow-sev{align-self:stretch;border-radius:2px;background:#B8BFC7}
.sev-red .ow-sev{background:var(--red)}
.sev-amber .ow-sev{background:#B8860B}
.ow-td-t{min-width:0}
.ow-td-t b{display:block;font-size:14px;font-weight:600}
.ow-td-t b em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:600}
.sev-red .ow-td-t b em{color:var(--red)}
.ow-td-t small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.ow-who{display:inline-block;background:#EDEFF2;color:#46505B;border-radius:5px;padding:0 6px;font-size:11.5px;font-weight:600}
.ow-jl{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-top:5px}
.ow-jl button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:none;padding:1px 0;
              font-family:inherit;font-size:12.5px;font-weight:500;color:var(--blue);text-align:left;cursor:pointer}

/* ── ลูกหนี้ตามอายุ ── */
.ow-ar-tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;background:var(--paper);border:none;
           border-radius:8px;padding:9px 12px;margin-bottom:8px;font-family:inherit;color:var(--ink);text-align:left;cursor:pointer}
.ow-ar-tot span{font-size:13px;font-weight:600}
.ow-ar-tot b{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;white-space:nowrap}
.ow-ags{display:flex;flex-direction:column;gap:1px}
.ow-ag{display:grid;grid-template-columns:118px minmax(0,1fr) 86px;gap:10px;align-items:center;width:100%;background:none;border:none;
       border-radius:7px;padding:6px 4px;font-family:inherit;color:var(--ink);text-align:left;cursor:pointer}
.ow-ag-l{font-size:13px;font-weight:600;line-height:1.3}
.ow-ag-l small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.ow-ag-tr{height:9px;background:#EDEFF2;border-radius:3px;overflow:hidden}
.ow-ag-tr i{display:block;height:100%;border-radius:3px}
.ow-ag b{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ow-ag.zero{opacity:.5}
.ow-c-b{background:var(--blue)}
.ow-c-a{background:#B8860B}
.ow-c-r{background:var(--red)}
.ow-c-r2{background:#6E1519}
.ow-foot{font-size:12px;color:var(--muted);margin-top:8px}
/* พื้นที่เก็บรูป (SQL 30) */
.ow-st-top{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.ow-st-top b{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.ow-st-top span{font-size:12.5px;color:var(--muted)}
.ow-st-top.lv-a b{color:#8A6400}
.ow-st-top.lv-r b{color:var(--red)}
.ow-sbar{display:flex;height:10px;background:#EDEFF2;border-radius:4px;overflow:hidden;margin-bottom:10px}
.ow-sbar i{display:block;height:100%}
.ow-sbar.lv-a{outline:2px solid #E8D39A;outline-offset:1px}
.ow-sbar.lv-r{outline:2px solid #F0CACA;outline-offset:1px}
.ow-sg-b{background:var(--blue)}
.ow-sg-a{background:#B8860B}
.ow-sg-g{background:#0F766E}
.ow-sg-o{background:#8A94A3}
.ow-strs{display:grid;gap:4px}
.ow-str{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px}
.ow-str small{margin-left:6px;font-size:11.5px;color:var(--muted)}
.ow-str b{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ow-sdot{width:10px;height:10px;border-radius:3px}

/* ── 6D-2 · หัวการ์ดที่มีปุ่ม/แท็บด้านขวา ── */
.ow-h .ow-hbtn,.ow-h .ow-mt{margin-left:auto}
.ow-h .ow-hbtn{padding:5px 10px;font-size:12.5px}
.ow-mt button{padding:4px 10px;font-size:12.5px}
.ow-h2{margin:14px 0 4px;padding-top:12px;border-top:1px solid #EEF0F3}
.ow-h2 h3{font-size:13.5px;font-weight:700}

/* ── คิวรถสัปดาห์นี้ ── */
.ow-bg{display:grid;grid-template-columns:40px repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;overflow:hidden;font-size:11.5px}
.ow-bg > div{border-right:1px solid #EEF0F3;border-bottom:1px solid #EEF0F3;min-width:0}
.ow-bh{background:#F6F7F9;padding:6px 2px;text-align:center;font-weight:600;color:#46505B;white-space:nowrap}
.ow-bh.today{background:var(--blue);color:#fff}
.ow-bh.past{color:#9AA3AD}
.ow-bc{background:#F6F7F9;padding:6px 4px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12px;text-align:center}
.ow-bcell{padding:3px;display:flex;flex-direction:column;gap:3px;min-height:34px}
.ow-bcell.today{background:#F3F7FC}
.ow-bcell.past .ow-chip{opacity:.62}
.ow-chip{position:relative;display:block;width:100%;min-width:0;text-align:left;border:none;border-left:3px solid #8A949E;border-radius:5px;
         background:#F1F2F4;color:#46505B;padding:2px 4px 2px 5px;font-family:inherit;font-size:11px;line-height:1.3;cursor:pointer}
.ow-chip b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600}
.ow-chip span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ow-chip.st-booked{background:var(--amber-soft);border-left-color:#B8860B;color:#5E4A0E}
.ow-chip.st-confirmed{background:var(--blue-soft);border-left-color:var(--blue);color:#0B3A69}
.ow-chip.st-working{background:#ECE9F8;border-left-color:#5B4BB0;color:#3B2F80}
.ow-chip.st-done{background:#E6F3EC;border-left-color:var(--green);color:#1F4D33}
.ow-chip.nn::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#D97706;box-shadow:0 0 0 2px #fff}
.ow-bday{display:none}
.ow-bstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:8px}
.ow-bstrip button{display:flex;flex-direction:column;align-items:center;gap:0;background:var(--paper);border:1.5px solid transparent;border-radius:8px;
                  padding:5px 2px;font-family:inherit;font-size:11.5px;color:var(--muted);cursor:pointer}
.ow-bstrip button b{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--ink)}
.ow-bstrip button i{font-style:normal;font-size:10.5px;white-space:nowrap}
.ow-bstrip button.today b{color:var(--blue)}
.ow-bstrip button.on{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.ow-bdr{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:start;padding:6px 0;border-top:1px solid #EEF0F3}
.ow-bdr:first-child{border-top:0}
.ow-bdr > b{font-family:'IBM Plex Mono',monospace;font-size:13px;padding-top:3px}
.ow-bdr > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ow-bdr .ow-chip{display:flex;align-items:baseline;gap:8px;padding:6px 8px;font-size:13px}
.ow-bdr .ow-chip b{font-size:13px;flex-shrink:0}
.ow-bdr .ow-chip.nn::after{top:50%;right:8px;transform:translateY(-50%)}
.ow-free{font-size:12.5px;color:#9AA3AD;padding-top:3px}
.ow-legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.ow-legend i{font-style:normal;display:inline-flex;align-items:center;gap:4px}
.ow-legend i::before{content:"";width:9px;height:9px;border-radius:2px;background:#8A949E}
.ow-legend .st-booked::before{background:#B8860B}
.ow-legend .st-confirmed::before{background:var(--blue)}
.ow-legend .st-working::before{background:#5B4BB0}
.ow-legend .st-done::before{background:var(--green)}
.ow-legend .nn::before{border-radius:50%;background:#D97706}

/* ── ยอดรายวัน ── */
.ow-cread{font-size:13px;color:var(--muted);margin:-4px 0 10px;min-height:20px}
.ow-cread b{color:var(--ink);font-family:'IBM Plex Mono',monospace;font-weight:600}
.ow-cwrap{position:relative;padding-top:16px}
.ow-cmax,.ow-cnone{position:absolute;top:0;left:0;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.ow-cnone{font-family:inherit;font-size:12px;top:50px;left:0;right:0;text-align:center}
.ow-cbars{display:flex;align-items:stretch;gap:3px;height:150px;border-top:1px dashed var(--line)}
.ow-cwrap.many .ow-cbars{gap:2px}
.ow-cb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;background:none;border:none;padding:0;font-family:inherit;cursor:pointer}
.ow-cb-t{flex:1;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.ow-cb-t i{display:block;width:100%;background:var(--blue);border-radius:3px 3px 0 0;min-height:0}
.ow-cb.today .ow-cb-t i{background:#0B3A69}
.ow-cb.sel .ow-cb-t{background:var(--blue-soft)}
.ow-cb.sel .ow-cb-t i{background:#D97706}
.ow-cb.fut .ow-cb-t{background:repeating-linear-gradient(135deg,transparent 0 4px,#F1F2F4 4px 6px)}
.ow-cb em{font-style:normal;font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;height:15px;line-height:15px}
.ow-cb.today em{color:var(--blue);font-weight:700}
.ow-cwrap.many .ow-cb em{font-size:10.5px;overflow:visible}

/* ── ใครทำอะไร ── */
.ow-pps{display:flex;flex-direction:column}
.ow-pp{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:8px 0;border-top:1px solid #EEF0F3}
.ow-pp:first-child{border-top:0;padding-top:0}
.ow-pp b{font-size:14px;font-weight:700}
.ow-pp em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;text-align:right}
.ow-pp small{grid-column:1 / -1;font-size:12px;color:var(--muted);line-height:1.5}
.ow-people .d-list{margin-top:0}

@media (hover:hover){
  .ow-chip:hover{filter:brightness(.96)}
  .ow-cb:hover .ow-cb-t{background:#F3F7FC}
  button.ow-st:hover,.ow-ag:hover{background:#F6F8FB}
  .ow-ar-tot:hover{background:#E6E9ED}
  .ow-lost-i:hover b,.ow-jl button:hover{text-decoration:underline}
}
.ow-st:focus-visible,.ow-ag:focus-visible,.ow-ar-tot:focus-visible,.ow-lost-i:focus-visible,.ow-jl button:focus-visible,
.ow-chip:focus-visible,.ow-cb:focus-visible,.ow-bstrip button:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px}

@media (min-width:1100px){
  .ow-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}
  .ow-flow{grid-column:1 / -1;order:0}
  .ow-col{display:flex;flex-direction:column;gap:12px;min-width:0}
  .ow-col > *{order:0}
}
@media (max-width:699px){
  .ow-pipe{grid-template-columns:minmax(0,1fr)}
  .ow-st{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;
         border-right:0;border-bottom:1px solid var(--line);padding:9px 12px}
  .ow-st:last-child{border-bottom:0}
  .ow-st-l{grid-column:1;grid-row:1;font-size:14px;color:var(--ink)}
  .ow-st-n{grid-column:2;grid-row:1;font-size:20px;text-align:right}
  .ow-st-v{grid-column:2;grid-row:2;text-align:right}
  .ow-st small{grid-column:1;grid-row:2}
  .ow-st:not(:last-child)::after{content:"↓";right:auto;left:10px;top:auto;bottom:-9px;transform:none;font-size:11px;line-height:15px}
  .ow-card{padding:13px 13px}
  .ow-ag{grid-template-columns:104px minmax(0,1fr) 76px;gap:8px}
  .ow-bwide{display:none}
  .ow-bday{display:block}
  .ow-legend .st-billed,.ow-legend .st-done{display:none}
  .ow-cbars{height:130px}
  .ow-cwrap.many .ow-cb em{font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){ #owBody.loading{transition:none} }

/* ── C2 การ์ดงาน LINE: ปุ่มส่งการ์ด (การ์ดงาน · แผงบอร์ด · กล่องจองแล้ว) ── */
.j-act button.lc-send{background:#fff;color:var(--blue);border:1px solid #9DB9D8}
.j-act button.lc-send:active{background:var(--blue);color:#fff}
.bk-done-act button.bk-card{grid-column:1 / -1;background:var(--blue);border-color:var(--blue);color:#fff}
button.lc-send:disabled{opacity:.6;cursor:default}

/* ══ C3 ทีมงาน + จัดคนลงรถ ══ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.st-top{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.st-top input{flex:1;min-width:0}
.st-top .jv-btn{flex-shrink:0;white-space:nowrap}
.st-sub{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:12px}
label.st-chk{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:14px;color:var(--ink);cursor:pointer;min-height:36px}
label.st-chk input{width:20px;height:20px;padding:0;margin:0;accent-color:var(--blue);flex-shrink:0}
.st-sub label.st-chk{font-size:12.5px;color:var(--muted)}
.st-lbl{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:5px}
.st-duties{display:flex;flex-wrap:wrap;gap:4px 18px}
.st-priv-box{border-top:1px dashed var(--line);padding-top:12px;margin-top:4px}
.st-act{display:flex;gap:8px}
.st-act .btn{margin-top:4px}
.st-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px}
.st-item.off{opacity:.6}
.st-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-main b{font-size:15px}
/* C5 ผูก LINE หัวหน้าชุด */
.st-lrow{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}
.st-line{font-size:12.5px;color:var(--muted);background:#F1F3F5;border-radius:12px;padding:2px 9px}
.st-line.on{color:var(--green);background:#E6F3EC;font-weight:600}
.st-line-btn{font-size:12.5px;padding:5px 10px;min-height:32px}
.st-code{margin-top:8px;border:1.5px dashed var(--blue);background:var(--blue-soft);border-radius:10px;padding:10px 12px}
.st-code-t{font-size:12.5px;color:var(--muted)}
.st-code-n{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:600;letter-spacing:.3em;color:var(--blue);line-height:1.3}
.st-code-h{font-size:12px;color:var(--muted);margin-bottom:8px}
.st-code-copy{width:100%;font-size:14px}
.st-duty{font-size:12.5px;color:var(--blue)}
.st-priv{font-size:12.5px;color:var(--ink)}
.st-priv.none{color:var(--muted);font-style:italic}
.st-note{font-size:12px;color:var(--muted)}
.st-offtag{margin-left:8px;font-size:11px;font-weight:600;background:#EDEFF2;color:#46505B;border-radius:999px;padding:1px 8px}

/* บรรทัดทีมบนการ์ดงาน/ชิปบอร์ด */
.cw-line{font-size:12px;color:var(--ink);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-line.none{color:var(--amber)}
.jv-job .cw-line{font-size:11px;margin-top:2px}

/* ส่วนทีมในแผงงาน */
.cw-box{border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin:10px 0;background:var(--card)}
.cw-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cw-h b{font-size:13.5px}
.cw-pick{border:none;border-radius:7px;padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--blue);color:#fff}
.cw-chips{display:flex;flex-wrap:wrap;gap:6px}
.cw-chip{display:inline-flex;align-items:center;gap:4px;background:#EDEFF2;border-radius:999px;padding:3px 6px 3px 8px;font-size:13px}
.cw-chip.lead{background:var(--ink);color:#fff}
.cw-chip small{font-size:11px;opacity:.8;margin-left:3px}
.cw-chip button{border:none;background:transparent;color:inherit;font-family:inherit;cursor:pointer;padding:3px 5px;border-radius:999px;font-size:12px;min-width:26px;min-height:26px}
.cw-star{color:#8A939D!important;font-size:14px!important}
.cw-star.on{color:#F4B400!important}
.cw-role{background:rgba(255,255,255,.55)!important;font-weight:600}
.cw-chip.lead .cw-role{background:rgba(255,255,255,.18)!important}
.cw-x{font-size:16px!important;line-height:1}
.cw-chip button:disabled{opacity:.4}
.cw-warn{font-size:12px;color:var(--amber);margin-top:7px}
.cw-empty{font-size:13px;color:var(--muted);padding:6px 2px}

/* หน้าต่างจัดคน · ทับแผงงานบนมือถือ (z 140) · ใต้กล่องยืนยัน (z 300) */
.cw-bd{position:fixed;inset:0;background:rgba(16,21,28,.5);z-index:180;display:flex;align-items:center;justify-content:center;padding:18px}
.cw-bd[hidden]{display:none}
.cw-dlg{background:var(--paper);border-radius:12px;width:100%;max-width:460px;max-height:min(720px,100%);display:flex;flex-direction:column;
        box-shadow:0 12px 40px rgba(0,0,0,.28);overflow:hidden}
.cw-dh{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:14px 14px 8px}
.cw-dh b{display:block;font-size:16px}
.cw-dh span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.cw-dh .jv-x{display:inline-block;flex-shrink:0}
.cw-dlg > input{margin:0 14px 8px;width:auto}
.cw-list{flex:1;min-height:120px;overflow-y:auto;padding:0 14px 8px}
.cw-sec{font-size:11.5px;font-weight:600;color:var(--muted);margin:10px 2px 5px;letter-spacing:.02em}
.cw-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:9px;
         padding:9px 11px;margin-bottom:6px;font-family:inherit;color:var(--ink);cursor:pointer;min-height:48px}
.cw-item.on{border-color:var(--blue);background:var(--blue-soft)}
.cw-item.busy{background:#FBF7EC}
.cw-item:disabled{opacity:.55}
.cw-ck{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;flex-shrink:0;font-weight:700;color:#fff;font-size:13px}
.cw-item.on .cw-ck{background:var(--blue);border-color:var(--blue)}
.cw-nm{flex:1;min-width:0;display:flex;flex-direction:column}
.cw-nm b{font-size:14.5px}
.cw-nm small{font-size:12px;color:var(--muted)}
.cw-busy{font-size:11.5px;font-weight:600;color:#7A5A08;background:var(--amber-soft);border-radius:999px;padding:2px 8px;flex-shrink:0}
.cw-add{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--line);background:var(--card)}
.cw-add[hidden]{display:none}
.cw-add input{flex:1;min-width:0}
.cw-add select{width:auto;flex-shrink:0}
.cw-add button{flex-shrink:0;border:none;border-radius:8px;padding:0 13px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;background:var(--blue-soft);color:var(--blue)}
.cw-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 14px;background:var(--card)}
.cw-foot span{font-size:13px;color:var(--muted)}
.cw-foot .btn{width:auto;margin:0;padding:11px 26px}
@media (max-width:600px){
  .cw-bd{padding:0;align-items:flex-end}
  .cw-dlg{max-width:none;max-height:92vh;border-radius:14px 14px 0 0}
  .cw-add{flex-wrap:wrap}
  .cw-add input{flex-basis:100%}
  .cw-add select{flex:1}
  .st-top{flex-wrap:wrap}
  .st-top input{flex-basis:100%}
}

/* ══ C4 เงินเบิกต่องาน ══ */
.xv-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.xv-sc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.xv-sc small{font-size:11.5px;color:var(--muted)}
.xv-sc b{font-size:18px}
.xv-sc > span{font-size:12.5px;color:var(--muted)}
.xv-sc.warn{border-color:#E7C77A;background:var(--amber-soft)}
.xv-sc.warn b{color:#7A5A08}
.xv-hands{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;margin-top:2px}
.xv-hands b{color:var(--green)}
.xv-hands .neg b{color:var(--red)}
.xv-bar{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}
.xv-bar .jv-seg b{font-size:11px;margin-left:2px;color:var(--blue)}
.xv-search{margin-bottom:10px}
.xv-hint{font-size:12.5px;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:8px 11px;margin-bottom:8px}
.xv-item{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;
         font-family:inherit;color:var(--ink);cursor:pointer}
.xv-item:hover{border-color:var(--blue)}
.xv-item.off{opacity:.6}
.xv-l1{display:flex;align-items:baseline;gap:8px}
.xv-l1 b{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xv-amt{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;flex-shrink:0}
.xv-l2{font-size:12.5px;color:var(--muted);margin-top:2px}
.xv-jobs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.xv-jobs span{font-size:12px;background:#EDEFF2;border-radius:6px;padding:2px 7px}
.xv-l3{margin-top:7px}
.xv-tag{display:inline-block;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;background:#EDEFF2;color:#46505B}
.xv-tag.open{background:var(--blue-soft);color:var(--blue)}
.xv-tag.open.late{background:var(--amber-soft);color:#7A5A08}
.xv-tag.cleared{background:#E6F2EA;color:var(--green)}
.xv-tag.fa_sent{background:#E6F2EA;color:var(--green)}
.xv-tag.void{background:#F6E7E8;color:var(--red)}

/* แผงงาน */
.xv-prow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:8px;
         padding:8px 10px;margin-bottom:6px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;min-height:44px}
.xv-prow > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xv-pamt{font-family:'IBM Plex Mono',monospace;font-weight:600}
.xv-pstate{font-size:13px;font-weight:600;color:var(--green)}
/* C5b-1 คำขอเบิกจากหัวหน้าชุด */
.xv-bar .jv-seg button.xv-reqtab{color:#9A3412;font-weight:700}
.xv-bar .jv-seg button.xv-reqtab b{color:#9A3412}
.xv-item.xv-req{cursor:default;border-left:4px solid #EA580C}
.xv-item.xv-req:hover{border-color:var(--line);border-left-color:#EA580C}
.xv-ract{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.xv-ract .btn{width:auto;flex:1 1 150px;margin:0;min-height:42px}
.xv-rrej{margin-top:10px}
.xv-rrej input{width:100%;font-size:16px}
.xv-preq{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:#FFF4EC;border:1px solid #F5C9A8;border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:13px}
.xv-preq .cw-pick{margin-left:auto}
/* C5b-2 รูปบิลจากหัวหน้าชุด */
.xv-billbtn{display:block;width:100%;text-align:left;border:1px dashed var(--blue);background:var(--blue-soft);color:var(--blue);
  border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-top:6px}
.xv-nobill{font-size:12.5px;color:var(--muted);margin-top:6px}
.xvb-bd{position:fixed;inset:0;z-index:190;background:rgba(16,21,28,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.xvb{background:var(--card);border-radius:12px;width:100%;max-width:760px;max-height:90vh;display:flex;flex-direction:column}
.xvb-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.xvb-h b{flex:1;min-width:0;font-size:15px}
.xvb-b{overflow-y:auto;padding:12px 14px}
.xvb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.xvb-grid figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.xvb-grid img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.xvb-grid figcaption{font-size:11.5px;color:var(--muted);padding:4px 6px}

/* หน้าต่างใบเบิก */
.xv-dlg{max-width:620px}
.xv-body{flex:1;overflow-y:auto;padding:0 14px 10px;min-height:120px}
.xv-dlg input,.xv-dlg select{font-size:16px}
.xv-sec{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:10px}
.xv-sh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.xv-sh b{font-size:14px}
.xv-sh span{font-size:12.5px;color:var(--muted)}
.xv-jrow{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:7px 0}
.xv-jrow > div{flex:1;min-width:0;display:flex;flex-direction:column}
.xv-jrow small{font-size:12px;color:var(--muted)}
.xv-jrow .cw-x,.xv-jh .cw-x{border:none;background:#EDEFF2;border-radius:999px;min-width:32px;min-height:32px;cursor:pointer;font-family:inherit}
.xv-addjob{border:1.5px dashed var(--line);background:transparent;border-radius:8px;width:100%;padding:10px;margin-top:8px;font-family:inherit;
           font-size:13.5px;font-weight:600;color:var(--blue);cursor:pointer}
.xv-pick{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.xv-pickbar{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.xv-pickbar input{flex:1;min-width:0}
.xv-pickbar .jv-btn{flex-shrink:0;min-width:40px}
.xv-picklist{max-height:300px;overflow-y:auto}
.xv-jcard{border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:9px;background:var(--paper)}
.xv-jh{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.xv-jh > div{flex:1;min-width:0;display:flex;flex-direction:column}
.xv-jh small{font-size:12px;color:var(--muted)}
.xv-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.xv-g3 .field,.xv-jcard .field{margin-bottom:6px}
.xv-jcard label{font-size:12.5px}
.xv-jcard label em{font-style:normal;color:var(--blue);font-weight:600}
.xv-names{font-size:12px;color:var(--muted);margin:0 0 6px}
.xv-why[hidden]{display:none}
.xv-jsum{text-align:right;font-size:13px}
.xv-jsum b{font-family:'IBM Plex Mono',monospace}
.xv-toinfo{font-size:12.5px;margin-top:5px;color:var(--ink)}
.xv-warn{color:var(--amber)}
.xv-carry{font-size:13.5px}
.xv-tot{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px;margin:6px 0 8px}
.xv-tot b{font-family:'IBM Plex Mono',monospace;text-align:right}
.xv-tot span:nth-last-child(2),.xv-tot b:last-child{border-top:1px solid var(--line);padding-top:5px;font-weight:700}
.xv-diff{color:var(--green)}
.xv-diff.neg{color:var(--red)}
.xv-dact{display:flex;flex-direction:column;gap:2px}
.xv-void{background:#FDF5F5;border:1px solid #E9C3C5;border-radius:10px;padding:11px 12px;margin-bottom:10px}
.xv-void label{font-size:13px;font-weight:600;display:block;margin-bottom:5px}
.xv-danger{background:var(--red);color:#fff;border:none}
.xv-foot{flex-wrap:wrap;justify-content:flex-end;border-top:1px solid var(--line)}
.xv-foot .btn{padding:11px 16px}
.xv-vbtn{margin-right:auto!important;color:var(--red)!important}
@media (max-width:600px){
  .xv-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xv-sc.wide{grid-column:1 / -1}
  .xv-foot .btn{flex:1 1 auto}
  .xv-vbtn{flex-basis:100%!important;margin-right:0!important}
}
/* C4b ส่งออก Excel */
.xv-bact{display:flex;gap:6px;flex-shrink:0}
.xv-exp{margin-bottom:10px}
.xv-exp .st-act .btn{width:auto;padding:11px 22px}
.xv-exp input{font-size:16px}
.xv-exp .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.xv-exp input[type="date"]{min-width:0;width:100%;box-sizing:border-box}

/* ══ C6 ใบสำรวจหน้างาน (js/survey.js) ══ */
.sv-wrap{display:block;max-width:720px!important;margin:0 auto;width:100%}
.sv-item{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;
         padding:11px 13px;margin-bottom:8px;font-family:inherit;color:var(--ink);cursor:pointer}
.sv-item:active{background:var(--blue-soft)}
.sv-item.off{opacity:.6}
.sv-i1{display:flex;align-items:baseline;gap:8px;min-width:0}
.sv-i1 > b{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);flex-shrink:0}
.sv-nm{flex:1;min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-i2{font-size:12.5px;color:var(--muted)}
.sv-w{color:#8A5A00;font-weight:600}
.sv-tag{flex-shrink:0;font-size:11.5px;font-weight:600;border-radius:999px;padding:1px 9px;background:#EDEFF2;color:#46505B;white-space:nowrap}
.sv-tag.r-ok,.sv-tag.done{background:#E6F3EC;color:var(--green)}
.sv-tag.r-prep{background:var(--amber-soft);color:#7A5A08}
.sv-tag.r-no{background:#FBEAEA;color:var(--red)}
.sv-tag.void{background:#EDEFF2;color:#6B7580;text-decoration:line-through}
.sv-empty{text-align:center;padding:26px 8px}
.sv-nosql p{font-size:13px;color:var(--muted);margin-top:4px}
.sv-reachtog{margin-top:14px}
.sv-reachtog.open .chev{transform:rotate(180deg)}
.sv-rhead,.sv-rrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.sv-rhead{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:4px}
.sv-rrow{padding:6px 0;border-top:1px solid #EEF0F3}
.sv-rrow span{display:flex;flex-direction:column}
.sv-rrow small{font-size:11.5px;color:var(--muted)}
.sv-rrow input[type=number]{padding:8px;text-align:right}
.sv-rrow label.st-chk{font-size:12.5px}
.sv-rpipe{display:flex;align-items:center;gap:8px;margin:10px 0 4px}
.sv-rpipe label{flex:1;margin:0}
.sv-rpipe input{width:90px;padding:8px;text-align:right}
.sv-est{display:inline-block;background:var(--amber-soft);color:#7A5A08;border-radius:999px;padding:0 8px;font-size:11.5px;font-weight:700;margin:0 3px}

/* ฟอร์ม */
.sv-head{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px 10px 0 0;padding:6px 10px 6px 4px}
.sv-back{width:44px;height:44px;border:none;background:none;font-size:26px;line-height:1;color:var(--ink);cursor:pointer;flex-shrink:0}
.sv-ht{flex:1;min-width:0;display:flex;flex-direction:column}
.sv-ht b{font-size:15.5px}
.sv-ht span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-ind{font-size:11.5px;font-weight:600;color:var(--muted);text-align:right;max-width:40%}
.sv-ind.ok{color:var(--green)}
.sv-ind.warn{color:#8A5A00}
.sv-ind.err{color:var(--red)}
.sv-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;background:var(--card);border:1px solid var(--line);border-top:none;
          border-radius:0 0 10px 10px;padding:6px 8px 0;margin-bottom:12px;position:sticky;top:0;z-index:20}
.sv-steps button{border:none;background:none;font-family:inherit;font-size:12px;color:var(--muted);padding:6px 0 8px;cursor:pointer;
                 box-shadow:inset 0 -3px 0 #E4E8EC;min-height:40px}
.sv-steps button.done{color:var(--green);box-shadow:inset 0 -3px 0 var(--green)}
.sv-steps button.on{color:var(--blue);font-weight:700;box-shadow:inset 0 -3px 0 var(--blue)}
.sv-sec{display:none}
#svForm[data-step="1"] .sv-sec[data-s="1"],#svForm[data-step="2"] .sv-sec[data-s="2"],#svForm[data-step="3"] .sv-sec[data-s="3"],
#svForm[data-step="4"] .sv-sec[data-s="4"],#svForm[data-step="5"] .sv-sec[data-s="5"],#svForm[data-step="6"] .sv-sec[data-s="6"]{display:block}
.sv-h{font-size:15px;font-weight:700;margin-bottom:12px}
.sv-req{color:var(--red);font-style:normal}
.sv-q{margin-bottom:13px}
.sv-ql{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
.sv-seg{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px}
.sv-seg.pill{display:flex;flex-wrap:wrap}
.sv-seg button,.sv-chips button{min-height:44px;border:1.5px solid var(--line);background:var(--card);border-radius:9px;font-family:inherit;
       font-size:14px;color:var(--ink);cursor:pointer;padding:0 12px}
.sv-seg.pill button,.sv-chips button{border-radius:999px;min-height:42px}
.sv-seg button.on,.sv-chips button.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:600}
.sv-seg.warnable button.on[data-v="y"]{border-color:#8A6408;background:var(--amber-soft);color:#6B4E06}
.sv-seg.big button{min-height:54px;font-size:14.5px;line-height:1.25;padding:0 6px}
.sv-rhint{margin:-6px 0 12px}
.sv-seg.big{margin-bottom:12px}
.sv-seg.big button.on[data-v="prep"]{border-color:#8A6408;background:var(--amber-soft);color:#6B4E06}
.sv-seg.big button.on[data-v="no"]{border-color:var(--red);background:#FBEAEA;color:var(--red)}
.sv-seg button:disabled,.sv-chips button:disabled{cursor:default;opacity:.75}
.sv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sv-u{display:flex;align-items:center;gap:6px}
.sv-u span{font-size:14px;color:var(--muted);min-width:24px}
.sv-u input{text-align:right}
.sv-map{display:flex;gap:6px}
.sv-map input{flex:1;min-width:0}
.sv-map .btn{width:auto;margin:0;padding:0 12px;white-space:nowrap;font-size:13.5px;flex-shrink:0}
.sv-similar{background:var(--blue-soft);border-radius:9px;padding:9px 11px;margin:-4px 0 12px;font-size:13px;display:flex;flex-direction:column;gap:6px}
.sv-similar button{text-align:left;border:1px solid var(--blue);background:var(--card);color:var(--blue);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.sv-pumps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:8px}
.sv-pump{min-height:60px;border:1.5px solid var(--line);background:var(--card);border-radius:9px;font-family:inherit;display:flex;flex-direction:column;
         align-items:center;justify-content:center;gap:1px;padding:2px;cursor:pointer;color:var(--ink)}
.sv-pump b{font-family:'IBM Plex Mono',monospace;font-size:14px}
.sv-pump small{font-size:10.5px;color:var(--muted)}
.sv-pump i{font-style:normal;font-size:10.5px;font-weight:600}
.sv-pump.s-fit i{color:var(--green)} .sv-pump.s-pipe i{color:#7A5A08} .sv-pump.s-no i{color:var(--red)} .sv-pump.s-check i{color:var(--muted)}
.sv-pump.on{border-color:var(--blue);background:var(--blue-soft)}
.sv-pump.on b{color:var(--blue)}
.sv-why{list-style:none;font-size:12.5px;margin:0 0 6px;display:flex;flex-direction:column;gap:2px}
.sv-why li b{font-family:'IBM Plex Mono',monospace;margin-right:4px}
.sv-why li.s-no{color:var(--muted)}
.sv-warnc{border-color:#E3C77A;background:#FFFBF0}
.sv-wi{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink);margin:0 0 8px;cursor:pointer;line-height:1.45}
.sv-wi input{width:20px;height:20px;padding:0;margin:1px 0 0;accent-color:#8A6408;flex-shrink:0}
.sv-prev{font-size:13px;color:#6B4E06;background:var(--amber-soft);border-radius:8px;padding:8px 10px;margin-top:4px}
.sv-job{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:8px;
        padding:8px 10px;margin-bottom:6px;font-family:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.sv-job .j-tag{margin-left:auto}
.sv-bookbtn{margin-top:6px}
.sv-voidc{margin:6px 0 12px;text-align:center}
.sv-voidbtn{border:none;background:none;color:var(--red);font-family:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:8px}
.sv-voidbox{text-align:left;background:var(--card);border:1px solid #F0C4C6;border-radius:10px;padding:12px;margin-top:6px}
.sv-voidgo{background:var(--red);color:#fff;margin-top:8px}
.sv-voided{font-size:13px;color:var(--red)}
.sv-foot{position:sticky;bottom:0;z-index:20;display:grid;grid-template-columns:1fr 1.6fr;gap:8px;background:var(--card);border:1px solid var(--line);
         border-radius:10px;padding:10px 12px;margin-top:4px;box-shadow:0 -4px 14px rgba(16,21,28,.06)}
.sv-foot .btn{margin:0;min-height:48px}
@media (max-width:899px){
  .sv-foot{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}
}
@media (max-width:420px){
  .sv-steps button{font-size:11px}
  .sv-pump small{font-size:9.5px}
}

/* จองจากใบสำรวจ (หน้าจองคิว) */
.sv-bk{display:flex;gap:10px;align-items:flex-start;background:var(--blue-soft);border:1px solid #BFD3E8;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.sv-bk-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.sv-bk-m b{font-size:14px;color:var(--blue)}
.sv-bk-m small{font-size:11.5px;color:var(--muted)}
.sv-bk-w{color:#6B4E06;font-weight:600}
.sv-bk button{border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer;min-width:36px;min-height:36px}

/* แผงงานบนบอร์ด + ชิป */
.sv-chipw{font-size:11px}
.sv-pact{display:flex;gap:6px}
.sv-pick2{background:var(--blue-soft)!important;color:var(--blue)!important}
.sv-prow{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:none;background:#F4F6F8;border-radius:8px;padding:8px 10px;
         font-family:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;margin-bottom:6px}
.sv-prow .sv-tag{margin-left:auto}
.sv-pwarn{font-size:13px;color:#5C4300;background:var(--amber-soft);border:1px solid #E3C77A;border-radius:8px;padding:7px 10px;line-height:1.5}
.sv-pwarn b{display:block;color:#8A4B00;margin-bottom:2px}
.sv-pwarn ul{margin:0;padding-left:18px}
.sv-plink{border:none;background:none;color:var(--muted);font-family:inherit;font-size:12px;text-decoration:underline;cursor:pointer;padding:6px 2px 0}

/* ══ C6b รูปหน้างาน · ลายเซ็น · PDF ══ */
.sv-phn{font-size:12px;font-weight:500;color:var(--muted);margin-left:4px}
.sv-opt{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:4px}
.sv-phgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sv-ph{position:relative;aspect-ratio:1}
.sv-phimg{width:100%;height:100%;border:none;padding:0;border-radius:10px;overflow:hidden;background:#C9D2DC;cursor:zoom-in;display:grid;place-items:center;color:#3A434D;font-family:inherit;font-size:12px}
.sv-phimg img{width:100%;height:100%;object-fit:cover;display:block}
.sv-phx{position:absolute;top:4px;right:4px;width:30px;height:30px;border:none;border-radius:50%;background:rgba(16,21,28,.62);color:#fff;font-size:14px;cursor:pointer;line-height:1}
.sv-phadd{aspect-ratio:1;border:1.5px dashed #9AA4AE;border-radius:10px;background:var(--card);color:var(--blue);display:flex;flex-direction:column;
          align-items:center;justify-content:center;gap:3px;font-size:22px;cursor:pointer;margin:0;position:relative;overflow:hidden}
.sv-phadd span{font-size:12.5px;font-weight:600}
.sv-phadd input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0}
.sv-phhint:empty{display:none}
.sv-phhint{margin-top:8px}
.sv-signpad{position:relative;height:150px;border:1.5px dashed #9AA4AE;border-radius:10px;background:#FAFBFC;margin-bottom:8px}
.sv-signpad canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.sv-signpad span{position:absolute;left:10px;bottom:6px;font-size:11px;color:var(--muted);pointer-events:none}
.sv-signact{display:grid;grid-template-columns:1fr 1.6fr;gap:8px}
.sv-signact .btn{margin:0}
.sv-signed{display:flex;align-items:center;gap:12px;background:#FAFBFC;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.sv-signed img{width:150px;height:auto;max-height:80px;object-fit:contain;background:#fff;border-radius:6px}
.sv-signed div{display:flex;flex-direction:column;font-size:13.5px}
.sv-signed small{font-size:12px;color:var(--muted)}
.sv-prev ul,.sv-pwarn ul{margin:2px 0 0;padding-left:18px}
.sv-pdfc .btn{margin-top:8px}
.sv-pdfcover{position:fixed;inset:0;z-index:260;background:rgba(238,240,242,.96);display:grid;place-items:center;font-size:16px;font-weight:600;color:var(--blue)}
/* หน้า A4 สำหรับ PDF (794 × 1123 px ≈ A4 ที่ 96 dpi) · วาดใต้ฉากบัง แล้วลบทิ้ง */
.sv-pdf{position:fixed;left:0;top:0;z-index:250;width:794px}
.sv-pg{position:relative;width:794px;height:1123px;overflow:hidden;background:#fff;color:#10151C;box-sizing:border-box;padding:40px 46px 56px;
       font-family:'Sarabun','IBM Plex Sans Thai',sans-serif;font-size:13.5px;line-height:1.45}
.sv-pg .pb{margin-bottom:12px}
.sv-pg .ph{display:flex;justify-content:space-between;gap:16px;border-bottom:2.5px solid #0B4F8F;padding-bottom:10px;margin-bottom:14px}
.sv-pg .co{display:flex;flex-direction:column;font-size:11.5px;color:#3A434D;max-width:58%}
.sv-pg .co b{font-size:14px;color:#10151C}
.sv-pg .tt{text-align:right;display:flex;flex-direction:column;font-size:12px;color:#3A434D}
.sv-pg .tt h1{font-size:22px;margin:0;color:#0B4F8F;letter-spacing:0}
.sv-pg h3{font-size:14px;margin:0 0 4px;color:#0B4F8F}
.sv-pg table{width:100%;border-collapse:collapse}
.sv-pg th,.sv-pg td{border:1px solid #D6DAE0;padding:4px 8px;text-align:left;vertical-align:top;font-weight:400}
.sv-pg th{width:32%;background:#F3F5F7;color:#3A434D}
.sv-pg .u{word-break:break-all;font-size:11.5px;color:#0B4F8F}
.sv-pg .rv{display:inline-block;font-size:15px;font-weight:700;border-radius:6px;padding:3px 12px;background:#E6F3EC;color:#1B7040;margin-bottom:6px}
.sv-pg .rv.r-prep{background:#FDF4DC;color:#6B4E06}
.sv-pg .rv.r-no{background:#FBEAEA;color:#A4262C}
.sv-pg .rv.r-none{background:#EDEFF2;color:#46505B}
.sv-pg .res p{margin:0 0 6px}
.sv-pg .wn{background:#FDF4DC;border:1px solid #E3C77A;border-radius:6px;padding:6px 10px;color:#5C4300}
.sv-pg .wn ul{margin:2px 0 0;padding-left:20px}
.sv-pg .pg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sv-pg figure{margin:0}
.sv-pg figure img{width:100%;height:250px;object-fit:cover;border-radius:4px;display:block}
.sv-pg figcaption{font-size:11.5px;color:#3A434D;margin-top:2px}
.sv-pg .sg{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px;text-align:center}
.sv-pg .sg div{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px}
.sv-pg .sg img{height:70px;width:auto;max-width:100%;object-fit:contain}
.sv-pg .sg i{height:70px}
.sv-pg .sg b{font-weight:400}
.sv-pg .sg small{color:#5F6A76}
.sv-pg .ft{font-size:11px;color:#5F6A76;text-align:center;border-top:1px solid #D6DAE0;padding-top:6px}
.sv-pg .pn{position:absolute;right:46px;bottom:22px;font-size:10.5px;color:#9AA4AE}

/* ── ท่อคิดตั้งแต่เมตรแรก (13 ต.ค.) ── */
.qf-chk{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;user-select:none;width:fit-content}
.qf-chk input{width:20px;height:20px;margin:0;padding:0;accent-color:var(--blue);flex-shrink:0}
.qf-chk i{font-style:normal;color:var(--muted);font-weight:400}
.qf-chk:has(input:checked){color:var(--blue)}

/* ── แจ้งเตือน: ถึงใคร + ต้องทำอะไร (N2 · 14 ต.ค.) ── */
.n-who{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-bottom:4px}
.n-who em,.n-who u{font-style:normal;text-decoration:none;font-size:11px;font-weight:600;line-height:1.35;padding:2px 7px;border-radius:999px;white-space:normal}
.n-who em{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.n-who em.me{background:var(--blue);color:#fff;border-color:var(--blue)}
.n-who u.todo{background:#FEF3C7;color:#92400E}
.n-who u.fyi{background:var(--bg);color:var(--muted)}
.n-item.other{opacity:.72}

/* ── ป้ายส่งต่อ (M3 · 14 ต.ค.) ── ค้างจนกดปิด · อยู่ใต้กล่องยืนยัน (300) และ toast (310) */
.ho-box{position:fixed;z-index:290;right:max(16px, env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:min(420px, calc(100vw - 32px));background:var(--card);border:1.5px solid var(--green);border-radius:12px;
  box-shadow:0 10px 30px rgba(16,21,28,.18);padding:13px 14px;display:flex;flex-direction:column;gap:7px}
.ho-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ho-top b{color:var(--green);font-size:14.5px;line-height:1.45}
.ho-top button{background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:5px 12px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;flex-shrink:0}
.ho-lbl{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.ho-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;padding:8px 10px;background:var(--paper);border-radius:9px;font-size:13.5px}
.ho-who{font-weight:700;font-size:12px;padding:2px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
.ho-who.me{background:var(--blue);color:#fff}
.ho-what{font-weight:600;flex:1 1 160px;min-width:0}
.ho-bell{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px;flex-basis:100%}
.ho-bell.ok{background:#E3F2E9;color:var(--green)}
.ho-bell.gap{background:#FEF3C7;color:#92400E}
.ho-bell.test{background:var(--paper);color:var(--muted)}
@media (max-width:899px){ .ho-box{left:max(16px, env(safe-area-inset-left,0px));right:max(16px, env(safe-area-inset-right,0px));width:auto;
  bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom,0px))} }

/* ── งานรอคุณ (N4 · 14 ต.ค.) ── */
.dw-sec{padding:10px 0;border-bottom:1px solid rgba(184,134,11,.25)}
.dw-sec:first-of-type{padding-top:0}
.dw-sec:last-child{border-bottom:none;padding-bottom:0}
.dw-h{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.dw-h b{font-size:14px;color:var(--ink)}
.dw-h b em{font-style:normal;font-family:'IBM Plex Mono',monospace;color:var(--amber);margin-left:4px}
.dw-h span{font-size:12px;color:var(--muted)}
.dw-li{display:flex;align-items:center;gap:10px;padding:7px 0}
.dw-m{flex:1;min-width:0}
.dw-m b{display:block;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.dw-m span{display:block;font-size:12px;color:var(--muted)}
.d-go.dw-main{background:var(--blue);color:#fff}
.dw-more{font-size:12px;color:var(--muted);padding-top:2px}

/* ไม่คิด VAT (19 ต.ค.) · ใบเสนอราคาไม่คิด VAT → ปิดตัวเลือกใบเต็มรูปในกล่องออกใบกำกับ */
.ti-opt.off{opacity:.45;pointer-events:none}
/* ใบเสนอราคาแบบ FlowAccount (19 ต.ค.) · ช่องเซ็นชิดล่างหน้าสุดท้าย · เงื่อนไขเป็นรายการในตาราง */
.page .p-sign-bottom{position:absolute;left:11mm;right:11mm;bottom:16mm;margin-top:0}
.p-tbl .p-trow .p-terms{font-size:8.6pt;line-height:1.55}
/* C7 รูปหน้างาน (19 ต.ค.) · กล่องจองแล้ว + แผงงาน */
.bk-photo{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1.5px dashed var(--blue);color:var(--blue);border-radius:10px;padding:9px 14px;font-weight:600;background:var(--card)}
.bk-photo input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0}   /* iPhone: ช่องไฟล์ที่ซ่อนด้วย display:none แตะไม่ติด */
.jp-box .cw-h small{color:var(--muted,#6b7480);font-weight:400;margin-left:6px}
/* การ์ดยืนยันคิวถึงลูกค้า (20 ต.ค.) */
.j-act button.lc-send.lc-cust{background:#1E7A43;border-color:#1E7A43;color:#fff}