/* ================================================================= admin-rwd.css Mobile / Responsive base styles + all @media breakpoints. Load AFTER admin.css in . Breakpoints (4-tier, no overlaps): Desktop : ≥ 1024px — sidebar visible, full layout Tablet : 640–1023px — sidebar hidden, 2-col grids Mobile : 480–639px — 2-col stat, 1-col cards Small : < 480px — 1-col everything, bottom-sheet modal ================================================================= */ /* ── MOBILE TOP BAR ────────────────────────────────────────────── */ /* Hidden on desktop; display:flex toggled via @media below */ .mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; width: 100%; padding: 0.75rem 1.25rem; background: white; border-bottom: 1px solid var(--border-color); z-index: 1000; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); } /* ── HAMBURGER BUTTON ──────────────────────────────────────────── */ .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: none; background: var(--grad-primary); color: #ffffff; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35); flex-shrink: 0; transition: transform 0.2s, box-shadow 0.2s; } .hamburger:hover { box-shadow: 0 6px 16px rgba(249, 115, 22, 0.45); } .hamburger:active { transform: scale(0.94); } /* ── SIDEBAR TOP ROW (brand + close button) ────────────────────── */ .sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem; } /* Close button — hidden on desktop, shown via @media below */ .sidebar-close { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 1rem; cursor: pointer; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .sidebar-close:hover { background: rgba(255, 255, 255, 0.1); color: white; } /* ================================================================= 1. SIDEBAR TOGGLE < 1024px ================================================================= */ @media (max-width: 1023px) { .sidebar { transform: translateX(-100%); width: min(280px, 80vw); overflow-y: auto; overflow-x: hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; } .sidebar.active { transform: translateX(0); box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25); } /* Show close button, hide sidebar-brand bottom margin */ .sidebar-close { display: inline-flex; } .sidebar-brand { margin-bottom: 0; } .main-content { margin-left: 0; width: 100%; padding: 1.25rem 1rem; padding-top: calc(58px + 1.25rem); } .mobile-header { display: flex; } .sidebar-overlay.active { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1050; backdrop-filter: blur(2px); } .bi-grid { grid-template-columns: 1fr; } } /* ================================================================= 2. TABLET 640px – 1023px ================================================================= */ @media (min-width: 640px) and (max-width: 1023px) { .main-content { padding: 1.5rem; padding-top: calc(58px + 1.5rem); } .stat-grid, .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .room-type-grid, .inventory-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .page-header { flex-direction: row; align-items: center; } .page-title h1 { font-size: 1.75rem; } .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 680px; } th, td { padding: 0.875rem 1.25rem; } .modal-overlay { padding: 1.5rem; align-items: center; } .modal-content, .modal-card { max-height: 88vh; border-radius: 20px; padding: 1.75rem; margin: 0 auto; overflow-y: auto; } /* Collapse 2-col form grids inside modals */ .modal-content [style*="grid-template-columns: 1fr 1fr"], .modal-card [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } .card, .stat-card, .inventory-card, .chart-card { padding: 1.5rem; } .room-type-card img { height: 180px; } .room-type-card .details { padding: 1.25rem; } .room-type-card .footer { padding: 1rem 1.25rem; } } /* ================================================================= 3. MOBILE 480px – 639px ================================================================= */ @media (min-width: 480px) and (max-width: 639px) { .main-content { padding: 1rem 0.875rem; padding-top: calc(58px + 1rem); } .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .page-header .flex { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; } .page-title h1 { font-size: 1.5rem; } .page-title p { font-size: 0.875rem; } .stat-grid, .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; } .stat-value { font-size: 1.5rem; } .room-type-grid, .inventory-grid { grid-template-columns: 1fr; gap: 1rem; } .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; } table { min-width: 640px; } th, td { padding: 0.75rem 1rem; font-size: 0.875rem; } .modal-overlay { padding: 1rem; align-items: center; } .modal-content, .modal-card { max-width: 100%; max-height: 90vh; border-radius: 20px; padding: 1.5rem; overflow-y: auto; } .modal-content [style*="grid-template-columns: 1fr 1fr"], .modal-card [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } .form-group { margin-bottom: 1.1rem; } .form-input { padding: 0.75rem 1rem; font-size: 16px; } .card, .stat-card { padding: 1.25rem; border-radius: 16px; } .inventory-card { padding: 1.25rem; } .chart-card { padding: 1.25rem; } .room-type-card img { height: 160px; } .room-type-card .details { padding: 1.1rem; } .room-type-card .footer { padding: 0.875rem 1.1rem; flex-direction: column; gap: 0.5rem; } .room-type-card .footer .btn { width: 100%; justify-content: center; } } /* ================================================================= 4. SMALL MOBILE < 480px ================================================================= */ @media (max-width: 479px) { .main-content { padding: 0.875rem 0.75rem; padding-top: calc(58px + 0.875rem); } .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; } .page-header .flex { width: 100%; flex-wrap: wrap; gap: 0.5rem; } .page-title h1 { font-size: 1.375rem; } .page-title p { font-size: 0.8125rem; } .stat-grid, .summary-grid { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem; } .room-type-grid, .inventory-grid { grid-template-columns: 1fr; gap: 0.875rem; } .stat-value { font-size: 1.5rem; } .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; } table { min-width: 600px; } th, td { padding: 0.625rem 0.875rem; font-size: 0.8125rem; } /* Bottom-sheet modal */ .modal-overlay { padding: 0; align-items: flex-end; } .modal-content, .modal-card { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 1.25rem; margin: 0; overflow-y: auto; } .modal-content [style*="grid-template-columns: 1fr 1fr"], .modal-card [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } .form-group { margin-bottom: 1rem; } .form-input { padding: 0.75rem 1rem; font-size: 16px; border-radius: 10px; } .form-group label { font-size: 0.8125rem; } .card, .stat-card { padding: 1rem; border-radius: 14px; } .inventory-card { padding: 1rem; } .chart-card { padding: 1rem; border-radius: 14px; } .room-type-card img { height: 150px; } .room-type-card .details { padding: 1rem; } .room-type-card .footer { padding: 0.75rem 1rem; flex-direction: column; gap: 0.5rem; } .room-type-card .footer .btn { width: 100%; justify-content: center; } .sidebar { width: min(260px, 82vw); } .status-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; } } /* ================================================================= 5. EXTRA SMALL < 360px ================================================================= */ @media (max-width: 359px) { :root { --sidebar-width: 240px; } .sidebar { width: min(240px, 85vw); padding: 1rem; } .main-content { padding: 0.625rem 0.5rem; padding-top: calc(58px + 0.625rem); } .page-title h1 { font-size: 1.125rem; } .page-title p { font-size: 0.75rem; } .stat-value { font-size: 1.25rem; } .btn { padding: 0.5rem 0.875rem; font-size: 0.8125rem; } .modal-content, .modal-card { padding: 1rem; border-radius: 16px 16px 0 0; } .nav-links a { padding: 0.75rem 1rem; font-size: 0.875rem; } .user-avatar { width: 32px; height: 32px; } } /* ================================================================= 6. LARGE SCREENS ≥ 1440px ================================================================= */ @media (min-width: 1440px) { :root { --sidebar-width: 300px; } .page-title h1 { font-size: 2.25rem; } .stat-value { font-size: 2.25rem; } .room-type-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } /* ================================================================= 7. LANDSCAPE PHONE ================================================================= */ @media (max-height: 500px) and (orientation: landscape) { .sidebar { padding: 0.75rem 1rem; overflow-y: auto; } .sidebar-brand { margin-bottom: 1rem; } .nav-links a { padding: 0.5rem 1rem; } .modal-overlay { align-items: flex-start; padding-top: 0.5rem; } .modal-content, .modal-card { max-height: 90vh; padding: 1rem; } .login-card { padding: 1.5rem; max-width: 400px; } .login-card h2 { font-size: 1.25rem; margin-bottom: 1rem; } } /* ================================================================= 8. TOUCH DEVICES ================================================================= */ @media (hover: none) and (pointer: coarse) { .nav-links a { min-height: 48px; } .inventory-qty-btn { width: 44px; height: 44px; } .hamburger { min-height: 48px; min-width: 48px; } .btn-primary, .btn-outline { min-height: 44px; } .btn:hover { transform: none; } .room-type-card:hover { transform: none; } .inventory-card:hover { transform: none; } .btn:active { transform: scale(0.97); } .room-type-card:active { transform: scale(0.99); } } /* ================================================================= 9. UTILITY VISIBILITY ================================================================= */ @media (max-width: 1023px) { .mobile-hide { display: none !important; } } @media (min-width: 1024px) { .desktop-hide { display: none !important; } } /* ================================================================= 11. WORK ORDER SEARCH BAR ================================================================= */ #tabWorkOrders .page-header ~ div[style*="flex"] { flex-wrap: wrap; } @media (max-width: 767px) { /* 搜尋欄位全部佔滿 */ #woSearchTicket, #woSearchAssignee, #woSearchLocation, #woSearchStatus { min-width: 100% !important; flex: 1 1 100% !important; } #btnClearWoSearch { width: 100%; justify-content: center; } } /* ================================================================= 12. MODAL BUTTON ROW — 防止按鈕超出視窗 ================================================================= */ .modal-content [style*="justify-content: flex-end"], .modal-card [style*="justify-content: flex-end"] { flex-wrap: wrap; gap: 0.75rem !important; } @media (max-width: 479px) { .modal-content [style*="justify-content: flex-end"] > button, .modal-card [style*="justify-content: flex-end"] > button { flex: 1 1 100%; justify-content: center; } } /* ================================================================= 13. PHOTO PREVIEW THUMBNAILS — 小螢幕縮小 ================================================================= */ @media (max-width: 479px) { #woCreatePhotoPreview > div, #beforePhotoPreview > div, #afterPhotoPreview > div { width: 56px !important; height: 56px !important; } #woCreatePhotoPreview img, #beforePhotoPreview img, #afterPhotoPreview img { width: 56px !important; height: 56px !important; } } /* ================================================================= 14. NEW BOOKING MODAL — 確認 Email 欄位加入後確保可捲動 ================================================================= */ #newBookingModal .modal-content { max-height: 92vh; overflow-y: auto; } /* ================================================================= 15. STAFF NOTIFICATION BAR — RWD ================================================================= */ #staffNotifBar { max-width: 320px; } @media (max-width: 479px) { #staffNotifBar { bottom: 0 !important; right: 0 !important; left: 0 !important; max-width: 100% !important; border-radius: 14px 14px 0 0 !important; padding: 1rem 1.25rem !important; } } /* ================================================================= 16. COMPLETION REF PHOTO — 小螢幕縮圖 ================================================================= */ @media (max-width: 479px) { #completionRefPhotoPreview a img { width: 60px !important; height: 46px !important; } } /* ================================================================= 10. REDUCED MOTION ================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ================================================================= 17. WORK ORDER MODAL — 照片上傳後按鈕不超出視窗 ================================================================= */ #workOrderModal .modal-content { max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; } #workOrderForm { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; } #workOrderModal .modal-content h2 { flex-shrink: 0; } /* ================================================================= 18. USERS TAB — 搜尋欄 RWD ================================================================= */ @media (max-width: 639px) { #tabUsers header > div:last-child { width: 100%; justify-content: stretch; } #userSearchInput { width: 100% !important; box-sizing: border-box; } #tabUsers header > div:last-child .btn { flex: 0 0 auto; } } /* ================================================================= 19. WORK ORDER SEARCH BAR — 小螢幕全寬堆疊 ================================================================= */ @media (max-width: 639px) { #tabWorkOrders .page-header ~ div { flex-direction: column; gap: 0.625rem !important; } #woSearchTicket, #woSearchAssignee, #woSearchLocation, #woSearchStatus, #btnClearWoSearch { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; } } /* ================================================================= 20. COMPLETION MODAL — 照片上傳區 RWD ================================================================= */ #woCompletionModal .modal-content { max-height: 92vh; overflow-y: auto; } @media (max-width: 479px) { #woExistingPhotoPreview > div, #woCreatePhotoPreview > div { width: 56px !important; height: 56px !important; } #woExistingPhotoPreview img, #woCreatePhotoPreview img { width: 56px !important; height: 56px !important; } } /* ================================================================= 21. STAFF TAB TOGGLE BUTTONS — RWD ================================================================= */ @media (max-width: 479px) { #tabStaff .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } #tabStaff .page-header > div:last-child { width: 100%; justify-content: space-between; } } /* ================================================================= 22. VIEW MODAL COMPLETION PHOTOS — RWD ================================================================= */ @media (max-width: 479px) { #viewCompletionPhotoSection a img, #viewPhotoArea a img { width: 72px !important; height: 56px !important; } } /* ================================================================= 23. SIDEBAR FOOTER — 角色標籤省略 ================================================================= */ #footerRoleLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* ================================================================= 24. TABLE — 小螢幕橫向捲動確保可操作 ================================================================= */ @media (max-width: 639px) { .table-responsive, #usersList { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; } #usersList table { min-width: 520px; } } /* ================================================================= 10. REDUCED MOTION (keep at end) ================================================================= */ /* ================================================================= 25. BI DASHBOARD — 修正 Tailwind grid class 無效問題 ================================================================= */ /* 取代 .grid.grid-cols-1.lg\:grid-cols-2 */ .grid { display: grid; } @media (min-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1023px) { .grid-cols-1 { grid-template-columns: 1fr; } /* BI dashboard chart 2-col fallback */ .bi-grid { grid-template-columns: 1fr !important; } } .gap-6 { gap: 1.5rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } /* ================================================================= 26. STAT-GRID — 超小螢幕 minmax 太大問題 ================================================================= */ @media (max-width: 479px) { .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; } } @media (max-width: 359px) { .stat-grid { grid-template-columns: 1fr !important; } } /* ================================================================= 27. PAGE HEADER BUTTON GROUP — 小螢幕換行 ================================================================= */ .page-header .flex, .page-header [class*="flex"] { flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 639px) { .page-header { flex-wrap: wrap; gap: 0.75rem; } .page-header .btn, .page-header button { white-space: nowrap; } } /* ================================================================= 28. LOGIN CARD — 極小螢幕 ================================================================= */ @media (max-width: 479px) { .login-card { padding: 2rem 1.5rem; border-radius: 20px; margin: 0.75rem; } .login-card h2 { font-size: 1.5rem; margin-bottom: 1.5rem; } } @media (max-width: 359px) { .login-card { padding: 1.5rem 1.25rem; border-radius: 16px; margin: 0.5rem; } } /* ================================================================= 29. SYSTEM SETTINGS CARD — 小螢幕換行 ================================================================= */ @media (max-width: 639px) { #idleTimeoutSelect { width: 100%; min-width: 0; } #btnSaveIdleTimeout { width: 100%; justify-content: center; } } /* ================================================================= 30. BOOKING SEARCH BAR — 小螢幕全寬 ================================================================= */ @media (max-width: 639px) { #bookingSearch { width: 100% !important; min-width: 0 !important; } } /* ================================================================= 31. TABLE CONTAINER — 所有 tab 的表格確保可橫向捲動 ================================================================= */ .table-container, #bookingsList, #workOrdersList, #usersList, #roomTypesList { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 1023px) { #bookingsList table, #workOrdersList table { min-width: 700px; } } /* ================================================================= 32. ROOM TYPE CARDS — Tablet 修正 ================================================================= */ @media (min-width: 640px) and (max-width: 1023px) { .room-type-grid { grid-template-columns: repeat(2, 1fr); } } /* ================================================================= 33. WO VIEW MODAL — 小螢幕 4-col detail grid 換行 ================================================================= */ @media (max-width: 479px) { #woViewModal [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ================================================================= 34. SYSTEM SETTINGS + USER SEARCH ROW — Tablet wrap ================================================================= */ @media (max-width: 767px) { #tabUsers header > div:last-child { flex-wrap: wrap; width: 100%; } #userSearchInput { flex: 1; min-width: 160px; } } /* ================================================================= 38. MISSING UTILITY CLASSES — Tailwind-like helpers ================================================================= */ .justify-between { justify-content: space-between !important; } .justify-end { justify-content: flex-end !important; } .items-center { align-items: center !important; } .items-start { align-items: flex-start !important; } .flex-wrap { flex-wrap: wrap !important; } .w-full { width: 100% !important; } .text-center { text-align: center !important; } .text-xl { font-size: 1.25rem !important; } .font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700 !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-4 { gap: 1rem !important; } .gap-6 { gap: 1.5rem !important; } .gap-8 { gap: 2rem !important; } .space-x-2 > * + * { margin-left: 0.5rem !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-6 { margin-bottom: 1.5rem !important; } .mb-8 { margin-bottom: 2rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-4 { margin-top: 1rem !important; } .mt-6 { margin-top: 1.5rem !important; } .mt-8 { margin-top: 2rem !important; } /* max-w sizes */ .max-w-xl { max-width: 640px !important; } .max-w-2xl { max-width: 896px !important; } /* max-h sizes + scroll */ .max-h-80vh { max-height: 80vh !important; } .max-h-90vh { max-height: 90vh !important; } .overflow-y-auto { overflow-y: auto !important; } /* ================================================================= 39. ALL MODALS — 統一 max-height 防止超出視窗 ================================================================= */ /* 所有沒有手動設定 max-height 的 modal */ #roomTypeEditModal .modal-content, #editBookingModal .modal-content, #sendEmailModal .modal-content, #woViewModal .modal-content { max-height: 92vh; overflow-y: auto; } /* roomInstanceModal / galleryModal / amenitiesModal 都用了 max-w-2xl */ #roomInstanceModal .modal-content, #galleryModal .modal-content, #amenitiesModal .modal-content { max-height: 82vh; overflow-y: auto; width: 100%; } /* ================================================================= 40. ALL MODALS — 小螢幕 2-col grid 強制 1-col ================================================================= */ @media (max-width: 639px) { /* editBookingModal 日期 grid */ #editBookingModal [style*="grid-template-columns: 1fr 1fr"], #newBookingModal [style*="grid-template-columns: 1fr 1fr"], #roomTypeEditModal [style*="grid-template-columns: 1fr 1fr"], #workOrderModal [style*="grid-template-columns: 1fr 1fr"], #woViewModal [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 0 !important; } /* 所有 modal input/select/textarea 16px 防 iOS 縮放 */ .modal-content input, .modal-content select, .modal-content textarea { font-size: 16px !important; } /* 按鈕組換行 */ #editBookingModal [style*="justify-content: flex-end"], #sendEmailModal [style*="justify-content: flex-end"], #roomTypeEditModal [style*="justify-content: flex-end"], #amenitiesModal [style*="justify-content: flex-end"] { flex-direction: column-reverse; gap: 0.625rem !important; } #editBookingModal [style*="justify-content: flex-end"] button, #sendEmailModal [style*="justify-content: flex-end"] button, #roomTypeEditModal [style*="justify-content: flex-end"] button, #amenitiesModal [style*="justify-content: flex-end"] button { width: 100%; justify-content: center; } /* sendEmailModal textarea 縮短 */ #sendEmailContent { height: 140px !important; } /* amenitiesModal textarea 縮短 */ #amenitiesTextarea { height: 200px !important; } /* roomInstanceModal 新增房號 row */ #roomInstanceModal [style*="display: flex; gap: 0.5rem"] { flex-direction: column; } #roomInstanceModal [style*="display: flex; gap: 0.5rem"] input, #roomInstanceModal [style*="display: flex; gap: 0.5rem"] button { width: 100%; } } @media (max-width: 479px) { #roomTypeEditModal .modal-content, #editBookingModal .modal-content, #sendEmailModal .modal-content, #woViewModal .modal-content, #roomInstanceModal .modal-content, #galleryModal .modal-content, #amenitiesModal .modal-content { border-radius: 20px 20px 0 0; padding: 1.25rem; max-height: 94vh; } /* woViewModal 工單詳情 header */ #woViewModal .flex.justify-between.items-center { flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* space-x-2 在小螢幕改 gap */ .space-x-2 > * + * { margin-left: 0.375rem !important; } } /* ================================================================= 41. PAGE HEADER — flex-between 在所有螢幕正確換行 ================================================================= */ .page-header { flex-wrap: wrap; } @media (max-width: 767px) { .page-header { flex-direction: column; align-items: flex-start; } /* Header 右側按鈕組 */ .page-header > div:last-child, .page-header > .flex:last-child { width: 100%; flex-wrap: wrap; gap: 0.5rem; } } /* ================================================================= 36. USER MODAL — 新增帳號 RWD ================================================================= */ #userModal .modal-content { max-height: 92vh; overflow-y: auto; width: 100%; } /* 權限 checkbox grid — 小螢幕改為 1 欄 */ @media (max-width: 639px) { #userModal [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 0.625rem !important; } #userModal .modal-content { padding: 1.5rem; } #userModal .form-group input, #userModal .form-group select { font-size: 16px; /* 防止 iOS 自動縮放 */ } } @media (max-width: 479px) { #userModal .modal-content { padding: 1.25rem; border-radius: 20px 20px 0 0; max-height: 94vh; } #userModal h2 { font-size: 1.25rem; margin-bottom: 1.25rem; } } /* ================================================================= 37. INVENTORY MODAL — 新增庫存品項 RWD ================================================================= */ #inventoryModal .modal-content { max-height: 92vh; overflow-y: auto; width: 100%; } /* 縮小 header 和 form padding 在小螢幕 */ @media (max-width: 639px) { #inventoryModal .modal-content > div:first-child { padding: 1.25rem 1.25rem 1rem !important; } #inventoryForm { padding: 1.25rem !important; } #inventoryModal h2 { font-size: 1.25rem !important; } /* 數量 & 閾值 2-col → 1-col */ #inventoryForm [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 1rem !important; } #invName, #invCode, #invQuantity, #invThreshold { font-size: 16px !important; /* 防止 iOS 縮放 */ } /* 按鈕全寬 */ #inventoryForm [style*="justify-content: flex-end"] { flex-direction: column-reverse; } #inventoryForm [style*="justify-content: flex-end"] button { width: 100%; justify-content: center; } } @media (max-width: 479px) { #inventoryModal .modal-content { border-radius: 20px 20px 0 0; max-height: 94vh; } #inventoryModal .modal-content > div:first-child { padding: 1rem 1rem 0.875rem !important; } #inventoryForm { padding: 1rem !important; } }