/* ========================================================================== GLOBAL MOBILE / TABLET RESPONSIVE OVERRIDES -------------------------------------------------------------------------- Loaded once via theme_head.php, so it applies to EVERY page (MA dashboard, visit, records, availability, feedback, reports, profile, simptom, and the visitor-facing pages too) without editing each page's own CSS file. Because theme_head.php is always included LAST inside , this file is always the last stylesheet loaded, so these rules naturally win over each page's own (and sometimes inconsistent / broken) responsive rules. Goal: let a Medical Assistant (MA) comfortably use and monitor the whole system from a phone - the icon sidebar becomes a fixed bottom nav bar (thumb-reachable, always visible, never hidden), headers wrap instead of overflowing, grids/forms drop to a single column, and tables/calendars stay usable on a small screen. ========================================================================== */ html, body { overflow-x: hidden; } img, svg, canvas { max-width: 100%; } /* ========================================================================== 1. TABLET (<= 1024px) - tighten up multi-column grids before phone size ========================================================================== */ @media (max-width: 1024px) { .grid-content, .top-dashboard-row, .availability-grid, .profile-grid { grid-template-columns: 1fr !important; } .kpi-container, .stats-grid, .report-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ========================================================================== 2. PHONE (<= 768px) - main layout change: sidebar -> fixed bottom nav ========================================================================== */ @media (max-width: 768px) { /* --- App shell --- */ .app-window { display: block !important; flex-direction: column !important; padding: 12px !important; gap: 12px !important; /* leave room so content never hides behind the fixed bottom nav */ padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; } .dashboard-body { width: 100% !important; gap: 14px !important; } /* Grid/flex items default to a content-based minimum width, which lets a wide table (or anything else) force its ancestor tracks wider than the screen - breaking .custom-table-container's own horizontal scroll and scrolling the ENTIRE page instead. Force them to shrink to the viewport so only the table itself scrolls. */ .grid-content, .main-column, .right-column, .grid-content > *, .dashboard-body > * { min-width: 0 !important; } .custom-table-container { max-width: 100% !important; } /* --- Sidebar becomes a fixed bottom navigation bar --- */ .slim-sidebar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 0 !important; border-width: 1px 0 0 0 !important; z-index: 1000; gap: 4px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .slim-sidebar::-webkit-scrollbar { display: none !important; } /* logo isn't needed once the sidebar is a bottom bar - saves space */ .slim-sidebar .logo-circle { display: none !important; } .icon-nav { flex-direction: row !important; flex: 1 1 auto !important; justify-content: space-around !important; align-items: center !important; gap: 2px !important; overflow-x: auto !important; scrollbar-width: none !important; } .icon-nav::-webkit-scrollbar { display: none !important; } .nav-icon, .nav-icon.logout { width: 42px !important; height: 42px !important; flex-shrink: 0 !important; } /* --- Top header wraps instead of overflowing --- */ .top-header { flex-wrap: wrap !important; row-gap: 10px !important; padding: 12px 16px !important; } .page-title { font-size: 16px !important; } .search-bar { width: 100% !important; order: 3 !important; } .user-profile { gap: 10px !important; } /* --- Force every content grid used across MA pages to one column --- */ .grid-content, .top-dashboard-row, .kpi-container, .stats-grid, .report-metrics-grid, .report-filter-grid, .availability-grid, .profile-grid, .form-grid, .form-row-2, .notify-modal-grid { grid-template-columns: 1fr !important; } .form-row { flex-direction: column !important; } .hero-quick-actions { flex-direction: column !important; } /* --- Tables: scroll horizontally with touch, keep text legible --- */ .custom-table-container { -webkit-overflow-scrolling: touch !important; } .data-table { min-width: 640px; font-size: 12.5px; } .data-table th, .data-table td { padding: 10px 12px !important; } /* --- Availability calendar: compact cells so 7 columns still fit --- */ .calendar-main-card { padding: 16px !important; } .calendar-header-toolbar { flex-wrap: wrap !important; gap: 10px !important; } .calendar-grid-table { gap: 6px !important; } .cal-cell { min-height: 56px !important; padding: 6px !important; border-radius: 10px !important; } .date-num { font-size: 12px !important; } .status-pill { font-size: 8px !important; padding: 2px 5px !important; } .legend-items { flex-wrap: wrap !important; gap: 8px !important; font-size: 11px !important; } /* --- Comfortable tap targets on touch screens --- */ button, .btn-filter-submit, .btn-filter-reset, .action-btn, .submit-btn, .btn-save-availability { min-height: 44px; } /* --- Modals: near full-screen so forms are usable on a small screen --- */ .modal-box { width: calc(100% - 24px) !important; margin: 12px !important; max-height: 85vh !important; overflow-y: auto !important; } } /* ========================================================================== 3. SMALL PHONE (<= 480px) - extra compaction for narrow devices ========================================================================== */ @media (max-width: 480px) { .kpi-container, .stats-grid, .report-metrics-grid { grid-template-columns: 1fr !important; } .page-title { font-size: 15px !important; } .nav-icon, .nav-icon.logout { width: 38px !important; height: 38px !important; } .data-table { min-width: 560px; font-size: 12px; } .user-info { display: none !important; } }