/* ============================================================ POLITE EXPRESS V21.15.22 — A1: หน้า Admin บนมือถือ ปัญหา: CSS ชั้นหลังๆ (app.css ~5207/5484, v521-create.css 15/101) เขียน padding-left 214–226px !important ไว้ใน max-width:1180/1220 หรือไม่มี media query เลย จึงไปทับกฎมือถือ 720px เดิม (app.css 1603) ทำให้จอ 375px เหลือใช้ ~165px ไฟล์นี้โหลดเป็นไฟล์สุดท้าย และใช้ selector #admin#admin (แบบเดียวกับ app.css 1637) เพื่อให้ชนะทุกชั้นก่อนหน้าโดยไม่ต้องแตะไฟล์เดิม ============================================================ */ @media(max-width:720px){ /* คืนพื้นที่เต็มจอเมื่อ sidebar ถูกเลื่อนออกนอกจอ (translateX(-100%)) */ #admin#admin.v21-admin{padding-left:14px!important;padding-right:14px!important} #admin#admin.v21-admin>.v21-admin-header, #admin#admin .v21-admin-header{left:0!important} /* หน้าสร้างงาน: ทุก grid เป็นคอลัมน์เดียวบนมือถือ (ชั้นหลังบังคับ .v507-bottom 7 คอลัมน์ / .v507-route-layout และ .v507-top-grid 2 คอลัมน์) */ #admin#admin .v507-top-grid, #admin#admin .v507-customer-row, #admin#admin .v507-route-layout, #admin#admin .v507-lower{grid-template-columns:minmax(0,1fr)!important} #admin#admin .v507-page>*, #admin#admin .v507-top-grid>*, #admin#admin .v507-route-layout>*{min-width:0!important;max-width:100%!important;width:auto!important} /* แถบสรุปด้านล่าง (ยกเลิก · ระยะทาง · เวลา · ราคา · ค่าตอบแทน · บันทึก · มอบหมาย): 2 คอลัมน์ */ #admin#admin .v507-bottom{grid-template-columns:1fr 1fr!important;gap:8px!important} #admin#admin .v507-bottom>*{width:auto!important;min-width:0!important;justify-self:stretch!important} /* การ์ดวิธีชำระเงิน: ปุ่มเงินสด/เครดิต ซ้อนเป็นแถวละปุ่ม ไม่ล้นขวา */ #admin#admin .v507-pay-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:auto!important;max-width:100%!important;overflow:visible!important} #admin#admin .v507-pay-card .v507-section-label{grid-column:1!important;grid-row:1!important} #admin#admin .v507-pay-card .v507-pay-row{grid-column:1!important;grid-row:2!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;height:auto!important} #admin#admin .v507-pay-card .v517-ref-inline, #admin#admin .v507-pay-card .v521-ref-inline{grid-column:1!important;grid-row:3!important;border-left:0!important;padding:0!important;margin-top:6px!important} #admin#admin .v507-pay-row .v507-tile{height:auto!important;min-height:52px!important;overflow:visible!important} #admin#admin .v507-pay-row .v507-tile strong, #admin#admin .v507-pay-row .v507-tile small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important} /* แผนที่: ยกเลิก sticky/ความสูงขั้นต่ำของเดสก์ท็อป และกันกล่องระยะทางทับข้อความ */ #admin#admin .v507-map-card{position:relative!important;top:auto!important;min-height:0!important} #admin#admin .v507-map{height:260px!important;min-height:260px!important} #admin#admin .v507-map-empty{align-items:start!important;justify-items:center!important;padding:26px 16px 0!important} #admin#admin .v507-map-overlay{left:8px!important;right:8px!important;bottom:8px!important;min-width:0!important;max-width:none!important} } /* ============================================================ V21.15.23 — เหตุผลของราคาอัตโนมัติ แสดงใต้ช่องราคาในหน้าสร้างงาน ============================================================ */ .v507-point>.v507-price-hint{display:block;margin:3px 0 2px;text-align:right;font-size:10.5px;line-height:1.3;color:#64748b;white-space:normal} .v507-point>.v507-price-hint.ok{color:#15803d} .v507-point>.v507-price-hint.warn{color:#b45309} .v507-point>.v507-price-hint.manual{color:#1d4ed8} .v507-point>.v507-price-hint:empty{display:none} /* V21.15.24 — แผงหลังบันทึกใบงานสำเร็จ */ .v507-saved-panel{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);z-index:9000;display:none;gap:12px 16px;align-items:center;flex-wrap:wrap;max-width:min(720px,calc(100vw - 24px));padding:12px 16px;border:1px solid #86efac;border-radius:14px;background:#f0fdf4;box-shadow:0 12px 32px rgba(15,23,42,.18);opacity:0;transition:opacity .2s,transform .2s;font-family:inherit} .v507-saved-panel.show{display:flex;opacity:1;transform:translate(-50%,0)} .v507-saved-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px} .v507-saved-text b{color:#166534;font-size:15px} .v507-saved-text span{color:#3f6212;font-size:12.5px;line-height:1.4} .v507-saved-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .v507-saved-actions button{font:inherit;font-size:13px;font-weight:700;border-radius:10px;padding:9px 14px;cursor:pointer;border:1px solid transparent} .v507-saved-new{background:#0f8a5f;color:#fff} .v507-saved-orders{background:#fff;color:#0f2a4d;border-color:#cbd5e1!important} .v507-saved-close{background:transparent;color:#64748b;font-size:18px;padding:4px 8px!important;border:0!important} @media(max-width:720px){.v507-saved-panel{bottom:calc(88px + env(safe-area-inset-bottom,0px));left:12px;right:12px;transform:none;max-width:none}.v507-saved-panel.show{transform:none}.v507-saved-actions button{flex:1 1 auto}} /* ============================================================ V21.15.25 — สถานะความพร้อมของ Messenger ตอนมอบหมายงาน ============================================================ */ .pe-assign-summary{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px;font-size:12.5px;color:#475569} .pe-assign-summary b{color:#0f172a} .pe-assign-dim{color:#94a3b8} #assignmentMessengerSelect{font-size:14px} .pe-assign-detail{margin-top:8px;padding:10px 12px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12.5px;line-height:1.5;color:#334155;text-align:left} .pe-assign-detail ul{margin:6px 0 0;padding-left:18px} .pe-assign-detail .pe-assign-block{margin-top:6px;color:#b91c1c;font-weight:600} #admin#admin .v507-assign-option{display:flex!important;align-items:center!important;gap:10px!important} .v507-assign-state{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;white-space:nowrap;padding:4px 9px;border-radius:999px;background:#f1f5f9;color:#334155} .v507-assign-state[data-tone=green]{background:#dcfce7;color:#166534} .v507-assign-state[data-tone=amber]{background:#fef3c7;color:#92400e} .v507-assign-state[data-tone=orange]{background:#ffedd5;color:#9a3412} .v507-assign-state[data-tone=red]{background:#fee2e2;color:#991b1b} .v507-assign-state[data-tone=purple]{background:#ede9fe;color:#5b21b6} .v507-assign-state[data-tone=slate]{background:#e2e8f0;color:#334155} .v507-assign-state[data-tone=gray]{background:#e5e7eb;color:#4b5563} .v507-assign-option.blocked{opacity:.55} /* V21.15.25 — create-page popups (เลือก Messenger / ลูกค้า) were 360px fixed and overflowed a 375px phone */ @media(max-width:720px){ #admin#admin .v507-overlay{padding:12px} #admin#admin .v507-modal{width:auto;max-width:calc(100vw - 24px);box-sizing:border-box} } /* V21.15.25 — route header wraps on phones (it forced a 451px layout on a 375px screen) */ @media(max-width:720px){ #admin#admin .v507-route-head{flex-wrap:wrap!important;row-gap:6px!important;height:auto!important;min-height:42px!important;padding:8px 10px!important} #admin#admin .v507-route-head .v507-count{margin-left:auto!important} #admin#admin .v507-route-head .v507-add-stop{flex:0 0 auto!important} #admin#admin #v507Page,#admin#admin .v507-card{max-width:100%;box-sizing:border-box} } /* ============================================================ V21.15.26 — แถบแจ้งงานค้างจากวันอื่นบนหน้าคำสั่งงาน ============================================================ */ .pe-otherday-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;padding:10px 14px;border-radius:10px;background:#fffbeb;border:1px solid #fcd34d;color:#78350f;font-size:13px;line-height:1.5} .pe-otherday-notice b{color:#92400e} .pe-otherday-btn{margin-left:auto;border:0;border-radius:8px;padding:7px 12px;background:#0f172a;color:#fff;font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap} @media(max-width:720px){.pe-otherday-btn{margin-left:0;width:100%}} /* ============================================================ V21.15.28 — แท็บราคาพิเศษรายลูกค้า + ป้ายบนหน้าสร้างงาน ============================================================ */ .pe-sp{display:flex;flex-direction:column;gap:14px;text-align:left} .pe-sp-box{border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;background:#fff} .pe-sp-box h4{margin:0 0 8px;font-size:15px;color:#0f172a} .pe-sp-help{font-size:12.5px;line-height:1.6;color:#64748b;margin-top:6px} .pe-sp-help b{color:#334155} .pe-sp-minrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #admin#admin .pe-sp-minrow input{width:140px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px;font-size:15px;font-weight:700} .pe-sp-minrow span{font-size:13px;color:#64748b} #admin#admin .pe-sp textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #cbd5e1;border-radius:9px;font-size:14px;line-height:1.7;font-family:inherit;resize:vertical} .pe-sp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px} #admin#admin .pe-sp-btn{border:1px solid #cbd5e1;border-radius:9px;padding:9px 14px;background:#f8fafc;color:#0f172a;font-weight:700;font-size:13.5px;cursor:pointer} #admin#admin .pe-sp-btn.primary{background:#0f172a;border-color:#0f172a;color:#fff} .pe-sp-status{font-size:12.5px;color:#64748b} .pe-sp-status.ok{color:#166534;font-weight:700} .pe-sp-status.warn{color:#b45309;font-weight:700} .pe-sp-testrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px} #admin#admin .pe-sp-testrow input{flex:1 1 260px;min-width:0;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px;font-size:14px} .pe-sp-testout{font-size:12.5px;color:#64748b;font-weight:600} .pe-sp-testout.ok{color:#166534} .pe-sp-testout.warn{color:#b45309} .pe-sp-table{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden} .pe-sp-row{display:grid;grid-template-columns:1fr 110px 70px;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid #eef2f6;font-size:14px} .pe-sp-row:last-child{border-bottom:0} .pe-sp-row.head{background:#f8fafc;font-size:12.5px;font-weight:700;color:#475569} .pe-sp-row span:nth-child(2){font-weight:800;font-variant-numeric:tabular-nums} #admin#admin .pe-sp-del{border:1px solid #fecaca;background:#fef2f2;color:#b91c1c;border-radius:8px;padding:6px 10px;font-size:12.5px;font-weight:700;cursor:pointer} .pe-sp-empty{padding:18px;text-align:center;color:#94a3b8;font-size:13.5px} .pe-sp-badge{margin:0 0 10px;padding:9px 13px;border-radius:10px;background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;font-size:13px;font-weight:600} @media(max-width:720px){.pe-sp-row{grid-template-columns:1fr 84px 58px;font-size:13px}} /* V21.15.29 — เตือนเมื่อปลายทางของลูกค้าราคาพิเศษไม่มีในรายการ */ .pe-sp-miss{margin-top:7px;padding-top:7px;border-top:1px dashed #c7d2fe;color:#9a3412;font-weight:600;line-height:1.6} /* V21.15.30 — ลูกค้ารู้จักแล้วแต่ยังไม่ได้ตั้งราคาพิเศษ + ปุ่มลัดจากฟอร์มแก้ไขลูกค้า */ .pe-sp-badge.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;font-weight:500} .pe-sp-badge.muted b{color:#334155} #admin#admin .pe-sp-go{border:1px solid #c7d2fe!important;background:#eef2ff!important;color:#3730a3!important;font-weight:700!important} /* V21.15.32 — บอกให้ชัดว่ากำลังแก้รายการของลูกค้ารายไหน + ปุ่มลบทั้งรายการ */ .pe-sp-who{color:#1d4ed8} .pe-sp-warn{margin-top:8px;padding:8px 10px;border-radius:8px;background:#fffbeb;border:1px solid #fcd34d;color:#92400e;font-size:12.5px;line-height:1.6} #admin#admin .pe-sp-clear{float:right;border:1px solid #fecaca;background:#fef2f2;color:#b91c1c;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;cursor:pointer} /* ============================================================ V21.15.33 — ตารางลูกค้า: ตัวหนังสือเล็กลง แถวเตี้ยลง และปุ่ม ดู/แก้ไข ติดขอบขวาเสมอ app.css บังคับ td ไว้ที่ 17px / สูง 76px และตารางกว้างขั้นต่ำ 1400px จึงต้องใช้ !important ทับ ============================================================ */ #admin#admin .v2103-table{min-width:1040px!important;font-size:13.5px!important} #admin#admin .v2103-table th{padding:10px 10px!important;font-size:12px!important} #admin#admin .v2103-table td{height:auto!important;min-height:0!important;padding:9px 10px!important;font-size:13.5px!important;line-height:1.5!important} #admin#admin .v2103-company-cell{min-width:190px!important} #admin#admin .v2103-company-cell b{font-size:13.5px!important} #admin#admin .v2103-company-cell small{font-size:11.5px!important;line-height:1.45!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #admin#admin .v2103-table th.check,#admin#admin .v2103-table td.check{width:38px!important} #admin#admin .v2103-row-btn{padding:5px 10px!important;font-size:12px!important} #admin#admin .v2103-type-badge,#admin#admin .v2103-status-badge,#admin#admin .v2103-online-badge{font-size:11.5px!important;padding:3px 8px!important} /* ปุ่ม ดู/แก้ไข ลอยติดขอบขวา ไม่ต้องเลื่อนไปสุดเพื่อกด */ #admin#admin .v2103-table th.action,#admin#admin .v2103-table td.action{position:sticky;right:0;z-index:3;background:#fff!important;box-shadow:-8px 0 10px -8px rgba(15,23,42,.18)} #admin#admin .v2103-table th.action{background:#fafbfc!important;z-index:4} #admin#admin .v2103-table tbody tr:hover td.action{background:#fcfcfd!important} @media(max-width:1100px){#admin#admin .v2103-table{min-width:900px!important}} /* ============================================================ V21.15.34 — R1 แถบเตือนในหน้ารายงาน + M1/M2 มือถือ (แถบหัว Admin ทุกหน้า + หน้าแมสเซนเจอร์) ============================================================ */ .pe-report-warn{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;padding:12px 15px;border-radius:11px;background:#fff7ed;border:1px solid #fdba74;color:#9a3412;font-size:13.5px;line-height:1.6} .pe-report-warn b{color:#7c2d12;font-size:14.5px} .pe-report-warn code{font-family:ui-monospace,monospace;background:#ffedd5;border-radius:5px;padding:1px 6px;font-size:12.5px} @media(max-width:720px){ /* M1 — แถบหัวใช้ร่วมกันทุกหน้า: เดิมกว้าง 563px ที่จอ 375px */ #admin#admin .v21-admin-header{flex-wrap:wrap!important;height:auto!important;min-height:0!important;padding:10px 12px!important;row-gap:8px!important;column-gap:8px!important} #admin#admin .v21-global-search{order:9;flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:100%!important} #admin#admin .v21-global-search input,#admin#admin #v21GlobalSearch{width:100%!important;min-width:0!important;box-sizing:border-box!important} #admin#admin .v21-head-actions{margin-left:auto!important;flex:0 0 auto!important} /* M1 — แถวแท็บและแถวปุ่มของหน้าแมสเซนเจอร์ */ #admin#admin .pm-head,#admin#admin .pm-tabs,#admin#admin .pm-head-actions{flex-wrap:wrap!important;overflow:visible!important;width:auto!important;max-width:100%!important;gap:8px!important} #admin#admin .pm-tab,#admin#admin .pm-btn{white-space:normal!important;min-width:0!important;font-size:13px!important;padding:9px 12px!important} #admin#admin .pm-btn{flex:1 1 140px!important} /* M2 — ชิปตัวกรองสถานะ: เดิมยาว 900px เห็นแค่ 2 ชิป */ #admin#admin .pm-status-tabs{flex-wrap:wrap!important;overflow:visible!important;width:auto!important;max-width:100%!important;gap:6px!important} #admin#admin .pm-stab{flex:0 0 auto!important;font-size:12.5px!important;padding:6px 10px!important} } /* ============================================================ V21.15.35 — A5 ชื่อเมนู sidebar ที่จอกลาง + A6/M5 คำอ่านวันที่แบบไทย ============================================================ */ .pe-date-th{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:#64748b;font-weight:600;letter-spacing:.01em} /* A5 — app.css ซ่อนชื่อเมนูไว้ตั้งแต่จอ 1050px ลงมา (ตอนนั้น sidebar กว้าง 70px) แต่ชั้นหลัง ๆ บังคับ sidebar กลับเป็น ~210px ผลคือแถบกว้างเต็มแต่เหลือไอคอนล้วน ช่วง 721–1050px จึงคืนชื่อเมนูกลับมา (ต่ำกว่า 721px เป็นโหมดลิ้นชักซึ่งถูกต้องอยู่แล้ว) */ @media(min-width:721px) and (max-width:1050px){ #admin#admin .v21-nav-label{display:block!important;flex:1!important;text-align:left!important} #admin#admin .v21-nav-badge{display:inline-flex!important} #admin#admin .v21-side-footer{display:block!important} #admin#admin .v21-nav-btn{justify-content:flex-start!important;padding:10px 12px!important;gap:10px!important} #admin#admin .v21-nav-icon{width:auto!important;flex:0 0 auto!important} #admin#admin .v21-side-brand div{display:block!important} } /* ============================================================ V21.15.39 — หน้าลูกค้า: กล่องสรุปเส้นทางเคยลอยทับแผนที่ บนมือถือจึงบังหมุด A–B และเส้นทาง ตั้งแต่จอ 900px ลงมา (จุดเดียวกับที่หน้าลูกค้าเปลี่ยนเป็นคอลัมน์เดียวอยู่แล้ว) ให้ย้ายลงมาอยู่ใต้แผนที่แทน ============================================================ */ @media(max-width:900px){ #customerPortal .cp-map-panel{height:auto!important;display:flex!important;flex-direction:column!important;gap:10px!important;background:transparent!important} #customerPortal .cp-map{position:relative!important;inset:auto!important;height:300px!important;width:100%!important;border-radius:14px!important;overflow:hidden!important;background:#e8edf2!important} #customerPortal .cp-map-overlay{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;box-shadow:none!important;border-radius:12px!important;background:#fff!important;font-size:12.5px!important} } /* จอเล็กมาก ให้แผนที่เตี้ยลงอีกนิด จะได้เห็นทั้งแผนที่และข้อความในหน้าจอเดียว */ @media(max-width:430px){ #customerPortal .cp-map{height:250px!important} } /* V21.15.43 — the Messenger app's own duty status was cut to "สถานะ: พร้อมบริ…". .v2156-ready-row is a 3-column grid; the status cell got 132px for 140px of text. Let the status take the room it needs and let the area picker give room up instead. */ #rider#rider .v2156-ready-row{grid-template-columns:auto auto minmax(0,1fr)!important;align-items:center!important} #rider#rider .v2156-ready-left{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important} #rider#rider .v2156-area-wrap{min-width:0!important} #rider#rider .v2156-area-wrap select{width:100%!important;min-width:0!important} @media(max-width:360px){ #rider#rider .v2156-ready-row{grid-template-columns:auto auto!important;row-gap:8px!important} #rider#rider .v2156-area-wrap{grid-column:1/-1!important} } /* ============================================================ V21.15.95 — หน้าลูกค้าบน iPad (เจ้าของ: "หน้าลูกค้าดูในไอแพด เหมือนจะเพี้ยน ๆ ไม่ลงตัว") ไอแพดแนวตั้ง (กว้าง 700–900px) เคยได้หน้าตาแบบมือถือที่ยืดกว้าง: ปุ่มเข้าสู่ระบบไปติดโลโก้ ช่องกรอกยาวเต็มจอ และแผนที่ไปอยู่ล่างสุดของหน้า ต้องเลื่อนลงไปดูเส้นทาง ตอนนี้ใช้แบบเดียวกับไอแพดแนวนอน/คอม: ฟอร์มซ้าย แผนที่ขวา · หัวเว็บ 2 แถวสูงคงที่ 110px มือถือ (ต่ำกว่า 700px) ยังเป็นคอลัมน์เดียวเหมือนเดิม ============================================================ */ /* ปุ่มเข้าสู่ระบบ/ออก ชิดขวาเมื่อหัวเว็บแบ่งเป็น 2 แถว (มือถือ + ไอแพดแนวตั้ง) — เดิมไปติดอยู่ข้างโลโก้ */ @media(max-width:900px){ #customerPortal .cp-account{margin-left:auto} } @media(min-width:700px) and (max-width:900px){ #customerPortal .cp-topbar{height:110px!important;min-height:0!important;padding:6px 18px 0!important;align-content:space-between!important;row-gap:0!important} #customerPortal .cp-logo{height:46px!important} #customerPortal .cp-nav{margin:0 -18px!important;width:calc(100% + 36px)!important;align-items:stretch!important} body #customerPortal .cp-nav button{height:50px!important;padding:0 12px!important;font-size:16px!important;line-height:1.2!important} #customerPortal #cpOrderScreen{min-height:0!important} /* .cp-screen คิดหัวเว็บ 76px ไว้ → หน้าเลยจอ 34px */ #customerPortal .cp-order-layout{grid-template-columns:minmax(330px,390px) minmax(0,1fr)!important;height:calc(100vh - 110px)!important;height:calc(100dvh - 110px)!important;min-height:560px!important} #customerPortal .cp-order-panel{overflow-y:auto!important;border-right:1px solid #dde2e8!important;padding-bottom:110px!important} #customerPortal .cp-contact-grid{grid-template-columns:1fr 1fr!important} /* แผนที่เต็มคอลัมน์ขวา กล่องสรุปเส้นทางลอยด้านล่างแบบหน้าจอคอม (ยกเลิกกฎมือถือของ V21.15.39 เฉพาะช่วงนี้) */ #customerPortal .cp-map-panel{display:block!important;height:auto!important;background:#e8edf2!important;position:relative!important} #customerPortal .cp-map{position:absolute!important;inset:0!important;height:auto!important;border-radius:0!important} #customerPortal .cp-map-overlay{position:absolute!important;left:14px!important;right:14px!important;bottom:14px!important;box-shadow:0 8px 28px rgba(15,23,42,.18)!important} } /* ไอแพดแนวนอน: หัวเว็บจริงสูง 82px แต่ตัวเลย์เอาต์หักไว้ 76px (หน้าเลยจอ 6px) · 100dvh = ไม่นับแถบเครื่องมือของ Safari */ @media(min-width:901px) and (max-width:1366px) and (pointer:coarse){ body.customer-active #customerPortal #cpOrderScreen{min-height:0!important} body.customer-active #customerPortal .cp-order-layout{height:calc(100dvh - 82px)!important} } /* ตัวหนังสือเล็กบนแท็บเล็ต (เดิม 10–12px อ่านยากบนไอแพด) · ป้าย "จุดส่ง 1" เคยชิดขอบกล่อง */ @media(min-width:700px) and (max-width:1366px){ #customerPortal .cp-section-title{font-size:13.5px!important} #customerPortal .cp-order-panel .tiny{font-size:12px!important;line-height:1.45!important} #customerPortal .cp-stop-title{font-size:13.5px!important} #customerPortal .cp-route-price,#customerPortal .cp-thai-time-note{font-size:11.5px!important} #customerPortal .cp-distance,#customerPortal .cp-price-warning{font-size:12px!important} } #customerPortal .cp-stop-head{padding-top:2px;margin-bottom:6px} /* ============================================================ V21.15.95 — การ์ด "ติดตั้งแอปลงหน้าจอ" ในแอป Messenger (pe-device.js) ============================================================ */ .pe-install-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 12px;align-items:center;margin:12px 16px 0;padding:14px;background:#fff8e6;border:1px solid #efd9a0;border-radius:16px;box-shadow:0 4px 14px rgba(15,23,42,.06)} .pe-install-card[hidden]{display:none!important} .pe-install-card>img{width:52px;height:52px;border-radius:12px;display:block} .pe-install-body b{display:block;font-size:16px;font-weight:900;color:#111;margin-bottom:2px} .pe-install-body span{display:block;font-size:13.5px;line-height:1.5;color:#374151} .pe-install-act{grid-column:1/-1;display:flex;align-items:center;gap:14px} .pe-install-go{flex:1;min-height:46px;border:0;border-radius:12px;background:linear-gradient(180deg,#e7c173,#c2922e);color:#1f1705;font-size:16px;font-weight:900;cursor:pointer} .pe-install-later{background:none;border:0;color:#8a6414;font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 4px} #peInstallHelp{position:fixed;inset:0;z-index:12000;background:rgba(15,23,42,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px} #peInstallHelp[hidden]{display:none!important} #peInstallHelp .pe-install-sheet{width:min(460px,100%);background:#fff;border-radius:20px;padding:20px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 20px 50px rgba(0,0,0,.3)} #peInstallHelp h3{margin:0 0 4px;font-size:19px} #peInstallHelp p{margin:0 0 12px;color:#4b5563;font-size:14px} #peInstallHelp ol{margin:0;padding-left:22px;display:grid;gap:10px;font-size:15px;line-height:1.55} #peInstallHelp ol b{color:#8a6414} /* ============================================================ V21.15.97 — กล่องวิธีเปิดสิทธิ์ตำแหน่ง (#peGpsHelp ใช้ .pe-ask เดิม) · คำอธิบายในรายการปัญหาที่เครื่องพนักงานแจ้งเข้ามา ============================================================ */ #peGpsHelp .pe-gps-help{max-width:460px} #peGpsHelp .pe-gps-help h3{margin:0 0 6px;font-size:19px;line-height:1.35} #peGpsHelp .pe-gps-help p{margin:0 0 10px;color:#4b5563;font-size:14px} #peGpsHelp .pe-gps-help ol{margin:0 0 6px;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.55;text-align:left} #peGpsHelp .pe-gps-help ol b{color:#8a6414} .pe-errlog-hint{display:block;margin-top:4px;color:#8a6414!important;font-weight:700} /* ============================================================ V21.15.96 — ปุ่มเดียวทำงานทีละขั้น (pe-rider-steps.js) ติดล่างจอในหน้ารายละเอียดใบงานของ Messenger ============================================================ */ .pe-step-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:20;width:min(760px,100%);box-sizing:border-box;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(248,250,252,.97);border-top:1px solid #e2e8f0;box-shadow:0 -10px 30px rgba(15,23,42,.14)} .pe-step-bar[hidden]{display:none!important} .pe-step-count{font-size:13px;font-weight:800;color:#64748b;margin:0 2px 6px;min-height:16px} .pe-step-go{width:100%;min-height:74px;display:flex;align-items:center;gap:14px;text-align:left;border:0;border-radius:18px;padding:12px 18px;cursor:pointer;color:#fff;background:#2563eb;box-shadow:0 8px 20px rgba(37,99,235,.28);font:inherit} .pe-step-bar[data-tone="gold"] .pe-step-go{background:linear-gradient(180deg,#e7c173,#c2922e);color:#1f1705;box-shadow:0 8px 20px rgba(194,146,46,.32)} .pe-step-bar[data-tone="green"] .pe-step-go{background:#059669;box-shadow:0 8px 20px rgba(5,150,105,.3)} .pe-step-bar[data-tone="muted"] .pe-step-go{background:#e2e8f0;color:#475569;box-shadow:none} .pe-step-go:disabled{cursor:default;opacity:.92} .pe-step-icon{font-size:30px;line-height:1;flex:none;width:36px;text-align:center} .pe-step-text{display:flex;flex-direction:column;gap:3px;min-width:0} .pe-step-text b{font-size:21px;font-weight:900;line-height:1.25} .pe-step-text small{font-size:14px;font-weight:700;opacity:.9;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pe-step-more{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap} .pe-step-more button{flex:1 1 auto;min-height:40px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#334155;font-size:14px;font-weight:800;cursor:pointer;padding:6px 10px} .pe-step-more button[hidden]{display:none!important} .pe-step-more [data-fail]{color:#be123c;border-color:#fecdd3;background:#fff1f2} /* เว้นที่ด้านล่าง ไม่ให้เนื้อหาสุดท้ายโดนแถบปุ่มบัง */ #riderJobDetailBody.pe-steps-on{padding-bottom:190px} /* ปุ่มขั้นตอนเดิมที่กระจายอยู่ 3 ที่ — ซ่อน เพราะรวมมาที่ปุ่มใหญ่แล้ว (นำทาง / โทร / ถ่ายรูป / ส่งไม่สำเร็จ ยังอยู่ครบ) */ #riderJobDetailBody.pe-steps-on .rider-detail-actions .pe-track-action, #riderJobDetailBody.pe-steps-on .rider-detail-actions .rider-big-action.primary, #riderJobDetailBody.pe-steps-on .rider-detail-actions .rider-big-action.green, #riderJobDetailBody.pe-steps-on .pe-stop-track button, #riderJobDetailBody.pe-steps-on [id^="riderSuccessBtn_"], #riderJobDetailBody.pe-steps-on [id^="riderReturnCompleteBtn_"]{display:none!important} #riderJobDetailBody .rider-fail-row.pe-step-focus{outline:3px solid #f43f5e;outline-offset:4px;border-radius:12px;transition:outline-color .3s} @media(max-width:420px){.pe-step-text b{font-size:19px}.pe-step-go{min-height:68px;padding:10px 14px;gap:10px}} #peInstallHelp .pe-install-close{margin-top:16px;width:100%;min-height:46px;border:1px solid #d1d5db;border-radius:12px;background:#fff;font-size:15px;font-weight:800;cursor:pointer} /* ===== V21.15.98 พาร์ทไทม์ — เครดิตรายได้ (pe-parttime.js) ===== */ /* Messenger app: wallet card */ #v2156RiderShell .pe-pt{display:grid;gap:12px;margin-top:12px} #v2156RiderShell .pe-pt-card{background:#fff;border:1px solid #e0e3e7;border-radius:16px;padding:16px 18px} #v2156RiderShell .pe-pt-head{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:#15294a;color:#fff} #v2156RiderShell .pe-pt-head small{font-size:13px;font-weight:700;color:#c9d4e8} #v2156RiderShell .pe-pt-head b{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15} #v2156RiderShell .pe-pt-head span{font-size:13px;font-weight:600;color:#e3aa4f;line-height:1.45} #v2156RiderShell .pe-pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} #v2156RiderShell .pe-pt-grid>div{padding:10px 12px;border-radius:12px;background:#f5f6f8;min-width:0} #v2156RiderShell .pe-pt-grid small{display:block;font-size:12px;font-weight:700;color:#6b7280} #v2156RiderShell .pe-pt-grid b{display:block;margin-top:2px;font-size:17px;font-weight:800;color:#111827;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} #v2156RiderShell .pe-pt-card h4{margin:16px 0 6px;font-size:15px;font-weight:800;color:#111827} .pe-pt-list{list-style:none;margin:0;padding:0;display:grid} .pe-pt-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #eef0f2} .pe-pt-list li:first-child{border-top:0} .pe-pt-list li span{min-width:0} .pe-pt-list li b{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums} .pe-pt-list li small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#7b818b;overflow-wrap:anywhere} .pe-pt-list li em{flex:none;font-style:normal;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px} .pe-pt-in b{color:#15803d}.pe-pt-in em{background:#dcfce7;color:#166534} .pe-pt-out b{color:#1f2937}.pe-pt-out em{background:#eef2f7;color:#334155} .pe-pt-empty{margin:8px 0 0;font-size:13px;font-weight:600;color:#7b818b;text-align:center;padding:10px} .pe-pt-warn{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff7ed;color:#9a3412;font-size:13px;font-weight:700} .pe-pt-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:10050;transform:translate(-50%,20px);opacity:0;pointer-events:none; max-width:min(92vw,460px);padding:12px 18px;border-radius:14px;background:#14532d;color:#fff;font-size:15px;font-weight:800;line-height:1.4;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:opacity .25s,transform .25s} .pe-pt-toast.show{opacity:1;transform:translate(-50%,0)} /* Admin: Messenger page → เครดิตพาร์ทไทม์ */ #pmPartTimePane{margin-top:14px} #pmPartTimePane .pe-pt-setting{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;margin-bottom:14px} #pmPartTimePane .pe-pt-setting-text{flex:1 1 260px;min-width:0} #pmPartTimePane .pe-pt-setting-text b{display:block;font-size:15px;color:var(--pm-ink,#1f2530)} #pmPartTimePane .pe-pt-setting-text small,#pmPartTimePane .pe-pt-when{display:block;font-size:12px;color:var(--pm-muted,#7a818c)} #pmPartTimePane .pe-pt-when{flex-basis:100%} #pmPartTimePane .pe-pt-cut{display:inline-flex;align-items:center;gap:6px;font-weight:800} #pmPartTimePane .pe-pt-cut input{width:84px;height:42px;padding:0 10px;border:1px solid #dcdfe5;border-radius:10px;font-size:18px;font-weight:800;text-align:center} #pmPartTimePane .pe-pt-share{font-weight:700;color:var(--pm-text,#3b4250)} #pmPartTimePane .pe-pt-share b{color:#15803d;font-size:16px} #pmPartTimePane .pe-pt-summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-bottom:14px;padding:14px 18px;border-radius:16px;background:#15294a;color:#fff} #pmPartTimePane .pe-pt-summary small{display:block;font-size:12px;font-weight:700;color:#c9d4e8} #pmPartTimePane .pe-pt-summary b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums} #pmPartTimePane .pe-pt-summary p{flex:1 1 280px;margin:0;font-size:13px;line-height:1.5;color:#e3aa4f;font-weight:600} #pmPartTimePane .pe-pt-table td small{display:block;font-size:12px;color:var(--pm-muted,#7a818c)} #pmPartTimePane .pe-pt-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #pmPartTimePane .pe-pt-due{color:#b45309} #pmPartTimePane .pe-pt-actions{white-space:nowrap;text-align:right} #pmPartTimePane .pe-pt-actions .pm-btn{height:36px;padding:0 12px!important;font-size:13px!important} #pmPartTimePane .pe-pt-empty{padding:28px 12px} .pe-pt-link{border:0;background:none;padding:0;margin:0;color:#b77b1c;font-weight:800;text-decoration:underline;cursor:pointer} .pe-pt-link.danger{color:#be123c;font-size:12px;flex:none} .pe-pt-modal{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:16px;background:rgba(15,23,42,.45)} .pe-pt-modal-box{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.3);color:#1f2530} .pe-pt-modal-box h3{margin:0 0 6px;font-size:19px;font-weight:800} .pe-pt-modal-sub{margin:0 0 14px;font-size:14px;color:#4b5563} .pe-pt-modal-sub b{color:#b45309;font-variant-numeric:tabular-nums} .pe-pt-field{display:grid;gap:6px;margin-bottom:12px;font-size:14px;font-weight:700} .pe-pt-field input{height:46px;padding:0 12px;border:1px solid #d1d5db;border-radius:12px;font-size:17px;font-weight:700} .pe-pt-modal-hint{margin:0 0 14px;font-size:13px;color:#6b7280;line-height:1.5} .pe-pt-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px} .pe-pt-modal .pm-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:11px;font-size:15px;font-weight:800;cursor:pointer} .pe-pt-modal .pm-btn.gold{background:#e3aa4f;border:1px solid #e3aa4f;color:#241a08} .pe-pt-modal .pm-btn.ghost{background:#fff;border:1px solid #dcdfe5;color:#1f2530} .pe-pt-modal .pm-btn:disabled{opacity:.6;cursor:wait} @media(max-width:560px){#pmPartTimePane .pe-pt-actions{white-space:normal}#pmPartTimePane .pe-pt-actions .pm-btn{width:100%;margin-top:6px}.pe-pt-modal-actions .pm-btn{flex:1}}#pmPartTimePane .pe-pt-table th.num{text-align:right!important} /* ===== V21.15.98 ช่อง "ประเภทพนักงาน / รายได้": ชื่อสั้น + สีน้ำตาล 3 ระดับ (เจ้าของขอ) ===== งานด่วน = น้ำตาลอ่อนมาก · เงินเดือน = เข้มขึ้นหน่อย · พาร์ทไทม์ = น้ำตาล */ option.pe-wt-urgent{background:#f7efe4;color:#4a3826} option.pe-wt-salary{background:#e0c29a;color:#3a2714} option.pe-wt-parttime{background:#9a6a3e;color:#fff} select.pe-wt-select,#admin#admin.v21-admin select.pe-wt-select{font-weight:800!important} select.pe-wt-select[data-wt="urgent"],#admin#admin.v21-admin select.pe-wt-select[data-wt="urgent"]{background-color:#f7efe4!important;color:#4a3826!important;border-color:#e3cfb3!important} select.pe-wt-select[data-wt="salary"],#admin#admin.v21-admin select.pe-wt-select[data-wt="salary"]{background-color:#e0c29a!important;color:#3a2714!important;border-color:#c49d6b!important} select.pe-wt-select[data-wt="parttime"],#admin#admin.v21-admin select.pe-wt-select[data-wt="parttime"]{background-color:#9a6a3e!important;color:#fff!important;border-color:#7a522d!important} .pe-wt-hint{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#7a6a58;line-height:1.4}/* V21.15.98 ค่าบริการพาร์ทไทม์ 5 ช่อง (ตามหน้า "ค่าบริการ" ที่เจ้าของส่งมา) */ #pmPartTimePane .pe-pt-setting-text{flex-basis:100%} #pmPartTimePane .pe-pt-rates{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 18px} #pmPartTimePane .pe-pt-rate{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--pm-line,#e9ebef);border-radius:12px;background:#fcfbf8;min-width:0} #pmPartTimePane .pe-pt-rate>span:first-child{font-weight:800;color:var(--pm-ink,#1f2530);min-width:0} #pmPartTimePane .pe-pt-rate small{display:block;font-size:12px;font-weight:600;color:var(--pm-muted,#7a818c)} #pmPartTimePane .pe-pt-rate-in{display:inline-flex;align-items:center;gap:6px;flex:none} #pmPartTimePane .pe-pt-rate-in input{width:92px;height:42px;padding:0 10px;border:1px solid #dcdfe5;border-radius:10px;font-size:17px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums} #pmPartTimePane .pe-pt-rate-in em{font-style:normal;font-weight:700;color:var(--pm-muted,#7a818c);min-width:26px} #pmPartTimePane .pe-pt-example{flex-basis:100%;margin:2px 0 0;padding:10px 12px;border-radius:12px;background:#fdf3e1;color:#5f4717;font-size:13px;line-height:1.6} #pmPartTimePane .pe-pt-example.bad{background:#fff1f2;color:#9f1239} #pmPartTimePane .pe-pt-setting-foot{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px} #pmPartTimePane .pe-pt-setting-foot .pe-pt-when{flex-basis:auto} /* ===== V21.15.99 กล่องที่เปิดจากหน้ารายละเอียดงาน ต้องอยู่ "หน้า" หน้ารายละเอียดงาน ===== อนุสรณ์: "กดจุด B ไม่ได้ ทำให้ปิดงานไม่ได้" — อยู่ห่างหมุดเกิน 250–500 ม. ระบบเปิดกล่องให้ใส่เหตุผล (.pe-ask z 9500) แต่หน้ารายละเอียดงาน (.rider-detail-overlay) อยู่ชั้น 99999 กล่องจึงไปอยู่ข้างหลัง มองไม่เห็น และปุ่มขั้นตอนค้าง "กำลังบันทึก…" กล่องวิธีเปิดสิทธิ์ตำแหน่ง (#peGpsHelp ใช้ .pe-ask) · ดูรูป · ข้อความเติมเครดิต ก็โดนแบบเดียวกัน */ .pe-ask{z-index:100100!important} #pePhotoViewer{z-index:100120!important} .pe-pt-toast{z-index:100110} /* V21.16.00 แถบ "มีแอปรุ่นใหม่ · แตะเพื่ออัปเดต" (pe-device.js) — อยู่เหนือทุกหน้า รวมหน้ารายละเอียดงาน */ .pe-update-bar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:100200;display:flex;align-items:center;gap:12px; max-width:calc(100vw - 24px);padding:10px 12px 10px 16px;border-radius:14px;background:#15294a;color:#fff;font-size:15px;font-weight:800;box-shadow:0 12px 30px rgba(15,23,42,.3);cursor:pointer} .pe-update-bar[hidden]{display:none} .pe-update-bar button{flex:none;min-height:38px;padding:0 16px;border:0;border-radius:10px;background:#e3aa4f;color:#241a08;font-size:15px;font-weight:800;cursor:pointer} /* ===== V21.16.02 สีเวลาเข้างาน (หน้า Messenger ของแอดมิน) — เจ้าของ: เข้า 08:00 = เขียว · 08:01–08:30 = ส้ม · หลังจากนั้น = แดง ===== */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big.in.pm-in-on,#v2106MessengerPage .pm-big.in.pm-in-on,.pm-modal .pm-in-on{color:#15803d!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big.in.pm-in-late,#v2106MessengerPage .pm-big.in.pm-in-late,.pm-modal .pm-in-late{color:#e7710b!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big.in.pm-in-very,#v2106MessengerPage .pm-big.in.pm-in-very,.pm-modal .pm-in-very{color:#dc2626!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td small.pm-in-note,#v2106MessengerPage .pm-table td small.pm-in-note{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:999px;font-weight:800!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td small.pm-in-note.pm-in-on,#v2106MessengerPage .pm-table td small.pm-in-note.pm-in-on{background:#e6f6ec;color:#15803d!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td small.pm-in-note.pm-in-late,#v2106MessengerPage .pm-table td small.pm-in-note.pm-in-late{background:#fff0e1;color:#c2570a!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td small.pm-in-note.pm-in-very,#v2106MessengerPage .pm-table td small.pm-in-note.pm-in-very{background:#fdecec;color:#dc2626!important} .pm-modal small.pm-in-note{font-weight:800} #v2106MessengerPage .pm-late-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #v2106MessengerPage .pm-late-legend[hidden]{display:none} #v2106MessengerPage .pm-late-legend i{display:inline-block;width:12px;height:12px;border-radius:4px} #v2106MessengerPage .pm-late-legend i.pm-in-on{background:#15803d}#v2106MessengerPage .pm-late-legend i.pm-in-late{background:#e7710b}#v2106MessengerPage .pm-late-legend i.pm-in-very{background:#dc2626} #v2106MessengerPage .pm-late-legend span{margin-left:4px} /* V21.16.03 แชร์ติดตามงานให้ลูกค้า (assets/pe-share.js) — panel above the Admin job detail (z 16000) and the customer page */ #peShareSheet.pe-share-bg{position:fixed;inset:0;z-index:100150;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.45)} #peShareSheet.pe-share-bg.show{display:flex} #peShareSheet .pe-share-card{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:#111827;border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.28);font-family:inherit} #peShareSheet .pe-share-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #e2e8f0;position:sticky;top:0;background:#fff} #peShareSheet .pe-share-head b{font-size:16px} #peShareSheet .pe-share-x{border:0;background:#f1f5f9;color:#111827;border-radius:999px;width:34px;height:34px;font-size:15px;cursor:pointer} #peShareSheet .pe-share-body{padding:14px 16px 16px;display:grid;gap:10px} #peShareSheet .pe-share-label{font-size:13px;font-weight:700;color:#475569} #peShareSheet .pe-share-text{width:100%;resize:vertical;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font:14px/1.5 inherit;font-family:inherit;color:#111827;background:#f8fafc} #peShareSheet .pe-share-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} #peShareSheet .pe-share-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;color:#111827;font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer} #peShareSheet .pe-share-btn.primary{background:#111827;border-color:#111827;color:#fff} #peShareSheet .pe-share-btn.line{background:#06c755;border-color:#06c755;color:#fff} #peShareSheet .pe-share-link{display:flex;gap:8px} #peShareSheet .pe-share-link input{flex:1;min-width:0;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;font:13px ui-monospace,Menlo,Consolas,monospace;color:#334155;background:#f8fafc} #peShareSheet .pe-share-mini{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:0 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap} #peShareSheet .pe-share-msg{min-height:20px;font-size:14px;font-weight:700;color:#047857} #peShareSheet .pe-share-msg.bad{color:#b91c1c} #peShareSheet .pe-share-info{margin:0;padding-left:18px;color:#64748b;font-size:13px;line-height:1.55} #peShareSheet .pe-share-renew{justify-self:start;border:0;background:none;color:#64748b;font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px 0} #peShareSheet .pe-share-renew.armed{color:#b91c1c;font-weight:700} #peShareSheet button:focus-visible,#peShareSheet a:focus-visible{outline:3px solid #60a5fa;outline-offset:2px} @media (max-width:560px){#peShareSheet.pe-share-bg{align-items:flex-end;padding:0}#peShareSheet .pe-share-card{border-radius:16px 16px 0 0;max-height:92dvh}#peShareSheet .pe-share-actions{grid-template-columns:1fr}} .cp-detail-box.pe-share-box{display:grid;gap:6px} .cp-detail-box.pe-share-box .cp-share-btn{justify-self:start;margin-top:4px;min-height:42px;padding:8px 16px;border-radius:10px;border:0;background:#111827;color:#fff;font:inherit;font-weight:700;cursor:pointer} /* V21.16.04 Polite Points (assets/pe-points.js) — box in the Admin job detail + tab in the customer popup */ #v2105OrderDetailBody .pe-pts-box{margin-top:14px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fffdf5;display:grid;gap:6px} #v2105OrderDetailBody .pe-pts-box>b{font-size:14px} #v2105OrderDetailBody .pe-pts-have{font-size:14px;color:#334155} #v2105OrderDetailBody .pe-pts-num{font-size:22px;font-weight:800;color:#a16207;font-variant-numeric:tabular-nums} #v2105OrderDetailBody .pe-pts-note{font-size:12.5px;color:#64748b} #v2105OrderDetailBody .pe-pts-used{font-size:13.5px;font-weight:700;color:#047857} #v2105OrderDetailBody .pe-pts-box .pe-pts-redeem{justify-self:start} #v2105OrderDetailBody .pe-pts-box .pe-pts-redeem.armed,#v2105OrderDetailBody .pe-pts-box .pe-pts-undo.armed{background:#b45309!important;border-color:#b45309!important;color:#fff!important} #v2105OrderDetailBody .pe-pts-box .pe-pts-redeem:disabled{opacity:.45;cursor:not-allowed} #v2105OrderDetailBody .pe-pts-undo{justify-self:start;border:0;background:none;color:#b91c1c;font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:2px 0} #v2105OrderDetailBody .pe-pts-msg{min-height:16px;font-size:13px;font-weight:700;color:#047857} #v2105OrderDetailBody .pe-pts-msg.bad{color:#b91c1c} /* V21.16.10 "💰 ค่ารอบ Messenger" in the job detail (pe-parttime.js) */ #v2105OrderDetailBody .pe-pay-box{margin-top:14px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;display:grid;gap:6px} #v2105OrderDetailBody .pe-pay-box>b{font-size:14px} #v2105OrderDetailBody .pe-pay-line{font-size:14px;color:#334155} #v2105OrderDetailBody .pe-pay-warn{font-size:13px;font-weight:700;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:6px 10px} #admin#admin.v21-admin #v2105OrderDetailBody .pe-pay-btn,#v2105OrderDetailBody .pe-pay-btn{justify-self:start;min-height:38px;padding:7px 14px!important;border-radius:10px!important;border:1px solid #cbd5e1!important;background:#fff!important;color:#0f172a!important;font-size:13.5px!important;font-weight:700;cursor:pointer} #admin#admin.v21-admin #v2105OrderDetailBody .pe-pay-btn.v2105-black-btn,#v2105OrderDetailBody .pe-pay-btn.v2105-black-btn{background:#111!important;border-color:#111!important;color:#fff!important} #admin#admin.v21-admin #v2105OrderDetailBody .pe-pay-btn.armed,#v2105OrderDetailBody .pe-pay-btn.armed{background:#b45309!important;border-color:#b45309!important;color:#fff!important} #v2105OrderDetailBody .pe-pay-btn:disabled{opacity:.5;cursor:wait} #v2105OrderDetailBody .pe-pay-msg{min-height:16px;font-size:13px;font-weight:600;color:#047857} #v2105OrderDetailBody .pe-pay-msg.bad{color:#b91c1c} .pe-pts-tab{display:grid;gap:10px} .pe-pts-tab .pe-pts-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .pe-pts-tab .pe-pts-tiles div{border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;background:#fff} .pe-pts-tab .pe-pts-tiles span{display:block;font-size:12px;color:#64748b} .pe-pts-tab .pe-pts-tiles b{font-size:20px;font-variant-numeric:tabular-nums} .pe-pts-tab .pe-pts-tiles div:first-child b{color:#a16207} .pe-pts-tab .pe-pts-note{font-size:12.5px;color:#64748b} .pe-pts-tab .pe-pts-note.bad{color:#b91c1c} .pe-pts-tab h4{margin:6px 0 0;font-size:14px} .pe-pts-tab .pe-pts-list{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff} .pe-pts-tab .pe-pts-row{display:grid;grid-template-columns:150px 90px 1fr 70px;gap:8px;align-items:center;padding:7px 12px;border-top:1px solid #f1f5f9;font-size:13px;font-variant-numeric:tabular-nums} .pe-pts-tab .pe-pts-row:first-child{border-top:0} .pe-pts-tab .pe-pts-row b{text-align:right} .pe-pts-tab .pe-pts-row b.plus{color:#047857}.pe-pts-tab .pe-pts-row b.minus{color:#b91c1c} .pe-pts-tab .pe-pts-job{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#1d4ed8;text-align:left;cursor:pointer} .pe-pts-tab .pe-pts-empty{padding:10px 12px;color:#94a3b8;font-size:13px} @media (max-width:640px){.pe-pts-tab .pe-pts-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pe-pts-tab .pe-pts-row{grid-template-columns:1fr auto;grid-auto-rows:auto}.pe-pts-tab .pe-pts-row span{font-size:12px;color:#64748b}} #admin#admin.v21-admin #v2105OrderDetailBody .pe-pts-num,#v2105OrderDetailBody .pe-pts-box .pe-pts-num{font-size:22px!important;font-weight:800!important;line-height:1.2} /* V21.16.05 ดาวพนักงาน (assets/pe-stars.js) — Admin ranking tab · job detail · customer order page · Messenger home card */ #v2106MessengerPage .pm-star-ico{color:#d97706;font-size:15px} #v2106MessengerPage .pe-st-page{display:grid;gap:12px} #v2106MessengerPage .pe-st-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-end} #v2106MessengerPage .pe-st-head h3{margin:0;font-size:18px} #v2106MessengerPage .pe-st-head p{margin:2px 0 0;color:#64748b;font-size:13px} #v2106MessengerPage .pe-st-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap} #v2106MessengerPage .pe-st-tools label{display:flex;gap:6px;align-items:center;font-size:13px;color:#475569} #v2106MessengerPage .pe-st-tools input{border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;font:inherit} #v2106MessengerPage .pe-st-wrap{overflow-x:auto;border:1px solid #e2e8f0;border-radius:12px;background:#fff} #v2106MessengerPage .pe-st-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px} #v2106MessengerPage .pe-st-table th{background:#f8fafc;color:#475569;font-weight:700;text-align:left;padding:9px 10px;border-bottom:1px solid #e2e8f0;white-space:nowrap} #v2106MessengerPage .pe-st-table td{padding:9px 10px;border-bottom:1px solid #f1f5f9;vertical-align:top} #v2106MessengerPage .pe-st-table .num{text-align:right;font-variant-numeric:tabular-nums} #v2106MessengerPage .pe-st-table td.rank{width:42px;font-size:18px;text-align:center} #v2106MessengerPage .pe-st-table tr.pe-st-top td{background:#fffbeb} #v2106MessengerPage .pe-st-table td.who button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#1d4ed8;cursor:pointer;text-align:left} #v2106MessengerPage .pe-st-table td.who small,#v2106MessengerPage .pe-st-table td small{display:block;color:#94a3b8;font-size:11.5px} #v2106MessengerPage .pe-st-table td.overall{font-size:17px;font-weight:800;color:#b45309;white-space:nowrap} #v2106MessengerPage .pe-st-table.dim td{color:#64748b} #v2106MessengerPage .pe-st-avg{color:#b45309;white-space:nowrap} #v2106MessengerPage .pe-st-parts{font-size:11.5px;color:#64748b} #v2106MessengerPage .pe-st-more td{background:#f8fafc} #v2106MessengerPage .pe-st-c{font-size:13px;margin:3px 0} #v2106MessengerPage .pe-st-c small{color:#94a3b8} #v2106MessengerPage .pe-st-c.admin{color:#475569} #v2106MessengerPage .pe-st-stars{color:#f59e0b;letter-spacing:1px} #v2106MessengerPage .pe-st-none{color:#cbd5e1} #v2106MessengerPage .pe-st-note{color:#64748b;font-size:13px;padding:10px 2px} #v2106MessengerPage .pe-st-note.bad{color:#b91c1c} #v2106MessengerPage .pe-st-sub{margin:6px 0 0;font-size:14px;color:#475569} #v2106MessengerPage .pe-st-legend{font-size:12px;color:#64748b;line-height:1.6} #v2105OrderDetailBody .pe-st-box{margin-top:14px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;display:grid;gap:8px} #v2105OrderDetailBody .pe-st-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px} #v2105OrderDetailBody .pe-st-line>span:first-child{min-width:56px;color:#64748b;font-weight:700} #v2105OrderDetailBody .pe-st-stars{color:#f59e0b;letter-spacing:1px} #v2105OrderDetailBody .pe-st-note{font-size:12.5px;color:#64748b} #v2105OrderDetailBody .pe-st-text{border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px} #v2105OrderDetailBody .pe-st-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .pe-st-msg{font-size:13px;font-weight:700;color:#047857}.pe-st-msg.bad{color:#b91c1c} .pe-st-pick{display:inline-flex;gap:4px} .pe-st-pick button{width:36px;height:36px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;color:#cbd5e1;font-size:20px;line-height:1;cursor:pointer;padding:0} .pe-st-pick button.on{color:#f59e0b;background:#fffbeb;border-color:#fcd34d} #admin#admin.v21-admin .pe-st-pick button{width:36px!important;height:36px!important;min-height:0!important;padding:0!important;font-size:20px!important} .cp-detail-box.pe-st-cbox{display:grid;gap:8px} /* V21.16.33 the Messenger's all-time customer stars beside their name */ #cpHistoryDetail .pe-st-ms{white-space:nowrap;color:#b45309;font-weight:700;font-variant-numeric:tabular-nums} #cpHistoryDetail .pe-st-ms small{color:#64748b;font-weight:500} .cp-detail-box.pe-st-cbox .pe-st-text{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px;font:inherit;resize:vertical} .cp-detail-box.pe-st-cbox .pe-st-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .cp-detail-box.pe-st-cbox .cp-share-btn{min-height:42px;padding:8px 16px;border-radius:10px;border:0;background:#111827;color:#fff;font:inherit;font-weight:700;cursor:pointer} .pe-st-rcard{margin:10px 12px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #fde68a;box-shadow:0 2px 10px rgba(15,23,42,.06);display:grid;gap:6px;color:#111827} .pe-st-rcard .pe-st-rhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .pe-st-rcard .pe-st-rhead span{font-size:12px;color:#64748b} .pe-st-rcard .pe-st-rbig{font-size:26px;font-weight:800;color:#b45309;display:flex;align-items:baseline;gap:8px} .pe-st-rcard .pe-st-rbig small{font-size:12px;font-weight:600;color:#64748b} .pe-st-rcard .pe-st-rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .pe-st-rcard .pe-st-rgrid div{background:#fffbeb;border-radius:10px;padding:6px 8px;display:grid;gap:1px} .pe-st-rcard .pe-st-rgrid span{font-size:11px;color:#92400e} .pe-st-rcard .pe-st-rgrid small{font-size:10.5px;color:#64748b} .pe-st-rcard .pe-st-avg{color:#b45309} .pe-st-rcard .pe-st-none{color:#cbd5e1} .pe-st-rcard .pe-st-parts{font-size:11.5px;color:#64748b} .pe-st-rcard .pe-st-c{font-size:12.5px;color:#334155} .pe-st-rcard .pe-st-stars{color:#f59e0b} .pe-st-rcard .pe-st-note{font-size:12.5px;color:#64748b} #admin#admin.v21-admin #v2106MessengerPage .pe-st-table td.who{min-width:180px;white-space:nowrap} #admin#admin.v21-admin #v2106MessengerPage .pe-st-table td.who button{white-space:nowrap!important;width:auto!important;min-height:0!important;height:auto!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;color:#1d4ed8!important;font-weight:700!important;font-size:14px!important} #admin#admin.v21-admin #v2106MessengerPage .pe-st-table td:nth-child(6){min-width:230px} #admin#admin.v21-admin #v2106MessengerPage .pe-st-table td:nth-child(4),#admin#admin.v21-admin #v2106MessengerPage .pe-st-table td:nth-child(5){white-space:nowrap} #admin#admin.v21-admin #v2106MessengerPage .pe-st-head h3{font-size:18px!important;margin:0!important} /* V21.16.06 iPad: the cleanup tool's checkbox ("แสดงเฉพาะรายการที่ดูเป็นงานทดสอบ") took app.css's input{width:100%} and squeezed its text into a narrow column (owner's iPad photo). Real checkbox size, and the row spans the whole card. */ #admin .v2140-cleanup-controls .v2140-cleanup-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;width:auto} #admin .v2140-cleanup-controls .v2140-cleanup-check input[type=checkbox]{width:22px!important;min-width:22px;height:22px!important;flex:0 0 22px;margin:2px 0 0!important;padding:0!important} #admin .v2140-cleanup-controls .v2140-cleanup-check span{flex:1 1 auto;min-width:0} /* V21.16.06 the V16 scan card's "📸 ถ่ายรูป" is now a