/* =================================================================== mobile.css — ดีไซน์มือถือสมัยใหม่ (Theme "aurora" — มิ้นท์/เขียว/ม่วง ไล่เฉด) โหลดเป็นไฟล์ CSS ไฟล์สุดท้ายใน index.html (ต่อท้าย components.css ทุกไฟล์) *** กติกาเดียวที่ต้องคุมเข้มที่สุดในไฟล์นี้: ห้ามกระทบจอคอมแม้แต่บรรทัดเดียว *** ทำได้โดยทุก selector ในไฟล์ (ยกเว้นส่วนตั้งค่า token เริ่มต้นที่ :root) ต้องขึ้นต้นด้วย "body.is-mobile-modern" เสมอ — คลาสนี้ถูกเติม/ถอดที่ โดย js/mobile-shell.js ตาม window.innerWidth <= 860px เท่านั้น จอคอมจะไม่มีคลาสนี้ = กฎในไฟล์นี้ไม่ทำงานเลย สีทั้งหมดอ้างอิงจากตัวแปร --mob-* ที่ตั้งค่าไว้ที่ :root ด้านล่าง (ค่าเริ่มต้น/fallback) แล้ว js/mobile-theme-prefs.js จะ override ค่าพวกนี้ตอน runtime ตามธีมที่เลือกไว้ (อ่านจาก properties.mobile_theme_prefs ผ่าน PocketBase) เพื่อให้ "เบื่อแล้วเปลี่ยนธีม" ทำได้ง่ายๆ แค่เปลี่ยนค่าตัวแปร ไม่ต้องแก้ CSS ไฟล์นี้เลย =================================================================== */ :root { /* ---- ค่าเริ่มต้น (fallback ก่อน mobile-theme-prefs.js โหลดเสร็จ) = Theme 1 "aurora" ---- */ --mob-header-grad: linear-gradient(135deg, #14B8A6 0%, #22C55E 45%, #7C6CF6 100%); --mob-stat1-grad: linear-gradient(160deg, #38BDF8, #6366F1); --mob-stat1-glow: rgba(99, 102, 241, .45); --mob-stat2-grad: linear-gradient(160deg, #A855F7, #EC4899); --mob-stat2-glow: rgba(236, 72, 153, .45); --mob-stat3-grad: linear-gradient(160deg, #FB923C, #F43F5E); --mob-stat3-glow: rgba(244, 63, 94, .45); --mob-chip-active-grad: linear-gradient(120deg, #14B8A6, #6366F1); --mob-chip-active-glow: rgba(99, 102, 241, .5); --mob-room-available-grad: linear-gradient(155deg, #34D399, #059669); --mob-room-available-glow: rgba(5, 150, 105, .32); --mob-room-occupied-grad: linear-gradient(155deg, #FB7185, #DB2777); --mob-room-occupied-glow: rgba(219, 39, 119, .32); --mob-room-reserved-grad: linear-gradient(155deg, #FDA4AF, #FB7185); --mob-room-reserved-glow: rgba(251, 113, 133, .3); --mob-room-cleaning-grad: linear-gradient(155deg, #FBBF24, #F97316); --mob-room-cleaning-glow: rgba(249, 115, 22, .3); --mob-room-maintenance-grad: linear-gradient(155deg, #C4B5FD, #8B5CF6); --mob-room-maintenance-glow: rgba(139, 92, 246, .3); --mob-navbar-active-grad: linear-gradient(135deg, #14B8A6, #6366F1); --mob-navbar-active-glow: rgba(99, 102, 241, .5); --mob-fab-grad: linear-gradient(145deg, #7C6CF6, #14B8A6); --mob-fab-glow: rgba(124, 108, 246, .55); --mob-text-on-grad: #FFFFFF; } /* ---------- แถบเมนูล่าง (ของใหม่ทั้งหมด — ไม่มีอยู่บนจอคอม) ---------- */ .mobile-bottom-nav { display: none; } body.is-mobile-modern .mobile-bottom-nav { display: flex; justify-content: space-around; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; background: color-mix(in srgb, var(--bg, #fff) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 22px; padding: 8px 4px; box-shadow: 0 16px 32px -14px rgba(30, 20, 60, .35); border: 1px solid color-mix(in srgb, var(--line, #ddd) 60%, transparent); } body.is-mobile-modern .mobile-bottom-nav .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-muted, #9391a4); font-size: 10px; font-weight: 600; padding: 6px 12px; border-radius: 14px; cursor: pointer; user-select: none; } body.is-mobile-modern .mobile-bottom-nav .mobile-nav-item i { font-size: 19px; } body.is-mobile-modern .mobile-bottom-nav .mobile-nav-item.active { color: var(--mob-text-on-grad); background: var(--mob-navbar-active-grad); box-shadow: 0 8px 16px -6px var(--mob-navbar-active-glow); } /* กันเนื้อหาโดนแถบเมนูล่างบัง */ body.is-mobile-modern #content { padding-bottom: 84px; } /* ---------- การ์ดสถิติ .stat-grid .stat — ใช้ร่วมกันหลายหน้า (checkin.js / dashboard.js / settings.js) ---------- */ body.is-mobile-modern .stat-grid .stat { border: none; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .25); } body.is-mobile-modern .stat-grid .stat .stat-num, body.is-mobile-modern .stat-grid .stat .stat-label { color: var(--mob-text-on-grad); } body.is-mobile-modern .stat-grid .stat.stat-neutral { background: var(--mob-stat1-grad); box-shadow: 0 14px 26px -12px var(--mob-stat1-glow); } body.is-mobile-modern .stat-grid .stat.stat-purple { background: var(--mob-stat2-grad); box-shadow: 0 14px 26px -12px var(--mob-stat2-glow); } body.is-mobile-modern .stat-grid .stat.stat-tangerine, body.is-mobile-modern .stat-grid .stat.stat-slate { background: var(--mob-stat3-grad); box-shadow: 0 14px 26px -12px var(--mob-stat3-glow); } /* ---------- ชิป/แท็บกรอง (โซน, ตึก ฯลฯ) ---------- */ body.is-mobile-modern .chip.active, body.is-mobile-modern .building-tab.active { background: var(--mob-chip-active-grad) !important; color: var(--mob-text-on-grad) !important; border-color: transparent !important; box-shadow: 0 8px 16px -6px var(--mob-chip-active-glow); } /* ---------- การ์ดห้องพัก .room-tile ตามสถานะ ---------- */ body.is-mobile-modern .room-tile.st-available { background: var(--mob-room-available-grad); box-shadow: 0 12px 22px -12px var(--mob-room-available-glow); } body.is-mobile-modern .room-tile.st-occupied { background: var(--mob-room-occupied-grad); box-shadow: 0 12px 22px -12px var(--mob-room-occupied-glow); } body.is-mobile-modern .room-tile.st-reserved { background: var(--mob-room-reserved-grad); box-shadow: 0 12px 22px -12px var(--mob-room-reserved-glow); } body.is-mobile-modern .room-tile.st-cleaning { background: var(--mob-room-cleaning-grad); box-shadow: 0 12px 22px -12px var(--mob-room-cleaning-glow); } body.is-mobile-modern .room-tile.st-maintenance { background: var(--mob-room-maintenance-grad); box-shadow: 0 12px 22px -12px var(--mob-room-maintenance-glow); } body.is-mobile-modern .room-tile.st-available, body.is-mobile-modern .room-tile.st-occupied, body.is-mobile-modern .room-tile.st-reserved, body.is-mobile-modern .room-tile.st-cleaning, body.is-mobile-modern .room-tile.st-maintenance { color: var(--mob-text-on-grad); } body.is-mobile-modern .room-tile.st-available .room-tile-inner, body.is-mobile-modern .room-tile.st-occupied .room-tile-inner, body.is-mobile-modern .room-tile.st-reserved .room-tile-inner, body.is-mobile-modern .room-tile.st-cleaning .room-tile-inner, body.is-mobile-modern .room-tile.st-maintenance .room-tile-inner { border-color: rgba(255, 255, 255, .35); } body.is-mobile-modern .room-tile.st-available .room-tile-type, body.is-mobile-modern .room-tile.st-available .room-tile-guest, body.is-mobile-modern .room-tile.st-occupied .room-tile-type, body.is-mobile-modern .room-tile.st-occupied .room-tile-guest, body.is-mobile-modern .room-tile.st-reserved .room-tile-type, body.is-mobile-modern .room-tile.st-reserved .room-tile-guest, body.is-mobile-modern .room-tile.st-cleaning .room-tile-type, body.is-mobile-modern .room-tile.st-cleaning .room-tile-guest, body.is-mobile-modern .room-tile.st-maintenance .room-tile-type, body.is-mobile-modern .room-tile.st-maintenance .room-tile-guest { color: var(--mob-text-on-grad); opacity: .92; } body.is-mobile-modern .room-tile-billing, body.is-mobile-modern .room-tile-status-badge { background: rgba(255, 255, 255, .25) !important; color: var(--mob-text-on-grad) !important; } /* ---------- Topbar pill ชื่อหน้า ใช้ header gradient รวมของธีม ให้ดูสดใสต่อเนื่องกับแถบเมนูล่าง ---------- */ body.is-mobile-modern .topbar-title-pill { background: var(--mob-header-grad) !important; } /* =================================================================== หน้าที่ 2: สัญญาเช่า / ลูกค้า / บิล — ใช้ pattern เดียวกันหมด .table-desktop-only (ตาราง ซ่อนบนมือถือ) + .list-cards-mobile (การ์ด โชว์บนมือถือ) การ์ดในนี้ (.contract-card / .customer-card / .invoice-card / .room-invoice-card) ยังคงพื้นหลัง ทึบสีเดียวไว้ (ไม่ไล่เฉดเต็มใบเหมือนการ์ดห้อง) เพราะมีตัวอักษร/ตัวเลขหนาแน่นมาก ไล่เฉดเต็มจะอ่านยาก จึงใช้แถบสีไล่เฉดคาดด้านซ้าย + เงานุ่มแทน ให้ดูทันสมัยแต่ตัวอักษรยังคมชัด =================================================================== */ body.is-mobile-modern .contract-card, body.is-mobile-modern .customer-card, body.is-mobile-modern .invoice-card, body.is-mobile-modern .room-invoice-card { border: none; border-radius: 18px; box-shadow: 0 10px 22px -16px rgba(30, 20, 60, .3), inset 4px 0 0 0 var(--mob-chip-active-grad, #6366F1); } /* ป้ายสถานะ (badge) ทุกแบบในระบบ — เปลี่ยนจากพื้นสีทึบเป็น pill ไล่เฉดบางๆ พร้อมประกาย สีแมปตามความหมายเดิม: เขียว=พร้อม/ปกติ, เหลือง=รอ/เตือน, แดง=ปัญหา/ค้าง, ฟ้า=ข้อมูล, ม่วง=แบรนด์ */ body.is-mobile-modern .badge { border-radius: 99px; font-weight: 700; } body.is-mobile-modern .badge-green, body.is-mobile-modern .contract-badge-active { background: var(--mob-room-available-grad) !important; color: var(--mob-text-on-grad) !important; } body.is-mobile-modern .badge-amber { background: var(--mob-room-cleaning-grad) !important; color: var(--mob-text-on-grad) !important; } body.is-mobile-modern .badge-red, body.is-mobile-modern .contract-badge-cancelled { background: var(--mob-room-occupied-grad) !important; color: var(--mob-text-on-grad) !important; } body.is-mobile-modern .badge-blue { background: var(--mob-stat1-grad) !important; color: var(--mob-text-on-grad) !important; } body.is-mobile-modern .badge-accent { background: var(--mob-chip-active-grad) !important; color: var(--mob-text-on-grad) !important; } body.is-mobile-modern .contract-badge-ended, body.is-mobile-modern .badge-neutral { background: color-mix(in srgb, var(--text-muted, #9391a4) 16%, transparent) !important; color: var(--text-muted, #6b6b78) !important; border: none !important; } /* ปุ่ม action บนการ์ด (ต่อสัญญา/พิมพ์/แก้ไข/ลบ ฯลฯ) — ปัดมุมกลมขึ้น ให้เข้าธีม pill ทั้งระบบ */ body.is-mobile-modern .contract-card-actions .icon-btn, body.is-mobile-modern .customer-card-actions .icon-btn { border-radius: 12px; } /* =================================================================== .admin-card — คลาสการ์ดกลางที่ใช้ร่วมกัน 13 หน้า (สต็อก/สินค้า/ซัพพลายเออร์/POS ประวัติ/ ตั้งค่า/แดชบอร์ด/หมวดหมู่สินค้า/แบรนด์ ฯลฯ) แก้ที่เดียว ครอบคลุมทุกหน้าที่ใช้ pattern นี้ทันที =================================================================== */ body.is-mobile-modern .admin-card { border: none; border-radius: 18px; box-shadow: 0 10px 22px -16px rgba(30, 20, 60, .3), inset 4px 0 0 0 var(--mob-stat1-grad, #6366F1); } body.is-mobile-modern .admin-card-actions .icon-btn { border-radius: 12px; } /* =================================================================== ปุ่มหลัก/ปุ่มยืนยัน (.btn-primary / .btn-success) ทั่วทั้งแอป — ปุ่มบันทึก/เช็คอิน/ชำระเงิน ฯลฯ ให้ดูมีประกาย ไม่แบนจืด ตามที่ขอไว้ ("ปุ่มประกายสวย") ใช้ได้ทุกหน้าเพราะเป็น class กลาง =================================================================== */ body.is-mobile-modern .btn-primary { background: var(--mob-chip-active-grad) !important; border: none !important; color: var(--mob-text-on-grad) !important; box-shadow: 0 10px 20px -8px var(--mob-chip-active-glow); } body.is-mobile-modern .btn-success { background: var(--mob-room-available-grad) !important; border: none !important; color: var(--mob-text-on-grad) !important; box-shadow: 0 10px 20px -8px var(--mob-room-available-glow); } /* =================================================================== หน้า POS — กล่องยอดสุทธิ (hero total) ให้เด่นแบบ FAB ไล่เฉด + การ์ดสินค้าโค้งมนนุ่มขึ้น =================================================================== */ body.is-mobile-modern .pos-cart-total-hero { background: var(--mob-fab-grad) !important; border-radius: 20px; box-shadow: 0 16px 30px -12px var(--mob-fab-glow); } body.is-mobile-modern .pos-product-card { border: none; border-radius: 16px; box-shadow: 0 8px 18px -12px rgba(30, 20, 60, .25); } body.is-mobile-modern .pos-product-card:active { box-shadow: 0 4px 10px -6px rgba(30, 20, 60, .3); } body.is-mobile-modern .pos-product-card { border: none; border-radius: 16px; box-shadow: 0 8px 18px -12px rgba(30, 20, 60, .25); } body.is-mobile-modern .pos-product-card:active { box-shadow: 0 4px 10px -6px rgba(30, 20, 60, .3); } /* ปุ่มสลับ "เข้าบิลห้อง/เงินสด" — ใช้ไล่เฉดของธีมแทนสีน้ำเงิน/เขียวตายตัวเดิม ให้เข้าชุดกับ ปุ่ม/ชิปอื่นๆ ทั้งแอปบนมือถือ (จอคอมยังคงสีน้ำเงิน/เขียวเดิมเพราะกฎนี้ล็อกด้วย is-mobile-modern) */ body.is-mobile-modern .pos-topbar-toggle.view-switch button.active { color: var(--mob-text-on-grad) !important; box-shadow: 0 6px 14px -6px var(--mob-chip-active-glow); } body.is-mobile-modern .pos-topbar-toggle.view-switch button:nth-child(1).active { background: var(--mob-stat1-grad) !important; } body.is-mobile-modern .pos-topbar-toggle.view-switch button:nth-child(2).active { background: var(--mob-room-available-grad) !important; } body.is-mobile-modern .pos-topbar-select-wrap, body.is-mobile-modern .pos-topbar-info-btn, body.is-mobile-modern .pos-topbar-rate-badge { border: none; box-shadow: 0 4px 10px -6px rgba(30, 20, 60, .18); } body.is-mobile-modern .pos-topbar-cart-group .btn.btn-sm { border-radius: 12px; } body.is-mobile-modern .pos-shift-banner { border: none; border-radius: 16px; box-shadow: 0 8px 18px -12px rgba(30, 20, 60, .25); } /* ---------- ปุ่มพับ/กางแถวควบคุมบน (สลับโหมด/เลือกห้อง/VAT/ล้างตะกร้า) ---------- ปุ่มลอยวงกลมมุมขวาบนของ .topbar (ถาวร ไม่ถูกลบทิ้งตอน renderTopbarActions() เขียนทับ .topbar-actions ใหม่ทุกครั้งที่ตะกร้าเปลี่ยน เพราะปุ่มนี้เป็นลูกของ .topbar ไม่ใช่ .topbar-actions) */ body.is-mobile-modern #pos-topbar-collapse-btn { display: none; position: absolute; top: 10px; right: 14px; z-index: 5; width: 32px; height: 32px; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--mob-fab-grad); color: var(--mob-text-on-grad); box-shadow: 0 6px 14px -6px var(--mob-fab-glow); } body.is-mobile-modern #pos-topbar-collapse-btn.is-visible { display: flex; } body.is-mobile-modern #pos-topbar-collapse-btn i { font-size: 15px; transition: transform .25s ease; } body.is-mobile-modern #pos-topbar-collapse-btn.is-collapsed i { transform: rotate(180deg); } /* เนื้อหาแถวควบคุม (สร้างใหม่ทุกครั้งโดย renderTopbarActions() — เลือกด้วย class ปกติ ไม่ผูกกับ element instance เดิม จึงยังทำงานถูกต้องแม้เนื้อหาข้างในถูกเขียนทับไปแล้ว) */ body.is-mobile-modern .pos-topbar-actions { max-height: 260px; opacity: 1; overflow: hidden; transition: max-height .28s ease, opacity .2s ease, margin .28s ease; } body.is-mobile-modern .topbar-actions.pos-controls-collapsed .pos-topbar-actions { max-height: 0; opacity: 0; pointer-events: none; } /* ---------- แถวควบคุมบน topbar (สลับโหมด/เลือกห้อง/VAT) ให้กระชับขึ้นบนจอแคบ เดิมมี 3-4 แถวเรียงกันก่อนถึงเนื้อหาเลย ทำให้รู้สึกเหมือนจอคอมถูกบีบลงมา ---------- */ body.is-mobile-modern .pos-topbar-actions { gap: 8px; padding: 2px 0 10px; } body.is-mobile-modern .pos-topbar-toggle.view-switch button { padding: 8px 6px; font-size: 12px; } body.is-mobile-modern .pos-topbar-select-wrap { height: 32px; padding: 0 12px; } body.is-mobile-modern .pos-topbar-cart-group { padding-top: 8px; } /* =================================================================== หน้า POS มือถือ — ตะกร้าเป็น bottom sheet ลอย แทนการดันเนื้อหายาวๆ ให้ต้องเลื่อนผ่าน ก่อนถึงตารางสินค้า (โครงสร้างนี้ถูกสร้าง/ถอดโดย js/pos-mobile.js เท่านั้น จอคอมไม่มี .pos-mobile-sheet เกิดขึ้นเลยเพราะ POSMobile.enhance() เช็ค MobileShell.isMobile() ก่อนเสมอ) =================================================================== */ body.is-mobile-modern .pos-layout { position: relative; } body.is-mobile-modern .pos-product-grid { padding-bottom: 150px; /* กันแถวสุดท้ายของสินค้าโดนแถบสรุปตะกร้าลอยบัง (แถบอยู่ที่ bottom:84px สูง ~54px) */ } body.is-mobile-modern .pos-mobile-sheet-backdrop { position: fixed; inset: 0; background: rgba(12, 16, 28, .48); backdrop-filter: blur(2px); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .25s ease; } body.is-mobile-modern .pos-mobile-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; } /* แถบสรุป — ลอยอยู่เหนือแถบเมนูล่างตลอดเวลา ไม่ถูกซ่อน/เลื่อนหายไปไหน (บั๊กรอบก่อน: เอา แถบนี้ไปอยู่ในกล่องเดียวกับตะกร้าเต็ม แล้ว translateY(100%) ตอนพับ ดันหายไปด้วยกันทั้งคู่) */ body.is-mobile-modern .pos-mobile-bar { position: fixed; left: 8px; right: 8px; bottom: 84px; /* เว้นที่ให้แถบเมนูล่างลอย (.mobile-bottom-nav bottom:12px) ไม่ให้ซ้อนทับกัน */ z-index: 67; display: flex; align-items: center; gap: 12px; width: auto; padding: 12px 20px; border: none; border-radius: 18px; background: var(--mob-fab-grad); color: var(--mob-text-on-grad); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 16px 30px -12px var(--mob-fab-glow); } body.is-mobile-modern .pos-mobile-bar-summary { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } body.is-mobile-modern .pos-mobile-bar-count { font-size: 11.5px; opacity: .85; } body.is-mobile-modern .pos-mobile-bar-total { font-family: var(--font-mono); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; } body.is-mobile-modern .pos-mobile-bar > i { font-size: 18px; transition: transform .3s ease; flex-shrink: 0; } body.is-mobile-modern .pos-mobile-bar.is-open > i { transform: rotate(180deg); } /* แผ่นตะกร้าเต็ม — ลอยอยู่เหนือแถบสรุป ซ่อน/โชว์ด้วย opacity+translateY (ไม่ใช่การเลื่อนแถบสรุปหนี) */ body.is-mobile-modern .pos-mobile-sheet { position: fixed; left: 8px; right: 8px; bottom: 148px; /* อยู่เหนือแถบสรุป (bottom 84px + สูงประมาณ 54px + ระยะห่าง 10px) */ z-index: 66; display: flex; flex-direction: column; max-height: 62vh; background: var(--panel); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px -16px rgba(20, 20, 40, .4); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease, visibility .22s; pointer-events: none; } body.is-mobile-modern .pos-mobile-sheet.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* เนื้อหาข้างในตะกร้า (ยังเป็น #pos-cart-panel เดิมจาก pos.js เป๊ะๆ) แค่ปิดกรอบ/เงาเดิม ของ .pos-cart .card ทิ้ง เพราะตอนนี้ sheet ห่อให้แล้ว ไม่งั้นจะเงาซ้อนเงา 2 ชั้น */ body.is-mobile-modern #pos-cart-panel.pos-cart { order: 0; flex: 1; min-height: 0; overflow-y: auto; margin: 0 !important; padding: 4px 16px 20px !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } body.is-mobile-modern #pos-cart-panel .pos-cart-total-hero { margin-top: 6px; } /* =================================================================== หน้ารายงาน — การ์ดสรุปตัวเลข (.report-kpi-card ที่ติด class เพิ่มไว้ใน reports.js) ไล่เฉดสีวนตามตัวเลข 1-4 ให้ดูมีชีวิตชีวาเหมือนการ์ดสถิติของหน้าเช็คอิน ไม่แตะ .card เฉยๆ ทั่วไป (ใช้เป็น container ทั่วแอปสำหรับฟอร์ม/โมดัลอื่นๆ ด้วย) เพื่อความปลอดภัย =================================================================== */ body.is-mobile-modern .report-kpi-card { border: none; border-radius: 18px; color: var(--mob-text-on-grad); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .3); } body.is-mobile-modern .report-kpi-card .text-dim, body.is-mobile-modern .report-kpi-card > div { color: var(--mob-text-on-grad) !important; } body.is-mobile-modern .report-kpi-1 { background: var(--mob-stat1-grad); } body.is-mobile-modern .report-kpi-2 { background: var(--mob-stat2-grad); } body.is-mobile-modern .report-kpi-3 { background: var(--mob-stat3-grad); } body.is-mobile-modern .report-kpi-4 { background: var(--mob-room-maintenance-grad); } /* ตารางทั่วไป (.table-wrap ที่ไม่มี dual-render การ์ดคู่กัน เช่น ตารางในหน้ารายงาน) — ให้กรอบโค้งมนขึ้นอย่างน้อย เลื่อนดูแนวนอนได้ลื่น แม้ยังไม่ได้แปลงเป็นการ์ดเต็มรูปแบบ */ body.is-mobile-modern .table-wrap { border-radius: 14px; -webkit-overflow-scrolling: touch; } /* =================================================================== ธีมโครงสร้าง: "citrus-pop" (neubrutalist) — สลับด้วย MobileThemePrefs.save('citrus-pop') ต่างจาก aurora/sunset ตรงที่ไม่ใช้ไล่เฉด/เงาเรือง แต่ใช้สีทึบ + ขอบหนาดำ 2-2.5px + เงาทึบ (แบบ offset shadow ไม่เบลอ) เลยต้อง override ตรงๆ ทีละ component แทนการเปลี่ยนแค่ตัวแปรสี selector มี [data-mobile-theme="citrus-pop"] ต่อท้ายเสมอ ทำให้ specificity สูงกว่ากฎ aurora/sunset ด้านบนอัตโนมัติ (ไม่ต้องพึ่ง !important ยกเว้นจุดที่กฎเดิมใช้ !important ไว้ก่อน) ยังอยู่บนพื้นหลัง สว่างของแอปตามปกติ (ไม่ใช่ dark mode เต็มรูปแบบ ดูหมายเหตุใน mobile-theme-prefs.js) =================================================================== */ body.is-mobile-modern[data-mobile-theme="citrus-pop"] .mobile-bottom-nav { background: #FFFCF3; border: 2.5px solid #111111; border-radius: 20px; box-shadow: 4px 4px 0 #111111; backdrop-filter: none; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .mobile-bottom-nav .mobile-nav-item.active { background: #FFD84D; color: #111111; border: 2px solid #111111; box-shadow: none; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .stat-grid .stat { border: 2.5px solid #111111 !important; border-radius: 16px; box-shadow: 4px 4px 0 #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .stat-grid .stat .stat-num, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .stat-grid .stat .stat-label { color: #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .stat-grid .stat.stat-neutral { background: #FFD84D !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .stat-grid .stat.stat-purple { background: #FF7CB6 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .stat-grid .stat.stat-tangerine, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .stat-grid .stat.stat-slate { background: #7CD6FF !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .chip.active, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .building-tab.active { background: #FF6B4A !important; color: #111111 !important; border: 2.5px solid #111111 !important; box-shadow: 3px 3px 0 #111111; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-available, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-occupied, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-reserved, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-cleaning, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-maintenance { border: 2.5px solid #111111; box-shadow: 5px 5px 0 #111111; color: #111111; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-available { background: #A7EFA0; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-occupied { background: #FF9B8C; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-reserved { background: #FFC9B8; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-cleaning { background: #FFDC70; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-maintenance { background: #D8CFFF; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-available .room-tile-inner, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-occupied .room-tile-inner, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-reserved .room-tile-inner, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-cleaning .room-tile-inner, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-maintenance .room-tile-inner { border-color: transparent; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-available .room-tile-type, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-available .room-tile-guest, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-occupied .room-tile-type, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-occupied .room-tile-guest, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-reserved .room-tile-type, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-reserved .room-tile-guest, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-cleaning .room-tile-type, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-cleaning .room-tile-guest, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-maintenance .room-tile-type, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile.st-maintenance .room-tile-guest { color: #111111; opacity: .85; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile-billing, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-tile-status-badge { background: #FFFCF3 !important; color: #111111 !important; border: 2px solid #111111; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .topbar-title-pill { background: #7FE07C !important; border: 2.5px solid #111111; box-shadow: 3px 3px 0 #111111; color: #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .btn-primary { background: #FF6B4A !important; border: 2.5px solid #111111 !important; color: #111111 !important; box-shadow: 3px 3px 0 #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .btn-success { background: #A7EFA0 !important; border: 2.5px solid #111111 !important; color: #111111 !important; box-shadow: 3px 3px 0 #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .admin-card, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .contract-card, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .customer-card, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .invoice-card, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .room-invoice-card { border: 2.5px solid #111111; border-radius: 14px; box-shadow: 4px 4px 0 #111111; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .badge { border: 2px solid #111111; color: #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .badge-green, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .contract-badge-active { background: #A7EFA0 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .badge-amber { background: #FFDC70 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .badge-red, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .contract-badge-cancelled { background: #FF9B8C !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .badge-blue { background: #7CD6FF !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .badge-accent { background: #FF6B4A !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .contract-badge-ended, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .badge-neutral { background: #FFFCF3 !important; border: 2px solid #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .report-kpi-card { border: 2.5px solid #111111 !important; border-radius: 16px; box-shadow: 4px 4px 0 #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .report-kpi-card .text-dim, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .report-kpi-card > div { color: #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .report-kpi-1 { background: #FFD84D !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .report-kpi-2 { background: #FF7CB6 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .report-kpi-3 { background: #7CD6FF !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .report-kpi-4 { background: #A7EFA0 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .pos-cart-total-hero { background: #FF6B4A !important; border: 2.5px solid #111111; border-radius: 16px; box-shadow: 4px 4px 0 #111111; color: #111111; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .pos-cart-total-hero-label, body.is-mobile-modern[data-mobile-theme="citrus-pop"] .pos-cart-total-hero-value { color: #111111 !important; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .pos-product-card { border: 2px solid #111111; border-radius: 12px; box-shadow: 3px 3px 0 #111111; } /* =================================================================== ธีมโครงสร้าง: "dark-neon" (กระจกฝ้านีออน) และ "luxury-gold" (ทองเมทัลลิก) ต่างจาก aurora/sunset/citrus-pop ตรงที่พื้นหลังทั้งแอปเป็นสีเข้ม (ดู CORE_OVERRIDES ใน js/mobile-theme-prefs.js ที่ override --bg/--panel/--text/--line ฯลฯ ตอน runtime เฉพาะตอนเป็นมือถือ) ส่วนใหญ่ของการ์ด/ปุ่ม/ป้าย/สถิติ "ได้ธีมฟรี" อัตโนมัติอยู่แล้วเพราะอ้างอิงจาก --mob-*/--panel/--text/--line ที่ override ไว้แล้วทั้งคู่ ส่วนนี้เพิ่มแค่ลูกเล่นพิเศษที่ CSS variable ธรรมดาทำไม่ได้ (กระจกฝ้า blur / ขอบทองเรืองแสง) ให้แต่ละธีมมีเอกลักษณ์ชัดขึ้น =================================================================== */ /* ---- dark-neon: กระจกฝ้า (glassmorphism) — การ์ด/แถบเมนูล่างโปร่งแสงเบลอฉากหลัง ---- */ body.is-mobile-modern[data-mobile-theme="dark-neon"] .admin-card, body.is-mobile-modern[data-mobile-theme="dark-neon"] .contract-card, body.is-mobile-modern[data-mobile-theme="dark-neon"] .customer-card, body.is-mobile-modern[data-mobile-theme="dark-neon"] .invoice-card, body.is-mobile-modern[data-mobile-theme="dark-neon"] .room-invoice-card, body.is-mobile-modern[data-mobile-theme="dark-neon"] .report-kpi-card { background: color-mix(in srgb, var(--panel) 82%, transparent) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--mob-stat1-grad, #22D3EE) 22%, var(--line)); } body.is-mobile-modern[data-mobile-theme="dark-neon"] .topbar-title-pill { box-shadow: 0 0 18px -4px rgba(34, 211, 238, .55); } body.is-mobile-modern[data-mobile-theme="dark-neon"] .mobile-fab, body.is-mobile-modern[data-mobile-theme="dark-neon"] .stat-grid .stat { border: 1px solid rgba(255, 255, 255, .08); } /* ---- luxury-gold: ขอบทองเมทัลลิกบางๆ + เงาทองนุ่มๆ บนการ์ด/ปุ่มหลัก ---- */ body.is-mobile-modern[data-mobile-theme="luxury-gold"] .admin-card, body.is-mobile-modern[data-mobile-theme="luxury-gold"] .contract-card, body.is-mobile-modern[data-mobile-theme="luxury-gold"] .customer-card, body.is-mobile-modern[data-mobile-theme="luxury-gold"] .invoice-card, body.is-mobile-modern[data-mobile-theme="luxury-gold"] .room-invoice-card, body.is-mobile-modern[data-mobile-theme="luxury-gold"] .report-kpi-card, body.is-mobile-modern[data-mobile-theme="luxury-gold"] .pos-product-card { border: 1px solid color-mix(in srgb, #D4AF6A 35%, var(--line)); } body.is-mobile-modern[data-mobile-theme="luxury-gold"] .topbar-title-pill, body.is-mobile-modern[data-mobile-theme="luxury-gold"] .btn-primary { box-shadow: 0 8px 20px -8px rgba(212, 175, 106, .55); } body.is-mobile-modern[data-mobile-theme="luxury-gold"] .mobile-fab { border: 1px solid rgba(212, 175, 106, .5); } /* =================================================================== ปุ่มลอย (FAB) — โผล่เฉพาะหน้าที่มีปุ่ม "เพิ่ม..." อยู่แล้ว (ดู MobileShell.FAB_ROUTES) ตำแหน่งอยู่เหนือแถบเมนูล่างเล็กน้อย ไม่บังกัน =================================================================== */ .mobile-fab { display: none; } body.is-mobile-modern .mobile-fab { position: fixed; right: 20px; bottom: 96px; width: 54px; height: 54px; border-radius: 18px; border: none; background: var(--mob-fab-grad); color: var(--mob-text-on-grad); font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 26px -8px var(--mob-fab-glow); z-index: 55; cursor: pointer; } body.is-mobile-modern .mobile-fab:active { transform: scale(0.94); } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .mobile-fab { border: 2.5px solid #111111; border-radius: 16px; box-shadow: 4px 4px 0 #111111; color: #111111; } body.is-mobile-modern[data-mobile-theme="citrus-pop"] .mobile-fab:active { box-shadow: 2px 2px 0 #111111; transform: translate(2px, 2px); } /* =================================================================== แอนิเมชันตอนสลับหน้า (เฉพาะมือถือ) — เฟดเข้า + เลื่อนขึ้นเบาๆ เล็กน้อย ให้รู้สึกลื่นขึ้น ไม่กระทบจอคอมเพราะ #content.mobile-page-enter ถูกเติม class โดย MobileShell.onRouteRendered() ซึ่งเช็ค isMobile() ก่อนเสมอ (ดู js/mobile-shell.js + hook ใน js/router.js) =================================================================== */ body.is-mobile-modern #content.mobile-page-enter { animation: mobilePageIn .28s ease; } @keyframes mobilePageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* เคารพผู้ใช้ที่ปิด motion ไว้ในระบบปฏิบัติการ */ @media (prefers-reduced-motion: reduce) { body.is-mobile-modern #content.mobile-page-enter { animation: none; } }