/* ===================================================================
pos-mobile.css — สไตล์เฉพาะจอมือถือของแถบควบคุม topbar หน้า POS
(คู่กับ js/pos-mobile.js — แยกไฟล์ตามชนิดจอ: มือถือใช้ไฟล์นี้, จอคอมใช้ css/pos.css)
โหลดต่อท้าย pos.css และ mobile.css ใน index.html เสมอ (ทุกจอโหลดไฟล์นี้เหมือนกัน)
*** กติกาเดียวที่ต้องคุมเข้มที่สุดในไฟล์นี้: ห้ามกระทบจอคอมแม้แต่บรรทัดเดียว ***
ทำได้โดยทุก selector ในไฟล์ต้องขึ้นต้นด้วย "body.is-mobile-modern" เสมอ — คลาสนี้ถูกเติม/ถอด
ที่ โดย js/mobile-shell.js ตาม window.innerWidth <= 860px เท่านั้น (ดูคอมเมนต์หัวไฟล์
mobile.css) จอคอมจะไม่มีคลาสนี้ = กฎในไฟล์นี้ไม่ทำงานเลย เท่ากับ "เช็คจอแล้วเลือกไฟล์ที่ใช้แสดงผล"
โดยไม่ต้องสลับ จริงๆ (สลับ ด้วย JS จะเกิด FOUC กระพริบเห็นสไตล์ผิดก่อนโหลดเสร็จ) */
/* บังคับให้แถวควบคุมเต็มความกว้างจอเสมอบนมือถือ — ต้องเจาะจงแบบนี้ (ไม่ใช่แค่ media query เฉยๆ)
เพราะ pos.css มีกฎ .topbar-actions:has(.pos-topbar-actions){flex:1} ที่ specificity สูงกว่ากฎ
.topbar-actions{flex-basis:100%;order:3} ปกติของ layout.css ตอนจอมือถือ ถ้าไม่ทับตรงนี้
แถวควบคุมจะไม่ยอมเต็มความกว้างจอ ทำให้ปุ่ม/ช่องเลือกด้านในไม่มีพื้นที่ wrap แล้วล้นขอบจอขวาแทน */
body.is-mobile-modern .topbar-actions:has(.pos-topbar-actions) {
flex-basis: 100%;
min-width: 0;
}
body.is-mobile-modern .pos-topbar-select {
max-width: 140px;
}
body.is-mobile-modern .pos-topbar-mode-fields {
min-width: 0;
}
/* แต่ละกลุ่มควบคุมขึ้นแถวของตัวเอง เต็มความกว้าง แทนที่จะพยายามยัดรวมแถวเดียว
กับปุ่มสลับโหมด/ช่องทางรับเงิน แล้วล้นจนปุ่มดูใหญ่ผิดปกติหรือถูกดันไปอยู่โดดๆ */
body.is-mobile-modern .pos-topbar-actions {
gap: 10px;
}
body.is-mobile-modern .pos-topbar-toggle.view-switch {
width: 100%;
}
body.is-mobile-modern .pos-topbar-toggle.view-switch button {
flex: 1 1 0;
justify-content: center;
padding: 10px 8px;
}
body.is-mobile-modern .pos-topbar-mode-fields {
width: 100%;
flex-wrap: wrap;
}
body.is-mobile-modern .pos-topbar-select-wrap {
flex: 1 1 auto;
min-width: 0;
}
body.is-mobile-modern .pos-topbar-cart-group {
width: 100%;
padding-left: 0;
border-left: none;
border-top: 1px dashed var(--line);
padding-top: 10px;
justify-content: space-between;
}
body.is-mobile-modern .pos-topbar-cart-group .btn.btn-sm {
flex: 1 1 0;
justify-content: center;
}
/* จอมือถือแคบมาก (<=480px) — ยังต้องใช้ media query ซ้อนเพิ่ม เพราะ is-mobile-modern
เป็น class เดียวครอบคลุมทั้งช่วง <=860px ไม่ได้แยกเบอร์จอเล็ก/ใหญ่ให้เอง */
@media (max-width: 480px) {
body.is-mobile-modern .pos-topbar-actions {
width: 100%;
}
body.is-mobile-modern .pos-topbar-select {
max-width: none;
width: 100%;
}
body.is-mobile-modern .pos-topbar-cart-group .pos-cart-panel-title {
display: none; /* จอแคบมาก: ซ่อนป้ายข้อความ เหลือแค่ปุ่ม ล้างตะกร้า/บิลที่พักไว้ ให้พอดีแถวเดียว */
}
}