/* ============================================================
   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}
}