/* === CHIPGAZ — Mobile-First Optimizations === */ /* For Capacitor APK and mobile browsers */ /* Activated by class="mobile-app" on OR @media (max-width: 768px) + standalone */ /* ===== DETECT: native app (Capacitor) or installed PWA ===== */ @media (display-mode: standalone), (display-mode: fullscreen) { /* Safe area insets for notched phones */ body { padding-top: env(safe-area-inset-top, 0); padding-bottom: 0; } .app-header { padding-top: env(safe-area-inset-top, 0); height: calc(52px + env(safe-area-inset-top, 0)); } #bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); height: calc(60px + env(safe-area-inset-bottom, 0)); } } /* ===== MOBILE LAYOUT (<= 768px) ===== */ @media (max-width: 768px) { /* --- Disable text selection for app-like feel --- */ .app-header, #bottom-nav, .week-nav, .btn, .apt-card, .worker-item, .waitlist-card, .worker-select-item { -webkit-user-select: none; user-select: none; } /* --- Smooth touch scrolling everywhere --- */ .modal-overlay, .waitlist-items, .search-results, .service-dropdown, .dayview-container { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Schedule container: reset desktop overflow-x so body scrolls */ .schedule-container { overflow-x: visible; } /* --- Prevent pull-to-refresh in app --- */ body { overscroll-behavior-y: contain; } /* ===== HEADER: compact, native feel ===== */ .app-header { height: 48px; padding: 0 12px; position: sticky; top: 0; z-index: 100; } .app-header h1 { font-size: 16px; letter-spacing: 1px; } .header-nav { gap: 2px; } .header-nav button { padding: 6px 10px; font-size: 12px; min-height: 36px; } .theme-toggle { width: 34px; height: 34px; font-size: 16px; margin-left: 4px; } /* ===== WEEK NAV: redesigned for touch ===== */ .week-nav { padding: 8px 10px; gap: 5px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; } .week-nav::-webkit-scrollbar { display: none; } .week-nav button { width: 38px; height: 38px; flex-shrink: 0; font-size: 18px; border-radius: 10px; -webkit-tap-highlight-color: transparent; } .week-nav .week-label { font-size: 13px; min-width: 130px; flex-shrink: 0; } .btn-today { height: 38px !important; line-height: 38px !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 12px !important; flex-shrink: 0; } .btn-filter-today { height: 38px !important; padding: 0 14px !important; border-radius: 10px !important; font-size: 12px !important; flex-shrink: 0; } .btn-refresh, .btn-search-toggle, .btn-export, .btn-worker-filter, .btn-dayview-toggle { height: 38px !important; padding: 0 12px !important; border-radius: 10px !important; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } /* ===== SCHEDULE: card-based mobile layout ===== */ .schedule-container { padding: 8px; } .schedule-table tr.worker-row { margin-bottom: 10px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid var(--border); overflow: hidden; } .schedule-table .worker-name-cell { padding: 12px 14px; font-size: 15px; font-weight: 700; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 2; } .schedule-table td.schedule-cell { padding: 10px 12px 14px; border-left: none; border-right: none; } /* Day label in mobile */ .schedule-table td.schedule-cell:before { font-size: 12px; font-weight: 800; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } /* ===== APPOINTMENT CARDS: big touch targets ===== */ .apt-card { padding: 12px 40px 12px 12px; margin-bottom: 8px; font-size: 14px; min-height: 48px; border-radius: 10px; -webkit-tap-highlight-color: transparent; /* Prevent accidental scroll while tapping */ touch-action: manipulation; } .apt-card .apt-time { font-size: 13px; font-weight: 700; margin-bottom: 2px; } .apt-card .apt-client { font-size: 14px; font-weight: 600; } .apt-card .apt-service { font-size: 12px; margin-top: 2px; } .apt-card .apt-note { font-size: 11px; max-width: 100%; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .apt-card .apt-phone a { font-size: 13px; display: inline-block; padding: 2px 0; } /* Done button: bigger for fingers */ .btn-apt-done { width: 32px; height: 32px; font-size: 17px; line-height: 28px; top: 8px; right: 6px; border-width: 2px; } .btn-apt-done:active { transform: scale(0.9); background: var(--success); } /* Add appointment button */ .apt-add-btn { height: 48px; line-height: 48px; font-size: 24px; border-radius: 10px; opacity: 0.6; margin-top: 6px; -webkit-tap-highlight-color: transparent; } /* Count badge */ .apt-count-badge { position: static; display: inline-block; margin-bottom: 6px; margin-right: 6px; width: 24px; height: 24px; line-height: 24px; font-size: 12px; border-radius: 8px; } /* Day off buttons */ .btn-set-dayoff { opacity: 1; position: static; display: inline-block; width: 36px; height: 36px; font-size: 14px; line-height: 34px; margin-top: 6px; border-radius: 10px; } .btn-remove-dayoff { min-height: 40px; padding: 8px 16px; font-size: 13px; border-radius: 8px; font-weight: 600; } /* ===== MODALS: bottom-sheet style ===== */ .modal-overlay { display: none; align-items: flex-end; } .modal-overlay.open { display: flex; } .modal-content { margin: 0; border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)); min-height: auto; width: 100%; max-width: 100%; animation: slideUpMobile 0.3s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes slideUpMobile { from { transform: translateY(100%); opacity: 0.8; } to { transform: translateY(0); opacity: 1; } } /* Bottom-sheet drag handle */ .modal-content::before { content: ''; display: block; width: 36px; height: 4px; background: var(--text-muted); opacity: 0.3; border-radius: 2px; margin: 0 auto 16px; } .modal-content h2 { font-size: 18px; margin-bottom: 18px; text-align: center; } /* PIN modal (server/login) — centered on mobile */ .modal-pin-content { max-width: 100%; margin-top: 0; border-radius: 20px 20px 0 0; } .modal-pin-content::before { /* Override accent line — use drag handle instead */ display: block; width: 36px; height: 4px; background: var(--text-muted); opacity: 0.3; border-radius: 2px; margin: 0 auto 16px; position: static; left: auto; right: auto; } .modal-pin-content input { font-size: 18px !important; letter-spacing: 0 !important; text-align: left !important; } /* ===== FORMS: mobile-optimized ===== */ .form-group { margin-bottom: 16px; } .form-group label { font-size: 12px; margin-bottom: 6px; font-weight: 700; } /* Checkboxes excluded: -webkit-appearance:none removes the tick entirely and min-height stretches them into a blank box. */ .form-group input:not([type="checkbox"]), .form-group select, .form-group textarea { font-size: 16px !important; /* Prevents iOS zoom on focus */ padding: 12px 14px; min-height: 48px; border-radius: 10px; -webkit-appearance: none; } .form-group input:not([type="checkbox"]):focus, .form-group select:focus, .form-group textarea:focus { /* Stronger focus ring on mobile */ box-shadow: 0 0 0 3px var(--accent-glow); } .form-group select { /* Custom dropdown arrow — bigger area */ background-position: right 14px center; padding-right: 36px; } .form-group textarea { min-height: 80px; } /* Input type=color — bigger */ input[type="color"] { height: 48px; border-radius: 10px; } /* ===== BUTTONS: fat fingers friendly ===== */ .btn { min-height: 48px; font-size: 15px; padding: 12px 18px; border-radius: 12px; font-weight: 600; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn:active { transform: scale(0.97); transition: transform 0.1s; } .btn-group { flex-direction: column; gap: 10px; } .btn-group .btn { width: 100%; } /* Primary button: full-width prominent */ .btn-primary { font-weight: 700; } /* Danger button: needs confirmation affordance */ .btn-danger { opacity: 0.9; } /* ===== BOTTOM NAV: bigger, centered ===== */ #bottom-nav { height: calc(60px + env(safe-area-inset-bottom, 0)); padding-bottom: env(safe-area-inset-bottom, 0); } #bottom-nav button { font-size: 10px; padding: 6px 4px; min-height: 56px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; display: flex; flex-direction: column; align-items: center; justify-content: center; } #bottom-nav button .nav-icon { font-size: 24px; margin-bottom: 2px; } #bottom-nav button.active { font-weight: 700; } /* ===== FAB: bigger, more accessible ===== */ .fab { bottom: calc(68px + env(safe-area-inset-bottom, 0)); right: 16px; width: 56px; height: 56px; font-size: 26px; line-height: 56px; border-radius: 16px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .fab:active { transform: scale(0.92); } /* ===== SEARCH: full-width, comfortable ===== */ .search-bar { padding: 8px 10px; } .search-bar input { font-size: 16px !important; min-height: 44px; border-radius: 10px; } .search-results { max-height: 50vh; } .search-result-item { padding: 14px 14px; font-size: 14px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; } /* ===== SCHEDULE TOTALS: compact pills ===== */ .schedule-totals { padding: 8px 10px; gap: 12px; font-size: 12px; } /* ===== SETTINGS: spacious ===== */ .settings-section { padding: 16px 14px; } .settings-section h2 { font-size: 16px; padding-bottom: 10px; } .worker-item { padding: 14px 14px; min-height: 56px; border-radius: 12px; margin-bottom: 10px; } .worker-item .worker-info .name { font-size: 16px; } .worker-item .worker-info .details { font-size: 13px; margin-top: 2px; } .worker-item .worker-actions { gap: 8px; } .worker-item .worker-actions button { min-width: 40px; min-height: 40px; padding: 8px 12px; font-size: 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .add-worker-form { gap: 8px; flex-wrap: wrap; } .add-worker-form input { min-height: 48px; font-size: 16px !important; border-radius: 10px; flex: 1 1 200px; } .add-worker-form .btn { flex: 0 0 auto; } /* Collapsible headers */ .collapsible-header { padding: 4px 0; min-height: 44px; display: flex; align-items: center; } /* ===== WAITLIST: horizontal scroll with snap ===== */ .waitlist-panel { padding: 10px 12px; } .waitlist-items { scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; } .waitlist-card { scroll-snap-align: start; min-width: 180px; max-width: 240px; padding: 12px 28px 12px 12px; border-radius: 12px; font-size: 13px; } .waitlist-card .wl-client { font-size: 14px; margin-bottom: 4px; } .waitlist-card .wl-remove { width: 28px; height: 28px; font-size: 18px; display: flex; align-items: center; justify-content: center; top: 6px; right: 4px; } .waitlist-header .btn-sm { min-height: 40px !important; padding: 8px 16px !important; font-size: 13px !important; border-radius: 10px; } /* ===== WORKER SELECT MODAL ===== */ .worker-select-item { padding: 16px 16px; min-height: 56px; border-radius: 12px; margin-bottom: 10px; font-size: 16px; } .worker-select-item .worker-dot { width: 16px; height: 16px; margin-right: 14px; } /* ===== DAY VIEW: mobile-friendly ===== */ .dayview-nav { padding: 10px 12px; gap: 8px; } .dayview-nav button { width: 40px; height: 40px; border-radius: 10px; } .dv-date-label { font-size: 15px; min-width: 160px; } .dayview-table th { font-size: 11px; padding: 8px 4px; min-width: 80px; } .dayview-table td { height: 40px; } .dayview-apt { font-size: 11px; padding: 3px 5px; border-radius: 6px; } /* ===== TRANSFER SECTION ===== */ .transfer-section { padding: 14px; border-radius: 12px; margin-top: 14px; } /* ===== CLIENT HISTORY ===== */ .history-item { padding: 10px 10px; font-size: 13px; border-radius: 0 10px 10px 0; margin-bottom: 6px; } /* ===== SERVICE DROPDOWN ===== */ .service-dropdown { max-height: 200px; border-radius: 0 0 12px 12px; } .service-dropdown-item { padding: 14px 14px; font-size: 15px; min-height: 48px; display: flex; align-items: center; } /* ===== EMPTY STATE ===== */ .empty-state { padding: 40px 20px; } .empty-state .icon { font-size: 56px; } .empty-state p { font-size: 16px; } /* ===== LOADING: bigger spinner ===== */ .loading-spinner { width: 44px; height: 44px; } /* ===== CONFIRM/ALERT MODALS ===== */ #modal-confirm .modal-content, #modal-alert .modal-content { max-width: 100%; } #confirm-message, #alert-message { font-size: 16px; padding: 18px 14px; } .modal-header { font-size: 18px; text-align: center; } /* Export modal */ #modal-export .modal-content { max-width: 100%; } } /* ===== EXTRA SMALL PHONES (<400px) ===== */ @media (max-width: 400px) { .app-header { height: 44px; } .app-header h1 { font-size: 14px; } .header-nav button { padding: 4px 7px; font-size: 11px; } .theme-toggle { width: 30px; height: 30px; font-size: 14px; } .week-nav .week-label { font-size: 12px; min-width: 110px; } .week-nav button { width: 34px; height: 34px; } .btn-today, .btn-filter-today { height: 34px !important; padding: 0 10px !important; font-size: 11px !important; } .apt-card { padding: 10px 36px 10px 10px; font-size: 13px; } .modal-content { padding: 16px 12px; } } /* ===== ACTIVE STATES for touch feedback ===== */ @media (hover: none) and (pointer: coarse) { /* True touch device — add tap feedback */ .apt-card:active { transform: scale(0.98); transition: transform 0.1s; } .worker-item:active { transform: scale(0.98); transition: transform 0.1s; } .waitlist-card:active { transform: scale(0.97); transition: transform 0.1s; } .worker-select-item:active { background: var(--accent-soft); transform: scale(0.98); transition: all 0.1s; } .search-result-item:active { background: var(--accent-soft); } .service-dropdown-item:active { background: var(--accent-soft); } /* Disable hover effects on touch — they stick */ .apt-card:hover { transform: none; box-shadow: var(--shadow-sm); } .worker-item:hover { background: var(--bg-card); border-color: var(--border); } .btn:hover { transform: none; } .btn-primary:hover { box-shadow: none; } } /* ===== LANDSCAPE PHONE ===== */ @media (max-height: 500px) and (max-width: 900px) { /* Landscape phone: keep header minimal */ .app-header { height: 40px; } .app-header h1 { font-size: 14px; } #bottom-nav { height: 48px; } #bottom-nav button .nav-icon { font-size: 18px; } /* Modals: max-height adjusted */ .modal-content { max-height: 88vh; border-radius: 16px 16px 0 0; } .fab { bottom: 56px; width: 44px; height: 44px; font-size: 20px; line-height: 44px; } }